/* ── TBS Bespoke ERP System - Design Tokens (dark greyscale · sans-serif) ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Roboto+Mono:wght@400;500&display=swap');

:root {
  /* Greyscale canvas (light) */
  --bg:            #f3f4f6;
  --bg-2:          #ffffff;
  --surface:       #ffffff;
  --surface-2:     #f6f7f9;
  --surface-3:     #eceef1;
  --line:          #e1e4e8;
  --line-2:        #eef0f3;

  --text:          #1a1c1e;
  --text-2:        #4b5158;
  --text-3:        #878d95;
  --text-inv:      #ffffff;

  /* Accent = near-black for primary actions (greyscale) */
  --accent:        #23262b;
  --accent-hover:  #121417;
  --accent-press:  #3a3f45;
  --accent-soft:   #eceef1;
  --accent-ring:   rgba(35, 38, 43, 0.12);

  /* Muted, near-greyscale status tints (kept low-chroma) */
  --pos:           #3a7d59;   --pos-soft:  #e9f3ed;
  --neg:           #b4453d;   --neg-soft:  #fbeceb;
  --warn:          #9c7620;   --warn-soft: #f7efdb;

  --radius-sm:     9px;
  --radius:        14px;
  --radius-lg:     20px;
  --radius-xl:     26px;

  --shadow-sm:     0 1px 2px rgba(20,22,26,.06);
  --shadow:        0 6px 20px rgba(20,22,26,.08);
  --shadow-lg:     0 24px 60px rgba(20,22,26,.16);

  --sidebar-w:     250px;
  --topbar-h:      64px;

  --sans:          'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:          'Roboto Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --transition:    160ms cubic-bezier(.4,0,.2,1);

  /* UI scale. The interface read as over-large at browser 100% and was being
     worked around by zooming the browser to 90%, so that's now the default and
     the browser can sit at its normal 100%.

     `zoom` rather than a smaller root font-size because the layout is mostly
     px-based (~700 px values against ~140 rem): shrinking the root font would
     scale the type and leave every padding, gap and column width untouched,
     which looks worse than doing nothing. zoom scales the whole box model, the
     way the browser's own zoom does. */
  --app-zoom:      0.9;

  /* The viewport height as seen from INSIDE a zoomed container. `zoom` does
     not adjust `vh`, so a `100vh` box inside #app is 100vh of local space
     rendered at 90% - it stops a tenth of the window short and leaves a band
     of bare <body> below it (which is what the login screen was doing).
     Dividing by the zoom cancels that. */
  --vh-full:       calc(100vh / var(--app-zoom));
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; font-size: 15px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  min-height: 100%;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Applied to the app's own top-level containers rather than to <html> or
   <body>, and this is load-bearing: the PDF/GRV documents are rendered into a
   throwaway element appended straight to <body> and captured with
   html2canvas, which bakes an inherited zoom into the captured bitmap — a
   zoomed <body> silently shrank every generated PDF (measured: a 794px page
   captured at 715px). Scoping the zoom here keeps those capture holders
   outside it, so the documents are still produced at true 100%.

   The overlays are listed because they're appended to <body> too, so they'd
   otherwise sit at a different scale from the app behind them.

   Browsers without `zoom` support simply render at 100% — the previous
   behaviour, not a broken one. */
#app,
#login-screen,
.modal-overlay,
.viewer-overlay,
.sp-pop,
.sp-backdrop,
#toast-container { zoom: var(--app-zoom); }

/* Printing is its own scale — never inherit the on-screen zoom. */
@media print {
  :root { --app-zoom: 1; }  /* keeps --vh-full honest on paper too */
  #app, #login-screen, .modal-overlay, .viewer-overlay, #toast-container { zoom: 1; }
}

h1, h2, h3, h4 { font-family: var(--sans); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: var(--text); }
h1 { font-size: 1.85rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }

a { color: var(--text); text-decoration: none; }
a:hover { color: var(--accent-hover); }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }
input, select, textarea, button { font-family: inherit; font-size: 1rem; color: inherit; }

.hidden, .app-hidden { display: none !important; }
.mono { font-family: var(--mono); }
.muted { color: var(--text-3); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c8ccd2; border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #b0b5bc; }

/* Loading spinner */
.loading-wrap { display: flex; align-items: center; justify-content: center; padding: 80px 0; }
.spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--surface-3); border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }