/* ==========================================================================
   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: 34px;
  --fv-control-lg: 40px;

  /* 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: #F5F7FB;
  --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". On light it is darkened well past the
     brand cyan so body-size text on white clears WCAG AA; the brand value
     survives as --fv-accent-bright for fills and indicators, where contrast is
     carried by the shape rather than by the text on top of it. */
  --fv-accent: #0E7490;
  --fv-accent-hover: #155E75;
  --fv-accent-bright: #06B6D4;
  --fv-accent-soft: #E0F5FA;
  --fv-accent-line: #A5E5F2;

  --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;

  --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(6, 182, 212, 0.28);

  /* 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;

  --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: #060D1A;
  --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;

  --fv-accent: #22D3EE;
  --fv-accent-hover: #67E8F9;
  --fv-accent-bright: #22D3EE;
  --fv-accent-soft: #0B2E3C;
  --fv-accent-line: #14556B;

  --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-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(34, 211, 238, 0.3);

  /* 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;

  --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;
  }
}