/* =====================================================================
   SMV dashboard — THE THEME (prompt 18, 2026-10-06). One place for every colour, font and motion; index.html, floor.html,
   ui.css and every page script use these variables only (tools/theme-check.js fails the deploy on a hard-coded colour
   anywhere else, except the fixed money colours listed below).

   "High-tech, fast": a deep navy top bar (--nav) with an electric cyan → blue accent (--el1 → --el2, --grad) for active tabs,
   highlights and progress; a light page (--bg) so tables and numbers read in daylight on the shop floor.
   The two COMPANY colours (--co / --coB: the main colour of each logo, or Admin → Settings "<company> accent colour") mark
   the company: the header stripe, the company switcher, the company badges, the chart series, the TV title. They are set
   by brandApply() in cash.js; the electric accent never changes with the company.
   MONEY COLOURS ARE FIXED and must never be re-themed: green received / good, amber due / warn, red overdue / bad,
   dark red escalated, purple closed-by-others, grey not due.
   ===================================================================== */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(assets/fonts/inter-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+20B9, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Noto Sans Tamil'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/noto-sans-tamil-tamil-400-normal.woff2) format('woff2'); unicode-range: U+0964-0965, U+0B82-0BFA, U+200C-200D, U+20B9, U+25CC; }
@font-face { font-family: 'Noto Sans Tamil'; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/noto-sans-tamil-tamil-700-normal.woff2) format('woff2'); unicode-range: U+0964-0965, U+0B82-0BFA, U+200C-200D, U+20B9, U+25CC; }
:root {
  /* base */
  --bg: #F4F7FB; --card: #ffffff; --ink: #1d2433; --muted: #5b6478; --line: #e4e7ec;
  --nav: #0B1220; --nav-2: #141f33; --nav-ink: #e6edf7; --nav-muted: #9fb0c8; --nav-line: #22304a;
  /* the electric accent */
  --el1: #00C2FF; --el2: #2F6BFF; --grad: linear-gradient(90deg, var(--el1), var(--el2)); --accent: #2F6BFF; --acc2: #e3f1ff; --accentB: #2F6BFF; --glow: 0 0 0 3px rgba(47, 107, 255, .22);
  /* the two companies (set by brandApply from the logos / settings) */
  --co: #b23a36; --coB: #ea3239; --co-smv: #b23a36; --co-aj: #ea3239;
  /* neutrals */
  --n50: #f9fafb; --n100: #f2f4f7; --n150: #eef1f5; --n200: #e5e7eb; --n300: #d0d5dd; --n400: #98a2b3; --n500: #6b7280; --n600: #475467; --n700: #334155; --n800: #1f2937;
  /* blues (information) */
  --blue: #1f5fbf; --blue-d: #184d9c; --blue-b: #2563eb; --blue-50: #eef4ff; --blue-100: #dbe7ff; --sky-100: #e0f2fe; --sky-800: #075985; --info: #1f5fbf; --infobg: #e3f1ff;
  /* MONEY — fixed, never re-themed */
  --good: #12805c; --gbg: #e7f6ef; --warn: #b54708; --bad: #c4320a; --bbg: #fdeee8; --darkred: #7f1d1d; --purple: #7e22ce; --notdue: #98a2b3;
  /* chart series (one per person / category) */
  --chart-1: #1f5fbf; --chart-2: #12805c; --chart-3: #f79009; --chart-4: #7a5af8; --chart-5: #dd2590; --chart-6: #0e9384; --chart-7: #667085;
  /* shape, depth, motion */
  /* spacing scale (prompt 20): every gap, padding and margin is one of these */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --navy: #1b2a4a;   /* the neutral number colour on the KPI tiles */
  --radius: 8px; --radius-l: 12px; --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 14px rgba(16, 24, 40, .06); --shadow-l: 0 8px 28px rgba(16, 24, 40, .14); --t: 150ms;
  --font: 'Inter', 'Noto Sans Tamil', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
/* ---------- type ---------- */
body { font-family: var(--font); font-variant-numeric: tabular-nums; background: var(--bg); color: var(--ink); }
html[lang="ta"] body, body.ta { font-family: 'Noto Sans Tamil', 'Inter', system-ui, sans-serif; line-height: 1.45; }   /* Tamil letters need the room above and below */
html[lang="ta"] .pill, body.ta .pill, html[lang="ta"] button, body.ta button { line-height: 1.35; }
.n, td.n, th.n, .tile .v, .sh-num .v, .progtxt, .kn, .cnt { font-variant-numeric: tabular-nums; }
/* ---------- the top bar and the tabs: navy, electric active tab ---------- */
header { background: var(--nav); color: var(--nav-ink); border-bottom: 1px solid var(--nav-line); border-top: 4px solid var(--co); border-image: linear-gradient(90deg, var(--co) 50%, var(--coB) 50%) 1; }
header h1 { color: var(--nav-ink); } header small { color: var(--nav-muted); } header .live { background: var(--el1); }
header button.ghost, header button.btn-neutral, header button.btn-info, header button.btn-nav, header button.bell { background: transparent; color: var(--nav-ink); border: 1px solid var(--nav-line); font-weight: 600; }
header button.btn-info::before { content: none; } header button:hover { border-color: var(--el1); box-shadow: var(--glow); }
header button.bell.amber { color: #ffd166; border-color: #ffd166; } header button.bell.red { color: #ff8a80; border-color: #ff8a80; }
#logos img, .tvlogos img { background: #fff; padding: 3px 6px; border-radius: var(--radius); }
.cosw { border-color: var(--nav-line); } .cosw button { background: var(--nav-2); color: var(--nav-muted); } .cosw button.on { background: var(--co); color: #fff; }
.langbar a, header .langbar a { color: var(--nav-muted); }
nav { background: var(--nav); border-bottom: 1px solid var(--nav-line); padding: 6px 16px; }
nav a { color: var(--nav-muted); border-radius: var(--radius); transition: background var(--t), color var(--t); }
nav a:hover { color: var(--nav-ink); background: var(--nav-2); }
nav a.on { background: var(--grad); color: #fff; font-weight: 700; box-shadow: var(--glow); }
nav a .nbadge { background: var(--bad); color: #fff; }
#banner { border-bottom-color: var(--bad); }
/* ---------- the loading line (api.js sets body.loading while any call runs) ---------- */
#ldbar { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--grad); z-index: 60; opacity: 0; transition: width .4s ease, opacity .3s; pointer-events: none; }
body.loading #ldbar { opacity: 1; width: 85%; animation: ldpulse 1.2s ease-in-out .4s infinite alternate; }
@keyframes ldpulse { from { width: 60%; } to { width: 90%; } }
/* ---------- cards, tiles, KPI numbers, chips ---------- */
.card, .tile, .kc, .sh-card, .sh-item, .sh-num, .stcard { border-radius: var(--radius-l); box-shadow: var(--shadow); }
.kc, .sh-card, .sh-item { border-radius: var(--radius); }
.tile .v:not(.good):not(.bad):not(.warn):not(.info), .sh-num:not(.good):not(.bad) .v, .progtxt { font-size: clamp(22px, 2.2vw, 36px); white-space: nowrap; font-weight: 800; letter-spacing: -.01em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tile .v.good, .tile .v.bad, .tile .v.warn, .tile .v.info { font-size: clamp(22px, 2.2vw, 36px); white-space: nowrap; }
/* prompt 16 F: inside a tile grid the number follows the width of ITS OWN TILE (container units), so it can never run past the
   edge — with the gradient paint, digits past the edge were invisible ("₹3,07,90"). 12cqi keeps 12 characters inside the tile. */
.tiles > .tile { container-type: inline-size; }
.tiles > .tile .v:not(.good):not(.bad):not(.warn):not(.info), .tiles > .tile .v.good, .tiles > .tile .v.bad, .tiles > .tile .v.warn, .tiles > .tile .v.info { font-size: clamp(18px, 12cqi, 32px); }
/* ---------- no clipped text, anywhere (prompt 20; tools/ui-check.js fails the deploy on a clipped or spilled text) ---------- */
.tile, .kc, .sh-num, .sh-card, .stcard, .card { min-width: 0; }
.tile .v, .sh-num .v, .progtxt { overflow-wrap: anywhere; }   /* a number never spills past its tile: the tile grows, the number shrinks */
.tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: var(--s3); }
.tile .k { line-height: 1.35; overflow-wrap: anywhere; }
.pill { max-width: 100%; white-space: normal; line-height: 1.3; vertical-align: baseline; }   /* a long Tamil chip wraps instead of running out of its row */
.hint, .note, .empty, .t, label, p { overflow-wrap: anywhere; }
/* table cells stay on one line (dates, amounts) and the table scrolls sideways inside its .scroll box on a small screen */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
[title] { cursor: default; }   /* the full value of a shortened text is on hover */
h1, h2, h3 { overflow-wrap: anywhere; }
/* ---------- hover and press: rows and cards lift, chips show the full value ---------- */
tr.r, .chk, .kc, .sh-item { transition: background var(--t), box-shadow var(--t), transform var(--t); }
tr.r:hover, .chk:hover { background: var(--n50); }
.kc:hover, .sh-item:hover { box-shadow: var(--shadow-l); transform: translateY(-1px); }
.kc:active, .sh-item:active { transform: none; box-shadow: var(--shadow); }
@media (prefers-reduced-motion: reduce) { .kc:hover, .sh-item:hover { transform: none; } }
.pill { border-radius: 999px; } .pill.g, .pill.a, .pill.r, .pill.b, .pill.p, .pill.y { padding-left: 7px; }
.pill.g::before, .pill.a::before, .pill.r::before, .pill.b::before, .pill.p::before, .pill.y::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; background: currentColor; vertical-align: 1px; }
div.sub a.on { background: var(--acc2); color: var(--accent); border-color: var(--accent); }
.prog div { background: var(--grad); } .prog.done div { background: var(--good); }
.tabs2 a.on, .kbar a.on { background: var(--acc2); color: var(--accent); }
/* ---------- buttons: flat, 8 px, glow on hover, 48 px on a tablet ---------- */
button { border-radius: var(--radius); transition: background var(--t), box-shadow var(--t), border-color var(--t), transform var(--t); box-shadow: none; }
button:hover { box-shadow: var(--glow); } button:active { transform: translateY(1px); }
button.btn-primary:hover, button.call:hover { box-shadow: 0 0 0 3px rgba(18, 128, 92, .25); } button.btn-danger:hover, button.danger:hover { box-shadow: 0 0 0 3px rgba(200, 30, 30, .25); }
button.btn-caution:hover { box-shadow: 0 0 0 3px rgba(180, 83, 9, .25); } button.btn-neutral:hover, button.ghost:hover { box-shadow: 0 0 0 3px rgba(152, 162, 179, .3); }
button:disabled:hover { box-shadow: none; transform: none; }
@media (pointer: coarse), (max-width: 1024px) { button:not(.sm):not(.dlgx):not(.btn-seg):not(.btn-nav), .btnlike { min-height: 48px; } }
/* ---------- motion ---------- */
.pane.on { animation: fadein var(--t) ease-out; } #dlg .box { animation: popin var(--t) ease-out; } #dlg.side .box { animation: slidein var(--t) ease-out; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes popin { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
@keyframes slidein { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pane.on, #dlg .box, #dlg.side .box { animation: none; } button { transition: none; } }
/* ---------- the login page ---------- */
body:has(#pinbox:not([style*="display: none"])) { background: var(--nav); }
#pinbox { border-radius: var(--radius-l); box-shadow: var(--shadow-l); border: 0; max-width: 360px; padding: 24px; }
#pinbox h2 { font-size: 20px; } #pinbox .logos { display: flex; gap: 10px; justify-content: center; margin-bottom: 10px; } #pinbox .logos img { height: 54px; max-width: 150px; object-fit: contain; }
#pinbox .tagline { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; margin-bottom: 6px; }
/* ---------- company colour where the company matters ---------- */
.bars .s, .lchip .s { background: var(--blue); } .bars .c, .lchip .c { background: var(--navy); }   /* the Overview chart: the same colours as the tiles (sales blue, costs navy) */
.kco.smv { background: var(--co-smv); color: #fff; } .kco.aj { background: var(--co-aj); color: #fff; } .kco.bo { background: var(--n600); color: #fff; }
/* ---------- the Big screen: dark (default) or light, Admin → Settings → Theme ---------- */
#tv { background: var(--nav); color: var(--nav-ink); } #tv .tvc { background: var(--nav-2); border-radius: var(--radius-l); } #tv .tvt { color: #fff; }
#tv .tvs, #tv .tvsec, #tv .tvc .k { color: var(--nav-muted); } #tv .tvc .x { color: #cbd5e1; } #tv .tvjob { background: var(--n700); }
#tv .tvc .v:not(.good):not(.bad):not(.warn) { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
#tv .prog { background: var(--n700); } #tv .prog div { background: var(--grad); }
#tv.light { background: var(--bg); color: var(--ink); } #tv.light .tvc { background: var(--card); box-shadow: var(--shadow); } #tv.light .tvt { color: var(--ink); }
#tv.light .tvs, #tv.light .tvsec, #tv.light .tvc .k { color: var(--muted); } #tv.light .tvc .x { color: var(--n600); } #tv.light .tvjob { background: var(--n100); color: var(--ink); }
#tv.light .good { color: var(--good); } #tv.light .bad { color: var(--bad); } #tv.light .warn { color: var(--warn); } #tv.light .prog { background: var(--n150); }
#tv.light button.ghost, #tv.light button.btn-neutral { color: var(--ink); border-color: var(--n300); } #tv.light input { background: #fff; color: var(--ink); border-color: var(--n300); }
#tv.light .tvlogos img { background: transparent; }
/* ---------- print: the company colour on the acknowledgement / DC head ---------- */
@media print { #print .cohead { border-bottom: 3px solid var(--co); } }