.demo-page .app-header__logo {
  text-decoration: none;
}

.demo-page .app-header__logo b {
  letter-spacing: 0.35rem;
}

.demo-shell-note {
  background: var(--app-surface);
  border: 1px dashed var(--app-border-color);
  color: var(--app-text-muted);
}

.demo-sidebar-section {
  padding: 0.8rem 1rem 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--app-text-muted);
  text-transform: uppercase;
}

.demo-disabled {
  opacity: 0.6;
  pointer-events: none;
}

.demo-placeholder-card {
  border: 1px dashed var(--app-border-color);
  background: linear-gradient(145deg, var(--app-surface), var(--app-surface-alt));
}

.demo-doc-description .card,
.demo-doc-description .card-body {
  background: var(--app-surface);
  color: var(--app-text);
  border-color: var(--app-border-color);
}

.demo-doc-actions {
  gap: 0.5rem;
}

.demo-doc-sidebar {
  position: sticky;
  top: 5rem;
  max-height: calc(100vh - 6rem);
  overflow: auto;
}

.demo-doc-description img {
  max-width: 100%;
  height: auto;
}

.demo-sales-summary-empty {
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--app-text-muted);
  text-align: center;
  padding: 2rem;
}

.demo-product-card .card-img-top {
  object-fit: cover;
  height: 150px;
}

.demo-order-row + .demo-order-row {
  border-top: 1px dashed var(--app-border-color);
}

.demo-modal-note {
  font-size: 0.8rem;
  color: var(--app-text-muted);
}

.payment-method-choice {
  min-height: 72px;
  border-radius: 0.8rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease,
    background-color 0.18s ease;
}

.payment-method-choice small {
  display: block;
}

.payment-method-choice:hover,
.payment-method-choice:focus {
  transform: translateY(-1px);
}

.payment-readonly-field[readonly] {
  background: var(--bs-tertiary-bg);
  color: var(--app-text);
  border-color: var(--app-border-color);
}

.payment-currency-prefix {
  background: var(--bs-tertiary-bg);
  color: var(--app-text-muted);
  border-color: var(--app-border-color);
}

.payment-return-field[readonly] {
  background: var(--bs-tertiary-bg);
  color: var(--app-text);
  border-color: var(--app-border-color);
  opacity: 1;
}

.payment-summary-panel {
  background: linear-gradient(145deg, var(--app-surface), var(--app-surface-alt));
  border-color: var(--app-border-color) !important;
}

.payment-summary-panel .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--app-text);
  --bs-table-border-color: var(--app-border-color);
  margin-bottom: 0;
}

.payment-summary-panel .input-group-text {
  background: var(--bs-tertiary-bg);
  color: var(--app-text-muted);
  border-color: var(--app-border-color);
}

.payment-summary-panel .form-control {
  border-color: var(--app-border-color);
}

[data-bs-theme="light"] .payment-method-choice.btn-outline-secondary {
  background: rgba(255, 255, 255, 0.55);
  border-color: var(--app-border-color) !important;
  color: var(--app-text-muted) !important;
}

[data-bs-theme="light"] .payment-method-choice.btn-outline-secondary:hover,
[data-bs-theme="light"] .payment-method-choice.btn-outline-secondary:focus {
  background: var(--bs-secondary-bg);
  color: var(--app-text) !important;
}

[data-bs-theme="light"] .payment-method-choice.btn-primary {
  background: linear-gradient(145deg, #ff5a36, #ff3b2f);
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(231, 76, 60, 0.22);
}

[data-bs-theme="dark"] .payment-readonly-field[readonly],
[data-bs-theme="dark"] .payment-return-field[readonly],
[data-bs-theme="dark"] .payment-currency-prefix,
[data-bs-theme="dark"] .payment-summary-panel .input-group-text {
  background: #213544;
  color: #dbe7ee;
  border-color: #4b6478;
}

[data-bs-theme="dark"] .payment-return-field[readonly] {
  background: #18242e;
  color: #f3f7fa;
}

[data-bs-theme="dark"] #amount_paid.form-control,
[data-bs-theme="dark"] .payment-summary-panel .form-control,
[data-bs-theme="dark"] .payment-summary-panel .form-select,
[data-bs-theme="dark"] #modalPaymentSummary .form-control,
[data-bs-theme="dark"] #modalPaymentSummary .form-select {
  background-color: #2a4152;
  color: #ecf3f7;
  border-color: #4b6478;
}

[data-bs-theme="dark"] #modalPaymentSummary .form-control::placeholder,
[data-bs-theme="dark"] #modalPaymentSummary textarea::placeholder {
  color: rgba(236, 243, 247, 0.52);
}

[data-bs-theme="dark"] #modalPaymentSummary .form-control:focus,
[data-bs-theme="dark"] #modalPaymentSummary .form-select:focus {
  background-color: #30485d;
  border-color: #7ed6df;
  box-shadow: 0 0 0 0.2rem rgba(126, 214, 223, 0.15);
  color: #f3f7fa;
}

[data-bs-theme="dark"] .payment-summary-panel {
  background: linear-gradient(145deg, #2a4152, #243746);
  border-color: #415b76 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

[data-bs-theme="dark"] .payment-summary-panel .table {
  --bs-table-color: #ecf3f7;
  --bs-table-border-color: rgba(143, 185, 214, 0.2);
}

[data-bs-theme="dark"] .payment-method-choice.btn-outline-secondary {
  background: rgba(16, 32, 44, 0.58);
  border-color: #415b76 !important;
  color: #d5e0e7 !important;
}

[data-bs-theme="dark"] .payment-method-choice.btn-outline-secondary:hover,
[data-bs-theme="dark"] .payment-method-choice.btn-outline-secondary:focus {
  background: rgba(36, 55, 70, 0.96);
  border-color: #8fb9d6 !important;
  color: #f3f7fa !important;
  box-shadow: 0 10px 22px rgba(8, 10, 12, 0.22);
}

[data-bs-theme="dark"] .payment-method-choice.btn-primary {
  background: linear-gradient(145deg, #ff5a36, #ff3b2f);
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 14px 28px rgba(231, 76, 60, 0.28);
}

[data-bs-theme="dark"] #pay-buttons .btn-outline-secondary {
  background: rgba(16, 32, 44, 0.42);
  border-color: #415b76 !important;
  color: #d5e0e7 !important;
}

[data-bs-theme="dark"] #pay-buttons .btn-outline-secondary:hover,
[data-bs-theme="dark"] #pay-buttons .btn-outline-secondary:focus {
  background: rgba(36, 55, 70, 0.92);
  border-color: #7ed6df !important;
  color: #f3f7fa !important;
}

[data-bs-theme="dark"] #amount_paid.is-invalid {
  border-color: #ff7675;
}

[data-bs-theme="dark"] #modalPaymentSummary .invalid-feedback {
  color: #ff9a99;
}

.demo-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: var(--bs-secondary-bg);
  color: var(--app-text);
  font-size: 0.8rem;
}

.demo-doc-content h1,
.demo-doc-content h2,
.demo-doc-content h3,
.demo-doc-content h4,
.demo-doc-content h5,
.demo-doc-content h6 {
  color: var(--app-text);
}

.demo-page .dropdown-menu {
  z-index: 1080;
}

.demo-page .settings-menu {
  min-width: 14rem;
  padding: 0.35rem;
  border: 1px solid var(--app-border-color);
  box-shadow: 0 18px 40px rgba(8, 10, 12, 0.12);
}

.demo-page .settings-menu .dropdown-item {
  border-radius: 0.65rem;
  padding: 0.7rem 0.9rem;
  color: var(--app-text);
}

.demo-page .settings-menu .dropdown-item:hover,
.demo-page .settings-menu .dropdown-item:focus {
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary);
}

.demo-page .settings-menu .dropdown-item .fad,
.demo-page .settings-menu .dropdown-item .fa {
  color: inherit;
}

[data-bs-theme="dark"] .demo-page .settings-menu {
  background: #2a4152;
  border-color: #415b76;
  box-shadow: 0 18px 40px rgba(8, 10, 12, 0.35);
}

[data-bs-theme="dark"] .demo-page .settings-menu .dropdown-item:hover,
[data-bs-theme="dark"] .demo-page .settings-menu .dropdown-item:focus {
  background: rgba(126, 214, 223, 0.15);
  color: #f3f7fa;
}

.dashboard-filter-row {
  max-width: 980px;
}

.dashboard-filter-control {
  min-height: 42px;
}

.dashboard-filter-actions {
  min-height: 42px;
}

.dashboard-filter-actions .dashboard-action-btn {
  min-width: 46px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 991.98px) {
  .demo-doc-sidebar {
    position: static;
    max-height: none;
  }
}