/* FranVision OS -- stylesheet. Tokens + components carried over from
   franvision-admin-os-prototype.html (2026-10-05) so the real app looks like the
   prototype; OS-only additions at the bottom. */
  :root{
    color-scheme: light;
    --page:#f6f4ee;
    --surface:#fcfcfb;
    --surface-2:#ffffff;
    --border:#e1e0d9;
    --ink:#0b0b0b;
    --ink-2:#52514e;
    --muted:#898781;
    --brand:#4a3aa7;
    --brand-soft:#efebfa;
    --brand-ink:#ffffff;
    --pending:#c3c2b7;
    --active:#2a78d6;
    --active-soft:#e4eefb;
    --good:#0ca30c;
    --good-soft:#e3f6e3;
    --warning:#fab219;
    --warning-soft:#fef2dc;
    --critical:#d03b3b;
    --critical-soft:#fbe7e7;
    --shadow: 0 1px 2px rgba(11,11,11,0.06), 0 8px 24px rgba(11,11,11,0.08);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      color-scheme: dark;
      --page:#0d0c0a; --surface:#1a1a19; --surface-2:#201f1c; --border:#2c2c2a;
      --ink:#ffffff; --ink-2:#c3c2b7; --muted:#8f8d86;
      --brand:#9085e9; --brand-soft:#2a2550; --brand-ink:#0d0c0a;
      --pending:#3a3a37; --active:#3987e5; --active-soft:#132a44;
      --good:#0ca30c; --good-soft:#0f2b12;
      --warning:#fab219; --warning-soft:#3a2c0c;
      --critical:#e66767; --critical-soft:#3a1414;
      --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.4);
    }
  }
  :root[data-theme="dark"]{
    color-scheme: dark;
    --page:#0d0c0a; --surface:#1a1a19; --surface-2:#201f1c; --border:#2c2c2a;
    --ink:#ffffff; --ink-2:#c3c2b7; --muted:#8f8d86;
    --brand:#9085e9; --brand-soft:#2a2550; --brand-ink:#0d0c0a;
    --pending:#3a3a37; --active:#3987e5; --active-soft:#132a44;
    --good:#0ca30c; --good-soft:#0f2b12;
    --warning:#fab219; --warning-soft:#3a2c0c;
    --critical:#e66767; --critical-soft:#3a1414;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.4);
  }

  *{box-sizing:border-box;}
  html,body{ height:100%; }
  body{
    background:var(--page); color:var(--ink);
    font-family:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    margin:0; font-size:14px;
  }
  .mono{ font-family:"IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
  button{ font-family:inherit; }

  /* ---- app shell ---- */
  .shell{ display:flex; min-height:100%; }
  .sidebar{
    width:222px; flex:none; background:var(--surface-2); border-right:1px solid var(--border);
    display:flex; flex-direction:column; padding:14px 10px; gap:14px;
    position:sticky; top:0; align-self:flex-start; height:100vh; overflow-y:auto;
  }
  .brand{ display:flex; align-items:center; gap:9px; padding:4px 6px 8px; }
  .brandmark{ width:30px; height:30px; border-radius:8px; background:var(--brand); color:var(--brand-ink); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex:none; }
  .brand b{ font-size:13.5px; }
  .navgroup{ display:flex; flex-direction:column; gap:2px; }
  .navgroup .gtitle{ font-size:10.5px; font-weight:700; letter-spacing:.04em; color:var(--muted); text-transform:uppercase; padding:8px 10px 3px; }
  .navitem{
    display:flex; align-items:center; gap:8px; text-align:left; background:none; border:none; cursor:pointer;
    padding:8px 10px; border-radius:8px; font-size:13px; color:var(--ink-2); font-weight:500;
  }
  .navitem:hover{ background:var(--brand-soft); color:var(--ink); }
  .navitem.active{ background:var(--brand); color:var(--brand-ink); font-weight:600; }
  .navitem .ico{ width:15px; height:15px; flex:none; }
  .navsub{ display:flex; flex-direction:column; gap:1px; margin-top:1px; }
  .navitem.sub{ padding:6px 10px 6px 33px; font-size:12.5px; font-weight:500; }
  .navitem.sub.active{ background:var(--brand-soft); color:var(--brand); }
  .navitem .cnt{ margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:11px; opacity:.7; }
  @media (max-width:780px){ .navsub{ flex-direction:row; } .navitem.sub{ padding:6px 10px; } }
  .role-box{ margin-top:auto; padding:10px; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
  .role-box .rt{ font-size:10.5px; color:var(--muted); margin-bottom:6px; }
  .role-toggle{ display:flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
  .role-toggle button{ flex:1; border:none; background:var(--surface); color:var(--ink-2); font-size:11.5px; font-weight:600; padding:6px 2px; cursor:pointer; white-space:nowrap; }
  .checkin-btn{ font-size:13px; padding:9px 16px; }
  .role-toggle button.active{ background:var(--brand); color:var(--brand-ink); }
  .role-note{ font-size:10.5px; color:var(--muted); margin-top:6px; line-height:1.4; }

  .main{ flex:1; min-width:0; padding:18px 22px 48px; max-width:1180px; }
  .topline{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
  .topline h1{ font-size:16.5px; margin:0; }
  .topline .spacer{ flex:1; }
  .badge-demo{ font-size:11.5px; font-weight:600; color:var(--warning); background:var(--warning-soft); border:1px solid color-mix(in srgb, var(--warning) 40%, transparent); padding:5px 10px; border-radius:999px; white-space:nowrap; }
  .today{ font-size:12px; color:var(--muted); }

  /* ---- shared bits ---- */
  .kpis{ display:grid; grid-template-columns:repeat(4, minmax(150px,1fr)); gap:12px; margin-bottom:20px; }
  .kpi{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 16px; box-shadow:var(--shadow); }
  .kpi .val{ font-size:24px; font-weight:700; line-height:1.1; }
  .kpi .lbl{ font-size:12px; color:var(--ink-2); margin-top:4px; }
  .kpi .sub{ font-size:11px; color:var(--muted); margin-top:2px; }

  .legend{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; font-size:11.5px; color:var(--ink-2); margin-bottom:16px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:9px 14px; }
  .legend b{ color:var(--ink); font-weight:600; margin-right:2px; }
  .legend .grp{ display:flex; align-items:center; gap:6px; }
  .dot{ width:9px; height:9px; border-radius:3px; display:inline-block; flex:none; }
  .actor-chip{ display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:600; padding:2px 7px 2px 5px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); color:var(--ink-2); }
  .actor-chip svg{ width:11px; height:11px; }

  .filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
  .chip{ font-size:12.5px; font-weight:600; padding:7px 13px; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--ink-2); cursor:pointer; }
  .chip:hover{ border-color: var(--brand); }
  .chip.active{ background:var(--brand); border-color:var(--brand); color:var(--brand-ink); }

  /* ---- dashboard funnel (drill-down summary) ---- */
  .funnel{ display:flex; flex-direction:column; gap:8px; margin-bottom:22px; }
  .funnel-row{ display:flex; align-items:center; gap:12px; width:100%; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:10px 14px; cursor:pointer; font:inherit; color:inherit; text-align:left; }
  .funnel-row:hover{ border-color:var(--brand); }
  .funnel-row:focus-visible{ outline:2px solid var(--brand); outline-offset:1px; }
  .funnel-label{ width:96px; flex:none; font-size:12.5px; font-weight:600; }
  .funnel-bar{ flex:1; height:20px; background:var(--surface-2); border:1px solid var(--border); border-radius:5px; overflow:hidden; display:flex; }
  .funnel-seg{ height:100%; }
  .funnel-seg.done{ background:var(--good); } .funnel-seg.in_progress{ background:var(--active); }
  .funnel-seg.waiting_human{ background:var(--warning); } .funnel-seg.blocked{ background:var(--critical); }
  .funnel-count{ width:28px; flex:none; text-align:right; font-size:13.5px; font-weight:700; }
  .funnel-chevron{ flex:none; color:var(--muted); font-size:14px; }

  .section-title{ font-size:13.5px; font-weight:700; margin:22px 0 10px; display:flex; align-items:center; gap:8px; }
  .section-title:first-of-type{ margin-top:0; }
  .section-title .count{ font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:600; color:var(--critical); background:var(--critical-soft); border-radius:999px; padding:1px 8px; }
  .section-sub{ font-size:11.5px; color:var(--muted); margin:-4px 0 10px; }
  .attn-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:6px; }
  .attn-row{ display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--critical); border-radius:10px; padding:10px 12px; cursor:pointer; text-align:left; width:100%; font:inherit; color:inherit; }
  .attn-row:hover{ border-color: var(--brand); border-left-color: var(--critical); }
  .attn-row .a-main{ flex:1; min-width:0; }
  .attn-row .a-addr{ font-size:12.5px; font-weight:600; }
  .attn-row .a-note{ font-size:11.5px; color:var(--ink-2); margin-top:2px; }
  .attn-row .a-stage{ font-size:11px; font-weight:600; color:var(--critical); background:var(--critical-soft); border-radius:999px; padding:3px 9px; white-space:nowrap; flex:none; }
  .empty-note{ font-size:12.5px; color:var(--muted); padding:14px; text-align:center; border:1px dashed var(--border); border-radius:10px; }

  /* ---- table ---- */
  .tablewrap{ overflow-x:auto; border:1px solid var(--border); border-radius:12px; background:var(--surface); box-shadow:var(--shadow); }
  table{ border-collapse:collapse; width:100%; min-width:560px; }
  th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); font-weight:600; padding:10px 12px; border-bottom:1px solid var(--border); white-space:nowrap; }
  td{ padding:10px 12px; border-bottom:1px solid var(--border); font-size:12.5px; vertical-align:middle; }
  tr:last-child td{ border-bottom:none; }
  tbody tr{ cursor:default; }
  tbody tr.clickable{ cursor:pointer; }
  tbody tr.clickable:hover{ background:var(--brand-soft); }
  .pill{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px; white-space:nowrap; }
  .pill.good{ background:var(--good-soft); color:var(--good); }
  .pill.warning{ background:var(--warning-soft); color:var(--warning); }
  .pill.critical{ background:var(--critical-soft); color:var(--critical); }
  .pill.active{ background:var(--active-soft); color:var(--active); }
  .pill.neutral{ background:var(--surface-2); color:var(--ink-2); border:1px solid var(--border); }
  .smallbtn{ font-size:11.5px; font-weight:600; padding:5px 10px; border-radius:7px; border:1px solid var(--border); background:var(--surface-2); color:var(--ink-2); cursor:pointer; }
  .smallbtn:hover{ border-color:var(--brand); color:var(--brand); }
  .smallbtn.primary{ background:var(--brand); border-color:var(--brand); color:var(--brand-ink); }
  .smallbtn.primary:hover{ opacity:.9; }
  .muted-text{ color:var(--muted); font-size:12px; }
  .note-banner{ font-size:12px; color:var(--ink-2); background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:10px 13px; margin-bottom:16px; }

  /* ---- revenue chart ---- */
  .revwrap{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px 18px 6px; box-shadow:var(--shadow); margin-bottom:20px; }
  .chart{ display:flex; align-items:flex-end; gap:14px; height:170px; position:relative; padding-top:20px; }
  .gridline{ position:absolute; left:0; right:0; border-top:1px dashed var(--border); }
  .bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; position:relative; }
  .bar-val{ font-size:11px; font-weight:600; margin-bottom:5px; }
  .bar{ width:60%; min-width:26px; border-radius:4px 4px 0 0; background:var(--active); }
  .bar-lbl{ font-size:11px; color:var(--ink-2); margin-top:8px; }
  .tooltip{ position:fixed; background:var(--ink); color:var(--page); font-size:11.5px; padding:6px 9px; border-radius:7px; pointer-events:none; z-index:80; white-space:nowrap; }
  .tooltip[hidden]{ display:none; }
  .tooltip{ white-space:normal; line-height:1.5; }
  .gridlbl{ position:absolute; left:0; top:-14px; font-size:10px; color:var(--muted); font-family:"IBM Plex Mono",monospace; }
  .fin-stack{ width:56%; min-width:26px; display:flex; flex-direction:column; gap:2px; }
  .fin-seg{ min-height:0; }
  .fin-seg:first-child{ border-radius:4px 4px 0 0; }
  .s1{ background:#2a78d6; } .s2{ background:#eb6834; } .s3{ background:#1baf7a; }
  :root[data-theme="dark"] .s1{ background:#3987e5; } :root[data-theme="dark"] .s2{ background:#d95926; } :root[data-theme="dark"] .s3{ background:#199e70; }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .s1{ background:#3987e5; } :root:not([data-theme="light"]) .s2{ background:#d95926; } :root:not([data-theme="light"]) .s3{ background:#199e70; } }
  .fin-legend{ display:flex; flex-wrap:wrap; gap:14px; font-size:11.5px; color:var(--ink-2); margin-bottom:14px; align-items:center; }
  .fin-legend span{ display:inline-flex; align-items:center; gap:6px; }
  .fin-sw{ width:10px; height:10px; border-radius:3px; display:inline-block; }
  tr.fin-sel td{ background:var(--brand-soft); }

  /* ---- process rows (materials / production / assembly / delivery / post-delivery) ---- */
  .delivgrid{ display:flex; flex-direction:column; gap:8px; margin-bottom:8px; }
  .delivrow{ display:flex; align-items:center; gap:10px; background:var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:9px 11px; }
  .delivrow .d-ico{ width:16px; height:16px; flex:none; color:var(--ink-2); }
  .delivrow .d-main{ flex:1; min-width:0; }
  .delivrow .d-name{ font-size:12px; font-weight:600; }
  .delivrow .d-hint{ font-size:10.5px; color:var(--muted); margin-top:1px; }
  .delivrow .d-action{ flex:none; display:flex; gap:6px; }
  .permnote{ font-size:11px; color:var(--muted); margin:2px 0 10px; }
  .fs-track{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:8px; }
  .fs-step{ font-size:11px; font-weight:600; padding:4px 10px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); color:var(--muted); }
  .fs-step.past{ background:var(--good-soft); color:var(--good); border-color:transparent; }
  .fs-step.now{ background:var(--active-soft); color:var(--active); border-color:transparent; }
  .fs-arrow{ color:var(--muted); font-size:11px; }

  /* ---- job detail timeline ---- */
  .modal-flag{ font-size:12px; color:var(--critical); background:var(--critical-soft); border-radius:8px; padding:8px 10px; margin-bottom:14px; font-weight:600; }
  .timeline{ display:flex; flex-direction:column; max-width:520px; }
  .trow{ display:flex; gap:10px; }
  .trow .tnode{ display:flex; flex-direction:column; align-items:center; flex:none; }
  .tdot{ width:11px; height:11px; border-radius:50%; background:var(--pending); margin-top:3px; }
  .tdot.done{ background:var(--good); }
  .tdot.in_progress{ background:var(--active); box-shadow:0 0 0 3px var(--active-soft); }
  .tdot.waiting_human{ background:var(--warning); box-shadow:0 0 0 3px var(--warning-soft); }
  .tdot.blocked{ background:var(--critical); box-shadow:0 0 0 3px var(--critical-soft); }
  .tline{ width:2px; flex:1; background:var(--border); margin-top:2px; }
  .trow:last-child .tline{ display:none; }
  .tbody2{ padding-bottom:16px; flex:1; min-width:0; }
  .tname{ font-size:12.5px; font-weight:600; }
  .tstatus{ font-size:11px; margin-top:2px; }
  .tstatus.done{ color:var(--good); } .tstatus.in_progress{ color:var(--active); }
  .tstatus.waiting_human{ color:var(--warning); } .tstatus.blocked{ color:var(--critical); } .tstatus.pending{ color:var(--muted); }
  .tactor{ margin-top:4px; }

  input,select{ accent-color: var(--brand); }
  .crm-av{ border-radius:50%; object-fit:cover; flex:none; display:inline-flex; align-items:center; justify-content:center; }
  .crm-av-empty{ background:var(--brand-soft); color:var(--brand); font-weight:700; }
  .crm-logo{ border-radius:6px; object-fit:contain; flex:none; display:inline-flex; align-items:center; justify-content:center; background:var(--surface-2); }
  .crm-logo-empty{ color:#fff; font-weight:700; }
  .crm-missing{ font-size:11px; color:var(--muted); font-style:italic; }
  .crm-meter{ display:inline-block; width:56px; height:6px; border-radius:3px; background:var(--border); overflow:hidden; vertical-align:middle; margin-right:6px; }
  .crm-meter span{ display:block; height:100%; }
  .crm-input{ width:100%; padding:7px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2); color:var(--ink); font:inherit; font-size:12.5px; }
  .crm-card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px; box-shadow:var(--shadow); }
  .crm-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:12px; }
  .crm-field{ display:flex; flex-direction:column; gap:4px; }
  .crm-field > span{ font-size:11.5px; color:var(--ink-2); font-weight:600; }
  .crm-x{ border:none; background:none; color:var(--muted); cursor:pointer; padding:0 0 0 2px; font-size:13px; line-height:1; }
  .crm-brk-card{ display:flex; align-items:center; gap:12px; width:100%; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px 14px; cursor:pointer; font:inherit; color:inherit; }
  .crm-brk-card:hover{ border-color:var(--brand); }
  .todo-note{ font-size:11px; color:var(--warning); background:var(--warning-soft); border-radius:8px; padding:6px 10px; margin:4px 0 12px; }

  @media (max-width:780px){
    .shell{ flex-direction:column; }
    .sidebar{ width:100%; height:auto; position:sticky; top:0; flex-direction:row; align-items:center; overflow-x:auto; overflow-y:hidden; padding:8px 10px; gap:10px; z-index:40; }
    .brand{ padding:0; flex:none; }
    .navgroup{ flex-direction:row; }
    .navgroup .gtitle{ display:none; }
    .navitem{ white-space:nowrap; }
    .role-box{ margin-top:0; flex:none; display:flex; align-items:center; gap:8px; padding:6px 8px; }
    .role-box .rt{ display:none; }
    .role-note{ display:none; }
    .role-toggle{ width:200px; }
    .main{ padding:16px 14px 40px; }
    .kpis{ grid-template-columns:repeat(2,1fr); }
  }

/* ===== OS-only additions (not in the prototype) ===== */
a.navitem{ text-decoration:none; }
a.chip{ text-decoration:none; display:inline-block; }
a.funnel-row{ text-decoration:none; }
.role-box .who{ display:flex; align-items:center; gap:8px; font-size:12.5px; }
.placeholder{ border:1px dashed var(--border); border-radius:10px; padding:14px 16px; background:var(--surface); }
.placeholder .ph-title{ font-size:12.5px; font-weight:600; color:var(--ink-2); }
.placeholder .ph-sub{ font-size:11.5px; color:var(--muted); margin-top:3px; }
.errorbox{ border:1px solid color-mix(in srgb, var(--critical) 40%, transparent); background:var(--critical-soft); border-radius:12px; padding:16px 18px; }
.errorbox .eb-title{ font-weight:700; color:var(--critical); font-size:13.5px; }
.errorbox .eb-detail{ font-size:11.5px; color:var(--ink-2); margin-top:8px; word-break:break-all; }
.errorbox .eb-note{ font-size:11.5px; color:var(--muted); margin-top:8px; }
.loading{ font-size:12.5px; color:var(--muted); padding:28px; text-align:center; }
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px 16px; }
.login-card{ width:100%; max-width:380px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:26px 26px 22px; box-shadow:var(--shadow); }
.login-card h2{ font-size:16px; margin:0 0 4px; }
.login-card p{ margin:0 0 14px; }
.bigbtn{ width:100%; font-size:13.5px; font-weight:600; padding:11px 14px; border-radius:9px; border:1px solid var(--border); background:var(--surface-2); color:var(--ink); cursor:pointer; }
.bigbtn.primary{ background:var(--brand); border-color:var(--brand); color:var(--brand-ink); }
.bigbtn:disabled{ opacity:.6; cursor:default; }
.login-alt{ margin-top:14px; }
.login-alt summary{ font-size:12px; color:var(--muted); cursor:pointer; }
.login-form{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.login-form label{ display:flex; flex-direction:column; gap:4px; font-size:11.5px; color:var(--ink-2); font-weight:600; }
.login-notice{ font-size:12px; color:var(--warning); background:var(--warning-soft); border-radius:8px; padding:8px 10px; margin-bottom:12px; }
.login-error{ font-size:12px; color:var(--critical); background:var(--critical-soft); border-radius:8px; padding:8px 10px; margin-bottom:12px; }
.login-error[hidden]{ display:none; }