/* CRM design layer. Shared tokens and components taken from the vacancy inspection record
   (css/inspection-record-overview.css), so every redesigned page speaks the same language:
   a solid sheet, a blue eyebrow, one confident title, blue section heads on a 2 px rule,
   plain rows, color only where it means state, and 3D glass labels.
   Loaded by no page yet. A page adopts it by linking this file after its other stylesheets
   and using the crm- classes or the --crm- tokens.
   CRM pages are scaled to 0.8 from 769 to 1728 px wide, so the type sizes below are the
   drawn size. Above 1728 and on phones the tokens drop to their real-size values.
   Status colors: green done, amber waiting or due soon, red overdue or failed, blue open or
   active, violet withdrawn, gray closed or not started. Small text uses #2c62c9 rather than
   the brand #5B8DEF, which is only 2.7:1 on white. */
:root {
  --crm-sheet:#ffffff; --crm-sheet-2:#f5f7fb; --crm-line:var(--hairline,rgba(0,0,0,.07)); --crm-line-2:rgba(16,24,40,.16);
  --crm-ink:#141821; --crm-ink-2:#535a67; --crm-ink-3:#646b78; --crm-on-page:#1c2430;
  --crm-blue:#2c62c9; --crm-blue-soft:rgba(44,98,201,.1);
  --crm-ok:#0f6e35; --crm-ok-soft:rgba(15,110,53,.1);
  --crm-amber:#7c4a00; --crm-amber-soft:rgba(190,120,0,.13);
  --crm-bad:#b01717; --crm-bad-soft:rgba(176,23,23,.08);
  --crm-violet:#5b3a94; --crm-violet-soft:rgba(91,58,148,.1);
  --crm-ring-a:#2c62c9; --crm-ring-b:#12894a; --crm-ring-track:#8f95a1;
  --crm-tint-warn:rgba(255,238,200,.6); --crm-tint-up:rgba(214,244,222,.6); --crm-tint-blue:rgba(214,228,255,.6); --crm-tint-bad:rgba(255,224,220,.6);
  --crm-plate:rgba(255,255,255,.9);
  --crm-shadow:var(--shadow,0 8px 30px rgba(20,20,43,.1),0 2px 8px rgba(20,20,43,.06));
  --crm-rim:inset 0 1px 0 var(--inset,rgba(255,255,255,.6));
  --crm-edge:var(--glass-edge,rgba(255,255,255,.75));
  --crm-radius:var(--r-lg,24px); --crm-radius-md:var(--r-md,16px);
  --crm-gap:20px; --crm-pad:32px; --crm-max:1256px;
  --crm-fs-hero:46px; --crm-fs-h2:24px; --crm-fs-h3:22px; --crm-fs-body:19px; --crm-fs-note:17px; --crm-fs-small:15px; --crm-fs-big:44px;
  --crm-control:48px;
  --crm-glass-neutral:linear-gradient(180deg,#eef1f6,#d9dfe8); --crm-glass-neutral-edge:#b8c1ce; --crm-glass-neutral-ink:#3a4453;
  --crm-glass-blue:linear-gradient(180deg,#dbe7fd,#b4cbf6); --crm-glass-blue-edge:#8fadea; --crm-glass-blue-ink:#163f8f;
  --crm-glass-ok:linear-gradient(180deg,#c9f3df,#97d9b8); --crm-glass-ok-edge:#77b99a; --crm-glass-ok-ink:#164f38;
  --crm-glass-warn:linear-gradient(180deg,#ffe9b5,#edc56c); --crm-glass-warn-edge:#d4aa52; --crm-glass-warn-ink:#5e3f0a;
  --crm-glass-bad:linear-gradient(180deg,#ffd9d6,#f4aaa5); --crm-glass-bad-edge:#dc8a84; --crm-glass-bad-ink:#7c1616;
  --crm-glass-violet:linear-gradient(180deg,#e8dcf8,#cbb4e7); --crm-glass-violet-edge:#b195d0; --crm-glass-violet-ink:#4f3070;
  --crm-glass-sh:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(0,0,0,.05),0 2px 4px rgba(21,47,76,.14);
}
[data-theme="dark"],[data-theme="dim"] {
  --crm-sheet:#181a21; --crm-sheet-2:#22252e; --crm-line-2:rgba(255,255,255,.18);
  --crm-ink:#f3f4f7; --crm-ink-2:#b1b7c2; --crm-ink-3:#979da9; --crm-on-page:#f3f4f7;
  --crm-blue:#8fb4f5; --crm-blue-soft:rgba(143,180,245,.14);
  --crm-ok:#4fd081; --crm-ok-soft:rgba(79,208,129,.14);
  --crm-amber:#ffc266; --crm-amber-soft:rgba(255,194,102,.14);
  --crm-bad:#ff8f86; --crm-bad-soft:rgba(255,143,134,.13);
  --crm-violet:#c7aef0; --crm-violet-soft:rgba(199,174,240,.14);
  --crm-ring-a:#7fa9ff; --crm-ring-b:#3fe08a; --crm-ring-track:#6c7280;
  --crm-tint-warn:rgba(255,194,102,.1); --crm-tint-up:rgba(79,208,129,.11); --crm-tint-blue:rgba(127,169,255,.11); --crm-tint-bad:rgba(255,143,134,.1);
  --crm-plate:rgba(20,22,29,.88);
  --crm-glass-neutral:linear-gradient(180deg,#424b58,#2d3541); --crm-glass-neutral-edge:#687587; --crm-glass-neutral-ink:#dce4ef;
  --crm-glass-blue:linear-gradient(180deg,#2f4a7d,#1f3359); --crm-glass-blue-edge:#4f6fa8; --crm-glass-blue-ink:#d3e2ff;
  --crm-glass-ok:linear-gradient(180deg,#285d47,#173e2e); --crm-glass-ok-edge:#438868; --crm-glass-ok-ink:#c2f4db;
  --crm-glass-warn:linear-gradient(180deg,#645023,#483718); --crm-glass-warn-edge:#9a7936; --crm-glass-warn-ink:#ffe9af;
  --crm-glass-bad:linear-gradient(180deg,#6a2f2d,#4a201f); --crm-glass-bad-edge:#a4574f; --crm-glass-bad-ink:#ffd5d0;
  --crm-glass-violet:linear-gradient(180deg,#59416e,#3e2c51); --crm-glass-violet-edge:#8e69ad; --crm-glass-violet-ink:#ead8ff;
  --crm-glass-sh:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.2),0 2px 4px rgba(0,0,0,.3);
}
@media (min-width:1729px) { :root { --crm-fs-hero:38px; --crm-fs-h2:20px; --crm-fs-h3:18px; --crm-fs-body:15px; --crm-fs-note:14px; --crm-fs-small:13px; --crm-fs-big:34px; --crm-control:44px; --crm-pad:28px; } }
@media (max-width:768px) { :root { --crm-fs-hero:clamp(24px,7vw,27px); --crm-fs-h2:18px; --crm-fs-h3:18px; --crm-fs-body:15.5px; --crm-fs-note:14px; --crm-fs-small:13px; --crm-fs-big:30px; --crm-control:44px; --crm-gap:12px; --crm-pad:18px; } }

/* Page frame */
.crm-page { max-width:var(--crm-max); margin:0 auto; color:var(--crm-ink); min-width:0; }
.crm-page :is(*,*::before,*::after) { box-sizing:border-box; }
.crm-page :is(button,a,[role="button"],[tabindex]):focus-visible { outline:2px solid var(--crm-blue); outline-offset:2px; }

/* Header: blue eyebrow, one big title, a plain-English story, a thin facts row. */
.crm-eyebrow { margin:0 0 8px; font-size:var(--crm-fs-small); font-weight:700; letter-spacing:.02em; color:var(--crm-blue); }
.crm-title { margin:0; font-size:var(--crm-fs-hero); line-height:1.1; font-weight:720; letter-spacing:-.03em; color:var(--crm-ink); overflow-wrap:anywhere; text-wrap:balance; }
.crm-story { margin:12px 0 0; font-size:var(--crm-fs-body); line-height:1.3; font-weight:640; color:var(--crm-ink); text-wrap:balance; }
.crm-facts { display:flex; flex-wrap:wrap; gap:6px 24px; margin:14px 0 0; padding:12px 0 0; border-top:1px solid var(--crm-line); }
.crm-facts dt { font-size:var(--crm-fs-small); font-weight:500; color:var(--crm-ink-2); }
.crm-facts dd { margin:1px 0 0; font-size:var(--crm-fs-small); font-weight:680; font-variant-numeric:tabular-nums; }

/* Sheets. Solid, so long lists scroll without cost. Tone washes in from the top left. */
.crm-sheet { min-width:0; margin-bottom:calc(var(--crm-gap) * .8); padding:var(--crm-pad); background:var(--crm-sheet); border:1px solid var(--crm-edge); border-radius:var(--crm-radius); box-shadow:var(--crm-rim),var(--crm-shadow); }
.crm-sheet[data-tone="warn"] { background:radial-gradient(90% 90% at 0 0,var(--crm-tint-warn),transparent 70%),var(--crm-sheet); }
.crm-sheet[data-tone="ok"] { background:radial-gradient(90% 90% at 0 0,var(--crm-tint-up),transparent 70%),var(--crm-sheet); }
.crm-sheet[data-tone="blue"] { background:radial-gradient(90% 90% at 0 0,var(--crm-tint-blue),transparent 70%),var(--crm-sheet); }
.crm-sheet[data-tone="bad"] { background:radial-gradient(90% 90% at 0 0,var(--crm-tint-bad),transparent 70%),var(--crm-sheet); }
.crm-strip { display:flex; align-items:center; gap:14px; flex-wrap:wrap; min-width:0; margin-bottom:calc(var(--crm-gap) * .8); padding:12px 16px; background:var(--crm-sheet); border:1px solid var(--crm-edge); border-radius:var(--crm-radius-md); box-shadow:var(--crm-rim),var(--crm-shadow); }

/* Section heads: blue on a 2 px rule, with a quiet count at the right. */
.crm-section { margin-top:calc(var(--crm-pad) * .8); min-width:0; }
.crm-section:first-child { margin-top:0; }
.crm-section-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0; padding-bottom:9px; border-bottom:2px solid var(--crm-blue); font-size:var(--crm-fs-h3); font-weight:730; letter-spacing:-.015em; color:var(--crm-blue); }
.crm-section-count { font-size:var(--crm-fs-small); font-weight:600; letter-spacing:0; color:var(--crm-ink-2); }

/* Plain rows, not boxes in boxes. */
.crm-row { display:flex; align-items:center; gap:14px; min-height:calc(var(--crm-control) + 8px); padding:8px 0; border-bottom:1px solid var(--crm-line); color:var(--crm-ink); font-size:var(--crm-fs-note); min-width:0; }
.crm-row:last-child { border-bottom:0; }
.crm-row-main { flex:1 1 auto; min-width:0; font-weight:620; overflow-wrap:anywhere; }
.crm-row-sub { display:block; font-size:var(--crm-fs-small); font-weight:450; color:var(--crm-ink-2); }

/* A number that matters: a tile with no box of its own. Tone colors the number only. */
.crm-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:0; min-width:0; }
.crm-stat { display:block; min-width:0; padding:12px 16px; border:0; border-left:1px solid var(--crm-line); background:none; color:inherit; font:inherit; text-align:left; text-decoration:none; }
.crm-stat:first-child { border-left:0; padding-left:0; }
.crm-stat:is(a,button):hover .crm-stat-num { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; }
.crm-stat:is(a,button) { cursor:pointer; }
.crm-stat-label { display:block; font-size:var(--crm-fs-small); font-weight:560; color:var(--crm-ink-2); }
.crm-stat-num { display:block; margin-top:2px; font-size:var(--crm-fs-big); line-height:1.1; font-weight:720; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--crm-ink); }
.crm-stat[data-tone="ok"] .crm-stat-num { color:var(--crm-ok); }
.crm-stat[data-tone="warn"] .crm-stat-num { color:var(--crm-amber); }
.crm-stat[data-tone="bad"] .crm-stat-num { color:var(--crm-bad); }
.crm-stat[data-tone="blue"] .crm-stat-num { color:var(--crm-blue); }

/* 3D glass labels. Neutral by default; data-tone colors them. */
.crm-label { display:inline-flex; align-items:center; gap:6px; min-height:26px; max-width:100%; padding:2px 11px; border:1px solid var(--crm-glass-neutral-edge); border-radius:999px; background:var(--crm-glass-neutral); box-shadow:var(--crm-glass-sh); color:var(--crm-glass-neutral-ink); font-size:var(--crm-fs-small); font-weight:680; line-height:1.2; white-space:nowrap; }
.crm-label[data-tone="blue"] { border-color:var(--crm-glass-blue-edge); background:var(--crm-glass-blue); color:var(--crm-glass-blue-ink); }
.crm-label[data-tone="ok"] { border-color:var(--crm-glass-ok-edge); background:var(--crm-glass-ok); color:var(--crm-glass-ok-ink); }
.crm-label[data-tone="warn"] { border-color:var(--crm-glass-warn-edge); background:var(--crm-glass-warn); color:var(--crm-glass-warn-ink); }
.crm-label[data-tone="bad"] { border-color:var(--crm-glass-bad-edge); background:var(--crm-glass-bad); color:var(--crm-glass-bad-ink); }
.crm-label[data-tone="violet"] { border-color:var(--crm-glass-violet-edge); background:var(--crm-glass-violet); color:var(--crm-glass-violet-ink); }
.crm-dot { flex:none; width:9px; height:9px; border-radius:50%; background:var(--crm-ink-3); }
.crm-dot[data-tone="blue"] { background:var(--crm-blue); }
.crm-dot[data-tone="ok"] { background:var(--crm-ok); }
.crm-dot[data-tone="warn"] { background:#e29500; }
.crm-dot[data-tone="bad"] { background:var(--crm-bad); }
.crm-dot[data-tone="violet"] { background:var(--crm-violet); }

/* Controls */
.crm-pill { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:var(--crm-control); max-width:100%; padding:0 16px; border:1px solid var(--crm-edge); border-radius:999px; background:var(--crm-sheet); box-shadow:var(--crm-rim),0 2px 8px rgba(20,20,43,.08); color:var(--crm-ink); font:inherit; font-size:var(--crm-fs-small); font-weight:680; text-decoration:none; cursor:pointer; }
.crm-pill:hover { background:var(--crm-sheet-2); }
.crm-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:var(--crm-control); padding:0 16px; border:1px solid var(--crm-line-2); border-radius:12px; background:var(--crm-sheet); color:var(--crm-ink); font:inherit; font-size:var(--crm-fs-small); font-weight:680; text-decoration:none; cursor:pointer; }
.crm-btn:hover { background:var(--crm-sheet-2); }
.crm-btn[data-tone="primary"] { border-color:transparent; background:var(--crm-blue); color:#fff; }
[data-theme="dark"] .crm-btn[data-tone="primary"],[data-theme="dim"] .crm-btn[data-tone="primary"] { color:#10131a; }
.crm-btn[data-tone="bad"] { border-color:var(--crm-bad); color:var(--crm-bad); }

/* Quiet underline tabs */
.crm-tabs { display:flex; flex-wrap:nowrap; gap:4px; margin:0 0 14px; border-bottom:1px solid var(--crm-line); overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
.crm-tabs::-webkit-scrollbar { display:none; }
.crm-tab { flex:none; min-height:var(--crm-control); margin:0 0 -1px; padding:0 14px; border:0; border-bottom:2px solid transparent; border-radius:0; background:none; color:var(--crm-on-page); font:inherit; font-size:var(--crm-fs-note); font-weight:550; text-decoration:none; cursor:pointer; }
.crm-tab:is(.active,[aria-selected="true"],[aria-current="page"]) { font-weight:700; border-bottom-color:var(--crm-blue); }

/* Popovers are the one place for real glass. */
.crm-pop { background:var(--pop,rgba(255,255,255,.72)); -webkit-backdrop-filter:blur(24px) saturate(170%); backdrop-filter:blur(24px) saturate(170%); border:1px solid var(--crm-edge); border-radius:var(--crm-radius-md); box-shadow:var(--pop-shadow,var(--crm-shadow)); padding:6px; }

/* Empty and loading states */
.crm-empty { margin:0; padding:calc(var(--crm-pad) * .75) 0; font-size:var(--crm-fs-note); color:var(--crm-ink-2); text-align:center; }

@media (max-width:768px) {
  .crm-stat { padding:10px 12px; }
  .crm-stat:first-child { padding-left:12px; }
  .crm-sheet { border-radius:var(--crm-radius-md); }
}
@media (prefers-reduced-motion:reduce) { .crm-page :is(*,*::before,*::after) { transition:none!important; animation:none!important; } }