/* sultan al-zahab shared theme — loaded after each page's own styles */
:root,
html:not(.dark-mode) {
  color-scheme: light;
  --bg:#f3f5f7; --bg-2:#e9edf1; --page:#f3f5f7;
  --panel:#ffffff; --panel-2:#f8fafb; --panel2:#f8fafb;
  --p:#ffffff; --p2:#f8fafb; --input:#ffffff;
  --text:#17202a; --t:#17202a; --muted:#6f7b87; --m:#6f7b87;
  --border:rgba(20,32,45,.14); --bd:rgba(20,32,45,.14); --border-strong:rgba(20,32,45,.22);
  --border-gold:rgba(184,137,30,.30); --gold:#b8891e; --gold-2:#c99a2d; --gold-soft:#f3e5bd;
  --accent:#b8891e; --green:#168653; --ok:#168653; --red:#c43d4d; --bad:#c43d4d;
  --shadow:0 16px 42px rgba(18,31,44,.10);
}
html.dark-mode {
  color-scheme: dark;
  --bg:#07090c; --bg-2:#0b0f14; --page:#07090c;
  --panel:#0d1218; --panel-2:#10161d; --panel2:#10161d;
  --p:#0d1218; --p2:#10161d; --input:#090e13;
  --text:#f4f6f8; --t:#f4f6f8; --muted:#8d98a5; --m:#8d98a5;
  --border:rgba(255,255,255,.10); --bd:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.18);
  --border-gold:rgba(216,171,65,.25); --gold:#d8ab41; --gold-2:#f0d486; --gold-soft:rgba(216,171,65,.14);
  --accent:#d8ab41; --green:#19d67f; --ok:#19d67f; --red:#ff5364; --bad:#ff5364;
  --shadow:0 22px 60px rgba(0,0,0,.45);
}

html, body { transition:background-color .22s ease,color .22s ease; }
html:not(.dark-mode) body {
  color:var(--text) !important;
  background:linear-gradient(180deg,#f7f8fa 0%,#eef1f4 100%) !important;
}
html.dark-mode body { color:var(--text); }

/* Main page: keep every section in one coherent palette */
html:not(.dark-mode) .topbar,
html:not(.dark-mode) .navbar,
html:not(.dark-mode) .site-header,
html:not(.dark-mode) header.topbar {
  background:rgba(255,255,255,.94) !important;
  border-color:var(--border) !important;
}
html:not(.dark-mode) .hero {
  background:
    radial-gradient(circle at 50% -20%,rgba(184,137,30,.12),transparent 35%),
    linear-gradient(180deg,#ffffff 0%,#f1f4f6 100%) !important;
  border-color:var(--border) !important;
}
html:not(.dark-mode) .hero::before,
html:not(.dark-mode) .hero::after { opacity:.16 !important; }
html:not(.dark-mode) .brand-text strong,
html:not(.dark-mode) .welcome,
html:not(.dark-mode) .hero-subtitle,
html:not(.dark-mode) .menu,
html:not(.dark-mode) .nav-btn { color:var(--text) !important; }
html:not(.dark-mode) .hero h1 { color:var(--gold) !important; text-shadow:none !important; }
html:not(.dark-mode) .live-clock { background:#fff !important; color:var(--muted) !important; }
html:not(.dark-mode) .ticker-wrap,
html:not(.dark-mode) .dashboard,
html:not(.dark-mode) main { background-color:transparent; }

/* Shared components */
html:not(.dark-mode) .card,
html:not(.dark-mode) .panel,
html:not(.dark-mode) .box,
html:not(.dark-mode) .form-card,
html:not(.dark-mode) .login-card,
html:not(.dark-mode) .balance-card,
html:not(.dark-mode) .stat-card,
html:not(.dark-mode) .table-wrap,
html:not(.dark-mode) .modal-content,
html:not(.dark-mode) .sidebar,
html:not(.dark-mode) section[class*="card"],
html:not(.dark-mode) article[class*="card"] {
  background:var(--panel) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
  box-shadow:var(--shadow);
}
html:not(.dark-mode) input,
html:not(.dark-mode) select,
html:not(.dark-mode) textarea {
  background:var(--input) !important; color:var(--text) !important; border-color:var(--border) !important;
}
html:not(.dark-mode) table { background:var(--panel) !important; color:var(--text) !important; }
html:not(.dark-mode) thead,
html:not(.dark-mode) th { background:var(--panel-2) !important; color:var(--text) !important; }
html:not(.dark-mode) td,
html:not(.dark-mode) th,
html:not(.dark-mode) tr { border-color:var(--border) !important; }
html:not(.dark-mode) h1,
html:not(.dark-mode) h2,
html:not(.dark-mode) h3,
html:not(.dark-mode) h4,
html:not(.dark-mode) h5,
html:not(.dark-mode) h6,
html:not(.dark-mode) label,
html:not(.dark-mode) strong { color:var(--text); }

.theme-toggle {
  height:42px; min-width:44px; padding:0 13px; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border-radius:10px; border:1px solid var(--border); color:var(--text); background:var(--panel);
  font:600 11px "Noto Kufi Arabic","Noto Sans Arabic",Tahoma,Arial,sans-serif; cursor:pointer;
}
.theme-toggle:hover { transform:translateY(-1px); }
.theme-toggle-icon { font-size:16px; line-height:1; }
@media(max-width:700px){ .theme-toggle [data-theme-text]{display:none;} .theme-toggle{padding:0 11px;} }

/* =========================================================
   LIGHT-ONLY FINISH — unified bright pages, cards and buttons
   ========================================================= */
:root,
html,
html.dark-mode,
html:not(.dark-mode) {
  color-scheme: light !important;
  --bg:#f3f6f9 !important;
  --bg-2:#e9eef3 !important;
  --page:#f3f6f9 !important;
  --panel:#ffffff !important;
  --panel-2:#f7f9fb !important;
  --panel2:#f7f9fb !important;
  --p:#ffffff !important;
  --p2:#f7f9fb !important;
  --input:#ffffff !important;
  --text:#17212b !important;
  --t:#17212b !important;
  --muted:#667482 !important;
  --m:#667482 !important;
  --border:rgba(24,39,54,.14) !important;
  --bd:rgba(24,39,54,.14) !important;
  --border-strong:rgba(24,39,54,.24) !important;
  --gold:#a97811 !important;
  --gold-2:#bd8b1c !important;
  --gold-soft:#f2dfaa !important;
  --accent:#a97811 !important;
  --green:#16784b !important;
  --ok:#16784b !important;
  --red:#b93647 !important;
  --bad:#b93647 !important;
  --shadow:0 14px 36px rgba(24,39,54,.10) !important;
}

html body,
html.dark-mode body,
html:not(.dark-mode) body {
  background:linear-gradient(180deg,#f8fafc 0%,#edf2f6 100%) !important;
  color:var(--text) !important;
}

/* Never show the old dark/light switch in light-only edition. */
.theme-toggle { display:none !important; }

/* Header, navigation and hero */
header,
.topbar,
.navbar,
.site-header,
header.topbar,
html.dark-mode header,
html.dark-mode .topbar,
html.dark-mode .navbar,
html.dark-mode .site-header {
  background:#ffffff !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
  box-shadow:0 1px 0 rgba(24,39,54,.08) !important;
}

.hero,
html.dark-mode .hero {
  background:radial-gradient(circle at 50% -20%,rgba(184,137,30,.10),transparent 36%),linear-gradient(180deg,#ffffff 0%,#f3f6f9 100%) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}

/* All card-like areas */
.card,.panel,.box,.form-card,.login-card,.balance-card,.stat-card,.table-wrap,
.modal-content,.sidebar,.trade-card,.menu-card,.content-card,.summary-card,
section[class*="card"],article[class*="card"],div[class*="card"] {
  background:#ffffff !important;
  background-image:none !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
  box-shadow:var(--shadow) !important;
}

.trade-card::before,
.trade-card::after,
.card-accent-line { opacity:.75 !important; }

.trade-card:hover {
  background:#fbfcfd !important;
  background-image:none !important;
  border-color:color-mix(in srgb,var(--accent) 42%,var(--border)) !important;
  box-shadow:0 18px 42px rgba(24,39,54,.14) !important;
}

/* Improve all card text in light mode */
.trade-card h2,
.card h1,.card h2,.card h3,.card h4,
.panel h1,.panel h2,.panel h3,.panel h4,
h1,h2,h3,h4,h5,h6,
.brand-text strong,.welcome,.title,.section-title {
  color:#17212b !important;
  text-shadow:none !important;
}

.trade-card p,
.card p,.panel p,.subtitle,.description,.muted,.help-text,
.hero-subtitle,small {
  color:#667482 !important;
}

.card-number { color:color-mix(in srgb,var(--accent) 72%,#53606d) !important; }
.card-category {
  background:color-mix(in srgb,var(--accent) 8%,#ffffff) !important;
  color:color-mix(in srgb,var(--accent) 82%,#3e4a55) !important;
  border-color:color-mix(in srgb,var(--accent) 24%,var(--border)) !important;
}
.card-icon {
  background:color-mix(in srgb,var(--accent) 8%,#ffffff) !important;
  color:var(--accent) !important;
  border-color:color-mix(in srgb,var(--accent) 32%,var(--border)) !important;
}
.trade-card:hover .card-icon,
.trade-card:hover .card-category {
  background:color-mix(in srgb,var(--accent) 12%,#ffffff) !important;
  color:var(--accent) !important;
  border-color:color-mix(in srgb,var(--accent) 45%,var(--border)) !important;
}
.trade-card:hover h2 { color:var(--accent) !important; }

/* Buttons: bright surfaces with readable text */
button,.btn,.button,.back-btn,.home-nav-btn,.nav-btn,.menu-action,.action-btn,
.submit-btn,.save-btn,.search-btn,.filter-btn,.export-btn,.login-btn,
a[class*="btn"],button[class*="btn"] {
  background:#ffffff !important;
  background-image:none !important;
  color:#24313d !important;
  border-color:rgba(24,39,54,.18) !important;
  box-shadow:0 7px 18px rgba(24,39,54,.08) !important;
  text-shadow:none !important;
}
button:hover,.btn:hover,.button:hover,.back-btn:hover,.home-nav-btn:hover,.nav-btn:hover,
.menu-action:hover,.action-btn:hover,.submit-btn:hover,.save-btn:hover,.search-btn:hover,
.filter-btn:hover,.export-btn:hover,.login-btn:hover,a[class*="btn"]:hover {
  background:#f7f9fb !important;
  color:#8c6514 !important;
  border-color:rgba(169,120,17,.38) !important;
}

/* Keep intentional status/action buttons readable */
.delete-btn,.danger,.btn-danger,[class*="delete"],button[name="delete"] {
  background:#fff4f5 !important;
  color:#b93647 !important;
  border-color:rgba(185,54,71,.28) !important;
}
.success,.btn-success,[class*="success"] {
  background:#f1fbf6 !important;
  color:#16784b !important;
  border-color:rgba(22,120,75,.25) !important;
}

/* Inputs and tables */
input,select,textarea {
  background:#ffffff !important;
  color:#17212b !important;
  border-color:rgba(24,39,54,.17) !important;
  box-shadow:none !important;
}
input::placeholder,textarea::placeholder { color:#8b96a2 !important; }
input:focus,select:focus,textarea:focus {
  border-color:rgba(169,120,17,.48) !important;
  box-shadow:0 0 0 3px rgba(169,120,17,.10) !important;
}

table { background:#ffffff !important; color:#17212b !important; }
thead,th { background:#f4f7f9 !important; color:#24313d !important; }
td { color:#586674 !important; }
tr,td,th { border-color:rgba(24,39,54,.12) !important; }
tbody tr:hover { background:#fafbfd !important; }

/* Footer and utility strips */
footer,.footer,.ticker-wrap,.toolbar,.search-box,.summary-box,.notice,.alert {
  background-color:#ffffff !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}

/* =========================================================
   FINAL LIGHT MODE CORRECTIONS
   Strong page-specific overrides for legacy dark components.
   ========================================================= */
html, body { color-scheme: light !important; }
body, main, .page, .page-shell, .app, .wrapper, .content, .dashboard,
.hero, .hero-section, .trade-section, .accounts-section {
  background-color:#f4f7fa !important;
  color:#17212b !important;
}

/* Every navigation control must look light and readable. */
header a, nav a, .topbar a, .navbar a,
.menu, .menu-item, .nav-link, .nav-btn, .home-nav-btn, .back-btn,
button, .btn, a[class*="btn"], [role="button"] {
  background:#ffffff !important;
  background-image:none !important;
  color:#273440 !important;
  border:1px solid #d4dce4 !important;
  box-shadow:0 4px 12px rgba(24,39,54,.07) !important;
  text-shadow:none !important;
}
header a:hover, nav a:hover, .nav-btn:hover, .home-nav-btn:hover,
.back-btn:hover, button:hover, .btn:hover, a[class*="btn"]:hover {
  background:#f8fafc !important;
  color:#8a620c !important;
  border-color:#d7b45c !important;
}

/* Gold controls need enough contrast on white. */
.gold-btn, .btn-gold, .primary-btn, .submit-btn, .save-btn,
button[type="submit"]:not(.delete-btn), input[type="submit"],
.badge-gold, .gold-badge, .eyebrow, .pill, .chip {
  background:#fff8e7 !important;
  color:#765207 !important;
  border-color:#d9b85f !important;
  font-weight:700 !important;
}

/* Trade menu: remove all remaining dark cards and dark hover states. */
.trade-grid .trade-card,
.trade-card,
.trade-card:hover,
.trade-card:focus,
.trade-card:active {
  background:#ffffff !important;
  background-image:linear-gradient(145deg, color-mix(in srgb, var(--accent) 5%, #ffffff), #ffffff 58%) !important;
  color:#17212b !important;
  border-color:color-mix(in srgb, var(--accent) 38%, #cfd8e1) !important;
  box-shadow:0 12px 30px rgba(24,39,54,.11) !important;
}
.trade-card::after {
  opacity:.07 !important;
  filter:blur(18px) !important;
}
.trade-card .card-content,
.trade-card .open-action { color:#273440 !important; }
.trade-card h2,
.trade-card:hover h2 {
  color:#17212b !important;
  font-weight:800 !important;
  text-shadow:none !important;
}
.trade-card p {
  color:#526170 !important;
  font-weight:500 !important;
  line-height:1.95 !important;
}
.trade-card .open-action {
  border-top-color:#dce3e9 !important;
  color:#263440 !important;
  font-weight:700 !important;
}
.trade-card .card-icon,
.trade-card:hover .card-icon,
.trade-card .card-category,
.trade-card:hover .card-category,
.trade-card .arrow-box,
.trade-card:hover .arrow-box {
  background:color-mix(in srgb, var(--accent) 11%, #ffffff) !important;
  color:color-mix(in srgb, var(--accent) 78%, #2d3944) !important;
  border-color:color-mix(in srgb, var(--accent) 48%, #cdd6df) !important;
  box-shadow:none !important;
}
.trade-card .card-number {
  color:color-mix(in srgb, var(--accent) 75%, #465462) !important;
  font-weight:800 !important;
}

/* Forms and account panels. */
.form-panel, .form-section, .form-card, .account-form, .new-account,
.accounts-panel, .list-panel, .table-panel, .summary-panel {
  background:#ffffff !important;
  background-image:none !important;
  color:#17212b !important;
  border-color:#d7dfe7 !important;
}
label, .field-label, .form-label { color:#273440 !important; font-weight:700 !important; }
label small, .field-note, .form-note { color:#778594 !important; }

/* Tables: force every cell, including action columns, to a light surface. */
table, thead, tbody, tfoot, tr, th, td,
.table-wrap, .table-container, .accounts-table {
  color:#273440 !important;
  border-color:#dbe2e8 !important;
}
thead, thead tr, th {
  background:#eef3f7 !important;
  color:#1d2a35 !important;
  font-weight:800 !important;
}
tbody, tbody tr, tbody td,
tbody td:first-child, tbody td:last-child,
.accounts-table tbody td, .accounts-table .actions-cell,
.action-cell, .actions, .table-actions {
  background:#ffffff !important;
  color:#455565 !important;
}
tbody tr:nth-child(even), tbody tr:nth-child(even) td { background:#fbfcfd !important; }
tbody tr:hover, tbody tr:hover td { background:#f4f8fb !important; }

/* Delete and destructive buttons remain pale red, never black. */
.delete-btn, .delete-form button, .danger, .btn-danger,
button[name*="delete"], button[class*="delete"] {
  background:#fff2f4 !important;
  color:#a92f41 !important;
  border-color:#e7aab3 !important;
  box-shadow:none !important;
  font-weight:800 !important;
}
.delete-btn:hover, .delete-form button:hover, .btn-danger:hover {
  background:#ffe7eb !important;
  color:#8e2132 !important;
  border-color:#d77d8a !important;
}

/* Status elements and message blocks. */
.success, .ok, .message-ok, .delete-feedback.ok {
  background:#edf9f2 !important; color:#116a40 !important; border-color:#9ed5b8 !important;
}
.error, .danger-message, .message-error, .delete-feedback.error {
  background:#fff0f2 !important; color:#a52e40 !important; border-color:#e5a2ac !important;
}

/* Improve low-contrast legacy text everywhere. */
p, small, .muted, .subtitle, .description, .help-text,
.hero-subtitle, .section-subtitle, .card-description {
  color:#5e6d7b !important;
}
h1, h2, h3, h4, h5, h6, .title, .section-title,
.brand-text strong, .brand-name {
  color:#17212b !important;
  text-shadow:none !important;
}

/* Remove legacy dark inline-looking utility blocks. */
[style*="background: #0"], [style*="background:#0"],
[style*="background-color: #0"], [style*="background-color:#0"] {
  background:#ffffff !important;
  color:#273440 !important;
}


/* Index header exception: clean borderless navigation in the redesigned homepage. */
body:has(.brand-with-logo) .topbar .brand,
body:has(.brand-with-logo) .topbar .menu-action,
body:has(.brand-with-logo) .topbar .action-icon {
  border: 0 !important;
  box-shadow: none !important;
}
body:has(.brand-with-logo) .topbar .brand {
  background: transparent !important;
}
body:has(.brand-with-logo) .topbar .menu-action {
  background: transparent !important;
}
body:has(.brand-with-logo) .topbar .menu-action:hover {
  background: #fff7e4 !important;
}