/* Dark theme — matches Sudantop React `new` project */

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f0f12;
  --surface: #18181b;
  --surface-elevated: #1f1f23;
  --border: #2e2e35;
  --text: #f4f4f5;
  --muted: #a1a1aa;
  --brand-lt: rgba(244, 63, 94, 0.12);
  --accent-soft: rgba(147, 51, 234, 0.16);
  --muted-bg: #1f1f23;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-hover: 0 14px 36px rgba(244, 63, 94, 0.15);
  --header-bg: rgba(15, 15, 18, 0.92);
  --overlay-bg: rgba(0, 0, 0, 0.72);
  --input-bg: #0f0f12;
  --alert-success-bg: #052e1a;
  --alert-success-text: #6ee7b7;
  --alert-danger-bg: #3f1212;
  --alert-danger-text: #fca5a5;
  --alert-info-bg: #172554;
  --alert-info-text: #93c5fd;
  --badge-cash-bg: #052e1a;
  --badge-card-bg: #172554;
  --badge-transfer-bg: #451a03;
  --table-hover: rgba(244, 63, 94, 0.08);
}

html[data-theme="dark"] body {
  background: var(--bg);
  color: var(--text);
}

html[data-theme="dark"] .app-header,
html[data-theme="dark"] .pos-header {
  background: var(--header-bg);
  border-color: var(--border);
}

html[data-theme="dark"] .app-nav a:hover,
html[data-theme="dark"] .app-nav a.active {
  background: var(--brand-lt);
  color: #fb7185;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .dash-stat-card,
html[data-theme="dark"] .quick-card,
html[data-theme="dark"] .login-box,
html[data-theme="dark"] body.admin-panel .section,
html[data-theme="dark"] body.admin-panel .panel-header,
html[data-theme="dark"] body.admin-panel .panel-nav a,
html[data-theme="dark"] body.admin-panel .form-group {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

html[data-theme="dark"] body.admin-panel .section .form-group,
html[data-theme="dark"] body.admin-panel .admin-form-block {
  background: transparent;
  border: none;
  border-top-color: var(--border);
  box-shadow: none;
  color: var(--text);
}

html[data-theme="dark"] body.admin-panel .category-count {
  background: color-mix(in srgb, var(--brand) 16%, var(--surface));
  border-color: color-mix(in srgb, var(--brand) 28%, var(--border));
  color: #fda4af;
}

html[data-theme="dark"] body.admin-panel .admin-form-block--nested {
  border-top-color: var(--border);
}

html[data-theme="dark"] body.admin-panel .category-group {
  background: color-mix(in srgb, #f43f5e 8%, var(--surface));
}

html[data-theme="dark"] .appt-tile--rose {
  background: linear-gradient(135deg, color-mix(in srgb, #f43f5e 14%, var(--surface)), color-mix(in srgb, #9333ea 6%, var(--surface)));
  border-color: color-mix(in srgb, #f43f5e 24%, var(--border));
}

html[data-theme="dark"] .appt-tile--purple {
  background: linear-gradient(135deg, color-mix(in srgb, #9333ea 14%, var(--surface)), color-mix(in srgb, #6366f1 6%, var(--surface)));
  border-color: color-mix(in srgb, #9333ea 24%, var(--border));
}

html[data-theme="dark"] .appt-tile--amber {
  background: linear-gradient(135deg, color-mix(in srgb, #f59e0b 12%, var(--surface)), color-mix(in srgb, #f43f5e 5%, var(--surface)));
  border-color: color-mix(in srgb, #f59e0b 24%, var(--border));
}

html[data-theme="dark"] .appt-tile--emerald {
  background: linear-gradient(135deg, color-mix(in srgb, #14b8a6 10%, var(--surface)), color-mix(in srgb, #9333ea 5%, var(--surface)));
  border-color: color-mix(in srgb, #14b8a6 22%, var(--border));
}

html[data-theme="dark"] .appt-tile textarea {
  background: var(--input-bg);
  border-color: color-mix(in srgb, var(--border) 70%, transparent);
}

html[data-theme="dark"] .pkg-tile__price {
  color: #fb7185;
}

html[data-theme="dark"] .appt-tile input,
html[data-theme="dark"] .appt-tile select,
html[data-theme="dark"] .appt-service-line input,
html[data-theme="dark"] .appt-service-line select {
  background: color-mix(in srgb, var(--input-bg) 80%, transparent);
}

html[data-theme="dark"] .appt-service-line {
  background: linear-gradient(135deg, color-mix(in srgb, #9333ea 12%, var(--surface)), color-mix(in srgb, #f43f5e 6%, var(--surface)));
  border-color: color-mix(in srgb, #9333ea 22%, var(--border));
}

html[data-theme="dark"] .appt-duration-hint {
  color: #c084fc;
}

html[data-theme="dark"] .appt-time-part__label,
html[data-theme="dark"] .appt-time-sep {
  color: #c084fc;
}

html[data-theme="dark"] .appt-time-hint {
  color: color-mix(in srgb, #c084fc 70%, var(--muted));
}

html[data-theme="dark"] .appt-status-select--scheduled { color: #fbbf24; }
html[data-theme="dark"] .appt-status-select--confirmed { color: #34d399; }
html[data-theme="dark"] .appt-status-select--completed { color: #c084fc; }
html[data-theme="dark"] .appt-status-select--cancelled { color: #f87171; }
html[data-theme="dark"] .appt-status-select--no_show { color: #c084fc; }

html[data-theme="dark"] .dash-stat-card__appt-count--completed {
  color: #c084fc;
}

html[data-theme="dark"] .table th {
  background: var(--muted-bg);
  color: var(--text);
}

html[data-theme="dark"] .table td {
  background: transparent;
  color: var(--text);
}

html[data-theme="dark"] .table tr:hover td {
  background: var(--table-hover);
}

html[data-theme="dark"] .table-wrap {
  border-color: var(--border);
}

html[data-theme="dark"] .form-input,
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .tab-btn {
  background: var(--input-bg);
  color: var(--text);
  border-color: var(--border);
}

html[data-theme="dark"] .form-input:focus,
html[data-theme="dark"] .field input:focus,
html[data-theme="dark"] .field select:focus,
html[data-theme="dark"] .field textarea:focus {
  background: var(--surface);
  border-color: #f43f5e;
}

html[data-theme="dark"] .field select option {
  background: var(--surface);
  color: var(--text);
}

html[data-theme="dark"] .btn-ghost {
  color: var(--muted);
  border-color: var(--border);
}

html[data-theme="dark"] .btn-ghost:hover {
  background: var(--brand-lt);
  color: var(--text);
}

html[data-theme="dark"] .btn-secondary {
  background: var(--brand-lt);
  color: #fda4af;
  border-color: #881337;
}

html[data-theme="dark"] .alert-success {
  background: var(--alert-success-bg);
  color: var(--alert-success-text);
}

html[data-theme="dark"] .alert-danger {
  background: var(--alert-danger-bg);
  color: var(--alert-danger-text);
}

html[data-theme="dark"] .alert-info {
  background: var(--alert-info-bg);
  color: var(--alert-info-text);
}

html[data-theme="dark"] .badge-cash {
  background: var(--badge-cash-bg);
}

html[data-theme="dark"] .badge-card {
  background: var(--badge-card-bg);
}

html[data-theme="dark"] .badge-transfer {
  background: var(--badge-transfer-bg);
}

html[data-theme="dark"] body.admin-panel .badge-active {
  background: var(--badge-cash-bg);
}

html[data-theme="dark"] body.admin-panel .badge-inactive,
html[data-theme="dark"] body.admin-panel .badge-low {
  background: var(--alert-danger-bg);
}

html[data-theme="dark"] body.pos-page {
  background:
    radial-gradient(ellipse 100% 60% at 100% 0%, rgba(244, 63, 94, 0.08), transparent 50%),
    radial-gradient(ellipse 80% 60% at 0% 100%, rgba(147, 51, 234, 0.07), transparent 45%),
    var(--bg);
}

html[data-theme="dark"] .pos-toolbar,
html[data-theme="dark"] .svc-card,
html[data-theme="dark"] .search-bar,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .modal-dialog,
html[data-theme="dark"] .card--cart,
html[data-theme="dark"] .pay-panel,
html[data-theme="dark"] .client-picker,
html[data-theme="dark"] .discount-box {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

html[data-theme="dark"] .search-bar,
html[data-theme="dark"] .search-bar input,
html[data-theme="dark"] .cart-item-body,
html[data-theme="dark"] .svc-card .svc-meta {
  background: var(--input-bg);
  color: var(--text);
}

html[data-theme="dark"] .search-bar input:focus {
  background: var(--surface);
}

html[data-theme="dark"] .cat-tab {
  background: var(--surface);
  color: var(--muted);
  border-color: var(--border);
}

html[data-theme="dark"] .cat-tab.active {
  background: var(--brand-gradient);
  color: #fff;
  border-color: transparent;
}

html[data-theme="dark"] .pos-cart-pill {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.15), var(--surface-elevated));
  color: var(--text);
}

html[data-theme="dark"] .pos-mobile-nav {
  background: var(--header-bg);
  border-color: var(--border);
}

html[data-theme="dark"] .pos-sticky-pay {
  background: linear-gradient(135deg, #0f0f12, var(--surface));
  border-color: var(--border);
}

html[data-theme="dark"] .success-screen {
  background: linear-gradient(180deg, var(--surface), var(--bg));
}

html[data-theme="dark"] .overlay {
  background: var(--overlay-bg);
}

html[data-theme="dark"] .toast {
  background: var(--surface-elevated);
  color: var(--text);
  border-color: var(--border);
}

html[data-theme="dark"] .cart-item,
html[data-theme="dark"] .cart-summary,
html[data-theme="dark"] .totals-block {
  background: var(--surface);
  border-color: var(--border);
}

html[data-theme="dark"] .pay-tab {
  background: var(--surface);
  color: var(--muted);
  border-color: var(--border);
}

html[data-theme="dark"] .pay-tab.active {
  background: var(--accent-soft);
  color: var(--text);
  border-color: #9333ea;
}

html[data-theme="dark"] .dash-stat-card__icon--rose {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.2), rgba(147, 51, 234, 0.15));
  color: #fb7185;
}

html[data-theme="dark"] .dash-stat-card__appt-total-badge {
  background: linear-gradient(145deg, rgba(244, 63, 94, 0.22), rgba(192, 38, 211, 0.18));
  color: #f9a8d4;
  border-color: rgba(244, 114, 182, 0.35);
  box-shadow: 0 4px 16px rgba(219, 39, 119, 0.12);
}

html[data-theme="dark"] .invoice-view-page {
  background: var(--bg);
  color: var(--text);
}

html[data-theme="dark"] .view-toolbar {
  background: var(--surface);
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

html[data-theme="dark"] .view-btn {
  border-color: var(--border);
  color: var(--text);
}

html[data-theme="dark"] .view-btn:hover {
  background: var(--brand-lt);
}

html[data-theme="dark"] .receipt-paper {
  background: #fff;
  color: #1a1510;
}

.theme-toggle {
  min-width: 40px;
  padding: 6px 10px !important;
  font-size: 18px;
  line-height: 1;
}

/* صفحة الهبوط — الوضع الداكن (مثل باقي الشاشات) */
html[data-theme="dark"] .landing-header {
  background: var(--header-bg);
  border-color: var(--border);
}

html[data-theme="dark"] .landing-hero__slide-inner,
html[data-theme="dark"] .landing-feature-card,
html[data-theme="dark"] .landing-testimonial,
html[data-theme="dark"] .landing-partner-card,
html[data-theme="dark"] .landing-trial-form.card,
html[data-theme="dark"] .landing-footer {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

html[data-theme="dark"] .landing-section--muted {
  background: color-mix(in srgb, var(--muted) 8%, var(--bg));
}

html[data-theme="dark"] .landing-mobile-nav,
html[data-theme="dark"] .landing-menu-btn {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

html[data-theme="dark"] .lp-browser,
html[data-theme="dark"] .lp-screen {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}

html[data-theme="dark"] .landing-hero__visual .lp-pos-tile,
html[data-theme="dark"] .landing-hero__visual .lp-pos-cart,
html[data-theme="dark"] .landing-hero__visual .lp-emp-card,
html[data-theme="dark"] .landing-hero__visual .lp-crop {
  background: var(--surface);
  color: var(--text);
}

html[data-theme="dark"] .landing-hero__visual .lp-table th {
  color: var(--muted);
}

html[data-theme="dark"] .landing-hero__visual .lp-pos-tile small,
html[data-theme="dark"] .landing-hero__visual .lp-callout p {
  color: var(--muted);
}

html[data-theme="dark"] .lp-browser__chrome {
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
}