/* ============================================================
   Projectbord — LeapCloud Design Suite v3 (dark / mint)
   Standalone PocketBase app: tokens mirror @timbreukelit/design-tokens.
   Brand/active/CTA = --accent (mint). Red = danger only.
   ============================================================ */
:root {
    /* ── v3 canonical tokens ───────────────────────────── */
    --bg-void:      #111111;
    --bg-surface:   #16181d;
    --bg-card:      #1a1d23;
    --bg-card-hover:#1f232a;
    --bg-elevated:  #23272f;
    --bg-glow:      rgba(6,214,160,.06);

    --accent:       #06d6a0;
    --accent-soft:  rgba(6,214,160,.12);
    --accent-line:  rgba(6,214,160,.30);

    --text-bright:  #f4f6fa;
    --text-main:    #c6ccd6;
    --text-dim:     #8b93a1;
    --text-ghost:   #5c6470;

    --border:       rgba(255,255,255,.08);
    --border-hover: rgba(255,255,255,.17);

    --glass-sidebar:rgba(18,20,25,.72);
    --glass-modal:  rgba(20,23,29,.85);

    --color-red:    #ef4444;
    --color-amber:  #f59e0b;
    --color-green:  #06d6a0;

    --t-hover:      .15s ease;
    --t-spring:     .24s cubic-bezier(.16,1,.3,1);

    --font-ui:   'Outfit', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    /* ── app aliases (existing rules + inline styles inherit v3) ── */
    --bg:      var(--bg-void);
    --surface: var(--bg-card);
    --border2: var(--border-hover);
    --t1: var(--text-bright); --t2: var(--text-main); --t3: var(--text-dim);

    /* danger semantics */
    --red: var(--color-red);
    --red-bg:  rgba(239,68,68,.12);
    --red-brd: rgba(239,68,68,.30);

    /* status tints (dark) */
    --ns-bg:rgba(255,255,255,.05); --ns-tx:#9aa3b0; --ns-dot:#6b7280;
    --ip-bg:rgba(59,130,246,.14);  --ip-tx:#7eb0ff; --ip-dot:#3b82f6;
    --rv-bg:rgba(167,139,250,.14); --rv-tx:#c4b5fd; --rv-dot:#8b5cf6;
    --dn-bg:rgba(6,214,160,.13);   --dn-tx:#34e0b4; --dn-dot:#06d6a0;
    --bl-bg:rgba(239,68,68,.13);   --bl-tx:#f98080; --bl-dot:#ef4444;

    --ch-op-bg:rgba(255,255,255,.05); --ch-op-tx:#9aa3b0; --ch-op-dot:#6b7280;
    --ch-pa-bg:rgba(245,158,11,.14);  --ch-pa-tx:#f0b760; --ch-pa-dot:#f59e0b;
    --tst-bg:rgba(167,139,250,.14);   --tst-tx:#c4b5fd;  --tst-dot:#8b5cf6;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--font-ui); background:var(--bg-void); color:var(--text-main); font-size:13px; line-height:1.5; -webkit-font-smoothing:antialiased; }

/* ── Header (topbar — glass) ─────────── */
.hdr { background:var(--glass-sidebar); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--border); height:52px; padding:0 24px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:200; }
.hdr-brand { display:flex; align-items:center; gap:10px; }
.hdr-mark { width:28px; height:28px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hdr-title { font-size:14px; font-weight:600; color:var(--text-bright); }
.hdr-title span { color:var(--text-ghost); font-weight:400; }
.hdr-right { display:flex; align-items:center; gap:8px; }

/* ── Toolbar (solid) ─────────────────── */
.toolbar { background:var(--bg-surface); border-bottom:1px solid var(--border); padding:8px 24px; display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.tlabel { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--text-ghost); margin-right:2px; white-space:nowrap; }

.search-wrap { position:relative; display:flex; align-items:center; }
.search-wrap svg { position:absolute; left:8px; color:var(--text-ghost); pointer-events:none; }
.search-in { padding:5px 8px 5px 28px; border:1px solid var(--border); border-radius:8px; font-family:var(--font-ui); font-size:12px; color:var(--text-bright); background:rgba(255,255,255,.04); backdrop-filter:blur(6px); outline:none; width:180px; transition:width var(--t-hover), border-color var(--t-hover), box-shadow var(--t-hover); }
.search-in:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); width:220px; }
.search-in::placeholder { color:var(--text-ghost); }

.chip { display:inline-flex; align-items:center; gap:4px; padding:4px 9px; border-radius:6px; border:1px solid var(--border); background:var(--bg-card); font-size:12px; font-weight:500; color:var(--text-dim); cursor:pointer; transition:border-color .12s, color .12s, background .12s; user-select:none; white-space:nowrap; }
.chip:hover { border-color:var(--border-hover); color:var(--text-bright); }
.chip.active { background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }
.chip-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.vsep { width:1px; height:16px; background:var(--border); margin:0 4px; flex-shrink:0; }

.filter-count { font-size:11px; color:var(--text-ghost); margin-left:4px; font-family:var(--font-mono); }
.clear-filter { font-size:11px; color:var(--accent); cursor:pointer; margin-left:2px; }
.clear-filter:hover { text-decoration:underline; }

/* ── Stats ───────────────────────────── */
.stats { padding:16px 28px 12px; display:flex; align-items:center; }
.scard { background:var(--bg-card); border:1px solid var(--border); border-right:none; padding:11px 18px; display:flex; align-items:baseline; gap:6px; min-width:110px; cursor:pointer; transition:background var(--t-hover); }
.scard:first-child { border-radius:8px 0 0 8px; }
.scard:last-child  { border-radius:0 8px 8px 0; border-right:1px solid var(--border); }
.scard:hover { background:var(--bg-card-hover); }
.scard.active-stat { background:var(--accent-soft); border-color:var(--accent-line); }
.scard.active-stat + .scard { border-left-color:var(--accent-line); }
.sn { font-size:22px; font-weight:700; line-height:1; color:var(--text-bright); font-family:var(--font-mono); }
.sl { font-size:11px; color:var(--text-dim); }

/* ── Board ───────────────────────────── */
.board { padding:16px 28px 60px; }
.board-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.board-info { font-size:12px; color:var(--text-dim); }
.board-actions { display:flex; gap:6px; }

/* ── Customer card (canonical accent-left) ── */
.ccard { background:var(--bg-card); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:8px; margin-bottom:12px; transition:box-shadow var(--t-hover); }
.ccard:hover { box-shadow:0 4px 12px rgba(0,0,0,.25); }
.ccard.collapsed .cbody { display:none; }

.chdr { display:flex; align-items:center; gap:10px; padding:11px 14px; cursor:pointer; user-select:none; border-bottom:1px solid var(--border); }
.ccard.collapsed .chdr { border-bottom:none; }
.chdr:hover { background:var(--bg-card-hover); }
.ctoggle { width:16px; height:16px; display:flex; align-items:center; justify-content:center; color:var(--text-ghost); font-size:10px; flex-shrink:0; transition:transform .15s; }
.ccard.collapsed .ctoggle { transform:rotate(-90deg); }

.cavatar { width:32px; height:32px; border-radius:8px; background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cname { font-size:13px; font-weight:600; color:var(--text-bright); }
.cref  { font-size:11px; color:var(--text-ghost); margin-left:2px; font-family:var(--font-mono); }

.cstatus-pills { display:flex; gap:3px; margin-left:8px; }
.cpill { display:inline-flex; align-items:center; gap:3px; padding:1px 6px; border-radius:10px; font-size:10px; font-weight:600; }

.ctabs { display:flex; align-items:center; gap:1px; margin-left:auto; margin-right:8px; background:var(--bg-void); border:1px solid var(--border); border-radius:8px; padding:2px; }
.ctab  { padding:4px 10px; border-radius:6px; font-size:12px; font-weight:500; color:var(--text-dim); cursor:pointer; transition:color .1s, background .1s; white-space:nowrap; }
.ctab:hover { color:var(--text-bright); }
.ctab.active { background:var(--bg-elevated); color:var(--text-bright); }

/* secondary / ghost button */
.cbtn { padding:5px 10px; border-radius:8px; border:1px solid var(--border); background:transparent; font-family:var(--font-ui); font-size:12px; font-weight:500; color:var(--text-dim); cursor:pointer; transition:border-color .12s, color .12s, background .12s; flex-shrink:0; }
.cbtn:hover { border-color:var(--border-hover); color:var(--text-bright); background:var(--bg-glow); }
/* primary CTA — outlined mint, hover fills (canonical) */
.cbtn-red { background:transparent; border:1px solid var(--accent); color:var(--accent); }
.cbtn-red:hover { background:var(--accent); border-color:var(--accent); color:var(--bg-void); }

.cbody { padding:16px; }

/* ── Drag-and-drop klantvolgorde ──────── */
.cdrag { color:var(--text-ghost); cursor:grab; font-size:14px; line-height:1; padding:2px 1px; margin-left:-2px; flex-shrink:0; user-select:none; transition:color .12s; }
.cdrag:hover { color:var(--accent); }
.cdrag:active { cursor:grabbing; }
.ccard.row-dragging { opacity:.45; }
.ccard.drop-before { box-shadow:inset 0 3px 0 var(--accent); }
.ccard.drop-after  { box-shadow:inset 0 -3px 0 var(--accent); }

/* ── Items tab ───────────────────────── */
.items-scroll { display:flex; align-items:stretch; gap:12px; overflow-x:auto; scrollbar-width:thin; scrollbar-color:var(--border) transparent; padding:3px 3px 6px; }
.items-scroll::-webkit-scrollbar { height:3px; }
.items-scroll::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

.icard { min-width:160px; max-width:180px; border:1px solid var(--border); border-radius:8px; padding:10px; flex-shrink:0; transition:border-color .15s, box-shadow .15s, transform .15s, background .15s; background:var(--bg-elevated); cursor:pointer; position:relative; }
.icard:hover { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); transform:translateY(-1px); }
.icard.s-hidden { display:none; }
.icard.just-added { animation:card-pop .25s ease; }
@keyframes card-pop { 0%{opacity:0;transform:scale(.93) translateY(4px)} 100%{opacity:1;transform:none} }
@keyframes status-flash { 0%{opacity:0} 50%{opacity:1} 100%{opacity:0} }

.itype { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--text-ghost); margin-bottom:4px; }
.iname { font-size:12px; font-weight:500; color:var(--text-bright); line-height:1.3; margin-bottom:9px; }

.icard-footer { display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.icard-meta { display:flex; align-items:center; gap:6px; }
.icard-tickets { font-size:10px; color:var(--text-ghost); display:flex; align-items:center; gap:2px; font-family:var(--font-mono); }

.open-hint { position:absolute; top:8px; right:8px; width:16px; height:16px; border:1px solid var(--border); border-radius:4px; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .12s; color:var(--text-dim); }
.icard:hover .open-hint { opacity:1; }

.badge { display:inline-flex; align-items:center; gap:4px; padding:2px 6px; border-radius:6px; font-size:10.5px; font-weight:500; cursor:pointer; transition:filter .1s; }
.badge:hover { filter:brightness(1.12); }
.badge::after { content:'▾'; font-size:8px; margin-left:1px; opacity:.5; }
.bdot { width:5px; height:5px; border-radius:50%; flex-shrink:0; }
.s-ns { background:var(--ns-bg); color:var(--ns-tx); } .s-ns .bdot { background:var(--ns-dot); }
.s-ip { background:var(--ip-bg); color:var(--ip-tx); } .s-ip .bdot { background:var(--ip-dot); }
.s-rv { background:var(--rv-bg); color:var(--rv-tx); } .s-rv .bdot { background:var(--rv-dot); }
.s-dn { background:var(--dn-bg); color:var(--dn-tx); } .s-dn .bdot { background:var(--dn-dot); }
.s-bl { background:var(--bl-bg); color:var(--bl-tx); } .s-bl .bdot { background:var(--bl-dot); }

.prog-bar { height:3px; background:var(--border); border-radius:2px; overflow:hidden; margin-top:6px; }
.prog-fill { height:100%; background:var(--accent); border-radius:2px; transition:width .3s ease; }

.add-icard { min-width:100px; border:1.5px dashed var(--border); border-radius:8px; padding:10px; flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; cursor:pointer; transition:border-color .12s, color .12s, background .12s; color:var(--text-ghost); font-size:11px; font-weight:500; min-height:80px; text-align:center; background:transparent; }
.add-icard:hover { border-color:var(--accent); color:var(--accent); background:var(--bg-glow); }

.row-empty { display:none; padding:16px 4px; font-size:12px; color:var(--text-ghost); text-align:center; }

/* ── Changes tab ─────────────────────── */
.chg-list { display:flex; flex-direction:column; gap:4px; }
.chg-row { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:8px; background:var(--bg-elevated); transition:border-color .12s; }
.chg-row:hover { border-color:var(--border-hover); }
.chg-id { font-size:10.5px; font-weight:600; color:var(--text-ghost); min-width:74px; flex-shrink:0; font-family:var(--font-mono); }
.chg-title { flex:1; font-size:12px; font-weight:500; color:var(--text-bright); }
.chg-type  { font-size:10.5px; color:var(--text-dim); min-width:60px; flex-shrink:0; }
.chg-date  { font-size:10.5px; color:var(--text-ghost); min-width:52px; flex-shrink:0; text-align:right; font-family:var(--font-mono); }
.chg-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 7px; border-radius:6px; font-size:10.5px; font-weight:500; min-width:90px; justify-content:flex-start; flex-shrink:0; cursor:pointer; }
.chg-badge:hover { filter:brightness(1.12); }
.chg-badge::after { content:'▾'; font-size:8px; margin-left:auto; opacity:.5; }
.chg-dot { width:5px; height:5px; border-radius:50%; flex-shrink:0; }
.c-op { background:var(--ch-op-bg); color:var(--ch-op-tx); } .c-op .chg-dot { background:var(--ch-op-dot); }
.c-ip { background:var(--ip-bg);    color:var(--ip-tx);    } .c-ip .chg-dot { background:var(--ip-dot); }
.c-pa { background:var(--ch-pa-bg); color:var(--ch-pa-tx); } .c-pa .chg-dot { background:var(--ch-pa-dot); }
.c-cl { background:var(--dn-bg);    color:var(--dn-tx);    } .c-cl .chg-dot { background:var(--dn-dot); }
.c-cn { background:var(--bl-bg);    color:var(--bl-tx);    } .c-cn .chg-dot { background:var(--bl-dot); }
.add-chg-row { display:flex; align-items:center; gap:7px; padding:10px 12px; border:1.5px dashed var(--border); border-radius:8px; cursor:pointer; transition:border-color .12s, color .12s, background .12s; color:var(--text-ghost); font-size:11px; font-weight:500; }
.add-chg-row:hover { border-color:var(--accent); color:var(--accent); background:var(--bg-glow); }

/* ── Intune tab ──────────────────────── */
.intune-wrap { display:grid; grid-template-columns:minmax(0,420px) minmax(260px,310px); gap:12px; align-items:start; }
@media(max-width:800px){.intune-wrap{grid-template-columns:1fr;}}
.intune-chart-area { border:1px solid var(--border); border-radius:8px; padding:12px; background:var(--bg-elevated); }
.intune-chart-hdr { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:10px; }
.intune-stat-main { font-size:28px; font-weight:700; line-height:1; color:var(--text-bright); font-family:var(--font-mono); }
.intune-stat-sub { font-size:11px; color:var(--text-dim); margin-top:2px; }
.intune-delta { font-size:12px; font-weight:600; font-family:var(--font-mono); }
.intune-delta.pos { color:var(--dn-tx); }
.intune-delta.neg { color:var(--bl-tx); }
.intune-delta.neu { color:var(--text-dim); }
.intune-svg-wrap { width:100%; height:80px; max-width:420px; }
.intune-svg-wrap svg { width:100%; height:100%; display:block; }
.intune-labels { display:flex; justify-content:space-between; margin-top:4px; font-size:10px; color:var(--text-ghost); max-width:420px; font-family:var(--font-mono); }
.intune-no-data { height:80px; display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--text-ghost); }
.intune-table-area { border:1px solid var(--border); border-radius:8px; overflow:hidden; background:var(--bg-elevated); }
.itbl-hdr { display:grid; grid-template-columns:1fr 90px 70px; padding:7px 10px; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--text-ghost); border-bottom:1px solid var(--border); background:var(--bg-card); }
.itbl-row { display:grid; grid-template-columns:1fr 90px 70px; padding:6px 10px; font-size:12px; border-bottom:1px solid var(--border); color:var(--text-main); }
.itbl-row:last-child { border-bottom:none; }
.itbl-delta.up   { color:var(--dn-tx); font-weight:500; font-family:var(--font-mono); }
.itbl-delta.down { color:var(--bl-tx); font-weight:500; font-family:var(--font-mono); }
.itbl-delta.flat { color:var(--text-ghost); font-family:var(--font-mono); }
.intune-add { display:flex; align-items:center; gap:5px; padding:7px 8px; border-top:1px solid var(--border); background:var(--bg-card); flex-wrap:wrap; }
.intune-input { font-family:var(--font-ui); font-size:12px; color:var(--text-bright); border:1px solid var(--border); border-radius:6px; padding:5px 7px; outline:none; transition:border-color .12s, box-shadow .12s; background:rgba(255,255,255,.04); }
.intune-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.intune-input[type=date]   { width:108px; }
.intune-input[type=number] { width:70px; }

/* ── Apps tab ─────────────────────────── */
.apps-wrap { display:flex; flex-direction:column; gap:8px; }
.apps-prog-wrap { display:flex; align-items:center; gap:10px; padding:6px 0 2px; }
.apps-prog-bar { flex:1; height:7px; background:var(--border); border-radius:4px; overflow:hidden; }
.apps-prog-fill { height:100%; background:var(--accent); border-radius:4px; transition:width .4s; }
.apps-prog-lbl { font-size:11px; color:var(--text-dim); white-space:nowrap; font-family:var(--font-mono); }
.apps-pills { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:2px; }
.app-list { display:flex; flex-direction:column; gap:3px; }
.app-row { display:flex; align-items:center; gap:10px; padding:7px 10px; border:1px solid var(--border); border-radius:8px; background:var(--bg-elevated); }
.app-row:hover { border-color:var(--border-hover); }
.app-name { flex:1; font-size:12px; font-weight:500; color:var(--text-bright); }
.app-note-txt { font-size:11px; color:var(--text-dim); max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.app-del { width:18px; height:18px; border:none; background:transparent; cursor:pointer; color:var(--text-ghost); font-size:12px; border-radius:4px; display:flex; align-items:center; justify-content:center; opacity:0; flex-shrink:0; transition:opacity .1s, background .1s, color .1s; }
.app-row:hover .app-del { opacity:1; }
.app-del:hover { background:var(--red-bg); color:var(--color-red); }
.add-app-row { display:flex; align-items:center; gap:6px; padding:7px 10px; border:1.5px dashed var(--border); border-radius:8px; cursor:pointer; color:var(--text-ghost); font-size:11px; font-weight:500; transition:border-color .12s, color .12s, background .12s; }
.add-app-row:hover { border-color:var(--accent); color:var(--accent); background:var(--bg-glow); }
.s-tst { background:var(--tst-bg); color:var(--tst-tx); } .s-tst .bdot { background:var(--tst-dot); }

/* ── Policies tab ─────────────────────── */
.pol-wrap { display:flex; flex-direction:column; gap:8px; }
.pol-prog-wrap { display:flex; align-items:center; gap:10px; padding:6px 0 2px; }
.pol-prog-bar { flex:1; height:6px; background:var(--border); border-radius:3px; overflow:hidden; }
.pol-prog-fill { height:100%; background:var(--accent); border-radius:3px; transition:width .4s; }
.pol-prog-lbl { font-size:11px; color:var(--text-dim); white-space:nowrap; font-family:var(--font-mono); }
.pol-groups { display:flex; flex-direction:column; gap:4px; }
.pol-group { border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.pol-grp-hdr { display:flex; align-items:center; gap:8px; padding:7px 10px; background:var(--bg-card); cursor:pointer; user-select:none; }
.pol-grp-hdr:hover { background:var(--bg-card-hover); }
.pol-grp-toggle { font-size:9px; color:var(--text-ghost); transition:transform .15s; flex-shrink:0; }
.pol-grp-hdr.collapsed .pol-grp-toggle { transform:rotate(-90deg); }
.pol-grp-title { flex:1; font-size:12px; font-weight:600; color:var(--text-main); }
.pol-grp-count { font-size:10.5px; color:var(--text-ghost); flex-shrink:0; font-family:var(--font-mono); }
.pol-grp-pills { display:flex; gap:3px; margin-left:6px; }
.pol-grp-pill { padding:1px 5px; border-radius:4px; font-size:10px; font-weight:600; }
.pol-grp-body { display:none; }
.pol-grp-body.open { display:block; }
.pol-row { display:flex; align-items:center; gap:8px; padding:6px 10px; border-top:1px solid var(--border); transition:background .08s; }
.pol-row:hover { background:var(--bg-card-hover); }
.pol-name { flex:1; font-size:11px; color:var(--text-main); }
.pol-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 7px; border-radius:6px; font-size:10px; font-weight:500; cursor:pointer; flex-shrink:0; min-width:140px; transition:filter .1s; }
.pol-badge:hover { filter:brightness(1.12); }
.pol-badge::after { content:'▾'; font-size:7px; margin-left:auto; opacity:.5; }
.pol-dot { width:5px; height:5px; border-radius:50%; flex-shrink:0; }
.p-ns { background:var(--ns-bg); color:var(--ns-tx); } .p-ns .pol-dot { background:var(--ns-dot); }
.p-dn { background:var(--dn-bg); color:var(--dn-tx); } .p-dn .pol-dot { background:var(--dn-dot); }
.p-dv { background:var(--ch-pa-bg); color:var(--ch-pa-tx); } .p-dv .pol-dot { background:var(--ch-pa-dot); }

/* ── Calendar drag-and-drop ──────────── */
.cal-ev.dragging { opacity:.35; pointer-events:none; }
.cal-dn-cell.drag-over { background:var(--accent-soft) !important; outline:2px dashed var(--accent); outline-offset:-2px; border-radius:3px; }
.cal-sb-item[draggable=true] { cursor:grab; }
.cal-sb-item[draggable=true]:active { cursor:grabbing; }
.cal-sb-item.sb-dragging { opacity:.4; }

/* ── App inline add ───────────────────── */
.app-add-form { display:flex; align-items:center; gap:0; padding:0; border:1.5px dashed var(--border); border-radius:8px; transition:border-color .15s; overflow:hidden; }
.app-add-form:focus-within { border-color:var(--accent); border-style:solid; box-shadow:0 0 0 3px var(--accent-soft); }
.app-add-in { flex:1; font-family:var(--font-ui); font-size:12px; color:var(--text-bright); border:none; outline:none; padding:7px 10px; background:transparent; min-width:0; }
.app-add-in::placeholder { color:var(--text-ghost); }
.app-add-sep { width:1px; height:24px; background:var(--border); flex-shrink:0; align-self:center; }
.app-add-note { font-family:var(--font-ui); font-size:11px; color:var(--text-main); border:none; outline:none; padding:7px 8px; background:transparent; width:130px; min-width:0; }
.app-add-note::placeholder { color:var(--text-ghost); }
.app-add-sel { font-family:var(--font-ui); font-size:11px; border:none; border-left:1px solid var(--border); padding:0 6px; background:var(--bg-card); color:var(--text-dim); outline:none; cursor:pointer; align-self:stretch; }
.app-add-sel:focus { background:var(--accent-soft); color:var(--accent); }
.app-add-btn { padding:0 14px; border:none; border-left:1px solid var(--border); background:var(--accent); color:var(--bg-void); font-family:var(--font-ui); font-size:13px; font-weight:700; cursor:pointer; align-self:stretch; transition:filter .12s; flex-shrink:0; }
.app-add-btn:hover { filter:brightness(1.08); }

/* ── Policy check ─────────────────────── */
.pol-chk { width:17px; height:17px; border-radius:50%; border:2px solid var(--border-hover); display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:800; flex-shrink:0; transition:all .12s; color:transparent; }
.pol-chk-dn { border-color:var(--dn-dot); background:var(--dn-dot); color:var(--bg-void); }
.pol-chk-dv { border-color:var(--ch-pa-dot); background:var(--ch-pa-dot); color:var(--bg-void); }
.pol-row { cursor:pointer; }
.pol-row:hover .pol-chk:not(.pol-chk-dn):not(.pol-chk-dv) { border-color:var(--dn-dot); }
.pol-stlbl { font-size:10px; font-weight:500; flex-shrink:0; min-width:105px; text-align:right; color:var(--text-ghost); }
.pol-stlbl-dn { color:var(--dn-tx); }
.pol-stlbl-dv { color:var(--ch-pa-tx); }
.pol-grp-all { padding:3px 8px; border-radius:6px; border:1px solid var(--border); background:transparent; font-size:10px; font-weight:600; color:var(--text-ghost); cursor:pointer; white-space:nowrap; flex-shrink:0; transition:all .12s; margin-left:6px; }
.pol-grp-all:hover { border-color:var(--dn-dot); color:var(--dn-tx); background:var(--dn-bg); }

/* ── Dropdowns (solid) ───────────────── */
.dd-menu { position:fixed; background:var(--bg-elevated); border:1px solid var(--border-hover); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.40); padding:3px; z-index:1000; display:none; }
.dd-menu.open { display:block; animation:dd-in .1s ease; }
@keyframes dd-in { from{opacity:0;transform:translateY(-3px)} to{opacity:1;transform:none} }
.ddi { display:flex; align-items:center; gap:7px; padding:6px 8px; border-radius:6px; cursor:pointer; font-size:12px; font-weight:500; color:var(--text-main); transition:background .08s; }
.ddi:hover { background:var(--bg-card-hover); }
.ddi.sel { background:var(--bg-card-hover); font-weight:600; color:var(--text-bright); }
.ddi.sel::after { content:'✓'; margin-left:auto; font-size:10px; color:var(--accent); }
.ddi-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }

/* ── Add customer row ─────────────────── */
.add-cust { display:flex; align-items:center; justify-content:center; gap:6px; padding:12px; border:1.5px dashed var(--border); border-radius:8px; cursor:pointer; transition:border-color .12s, color .12s, background .12s; color:var(--text-ghost); font-size:12px; font-weight:500; }
.add-cust:hover { border-color:var(--accent); color:var(--accent); background:var(--bg-glow); }

/* ── Modals (glass) ───────────────────── */
.overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:500; display:none; align-items:center; justify-content:center; }
.overlay.open { display:flex; }
.modal { background:var(--glass-modal); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid var(--border); border-radius:12px; padding:22px; width:380px; box-shadow:0 24px 64px rgba(0,0,0,.5); animation:m-in var(--t-spring); }
@keyframes m-in { from{opacity:0;transform:scale(.96)} to{opacity:1;transform:none} }
.m-title { font-size:15px; font-weight:600; margin-bottom:16px; color:var(--text-bright); }
.field { margin-bottom:12px; }
.flabel { display:block; font-size:11px; font-weight:600; color:var(--text-dim); margin-bottom:4px; }
.finput,.fselect { width:100%; padding:8px 9px; border:1px solid var(--border); border-radius:8px; font-family:var(--font-ui); font-size:12.5px; color:var(--text-bright); background:rgba(255,255,255,.04); outline:none; transition:border-color .12s, box-shadow .12s; }
.finput::placeholder { color:var(--text-ghost); }
.finput:focus,.fselect:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.fselect option { background:var(--bg-elevated); color:var(--text-bright); }
.m-actions { display:flex; gap:6px; justify-content:flex-end; margin-top:18px; }
.mbtn { padding:7px 14px; border-radius:8px; font-size:12.5px; font-weight:500; cursor:pointer; border:none; font-family:var(--font-ui); transition:all .12s; }
.mbtn-cancel { background:transparent; color:var(--text-dim); border:1px solid var(--border); }
.mbtn-cancel:hover { background:var(--bg-card-hover); color:var(--text-bright); }
.mbtn-ok { background:transparent; color:var(--accent); border:1px solid var(--accent); }
.mbtn-ok:hover { background:var(--accent); color:var(--bg-void); }

/* ── Item detail panel (modal-like glass) ── */
.panel-bd { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:300; display:none; }
.panel-bd.open { display:block; }

.ipanel { position:fixed; top:0; right:0; bottom:0; width:430px; background:var(--glass-modal); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-left:1px solid var(--border); z-index:400; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .22s cubic-bezier(.4,0,.2,1); }
.ipanel.open { transform:translateX(0); box-shadow:-8px 0 32px rgba(0,0,0,.4); }

.ip-hdr { display:flex; align-items:flex-start; justify-content:space-between; padding:16px 18px 14px; border-bottom:1px solid var(--border); flex-shrink:0; }
.ip-hdr-left { flex:1; min-width:0; }
.ip-breadcrumb { font-size:10.5px; color:var(--text-ghost); margin-bottom:4px; }
.ip-breadcrumb span { color:var(--accent); }
.ip-title { font-size:16px; font-weight:600; line-height:1.3; word-break:break-word; color:var(--text-bright); }
.ip-close { width:28px; height:28px; border:1px solid var(--border); border-radius:8px; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--text-dim); flex-shrink:0; margin-left:12px; transition:border-color .12s, color .12s; }
.ip-close:hover { border-color:var(--border-hover); color:var(--text-bright); }

.ip-body { flex:1; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:24px; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.ip-body::-webkit-scrollbar { width:3px; }
.ip-body::-webkit-scrollbar-thumb { background:var(--border); }

.ip-row { display:flex; align-items:center; gap:8px; }
.ip-section { display:flex; flex-direction:column; gap:8px; }
.ip-slabel { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--text-ghost); }

.ip-textarea { width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:8px; font-family:var(--font-ui); font-size:12.5px; color:var(--text-bright); background:rgba(255,255,255,.04); outline:none; resize:vertical; min-height:72px; line-height:1.5; transition:border-color .15s, box-shadow .15s; }
.ip-textarea::placeholder { color:var(--text-ghost); }
.ip-textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

.save-toast { font-size:10.5px; color:var(--dn-tx); opacity:0; transition:opacity .3s; margin-left:auto; }
.save-toast.show { opacity:1; }

/* Steps */
.step-list { display:flex; flex-direction:column; gap:4px; }
.step-row { display:flex; align-items:flex-start; gap:8px; padding:7px 8px; border:1px solid var(--border); border-radius:8px; background:var(--bg-elevated); transition:background .1s, border-color .1s; }
.step-row:has(.step-cb:checked) { background:var(--dn-bg); border-color:var(--accent-line); }
.step-cb { width:14px; height:14px; accent-color:var(--accent); cursor:pointer; flex-shrink:0; margin-top:2px; }
.step-text { flex:1; font-size:12px; color:var(--text-bright); line-height:1.4; }
.step-text.done { text-decoration:line-through; color:var(--text-ghost); }
.step-del { width:18px; height:18px; border:none; background:transparent; cursor:pointer; color:var(--text-ghost); font-size:13px; display:flex; align-items:center; justify-content:center; border-radius:4px; transition:all .1s; flex-shrink:0; opacity:0; }
.step-row:hover .step-del { opacity:1; }
.step-del:hover { background:var(--red-bg); color:var(--color-red); }
.steps-empty { font-size:12px; color:var(--text-ghost); padding:10px 0; }

.ip-add-row { display:flex; align-items:center; gap:6px; }
.ip-input { flex:1; padding:7px 9px; border:1px solid var(--border); border-radius:8px; font-family:var(--font-ui); font-size:12px; color:var(--text-bright); background:rgba(255,255,255,.04); outline:none; transition:border-color .12s, box-shadow .12s; }
.ip-input::placeholder { color:var(--text-ghost); }
.ip-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.ip-add-btn { padding:6px 10px; border-radius:8px; border:1px solid var(--border); background:transparent; font-family:var(--font-ui); font-size:12px; font-weight:500; color:var(--text-dim); cursor:pointer; transition:border-color .12s, color .12s, background .12s; white-space:nowrap; flex-shrink:0; }
.ip-add-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--bg-glow); }

/* Tickets */
.tkt-list { display:flex; flex-direction:column; gap:4px; }
.tkt-row { display:flex; align-items:center; gap:8px; padding:7px 9px; border:1px solid var(--border); border-radius:8px; background:var(--bg-elevated); }
.tkt-row:hover .tkt-del { opacity:1; }
.tkt-id { font-size:10.5px; font-weight:600; color:var(--accent); flex-shrink:0; min-width:80px; text-decoration:none; font-family:var(--font-mono); }
a.tkt-id:hover { text-decoration:underline; }
.tkt-title { flex:1; font-size:12px; color:var(--text-main); }
.tkt-del { width:18px; height:18px; border:none; background:transparent; cursor:pointer; color:var(--text-ghost); font-size:13px; display:flex; align-items:center; justify-content:center; border-radius:4px; transition:all .1s; flex-shrink:0; opacity:0; }
.tkt-del:hover { background:var(--red-bg); color:var(--color-red); }
.tkts-empty { font-size:12px; color:var(--text-ghost); padding:8px 0; }
.tkt-add-row { display:flex; align-items:center; gap:5px; }

/* ── View toggle ─────────────────── */
.view-toggle { display:flex; gap:2px; background:var(--bg-void); border:1px solid var(--border); border-radius:8px; padding:2px; }
.vbtn { padding:4px 11px; border-radius:6px; font-size:12px; font-weight:500; color:var(--text-dim); cursor:pointer; transition:color .1s, background .1s; user-select:none; }
.vbtn:hover { color:var(--text-bright); }
.vbtn.active { background:var(--bg-elevated); color:var(--text-bright); }

/* ── Calendar grid ───────────────── */
.cal-outer { padding:16px 28px 60px; }
.cal-topbar { display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.cal-month-lbl { font-size:15px; font-weight:700; min-width:160px; color:var(--text-bright); }
.cal-nav-btn { width:28px; height:28px; border:1px solid var(--border); border-radius:8px; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--text-dim); transition:border-color .12s, color .12s; flex-shrink:0; }
.cal-nav-btn:hover { border-color:var(--accent); color:var(--accent); }
.cal-today-btn { padding:4px 10px; border:1px solid var(--border); border-radius:8px; background:transparent; font-family:var(--font-ui); font-size:12px; font-weight:500; color:var(--text-dim); cursor:pointer; transition:border-color .12s, color .12s; }
.cal-today-btn:hover { border-color:var(--accent); color:var(--accent); }
.cal-spacer { flex:1; }

/* Resources strip */
.cal-res-strip { display:flex; flex-direction:column; gap:3px; margin-bottom:10px; }
.cal-res-row { display:flex; align-items:center; background:var(--bg-card); border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.cal-res-name-cell { padding:6px 12px; font-size:12px; font-weight:500; border-right:1px solid var(--border); white-space:nowrap; flex-shrink:0; width:140px; color:var(--text-bright); }
.cal-res-week-cells { display:grid; flex:1; }
.cal-res-wk { padding:3px 6px; border-right:1px solid var(--border); min-height:34px; display:flex; flex-direction:column; justify-content:center; gap:2px; }
.cal-res-wk:last-child { border-right:none; }
.cal-res-chips { display:flex; gap:2px; flex-wrap:wrap; }
.cal-res-chip { font-size:9px; padding:1px 5px; border-radius:4px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:84px; }
.cal-res-load { height:3px; background:var(--border); border-radius:2px; overflow:hidden; margin-top:2px; }
.cal-res-load-fill { height:100%; border-radius:2px; transition:width .3s; }

/* Calendar layout */
.cal-layout { display:flex; gap:14px; align-items:flex-start; }
.cal-main { flex:1; min-width:0; }
.cal-sidebar { width:240px; flex-shrink:0; display:flex; flex-direction:column; gap:8px; }

/* Grid */
.cal-grid-hdr { display:grid; grid-template-columns:repeat(7,1fr); background:var(--bg-card); border:1px solid var(--border); border-bottom:2px solid var(--border); border-radius:8px 8px 0 0; }
.cal-hdr-cell { padding:7px 0; font-size:10px; font-weight:600; text-align:center; color:var(--text-ghost); border-right:1px solid var(--border); text-transform:uppercase; letter-spacing:.05em; }
.cal-hdr-cell:last-child { border-right:none; }
.cal-hdr-cell.wknd { color:var(--text-ghost); opacity:.6; }

.cal-body { border:1px solid var(--border); border-top:none; border-radius:0 0 8px 8px; overflow:hidden; background:var(--bg-card); }
.cal-week-row { border-bottom:1px solid var(--border); position:relative; }
.cal-week-row:last-child { border-bottom:none; }

/* Day number row */
.cal-day-nums { display:grid; grid-template-columns:repeat(7,1fr); }
.cal-dn-cell { padding:5px 7px; border-right:1px solid var(--border); cursor:pointer; transition:background .1s; }
.cal-dn-cell:last-child { border-right:none; }
.cal-dn-cell:hover { background:var(--bg-card-hover); }
.cal-dn-cell.other-mo { background:var(--bg-surface); }
.cal-dn-cell.today-cell { background:var(--accent-soft); }
.cal-dn { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; font-size:12px; font-weight:500; color:var(--text-main); border-radius:50%; font-family:var(--font-mono); }
.cal-dn-cell.other-mo .cal-dn { color:var(--text-ghost); }
.cal-dn-cell.today-cell .cal-dn { background:var(--accent); color:var(--bg-void); font-weight:700; }
.cal-wknum { position:absolute; right:5px; top:6px; font-size:9px; color:var(--text-ghost); font-weight:500; pointer-events:none; font-family:var(--font-mono); }

/* Events area */
.cal-ev-area { position:relative; }
.cal-day-zones { position:absolute; inset:0; display:grid; grid-template-columns:repeat(7,1fr); pointer-events:none; }
.cal-dzone { border-right:1px solid var(--border); cursor:pointer; pointer-events:all; }
.cal-dzone:last-child { border-right:none; }
.cal-dzone:hover { background:var(--accent-soft); }

.cal-ev { position:absolute; border-radius:4px; padding:0 6px; font-size:10.5px; font-weight:500; cursor:pointer; overflow:hidden; white-space:nowrap; display:flex; align-items:center; gap:3px; z-index:1; transition:filter .12s, box-shadow .12s; box-sizing:border-box; }
.cal-ev:hover { filter:brightness(1.12); box-shadow:0 1px 4px rgba(0,0,0,.4); z-index:10; }
.cal-ev .bdot { flex-shrink:0; }
.cal-ev-name { overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; }
.cal-ev-ass { font-size:9px; opacity:.6; flex-shrink:0; }
.cal-ev-more { position:absolute; font-size:10px; color:var(--text-dim); font-weight:500; cursor:pointer; padding:0 7px; z-index:5; line-height:20px; }
.cal-ev-more:hover { color:var(--accent); }

/* Sidebar */
.cal-sb-box { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.cal-sb-hdr { padding:8px 12px; background:var(--bg-surface); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.cal-sb-ttl { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--text-ghost); }
.cal-sb-cnt { font-size:10px; font-weight:600; color:var(--text-dim); background:var(--bg-void); border:1px solid var(--border); border-radius:10px; padding:0 6px; font-family:var(--font-mono); }
.cal-sb-grp { border-bottom:1px solid var(--border); }
.cal-sb-grp:last-child { border-bottom:none; }
.cal-sb-cust { padding:4px 10px; font-size:10px; font-weight:700; color:var(--text-ghost); background:var(--bg-surface); border-bottom:1px solid var(--border); letter-spacing:.04em; text-transform:uppercase; }
.cal-sb-item { display:flex; align-items:center; gap:6px; padding:6px 10px; cursor:pointer; transition:background .1s; border-bottom:1px solid var(--border); }
.cal-sb-item:last-child { border-bottom:none; }
.cal-sb-item:hover { background:var(--bg-card-hover); }
.cal-sb-item:hover .cal-sb-plan { opacity:1; color:var(--accent); }
.cal-sb-name { font-size:12px; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-bright); }
.cal-sb-plan { font-size:10px; font-weight:600; color:var(--text-ghost); opacity:0; transition:opacity .1s; flex-shrink:0; }
.cal-sb-date { font-size:10px; color:var(--text-ghost); flex-shrink:0; white-space:nowrap; font-family:var(--font-mono); }
.cal-sb-empty { padding:14px 12px; font-size:12px; color:var(--text-ghost); text-align:center; }

/* ── Login screen ─────────────────────── */
.login-screen { position:fixed; inset:0; background:var(--bg-void); z-index:2000; display:flex; align-items:center; justify-content:center; }
.login-box { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:32px 28px; width:360px; box-shadow:0 8px 40px rgba(0,0,0,.5); }
.login-logo { display:flex; justify-content:center; margin-bottom:16px; }
.login-title { font-size:20px; font-weight:700; text-align:center; margin-bottom:4px; color:var(--text-bright); }
.login-sub { font-size:12px; color:var(--text-dim); text-align:center; margin-bottom:20px; }
.login-err { font-size:12px; color:var(--color-red); min-height:16px; margin-top:6px; text-align:center; }

/* ── App loader / error ───────────────── */
.app-loader { position:fixed; inset:0; background:rgba(17,17,17,.7); backdrop-filter:blur(2px); z-index:900; display:flex; align-items:center; justify-content:center; }
.loader-spinner { width:28px; height:28px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.app-error { background:var(--red-bg); border-bottom:1px solid var(--red-brd); padding:8px 24px; font-size:12px; color:var(--bl-tx); font-weight:500; }

/* ── User widget ──────────────────────── */
.user-menu-wrap { position:relative; }
.user-avatar { width:30px; height:30px; border-radius:50%; background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:filter .12s; user-select:none; }
.user-avatar:hover { filter:brightness(1.15); }
.user-menu { position:absolute; right:0; top:calc(100% + 6px); background:var(--bg-elevated); border:1px solid var(--border-hover); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.4); padding:3px; min-width:160px; z-index:1000; display:none; }
.user-menu.open { display:block; animation:dd-in .1s ease; }
.user-menu-name { padding:8px 10px 6px; font-size:12px; font-weight:600; color:var(--text-bright); border-bottom:1px solid var(--border); margin-bottom:3px; }
.user-menu .ddi { padding:6px 10px; }

/* ── Priority badges on icard ─────────── */
.icard-top-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:2px; }
.prio-badge { display:inline-flex; align-items:center; padding:1px 5px; border-radius:4px; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; flex-shrink:0; }
.prio-high   { background:var(--red-bg); color:var(--bl-tx); }
.prio-normal { background:var(--ns-bg); color:var(--text-ghost); }
.prio-low    { background:var(--ns-bg); color:var(--text-ghost); }
/* Priority badge in panel */
.badge.prio-high   { background:var(--red-bg); color:var(--bl-tx); }
.badge.prio-normal { background:var(--ns-bg); color:var(--text-ghost); }
.badge.prio-low    { background:var(--ns-bg); color:var(--text-ghost); }
.badge.prio-high::after, .badge.prio-normal::after, .badge.prio-low::after { content:'▾'; font-size:8px; margin-left:1px; opacity:.5; }

/* ── Deadline chips on icard ──────────── */
.due-chip { display:inline-flex; align-items:center; padding:2px 6px; border-radius:4px; font-size:10px; font-weight:600; margin-bottom:5px; font-family:var(--font-mono); }
.due-past   { background:var(--red-bg); color:var(--bl-tx); }
.due-today  { background:var(--ch-pa-bg); color:var(--ch-pa-tx); }
.due-future { background:var(--ns-bg); color:var(--text-dim); }

/* ── Comments ─────────────────────────── */
.comment-list { display:flex; flex-direction:column; gap:10px; }
.comment-row { display:flex; align-items:flex-start; gap:8px; }
.comment-avatar { width:28px; height:28px; border-radius:50%; background:var(--ip-bg); color:var(--ip-tx); border:1px solid var(--border); font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.comment-body { flex:1; min-width:0; }
.comment-meta { display:flex; align-items:baseline; gap:6px; margin-bottom:3px; }
.comment-meta strong { font-size:12px; color:var(--text-bright); }
.comment-meta span { font-size:10.5px; color:var(--text-ghost); }
.comment-text { font-size:12px; color:var(--text-main); line-height:1.5; word-break:break-word; }
.comment-add { display:flex; flex-direction:column; gap:5px; margin-top:4px; }
.comment-input { width:100%; padding:7px 9px; border:1px solid var(--border); border-radius:8px; font-family:var(--font-ui); font-size:12px; color:var(--text-bright); background:rgba(255,255,255,.04); outline:none; resize:vertical; line-height:1.5; transition:border-color .15s, box-shadow .15s; }
.comment-input::placeholder { color:var(--text-ghost); }
.comment-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.comment-loading, .comment-empty { font-size:12px; color:var(--text-ghost); padding:8px 0; }

/* ── Activity feed ────────────────────── */
.activity-list { display:flex; flex-direction:column; gap:6px; }
.activity-row { display:flex; align-items:flex-start; gap:8px; }
.act-avatar { background:var(--bg-elevated); color:var(--text-dim); border-color:var(--border); }
.activity-body { display:flex; align-items:baseline; gap:5px; flex-wrap:wrap; font-size:12px; padding-top:5px; }
.act-name { font-weight:600; color:var(--text-bright); }
.act-action { color:var(--text-main); }
.act-time { font-size:10.5px; color:var(--text-ghost); white-space:nowrap; font-family:var(--font-mono); }