/* hero-skin.css — HeroUI colours for the old pages (see hero-adopt.js). The old rules are not layered, so they beat HeroUI's layered ones: the colours are said again here,
   from HeroUI's own variables (mapped onto the app's tokens in the islands' hero.css), so buttons and fields look the same on every page. Sizes and layout stay the old ones. */
#sb :is(.v2-btn, .sb-btn, .sb-set-btn, .sb-pillbtn).button { background-color: var(--button-bg); color: var(--button-fg); border-color: transparent; box-shadow: none; font-weight: 800; }
#sb :is(.v2-btn, .sb-btn, .sb-set-btn, .sb-pillbtn).button:hover { background-color: var(--button-bg-hover); }
#sb :is(.v2-btn, .sb-btn, .sb-set-btn, .sb-pillbtn).button[disabled] { opacity: .5; cursor: not-allowed; }
#sb :is(input, select, textarea).input { background-color: var(--field-background); color: var(--field-foreground); border: 1px solid var(--field-border); border-radius: 12px; }
#sb :is(input, select, textarea).input:hover { border-color: var(--field-border-hover); }
#sb :is(input, select, textarea).input:focus-visible { border-color: var(--field-border-focus); outline: none; }
#sb :is(input, select, textarea).input::placeholder { color: var(--field-placeholder); }

/* tables: HeroUI's table classes on the old tables; the colours and the cell rhythm are said here because the old table rules are not layered */
#sb .table-root { overflow-x: auto; }
#sb .table__content { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
#sb .table__header { background-color: var(--surface-secondary); }
#sb th.table__column { background-color: transparent; color: var(--muted); font-size: 12px; font-weight: 800; text-align: start; padding: 10px 14px; white-space: nowrap; border-bottom: 1px solid var(--separator); }
#sb th.table__column:first-child { border-start-start-radius: 14px; }
#sb th.table__column:last-child { border-start-end-radius: 14px; }
#sb td.table__cell, #sb tbody th.table__cell { padding: 10px 14px; border-bottom: 1px solid color-mix(in srgb, var(--separator) 60%, transparent); background-color: transparent; color: var(--foreground); }
#sb tr.table__row:last-child > .table__cell { border-bottom: 0; }
@media (hover: hover) { #sb tr.table__row:hover > .table__cell { background-color: color-mix(in srgb, var(--default) 45%, transparent); } }

/* switches, checkboxes, progress bars and the page tabs: HeroUI's look on the old controls, from HeroUI's variables (state still comes from aria-checked / aria-selected, so no script changes) */
html.hero-on #sb .sb-switch { background-color: var(--default); width: 48px; height: 28px; }
html.hero-on #sb .sb-switch i { background-color: var(--surface); box-shadow: 0 1px 4px rgba(0, 0, 0, .28); }
html.hero-on #sb .sb-switch[aria-checked=true] { background-color: var(--accent); }
html.hero-on #sb .sb-switch[aria-checked=true] i { background-color: var(--accent-foreground, #fff); }
html.hero-on #sb .sb-switch:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }
html.hero-on #sb input[type=checkbox] { accent-color: var(--accent); inline-size: 18px; block-size: 18px; border-radius: 6px; cursor: pointer; }
html.hero-on #sb input[type=checkbox]:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }
html.hero-on #sb [role=progressbar] { background-color: var(--default); border-radius: 99px; overflow: hidden; }
html.hero-on #sb [role=progressbar] > i { background-color: var(--accent); border-radius: 99px; }
html.hero-on #sb .sd-tabs[role=tablist] { background-color: var(--default); border-radius: 14px; padding: 4px; gap: 4px; border: 0; }
html.hero-on #sb .sd-tab { border-radius: 11px; border: 0; background-color: transparent; color: var(--muted); font-weight: 800; box-shadow: none; }
html.hero-on #sb .sd-tab[aria-selected=true] { background-color: var(--surface); color: var(--foreground); box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }

/* type floor: no text utility renders under 12px (the dot icons that use text-[6px] are glyphs, not text) */
#sb .text-\[9px\], #sb .text-\[10px\], #sb .text-\[11px\] { font-size: 12px; line-height: 1.45; }

/* layout: a panel or card in a grid may shrink below its widest table, and the table wrapper scrolls instead of widening the page (a phone showed the lab 660px wide in 375px) */
#sb .sl-root > section, #sb .sl-root .sl-card, #sb .sl-root .sl-head { min-inline-size: 0; max-inline-size: 100%; }
#sb .table-root { display: block; max-inline-size: 100%; overflow-x: auto; }
#sb .sl-root { grid-template-columns: minmax(0, 1fr); }
#sb .sl-root > * { min-inline-size: 0; }
/* a wide lab table keeps readable columns and scrolls inside its wrapper, so no cell has to wrap into a tall narrow column */
#sb .sl-table-wrap .table__content { min-inline-size: 760px; }
#sb td.table__cell, #sb tbody th.table__cell { vertical-align: middle; }
/* the action buttons of a table row stay on one or two lines instead of stacking in a narrow column */
#sb .sl-table-wrap td .sl-sub { min-inline-size: 260px; }

#sb .sb-session .track-hero { margin: 8px 0 4px; }

/* the Tailwind text steps follow the same scale as the rest of the app: 12 / 13 / 14 / 16 / 20 / 24 (no 18 and no 30) */
#sb .text-lg { font-size: 16px; line-height: 1.5; }
#sb .text-3xl { font-size: 24px; line-height: 1.3; }

/* the page summary figures share one width and one size (Performance and the other analysis pages) */
.pg-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); overflow: visible; }
.pg-kpi { min-width: 0; }
.pg-kpi-v, .pg-kpi .n { font-size: 20px; line-height: 1.3; }

/* market page: the price tape and the EGX strip are two quiet rows inside one card — spaced apart, no second frame, the tape no taller than its widget */
#mk-tab .ha-ticker { padding:0 !important; margin:0 0 12px !important; min-block-size:46px; border:0 !important; overflow:hidden; background:var(--sb-sunk) !important }
#mk-tab .ha-ticker .tv-wrap { margin:0; inline-size:100% }
#mk-tab .ha-market { padding:10px 12px !important; margin:0 !important; background:var(--sb-sunk) !important; border:0 !important; border-radius:16px !important; gap:8px 16px !important }
#mk-tab .ha-market > div { gap:8px 12px }
@media (max-width:640px) { #mk-tab .ha-market > div { inline-size:100% } #mk-tab .ha-market [id$="-widget"] { flex:1 1 40%; justify-content:space-between; min-inline-size:0 } }

/* button tokens: every block below reads these, so a change is made once */
:root { --btn-h:36px; --btn-h-sm:32px; --btn-px:14px; --btn-fs:13px; --btn-fw:700; --btn-r:12px; --btn-gap:6px }

/* one rhythm and one control size for the whole app: 4 / 8 / 12 / 16 / 20 spacing, buttons 36 (small 32) with 13px/700 text, chips 12px/800, stat tiles that share a row evenly */
#sb .button { min-block-size:var(--btn-h); padding-block:0; padding-inline:var(--btn-px); gap:var(--btn-gap); font-size:var(--btn-fs); font-weight:var(--btn-fw); line-height:1.3; letter-spacing:0; white-space:nowrap; text-wrap:nowrap }
#sb .button--sm, #sb .button.v2-btn-sm { min-block-size:var(--btn-h-sm); padding-inline:12px; font-size:var(--btn-fs) }
#sb .button :is(i.fa-solid, i.fa-regular, i.fa-brands) { font-size:14px; line-height:1 }
#sb .button svg { inline-size:15px; block-size:15px; flex:none }
#sb .chip, #sb .badge, #sb .sb-chip, #sb .hw-chip { font-size:12px; font-weight:800; line-height:1.4; padding:3px 10px; min-block-size:24px; display:inline-flex; align-items:center; gap:4px }
#sb .sb-seg button, #sb .sb-chips button { font-size:12px; font-weight:800; line-height:1.4; padding:4px 12px; min-block-size:28px }
#sb .sb-stats { display:flex; flex-wrap:wrap; gap:12px }
#sb .sb-stats > .sb-stat { flex:1 1 130px; min-inline-size:0; padding:12px 14px }
#sb .sb-wells { gap:12px }
#sb .sb-bento { gap:16px }
#sb .sb-card { padding:20px }
#sb .sb-ch { margin-block-end:4px; gap:8px 12px }
#sb .sb-note { margin-block:0 12px; line-height:1.5 }
#sb .sb-card > * + * { margin-block-start:0 }
@media (max-width:640px) { #sb .sb-card { padding:16px } #sb .sb-bento { gap:12px } }
/* home hero: two columns only when both fit, the figures never clip */
.sb-welcome { gap:16px; padding:20px }
.hw-stats { flex-wrap:wrap !important; gap:12px 18px; padding:14px 16px }
.hw-stats .v { font-size:24px; line-height:1.25; white-space:nowrap }
.hw-stats .hw-spark { flex:1 1 96px }
@media (max-width:1180px) { .sb-welcome { grid-template-columns:minmax(0,1fr) } }
@media (max-width:640px) { .hw-stats .v { font-size:20px } .sb-welcome { padding:16px } }

/* every text button in the dialogs wears the same HeroUI secondary look as the pages (the old per-colour tinted pills are gone) */
html.hero-on :is(#stock-details-modal, [id$="-modal"]) :is(button.button, button[id^="sd-btn-"]):not(.button--primary):not(.button--danger-soft):not([data-hero-skip]) { display:inline-flex; align-items:center; justify-content:center; gap:var(--btn-gap); min-block-size:var(--btn-h); padding:0 var(--btn-px); border:0; border-radius:var(--btn-r); background:var(--sb-sunk,#f1f5f3); color:var(--sb-ink,#0f172a); font-size:var(--btn-fs); font-weight:var(--btn-fw); line-height:1.3; white-space:nowrap; box-shadow:none }
html.hero-on :is(#stock-details-modal, [id$="-modal"]) :is(button.button, button[id^="sd-btn-"]):not(.button--primary):not(.button--danger-soft):hover { background:var(--sb-sunk2,#e5ebe8) }
html.hero-on #stock-details-modal button[id^="sd-btn-"] i { font-size:14px; color:var(--sb-sky,#166534) }
html.hero-on #stock-details-modal button#sd-btn-sell { background:var(--sb-sky,#166534); color:#fff }
html.hero-on #stock-details-modal button#sd-btn-sell i { color:#fff }
/* the stock dialog sits above the top bar and starts below the screen edge, so its title is never cut */
#stock-details-modal, [id$="-modal"].fixed { z-index:90 }
#stock-details-modal { padding-top:16px !important; align-items:flex-start !important }
@media (min-width:640px) { #stock-details-modal { padding-top:56px !important; padding-bottom:24px } }
/* quick actions: a calm two-column list of rows, icon left of the text, nothing clipped */
html.hero-on .v2-row { display:flex; align-items:center; gap:12px; padding:12px 14px; min-block-size:64px; border:0; border-radius:16px; background:var(--sb-sunk,#f1f5f3); text-align:start; box-shadow:none }
html.hero-on .v2-row:hover { background:var(--sb-sunk2,#e5ebe8) }
html.hero-on .v2-row-ico { flex:none; inline-size:36px; block-size:36px; border-radius:12px; display:grid; place-items:center; background:var(--sb-sheet,#fff); font-size:15px }
html.hero-on .v2-row-txt { display:flex; flex-direction:column; gap:2px; min-inline-size:0 }
html.hero-on .v2-row-txt b { font-size:14px; font-weight:700; line-height:1.3 }
html.hero-on .v2-row-txt small { font-size:12px; font-weight:600; line-height:1.4; color:var(--sb-muted,#64748b) }

/* HeroUI dialogs cover the sticky top bar and the tab bar; controls share one corner radius */
.modal__backdrop { z-index:90 !important }
html.hero-on .button { border-radius:var(--btn-r) }

.modal__dialog { margin-block:clamp(20px, 7vh, 64px) }

/* nothing the user reads is under 12px: small print, "n/a" marks, the home charts' own labels */
#sb small, #sb .isl-na { font-size:12px }

/* quick actions: each action is a row with its icon, a title and one line of help — two columns, one full-width row for the refresh, nothing overlapping */
#qa-doors { display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px }
#qa-doors .button, #qa-refresh.button { display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"i t" "i s"; align-items:center; justify-content:stretch; column-gap:10px; row-gap:2px; inline-size:100%; block-size:auto; min-block-size:56px; padding:10px 14px; text-align:start; white-space:normal; text-wrap:balance }
#qa-doors .button > i, #qa-refresh.button > i { grid-area:i; font-size:16px; inline-size:20px; text-align:center }
#qa-doors .button > b, #qa-refresh.button > b { grid-area:t; font-size:14px; font-weight:700; line-height:1.3 }
#qa-doors .button > small, #qa-refresh.button > small { grid-area:s; font-size:12px; font-weight:600; line-height:1.4; color:var(--sb-muted,#64748b) }
#qa-refresh.button { margin-block-start:8px }
@media (max-width:420px) { #qa-doors { grid-template-columns:minmax(0,1fr) } }
#qa-refresh ~ .isl-sub { margin-block-start:12px }
.popover, .tooltip, [data-slot="popover"] { z-index:120 }

/* notices sit outside the HeroUI token scope, so they state their own colours (white text on a solid fill, never on white) */
#toast-container .toast { background:#334155; color:#fff; border:0; border-radius:12px; padding:12px 16px; font-size:13px; font-weight:700; line-height:1.4; min-inline-size:200px; box-shadow:0 12px 32px -12px rgba(15,23,42,.45) }
#toast-container .toast--success { background:#0B5E3F }
#toast-container .toast--danger { background:#b91c1c }
#toast-container .toast--accent { background:#1e293b }
#toast-container .toast i, #toast-container .toast span { color:#fff; font-size:inherit }
/* HeroUI's toast expects its own region to drive position, height and fade; ours is a plain list, so the card is always shown in place until the app fades it out */
#toast-container .toast { position:relative !important; inset:auto !important; height:auto !important; min-block-size:44px; opacity:1 !important; transform:none !important; transition:opacity .3s ease !important; display:flex; align-items:center; gap:8px }
#toast-container .toast.opacity-0 { opacity:0 !important }
#toast-container .toast > * { opacity:1 !important; transition:none !important }

/* the add button keeps its green on hover and press (the icon is white; the generic icon-button hover turned the fill white) */
html.hero-on .sb-iconbtn.sb-addbtn:hover, html.hero-on .sb-iconbtn.sb-addbtn:focus-visible, html.hero-on .sb-iconbtn.sb-addbtn:active { background:var(--sb-brand,#0B5E3F) !important; color:#fff !important; filter:brightness(1.1) }
.dark.hero-on .sb-iconbtn.sb-addbtn:hover, .dark .sb-iconbtn.sb-addbtn:hover { color:#06210f !important }

/* charts: label size is set by the fit script (12px at the drawing's scale) */
#sb svg.sb-fit text { font-size:calc(12px * var(--k, 1)) }
/* touch: small controls get a 40px target on phones and tablets */
@media (pointer:coarse) {
  #sb .button--sm, #sb .button.v2-btn-sm, #sb .sb-seg button, #sb .sb-chips button, #sb .sb-switch, #sb .perf-period-btn { min-block-size:40px }
  #sb .sb-switch { min-inline-size:48px }
}

/* the stock window is one and a half times its old width (32rem -> 48rem), never wider than the screen */
.modal__dialog--lg:has(#stk-title), .isl-modal.wide:has(#stk-title) { max-inline-size: min(48rem, calc(100vw - 32px)); }

/* profit calendar: every month, week and day tile is as tall as its row, with or without a result */
.tp-cal { grid-auto-rows: 1fr; } .tp-cal > * { block-size: 100%; min-block-size: 84px; }
.tp-cal-d > * { min-block-size: 56px; }
/* the tiles sit inside spans: the span fills its grid cell and the tile fills the span, so a day with a result is exactly as big as an empty one */
.tp-cal > span { display: flex; min-inline-size: 0; }
.tp-cal > span > .tp-tile { flex: 1 1 auto; inline-size: 100%; min-block-size: 84px; box-sizing: border-box; }
.tp-cal-d > span > .tp-tile { min-block-size: 56px; }