/* =====================================================================
   ShiftWise — Daylight Ops theme (LOCKED design system)
   Source of truth: themes/04-daylight-ops/index.html (Theme 4).
   Companion contract: technical_modules/17_UI_STYLE_GUIDE.md.
   Load order: bootstrap.min.css -> bootstrap-icons -> THIS FILE.
   Do NOT hand-edit component values here to style one screen; extend
   via new token-based classes and document them in Module 17.
   ===================================================================== */

  :root {
    /* Core surfaces — warm, light, flat */
    --bg-root: #FBF7F1;
    --bg-panel: #FFFFFF;
    --bg-card: #FFFFFF;
    --bg-card-2: #FBF5EC;
    --bg-elev: #FFFFFF;
    --border: #ECE2D4;
    --border-soft: #F3ECE0;
    /* Text — warm ink */
    --text: #2A211B;
    --text-muted: #6B6055;
    --text-dim: #9A8E7E;
    /* Accent + semantic (Fresh Service palette) */
    --accent: #F97316;
    --accent-2: #FB923C;
    --accent-deep: #C2410C;
    --accent-press: #EA6A0E;
    --accent-soft: #FFF1E6;
    --sage: #5B8C7E;
    --sage-soft: #ECF3F0;
    --gold: #E0900C;
    --pos: #2E9E6B;
    --warn: #E0900C;
    --crit: #D6492F;
    --info: #3B82C4;
    /* Misc */
    --radius: 16px;
    --radius-sm: 11px;
    --glow: none;
    --shadow: none;                 /* cards are flat */
    --pop: 0 14px 34px -16px rgba(75,49,20,.28), 0 2px 6px -3px rgba(75,49,20,.14);
    --mono: "Inter", system-ui, -apple-system, sans-serif;
    --sans: "Inter", system-ui, -apple-system, sans-serif;
    --display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
    --sidebar-w: 248px;
    --topbar-h: 64px;
  }

  * { scrollbar-color: #E0D4C2 transparent; }
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-thumb { background: #E4D9C8; border-radius: 20px; border: 2px solid var(--bg-root); }
  *::-webkit-scrollbar-track { background: transparent; }

  body {
    font-family: var(--sans);
    background:
      radial-gradient(1100px 560px at 82% -12%, rgba(249,115,22,.06), transparent 60%),
      radial-gradient(820px 480px at -6% 6%, rgba(91,140,126,.06), transparent 55%),
      var(--bg-root);
    color: var(--text);
    margin: 0;
    letter-spacing: .1px;
    -webkit-font-smoothing: antialiased;
  }

  .num, .mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: 0; }

  /* ============ APP SHELL ============ */
  .app { display: flex; min-height: 100vh; }

  .sidebar {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    position: fixed;
    inset: 0 auto 0 0;
    background: var(--bg-panel);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    z-index: 40;
  }
  .brand {
    height: var(--topbar-h);
    display: flex; align-items: center; gap: 11px;
    padding: 0 20px;
    border-bottom: 1px solid var(--border-soft);
  }
  .brand-mark {
    width: 34px; height: 34px; border-radius: 10px;
    background: var(--accent);
    display: grid; place-items: center; color: #fff; font-size: 18px;
    flex: 0 0 auto;
  }
  .brand-name { font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: -.2px; color: var(--text); }
  .brand-name .dot { color: var(--accent); }
  .brand-tag { font-size: 10.5px; color: var(--text-dim); letter-spacing: 1.2px; text-transform: uppercase; margin-top: -1px; }

  .nav-scroll { flex: 1; overflow-y: auto; padding: 14px 12px; }
  .nav-section-label { font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-dim); padding: 12px 12px 6px; font-weight: 600; }
  .nav-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; margin: 2px 0;
    border-radius: var(--radius-sm);
    color: var(--text-muted); text-decoration: none;
    cursor: pointer; font-size: 14px; font-weight: 500;
    position: relative; border: 1px solid transparent;
    transition: background .14s, color .14s, border-color .14s;
    user-select: none;
  }
  .nav-item i { font-size: 17px; width: 20px; text-align: center; }
  .nav-item:hover { background: var(--accent-soft); color: var(--accent-deep); }
  .nav-item.active {
    background: var(--accent-soft);
    color: var(--accent-deep); border-color: #FBD7BC; font-weight: 600;
  }
  .nav-item.active::before {
    content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--accent);
  }
  .nav-item.active i { color: var(--accent); }
  .nav-foot { padding: 14px 18px; border-top: 1px solid var(--border-soft); font-size: 11px; color: var(--text-dim); }
  .nav-foot .badge-theme { color: var(--accent); font-weight: 700; }

  .main { margin-left: var(--sidebar-w); flex: 1; min-width: 0; display: flex; flex-direction: column; }

  /* Topbar */
  .topbar {
    height: var(--topbar-h);
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 16px;
    padding: 0 28px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
  }
  .branch-select {
    display: flex; align-items: center; gap: 9px;
    background: var(--bg-card); border: 1px solid var(--border);
    padding: 7px 12px; border-radius: 10px; cursor: pointer; font-size: 13px;
    color: var(--text); font-weight: 500;
  }
  .branch-select:hover { border-color: var(--accent); }
  .branch-select .bdot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
  .branch-select .sub { color: var(--text-dim); font-size: 11px; }
  .topbar .dropdown-menu { background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--pop); border-radius: 12px; padding: 6px; }
  .topbar .dropdown-item { color: var(--text-muted); font-size: 13px; border-radius: 8px; }
  .topbar .dropdown-item:hover { background: var(--accent-soft); color: var(--accent-deep); }
  .topbar .dropdown-item.active { background: var(--accent-soft); color: var(--accent-deep); }
  .dropdown-divider { border-color: var(--border); }

  .global-search { flex: 1; max-width: 440px; position: relative; }
  .global-search i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-dim); font-size: 15px; }
  .global-search input {
    width: 100%; background: var(--bg-card-2); border: 1px solid var(--border);
    border-radius: 10px; padding: 9px 12px 9px 38px; color: var(--text); font-size: 13px;
  }
  .global-search input::placeholder { color: var(--text-dim); }
  .global-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(249,115,22,.15); background: #fff; }

  .topbar-spacer { flex: 1; }
  .icon-btn {
    position: relative; width: 40px; height: 40px; border-radius: 10px;
    display: grid; place-items: center; background: var(--bg-card);
    border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; font-size: 17px;
  }
  .icon-btn:hover { color: var(--accent-deep); border-color: var(--accent); }
  .bell-badge {
    position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: var(--crit); color: #fff; font-size: 11px; font-weight: 700;
    display: grid; place-items: center; border: 2px solid var(--bg-panel);
  }
  .user-chip {
    display: flex; align-items: center; gap: 10px; padding: 5px 10px 5px 6px;
    border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); cursor: pointer;
  }
  .user-chip:hover { border-color: var(--accent); }
  .avatar {
    width: 32px; height: 32px; border-radius: 9px; flex: 0 0 auto;
    background: var(--sage);
    display: grid; place-items: center; font-weight: 700; font-size: 12px; color: #fff;
  }
  .user-chip .uname { font-size: 13px; font-weight: 600; line-height: 1.1; }
  .user-chip .urole { font-size: 11px; color: var(--text-dim); }

  /* Content */
  .content { padding: 28px; max-width: 1480px; width: 100%; margin: 0 auto; }
  .screen { display: none; animation: fade .25s ease; }
  .screen.active { display: block; }
  @keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

  .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
  .page-title { font-family: var(--display); font-size: 24px; font-weight: 800; margin: 0; letter-spacing: -.4px; color: var(--text); }
  .page-sub { color: var(--text-muted); font-size: 13.5px; margin-top: 4px; }

  /* Cards — flat */
  .card-x {
    background: var(--bg-card);
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 18px;
  }
  .card-x.tight { padding: 0; }
  .card-title { font-family: var(--display); font-size: 14.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; color: var(--text); }
  .card-title .ti { color: var(--accent); }
  .card-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
  .muted { color: var(--text-muted); }
  .dim { color: var(--text-dim); }

  /* KPI cards — flat */
  .kpi-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
  .kpi {
    background: var(--bg-card);
    border: 1px solid var(--border); border-radius: var(--radius); padding: 16px;
    position: relative; overflow: hidden; transition: border-color .14s;
  }
  .kpi:hover { border-color: #F3C7A6; }
  .kpi .klabel { font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; display: flex; align-items: center; gap: 6px; font-weight: 600; }
  .kpi .klabel i { color: var(--accent); font-size: 13px; }
  .kpi .kval { font-family: var(--display); font-size: 25px; font-weight: 800; margin-top: 9px; font-variant-numeric: tabular-nums; letter-spacing: -.6px; color: var(--text); }
  .kpi .kval .cur { font-size: 13px; color: var(--text-dim); font-weight: 700; }
  .kpi .ksub { font-size: 11.5px; margin-top: 6px; display: flex; align-items: center; gap: 5px; }
  .kpi .ksub.up { color: var(--pos); }
  .kpi .ksub.down { color: var(--crit); }
  .spark { position: absolute; right: 10px; bottom: 8px; opacity: .95; }

  /* Status pills — soft tint + flat */
  .pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
    border: 1px solid transparent; white-space: nowrap; line-height: 1.4;
  }
  .pill .pdot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .pill-draft     { color: #6B6055; background: #F2ECE2; border-color: #E3D9CA; }
  .pill-generated { color: var(--accent-deep); background: var(--accent-soft); border-color: #FBD7BC; }
  .pill-attention { color: #B5710A; background: #FCF3E1; border-color: #F4E1BC; }
  .pill-pending   { color: var(--info); background: #EAF2FA; border-color: #CFE1F2; }
  .pill-approved  { color: #1F7A50; background: #E8F5EE; border-color: #C9E8D7; }
  .pill-published { color: #11705A; background: #E2F3EC; border-color: #BEE6D7; }
  .pill-rejected  { color: var(--crit); background: #FCEBE6; border-color: #F4CFC4; }
  .pill-crit { color: var(--crit); background: #FCEBE6; border-color: #F4CFC4; }
  .pill-warn { color: #B5710A; background: #FCF3E1; border-color: #F4E1BC; }
  .pill-train { color: var(--info); background: #EAF2FA; border-color: #CFE1F2; }
  .pill-ft { color: var(--accent-deep); background: var(--accent-soft); border-color: #FBD7BC; }
  .pill-pt { color: #3F6D60; background: var(--sage-soft); border-color: #D2E4DD; }

  /* Buttons — flat */
  .btn-mo {
    background: var(--accent);
    color: #fff; font-weight: 700; border: none; border-radius: 10px;
    padding: 9px 16px; font-size: 13.5px;
  }
  .btn-mo:hover { background: var(--accent-press); color: #fff; }
  .btn-ghost {
    background: var(--bg-card); color: var(--text-muted); border: 1px solid var(--border);
    border-radius: 10px; padding: 9px 15px; font-size: 13.5px; font-weight: 500;
  }
  .btn-ghost:hover { color: var(--accent-deep); border-color: var(--accent); background: var(--accent-soft); }
  .btn-ghost.active { color: var(--accent-deep); border-color: var(--accent); background: var(--accent-soft); }
  .btn-sm-x { padding: 6px 12px; font-size: 12.5px; }
  .btn-warn { background: #FCF3E1; color: #B5710A; border: 1px solid #F0D9AC; border-radius: 10px; padding: 8px 14px; font-size: 13px; font-weight: 600; }
  .btn-warn:hover { background: #F8E9C9; color: #9A5F08; }

  /* Generic form controls */
  .lbl { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; display: block; font-weight: 600; }
  .ctrl {
    background: #fff; border: 1px solid var(--border); color: var(--text);
    border-radius: 10px; padding: 9px 12px; font-size: 13.5px; width: 100%;
  }
  .ctrl::placeholder { color: var(--text-dim); }
  .ctrl:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(249,115,22,.15); background: #fff; }
  select.ctrl { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239A8E7E' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }

  /* Tables */
  .tbl-wrap { overflow-x: auto; border-radius: var(--radius); }
  table.mo { width: 100%; border-collapse: collapse; font-size: 13px; }
  table.mo thead th {
    text-align: left; padding: 12px 16px; font-size: 11px; letter-spacing: .5px; text-transform: uppercase;
    color: var(--text-dim); background: var(--bg-card-2); border-bottom: 1px solid var(--border); font-weight: 700; white-space: nowrap;
  }
  table.mo tbody td { padding: 13px 16px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
  table.mo tbody tr { transition: background .12s; }
  table.mo tbody tr:hover { background: #FCF6EE; }
  table.mo tbody tr:last-child td { border-bottom: none; }
  .gated {
    display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 8px;
    background: #F2ECE2; border: 1px dashed #D9CDBB; color: var(--text-dim);
    font-size: 12px; letter-spacing: 2px; font-weight: 700;
  }
  .gated i { font-size: 11px; letter-spacing: 0; }

  /* Skill badges */
  .skill {
    display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 7px; font-size: 11px; font-weight: 600;
    background: var(--sage-soft); border: 1px solid #D2E4DD; color: #3F6D60; margin: 1px;
  }
  .skill.trainee { background: #FCF3E1; border-color: #F0D9AC; color: #B5710A; }
  .skill.trainer { background: #EAF2FA; border-color: #CFE1F2; color: var(--info); }
  .avail { display: inline-flex; gap: 3px; }
  .avail span { width: 6px; height: 16px; border-radius: 3px; background: #E7DDCD; }
  .avail span.on { background: var(--pos); }
  .avail span.warn { background: var(--warn); }

  /* Emp name cell */
  .emp { display: flex; align-items: center; gap: 11px; }
  .emp .ea { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-weight: 700; font-size: 12px; color: #fff; background: var(--accent); }
  .emp .en { font-weight: 600; font-size: 13.5px; }
  .emp .ec { font-size: 11.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

  /* ============ DASHBOARD chart — flat ============ */
  .bar-chart { display: flex; align-items: flex-end; gap: 12px; height: 180px; padding: 6px 4px 0; }
  .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
  .bar {
    width: 100%; max-width: 42px; border-radius: 8px 8px 4px 4px;
    background: var(--accent); position: relative; transition: background .15s;
  }
  .bar:hover { background: var(--accent-press); }
  .bar .bv { position: absolute; top: -19px; left: 50%; transform: translateX(-50%); font-size: 10.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .bar-x { font-size: 11.5px; color: var(--text-dim); font-weight: 600; }

  .exc-row { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--border-soft); }
  .exc-row:last-child { border-bottom: none; }
  .exc-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 auto; font-size: 15px; }
  .exc-ic.crit { background: #FCEBE6; color: var(--crit); }
  .exc-ic.warn { background: #FCF3E1; color: #B5710A; }
  .exc-ic.train { background: #EAF2FA; color: var(--info); }
  .exc-t { font-size: 13px; font-weight: 600; }
  .exc-s { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }

  .mini-stat { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-radius: var(--radius); background: var(--bg-card); border: 1px solid var(--border); }
  .mini-stat .ms-v { font-size: 22px; font-weight: 800; font-family: var(--display); font-variant-numeric: tabular-nums; }

  .split-bar { height: 12px; border-radius: 8px; overflow: hidden; display: flex; background: var(--bg-card-2); border: 1px solid var(--border); }
  .split-bar .seg-op { background: var(--accent); }
  .split-bar .seg-sa { background: var(--sage); }

  /* ============ WIZARD stepper ============ */
  .stepper { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
  .step {
    flex: 1; min-width: 120px; display: flex; align-items: center; gap: 10px;
    padding: 11px 13px; border-radius: 11px; background: var(--bg-card); border: 1px solid var(--border);
    font-size: 12.5px; color: var(--text-dim); position: relative;
  }
  .step .sn { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-weight: 700; font-size: 12px; background: #F2ECE2; color: var(--text-muted); flex: 0 0 auto; }
  .step.done { color: var(--text-muted); border-color: #C9E8D7; background: #F4FBF7; }
  .step.done .sn { background: #DCF0E5; color: var(--pos); }
  .step.active { color: var(--accent-deep); border-color: var(--accent); background: var(--accent-soft); }
  .step.active .sn { background: var(--accent); color: #fff; }
  .step .st { font-weight: 600; line-height: 1.15; }

  .chip-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .ctx-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 10px; background: var(--bg-card); border: 1px solid var(--border); font-size: 13px; font-weight: 500; }
  .ctx-chip i { color: var(--accent); }

  .summary-item { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--border-soft); }
  .summary-item:last-child { border-bottom: none; }
  .summary-item .si-l { font-size: 12.5px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; }
  .summary-item .si-l i { color: var(--accent); }
  .summary-item .si-v { font-size: 16px; font-weight: 800; font-family: var(--display); font-variant-numeric: tabular-nums; }

  /* Heatmap grid */
  .heat-grid { display: grid; grid-template-columns: 64px repeat(7, 1fr); gap: 6px; }
  .heat-hd { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); text-align: center; padding: 6px 0; font-weight: 700; }
  .heat-time { display: grid; place-items: center; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; font-weight: 700; }
  .heat-cell { position: relative; border-radius: 9px; border: 1px solid var(--border); overflow: hidden; background: #fff; }
  .heat-cell input {
    width: 100%; height: 46px; background: transparent; border: none; text-align: center;
    color: var(--text); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; padding: 0;
  }
  .heat-cell input:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
  .legend { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-dim); }
  .legend .grad { width: 120px; height: 10px; border-radius: 6px; background: linear-gradient(90deg, #FFE7D3, var(--accent)); border: 1px solid var(--border); }

  /* Calendar review */
  .cal-grid { display: grid; grid-template-columns: 56px repeat(5, 1fr); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
  .cal-grid > div { border-right: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
  .cal-grid > div:nth-child(6n) { border-right: none; }
  .cal-hd { background: var(--bg-card-2); padding: 11px; text-align: center; font-size: 12px; font-weight: 700; color: var(--text-muted); }
  .cal-time { background: var(--bg-card-2); display: grid; place-items: center; font-size: 11.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
  .cal-cell { min-height: 62px; padding: 6px; background: #fff; }
  .assign {
    border-radius: 8px; padding: 6px 8px; font-size: 11.5px; font-weight: 600; margin-bottom: 4px;
    background: var(--accent-soft); border: 1px solid #FBD7BC; color: var(--accent-deep);
    display: flex; align-items: center; gap: 6px;
  }
  .assign.alt { background: var(--sage-soft); border-color: #D2E4DD; color: #3F6D60; }
  .assign .ad { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
  .assign.alt .ad { background: var(--sage); }
  .miss {
    border-radius: 8px; padding: 6px 8px; font-size: 11.5px; font-weight: 600;
    background: #FCEBE6; border: 1px dashed #E9A593; color: var(--crit);
    display: flex; align-items: center; gap: 6px;
  }

  .exc-card { border-radius: 12px; padding: 13px; margin-bottom: 10px; border: 1px solid var(--border); background: var(--bg-card); }
  .exc-card.crit { border-left: 3px solid var(--crit); }
  .exc-card.warn { border-left: 3px solid var(--warn); }
  .exc-card.train { border-left: 3px solid var(--info); }
  .exc-card .ech { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; gap: 8px; }
  .exc-card .ett { font-size: 13px; font-weight: 700; }
  .exc-card .ess { font-size: 11.5px; color: var(--text-dim); }

  .cost-strip { display: flex; align-items: center; gap: 26px; padding: 16px 18px; border-radius: var(--radius); background: var(--bg-card); border: 1px solid var(--border); flex-wrap: wrap; }
  .cost-strip .cs-i .l { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); font-weight: 600; }
  .cost-strip .cs-i .v { font-size: 18px; font-weight: 800; font-family: var(--display); font-variant-numeric: tabular-nums; margin-top: 2px; }

  /* Reports catalog */
  .cat-item { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 10px; cursor: pointer; color: var(--text-muted); font-size: 13px; border: 1px solid transparent; font-weight: 500; }
  .cat-item i { color: var(--text-dim); font-size: 15px; width: 18px; text-align: center; }
  .cat-item:hover { background: var(--accent-soft); color: var(--accent-deep); }
  .cat-item.active { background: var(--accent-soft); color: var(--accent-deep); border-color: #FBD7BC; font-weight: 600; }
  .cat-item.active i { color: var(--accent); }

  .highlight-stat { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 16px; border-radius: 10px; background: var(--accent-soft); border: 1px solid #FBD7BC; }
  .highlight-stat .hv { font-size: 22px; font-weight: 800; font-family: var(--display); font-variant-numeric: tabular-nums; color: var(--accent-deep); }
  .highlight-stat .hl { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }

  /* Settings */
  .tabs-mo { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 22px; }
  .tab-mo { padding: 11px 16px; font-size: 13.5px; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; font-weight: 600; }
  .tab-mo:hover { color: var(--accent-deep); }
  .tab-mo.active { color: var(--accent-deep); border-bottom-color: var(--accent); }
  .tab-pane-mo { display: none; }
  .tab-pane-mo.active { display: block; }
  .toggle-pill { display: inline-flex; background: var(--bg-card-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; }
  .toggle-pill button { border: none; background: transparent; color: var(--text-muted); font-size: 12.5px; padding: 6px 14px; border-radius: 8px; cursor: pointer; font-weight: 600; }
  .toggle-pill button.on { background: var(--accent); color: #fff; }
  .holiday-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-radius: 10px; background: var(--bg-card-2); border: 1px solid var(--border); margin-bottom: 8px; }
  .holiday-row .hd-date { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--accent-deep); font-weight: 700; }
  .holiday-row .hd-name { font-size: 13px; }
  .rm-btn { background: #FCEBE6; border: 1px solid #F4CFC4; color: var(--crit); width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; }
  .rm-btn:hover { background: #F8DDD4; }

  /* ============ LOGIN ============ */
  #screen-login.active { display: flex; }
  #screen-login { position: fixed; inset: 0; z-index: 100; background: var(--bg-root); align-items: stretch; }
  .login-visual {
    flex: 1.1; position: relative; overflow: hidden;
    background:
      radial-gradient(820px 560px at 28% 22%, rgba(249,115,22,.16), transparent 55%),
      radial-gradient(680px 480px at 82% 82%, rgba(91,140,126,.16), transparent 55%),
      linear-gradient(150deg, #FFF6EE, #FDEFE3);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column; justify-content: space-between; padding: 48px;
  }
  .login-visual .grid-bg {
    position: absolute; inset: 0; opacity: .5;
    background-image: linear-gradient(rgba(249,115,22,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(249,115,22,.08) 1px, transparent 1px);
    background-size: 44px 44px; mask-image: radial-gradient(circle at 40% 40%, black, transparent 75%);
  }
  .lv-top { position: relative; display: flex; align-items: center; gap: 12px; }
  .lv-mid { position: relative; max-width: 460px; }
  .lv-mid h1 { font-family: var(--display); font-size: 40px; font-weight: 800; line-height: 1.1; letter-spacing: -.6px; color: var(--text); }
  .lv-mid h1 .g { color: var(--accent); }
  .lv-mid p { color: var(--text-muted); font-size: 15px; margin-top: 14px; line-height: 1.6; }
  .lv-stats { position: relative; display: flex; gap: 28px; }
  .lv-stats .s .v { font-family: var(--display); font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent-deep); }
  .lv-stats .s .l { font-size: 12px; color: var(--text-muted); }
  .login-form-wrap { flex: .9; display: grid; place-items: center; padding: 40px; background: var(--bg-panel); }
  .login-card { width: 100%; max-width: 392px; }
  .login-card h2 { font-family: var(--display); font-size: 25px; font-weight: 800; letter-spacing: -.4px; }
  .login-card .lsub { color: var(--text-muted); font-size: 13.5px; margin-bottom: 26px; }
  .form-check-input { background-color: #fff; border-color: var(--border); }
  .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
  .form-check-label { font-size: 13px; color: var(--text-muted); }
  .link-x { color: var(--accent-deep); font-size: 13px; text-decoration: none; font-weight: 600; }
  .link-x:hover { text-decoration: underline; color: var(--accent-deep); }

  .footer-label { text-align: center; padding: 20px; color: var(--text-dim); font-size: 12px; letter-spacing: .3px; }
  .footer-label b { color: var(--accent-deep); font-weight: 700; }

  .grid-2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
  .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
  .content [style*="grid-template-columns"] > * { min-width: 0; }

  @media (max-width: 1200px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 992px) {
    .sidebar { transform: translateX(-100%); }
    .main { margin-left: 0; }
    .login-visual { display: none; }
  }
  @media (max-width: 760px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
  }

  /* ============ Allocation-rule builder (Module 07 screen) ============
     Token-based extension (per this file's header). Reusable two-pane builder
     primitives: scope choice-cards, requirement rows, sales-band blocks, and a
     live preview panel. No hardcoded palette beyond the soft tints already used
     by the pills/skills above. */
  .builder-grid { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 18px; align-items: start; }
  .builder-side { position: sticky; top: 4px; }

  .choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .choice-card { border: 1.5px solid var(--border); border-radius: 12px; padding: 12px; cursor: pointer; background: #fff; display: flex; gap: 11px; align-items: flex-start; transition: border-color .12s, background .12s; }
  .choice-card:hover { border-color: var(--accent-2); }
  .choice-card.sel { border-color: var(--accent); background: var(--accent-soft); }
  .choice-card .ci { width: 32px; height: 32px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center; font-size: 16px; flex: 0 0 auto; }
  .choice-card.sel .ci { background: var(--accent); color: #fff; }
  .choice-card .ct { font-weight: 700; font-size: 13px; }
  .choice-card .cs { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }

  .ro-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 10px; background: var(--bg-card-2); border: 1px solid var(--border); font-size: 13px; font-weight: 600; }
  .ro-chip i { color: var(--accent); }

  .req-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 10px 11px; border: 1px solid var(--border); border-radius: 11px; background: #fff; margin-bottom: 9px; }
  .countbox { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
  .countbox button { border: none; background: var(--bg-card-2); width: 28px; height: 32px; font-size: 15px; font-weight: 700; color: var(--text-muted); cursor: pointer; }
  .countbox button:hover { background: var(--accent-soft); color: var(--accent-deep); }
  .countbox .cn { width: 42px; height: 32px; text-align: center; border: none; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); -moz-appearance: textfield; }
  .countbox .cn:focus { outline: none; }
  .countbox .cn::-webkit-outer-spin-button, .countbox .cn::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .req-row .times { color: var(--text-dim); font-weight: 700; }
  .role-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 8px; background: var(--sage-soft); border: 1px solid #D2E4DD; color: #3F6D60; font-size: 12px; font-weight: 600; }
  .role-chip .x { cursor: pointer; opacity: .6; font-style: normal; }
  .role-chip .x:hover { opacity: 1; }
  .ctrl-mini { background: #fff; border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 5px 9px; font-size: 12.5px; }
  .ctrl-mini:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(249,115,22,.15); }
  select.ctrl-mini { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239A8E7E' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; padding-right: 26px; }
  .matchtoggle { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
  .matchtoggle button { border: none; background: #fff; padding: 5px 10px; color: var(--text-muted); cursor: pointer; font-weight: 600; font-size: 11.5px; }
  .matchtoggle button.on { background: var(--accent); color: #fff; }
  .req-rm { margin-left: auto; color: var(--crit); background: #FCEBE6; border: 1px solid #F4CFC4; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; }
  .req-rm:hover { background: #F8DDD4; }
  .req-limits { flex-basis: 100%; display: flex; align-items: center; gap: 8px; padding-top: 2px; }
  .req-limits .ql { font-size: 11px; color: var(--text-dim); font-weight: 600; }

  .band-block { border: 1px solid var(--border); border-radius: 13px; overflow: hidden; margin-bottom: 12px; background: #fff; }
  .band-hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; background: var(--bg-card-2); border-bottom: 1px solid var(--border-soft); }
  .band-hd .band-total { font-size: 12px; color: var(--text-dim); font-weight: 700; }
  .band-bd { padding: 12px; }

  .preview-panel { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card-2); padding: 14px; }
  .preview-panel .pp-t { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); font-weight: 700; margin-bottom: 10px; }
  .pe-box { background: #fff; border: 1px solid var(--border); border-radius: 11px; padding: 12px; font-size: 12.5px; line-height: 1.55; color: var(--text); margin-bottom: 11px; }
  .pe-box .pe-t { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); font-weight: 700; margin-bottom: 6px; }
  .cov-table { width: 100%; border-collapse: collapse; font-size: 12px; }
  .cov-table td { padding: 4px 5px; border-bottom: 1px solid var(--border-soft); }
  .cov-table tr:last-child td { border-bottom: none; }
  .cov-table td:last-child { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
  .chk { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; padding: 4px 0; color: var(--text-muted); }
  .chk i { margin-top: 1px; }
  .chk.ok i { color: var(--pos); }
  .chk.warn i { color: var(--warn); }
  .chk.crit i { color: var(--crit); }
  .preview-panel .pe-box:last-child { margin-bottom: 0; }

  /* builder layout helpers (replace ad-hoc inline px per Module 17 §1) */
  .builder-main .pick-narrow { max-width: 560px; }
  .builder-main .field-narrow { max-width: 320px; }
  .band-hint { font-size: 11.5px; color: var(--text-dim); margin: 3px 0 2px; }
  .band-hd .b-money { width: 96px; }
  .band-hd .b-label { width: 140px; }

  @media (max-width: 992px) { .builder-grid { grid-template-columns: 1fr; } .builder-side { position: static; } }
  @media (max-width: 760px) { .choice-grid { grid-template-columns: 1fr; } }