/*
 * ═══════════════════════════════════════════════════════════════
 *  STYLES.CSS — Complete stylesheet for Linear Flow
 * ═══════════════════════════════════════════════════════════════
 *
 *  SECTIONS (in order):
 *    1. Fonts & Reset
 *    2. Icon System (.icon-btn, .ltb button svg, .rm-item svg)
 *    3. CSS Variables (:root) — colors, shadows
 *    4. Layout (header, body, sidebar, chart-area)
 *    5. Popovers & Modals (.pop, .mo)
 *    6. Detail Overlay (.dov)
 *    7. Right Column Panels (.rcol, .rp)
 *    8. Status Bar (.sbar)
 *    9. AI Chat Panel (.chat-panel)
 *   10. Dark Theme overrides ([data-theme="dark"])
 *   11. View Mode Toggle (.vm-toggle)
 *   12. Whiteboard (.wb-view)
 *   13. Print styles (@media print)
 *   14. Gantt View (.gantt-view)
 *   15. List View (.list-view)
 *   16. Cashflow (.wcf-divider, .gcf-panel)
 *   17. Dependencies (.dep-row)
 *   18. Documents (.doc-browser)
 *   19. Router Pages (.page, #page-app)
 *   20. Login Page (.login-*)
 *   21. Projects Dashboard (.proj-*)
 *   22. Back-to-Projects Button (.back-to-proj)
 *
 *  THEME SYSTEM:
 *    Light mode: default :root variables
 *    Dark mode:  [data-theme="dark"] overrides
 *
 *  REDESIGN TOKENS (Phase 1 — design handoff port):
 *    Imported from ./tokens.css. Scoped to `.csm-root` so the existing
 *    app keeps its current visual appearance. New components/screens
 *    built per docs/design-handoff/ are wrapped in .csm-root
 *    and read those tokens (--bg-page, --bg-surface-*, --text-primary,
 *    etc.). Theme = .csm-dark / .csm-light; density = .csm-density-*.
 *
 *  FONTS (loaded by tokens.css):
 *    Syne (400,500,600,700,800) — UI, headings
 *    DM Mono (400,500) — data, code, numbers
 *
 *  Last updated: 2026-05-26
 * ═══════════════════════════════════════════════════════════════
 */

@import url('./tokens.css');
@import url('./ui/csm-chrome.css');
@import url('./ui/csm-panels.css');
@import url('./ui/csm-wzd-chart.css');
@import url('./ui/csm-dashboard.css');
@import url('./ui/csm-newproject.css');
@import url('./ui/csm-documents.css');
@import url('./ui/csm-drone.css');
@import url('./ui/csm-app.css');
@import url('./ui/csm-account.css');
@import url('./ui/csm-projmenu.css');
@import url('./ui/csm-planung.css');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* ---- Icon System ---- */
.icon-btn svg,
.ltb button svg,
.pop svg.icon {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  stroke: currentColor;
  pointer-events: none;
}
.ltb button {
  font-size: 0; /* hide any remaining text, show only SVG */
}
.ltb button svg {
  width: 20px;
  height: 20px;
}
.rm-item svg {
  width: 24px;
  height: 24px;
  stroke: white;
}
:root{
  /* ── Colors ── */
  --bg:#eef0f4;--surf:#fff;--surf2:#f5f7fa;--surf3:#eceff4;
  --bdr:#dde0e8;--bdr2:#c8ccd6;--txt:#1a1d26;--mut:#8590a0;--mut2:#6b7585;
  --acc:#f59e0b;--blue:#2563eb;--green:#16a34a;--red:#dc2626;--purple:#7c3aed;
  --dk:#1e2130;--dk2:#252840;--dk3:#30344a;
  /* ── Shadows ── */
  --shadow-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 12px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:0 8px 32px rgba(0,0,0,.12),0 4px 8px rgba(0,0,0,.06);
  /* ── Spacing scale ── */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;
  /* ── Typography scale ── */
  --text-xs:10px;--text-sm:11px;--text-base:12px;--text-md:13px;--text-lg:15px;--text-xl:18px;--text-2xl:22px;
  /* ── Radius scale ── */
  --r-sm:4px;--r-md:6px;--r-lg:8px;--r-xl:12px;--r-2xl:16px;
}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideInR{from{transform:translateX(10px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.25)}50%{box-shadow:0 0 10px 2px rgba(245,158,11,.12)}}
html,body{height:100%;overflow:hidden}
body{font-family:'Syne',sans-serif;background:var(--bg);color:var(--txt);user-select:none}
/* HEADER */
header{display:flex;align-items:center;justify-content:space-between;padding:0 18px;height:52px;background:linear-gradient(180deg,#1e2130,#181b28);border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0;z-index:100;box-shadow:0 2px 12px rgba(0,0,0,.22)}
.h-l{flex:1;display:flex;align-items:center}
.h-c{flex:1;display:flex;align-items:center;justify-content:center}
.h-r{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:10px}
.h-vsep{width:1px;height:22px;background:rgba(255,255,255,.12);margin:0 14px;flex-shrink:0}
/* Account toggle widget */
.h-acct{display:flex;align-items:center;gap:9px;padding:4px 10px 4px 4px;border-radius:8px;cursor:pointer;transition:.15s;border:1px solid transparent}
.h-acct:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1)}
.acct-av{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#f59e0b,#fbbf24);display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:800;color:#000;flex-shrink:0;letter-spacing:-.5px}
.acct-info{display:flex;flex-direction:column;gap:1px}
.acct-nm{font-family:'Syne',sans-serif;font-size:var(--text-sm);font-weight:700;color:rgba(255,255,255,.88);line-height:1.3}
.acct-rl{font-family:'DM Mono',monospace;font-size:9px;font-weight:600;color:var(--acc);letter-spacing:.3px;text-transform:uppercase;line-height:1.3}
/* Account popover card */
.acct-card{display:flex;align-items:center;gap:10px;padding:4px 2px 8px}
.acct-av-lg{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#f59e0b,#fbbf24);display:flex;align-items:center;justify-content:center;font-size:var(--text-md);font-weight:800;color:#000;flex-shrink:0;letter-spacing:-.5px}
/* Logo */
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;flex-shrink:0}
.logo svg{flex-shrink:0;filter:drop-shadow(0 0 6px rgba(245,158,11,.3))}
.logo-csm{font-size:17px;font-weight:800;letter-spacing:-.5px;color:var(--acc);text-shadow:0 0 14px rgba(245,158,11,.3)}
.logo-pv{font-size:17px;font-weight:400;letter-spacing:-.3px;color:rgba(255,255,255,.82)}
/* Project name + user */
.pname{font-family:'DM Mono',monospace;font-size:var(--text-md);font-weight:500;color:rgba(255,255,255,.75);background:rgba(255,255,255,.06);padding:5px 14px;border-radius:var(--r-md);border:1px solid rgba(255,255,255,.08);letter-spacing:.01em}
.user-badge{display:flex;align-items:center;gap:7px}
.rbadge{font-family:'DM Mono',monospace;font-size:var(--text-xs);font-weight:700;padding:2px 8px;border-radius:12px}
.rbadge.pm{background:rgba(245,158,11,.15);color:var(--acc);border:1px solid rgba(245,158,11,.3)}
.rbadge.viewer{background:rgba(37,99,235,.15);color:#60a5fa;border:1px solid rgba(37,99,235,.3)}
.uname{font-family:'Syne',sans-serif;font-size:var(--text-base);font-weight:600;color:rgba(255,255,255,.75);letter-spacing:.01em}
.hbtns{display:flex;gap:4px;align-items:center}
.hb{font-family:'DM Mono',monospace;font-size:var(--text-sm);padding:4px 9px;border-radius:4px;border:none;cursor:pointer;transition:.15s}
.hb-ghost{background:rgba(255,255,255,.08);color:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.12)}.hb-ghost:hover{background:rgba(255,255,255,.14);color:#fff}
.hb-ghost:disabled{opacity:.3;cursor:not-allowed}
.hb-acc{background:linear-gradient(135deg,var(--acc),#fbbf24);color:#000;font-weight:700;font-family:'Syne',sans-serif;font-size:var(--text-sm);box-shadow:0 1px 4px rgba(245,158,11,.25)}.hb-acc:hover{background:linear-gradient(135deg,#fbbf24,var(--acc));box-shadow:0 2px 8px rgba(245,158,11,.35)}
/* BODY */
.body{display:flex;flex:1;overflow:hidden;min-height:0}
/* LEFT TOGGLE BAR */
.ltb{width:54px;background:linear-gradient(180deg,#1e2130,#181b28);border-right:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;align-items:center;padding:8px 0;flex-shrink:0;z-index:90;gap:2px}
.ltb-div{width:28px;height:1px;background:rgba(255,255,255,.08);margin:6px auto}
.ltb-btn{width:38px;height:38px;border-radius:var(--r-lg);background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;color:rgba(255,255,255,.4);transition:all .15s;position:relative;flex-shrink:0}
.ltb-btn:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.9)}
.ltb-btn:active{transform:scale(.93)}
.ltb-btn.act{color:var(--acc);background:rgba(245,158,11,.12)}
.ltb-btn[data-tip]{position:relative}
.ltb-btn[data-tip]::after{content:attr(data-tip);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:8px;padding:4px 10px;background:#1e2130;color:#fff;font-family:'Syne',sans-serif;font-size:var(--text-sm);border-radius:4px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;box-shadow:0 2px 8px rgba(0,0,0,.3);z-index:100}
.ltb-btn[data-tip]:hover::after{opacity:1}
.ltb-btn.act::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--acc)}
.ltb-btn:disabled{opacity:.2;cursor:not-allowed;transform:none}
.ltb-label{font-family:'DM Mono',monospace;font-size:7.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.2);margin:8px 0 2px;width:100%;text-align:center}
.ltb-label:first-child{margin-top:0}
.pop-section-lbl{font-size:var(--text-xs);font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--mut);margin:4px 0 6px;padding:0 2px}
/* Shared empty-state look for popovers and right-rail panels.
   Centered, dimmed, with a checkmark/dot glyph. (UI_REVIEW PR3) */
.empty-state{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 8px;color:var(--mut);font-size:var(--text-sm);text-align:center;font-style:italic}
.empty-state::before{content:'∅';font-style:normal;font-size:18px;opacity:.5;line-height:1}
/* Subsection label inside a popover — slightly smaller / lighter than
   the section label, for grouping toggles. (UI_REVIEW #11) */
.pop-subsection-lbl{font-size:var(--text-2xs,10px);font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--mut);opacity:.7;margin:8px 0 4px;padding:0 2px}
.pop-subsection-lbl:first-child{margin-top:0}
.ltb-btn .badge{position:absolute;top:2px;right:2px;min-width:14px;height:14px;background:var(--red);color:#fff;font-size:8px;font-weight:700;border-radius:7px;display:flex;align-items:center;justify-content:center;padding:0 3px;font-family:'DM Mono',monospace}
/* POPOVER */
.pop{position:fixed;left:62px;background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r-xl);box-shadow:var(--shadow-lg),0 0 0 1px rgba(0,0,0,.04);z-index:300;min-width:240px;display:none;max-height:calc(100vh - 80px);overflow-y:auto}
.pop.open{display:block;animation:slideInR .18s ease}
.pop-hdr{padding:var(--sp-3) var(--sp-4) var(--sp-2);border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--surf);z-index:1;border-radius:var(--r-xl) var(--r-xl) 0 0}
.pop-ttl{font-size:var(--text-md);font-weight:700}
.pop-x{background:none;border:none;cursor:pointer;font-size:16px;color:var(--mut);width:28px;height:28px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;transition:.1s}.pop-x:hover{color:var(--txt);background:var(--surf2)}
.pop-body{padding:var(--sp-2) var(--sp-3)}
.pop-row{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;border-radius:var(--r-md);gap:var(--sp-2);transition:.1s}
.pop-row:hover{background:var(--surf2)}
.pop-row label{font-size:var(--text-base);cursor:pointer;flex:1}
.tog{width:32px;height:18px;border-radius:9px;background:var(--bdr2);border:none;cursor:pointer;position:relative;transition:.2s;flex-shrink:0}
.tog.on{background:var(--acc)}
.tog::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.tog.on::after{left:16px}
.pop-sep{height:1px;background:var(--bdr);margin:var(--sp-2) 0}
.pop-btn{width:100%;font-family:'Syne',sans-serif;font-size:var(--text-sm);padding:8px 10px;border-radius:var(--r-md);border:none;background:transparent;color:var(--txt);cursor:pointer;text-align:left;transition:.12s;display:flex;align-items:center;gap:8px}
.pop-btn:hover{background:var(--surf2)}
.pop-btn:active{transform:scale(.98)}
.pop-btn.acc{color:var(--acc);border-color:rgba(245,158,11,.3)}.pop-btn.acc:hover{background:rgba(245,158,11,.06)}
.pop-btn.blu{color:var(--blue)}.pop-btn.blu:hover{background:rgba(37,99,235,.06)}
.pfld{margin-bottom:7px}
.pfl{font-family:'DM Mono',monospace;font-size:var(--text-xs);color:var(--mut);margin-bottom:3px}
.pin{width:100%;background:var(--surf2);border:1px solid var(--bdr);border-radius:4px;padding:5px 8px;font-family:'Syne',sans-serif;font-size:var(--text-base);color:var(--txt);outline:none}
.pin:focus{border-color:var(--acc)}
.pin2{background:var(--surf2);border:1px solid var(--bdr);border-radius:4px;padding:5px 8px;font-size:var(--text-base);color:var(--txt);outline:none;width:100%}
.pin2:focus{border-color:var(--acc)}
/* ── Button System (3 tiers) ── */
.btn-pri{background:var(--acc);color:#000;border:none;font-family:'Syne',sans-serif;font-weight:700;border-radius:var(--r-md);padding:6px 14px;font-size:var(--text-sm);cursor:pointer;transition:.15s}
.btn-pri:hover{filter:brightness(1.1)}
.btn-pri:active{transform:scale(.97)}
.btn-sec{background:transparent;color:var(--txt);border:1px solid var(--bdr2);font-family:'Syne',sans-serif;border-radius:var(--r-md);padding:6px 14px;font-size:var(--text-sm);cursor:pointer;transition:.15s}
.btn-sec:hover{background:var(--surf3);border-color:var(--txt)}
.btn-sec:active{transform:scale(.97)}
.btn-del{background:transparent;color:var(--red);border:1px solid var(--red);font-family:'Syne',sans-serif;border-radius:var(--r-md);padding:6px 14px;font-size:var(--text-sm);cursor:pointer;transition:.15s}
.btn-del:hover{background:rgba(220,38,38,.1)}
.btn-del:active{transform:scale(.97)}

/* CHART AREA */
.chart-area{flex:1;position:relative;overflow:hidden}
canvas{display:block}
/* Floating undo/redo — left of Lageplan */
.ur-btns{position:absolute;top:20px;left:6px;display:flex;flex-direction:column;gap:4px;z-index:20;pointer-events:auto}
.ur-btn{width:48px;height:26px;background:rgba(255,255,255,.88);border:1px solid #c0c5d0;border-radius:5px;cursor:pointer;font-size:var(--text-md);display:flex;align-items:center;justify-content:center;color:#374151;transition:.12s;box-shadow:0 1px 3px rgba(0,0,0,.07);font-family:'DM Mono',monospace}
.ur-btn:hover:not(:disabled){background:#fff;border-color:#8590a0;box-shadow:0 2px 5px rgba(0,0,0,.1);color:#111}
.ur-btn:disabled{opacity:.25;cursor:not-allowed}
.selbadge{position:absolute;top:10px;left:50%;transform:translateX(-50%);background:rgba(37,99,235,.9);color:#fff;font-family:'DM Mono',monospace;font-size:var(--text-sm);padding:3px 13px;border-radius:20px;display:none;pointer-events:none;z-index:40;box-shadow:0 2px 8px rgba(37,99,235,.25)}
/* RIGHT COL */
.rcol{width:290px;min-width:8px;display:flex;flex-direction:column;background:var(--surf);flex-shrink:0;overflow:hidden;position:relative;box-shadow:-2px 0 8px rgba(0,0,0,.04);transition:width .22s cubic-bezier(.4,0,.2,1)}
/* Collapsed: 0 width so the chart runs clean to the screen edge (no empty
   strip / gap), all panel content hidden (no leaking PIN / labels), and just a
   thin divider + a hover toggle floating over the canvas edge. */
.rcol.collapsed{width:0!important;min-width:0!important;background:transparent;box-shadow:none;overflow:visible}
.rcol.collapsed #csm-app-rsidebar,
.rcol.collapsed .rcol-inner,
.rcol.collapsed .rp,
.rcol.collapsed .rcol-topbar,
.rcol.collapsed .dov{display:none!important}
.rcol.collapsed .rcol-handle{left:auto;right:0;width:16px}
.rcol.collapsed .rcol-handle::after{left:auto;right:0}
.rcol.collapsed .rcol-toggle{left:auto;right:0;transform:translate(0,-50%);border-radius:5px 0 0 5px}
/* Drag-to-resize + collapse handle — flush to the chart edge */
.rcol-handle{position:absolute;left:0;top:0;bottom:0;width:8px;cursor:ew-resize;z-index:21;background:transparent;display:flex;align-items:center;justify-content:center}
.rcol-handle::after{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;border-radius:0 1px 1px 0;background:var(--bdr2);transition:background .15s,width .15s,box-shadow .15s}
.rcol-handle:hover::after,.rcol-handle.rsz-active::after{background:var(--acc);width:3px;box-shadow:1px 0 6px rgba(245,158,11,.35)}
/* Collapse/expand arrow button — appears on hover */
.rcol-toggle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:18px;height:44px;background:var(--surf2);border:1px solid var(--bdr);border-radius:0 5px 5px 0;color:var(--mut);font-size:var(--text-base);line-height:1;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s,background .15s,color .15s;z-index:22}
.rcol-handle:hover .rcol-toggle,.rcol.collapsed .rcol-toggle{opacity:1}
.rcol-toggle:hover{background:var(--acc);color:#fff;border-color:var(--acc)}
/* Inner content wrapper — offset from the 8px handle */
.rcol-inner{margin-left:8px;display:flex;flex-direction:column;flex:1;overflow:hidden;min-width:0}
/* Thin top bar inside rcol-inner that holds the pin button */
.rcol-topbar{display:flex;align-items:center;justify-content:flex-end;padding:3px 6px;border-bottom:1px solid var(--bdr);flex-shrink:0}
.rcol-pin-btn{font-family:'DM Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.5px;padding:1px 7px 1px 5px;border:1px solid var(--bdr);border-radius:3px;cursor:pointer;background:transparent;color:var(--mut);transition:all .15s;text-transform:uppercase;display:flex;align-items:center;gap:4px}
.rcol-pin-btn::before{content:'○';font-size:9px;line-height:1}
.rcol-pin-btn:hover{border-color:var(--bdr2);color:var(--txt)}
.rcol-pin-btn.pinned{background:var(--acc);color:#fff;border-color:var(--acc)}
.rcol-pin-btn.pinned::before{content:'●'}
/* When pinned: freeze the handle (no resize, no collapse) */
.rcol.pinned .rcol-handle{cursor:default;pointer-events:none}
.rcol.pinned .rcol-handle::after{background:var(--bdr)!important;width:2px!important;box-shadow:none!important}
/* Right panels */
.rp{display:flex;flex-direction:column;border-bottom:1px solid var(--bdr);min-height:36px;overflow:hidden}
.rp-hdr{height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;cursor:pointer;background:var(--surf2);flex-shrink:0;user-select:none}
.rp-hdr:hover{background:var(--surf3)}
.rp-title{font-size:var(--text-xs);font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--mut);display:flex;align-items:center;gap:5px}
.rp-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.rp-cnt{font-family:'DM Mono',monospace;font-size:var(--text-xs);padding:1px 5px;border-radius:8px;font-weight:700}
.rp-cnt.red{background:rgba(220,38,38,.1);color:var(--red)}
.rp-cnt.blu{background:rgba(37,99,235,.1);color:var(--blue)}
.rp-arr{font-size:var(--text-xs);color:var(--mut);transition:.2s}
.rp.collapsed .rp-arr{transform:rotate(-90deg)}
.rp-body{overflow-y:auto;padding:5px}
.rp.collapsed .rp-body{display:none}
/* Activity cards */
.acard{background:var(--surf2);border:1px solid var(--bdr);border-radius:6px;padding:7px 9px;margin-bottom:4px;cursor:pointer;border-left:3px solid transparent;transition:all .15s ease;animation:fadeIn .2s ease}
.acard:hover{border-color:var(--bdr2);box-shadow:var(--shadow-sm);transform:translateX(1px)}.acard.sel{border-left-color:var(--acc)!important;box-shadow:0 0 0 1px rgba(245,158,11,.15)}
.ac-n{font-size:var(--text-sm);font-weight:600;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-m{display:flex;gap:5px;flex-wrap:wrap}
.ac-t{font-family:'DM Mono',monospace;font-size:9px;color:var(--mut);background:var(--surf3);padding:1px 5px;border-radius:3px}
.ac-t.red{background:rgba(220,38,38,.09);color:var(--red)}
.ac-t.grn{background:rgba(22,163,74,.09);color:var(--green)}
/* Layers */
.lay-item{display:flex;align-items:center;gap:6px;padding:5px 6px;border-radius:5px;margin-bottom:2px;cursor:pointer;transition:.1s}
.lay-item:hover{background:var(--surf2)}
.lay-vis{width:14px;height:14px;border-radius:3px;border:1.5px solid;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;flex-shrink:0;transition:.15s}
.lay-col{width:13px;height:13px;border-radius:3px;flex-shrink:0;border:1px solid rgba(0,0,0,.1)}
.lay-nm{flex:1;font-size:var(--text-sm);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lay-ty{font-family:'DM Mono',monospace;font-size:9px;color:var(--mut);border:1px solid var(--bdr);padding:1px 4px;border-radius:3px}
.lay-exp{font-size:var(--text-sm);color:var(--mut);background:none;border:none;cursor:pointer;padding:2px 3px;border-radius:3px}.lay-exp:hover{background:var(--surf3)}
/* Layer edit sub-panel */
.lay-edit{background:var(--surf2);border:1px solid var(--bdr);border-radius:6px;padding:8px;margin-bottom:5px;display:none;animation:fadeIn .15s ease}
.lay-edit.open{display:block}
.lerow{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.lel{font-family:'DM Mono',monospace;font-size:var(--text-xs);color:var(--mut);min-width:44px}
.lei{background:var(--surf);border:1px solid var(--bdr);border-radius:3px;padding:3px 6px;font-size:var(--text-sm);color:var(--txt);font-family:'DM Mono',monospace;flex:1;outline:none}
.lei:focus{border-color:var(--acc)}
.seg-b{font-family:'DM Mono',monospace;font-size:var(--text-xs);padding:3px 7px;border-radius:3px;border:1px solid var(--bdr);background:transparent;color:var(--mut);cursor:pointer;transition:.12s}
.seg-b.on{background:var(--acc);color:#000;border-color:var(--acc)}
/* Category mini-preview canvas */
.cat-prev{border-radius:3px;border:1px solid var(--bdr);flex-shrink:0;display:block;background:var(--surf)}
/* Visual picker button groups (fill / dash) */
.vis-pick{display:flex;gap:2px;flex-wrap:wrap;flex:1}
.vp-b{padding:2px 5px;border-radius:3px;border:1px solid var(--bdr);background:transparent;color:var(--mut2);cursor:pointer;transition:.12s;display:flex;align-items:center;justify-content:center;line-height:1;font-size:var(--text-base)}
.vp-b:hover{border-color:var(--acc);color:var(--txt)}
.vp-b.on{background:var(--acc);color:#000;border-color:var(--acc)}
/* Location bar items */
.lb-item{background:var(--surf2);border:1px solid var(--bdr);border-radius:5px;margin-bottom:4px;overflow:hidden}
.lb-row-hdr{display:flex;align-items:center;gap:4px;padding:4px 7px;background:var(--surf3);border-bottom:1px solid var(--bdr)}
.lb-row-lbl{flex:1;font-size:9px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--mut)}
.lb-row-name-inp{flex:1;font-size:var(--text-xs);font-weight:700;color:var(--txt);background:transparent;border:none;border-bottom:1px solid transparent;outline:none;padding:1px 2px;font-family:'Syne',sans-serif;min-width:0}
.lb-row-name-inp:focus{border-bottom-color:var(--acc);background:var(--surf)}
.lb-seg-list{display:flex;flex-direction:column}
.lb-seg{border-top:1px solid var(--bdr)}
.lb-seg:first-child{border-top:none}
.lb-row{display:flex;align-items:center;gap:5px;padding:5px 7px}
.lb-nm{flex:1;font-size:var(--text-sm);font-weight:600;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-rng{font-family:'DM Mono',monospace;font-size:9px;color:var(--mut)}
.lb-body{padding:0 8px 8px;display:none;border-top:1px solid var(--bdr)}
.lb-body.open{display:block}
/* DETAIL OVERLAY */
.dov{position:absolute;top:0;right:0;width:100%;height:100%;background:var(--surf);border-left:1px solid var(--bdr);transform:translateX(100%);transition:transform .24s cubic-bezier(.4,0,.2,1);overflow-y:auto;display:flex;flex-direction:column;z-index:10}
.dov.open{transform:translateX(0)}
.dov-hdr{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--bdr);display:flex;align-items:flex-start;justify-content:space-between;background:linear-gradient(180deg,var(--surf2),var(--surf));flex-shrink:0;position:sticky;top:0;z-index:6}
.dov-ttl{font-size:var(--text-lg);font-weight:700}.dov-sub{font-size:var(--text-sm);color:var(--mut);margin-top:2px;font-family:'DM Mono',monospace}
.dov-x{background:none;border:none;cursor:pointer;font-size:16px;color:var(--mut);width:30px;height:30px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;transition:.1s}.dov-x:hover{color:var(--txt);background:var(--surf3)}
/* Detail panel tab bar */
/* Sticks below dov-hdr (~60px tall) and below dov-acts in the natural
   flow. Sticky top:101px = dov-hdr (60) + dov-acts (~41) so the tabs
   stay pinned at the bottom of the action row when content scrolls. */
.dov-tabs{display:flex;border-bottom:1px solid var(--bdr);padding:0 var(--sp-3);gap:0;flex-shrink:0;position:sticky;top:101px;z-index:4;background:var(--surf)}
.dov-tab{font-family:'DM Mono',monospace;font-size:var(--text-sm);font-weight:600;letter-spacing:.3px;padding:10px 14px;border:none;background:none;color:var(--mut);cursor:pointer;border-bottom:3px solid transparent;transition:.15s}
.dov-tab:hover{color:var(--txt)}
.dov-tab.active{color:var(--acc);border-bottom-color:var(--acc);background:rgba(245,158,11,.06)}
.dov-tab-panel{display:none}
.dov-tab-panel.active{display:block}

/* Action row scrolls with content — it's a one-shot row, not navigation.
   Previously sticky at top:80, which conflicted with dov-tabs at top:44 and
   put both pinned at conflicting Ys. */
.dov-acts{display:flex;gap:6px;padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--bdr);flex-wrap:wrap;background:var(--surf)}
.dov-sec{padding:var(--sp-4) var(--sp-4);border-bottom:1px solid var(--bdr);display:flex;flex-direction:column;gap:var(--sp-3)}
.dov-st{font-size:var(--text-sm);font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--mut);margin-bottom:0}
.dfld{margin-bottom:0}
.dfl{font-family:'DM Mono',monospace;font-size:var(--text-xs);color:var(--mut);margin-bottom:2px}
.dfi{width:100%;background:var(--surf2);border:1px solid var(--bdr2);border-radius:var(--r-sm);padding:6px 8px;font-family:'Syne',sans-serif;font-size:var(--text-base);color:var(--txt);outline:none;transition:border-color .15s}
.dfi:focus{border-color:var(--acc);box-shadow:0 0 0 2px rgba(245,158,11,.15)}
.dfi:read-only{background:var(--surf3);color:var(--mut2);cursor:default}
.dfi:disabled{background:var(--surf3);color:var(--mut2)}
.dr2{display:flex;gap:7px}.dr2>*{flex:1}
.drv{font-size:var(--text-sm);color:var(--mut);font-family:'DM Mono',monospace}
.pw{height:4px;background:var(--surf3);border-radius:2px;overflow:hidden;margin-top:4px}
.pf{height:100%;border-radius:2px;transition:width .3s}
.pslider{width:100%;margin-top:5px;height:3px;-webkit-appearance:none;background:var(--surf3);border-radius:2px;cursor:pointer;outline:none;accent-color:var(--acc)}
/* Change history in detail */
.eh-item{display:flex;gap:8px;padding:6px 0;border-bottom:1px solid var(--bdr)}
.eh-item:last-child{border-bottom:none}
.eh-who{font-family:'DM Mono',monospace;font-size:9px;color:var(--mut);min-width:22px}
.eh-body{flex:1}
.eh-act{font-size:var(--text-sm);font-weight:600;margin-bottom:1px}
.eh-det{font-size:var(--text-xs);color:var(--mut)}
.eh-ts{font-family:'DM Mono',monospace;font-size:9px;color:var(--mut);text-align:right}
/* Suggest */
.sug-box{background:rgba(37,99,235,.05);border:1px solid rgba(37,99,235,.18);border-radius:6px;padding:9px;margin:8px 12px}
.sug-box textarea{width:100%;background:var(--surf);border:1px solid var(--bdr);border-radius:4px;padding:5px 7px;font-size:var(--text-sm);font-family:'Syne',sans-serif;color:var(--txt);resize:none;outline:none;margin-top:5px}
.sug-box textarea:focus{border-color:var(--blue)}
/* Comments */
.cmt-item{background:var(--surf2);border-radius:5px;padding:6px 8px;margin-bottom:4px;font-size:var(--text-sm);line-height:1.5;border-left:2px solid var(--acc)}
.cmt-who{font-size:var(--text-xs);color:var(--mut);margin-bottom:2px;font-family:'DM Mono',monospace}
.cmt-wrap{display:flex;gap:4px;margin-top:6px}
.cmt-inp{flex:1;background:var(--surf2);border:1px solid var(--bdr);border-radius:4px;padding:5px 7px;font-size:var(--text-sm);font-family:'Syne',sans-serif;color:var(--txt);resize:none;outline:none}
.cmt-inp:focus{border-color:var(--acc)}
.cmt-btn{background:var(--acc);border:none;border-radius:4px;color:#000;font-size:14px;width:28px;cursor:pointer}
/* Attachment item */
.att-item{display:flex;align-items:center;gap:6px;padding:4px 6px;background:var(--surf2);border-radius:4px;margin-top:3px;font-size:var(--text-sm);border:1px solid var(--bdr)}
.att-icon{flex-shrink:0;font-size:var(--text-md)}
.att-body{flex:1;overflow:hidden;min-width:0}
.att-body:hover .att-name{color:var(--acc);text-decoration:underline}
.att-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm);color:var(--txt)}
.att-meta{display:block;font-family:'DM Mono',monospace;font-size:9px;color:var(--mut)}
.att-rm{font-size:var(--text-md);color:var(--mut);cursor:pointer;padding:0 3px;flex-shrink:0;line-height:1}
.att-rm:hover{color:var(--red,#ef4444)}
.att-thumb{margin-top:2px;border-radius:4px;overflow:hidden;max-width:180px}
.att-thumb img{display:block;width:100%;height:auto;border-radius:4px;border:1px solid var(--bdr)}
/* Change requests */
.cr-item{background:var(--surf2);border:1px solid var(--bdr);border-radius:6px;padding:8px 10px;margin-bottom:5px}
.cr-hd{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px}
.cr-nm{font-size:var(--text-sm);font-weight:600}.cr-who{font-family:'DM Mono',monospace;font-size:9px;color:var(--mut)}
.cr-txt{font-size:var(--text-sm);color:var(--txt);line-height:1.5;margin-bottom:6px}
.cr-btns{display:flex;gap:5px}
.crb{font-family:'DM Mono',monospace;font-size:var(--text-xs);padding:3px 9px;border-radius:4px;border:none;cursor:pointer;font-weight:600}
.crb.ok{background:rgba(22,163,74,.1);color:var(--green);border:1px solid rgba(22,163,74,.22)}.crb.ok:hover{background:rgba(22,163,74,.18)}
.crb.no{background:rgba(220,38,38,.08);color:var(--red);border:1px solid rgba(220,38,38,.2)}.crb.no:hover{background:rgba(220,38,38,.16)}
.crb.done{opacity:.4;cursor:default}
/* Published versions */
.ver-item{display:flex;gap:8px;padding:8px 9px;border-bottom:1px solid var(--bdr);cursor:pointer;transition:.12s}
.ver-item:hover{background:var(--surf2)}
.ver-item.cur{background:rgba(245,158,11,.06);border-left:3px solid var(--acc)}
.ver-num{font-family:'DM Mono',monospace;font-size:var(--text-sm);font-weight:700;color:var(--acc);min-width:26px}
.ver-info{flex:1}.ver-name{font-size:var(--text-sm);font-weight:600;margin-bottom:1px}
.ver-date{font-family:'DM Mono',monospace;font-size:var(--text-xs);color:var(--mut)}
/* STATUSBAR */
.sbar{height:26px;background:linear-gradient(180deg,#1e2130,#181b28);border-top:1px solid var(--bdr);display:flex;align-items:center;padding:0 14px;gap:16px;flex-shrink:0}
.si{font-family:'DM Mono',monospace;font-size:var(--text-sm);color:rgba(255,255,255,.45);display:flex;align-items:center;gap:5px}
.si-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,.4)}
/* TOOLTIP */
.tip{position:fixed;background:rgba(20,22,34,.92);color:#fff;border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);padding:8px 12px;font-size:var(--text-sm);pointer-events:none;z-index:500;display:none;box-shadow:var(--shadow-lg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.tip-t{font-weight:700;margin-bottom:3px}.tip-r{font-family:'DM Mono',monospace;font-size:var(--text-xs);color:rgba(255,255,255,.5)}
/* MODAL */
.mo{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:600;display:none;align-items:center;justify-content:center;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.mo.open{display:flex}

/* ─── Lageplan-Editor (full-screen modal) ──────────────────── */
.spe-panel{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;width:min(1400px,96vw);height:min(880px,92vh);overflow:hidden}
.spe-hdr{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--bdr);background:linear-gradient(180deg,var(--surf2),var(--surf));flex-shrink:0}
.spe-tabs{display:flex;background:var(--surf3);border-radius:6px;padding:3px;gap:2px}
.spe-tab{display:flex;align-items:center;gap:6px;font-family:'DM Mono',monospace;font-size:var(--text-sm);
  padding:6px 14px;border:none;border-radius:4px;cursor:pointer;background:transparent;color:var(--mut);transition:.15s;white-space:nowrap}
.spe-tab:hover{color:var(--txt);background:rgba(255,255,255,.04)}
.spe-tab.active{background:var(--surf);color:var(--acc);font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.spe-status{flex:1;font-size:var(--text-sm);color:var(--mut);font-family:'DM Mono',monospace}
.spe-hdr-actions{display:flex;align-items:center;gap:6px}
.spe-body{flex:1;display:flex;min-height:0;overflow:hidden}

/* Tools panel (left) */
.spe-tools{width:240px;flex-shrink:0;border-right:1px solid var(--bdr);background:var(--surf2);padding:12px;overflow-y:auto;display:flex;flex-direction:column;gap:0}
.spe-tool-lbl{font-family:'DM Mono',monospace;font-size:var(--text-xs);font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--mut);margin-bottom:6px}
.spe-tool{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;margin-bottom:3px;
  background:var(--surf);border:1px solid var(--bdr);border-radius:6px;cursor:pointer;
  font-family:'Syne',sans-serif;font-size:var(--text-sm);color:var(--txt);transition:.15s;text-align:left}
.spe-tool:hover{border-color:var(--acc);background:rgba(245,158,11,.04)}
.spe-tool.active{background:rgba(245,158,11,.14);border-color:var(--acc);color:var(--acc);font-weight:700;box-shadow:inset 0 0 0 1px rgba(245,158,11,.4)}
.spe-tool-del:hover{border-color:var(--red);color:var(--red);background:rgba(239,68,68,.04)}
.spe-elem-list{display:flex;flex-direction:column;gap:2px;max-height:280px;overflow-y:auto}
.spe-elem-item{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:4px;cursor:pointer;font-size:var(--text-sm);color:var(--txt);font-family:'DM Mono',monospace;transition:.1s}
.spe-elem-item:hover{background:var(--surf3)}
.spe-elem-item.active{background:rgba(245,158,11,.14);color:var(--acc);font-weight:600}
.spe-elem-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.spe-elem-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spe-elem-km{font-size:9px;color:var(--mut);flex-shrink:0}

/* Canvas wrap (center) */
.spe-canvas-wrap{flex:1;position:relative;background:var(--bg);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.spe-axis{height:24px;border-bottom:1px solid var(--bdr);background:var(--surf2);font-family:'DM Mono',monospace;font-size:var(--text-xs);color:var(--mut);position:relative;flex-shrink:0}
#spe-cv{flex:1;display:block;width:100%;cursor:default}
.spe-hint{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);font-size:var(--text-sm);color:var(--mut);background:rgba(30,33,48,.85);padding:5px 12px;border-radius:4px;pointer-events:none;font-family:'DM Mono',monospace}
.spe-hint:empty{display:none}

/* Properties panel (right) */
.spe-props{width:280px;flex-shrink:0;border-left:1px solid var(--bdr);background:var(--surf2);padding:14px;overflow-y:auto}
.spe-props-empty{font-size:var(--text-sm);color:var(--mut);font-style:italic;text-align:center;padding:30px 12px}
.md{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r-xl);padding:var(--sp-5);width:360px;box-shadow:var(--shadow-lg);animation:fadeIn .18s ease}
.md-t{font-size:14px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between}
.md-x{background:none;border:none;cursor:pointer;font-size:16px;color:var(--mut)}.md-x:hover{color:var(--txt)}
.mdr{margin-bottom:8px}
.mdl{font-family:'DM Mono',monospace;font-size:var(--text-xs);color:var(--mut);margin-bottom:3px}
.mdi{width:100%;background:var(--surf2);border:1px solid var(--bdr);border-radius:4px;padding:6px 8px;font-family:'Syne',sans-serif;font-size:var(--text-base);color:var(--txt);outline:none}
.mdi:focus{border-color:var(--acc)}
.mdb{display:flex;gap:7px;margin-top:14px;justify-content:flex-end}
.mdr2{display:flex;gap:8px}.mdr2>.mdr{flex:1}
/* Keyboard shortcuts table */
.kb-shortcuts-table{width:100%;border-collapse:collapse}
.kb-shortcuts-table td{padding:6px 8px;font-size:var(--text-base);border-bottom:1px solid var(--bdr)}
.kb-key{width:100px;text-align:right;padding-right:14px!important}
.kb-key kbd{display:inline-block;background:var(--surf2);border:1px solid var(--bdr);border-radius:4px;padding:2px 8px;font-family:'DM Mono',monospace;font-size:var(--text-sm);font-weight:600;color:var(--txt);box-shadow:0 1px 1px rgba(0,0,0,.08);min-width:20px;text-align:center}
.kb-desc{color:var(--txt);font-family:'Syne',sans-serif}
/* PDF OVERLAY */
#pdf-overlay{z-index:650}
.pdf-ov-panel{background:var(--surf);border:1px solid var(--bdr2);border-radius:12px;width:92vw;height:88vh;max-width:1600px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;animation:fadeIn .18s ease;overflow:hidden}
.pdf-ov-hdr{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--bdr);flex-shrink:0;gap:8px}
.pdf-ov-ttl{font-size:14px;font-weight:700;white-space:nowrap}
.pdf-ov-status{flex:1;text-align:center;font-family:'DM Mono',monospace;font-size:var(--text-sm);color:var(--acc)}
.pdf-ov-zoom{display:flex;align-items:center;gap:4px}
.pdf-ov-zlvl{font-family:'DM Mono',monospace;font-size:var(--text-xs);color:var(--mut);min-width:36px;text-align:center}
.pdf-ov-body{flex:1;position:relative;overflow:hidden;background:var(--surf2)}
.pdf-ov-viewport{position:absolute;inset:0;overflow:hidden;cursor:grab}
.pdf-ov-viewport.is-dragging{cursor:grabbing}
.pdf-ov-viewport.is-cal{cursor:crosshair}
#pdf-ov-cv{position:absolute;top:0;left:0;transform-origin:0 0}
.pdf-ov-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'DM Mono',monospace;font-size:var(--text-base);color:var(--mut);pointer-events:none}
.pdf-ov-marker{position:absolute;width:14px;height:14px;border-radius:50%;border:2px solid var(--acc);background:rgba(59,130,246,.3);pointer-events:none;z-index:2}
.pdf-ov-marker::after{content:attr(data-label);position:absolute;left:18px;top:-2px;font-family:'DM Mono',monospace;font-size:var(--text-xs);color:var(--acc);white-space:nowrap;font-weight:700}
/* small button utility */
.sbtn{font-family:'DM Mono',monospace;font-size:var(--text-xs);padding:4px 9px;border-radius:4px;border:1px solid var(--bdr);background:transparent;color:var(--mut2);cursor:pointer;transition:.12s}
.sbtn:hover{border-color:var(--acc);color:var(--txt)}
.sbtn.del{color:var(--red);border-color:rgba(220,38,38,.3)}.sbtn.del:hover{background:rgba(220,38,38,.08)}
/* uz */
.uz{border:1.5px dashed var(--bdr2);border-radius:5px;padding:8px;text-align:center;cursor:pointer;font-size:var(--text-sm);color:var(--mut);transition:.15s;margin-bottom:4px}
.uz:hover{border-color:var(--acc);color:var(--txt)}
/* DRAW-TO-CREATE PREVIEW */
.create-preview{position:absolute;pointer-events:none;z-index:35;border:2px dashed var(--acc);background:rgba(245,158,11,.06);border-radius:3px;display:none}
.create-preview .cp-label{position:absolute;bottom:-18px;left:0;font-family:'DM Mono',monospace;font-size:9px;color:var(--acc);white-space:nowrap}
/* SNAP BADGE */
.snap-badge{position:absolute;top:38px;left:50%;transform:translateX(-50%);background:rgba(22,163,74,.85);color:#fff;font-family:'DM Mono',monospace;font-size:var(--text-xs);padding:2px 10px;border-radius:12px;display:none;pointer-events:none;z-index:41}
/* TOOL INDICATOR */
.tool-ind{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);background:rgba(30,33,48,.88);color:#fff;font-family:'DM Mono',monospace;font-size:var(--text-xs);padding:4px 14px;border-radius:14px;z-index:42;display:none;align-items:center;gap:6px;box-shadow:var(--shadow-md);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.sp-ti-label{color:#fff;font-size:var(--text-sm)}

/* Site plan strip resize divider — invisible until hovered: the always-on
   grip pill floated over the schematic band and read as a stray element */
.sp-divider{position:absolute;left:0;right:0;height:6px;cursor:ns-resize;z-index:15;display:none}
.sp-divider::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30px;height:3px;border-radius:2px;background:transparent;transition:background .15s}
.sp-divider:hover::after{background:var(--acc)}

/* Draw-to-create quick-form */
.draw-qf{position:absolute;z-index:45;background:var(--surf);border:1px solid var(--bdr2);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);padding:12px 14px;width:240px;animation:fadeIn .15s ease}
.draw-qf-input{width:100%;padding:8px 10px;border:1px solid var(--bdr2);border-radius:var(--r-md);font-family:'Syne',sans-serif;font-size:var(--text-base);color:var(--txt);background:var(--surf2);outline:none;transition:.15s}
.draw-qf-input:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(245,158,11,.1)}
.draw-qf-btns{display:flex;gap:6px;margin-top:8px}
.draw-qf-ok{flex:1;padding:6px;border:none;border-radius:var(--r-md);background:linear-gradient(135deg,var(--acc),#fbbf24);color:#000;font-family:'Syne',sans-serif;font-size:var(--text-sm);font-weight:700;cursor:pointer;transition:.15s}
.draw-qf-ok:hover{box-shadow:0 2px 8px rgba(245,158,11,.3)}
.draw-qf-cancel{padding:6px 10px;border:1px solid var(--bdr);border-radius:var(--r-md);background:var(--surf2);color:var(--txt);font-family:'Syne',sans-serif;font-size:var(--text-sm);cursor:pointer}
.draw-qf-hint{font-family:'DM Mono',monospace;font-size:9px;color:var(--mut);margin-top:6px}
.tool-ind .ti-key{background:rgba(255,255,255,.15);padding:1px 5px;border-radius:3px;margin-left:4px;font-size:9px}
/* VERSION COMPARE BADGE */
/* Baseline compare badge + panel */
.vcmp-badge{position:absolute;top:10px;right:10px;background:rgba(124,58,237,.9);color:#fff;font-family:'DM Mono',monospace;font-size:var(--text-xs);padding:4px 12px;border-radius:16px;display:none;z-index:42;box-shadow:0 2px 8px rgba(124,58,237,.3);cursor:pointer}
.vcmp-panel{position:absolute;top:38px;right:10px;width:380px;max-width:calc(100vw - 80px);max-height:calc(100vh - 120px);background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);z-index:41;font-size:var(--text-sm);overflow:hidden;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;flex-direction:column}
.vcmp-panel-hdr{padding:10px 14px;font-family:'Syne',sans-serif;font-weight:700;font-size:var(--text-md);color:var(--purple);border-bottom:1px solid var(--bdr);flex-shrink:0}
.vcmp-stats{display:flex;gap:8px;padding:10px 14px;flex-shrink:0}
.vcmp-stat-card{flex:1;text-align:center;padding:6px 4px;border:1px solid var(--bdr);border-radius:var(--r-lg);background:var(--surf2)}
.vcmp-stat-val{display:block;font-family:'DM Mono',monospace;font-size:var(--text-xl);font-weight:700;color:var(--txt);line-height:1.3}
.vcmp-stat-lbl{display:block;font-size:9px;color:var(--mut);text-transform:uppercase;letter-spacing:.5px}
.vcmp-agg{padding:6px 14px;border-top:1px solid var(--bdr);font-family:'DM Mono',monospace;font-size:var(--text-xs);color:var(--mut);display:flex;gap:14px;flex-shrink:0}
.vcmp-agg span{font-weight:700}
.vcmp-pos{color:var(--green)}
.vcmp-neg{color:var(--red)}
/* Diff table */
.vcmp-table-wrap{flex:1;overflow-y:auto;border-top:1px solid var(--bdr)}
.vcmp-table{width:100%;border-collapse:collapse;font-family:'DM Mono',monospace;font-size:var(--text-xs)}
.vcmp-th{padding:6px 10px;text-align:left;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.5px;font-size:9px;border-bottom:1px solid var(--bdr);background:var(--surf2);position:sticky;top:0;z-index:1}
.vcmp-td{padding:5px 10px;border-bottom:1px solid var(--surf3);color:var(--txt)}
.vcmp-tr{cursor:pointer;transition:.1s}
.vcmp-tr:hover{background:var(--surf2)}
.vcmp-tr.vcmp-added{background:rgba(22,163,106,.04)}
.vcmp-tr.vcmp-removed{background:rgba(220,38,38,.04)}
.vcmp-name{font-family:'Syne',sans-serif;font-size:var(--text-sm);font-weight:600;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vcmp-footer{padding:8px 14px;border-top:1px solid var(--bdr);text-align:center;flex-shrink:0}
.vcmp-footer button{font-family:'Syne',sans-serif;font-size:var(--text-sm);padding:5px 18px;border-radius:var(--r-md);border:1px solid var(--purple);background:transparent;color:var(--purple);cursor:pointer;font-weight:600;transition:.15s}
.vcmp-footer button:hover{background:rgba(124,58,237,.1)}
/* RESOURCE TAGS */
.res-tags{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px}
.res-tag{font-family:'DM Mono',monospace;font-size:9px;padding:2px 6px;border-radius:10px;background:rgba(124,58,237,.08);color:var(--purple);border:1px solid rgba(124,58,237,.18);display:flex;align-items:center;gap:3px}
.res-tag .rx{cursor:pointer;font-size:var(--text-xs);opacity:.5}.res-tag .rx:hover{opacity:1}
.ac-res{font-family:'DM Mono',monospace;font-size:9px;color:var(--purple);background:rgba(124,58,237,.08);padding:1px 5px;border-radius:3px}
/* Milestone cards */
.ms-card{background:var(--surf2);border:1px solid var(--bdr);border-radius:6px;padding:7px 9px;margin-bottom:4px;border-left:3px solid transparent;transition:border-color .15s,box-shadow .15s;animation:fadeIn .2s ease}
.ms-card:hover{border-color:var(--bdr2);box-shadow:var(--shadow-sm)}
.ms-card-row{display:flex;align-items:center;gap:5px;margin-bottom:3px}
.ms-card-name{font-size:var(--text-sm);font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-card-actions{display:flex;gap:3px;opacity:0;transition:opacity .15s}
.ms-card:hover .ms-card-actions{opacity:1}
.ms-card-meta{display:flex;gap:5px;flex-wrap:wrap}
.ms-add-btn{width:100%;margin-top:5px;font-size:var(--text-xs);padding:5px 8px;text-align:center}
/* Milestone inline edit form */
.ms-form{background:var(--surf3);border:1px solid var(--bdr2);border-radius:6px;padding:8px 9px;margin-bottom:4px}
.ms-form .dfld{margin-bottom:6px}
.ms-form .dfl{font-family:'DM Mono',monospace;font-size:var(--text-xs);color:var(--mut);margin-bottom:2px}
.ms-form .dfi{width:100%;box-sizing:border-box}
.ms-form-row{display:flex;gap:6px}
.ms-form-row .dfld{flex:1}
.ms-form-btns{display:flex;gap:5px;margin-top:4px}
/* AI CHAT PANEL */
.chat-panel{position:absolute;bottom:36px;right:16px;width:320px;height:420px;background:var(--surf2);border:1px solid var(--bdr);border-radius:var(--r-xl);box-shadow:var(--shadow-md);display:none;flex-direction:column;z-index:50;overflow:hidden;font-family:'DM Mono',monospace}
.chat-panel.open{display:flex}
.chat-hdr{display:flex;align-items:center;padding:8px 12px;border-bottom:1px solid var(--bdr);background:var(--surf);flex-shrink:0}
.chat-ttl{font-size:var(--text-sm);font-weight:700;color:var(--txt);flex:1}
.chat-close{background:none;border:none;color:var(--mut2);cursor:pointer;font-size:var(--text-base);padding:2px 4px;border-radius:3px;line-height:1}
.chat-close:hover{color:var(--txt)}
.chat-msgs{flex:1;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.chat-msg{max-width:85%;padding:7px 10px;border-radius:8px;font-size:10.5px;line-height:1.5;word-break:break-word;white-space:pre-wrap}
.chat-msg.ai{background:var(--surf);border:1px solid var(--bdr);color:var(--txt);align-self:flex-start;border-bottom-left-radius:2px}
.chat-msg.user{background:var(--acc);color:#000;align-self:flex-end;border-bottom-right-radius:2px}
.chat-msg.thinking{color:var(--mut2);font-style:italic}
.chat-inp-row{display:flex;gap:6px;padding:8px 12px;border-top:1px solid var(--bdr);flex-shrink:0}
.chat-inp{flex:1;background:var(--surf);border:1px solid var(--bdr);border-radius:6px;color:var(--txt);font-family:'DM Mono',monospace;font-size:var(--text-xs);padding:5px 8px;outline:none}
.chat-inp:focus{border-color:var(--acc)}
.chat-send{background:var(--acc);border:none;color:#000;border-radius:6px;padding:5px 10px;cursor:pointer;font-size:var(--text-sm);transition:.12s}
.chat-send:hover{opacity:.85}
/* ── DARK THEME ──────────────────────────────────────────────── */
[data-theme="dark"]{
  --bg:#0f1119;--surf:#1a1d2a;--surf2:#1e2130;--surf3:#252840;
  --bdr:#2e3148;--bdr2:#3a3f54;--txt:#e2e4ea;--mut:#94a3b8;--mut2:#6b7585;
  --acc:#f59e0b;--blue:#3b82f6;--green:#22c55e;--red:#ef4444;--purple:#a78bfa;
  --dk:#0f1119;--dk2:#12141e;--dk3:#1a1d2a;
  --shadow-sm:0 1px 3px rgba(0,0,0,.2),0 1px 2px rgba(0,0,0,.14);
  --shadow-md:0 4px 12px rgba(0,0,0,.28),0 2px 4px rgba(0,0,0,.18);
  --shadow-lg:0 8px 32px rgba(0,0,0,.38),0 4px 8px rgba(0,0,0,.22);
}
/* Glassmorphism panels adapt to dark */
[data-theme="dark"] .rm-icon{background:rgba(30,33,48,.55);border-color:rgba(255,255,255,.12);box-shadow:0 4px 12px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.08)}
[data-theme="dark"] .rm-icon:hover{background:rgba(30,33,48,.72);box-shadow:0 8px 32px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.12)}
[data-theme="dark"] .rm-lbl{background:rgba(30,33,48,.7);border-color:rgba(255,255,255,.1)}
[data-theme="dark"] .rm-panel{background:rgba(26,29,42,.88);border-color:rgba(255,255,255,.1)}
[data-theme="dark"] .rm-row{border-bottom-color:rgba(255,255,255,.05)}
/* Header & sidebar already dark — keep consistent */
[data-theme="dark"] header{background:linear-gradient(180deg,#0a0c14,#0d0f18);border-bottom-color:rgba(255,255,255,.04)}
[data-theme="dark"] .ltb{background:linear-gradient(180deg,#0a0c14,#0d0f18);border-right-color:rgba(255,255,255,.04)}
[data-theme="dark"] .sbar{background:linear-gradient(180deg,#0a0c14,#0d0f18);border-top-color:rgba(255,255,255,.04)}
/* Theme toggle button */
.theme-btn{width:36px;height:36px;border-radius:8px;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;color:rgba(255,255,255,.45);transition:.15s;flex-shrink:0}
.theme-btn:hover{background:rgba(255,255,255,.1);color:#fff}

/* ═══ VIEW MODE TOGGLE ═══════════════════════════════════════ */
.vm-toggle{display:flex;background:rgba(255,255,255,.06);border-radius:var(--r-lg);padding:3px;gap:2px}
.vm-btn{display:flex;align-items:center;gap:6px;font-family:'DM Mono',monospace;font-size:var(--text-sm);
  padding:5px 14px;border-radius:var(--r-md);border:none;cursor:pointer;background:transparent;
  color:rgba(255,255,255,.45);transition:all .15s;white-space:nowrap;letter-spacing:.02em}
.vm-btn:hover{color:rgba(255,255,255,.85);background:rgba(255,255,255,.06)}
.vm-btn:active{transform:scale(.96)}
/* Active state needs to actually win the visual hierarchy on the row.
   Previously the .15 alpha tint was nearly invisible at first glance. */
.vm-btn.active{background:rgba(245,158,11,.28);color:#fff;font-weight:700;box-shadow:0 1px 4px rgba(245,158,11,.25),inset 0 0 0 1px rgba(245,158,11,.45)}
.vm-btn svg{flex-shrink:0}
.h-vsep{width:1px;height:20px;background:rgba(255,255,255,.12);margin:0 4px;align-self:center;flex-shrink:0}
.hb{font-family:'DM Mono',monospace;font-size:var(--text-xs);padding:5px 12px;border-radius:5px;border:none;cursor:pointer;white-space:nowrap;color:rgba(255,255,255,.7);background:transparent;transition:.15s}
.hb:hover{background:rgba(255,255,255,.08);color:#fff}
.hb-acc{background:rgba(245,158,11,.15);color:var(--acc);font-weight:700}
.hb-acc:hover{background:rgba(245,158,11,.25)}

/* ═══ GANTT VIEW ═════════════════════════════════════════════ */
.gantt-view{position:absolute;inset:0;display:flex;background:var(--surf);overflow:hidden}
.gantt-table{width:320px;min-width:160px;overflow-y:auto;overflow-x:hidden;border-right:1px solid var(--bdr);flex-shrink:0}
/* Gantt link mode button */
.glink-btn{position:absolute;top:6px;right:8px;z-index:10;font-family:'DM Mono',monospace;font-size:var(--text-xs);padding:4px 10px;border-radius:var(--r-md);border:1px solid var(--bdr2);background:var(--surf);color:var(--txt);cursor:pointer;display:flex;align-items:center;gap:5px;transition:.15s;box-shadow:var(--shadow-sm)}
.glink-btn:hover{border-color:var(--acc);color:var(--acc)}
.glink-btn svg{width:14px;height:14px}
.glink-btn.act{background:rgba(245,158,11,.15);color:var(--acc);border-color:var(--acc)}

.gantt-divider{width:5px;cursor:ew-resize;background:var(--surf2);border-left:1px solid var(--bdr);
  border-right:1px solid var(--bdr);flex-shrink:0;transition:background .15s;z-index:2}
.gantt-divider:hover,.gantt-divider.active{background:var(--acc)}
.gantt-timeline{flex:1;position:relative;overflow:hidden}
.gantt-timeline canvas{display:block}
.gt{width:100%;border-collapse:collapse;table-layout:fixed}
.gt-h{position:sticky;top:0;z-index:3;background:var(--surf2);font-family:'DM Mono',monospace;
  font-size:var(--text-xs);font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--mut);
  height:44px;padding:0 8px;text-align:left;border-bottom:2px solid var(--bdr);white-space:nowrap;user-select:none;vertical-align:middle}
/* Wider Name now that Kosten + Ressourcen moved to the detail panel.
   (UI_REVIEW #6/#7) */
.gt-name{width:60%}.gt-date{width:17%}.gt-pct{width:6%}
.gt td{padding:8px 8px;font-size:var(--text-sm);color:var(--txt);border-bottom:1px solid var(--bdr);cursor:pointer;
  transition:background .1s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:36px}
.gt tr:hover td{background:var(--surf3)}
.gt tr.sel td{background:rgba(245,158,11,.14);border-left:3px solid var(--acc)}
.gt tr.sel:hover td{background:rgba(245,158,11,.18)}
.gt-cat-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:5px;vertical-align:middle;flex-shrink:0}
.gt-pbar{height:4px;background:var(--surf3);border-radius:2px;overflow:hidden;width:100%;min-width:24px}
.gt-pfill{height:100%;border-radius:2px}

/* ═══ LIST VIEW ══════════════════════════════════════════════ */
.list-view{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--surf);overflow:hidden}
.list-scroll{flex:1;overflow:auto}
.lt{width:100%;border-collapse:collapse;table-layout:fixed;min-width:800px}
/* Explicit column widths so Name gets the budget when the right rail
   shrinks the available width. (UI_REVIEW #6) — R15: Spalte 1 ist jetzt
   die Auswahl-Checkbox (Bulk-Aktionen), alles rückt eins nach rechts. */
.lt th:nth-child(1), .lt td:nth-child(1){width:30px}  /* Auswahl */
.lt th:nth-child(2), .lt td:nth-child(2){width:21%}   /* Name */
.lt th:nth-child(3), .lt td:nth-child(3){width:14%}   /* Kategorie */
.lt th:nth-child(4), .lt td:nth-child(4){width:6%}    /* Von km */
.lt th:nth-child(5), .lt td:nth-child(5){width:6%}    /* Bis km */
.lt th:nth-child(6), .lt td:nth-child(6){width:9%}    /* Start */
.lt th:nth-child(7), .lt td:nth-child(7){width:9%}    /* Ende */
.lt th:nth-child(8), .lt td:nth-child(8){width:12%}   /* Fortschritt */
.lt th:nth-child(9), .lt td:nth-child(9){width:8%}    /* Kosten */
.lt th:nth-child(10), .lt td:nth-child(10){width:10%} /* Ressourcen */
.lt th:nth-child(11), .lt td:nth-child(11){width:2%}  /* context */
/* Kosten-Summenzeile (P3, R16) — sticky am Listenende */
.lt-sum td{position:sticky;bottom:0;z-index:2;background:var(--surf2);border-top:2px solid var(--bdr);padding:7px 10px;font-family:'DM Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--mut)}
.lt-sum td:nth-child(4){color:var(--txt)}
.lt-check{text-align:center}
.lt-check input{accent-color:var(--acc);cursor:pointer;margin:0;vertical-align:middle}
/* Bulk-Aktionsleiste über der Liste (ab 2 ausgewählten Vorgängen) */
.list-bulkbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:7px 12px;background:var(--surf2);border-bottom:1px solid var(--acc);font-size:var(--text-sm);color:var(--txt)}
.list-bulkbar .lb-count{font-family:'DM Mono',monospace;font-size:11px;font-weight:700;color:var(--acc);white-space:nowrap}
.list-bulkbar .lb-grp{display:inline-flex;align-items:center;gap:5px}
.list-bulkbar label{font-family:'DM Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--mut)}
.list-bulkbar select{background:var(--surf);border:1px solid var(--bdr);border-radius:4px;padding:3px 6px;font-family:'Syne',sans-serif;font-size:var(--text-xs);color:var(--txt);outline:none;cursor:pointer}
.list-bulkbar .lb-shift{background:var(--surf);border:1px solid var(--bdr);border-radius:4px;padding:3px 8px;font-family:'DM Mono',monospace;font-size:10px;color:var(--txt);cursor:pointer}
.list-bulkbar .lb-shift:hover{border-color:var(--acc);color:var(--acc)}
.list-bulkbar .lb-sp{flex:1}
.list-bulkbar .lb-del{background:transparent;border:1px solid rgba(239,68,68,.45);border-radius:4px;padding:3px 10px;font-family:'Syne',sans-serif;font-size:var(--text-xs);font-weight:700;color:var(--red,#ef4444);cursor:pointer}
.list-bulkbar .lb-del:hover{background:rgba(239,68,68,.12)}
.list-bulkbar .lb-clear{background:transparent;border:none;color:var(--mut);font-size:12px;cursor:pointer;padding:3px 6px}
.list-bulkbar .lb-clear:hover{color:var(--txt)}
.lt-h{position:sticky;top:0;z-index:3;background:var(--surf2);font-family:'DM Mono',monospace;
  font-size:var(--text-xs);font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--mut);
  padding:8px 10px;text-align:left;border-bottom:2px solid var(--bdr);white-space:nowrap;user-select:none}
.lt-sortable{cursor:pointer}.lt-sortable:hover{color:var(--txt)}
.lt-arr{font-size:8px;margin-left:2px;opacity:.5}
.lt td{padding:7px 10px;font-size:var(--text-sm);color:var(--txt);border-bottom:1px solid var(--bdr);cursor:pointer;
  transition:background .1s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Row hover/select states need to actually feel like states.
   Previous: surf2 (barely a tint), .08 amber (very faint). */
.lt tr:hover td{background:var(--surf3)}
.lt tr.sel td{background:rgba(245,158,11,.14);box-shadow:inset 3px 0 0 var(--acc)}
.lt tr.sel:hover td{background:rgba(245,158,11,.18)}
.lt-pbar{height:4px;background:var(--surf3);border-radius:2px;overflow:hidden;width:60px;display:inline-block;vertical-align:middle;margin-right:5px}
.lt-pfill{height:100%;border-radius:2px;display:block}
.lt-res{font-family:'DM Mono',monospace;font-size:9px;color:var(--purple)}
.lt-ctx{width:32px;text-align:center}
.lt-ctx-hdr{width:32px}
.ctx-btn{background:none;border:none;cursor:pointer;color:var(--mut);font-size:16px;padding:4px 8px;border-radius:var(--r-sm)}
.ctx-btn:hover{background:var(--surf3);color:var(--txt)}
.lt-ctx-menu{position:fixed;background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);z-index:500;min-width:160px;padding:4px 0;animation:fadeIn .12s ease}
.lt-ctx-menu-item{display:block;width:100%;padding:7px 14px;border:none;background:none;text-align:left;font-family:'Syne',sans-serif;font-size:var(--text-base);color:var(--txt);cursor:pointer;transition:background .1s}
.lt-ctx-menu-item:hover{background:var(--surf2)}

/* ═══ WHITEBOARD VIEW ════════════════════════════════════════ */
/* ═══ KANBAN BOARD (replaces whiteboard) ═══════════════════════ */
.kb-view{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--bg);overflow:hidden}
.kb-cols{display:flex;flex:1;gap:14px;padding:16px;overflow-x:auto;overflow-y:hidden}
.kb-col{flex:1;min-width:220px;display:flex;flex-direction:column;background:var(--surf2);border-radius:var(--r-xl);border:1px solid var(--bdr);overflow:hidden}
.kb-col-hdr{display:flex;align-items:center;gap:8px;padding:12px 14px;font-family:'Syne',sans-serif;font-size:var(--text-md);font-weight:700;color:var(--txt);border-bottom:1px solid var(--bdr);flex-shrink:0;position:sticky;top:0;z-index:2;background:var(--surf2)}
.kb-col-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.kb-col-cnt{font-family:'DM Mono',monospace;font-size:var(--text-xs);font-weight:600;color:var(--mut);margin-left:auto;background:var(--surf3);padding:1px 7px;border-radius:10px}
.kb-col-body{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:8px;min-height:60px}

/* Kanban cards */
.kb-card{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r-lg);padding:10px 12px;cursor:grab;transition:all .15s;box-shadow:var(--shadow-sm);position:relative}
.kb-card:hover{border-color:var(--acc);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.kb-card:active{cursor:grabbing;box-shadow:var(--shadow-lg);transform:scale(.98)}
.kb-card.dragging{opacity:.5}
.kb-card-color{position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--r-lg) var(--r-lg) 0 0}
.kb-card-name{font-family:'Syne',sans-serif;font-size:var(--text-base);font-weight:600;color:var(--txt);margin-bottom:4px;line-height:1.3}
.kb-card-meta{display:flex;gap:8px;font-family:'DM Mono',monospace;font-size:9px;color:var(--mut);flex-wrap:wrap}
.kb-card-prog{margin-top:6px;height:3px;background:var(--surf3);border-radius:2px;overflow:hidden}
.kb-card-prog-fill{height:100%;border-radius:2px;transition:width .3s}
.kb-card-pct{font-family:'DM Mono',monospace;font-size:9px;color:var(--mut);margin-top:3px;text-align:right}
.kb-card-res{font-size:var(--text-xs);color:var(--mut2);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Drop target highlight */
.kb-col-body.drag-over{background:rgba(245,158,11,.06);border:2px dashed rgba(245,158,11,.3);border-radius:var(--r-lg)}

.kb-empty{padding:20px;text-align:center;color:var(--mut);font-size:var(--text-sm);font-style:italic}
.kb-card-grip{color:var(--mut);font-size:14px;margin-right:6px;cursor:grab;user-select:none;opacity:.4;transition:opacity .15s}
.kb-card:hover .kb-card-grip{opacity:.8}

[data-theme="dark"] .kb-col{background:var(--surf);border-color:var(--bdr)}
[data-theme="dark"] .kb-card{border-color:var(--bdr)}

/* PRINT */
@media print{
  header,.ltb,.rcol,.sbar,.tip,.mo,.pop,.tool-ind,.snap-badge,.selbadge,.vcmp-badge,.vcmp-panel,.wb-toolbar{display:none!important}
  .body{display:block!important}
  .chart-area{width:100%!important;height:100vh!important}
  canvas{width:100%!important;height:100%!important}
  .gantt-view,.list-view,.kb-view{position:static!important;overflow:visible!important}
  .gantt-timeline canvas{width:100%!important}
  body{overflow:visible!important}
}

/* ── Radial Context Menu ──────────────────────────────────── */
.radial-menu{position:fixed;z-index:900;pointer-events:none}
.radial-menu.open{pointer-events:auto}

.rm-dot{
  position:absolute;width:8px;height:8px;border-radius:50%;
  background:var(--acc);box-shadow:0 0 10px rgba(245,158,11,.4);
  transform:translate(-4px,-4px) scale(0);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.radial-menu.open .rm-dot{transform:translate(-4px,-4px) scale(1)}

.rm-icon{
  position:absolute;width:58px;height:58px;border-radius:50%;
  background:rgba(255,255,255,.20);
  backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 4px 12px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.04),0 0 0 1px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.55);
  display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer;
  transform:scale(0) translate(0,0);opacity:0;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .2s ease,box-shadow .2s,background .15s;
  pointer-events:none;will-change:transform,opacity}
.rm-icon.visible{opacity:1;pointer-events:auto}
.rm-icon:hover{background:rgba(255,255,255,.36);box-shadow:0 8px 32px rgba(0,0,0,.12),0 4px 8px rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.05),inset 0 1px 0 rgba(255,255,255,.7)}
.rm-icon.active{background:var(--acc);color:#fff;box-shadow:0 4px 16px rgba(245,158,11,.35),0 4px 12px rgba(0,0,0,.08)}

/* Frosted-glass pill label, always horizontal; position overridden per-icon in JS */
.rm-lbl{
  position:absolute;left:72px;top:50%;transform:translateY(-50%);
  font-size:var(--text-sm);font-weight:700;font-family:'Syne',sans-serif;color:var(--txt);
  white-space:nowrap;opacity:0;transition:opacity .18s;pointer-events:none;letter-spacing:.3px;
  background:rgba(255,255,255,.45);
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(255,255,255,.35);border-radius:10px;
  padding:5px 12px;box-shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04)}
.rm-icon:hover .rm-lbl{opacity:1}
.rm-icon.active .rm-lbl{opacity:0!important;pointer-events:none}

/* Submenu panel */
.rm-panel{
  position:absolute;min-width:240px;max-width:300px;
  background:rgba(255,255,255,.80);
  backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);
  border:1px solid rgba(255,255,255,.48);border-radius:14px;
  box-shadow:0 8px 32px rgba(0,0,0,.11);padding:14px;
  opacity:0;transform:scale(0.85);transform-origin:left center;
  transition:opacity .18s,transform .22s cubic-bezier(.34,1.56,.64,1);pointer-events:none}
.rm-panel.open{opacity:1;transform:scale(1);pointer-events:auto}
.rm-panel-title{font-size:var(--text-xs);font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--mut);margin-bottom:9px;font-family:'DM Mono',monospace}
.rm-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:var(--text-sm);border-bottom:1px solid rgba(0,0,0,.04)}
.rm-row:last-child{border-bottom:none}
.rm-lbl-s{font-family:'DM Mono',monospace;font-size:var(--text-xs);color:var(--mut);min-width:60px}
.rm-val{font-weight:600;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}
.rm-prog-mini{width:100%;height:5px;background:var(--surf3);border-radius:3px;margin:8px 0 6px;overflow:hidden}
.rm-prog-fill{height:100%;border-radius:3px;background:var(--acc);transition:width .3s}
.rm-prog-btns{display:flex;gap:4px}
.rm-prog-btn{flex:1;padding:5px 0;font-size:var(--text-xs);font-weight:700;border:1px solid var(--bdr);border-radius:6px;background:var(--surf2);cursor:pointer;text-align:center;font-family:'DM Mono',monospace;color:var(--txt);transition:all .12s}
.rm-prog-btn:hover,.rm-prog-btn.active{background:var(--acc);color:#fff;border-color:var(--acc)}
.rm-ta{width:100%;border:1px solid var(--bdr);border-radius:8px;padding:8px;font-family:'Syne',sans-serif;font-size:var(--text-sm);background:var(--surf);color:var(--txt);resize:none;outline:none;box-sizing:border-box;transition:border-color .15s}
.rm-ta:focus{border-color:var(--acc)}
.rm-send{display:block;width:100%;margin-top:6px;padding:7px;border:none;border-radius:8px;background:var(--acc);color:#fff;font-family:'Syne',sans-serif;font-size:var(--text-sm);font-weight:700;cursor:pointer;transition:background .12s}
.rm-send:hover{background:#d97706}
.rm-att-item{display:flex;align-items:center;gap:7px;padding:5px 7px;border-radius:7px;background:var(--surf2);margin-bottom:4px;font-size:var(--text-sm)}
.rm-att-add{width:100%;margin-top:6px;padding:7px;border:1.5px dashed var(--bdr2);border-radius:8px;background:none;color:var(--mut);font-family:'Syne',sans-serif;font-size:var(--text-sm);cursor:pointer;transition:all .15s}
.rm-att-add:hover{border-color:var(--acc);color:var(--acc)}
.rm-del-msg{font-size:var(--text-base);margin-bottom:10px;line-height:1.5}
.rm-del-btn{width:100%;padding:7px;border:none;border-radius:8px;background:var(--red);color:#fff;font-family:'Syne',sans-serif;font-size:var(--text-base);font-weight:700;cursor:pointer;transition:opacity .12s}
.rm-del-btn:hover{opacity:.85}
/* Edit form inside panel */
.rm-edit-form{display:flex;flex-direction:column;gap:2px}
.rm-edit-lbl{font-family:'DM Mono',monospace;font-size:9px;font-weight:600;color:var(--mut);text-transform:uppercase;letter-spacing:.8px;margin-top:6px}
.rm-edit-in{width:100%;padding:7px 10px;border:1px solid var(--bdr);border-radius:8px;font-family:'Syne',sans-serif;font-size:var(--text-sm);background:var(--surf);outline:none;transition:border-color .15s;color:var(--txt);box-sizing:border-box}
.rm-edit-in:focus{border-color:var(--acc)}
/* Upload drop zone */
.rm-drop-zone{border:2px dashed var(--bdr2);border-radius:12px;padding:20px 16px;text-align:center;margin-top:8px;transition:all .2s;cursor:pointer}
.rm-drop-zone:hover,.rm-drop-zone.drag-over{border-color:var(--acc);background:rgba(245,158,11,.06)}
/* ── AI chat ──────────────────────────────────────────────── */
@keyframes rmMsgIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.rm-chat-msgs{max-height:180px;overflow-y:auto;margin-bottom:8px;scroll-behavior:smooth}
.rm-chat-ai{background:var(--surf2);border-radius:10px 10px 10px 4px;padding:7px 10px;font-size:var(--text-sm);line-height:1.5;margin-bottom:4px;max-width:92%;animation:rmMsgIn .18s ease}
.rm-chat-user{background:var(--acc);color:#fff;border-radius:10px 10px 4px 10px;padding:7px 10px;font-size:var(--text-sm);line-height:1.5;margin-bottom:4px;max-width:92%;margin-left:auto;animation:rmMsgIn .18s ease}
.rm-quick-ask{padding:4px 10px;border-radius:12px;border:1px solid var(--bdr);background:var(--surf);font-family:'DM Mono',monospace;font-size:9px;cursor:pointer;transition:all .12s;display:inline-block}
.rm-quick-ask:hover{border-color:var(--acc);color:var(--acc)}
/* ── AI typing indicator ──────────────────────────────────── */
@keyframes rmDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}
.rm-typing{display:flex;align-items:center;gap:4px;padding:10px 12px}
.rm-typing span{width:5px;height:5px;border-radius:50%;background:var(--mut);animation:rmDot 1.2s infinite}
.rm-typing span:nth-child(2){animation-delay:.2s}
.rm-typing span:nth-child(3){animation-delay:.4s}
/* ── Send button ──────────────────────────────────────────── */
.rm-send{transition:background .12s,transform .1s}
.rm-send:hover{background:#d97706;transform:scale(1.015)}
/* ── Empty state (plans / photos) ────────────────────────── */
.rm-empty{text-align:center;padding:14px 8px;color:var(--mut);font-size:var(--text-sm)}
.rm-empty-icon{font-size:var(--text-2xl);margin-bottom:4px}
/* ── Keyboard-focused icon: amber ring ───────────────────── */
.rm-icon.focused{box-shadow:0 0 0 3px rgba(245,158,11,.6),0 4px 12px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.55)}
/* ── Attachment / progress / panel scrollbar ─────────────── */
.rm-att-item{transition:background .12s}
.rm-att-item:hover{background:var(--surf3)}
.rm-prog-btn{transition:background .1s,color .1s,border-color .1s,transform .1s}
.rm-prog-btn:hover:not(.active){transform:scale(1.04)}
.rm-panel{max-height:min(480px,70vh);overflow-y:auto}
.rm-panel::-webkit-scrollbar{width:4px}
.rm-panel::-webkit-scrollbar-track{background:transparent}
.rm-panel::-webkit-scrollbar-thumb{background:var(--bdr2);border-radius:4px}

/* ── Site Plan Popover ─────────────────────────────────────── */
.sp-mode-btn.sp-active{background:rgba(245,158,11,.12);color:var(--acc);border-color:rgba(245,158,11,.3);font-weight:700}
.sp-el-item{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:4px 6px;border-radius:5px;font-size:var(--text-sm);cursor:pointer;transition:background .1s}
.sp-el-item:hover{background:var(--surf2)}
.sp-el-item.active{background:rgba(245,158,11,.08);border-left:2px solid var(--acc)}
.sp-el-rng{font-family:'DM Mono',monospace;font-size:9px;color:var(--mut);white-space:nowrap}
.sp-el-del{background:none;border:none;color:var(--red);cursor:pointer;font-size:14px;padding:0 2px;opacity:.5;transition:opacity .12s;line-height:1}
.sp-el-del:hover{opacity:1}

/* ── WZD Cashflow Strip Divider ─────────────────────────────── */
.wcf-divider{position:absolute;width:5px;cursor:ew-resize;background:transparent;
  z-index:5;transition:background .15s;display:none}
.wcf-divider:hover,.wcf-divider.active{background:var(--acc)}

/* ── Gantt Cashflow Panel ──────────────────────────────────── */
.gantt-right{flex:1;display:flex;flex-direction:column;overflow:hidden}
.gcf-divider{height:5px;cursor:ns-resize;background:var(--surf2);border-top:1px solid var(--bdr);
  border-bottom:1px solid var(--bdr);flex-shrink:0;transition:background .15s}
.gcf-divider:hover,.gcf-divider.active{background:var(--acc)}
.gcf-panel{height:140px;flex-shrink:0;position:relative;overflow:hidden}
.gcf-panel canvas{display:block;width:100%;height:100%}

/* ── Cashflow KPI card (right panel) ─────────────────────── */
.cf-kpis{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
.cf-kpi{background:var(--surf2);border:1px solid var(--bdr);border-radius:6px;padding:7px 9px}
.cf-kpi-lbl{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--mut);margin-bottom:2px}
.cf-kpi-val{font-size:var(--text-md);font-weight:700;font-family:'DM Mono',monospace;color:var(--acc)}
.cf-cat-bars{display:flex;flex-direction:column;gap:4px}
.cf-cat-row{display:flex;align-items:center;gap:6px;font-size:var(--text-xs)}
.cf-cat-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0}
.cf-cat-name{flex:1;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-cat-val{font-family:'DM Mono',monospace;font-size:var(--text-xs);color:var(--mut);white-space:nowrap}
.cf-cat-bar-wrap{width:48px;height:6px;background:var(--surf3);border-radius:3px;overflow:hidden;flex-shrink:0}
.cf-cat-bar-fill{height:100%;border-radius:3px;transition:width .3s}
/* ── Dependency UI ────────────────────────────────────────── */
.dep-row{display:flex;align-items:center;gap:5px;padding:3px 0;font-size:var(--text-sm);border-bottom:1px solid var(--surf3)}
.dep-badge{font-family:'DM Mono',monospace;font-size:9px;font-weight:700;padding:1px 5px;border-radius:3px;flex-shrink:0;letter-spacing:.5px}
.dep-badge-fs{background:#dbeafe;color:#1e40af}.dep-badge-ss{background:#fef3c7;color:#92400e}
.dep-badge-ff{background:#ede9fe;color:#5b21b6}.dep-badge-sf{background:#d1fae5;color:#065f46}
[data-theme="dark"] .dep-badge-fs{background:#1e3a5f;color:#93c5fd}
[data-theme="dark"] .dep-badge-ss{background:#78350f;color:#fde68a}
[data-theme="dark"] .dep-badge-ff{background:#3b0764;color:#c4b5fd}
[data-theme="dark"] .dep-badge-sf{background:#064e3b;color:#6ee7b7}
.dep-dir{font-size:9px;color:var(--mut);flex-shrink:0}
.dep-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--txt);cursor:pointer}
.dep-name:hover{color:var(--acc);text-decoration:underline}
.dep-rm{font-size:var(--text-base);color:var(--mut);cursor:pointer;padding:0 2px;flex-shrink:0;line-height:1}
.dep-rm:hover{color:var(--red,#ef4444)}
.dep-empty{font-size:var(--text-xs);color:var(--mut);padding:4px 0}
/* ── Gantt cost column ─────────────────────────────────────── */
.gt-h.gt-cost{width:60px;text-align:right;font-family:'DM Mono',monospace;font-size:var(--text-xs)}

/* ═══════════════════════════════════════════════════════════════
   DOCUMENT UPLOAD MODAL
   ═══════════════════════════════════════════════════════════════ */
.doc-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9999;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}
.doc-modal-overlay.open{opacity:1}
.doc-modal{background:var(--surf);border:1px solid var(--bdr);border-radius:10px;width:420px;max-width:92vw;max-height:85vh;overflow-y:auto;box-shadow:0 12px 40px rgba(0,0,0,.4);transform:scale(.95);transition:transform .2s}
.doc-modal-overlay.open .doc-modal{transform:scale(1)}
.doc-modal-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--bdr);font-size:var(--text-md);font-weight:700;color:var(--txt)}
.doc-modal-close{font-size:var(--text-xl);cursor:pointer;color:var(--mut);line-height:1;padding:0 4px}
.doc-modal-close:hover{color:var(--txt)}
.doc-modal-body{padding:12px 16px}
.doc-field{margin-bottom:10px}
.doc-field label{display:block;font-size:var(--text-xs);font-weight:600;color:var(--mut);margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}
.doc-file-row{display:flex;align-items:center;gap:8px}
.doc-file-name{flex:1;font-size:var(--text-sm);color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--surf2);padding:6px 8px;border-radius:4px;border:1px solid var(--bdr)}
.doc-file-btn{font-size:var(--text-xs);padding:6px 10px;background:var(--surf2);border:1px solid var(--bdr);border-radius:4px;color:var(--txt);cursor:pointer;white-space:nowrap}
.doc-file-btn:hover{background:var(--acc);color:#fff;border-color:var(--acc)}
.doc-links-section{display:flex;flex-direction:column;gap:8px}
.doc-link-group{background:var(--surf2);border:1px solid var(--bdr);border-radius:6px;padding:6px 8px}
.doc-link-title{font-size:var(--text-xs);font-weight:600;color:var(--mut);margin-bottom:4px}
.doc-checkbox-list{max-height:120px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.doc-cb{display:flex;align-items:center;gap:5px;font-size:var(--text-sm);color:var(--txt);cursor:pointer;padding:2px 0}
.doc-cb input[type="checkbox"]{margin:0;accent-color:var(--acc)}
.doc-cb-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.doc-upload-btn{width:100%;padding:10px;background:var(--acc);color:#fff;border:none;border-radius:6px;font-size:var(--text-base);font-weight:600;cursor:pointer;margin-top:4px;font-family:inherit}
.doc-upload-btn:hover{filter:brightness(1.1)}
.doc-upload-btn:disabled{opacity:.5;cursor:not-allowed}

/* ═══════════════════════════════════════════════════════════════
   DOCUMENT TYPE BADGE
   ═══════════════════════════════════════════════════════════════ */
.doc-type-badge{display:inline-block;font-size:9px;padding:1px 5px;border-radius:3px;background:var(--acc);color:#fff;opacity:.8;font-weight:600;white-space:nowrap}
.doc-link-badge{display:inline-block;font-size:9px;padding:1px 4px;border-radius:3px;background:var(--surf2);border:1px solid var(--bdr);color:var(--mut);margin-left:4px}

/* ═══════════════════════════════════════════════════════════════
   DOCUMENT BROWSER PANEL
   ═══════════════════════════════════════════════════════════════ */
.doc-browser{position:fixed;top:44px;right:0;bottom:0;width:360px;max-width:90vw;background:var(--surf);border-left:1px solid var(--bdr);z-index:800;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .2s;box-shadow:-4px 0 20px rgba(0,0,0,.15)}
.doc-browser.open{transform:translateX(0)}
.doc-browser-header{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--bdr);font-size:var(--text-base);font-weight:700;color:var(--txt)}
.doc-browser-header svg{width:16px;height:16px}
.doc-browser-count{flex:1;text-align:right;font-size:var(--text-xs);font-weight:400;color:var(--mut);font-family:'DM Mono',monospace}
.doc-browser-filters{display:flex;gap:5px;padding:8px 12px;border-bottom:1px solid var(--bdr);flex-wrap:wrap}
.doc-browser-search{flex:1;min-width:100px}
.doc-browser-search input{width:100%;font-size:var(--text-xs)}
.doc-browser-list{flex:1;overflow-y:auto;padding:6px 0}
.doc-browser-item{display:flex;align-items:flex-start;gap:8px;padding:8px 12px;border-bottom:1px solid var(--bdr);transition:background .15s}
.doc-browser-item:hover{background:var(--surf2)}
.doc-browser-icon{flex-shrink:0;color:var(--acc);margin-top:2px}
.doc-browser-icon svg{width:16px;height:16px}
.doc-browser-info{flex:1;min-width:0;overflow:hidden}
.doc-browser-name{font-size:var(--text-sm);font-weight:600;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-browser-meta{display:flex;gap:6px;flex-wrap:wrap;font-size:9px;color:var(--mut);font-family:'DM Mono',monospace;margin-top:2px;align-items:center}
.doc-browser-desc{font-size:var(--text-xs);color:var(--mut2,var(--mut));margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-browser-links{font-size:9px;color:var(--mut);margin-top:2px}
.doc-browser-rm{font-size:14px;color:var(--mut);cursor:pointer;padding:0 3px;flex-shrink:0;line-height:1}
.doc-browser-rm:hover{color:var(--red,#ef4444)}
.doc-browser-empty{text-align:center;padding:30px 12px;font-size:var(--text-sm);color:var(--mut)}

/* ═══ TOAST NOTIFICATION ═════════════════════════════════════ */
.toast{position:fixed;bottom:40px;left:50%;transform:translateX(-50%) translateY(20px);background:rgba(30,33,48,.92);color:#fff;font-family:'DM Mono',monospace;font-size:var(--text-sm);padding:8px 20px;border-radius:20px;z-index:600;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--shadow-md)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ═══ GLOBAL INTERACTION STATES ═══════════════════════════════ */
/* Focus-visible ring for keyboard navigation */
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:var(--r-sm)}
button:focus-visible,a:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* Reduced motion preference */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}
}

/* Global button press feedback */
.sbtn:active,.hb:active,.pop-btn:active{transform:scale(.97)}

/* ═══════════════════════════════════════════════════════════════
   ROUTER — PAGE SYSTEM
   ═══════════════════════════════════════════════════════════════ */
.page{min-height:100vh}
#page-app{display:flex;flex-direction:column;height:100vh;overflow:hidden}
#page-app.page{min-height:0;height:100vh}
/* html,body are overflow:hidden (the app screen owns the viewport). The
   login + projects screens are taller than the viewport, so they must scroll
   INTERNALLY (otherwise their content is clipped and unreachable). */
#page-login,
#page-projects{height:100vh;overflow-y:auto;overflow-x:hidden}
#csm-projects-host{min-height:100%}

/* ═══ LOGIN PAGE ════════════════════════════════════════════════ */
.login-wrapper{display:flex;height:100vh;background:#0F1221}

/* Left branding side */
.login-brand-side{flex:1;display:none;flex-direction:column;justify-content:center;padding:60px 80px;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0F1221 100%);position:relative;overflow:hidden}
@media(min-width:900px){.login-brand-side{display:flex}}
.login-brand-title{font-family:'Syne',sans-serif;font-size:42px;font-weight:800;color:#fff;margin-bottom:12px}
.login-brand-accent{width:180px;height:4px;background:var(--acc);border-radius:2px;margin-bottom:16px}
.login-brand-tagline{font-size:var(--text-lg);color:rgba(255,255,255,.5);line-height:1.6;max-width:280px}
.login-dots{position:absolute;bottom:60px;left:80px;display:grid;grid-template-columns:repeat(8,30px);grid-template-rows:repeat(6,30px);gap:0}
.login-dots span{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.1)}

/* Right form side */
.login-form-side{flex:1;display:flex;align-items:center;justify-content:center;padding:24px}

/* Glass card */
.login-card{width:420px;max-width:100%;padding:48px;background:rgba(30,33,48,.6);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.3);animation:fadeIn .35s ease}
.login-title{font-family:'Syne',sans-serif;font-size:var(--text-2xl);font-weight:800;color:#fff;margin-bottom:6px}
.login-sub{font-size:var(--text-md);color:rgba(255,255,255,.5);margin-bottom:28px}
.login-field{margin-bottom:18px}
.login-field label{display:block;font-size:var(--text-base);font-weight:600;color:rgba(255,255,255,.7);margin-bottom:6px}
.login-field input{width:100%;padding:10px 14px;border:1px solid rgba(255,255,255,.1);border-radius:8px;font-family:'DM Mono',monospace;font-size:var(--text-md);color:#E2E8F0;background:rgba(15,18,33,.6);outline:none;transition:.15s}
.login-field input:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(245,158,11,.15)}
.login-field input::placeholder{color:rgba(255,255,255,.3)}
.login-forgot{color:var(--acc);text-decoration:none;font-size:var(--text-base);font-weight:600}.login-forgot:hover{text-decoration:underline}
.login-btn{width:100%;padding:12px;border:none;border-radius:12px;background:linear-gradient(135deg,var(--acc),#fbbf24);color:#000;font-family:'Syne',sans-serif;font-size:14px;font-weight:700;cursor:pointer;transition:.2s;box-shadow:0 2px 8px rgba(245,158,11,.25)}
.login-btn:hover{box-shadow:0 4px 16px rgba(245,158,11,.35);transform:translateY(-1px)}
.login-btn:disabled{opacity:.6;cursor:default;transform:none;box-shadow:0 2px 8px rgba(245,158,11,.25)}
.login-error{margin-top:12px;padding:10px 12px;border-radius:10px;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.35);color:#fca5a5;font-size:13px;text-align:center}
.login-error[hidden]{display:none}
/* Leere Fehler-Pille nie zeigen — das bare hidden-Attribut geht in manchen
   Rendering-Pfaden verloren; :empty deckt das robust ab. */
.login-error:empty{display:none}
.login-btn{position:relative}
.login-btn.is-loading::after{content:'';position:absolute;right:14px;top:50%;width:14px;height:14px;margin-top:-7px;border:2px solid rgba(0,0,0,.25);border-top-color:#000;border-radius:50%;animation:loginspin .7s linear infinite}
@keyframes loginspin{to{transform:rotate(360deg)}}
/* P1 (UX-Review): keine Sackgasse bei vergessenem Passwort — Konten kommen vom Admin */
.login-help{margin-top:14px;font-size:12px;line-height:1.5;color:rgba(255,255,255,.45);text-align:center}
.login-divider{height:1px;background:rgba(255,255,255,.08);margin:24px 0}
.login-footer{text-align:center;font-size:var(--text-base);color:rgba(255,255,255,.4)}
.login-footer a{color:var(--acc);font-weight:600;text-decoration:none}.login-footer a:hover{text-decoration:underline}

/* ═══ PROJECTS OVERVIEW PAGE ════════════════════════════════════ */
.proj-shell{display:flex;flex-direction:column;height:100vh;background:var(--bg)}
.proj-nav{display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:48px;background:linear-gradient(180deg,#1e2130,#1a1d2b);border-bottom:1px solid var(--dk3);flex-shrink:0}
.proj-nav-l{display:flex;align-items:center}
.proj-nav-r{display:flex;align-items:center;gap:12px}
.proj-nav-user{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border-radius:8px;cursor:pointer;transition:.15s;border:1px solid transparent}
.proj-nav-user:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1)}
.proj-nav-uname{font-family:'Syne',sans-serif;font-size:var(--text-base);font-weight:600;color:rgba(255,255,255,.75)}
.proj-nav-logout{font-size:14px;color:rgba(255,255,255,.35);margin-left:4px}
.proj-content{flex:1;overflow-y:auto;padding:32px 40px;max-width:1200px;margin:0 auto;width:100%}
.proj-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:28px}
.proj-hello{font-family:'Syne',sans-serif;font-size:24px;font-weight:800;color:var(--txt);margin-bottom:4px}
.proj-sub{font-size:var(--text-md);color:var(--mut)}
.proj-new-btn{padding:10px 20px;border:none;border-radius:8px;background:linear-gradient(135deg,var(--acc),#fbbf24);color:#000;font-family:'Syne',sans-serif;font-size:var(--text-md);font-weight:700;cursor:pointer;transition:.2s;box-shadow:0 2px 8px rgba(245,158,11,.2)}
.proj-new-btn:hover{box-shadow:0 4px 16px rgba(245,158,11,.35);transform:translateY(-1px)}

/* Project search */
.proj-search{margin-bottom:16px}
.proj-search-field{width:100%;max-width:360px;padding:8px 14px;border:1px solid var(--bdr2);border-radius:var(--r-lg);background:var(--surf2);color:var(--txt);font-size:var(--text-base);outline:none;font-family:'Syne',sans-serif;box-sizing:border-box}
.proj-search-field:focus{border-color:var(--acc)}
/* Project cards grid */
.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.proj-card{background:var(--surf);border:1px solid var(--bdr);border-radius:12px;padding:20px;cursor:pointer;transition:.2s;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.proj-card:hover{border-color:var(--acc);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.proj-card-color{position:absolute;top:0;left:0;right:0;height:6px}
.proj-card-hdr{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px;gap:8px}
.proj-card-hdr>div:first-child{flex:1;min-width:0}
.proj-card-name{font-family:'Syne',sans-serif;font-size:var(--text-lg);font-weight:700;color:var(--txt);line-height:1.3;margin-bottom:6px}
.proj-card-icon{flex-shrink:0;color:var(--mut);opacity:.5}
.proj-card-icon svg{width:22px;height:22px}
.proj-card-badge{font-family:'DM Mono',monospace;font-size:9px;font-weight:700;padding:2px 8px;border-radius:10px;flex-shrink:0;letter-spacing:.3px}
/* "Fertig" was blue, which reads as "informational/in-progress" rather
   than completion. Aligned with conventional status semantics: active=blue,
   done=green, paused=neutral gray. (UI_REVIEW #9) */
.proj-card-badge.active{background:rgba(37,99,235,.12);color:var(--blue);border:1px solid rgba(37,99,235,.25)}
.proj-card-badge.done{background:rgba(22,163,106,.14);color:var(--green);border:1px solid rgba(22,163,106,.3)}
.proj-card-badge.paused{background:rgba(148,163,184,.14);color:var(--mut);border:1px solid rgba(148,163,184,.3)}
.proj-card-desc{font-size:var(--text-base);color:var(--mut);margin-bottom:10px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.proj-card-meta{display:flex;gap:16px;font-size:var(--text-sm);color:var(--mut2);font-family:'DM Mono',monospace}
.proj-card-meta span{display:flex;align-items:center;gap:4px}
.proj-card-prog{margin-top:10px}
.proj-card-prog-bar{height:4px;background:var(--surf3);border-radius:2px;overflow:hidden}
.proj-card-prog-fill{height:100%;border-radius:2px;transition:width .3s}
.proj-card-prog-lbl{display:flex;justify-content:space-between;margin-top:5px;font-size:var(--text-xs);color:var(--mut);font-family:'DM Mono',monospace}

/* Recent activities section (compact dot-based) */
.proj-activity-section{margin-top:32px}
.proj-section-title{font-family:'Syne',sans-serif;font-size:14px;font-weight:700;color:var(--txt);margin-bottom:10px}
.proj-activity-list{background:var(--surf);border:1px solid var(--bdr);border-radius:10px;overflow:hidden;box-shadow:var(--shadow-sm)}
.proj-activity-item{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--surf3);transition:.1s}
.proj-activity-item:last-child{border-bottom:none}
.proj-activity-item:hover{background:var(--surf2)}
.proj-activity-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.proj-activity-body{flex:1;min-width:0;display:flex;align-items:baseline;gap:6px;overflow:hidden}
.proj-activity-text{font-size:11.5px;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-activity-proj{font-size:var(--text-xs);font-weight:600;white-space:nowrap;flex-shrink:0}
.proj-activity-time{font-family:'DM Mono',monospace;font-size:9.5px;color:var(--mut);flex-shrink:0;white-space:nowrap}

/* KPI stat cards (bottom, responsive) */
.proj-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px}
@media(max-width:900px){.proj-kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.proj-kpis{grid-template-columns:1fr}}
.proj-kpi{background:var(--surf);border:1px solid var(--bdr);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:space-between}
.proj-kpi-content{display:flex;flex-direction:column}
.proj-kpi-val{font-family:'DM Mono',monospace;font-size:26px;font-weight:700;color:var(--acc);line-height:1.2}
.proj-kpi-lbl{font-size:var(--text-xs);color:var(--mut);margin-top:4px;text-transform:uppercase;letter-spacing:.8px;font-weight:600}
.proj-kpi-icon{color:var(--mut);opacity:.35}
.proj-kpi-icon svg{width:24px;height:24px}

/* Account popover on projects page */
.proj-acct-pop{display:none;position:absolute;top:52px;right:24px;background:var(--surf);border:1px solid var(--bdr2);border-radius:10px;box-shadow:var(--shadow-lg);z-index:400;min-width:240px;padding:12px;animation:fadeIn .15s ease}
.proj-acct-pop.open{display:block}
.proj-acct-card{display:flex;align-items:center;gap:10px;padding-bottom:10px}
.proj-acct-name{font-size:var(--text-md);font-weight:700;color:var(--txt)}
.proj-acct-email{font-size:var(--text-sm);color:var(--mut);font-family:'DM Mono',monospace}
.proj-acct-sep{height:1px;background:var(--bdr);margin:4px 0 8px}
.proj-acct-btn{display:block;width:100%;text-align:left;padding:7px 10px;border:none;background:none;font-family:'Syne',sans-serif;font-size:var(--text-base);color:var(--txt);border-radius:6px;cursor:pointer;transition:.1s}
.proj-acct-btn:hover{background:var(--surf2)}
.proj-acct-logout{color:var(--red);margin-top:4px}
.proj-acct-logout:hover{background:rgba(220,38,38,.06)}

/* New project modal */
.proj-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:500;display:flex;align-items:center;justify-content:center;animation:fadeIn .15s ease}
.proj-modal{width:480px;max-width:92vw;background:var(--surf);border:1px solid var(--bdr2);border-radius:14px;box-shadow:var(--shadow-lg);overflow:hidden}
.proj-modal-hdr{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--bdr)}
.proj-modal-title{font-family:'Syne',sans-serif;font-size:var(--text-lg);font-weight:700;color:var(--txt)}
.proj-modal-x{background:none;border:none;font-size:20px;color:var(--mut);cursor:pointer;padding:0 4px}.proj-modal-x:hover{color:var(--txt)}
.proj-modal-body{padding:20px}
.proj-modal-field{margin-bottom:14px}
.proj-modal-field label{display:block;font-size:var(--text-sm);font-weight:600;color:var(--mut2);margin-bottom:5px;text-transform:uppercase;letter-spacing:.5px}
.proj-modal-field input{width:100%;padding:9px 12px;border:1px solid var(--bdr2);border-radius:7px;font-family:'DM Mono',monospace;font-size:var(--text-base);color:var(--txt);background:var(--surf2);outline:none;transition:.15s}
.proj-modal-field input:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(245,158,11,.1)}
.proj-modal-row{display:flex;gap:12px}
.proj-modal-row .proj-modal-field{flex:1}
.proj-modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--bdr)}
.proj-modal-cancel{padding:8px 16px;border:1px solid var(--bdr);border-radius:7px;background:var(--surf2);color:var(--txt);font-family:'Syne',sans-serif;font-size:var(--text-base);cursor:pointer;transition:.1s}
.proj-modal-cancel:hover{background:var(--surf3)}
.proj-modal-submit{padding:8px 20px;border:none;border-radius:7px;background:linear-gradient(135deg,var(--acc),#fbbf24);color:#000;font-family:'Syne',sans-serif;font-size:var(--text-base);font-weight:700;cursor:pointer;transition:.2s;box-shadow:0 2px 6px rgba(245,158,11,.2)}
.proj-modal-submit:hover{box-shadow:0 4px 12px rgba(245,158,11,.3);transform:translateY(-1px)}

/* Dark theme adjustments for projects page */
[data-theme="dark"] .proj-nav{background:linear-gradient(180deg,#0c0e16,#0f1119);border-bottom-color:#1a1d2a}
[data-theme="dark"] .proj-card{border-color:var(--bdr)}
[data-theme="dark"] .proj-kpi{border-color:var(--bdr)}
[data-theme="dark"] .proj-activity-list{border-color:var(--bdr)}
[data-theme="dark"] .proj-acct-pop{background:var(--surf);border-color:var(--bdr)}
[data-theme="dark"] .proj-modal{background:var(--surf);border-color:var(--bdr)}