@import url('https://cdnjs.cloudflare.com/ajax/libs/inter-ui/3.19.3/inter.css');

  :root {
    --ink: #16212B;
    --ink-soft: #4A5A68;
    --ink-faint: #8B99A6;
    --bg: #F3F5F7;
    --surface: #FFFFFF;
    --line: #E1E6EA;
    --brand: #17546E;
    --brand-dark: #0F3B4E;
    --brand-tint: #E7F0F3;
    --amber: #B8752A;
    --amber-tint: #FBF0E2;
    --danger: #A63A3A;
    --danger-tint: #FBEAEA;
    --success: #2E7D5B;
    --success-tint: #E7F4EE;
    --violet: #6E5AA8;
    --violet-tint: #EDE9F7;
    --radius: 10px;
    --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --sans: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* ONE TYPE SCALE FOR THE WHOLE ERP. Four steps, nothing between them:
       a label, the body every value and control is set in, a section title,
       a page headline. The observation sheet arrived with a scale of its own
       (9/12/14/15/18/26px) and read as two designs stacked, which is what
       these tokens exist to stop - a screen that needs a size picks the step
       above or below, it does not invent one. */
    --fs-label: 11px;
    --fs-body: 13px;
    --fs-title: 15px;
    --fs-head: 20px;
    --fs-figure: 26px;   /* the dashboards' counters, and nothing else */
  }

  /* A heading with no rule is drawn at the browser's own em multiples -
     32 / 24 / 18.72 / 16px - which is four sizes nobody chose. Pinned to
     the scale; a screen that wants a different weight or colour still
     says so itself. */
  h1, h2 { font-size: var(--fs-head); font-weight: 600; margin: 0 0 10px; }
  h3, h4 { font-size: var(--fs-title); font-weight: 600; margin: 0 0 8px; }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: var(--sans);
    /* THE ROOT OF THE ZOO. Nothing set a size on body, so every element with
       no rule of its own inherited the browser's 16px - a size the ERP never
       chose and used nowhere else. Thirteen of them were still on screen after
       847 declarations had been put on the scale. */
    font-size: var(--fs-body);
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
  }
  ::selection { background: var(--brand); color: white; }
  .mono { font-family: var(--mono); letter-spacing: -0.01em; }

  /* FORM CONTROLS DO NOT INHERIT TYPE. A <select> or <input> with no font of
     its own is drawn by the browser in its own UI font at its own size - so
     every dropdown on the observation sheet was Arial ~13.3px sitting beside
     Inter 13px, which is what read as "uneven font". Bare element selectors,
     so any component rule still wins. */
  input, select, textarea, optgroup, option {
    font-family: var(--sans); font-size: var(--fs-body);
  }

  #app { display: flex; min-height: 100vh; }
  /* The nav is out of flow, so the content column is moved over by its width
     rather than being placed beside it. */
  #mainCol { margin-left: 220px; }

  /* FIXED, AND ONLY THE RIGHT PANE SCROLLS. Gurudeep, 23.09.2026: "the left
     sidebar is fixed on every screen. Only the right pane scrolls... Apply it
     to every screen, not only the dashboard."

     IT WAS SCROLLING EVERYWHERE, and that is one rule rather than a sweep:
     #app is a flex ROW, so both columns stretch to the taller of the two and
     the whole page scrolls as one. Measured at 1366x768 on the dashboard - the
     page was 970px while the dashboard's own content was 728px, because the
     NAV was the tall column. Taking it out of flow dropped the page to 797px
     without touching a single dashboard rule.

     height:100vh with its own overflow is what lets a 26-item nav live on a
     768px screen: the nav scrolls inside itself while the page does not. */
  nav.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 40;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* A fixed-height flex column shrinks its children by default, so a nav
       taller than the screen squashed its items instead of scrolling past
       them. 23.09.2026: "some points are hiding in left side bar". */
    
    width: 220px;
    flex-shrink: 0;
    background: var(--brand-dark);
    color: #DCE8ED;
    padding: 4px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .brand-mark { font-family: var(--mono); font-weight: 600; font-size: var(--fs-title); color: white; letter-spacing: 0.02em; margin-bottom: 4px; padding: 0 10px; }
  nav.sidebar > * { flex-shrink: 0; }
  .brand-sub { font-size: var(--fs-label); color: #7FA3B4; padding: 0 10px; margin-bottom: 4px; letter-spacing: 0.03em; text-transform: uppercase; }