/* المستثمر المصري — dark theme of design 1 (2026-11-03), loaded last and only switched on when the visitor picks
   dark (theme.js turns its media from "not all" to "all"); light, the default, is theme.css + design1.css.
   Deep navy ground with soft glows, frosted-glass cards with a thin light edge and a green accent bar on top,
   white bold headings, mint green / coral red for up and down, insight boxes with a coloured side bar. */
:root {
  color-scheme: dark;
  --ink: #F1F5F9;
  --ink-2: #CBD5E1;
  --muted: #94A3B8;
  --bg: #0A111E;
  --card: #111A2B;                       /* opaque surface: menus, dropdowns, donut hole */
  --glass: rgba(22, 32, 52, .58);        /* card surface over the glows */
  --glass-2: rgba(255, 255, 255, .045);  /* inner tiles, chips, table heads */
  --glass-hi: rgba(255, 255, 255, .08);
  --line: rgba(255, 255, 255, .10);
  --edge: rgba(255, 255, 255, .14);
  --green: #2FD39C;
  --green-dark: #5EE9B5;
  --green-soft: rgba(47, 211, 156, .13);
  --gold: #F5B94B;
  --gold-soft: rgba(245, 185, 75, .14);
  --up: #34D399;
  --up-soft: rgba(52, 211, 153, .14);
  --down: #F87171;
  --down-soft: rgba(248, 113, 113, .14);
  --flat: #94A3B8;
  --on-green: #04170F;
  --radius: 20px;
  --shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 14px 36px rgba(0, 0, 0, .35);
  --panel: rgba(18, 30, 54, .55);
  --panel-edge: rgba(255, 255, 255, .16);
  --panel-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 60px rgba(0, 0, 0, .45);
  --alarm: #FF5A5F;
  --alarm-edge: rgba(255, 90, 95, .45);
  --alarm-glow: rgba(255, 90, 95, .12);
  --axis: rgba(255, 255, 255, .35);
  --connector: rgba(255, 255, 255, .26);
  --track: rgba(255, 255, 255, .13);
  --glow: rgba(47, 224, 161, .6);
  --accent-bar: linear-gradient(90deg, transparent 12%, var(--green) 12%, var(--green) 88%, transparent 88%);
}

/* the dark ground behind the skyline (design1.css draws the canvas in both themes) */
html { background-color: var(--bg); }
h1, h2, h3, h4 { color: var(--ink); }
a { color: var(--green); }
::selection { background: rgba(47, 211, 156, .35); color: #fff; }

/* the glass surface, shared */
.card, .stat, .index-card, .ins-card, .hm-tile, a.fund-card2, .page-head, .subnav, .table-wrap, .empty, .bp-card, .mb-card,
.op-card, .rd-card, .auth-card {
  background: var(--glass);
  border: 1px solid var(--edge);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}
/* the green bar along the top edge of a card, as in the reference panels */
.card, .ins-card, .page-head, .index-card, .stat, .hm-tile {
  background-image: var(--accent-bar);
  background-size: 100% 4px;
  background-repeat: no-repeat;
  background-position: top;
}
.card.warn, .op-market.bear { background-image: linear-gradient(90deg, transparent 12%, var(--down) 12%, var(--down) 88%, transparent 88%); }
.table-wrap { background: transparent; border-color: var(--line); }
.card .table-wrap, .ins-card .table-wrap { box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.card .card, .card .stat, .card .bp-card, .card .mb-card, .card .empty { background-color: var(--glass-2); box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; background-image: none; }

/* header and footer: dark glass bars */
.site-header { background: rgba(9, 15, 27, .72); color: var(--ink); box-shadow: 0 1px 0 var(--line);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); }
.brand, .brand-text { color: var(--ink); }
.brand-mark { background: linear-gradient(135deg, #2FD39C, #1A9C73); color: var(--on-green); box-shadow: 0 0 18px rgba(47, 211, 156, .35); }
.brand-text b { color: var(--green); }
.nav-link, .nav-group-btn { color: var(--muted); }
.nav-link:hover, .nav-group-btn:hover { background: var(--glass-hi); color: var(--ink); }
.nav-link.active { background: var(--green-soft); color: var(--green-dark); }
.nav-menu { background: var(--card); border: 1px solid var(--edge); box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
.nav-menu-item { color: var(--ink-2); }
.nav-menu-item:hover { background: var(--green-soft); color: var(--ink); }
.nav-toggle { background: var(--glass-hi) !important; color: var(--ink) !important; }
.site-footer { background: rgba(9, 15, 27, .8); color: var(--muted); box-shadow: 0 -1px 0 var(--line); }
.site-footer h4 { color: var(--ink); }
.footer-bottom { border-top-color: var(--line); }
@media (max-width: 760px) {
  .bottom-nav { background: rgba(9, 15, 27, .86); border-top-color: var(--line);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
  .bottom-nav a:hover { background: var(--glass-hi); }
  .nav-menu { background: transparent; border: 0; box-shadow: none; }
}

/* buttons */
.btn-primary { background: linear-gradient(135deg, #34DCA4, #1FAE80); color: var(--on-green); box-shadow: 0 6px 20px rgba(47, 211, 156, .25); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-secondary { background: var(--green-soft); color: var(--green-dark); }
.btn-outline { background: transparent; border-color: var(--edge); color: var(--ink); }
.btn-outline:hover { border-color: var(--green); color: var(--green); }
.btn-ghost { color: var(--ink-2); border-color: var(--edge); }
.btn-ghost:hover { background: var(--glass-hi); }
.btn-danger { background: var(--down-soft); color: var(--down); border-color: rgba(248, 113, 113, .35); }

/* forms */
input, select, textarea { background: rgba(255, 255, 255, .05); color: var(--ink); border-color: var(--edge); }
input::placeholder, textarea::placeholder { color: #64748B; }
select option { background: var(--card); color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(47, 211, 156, .25); border-color: var(--green); }
label { color: var(--ink-2); }
details.form-details, ul.fee-breakdown, .product-detail, .ba-calc-result { background: var(--glass-2); border-color: var(--edge); }
.suggest-items, .stk-results { background: var(--card); border: 1px solid var(--edge); box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
.stk-res:hover, .fc-item:hover { background: var(--green-soft); }
.errors { background: var(--down-soft); color: #FCA5A5; }

/* tables */
th { background: var(--glass-2); color: var(--muted); }
th, td { border-bottom-color: var(--line); }
tr:hover td, tr.clickable:hover td { background: rgba(255, 255, 255, .035); }
.fc-best { background: var(--green-soft); }
.fe-pend-new { background: var(--green-soft); }

/* badges, flashes, pills */
.badge-ok { background: var(--up-soft); color: var(--up); }
.badge-err { background: var(--down-soft); color: var(--down); }
.badge-warn { background: var(--gold-soft); color: var(--gold); }
.badge-muted { background: var(--glass-hi); color: var(--muted); }
.flash { border: 1px solid var(--edge); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.flash-ok { background: var(--up-soft); color: var(--up); }
.flash-err { background: var(--down-soft); color: var(--down); }
.pill-up { background: var(--up-soft); color: var(--up); }
.pill-down { background: var(--down-soft); color: var(--down); }
.rec-buy { background: var(--up-soft); color: var(--up); }
.rec-sell { background: var(--down-soft); color: var(--down); }
.rec-watch { background: var(--glass-hi); color: var(--muted); }
.product-detail .pd-status-ok, .bp-card .pd-status-ok { background: var(--up-soft); color: var(--up); }
.product-detail .pd-status-no, .bp-card .pd-status-no { background: var(--down-soft); color: var(--down); }
.pd-status.bp-outdated, .bp-card .pd-status.bp-outdated { background: var(--gold-soft); color: var(--gold); }
.bp-steps span, .bp-history span { background: var(--glass-hi); }
.bp-jump a { background: var(--glass); }

/* insight boxes ("رؤية استثمارية"): tinted glass with a coloured bar on the reading side */
.page-head + .hint, .ip-advice, .ip-note, .mk-plain, .op-resp, .op-budget, .op-market, .rt-hold, .op-watch {
  border-inline-start: 4px solid var(--green); border-radius: 16px; background-color: var(--green-soft);
}
.page-head + .hint { color: var(--ink-2); padding: 12px 16px; margin: 0 0 18px; }
.mk-plain, .ip-note, .op-resp { border-inline-start-color: var(--gold); background-color: var(--gold-soft); }
.op-market.bear, .op-watch { border-inline-start-color: var(--down); background-color: var(--down-soft); }

/* page header band */
.page-head { background-color: var(--glass); }
.page-head h1 { color: var(--ink); }
.page-head .muted { color: var(--muted); }

/* stat tiles */
.stat .label { color: var(--muted); }
.stat .value { color: var(--ink); }
.stat .label::before { box-shadow: 0 0 10px currentColor; }

/* tabs and sub-menus */
.stk-tabs button, .stk-tabs a.mk-tab, .chart-periods button { background: var(--glass); color: var(--ink-2); border: 1px solid var(--edge); box-shadow: none; }
.stk-tabs button:hover, .stk-tabs a.mk-tab:hover { background: var(--green-soft); color: var(--ink); }
.stk-tabs button.active, .stk-tabs a.mk-tab.active, .chart-periods button.active, .subnav a.active { background: var(--green); color: var(--on-green); border-color: transparent; }
.subnav a { color: var(--ink-2); }
.subnav.wallet-bar { background: var(--gold-soft); border-color: rgba(245, 185, 75, .25); }
.subnav.wallet-bar a.active { background: var(--gold); color: #1F1300; }
.chart-periods { background: var(--glass-2); }
.chart-periods button { background: transparent; border-color: transparent; }
.pr-switch { background: var(--glass); border-color: var(--edge); }

/* home hero: a glass panel with a glow instead of a solid green block */
.hero { background: linear-gradient(135deg, rgba(47, 211, 156, .22), rgba(22, 32, 52, .6) 60%); border: 1px solid var(--edge);
  box-shadow: var(--shadow); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.hero p, .hm-kicker { color: var(--ink-2); }
.hm-chip { background: var(--glass-hi); border: 1px solid var(--line); }
.hm-chip .label { color: var(--muted); }
.hero .btn-primary { background: linear-gradient(135deg, #34DCA4, #1FAE80); color: var(--on-green); }
.hero .btn-ghost { color: var(--ink); border-color: var(--edge); }
.hm-mood .g-val small { color: var(--muted); }
.hm-ico.gold { background: var(--gold-soft); color: var(--gold); }
.hm-ico.blue, .fg-ava.manager { background: rgba(99, 132, 255, .16); color: #A5B4FC; }
.hm-ico.green { background: var(--up-soft); color: var(--up); }
.hm-ico.red { background: var(--down-soft); color: var(--down); }
.hm-tile .value { color: var(--ink); }
.hm-item { color: var(--ink); }
.hm-item:hover { background: var(--glass-hi); }
.hm-ph, .mb-ph { background: var(--glass-hi); color: var(--muted); }

/* market pages */
.mk-head { background: linear-gradient(135deg, rgba(47, 211, 156, .24), rgba(22, 32, 52, .7)); border: 1px solid var(--edge); }
.mk-head .muted, .mk-head .muted.small { color: var(--ink-2); }
.mk-head .up { color: var(--up); } .mk-head .down { color: var(--down); }
.mk-chips span { background: var(--glass-hi); color: var(--ink-2); }
.mk-bar-wrap, .ic-bar, .mv-bar { background: var(--glass-hi); }
.ic-range { background: linear-gradient(90deg, rgba(248, 113, 113, .45), rgba(255, 255, 255, .1), rgba(52, 211, 153, .45)); }
.breadth .b-flat, .rd-bar .b-flat { background: #475569; }
.rd-bar { background: var(--glass-hi); }
.rangebar { background: linear-gradient(90deg, var(--down-soft), var(--glass-hi) 50%, var(--up-soft)); }
.rangebar i { background: var(--ink); border-color: var(--bg); }
.ring { background: conic-gradient(var(--up) calc(var(--p) * 1%), var(--down-soft) 0); }
.ring b { background: var(--card); color: var(--ink); }
.gauge .g-val b { color: var(--ink); }
.mb-card { color: var(--ink); }
.mb-card:hover { border-color: var(--green); box-shadow: 0 0 0 1px var(--green), 0 10px 30px rgba(47, 211, 156, .12); }
.mb-flat .mb-chg { background: var(--glass-hi); }
.chart-box { background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.chart-tip { background: var(--card) !important; color: var(--ink) !important; border: 1px solid var(--edge); }
.brief .formula { background: var(--glass-hi); }

/* opportunities */
.op-tiles > div { background: var(--glass-2); }
.op-card.watch { border: 2px dashed var(--edge) !important; }
.opp-alert { background: var(--gold-soft); color: var(--gold); border: 1px solid rgba(245, 185, 75, .3); }
.opp-alert:hover { background: rgba(245, 185, 75, .22); }
.opp-alert.watch { background: var(--down-soft); color: #FCA5A5; border-color: rgba(248, 113, 113, .35); }
.opp-alert.watch:hover { background: rgba(248, 113, 113, .22); }

/* funds */
a.fund-card2 { color: var(--ink); }
a.fund-card2:hover { border-color: rgba(47, 211, 156, .45); box-shadow: 0 0 0 1px rgba(47, 211, 156, .25), 0 16px 40px rgba(0, 0, 0, .45); }
.fc-btn { background: var(--green-soft); color: var(--green-dark); }
a.fund-card2:hover .fc-btn { background: var(--green); color: var(--on-green); }
.fc-chip { background: var(--green-soft); color: var(--green-dark); }
.fc-list { border-color: var(--edge); }
.fg-chip { background: var(--glass-hi); color: var(--ink-2); }
.fg-chip b { background: var(--glass-hi); color: var(--green-dark); }
.fg-chip:hover { background: var(--green-soft); }
.fg-head { border-bottom-color: var(--line); }
.dist-card .fc-coupon { background: var(--glass-2); }
/* logos keep a light tile so dark marks stay visible */
.stk-logo, .fc-logo, .fund-logo-head { background: #F8FAFC; border-color: transparent; }

/* investment plan */
.ip-dots span { background: var(--glass-hi); }
.ip-choice { border-color: var(--edge); }
.ip-choice:has(input:checked) { background: var(--green-soft); }
.ip-stage-age { background: var(--gold-soft); color: var(--gold); }
.ip-split > div { color: #fff; }
.ip-split-fixed { background: #1A9C73; } .ip-split-equity { background: #0F6E52; }

/* portfolio */
.legend li { background: var(--glass-2); }
.donut::after { background: var(--card); }

/* auth and plans */
.auth-card .auth-top { background: linear-gradient(135deg, rgba(47, 211, 156, .28), rgba(22, 32, 52, .4)); border-bottom: 1px solid var(--line); }
.auth-card .auth-top p { color: var(--ink-2); }
.plan-card .value { color: var(--green) !important; }
.stk-search-card { background: linear-gradient(135deg, rgba(47, 211, 156, .24), rgba(22, 32, 52, .6)) !important; }
.stk-search-card label { color: var(--ink); }

/* notifications */
.nb-panel { background: var(--card); border-color: var(--edge); box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
.nb-item:hover { background: var(--glass-hi); }

/* thin dark scrollbars */
* { scrollbar-color: rgba(255, 255, 255, .18) transparent; }

/* browsers without backdrop blur get a more solid card */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: rgba(20, 30, 48, .94); }
}

/* an inner card drawn by script (stock scenarios) */
.card-inner { background-color: var(--glass-2) !important; background-image: none !important; box-shadow: none; }

/* a table shown a few rows at a time (data-rowpager): the two buttons and the position label under it */
.rowpager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.rowpager button[disabled] { opacity: .45; cursor: default; }