/* ==========================================================================
   FinView — design tokens
   ==========================================================================

   The single source of truth for colour, type, spacing, radius, elevation and
   motion. Nothing else in the codebase should hard-code any of these values.

   WHY THIS FILE REPLACES SEVEN OTHERS
   -----------------------------------
   The previous stylesheets (app / hub / platform / site / specialized /
   ui-clean / chart, ~380 KB) each declared their own colours and spacing and
   then fought each other with later-wins overrides and !important. That is
   what made the site look inconsistent page to page, and it is why one board
   could render its visuals black while another rendered them correctly: the
   winning rule depended on link order, not on intent.

   This file deliberately redefines the OLD variable names alongside the new
   `--fv-*` ones. Every legacy rule that reads `var(--panel)` or `var(--navy)`
   therefore picks up the FinView palette the moment this file loads, with no
   edit to that rule. Pages then migrate to the `--fv-*` names and the
   component layer at their own pace, and each legacy file is deleted once
   nothing references it. No page has to change for the rebrand to take.

   BRAND: PRECISION TERMINAL
   -------------------------
   Deep navy ground, one cyan accent, and semantic up/down greens and reds that
   never double as UI colours. The accent means "live / actionable" and nothing
   else, so it keeps its meaning wherever it appears. Numerals are tabular
   everywhere so figures align down a column and can be compared by eye.

   RTL: this is a Persian-first product. Every spacing token is direction
   agnostic and the components use logical properties (inline-start/end), so
   the same rules serve both directions without a mirrored stylesheet.
   ========================================================================== */

/* ------------------------------------------------------------------ font -- */
/* Vazirmatn, subset by script. Two files rather than one so a Latin-only
   viewport never downloads the Arabic set. Variable weight: one file covers
   100-900, which is why no separate bold face is loaded. */
@font-face {
  font-family: "Vazirmatn Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/vazirmatn-arabic-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
                 U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
                 U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Vazirmatn Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/vazirmatn-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   SCALE — the "no arbitrary sizes" rule
   ==========================================================================
   Every gap, pad, radius and font size in the product comes from one of these
   steps. A value that is not on the scale is a bug, not a decision: it is what
   makes two cards that should match sit a pixel apart, and it accumulates
   until nothing lines up. The steps are close enough to always have a usable
   one and few enough that picking is not a judgement call.
   ========================================================================== */
:root {
  /* Space — 4px base. Named by step, not by use, so one token is not quietly
     redefined when a single component wants a different gap. */
  --fv-space-0: 0;
  --fv-space-1: 2px;
  --fv-space-2: 4px;
  --fv-space-3: 8px;
  --fv-space-4: 12px;
  --fv-space-5: 16px;
  --fv-space-6: 20px;
  --fv-space-7: 24px;
  --fv-space-8: 32px;
  --fv-space-9: 40px;
  --fv-space-10: 56px;
  --fv-space-11: 72px;

  /* Type — 1.125 ratio, rounded to whole pixels so text never lands on a
     half-pixel and blurs. -1/-2 are for dense table furniture only. */
  --fv-text-2xs: 10px;
  --fv-text-xs: 11px;
  --fv-text-sm: 12px;
  --fv-text-base: 13px;
  --fv-text-md: 14px;
  --fv-text-lg: 16px;
  --fv-text-xl: 19px;
  --fv-text-2xl: 23px;
  --fv-text-3xl: 28px;
  --fv-text-4xl: 34px;

  --fv-leading-tight: 1.2;
  --fv-leading-snug: 1.4;
  --fv-leading-normal: 1.65;

  --fv-weight-normal: 400;
  --fv-weight-medium: 500;
  --fv-weight-semibold: 600;
  --fv-weight-bold: 700;

  /* Persian text needs a touch more letter-spacing than Latin at small sizes
     to stay legible; Latin caps labels need it in the other direction. */
  --fv-tracking-caps: 0.08em;

  /* Radius — three steps. Anything rounder reads as consumer-app, which is
     the opposite of the terminal register this brand is going for. */
  --fv-radius-sm: 4px;
  --fv-radius-md: 8px;
  --fv-radius-lg: 12px;
  --fv-radius-full: 999px;

  /* Control heights — every input, select, button and chip resolves to one of
     these, which is what makes a filter row look like a single object rather
     than a collection of near-misses. */
  --fv-control-sm: 28px;
  --fv-control-md: 38px;
  --fv-control-lg: 44px;
  --fv-type-page: 20px;
  --fv-type-section: 16px;
  --fv-type-card: 14px;
  --fv-type-kpi: 24px;
  --fv-type-label: 13px;
  --fv-type-table: 13px;
  --fv-type-control: 13px;
  --fv-type-helper: 12px;
  --fv-type-timestamp: 12px;
  --fv-table-row: 40px;
  --fv-table-row-dense: 32px;
  --fv-table-pad-y: 10px;
  --fv-table-pad-y-dense: 6px;

  /* Layout */
  --fv-sidebar: 232px;
  --fv-sidebar-collapsed: 64px;
  --fv-topbar: 60px;
  --fv-content-max: 1680px;

  /* Motion — short and consistent. Anything above 200ms on a data surface
     reads as lag rather than polish. */
  --fv-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --fv-duration-fast: 90ms;
  --fv-duration: 140ms;
  --fv-duration-slow: 220ms;

  /* Stacking — declared once so a new overlay never has to guess a number. */
  --fv-z-base: 1;
  --fv-z-sticky: 10;
  --fv-z-header: 20;
  --fv-z-drawer: 40;
  --fv-z-modal: 50;
  --fv-z-toast: 60;
  --fv-z-tooltip: 70;

  --fv-font: "Vazirmatn Variable", Vazirmatn, IRANSansX, IRANSans, Tahoma, Arial, sans-serif;
  /* Figures use the same family: Vazirmatn's digits are already tabular-capable
     via font-variant-numeric, so a second family would only introduce a
     mismatch in weight and x-height between a label and its own number. */
  --fv-font-num: var(--fv-font);
}

/* ==========================================================================
   PALETTE — light
   ==========================================================================
   Light is the default because the product is read in daylight on trading
   desks and printed to PDF. Dark is a deliberate switch, not the base.
   ========================================================================== */
:root {
  --fv-bg: #F3F5F8;
  --fv-surface: #FFFFFF;
  --fv-surface-2: #F8FAFD;
  --fv-surface-3: #EEF2F8;
  --fv-surface-inset: #E9EEF6;

  --fv-line: #DBE3EE;
  --fv-line-strong: #C3CFDF;

  --fv-text: #0A1628;
  --fv-text-2: #33455F;
  --fv-muted: #5C6E88;
  --fv-faint: #8A99AE;

  /* Accent reads "live / interactive".

     This is the deployed teal. It used to be declared in workspace.css, which
     loads last on all 22 routes and redefined --fv-accent at :root -- so the
     product's accent was decided by stylesheet order rather than by this file,
     which is the precise failure this file exists to prevent. The value moved
     here unchanged; workspace.css now only aliases it. Anything that wants the
     accent reads --fv-accent and gets the same teal on every route.

     5.04:1 on --fv-surface, so it carries body-size text. --fv-accent-bright is
     the indicator/fill value, where contrast is carried by the shape rather
     than by text sitting on top of it. */
  --fv-accent: #087C78;
  --fv-accent-hover: #066661;
  --fv-accent-bright: #0FA79E;
  --fv-accent-soft: #E5F4F1;
  --fv-accent-line: #A8DED7;

  --fv-up: #047857;
  --fv-up-soft: #E6F6F0;
  --fv-down: #C2333B;
  --fv-down-soft: #FDECEC;
  --fv-flat: #64748B;
  --fv-flat-soft: #EFF2F6;

  --fv-warn: #B45309;
  --fv-warn-soft: #FEF4E6;
  --fv-info: #1D4ED8;
  --fv-info-soft: #E8EFFD;

  --fv-chrome: #0A1628;          /* the sidebar: dark in both themes */
  --fv-chrome-2: #12203A;
  --fv-chrome-line: #1D2E4C;
  --fv-chrome-text: #DCE5F2;
  --fv-chrome-muted: #7C90AE;
  /* Selected nav row inside the chrome. Separate from --fv-accent-soft because
     the sidebar is dark in BOTH themes: the light-theme accent-soft is a pale
     tint and would read as a blown-out block against navy. */
  --fv-chrome-active: #173C46;
  --fv-chrome-active-text: #80E1D5;
  /* Resting nav-row label: deliberately between -text and -muted, so an
     unselected row reads quieter than the selected one without going dim. */
  --fv-chrome-text-2: #B4C3D7;

  --fv-shadow-sm: 0 1px 2px rgba(10, 22, 40, 0.06);
  --fv-shadow: 0 2px 8px rgba(10, 22, 40, 0.07);
  --fv-shadow-lg: 0 12px 32px rgba(10, 22, 40, 0.12);
  --fv-ring: 0 0 0 3px rgba(15, 167, 158, 0.30);

  /* Categorical series colours, for charts that split one measure across
     several named things (underlyings, halls, fund types). Ordered by how
     distinguishable the first few are from each other, because most charts use
     three to six. Deliberately excludes the up/down greens and reds: those
     carry direction, and reusing them here would imply a rise or a fall where
     only a category is meant. */
  --fv-cat-1: #0E7490;
  --fv-cat-2: #B45309;
  --fv-cat-3: #6D28D9;
  --fv-cat-4: #0F766E;
  --fv-cat-5: #A21CAF;
  --fv-cat-6: #1D4ED8;
  --fv-cat-7: #92400E;
  --fv-cat-8: #4D7C0F;

  /* Asset identity -- the commodity module only, where the active metal or crop
     tints the board via --module-accent. Not part of the categorical scale:
     these three name one specific physical thing each, and commodity.js used to
     hard-code them. Silver is darkened from the deployed #B8C6D9, which was so
     light it effectively disappeared against a white panel. */
  --fv-asset-gold: #D5A526;
  --fv-asset-silver: #8FA3BC;
  --fv-asset-saffron: #C8791F;

  --fv-grid-line: rgba(10, 22, 40, 0.07);
  --fv-overlay: rgba(10, 22, 40, 0.45);
  color-scheme: light;
}

/* ==========================================================================
   PALETTE — dark
   ==========================================================================
   Not an inversion. Surfaces step UP in lightness as they come forward, the
   way physical panels do, which keeps depth readable without borders
   everywhere. Up/down hues shift lighter because saturated greens and reds go
   muddy against navy.
   ========================================================================== */
html[data-theme="dark"] {
  --fv-bg: #0B1421;
  --fv-surface: #0C1A30;
  --fv-surface-2: #112240;
  --fv-surface-3: #162C4F;
  --fv-surface-inset: #091426;

  --fv-line: #1C3157;
  --fv-line-strong: #2A4471;

  --fv-text: #E9EFF8;
  --fv-text-2: #C3D0E3;
  --fv-muted: #8DA2C0;
  --fv-faint: #64789A;

  /* The deployed dark-theme teal, moved here from workspace.css for the same
     reason as the light value. */
  --fv-accent: #54D5C2;
  --fv-accent-hover: #80E1D5;
  --fv-accent-bright: #54D5C2;
  --fv-accent-soft: #143C39;
  --fv-accent-line: #1D5A52;

  --fv-up: #34D399;
  --fv-up-soft: #0C2C22;
  --fv-down: #F87171;
  --fv-down-soft: #33161A;
  --fv-flat: #94A3B8;
  --fv-flat-soft: #14213A;

  --fv-warn: #FBBF24;
  --fv-warn-soft: #33270B;
  --fv-info: #60A5FA;
  --fv-info-soft: #10203D;

  --fv-chrome: #040A14;
  --fv-chrome-2: #0A1424;
  --fv-chrome-line: #14243E;
  --fv-chrome-text: #DCE5F2;
  --fv-chrome-muted: #7C90AE;
  --fv-chrome-active: #173C46;
  --fv-chrome-active-text: #80E1D5;
  --fv-chrome-text-2: #B4C3D7;

  --fv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --fv-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  --fv-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
  --fv-ring: 0 0 0 3px rgba(84, 213, 194, 0.32);

  /* Lifted and desaturated for a navy ground: the light-theme values go muddy
     against it and the darkest two become indistinguishable from each other. */
  --fv-cat-1: #22D3EE;
  --fv-cat-2: #FBBF24;
  --fv-cat-3: #A78BFA;
  --fv-cat-4: #2DD4BF;
  --fv-cat-5: #F472B6;
  --fv-cat-6: #60A5FA;
  --fv-cat-7: #FB923C;
  --fv-cat-8: #A3E635;

  /* Lifted for a navy ground; silver returns to its true metal value here,
     which only reads as too-pale against white. */
  --fv-asset-gold: #E8BE4A;
  --fv-asset-silver: #B8C6D9;
  --fv-asset-saffron: #E19440;

  --fv-grid-line: rgba(233, 239, 248, 0.08);
  --fv-overlay: rgba(2, 6, 14, 0.65);
  color-scheme: dark;
}

/* ==========================================================================
   LEGACY BRIDGE
   ==========================================================================
   The old variable names, re-pointed at FinView values.

   This is the whole migration strategy in one block: ~380 KB of existing rules
   read these names, so mapping them here rebrands every page at once without
   touching a single one of those rules. Each name is mapped to its nearest
   FinView equivalent rather than to a fresh colour, so nothing shifts meaning
   in the process.

   Deletion order: a page moves to the component layer, its old rules are
   removed, and when no rule anywhere reads a given legacy name that line is
   deleted from here. When this block is empty the old stylesheets are gone.
   ========================================================================== */
:root,
html[data-theme="dark"] {
  --bg: var(--fv-bg);
  --panel: var(--fv-surface);
  --panel-2: var(--fv-surface-2);
  --panel-soft: var(--fv-surface-2);
  --surface: var(--fv-surface);
  --surface-2: var(--fv-surface-2);
  --surface-3: var(--fv-surface-3);
  --text: var(--fv-text);
  --muted: var(--fv-muted);
  --line: var(--fv-line);
  --border: var(--fv-line);

  /* "navy" and "gold" were already the same colour in the old palette -- both
     were the interactive blue -- so both map to the accent rather than
     resurrecting a gold that no longer exists in the brand. */
  --navy: var(--fv-accent);
  --navy-2: var(--fv-accent-hover);
  --gold: var(--fv-accent);
  --gold-soft: var(--fv-accent-soft);
  --accent: var(--fv-accent);
  --primary: var(--fv-accent);
  --hover: var(--fv-accent-soft);

  --green: var(--fv-up);
  --green-soft: var(--fv-up-soft);
  --red: var(--fv-down);
  --red-soft: var(--fv-down-soft);
  --warning: var(--fv-warn);

  --shadow: var(--fv-shadow);
  --radius: var(--fv-radius-lg);
  --sidebar: var(--fv-sidebar);
  --font: var(--fv-font);
  --card-gap: var(--fv-space-5);
}

/* ==========================================================================
   BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fv-bg);
  color: var(--fv-text);
  font-family: var(--fv-font);
  font-size: var(--fv-text-md);
  line-height: var(--fv-leading-normal);
  /* Persian at UI sizes benefits from the slightly heavier optical weight; 400
     alone looks thin against the navy chrome. */
  font-weight: var(--fv-weight-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Figures line up in columns everywhere, without each table opting in. This is
   the single highest-leverage rule for making dense financial tables readable:
   proportional digits make a column of numbers ragged and uncomparable. */
table, .fv-num, .num, td, th,
input[type="number"], time, .kpi-value, .fv-kpi__value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Latin fragments inside Persian text (ticker codes, ISINs) must not inherit
   RTL ordering or they render reversed. */
.fv-ltr, .ltr {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Links never underline, hover included. On a board that is mostly a dense
   table of symbols, every cell is a link; underlining them on hover made the
   row jump as the pointer crossed it. Hover is signalled by the colour shift
   and by the row's own background change instead.
   Specificity note: the three selectors below set their own hover underline in
   hub.css and pro.css, which would beat a bare `a:hover`, so they are named
   explicitly rather than relying on load order. */
a { color: var(--fv-accent); text-decoration: none; }
a:hover { color: var(--fv-accent-hover); text-decoration: none; }
.market-strategy-link:hover,
.shareholder-name-link:hover,
.shareholder-drill:hover { text-decoration: none; }

/* One visible focus treatment for the whole product, keyboard-only so pointer
   users never see a ring on click. */
:focus-visible {
  outline: 2px solid var(--fv-accent-bright);
  outline-offset: 2px;
  border-radius: var(--fv-radius-sm);
}

::selection {
  background: var(--fv-accent-bright);
  color: #04121A;
}

/* Scrollbars styled to match the surface they sit on -- a default light
   scrollbar on a dark panel is one of the tells that a dark theme was
   retrofitted rather than designed. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--fv-line-strong) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--fv-line-strong);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: var(--fv-radius-full);
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--fv-faint); background-clip: padding-box; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}