/* ============================================================
   TEMPUS TRANS — brand design system  ·  "Workbook"
   Portable stylesheet: copy this file into any Tempus application
   (pricing, TMS, groupage ops, fleet) and build screens on top.

   Chosen by Kiril, Sep 2026: Font B + Layout 3.

   Identity
   --------
   Classic operator software with an Excel-workbook shell:
   all-white worksheet, visible gridlines, bottom SHEET TABS as
   the main navigation, a formula-bar strip showing the active
   context, group-box panels, and a sunken status bar.
   Labels are plain bold — no uppercase letterspacing.
   Colors come only from the company logo: petrol blue for
   active/primary, signal red strictly for warnings.

   Typography  Verdana  — everything (the classic office face)
               Consolas — codes and ALL figures
               (system fonts — nothing to load, instant)
   Palette     White #FFFFFF · Ink #1F2A33 · Grid #D0D7DE/#E7EBEF
               Petrol #1E5C82 (logo) · Signal red #EE202D (logo)
   Shape       Flat, square, ruled like a worksheet. Double rule
               above totals. Red left rule = warning. Sheet tabs
               dock at the bottom above the status bar.
   ============================================================ */

:root{
  /* brand tokens */
  --tt-ink:#1F2A33;
  --tt-ink-2:#2B3947;
  --tt-ink-3:#46545F;
  --tt-steel:#64707C;
  --tt-line:#D0D7DE;           /* worksheet gridline */
  --tt-line-2:#E7EBEF;         /* soft gridline */
  --tt-paper:#FFFFFF;
  --tt-paper-2:#F6F8FA;        /* panel / header-row fill */
  --tt-card:#FFFFFF;
  --tt-petrol:#1E5C82;         /* logo petrol — active, focus, primary */
  --tt-petrol-deep:#174A69;
  --tt-red:#EE202D;            /* logo red — warnings only */
  --tt-ok:#1F7A3D;
  --tt-warn:#9A6700;
  --tt-bad:#B0271F;
  --tt-radius:0px;
  --tt-font-body:Verdana,Geneva,Tahoma,sans-serif;
  --tt-font-mono:Consolas,'Courier New',monospace;

  /* compatibility aliases used across Tempus apps */
  --tt-accent:var(--tt-petrol); --tt-accent-deep:var(--tt-petrol-deep);
  --brand:var(--tt-petrol-deep);
  --brand-2:var(--tt-petrol);
  --ink:var(--tt-ink);
  --muted:var(--tt-steel);
  --line:var(--tt-line);
  --bg:var(--tt-paper);
  --card:var(--tt-card);
  --ok:var(--tt-ok); --warn:var(--tt-warn); --bad:var(--tt-bad);
}

/* ---------- base ---------- */
.tt-body{margin:0;font-family:var(--tt-font-body);color:var(--tt-ink);background:#fff;font-size:12.5px}

/* ---------- logo: inline SVG, crisp at any size ---------- */
.tt-logo svg{display:block;height:100%;width:auto}

/* ---------- formula bar ---------- */
.tt-fxbar{display:flex;align-items:center;gap:8px;background:var(--tt-paper-2);border-bottom:1px solid var(--tt-line);padding:4px 10px}
.tt-fxref{min-width:70px;text-align:center;background:#fff;border:1px solid var(--tt-line);padding:3px 8px;font-family:var(--tt-font-mono);font-size:12px;color:var(--tt-petrol-deep);font-weight:700}
.tt-fxtext{font-size:11.5px;color:var(--tt-steel);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- bottom dock: sheet tabs + status bar ---------- */
.tt-dock{position:fixed;bottom:0;left:0;right:0;z-index:30;border-top:1px solid #9AA3AC;background:#DDE2E6}
.tt-sheets{display:flex;overflow-x:auto;background:#DDE2E6}
.tt-sheets button{flex:0 0 auto;background:#E7EAED;border:none;border-right:1px solid #C4CBD1;border-top:2px solid transparent;padding:6px 13px;font-family:var(--tt-font-body);font-size:11px;color:var(--tt-ink-3);cursor:pointer;white-space:nowrap}
.tt-sheets button:hover{background:#F0F2F4;color:var(--tt-ink)}
.tt-sheets button.on{background:#fff;border-top-color:var(--tt-petrol);color:var(--tt-petrol-deep);font-weight:700}
.tt-status{display:flex;flex-wrap:wrap;background:#EDF0F2;border-top:1px solid #C4CBD1;font-family:var(--tt-font-body);font-size:10px;color:var(--tt-ink-3)}
.tt-status span{padding:4px 11px;border-right:1px solid #C4CBD1;box-shadow:inset 1px 1px 0 rgba(255,255,255,.7)}

/* ---------- group boxes: label ON the border ---------- */
.tt-gbox{position:relative;background:#fff;border:1px solid #9AA3AC;padding:18px 12px 12px;margin-top:8px}
.tt-gbox>h2{position:absolute;top:-8px;left:10px;margin:0;background:#fff;padding:0 6px;font-family:var(--tt-font-body);font-weight:700;font-size:11px;color:var(--tt-petrol-deep)}

/* ---------- forms: label-left ledger rows, plain bold labels ---------- */
.tt-label{display:block;font-family:var(--tt-font-body);font-weight:700;font-size:11px;color:var(--tt-ink-3)}
.tt-input{width:100%;padding:5px 8px;border:1px solid #99A2AB;border-top-color:#7E8891;border-radius:0;font-family:var(--tt-font-body);font-size:12.5px;background:#fff;color:var(--tt-ink);box-shadow:inset 1px 1px 2px rgba(31,42,51,.07)}
.tt-input:focus{outline:none;border-color:var(--tt-petrol);box-shadow:inset 1px 1px 2px rgba(31,42,51,.07),0 0 0 2px rgba(30,92,130,.22)}

/* ---------- buttons: classic raised / petrol primary ---------- */
.tt-btn{cursor:pointer;border-radius:0;font-family:var(--tt-font-body);font-weight:700;font-size:11.5px;padding:6px 14px;border:1px solid}
.tt-btn-primary{background:var(--tt-petrol);color:#fff;border-color:#123C55}
.tt-btn-primary:hover{background:var(--tt-petrol-deep)}
.tt-btn-primary:active{transform:translate(1px,1px)}
.tt-btn-ghost{background:linear-gradient(#FDFDFD,#E9ECEF);color:var(--tt-ink);border-color:#8A939C}
.tt-btn-ghost:hover{background:linear-gradient(#fff,#F2F4F6)}
.tt-btn-danger{background:linear-gradient(#FDFDFD,#E9ECEF);color:var(--tt-bad);border-color:var(--tt-bad)}
.tt-btn-danger:hover{background:var(--tt-bad);color:#fff}

/* ---------- worksheet tables: full gridlines, Consolas figures ---------- */
.tt-table{width:100%;border-collapse:collapse;font-size:12px;border:1px solid var(--tt-line)}
.tt-table th{background:var(--tt-paper-2);font-family:var(--tt-font-body);font-weight:700;font-size:10.5px;color:var(--tt-ink-3);text-align:left;padding:5px 8px;border:1px solid var(--tt-line)}
.tt-table td{padding:5px 8px;border:1px solid var(--tt-line-2)}
.tt-table .num{text-align:right;font-family:var(--tt-font-mono);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.tt-table .total td{font-weight:700;font-size:13.5px;border-top:3px double var(--tt-ink)}

/* ---------- signals ---------- */
/* counters and markers are plain bracketed text, not pills */
.tt-count{font-family:var(--tt-font-mono);font-size:11px;color:var(--tt-steel)}
.tt-count::before{content:"["} .tt-count::after{content:"]"}
.tt-info{background:#FBFCFC;border:1px solid #B9C0C7;box-shadow:inset 1px 1px 2px rgba(31,42,51,.05);padding:7px 10px;font-size:11.5px}
.tt-notice{background:#FFF8F7;border:1px solid #F0CFCC;border-left:4px solid var(--tt-red);padding:8px 11px}