:root {
  --sf-navbar-bg: #1f2a37;
  --sf-accent: #f59e0b;

  /* Canonical status colors, shared by badges / kanban / gantt / charts */
  --st-notstarted: #6c757d;
  --st-inprogress: #0d6efd;
  --st-waiting:    #0dcaf0;
  --st-onhold:     #fd7e14;
  --st-delayed:    #dc3545;
  --st-completed:  #198754;
  --st-na:         #adb5bd;
}

html { font-size: 14px; position: relative; min-height: 100%; }
@media (min-width: 768px) { html { font-size: 16px; } }
body { margin-bottom: 40px; background: #f6f7f9; }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* ---- navbar ---- */
.sf-navbar { background: var(--sf-navbar-bg); }
.sf-navbar .navbar-brand { color: #fff; margin-right: 1.25rem; }
.sf-navbar .nav-link { color: #cbd5e1; }
.sf-navbar .nav-link:hover { color: #fff; }
.sf-navbar .nav-link.active { color: #fff; border-bottom: 2px solid var(--sf-accent); }

/* roomier top-level nav so the menu doesn't feel cramped */
@media (min-width: 992px) {
  .sf-navbar .navbar-nav { column-gap: .35rem; }
  .sf-navbar .navbar-nav > .nav-item > .nav-link { padding-left: .7rem; padding-right: .7rem; }
}
/* roomier dropdowns */
.sf-navbar .dropdown-menu { padding: .4rem 0; border-radius: .6rem; box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.sf-navbar .dropdown-item { padding-top: .45rem; padding-bottom: .45rem; }
.sf-navbar .dropdown-item .mi { margin-right: .4rem; }
.sf-navbar .dropdown-header { padding-top: .5rem; }

/* ---- dashboard tiles ---- */
.sf-tile { border: 0; border-radius: .6rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); background:#fff; }
.sf-tile .sf-tile-num { font-size: 2rem; font-weight: 700; line-height: 1; }
.sf-tile .sf-tile-label { color:#6c757d; font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; }

/* ---- home (cross-module) dashboard ---- */
.sf-modcard { transition: box-shadow .15s ease, transform .15s ease; }
.sf-modcard:hover { box-shadow: 0 6px 20px rgba(0,0,0,.12); transform: translateY(-1px); }
.sf-hero-num { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.sf-modhead { display:flex; align-items:center; gap:.65rem; margin-bottom:.85rem; }
.sf-modicon { width:38px; height:38px; border-radius:.55rem; display:inline-flex; align-items:center; justify-content:center; color:#fff; flex:0 0 auto; }
.sf-modicon .material-icons { font-size:1.35rem; color:#fff; margin:0; }
.sf-quick { display:flex; flex-wrap:wrap; gap:.4rem; }
.sf-quick a { display:inline-flex; align-items:center; gap:.3rem; font-size:.82rem; padding:.3rem .62rem; border-radius:2rem;
    background:#f1f3f5; color:#334155; text-decoration:none; border:1px solid transparent; white-space:nowrap; }
.sf-quick a:hover { background:#e6eaef; border-color:#ced4da; color:#1f2a37; }
.sf-quick a .material-icons { font-size:1rem; margin:0; }
[data-bs-theme="dark"] .sf-quick a { background:#222b36; color:#cdd6df; }
[data-bs-theme="dark"] .sf-quick a:hover { background:#2b3641; border-color:#3a4650; color:#fff; }

/* ---- status badges ---- */
.st-badge { color:#fff; font-weight:600; }
.st-notstarted { background: var(--st-notstarted) !important; }
.st-inprogress { background: var(--st-inprogress) !important; }
.st-waiting    { background: var(--st-waiting) !important; color:#06343d !important; }
.st-onhold     { background: var(--st-onhold) !important; }
.st-delayed    { background: var(--st-delayed) !important; }
.st-completed  { background: var(--st-completed) !important; }
.st-na         { background: var(--st-na) !important; }

.pr-asap   { color: var(--st-delayed); font-weight:700; }
.pr-high   { color: var(--st-onhold); font-weight:700; }
.pr-medium { color: var(--st-inprogress); }
.pr-low    { color: #6c757d; }

/* ---- kanban ---- */
.kanban { display:flex; gap:.75rem; overflow-x:auto; padding-bottom:.5rem; }
.kanban-col { flex: 0 0 16rem; background:#eef1f4; border-radius:.5rem; padding:.5rem; min-height:8rem; }
.kanban-col.dragover { outline: 2px dashed var(--sf-accent); }
.kanban-col h6 { font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; color:#475569; }
.kanban-card { background:#fff; border-radius:.4rem; padding:.5rem .6rem; margin-bottom:.5rem;
  box-shadow:0 1px 2px rgba(0,0,0,.1); cursor:grab; border-left:4px solid var(--st-notstarted); }
.kanban-card:active { cursor:grabbing; }
.kanban-card .kc-job { font-weight:600; font-size:.85rem; }
.kanban-card .kc-desc { font-size:.75rem; color:#6c757d; }

/* ---- gantt timeline (horizontal scroll, sticky labels) ---- */
.gantt-scroll { overflow-x:auto; border:1px solid #eceff2; border-radius:.4rem; max-height:75vh; }
.gantt-row { display:flex; align-items:stretch; height:1.9rem; border-bottom:1px solid #f1f3f5; }
.gantt-axis-row { position:sticky; top:0; z-index:3; background:#fff; height:1.6rem; border-bottom:1px solid #dee2e6; }
.gantt-label { position:sticky; left:0; z-index:2; background:#fff; flex:0 0 13rem; width:13rem;
  display:flex; align-items:center; gap:.15rem; padding:0 .5rem; font-size:.78rem; overflow:hidden;
  border-right:1px solid #eceff2; }
.gantt-label a { white-space:nowrap; }
.gantt-track { position:relative; flex:0 0 auto; height:100%; }
.gantt-bar { position:absolute; top:.35rem; height:1.1rem; border-radius:.25rem; opacity:.92; min-width:3px; }
.gantt-today { position:absolute; top:0; bottom:0; width:2px; background:var(--st-delayed); z-index:1; }
.gantt-tick { position:absolute; top:0; bottom:0; border-left:1px solid #eceff2; font-size:.62rem; color:#94a3b8; padding-left:3px; }
.gantt-axis-row .gantt-label { background:#fff; }
/* Full-width mode: the chart breaks out of the page container and uses the whole window width. */
.gantt-wrap.gantt-fullbleed { width:100vw; position:relative; left:50%; margin-left:-50vw; padding:0 .75rem; }
.gantt-toolbar .btn.active { background:var(--bs-secondary-bg, #e9ecef); }

/* Auto-completed step (first-department-done-when-no-entry): completed colour, but a dashed ring marks
   that it's inferred rather than a real tracker entry (details in the tooltip). */
.stepper .step.auto-done .dot, .auto-done-swatch { outline:2px dashed #6c757d; outline-offset:1px; }

/* ---- department progress stepper (ported from JobTracker) ---- */
.stepper { display:flex; gap:0; max-width:34rem; }
.stepper .step { flex:1 1 0; min-width:0; text-align:center; position:relative; }
.stepper .step .dot { width:24px; height:24px; border-radius:50%; margin:0 auto; display:flex;
  align-items:center; justify-content:center; font-size:.72rem; font-weight:600; border:2px solid #ced4da;
  background:#fff; color:#6c757d; position:relative; z-index:1; }
.stepper .step .step-name { font-size:.66rem; line-height:1.05; margin-top:.15rem; color:#6c757d; }
.stepper .step:not(:first-child)::before { content:""; position:absolute; top:11px; left:-50%;
  width:100%; height:2px; background:#ced4da; z-index:0; }
.stepper .step.done .dot { background:#198754; border-color:#198754; color:#fff; }
.stepper .step.done .step-name { color:#198754; }
.stepper .step.done:not(:first-child)::before { background:#198754; }
.stepper .step.current .dot { border-color:#0d6efd; color:#0d6efd; box-shadow:0 0 0 .15rem rgba(13,110,253,.2); }
.stepper .step.current .step-name { color:#0d6efd; font-weight:600; }

td form { margin-bottom: 0; }
.cursor-pointer { cursor: pointer; }

/* ---- full-screen progress overlay (PDF report) ---- */
.sf-overlay { position: fixed; inset: 0; background: rgba(31,42,55,.55); z-index: 1080; display: flex; align-items: center; justify-content: center; }
.sf-overlay-box { background: #fff; border-radius: .6rem; padding: 1.5rem; width: min(28rem, 90vw); box-shadow: 0 10px 40px rgba(0,0,0,.3); text-align: center; }

/* ---- chat assistant ---- */
.sf-chat-log { height: 28rem; overflow-y: auto; background: #f6f7f9; border-radius: .5rem; padding: .75rem; }
.sf-msg { max-width: 85%; padding: .5rem .75rem; border-radius: .7rem; margin-bottom: .5rem; font-size: .9rem; line-height: 1.35; }
.sf-msg-user { background: #0d6efd; color: #fff; margin-left: auto; border-bottom-right-radius: .2rem; }
.sf-msg-bot { background: #fff; border: 1px solid #e9ecef; border-bottom-left-radius: .2rem; }
.sf-msg-bot a { font-weight: 600; }

/* ---- rendered markdown inside assistant replies (.sf-md applied by sfRenderInto) ---- */
.sf-md > :first-child { margin-top: 0; }
.sf-md > :last-child { margin-bottom: 0; }
.sf-md p { margin: 0 0 .5rem; }
.sf-md ul, .sf-md ol { margin: .25rem 0 .5rem 1.1rem; padding-left: .4rem; }
.sf-md li { margin-bottom: .15rem; }
.sf-md h1, .sf-md h2, .sf-md h3, .sf-md h4, .sf-md h5, .sf-md h6 { margin: .5rem 0 .35rem; font-weight: 700; line-height: 1.25; }
.sf-md h1 { font-size: 1.15rem; } .sf-md h2 { font-size: 1.08rem; } .sf-md h3 { font-size: 1rem; }
.sf-md h4, .sf-md h5, .sf-md h6 { font-size: .92rem; }
.sf-md code { background: rgba(135,131,120,.18); padding: .05rem .3rem; border-radius: .25rem; font-size: .85em; }
.sf-md pre.sf-md-pre { background: #f0f1f3; border: 1px solid #e3e6ea; border-radius: .4rem; padding: .5rem .6rem; overflow-x: auto; margin: .25rem 0 .5rem; }
.sf-md pre.sf-md-pre code { background: none; padding: 0; }
.sf-md blockquote.sf-md-quote { border-left: 3px solid #ced4da; margin: .25rem 0 .5rem; padding: .1rem .7rem; color: #5c636a; }
.sf-md hr { margin: .5rem 0; border-top: 1px solid #e0e3e7; }
.sf-md .table-responsive { margin: .25rem 0 .5rem; }
.sf-md table.sf-md-table { font-size: .85rem; margin-bottom: 0; }
.sf-md table.sf-md-table th { background: #f1f3f5; white-space: nowrap; }
.sf-md table.sf-md-table th, .sf-md table.sf-md-table td { padding: .3rem .5rem; vertical-align: top; }
/* a reply containing a table uses the full bubble width so columns aren't cramped */
.sf-msg-bot:has(table), .cost-msg-assistant:has(table) { max-width: 100%; width: 100%; }

/* ---- planning-readiness notice + deep-link section highlight ---- */
.sf-readiness-list > li + li { border-top: 1px solid rgba(0,0,0,.06); }
.sf-readiness-ico { font-size: 1.15rem; line-height: 1.4; }
/* flashed target of a ?highlight= / #anchor deep link */
[id] { scroll-margin-top: 1.5rem; }
.sf-flash { animation: sfFlash 1.1s ease-in-out 2; border-radius: .6rem; }
@keyframes sfFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
  30%      { box-shadow: 0 0 0 4px rgba(245,158,11,.6); background-color: rgba(245,158,11,.10); }
}
[data-bs-theme="dark"] .sf-readiness-list > li + li { border-top-color: rgba(255,255,255,.08); }

/* assistant plan tabs + per-row quick actions */
.sf-plan-tabs .nav-link { padding: .2rem .55rem; font-size: .78rem; line-height: 1.2; }
.sf-plan-tabs .nav-link .material-icons.mi { font-size: .95rem; vertical-align: -2px; }
.sf-plan-tabs .nav-link:not(.active) { color: var(--bs-secondary-color); background: transparent; }
.sf-plan-tabs .asst-tab-count { font-size: .65rem; vertical-align: 1px; }
.sf-plan-actions .btn { padding: 0 .15rem; line-height: 1; color: var(--bs-secondary-color); }
.sf-plan-actions .btn:hover { color: var(--bs-body-color); }
.sf-plan-actions .material-icons.mi { font-size: 1.05rem; }
.sf-plan-actions .pinned { color: #f59e0b; }

/* Edit dialogs must stay fully reachable. Bootstrap sizes .modal-dialog-scrollable correctly on its own
   (body scrolls, header/footer pinned) — don't override it. For any NON-scrollable dialog, cap the content
   to the viewport (matching Bootstrap's responsive margins) and scroll it so the footer never clips off-screen. */
.modal-dialog:not(.modal-dialog-scrollable) .modal-content { max-height: calc(100vh - 1rem); overflow-y: auto; }
@media (min-width: 576px) { .modal-dialog:not(.modal-dialog-scrollable) .modal-content { max-height: calc(100vh - 3.5rem); } }

/* tag / chip input (skills) */
.sf-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; min-height: 38px; height: auto; cursor: text; position: relative; padding-top: .3rem; padding-bottom: .3rem; }
.sf-tag { background: #e7f1ff; color: #0d6efd; border-radius: 1rem; padding: .05rem .1rem .05rem .55rem; font-size: .8rem; display: inline-flex; align-items: center; gap: .15rem; white-space: nowrap; }
.sf-tag .x { cursor: pointer; font-weight: 700; padding: 0 .35rem; border-radius: 1rem; }
.sf-tag .x:hover { background: rgba(0,0,0,.12); }
.sf-tag-input { border: none; outline: none; flex: 1 1 8ch; min-width: 8ch; background: transparent; color: inherit; padding: .1rem 0; }
.sf-tag-menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 1085; margin-top: 2px; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .4rem; box-shadow: 0 6px 18px rgba(0,0,0,.15); max-height: 12rem; overflow: auto; }
.sf-tag-opt { padding: .3rem .6rem; cursor: pointer; font-size: .85rem; }
.sf-tag-opt:hover, .sf-tag-opt.active { background: #eef1f4; }
.sf-tag-opt.add { color: #198754; }
[data-bs-theme="dark"] .sf-tag { background: rgba(13,110,253,.28); color: #9ec5fe; }
[data-bs-theme="dark"] .sf-tag-opt:hover, [data-bs-theme="dark"] .sf-tag-opt.active { background: rgba(255,255,255,.08); }
.sf-chat-list { max-height: 24rem; overflow-y: auto; }
.sf-chat-item { display: flex; justify-content: space-between; align-items: center; gap: .25rem; padding: .3rem .5rem; border-radius: .4rem; cursor: pointer; font-size: .85rem; }
.sf-chat-item:hover { background: #eef1f4; }
.sf-chat-item.active { background: #e7f1ff; font-weight: 600; }
.sf-chat-item .del { color: #c0c6cc; cursor: pointer; padding: 0 .2rem; }
.sf-chat-item .del:hover { color: #dc3545; }

/* ---- AI Work: plan side panel + in-chat plan cards ---- */
.sf-plan-list { max-height: 32rem; overflow-y: auto; }
.sf-plan-item { border: 1px solid #e9ecef; border-left: 3px solid #6f42c1; border-radius: .5rem; padding: .5rem .6rem; margin-bottom: .5rem; cursor: pointer; background: #fff; }
.sf-plan-item:hover { background: #faf9fe; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.sf-plan-item.applied { border-left-color: #198754; opacity: .85; }
.aw-plan-bubble { border-left: 3px solid #6f42c1; padding-left: .6rem; }
.text-truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* auto-growing chat / refine textareas (Enter sends, Shift+Enter = newline) */
.aw-grow { resize: none; overflow-y: auto; max-height: 9rem; line-height: 1.35; }
/* full-screen blocking overlay shown while an update runs (covers the modal too) */
.aw-busy { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
    background: rgba(15,23,42,.55); backdrop-filter: blur(2px); }
.aw-busy-box { text-align: center; }

/* Copy button on AI responses (chat, AI Work, costing assistant) */
.sf-copy-btn { display: inline-flex; align-items: center; gap: 4px; margin: 7px 0 1px auto;
    border: 1px solid #d6dbe1; background: #fff; color: #6c757d; border-radius: 6px;
    font-size: .72rem; line-height: 1; padding: 3px 7px; cursor: pointer; }
.sf-msg-bot .sf-copy-btn, .cost-msg-assistant .sf-copy-btn { display: flex; width: fit-content; }
.sf-copy-btn:hover { background: #f1f3f5; color: #1f2a37; }
.sf-copy-btn.copied { color: #198754; border-color: #198754; }

/* spinning icon — running scheduled tasks */
@keyframes sf-spin { to { transform: rotate(360deg); } }
.sf-spin { display: inline-block; animation: sf-spin 1s linear infinite; }

/* icon button (e.g. the navbar dark-mode toggle) */
.sf-iconbtn { background: transparent; border: 0; color: #cbd5e1; display: inline-flex; align-items: center; padding: .25rem .4rem; border-radius: .4rem; cursor: pointer; }
.sf-iconbtn:hover { color: #fff; background: rgba(255,255,255,.08); }

/* ---- Costing section ---- */
.cost-kpi .card-body { padding: .85rem 1rem; }
.cost-bar { display: flex; height: 26px; border-radius: 6px; overflow: hidden; background: #eef1f4; }
.cost-seg { height: 100%; display: flex; }
.cost-seg > span { height: 100%; display: block; }
.cost-seg > .seg-margin { box-shadow: inset 1px 0 0 rgba(255,255,255,.6); }
.cost-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.cost-dot-sm { width: 8px; height: 8px; }
.calc-sub { font-size: .7rem; line-height: 1.2; margin-top: 2px; }
.cost-chat-log { height: 340px; overflow-y: auto; border: 1px solid #e4e7eb; border-radius: 8px; padding: 12px; background: #fbfcfd; }
.cost-msg { max-width: 85%; padding: 8px 12px; border-radius: 12px; margin-bottom: 10px; line-height: 1.4; }
.cost-msg-user { background: #0d6efd; color: #fff; margin-left: auto; border-bottom-right-radius: 3px; }
.cost-msg-assistant { background: #fff; border: 1px solid #e4e7eb; border-bottom-left-radius: 3px; }
.cost-bullet { padding-left: .5rem; }
.cost-calc-card { border: 1px solid #d9c9f5; margin-top: 8px; }
.cost-calc-title { font-weight: 600; padding: 8px 12px; background: #faf7ff; color: #4b2e83; border-bottom: 1px solid #ece3fb; }
.cost-calc-table td { padding: 5px 12px; font-size: .9rem; }
.cost-calc-expr { font-family: ui-monospace, Consolas, monospace; font-size: .82rem; }
.cost-calc-val { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cost-calc-total td { border-top: 2px solid #4b2e83; font-weight: 700; padding: 7px 12px; }
.cost-calc-note { padding: 6px 12px 10px; }

/* =========================================================================
   DARK MODE — Bootstrap 5.3 handles its own components via data-bs-theme="dark";
   these rules cover the app's custom (.sf-*/.kanban/.gantt/.stepper/.cost-*) bits
   that hardcode light colors. Surface #161b22, raised #1c232c, border #2a323c.
   ========================================================================= */
[data-bs-theme="dark"] { --sf-navbar-bg: #0b1220; }
[data-bs-theme="dark"] body { background: #0d1117; }

[data-bs-theme="dark"] .sf-tile { background: #161b22; box-shadow: 0 1px 3px rgba(0,0,0,.55); }
[data-bs-theme="dark"] .sf-tile .sf-tile-label { color: #9aa7b4; }

[data-bs-theme="dark"] .kanban-col { background: #161b22; }
[data-bs-theme="dark"] .kanban-col h6 { color: #9aa7b4; }
[data-bs-theme="dark"] .kanban-card { background: #1c232c; box-shadow: 0 1px 2px rgba(0,0,0,.55); }
[data-bs-theme="dark"] .kanban-card .kc-desc { color: #9aa7b4; }

[data-bs-theme="dark"] .gantt-scroll { border-color: #2a323c; }
[data-bs-theme="dark"] .gantt-row { border-bottom-color: #232a33; }
[data-bs-theme="dark"] .gantt-axis-row,
[data-bs-theme="dark"] .gantt-label,
[data-bs-theme="dark"] .gantt-axis-row .gantt-label { background: #161b22; border-color: #2a323c; }
[data-bs-theme="dark"] .gantt-tick { border-left-color: #2a323c; color: #8a98a6; }

/* ---- planning gantt extras (baseline overlay, actual, pins, drag, capacity heatmap) ---- */
.gantt-bar.gantt-baseline { top: 1.5rem; height: .28rem; opacity: .75; }
.gantt-bar.gantt-actual { top: .12rem; height: .28rem; }
.gantt-bar.gantt-drag { cursor: ew-resize; }
.gantt-bar.gantt-drag:hover { outline: 1px solid rgba(0,0,0,.25); }
.gantt-locked { box-shadow: inset 3px 0 0 #1f2a37; }
.gantt-pin { position: absolute; top: .2rem; width: 9px; height: 9px; transform: rotate(45deg); border-radius: 1px; z-index: 2; box-shadow: 0 0 0 1px rgba(255,255,255,.6); }
.gantt-holiday { position: absolute; top: 0; bottom: 0; background: rgba(220,53,69,.09); z-index: 0; pointer-events: none; }
[data-bs-theme="dark"] .gantt-holiday { background: rgba(224,96,108,.16); }

.heat-grid { display: grid; gap: 3px; align-items: stretch; }
.heat-cell { height: 30px; border-radius: 4px; display: flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 600; }
.heat-label { font-size: .75rem; display: flex; align-items: center; }
[data-bs-theme="dark"] .gantt-locked { box-shadow: inset 3px 0 0 #e6edf3; }

/* capacity/utilisation heat buckets — calmer tones, readable text, theme-aware */
.heat-b0 { background: #eef1f4; color: #9aa7b4; }
.heat-b1 { background: #d8ebdf; color: #2f5d43; }
.heat-b2 { background: #a7d3b8; color: #1f3d2c; }
.heat-b3 { background: #e6d08a; color: #5b481a; }
.heat-b4 { background: #e3b083; color: #5a3a20; }
.heat-b5 { background: #db959c; color: #5a2228; }
[data-bs-theme="dark"] .heat-b0 { background: #1b212a; color: #6b7785; }
[data-bs-theme="dark"] .heat-b1 { background: #1a2c22; color: #84b698; }
[data-bs-theme="dark"] .heat-b2 { background: #244a34; color: #c4e6d1; }
[data-bs-theme="dark"] .heat-b3 { background: #4a3b18; color: #e6d08a; }
[data-bs-theme="dark"] .heat-b4 { background: #543119; color: #e3b083; }
[data-bs-theme="dark"] .heat-b5 { background: #4d222a; color: #e69aa1; }

[data-bs-theme="dark"] .stepper .step .dot { background: #1c232c; border-color: #3a434f; color: #9aa7b4; }
[data-bs-theme="dark"] .stepper .step .step-name { color: #9aa7b4; }
[data-bs-theme="dark"] .stepper .step:not(:first-child)::before { background: #3a434f; }

[data-bs-theme="dark"] .sf-overlay-box { background: #161b22; }

[data-bs-theme="dark"] .sf-chat-log { background: #0d1117; }
[data-bs-theme="dark"] .sf-msg-bot { background: #1c232c; border-color: #2a323c; }
[data-bs-theme="dark"] .sf-md code { background: rgba(255,255,255,.12); }
[data-bs-theme="dark"] .sf-md pre.sf-md-pre { background: #0d1117; border-color: #2a323c; }
[data-bs-theme="dark"] .sf-md blockquote.sf-md-quote { border-left-color: #394250; color: #9aa7b4; }
[data-bs-theme="dark"] .sf-md hr { border-top-color: #2a323c; }
[data-bs-theme="dark"] .sf-md table.sf-md-table th { background: #222a33; }
[data-bs-theme="dark"] .sf-chat-item:hover { background: #1c232c; }
[data-bs-theme="dark"] .sf-chat-item.active { background: #243042; }

[data-bs-theme="dark"] .sf-plan-item { background: #1c232c; border-color: #2a323c; }
[data-bs-theme="dark"] .sf-plan-item:hover { background: #222a33; }

[data-bs-theme="dark"] .sf-copy-btn { background: #1c232c; border-color: #2a323c; color: #9aa7b4; }
[data-bs-theme="dark"] .sf-copy-btn:hover { background: #222a33; color: #e6edf3; }

[data-bs-theme="dark"] .cost-bar { background: #1c232c; }
[data-bs-theme="dark"] .cost-chat-log { background: #0d1117; border-color: #2a323c; }
[data-bs-theme="dark"] .cost-msg-assistant { background: #1c232c; border-color: #2a323c; }
[data-bs-theme="dark"] .cost-calc-card { border-color: #3a2f55; }
[data-bs-theme="dark"] .cost-calc-title { background: #221a33; color: #d4c4f5; border-bottom-color: #3a2f55; }
[data-bs-theme="dark"] .cost-calc-total td { border-top-color: #7c5cc4; }

/* keep the dark-bg navbar text legible in both themes */
[data-bs-theme="dark"] .sf-iconbtn { color: #cbd5e1; }

/* Bootstrap utilities that hardcode light surfaces — flip them to dark surfaces in dark mode
   (these were the white cards / panels missed in the first dark sweep). */
[data-bs-theme="dark"] .bg-light { background-color: #1c232c !important; }
[data-bs-theme="dark"] .bg-white { background-color: #161b22 !important; }
/* text-dark is only meant for light chips/badges; keep it readable on the now-dark light/white surfaces
   (does not touch bg-warning/bg-info chips, which stay dark-on-colour) */
[data-bs-theme="dark"] .bg-light.text-dark, [data-bs-theme="dark"] .bg-light .text-dark,
[data-bs-theme="dark"] .bg-white.text-dark, [data-bs-theme="dark"] .bg-white .text-dark { color: #e6edf3 !important; }

/* dashboard donut: track ring + centre text (number/label use currentColor, so they follow the theme) */
[data-bs-theme="dark"] .sf-donut circle[stroke="#e9ecef"] { stroke: #2a323c; }

/* calmer highlights in dark mode — the bright Floor/Clients overdue rows and saturated status colours */
[data-bs-theme="dark"] .table-warning { --bs-table-bg: #38300f; --bs-table-color: #ffe2b0; --bs-table-border-color: #4a3f1c; }
[data-bs-theme="dark"] .table-danger  { --bs-table-bg: #381b1e; --bs-table-color: #ffc9cd; --bs-table-border-color: #4a2529; }
[data-bs-theme="dark"] .table-success { --bs-table-bg: #14301e; --bs-table-color: #bdf0cf; --bs-table-border-color: #1f452f; }
[data-bs-theme="dark"] .table-info    { --bs-table-bg: #0f2a33; --bs-table-color: #bfe9f5; --bs-table-border-color: #1a3d49; }
/* desaturate the status palette in dark mode (badges, priority text, kanban/gantt — NOT the boards, which
   use screens.css + StatusMeta.Color() hex values directly) */
[data-bs-theme="dark"] {
  --st-inprogress: #5b8def;
  --st-waiting:    #3bb6cf;
  --st-onhold:     #e08a3c;
  --st-delayed:    #e0606c;
  --st-completed:  #46b377;
}
[data-bs-theme="dark"] .stepper .step.current .dot { box-shadow: 0 0 0 .12rem rgba(91,141,239,.25); }

/* ============================================================================
   Collaboration widget — presence, chat, notifications (collab.js)
   ============================================================================ */
:root {
  --sf-pres-active: #198754; --sf-pres-away: #fd7e14; --sf-pres-busy: #dc3545; --sf-pres-offline: #adb5bd;
  --sf-collab-surface: #ffffff; --sf-collab-border: #e4e8ec; --sf-collab-muted: #6c757d;
}
[data-bs-theme="dark"] {
  --sf-collab-surface: #161b22; --sf-collab-border: #2a323c; --sf-collab-muted: #9aa7b4;
}

/* launcher (bottom-right) */
.sf-launcher { position: fixed; right: 20px; bottom: 20px; width: 54px; height: 54px; border-radius: 50%;
  border: 0; background: var(--sf-navbar-bg, #1f2a37); color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.28);
  display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1050; transition: transform .12s ease; }
.sf-launcher:hover { transform: translateY(-2px); }
.sf-launcher .material-icons { font-size: 26px; }
.sf-launcher.open { background: #0d6efd; }
.sf-launcher-badge { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: var(--sf-pres-busy); color: #fff; font-size: .72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--sf-navbar-bg, #1f2a37); }
.sf-launcher.has-unread { animation: sfPulse 1.8s ease-in-out infinite; }
@keyframes sfPulse { 0%,100% { box-shadow: 0 6px 20px rgba(0,0,0,.28), 0 0 0 0 rgba(13,110,253,.45); }
  50% { box-shadow: 0 6px 20px rgba(0,0,0,.28), 0 0 0 8px rgba(13,110,253,0); } }

/* panel */
.sf-panel { position: fixed; right: 20px; bottom: 86px; width: min(360px, 92vw); height: min(560px, 72vh);
  background: var(--sf-collab-surface); border: 1px solid var(--sf-collab-border); border-radius: .8rem;
  box-shadow: 0 14px 44px rgba(0,0,0,.3); z-index: 1050; display: flex; flex-direction: column; overflow: hidden; }
.sf-panel-head { display: flex; align-items: center; gap: .35rem; padding: .5rem .6rem; border-bottom: 1px solid var(--sf-collab-border); }
.sf-panel-title { font-weight: 700; flex: 1; min-width: 0; }
.sf-status-pill { border: 1px solid var(--sf-collab-border); background: transparent; border-radius: 1rem;
  padding: .12rem .55rem .12rem .4rem; font-size: .78rem; display: inline-flex; align-items: center; gap: .2rem; cursor: pointer; }
.sf-status-pill .material-icons { font-size: 16px; }
.sf-status-pill.available { color: var(--sf-pres-active); border-color: rgba(25,135,84,.4); }
.sf-status-pill.busy { color: var(--sf-pres-busy); border-color: rgba(220,53,69,.4); }
.sf-panel-tabs { display: flex; gap: .25rem; padding: .4rem .5rem 0; }
.sf-tab { flex: 1; border: 0; background: transparent; padding: .35rem .25rem; font-size: .85rem; font-weight: 600;
  color: var(--sf-collab-muted); border-bottom: 2px solid transparent; cursor: pointer; }
.sf-tab.active { color: var(--bs-body-color); border-bottom-color: #0d6efd; }
.sf-pillcount { background: var(--sf-pres-active); color: #fff; border-radius: 8px; font-size: .68rem; padding: 0 .35rem; }
.sf-panel-body { flex: 1; overflow-y: auto; padding: .35rem; }
.sf-empty { color: var(--sf-collab-muted); text-align: center; padding: 1.5rem 1rem; font-size: .85rem; }
.sf-grouphdr { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--sf-collab-muted);
  padding: .5rem .5rem .2rem; font-weight: 700; }

/* rows */
.sf-thread-item, .sf-roster-item { display: flex; align-items: center; gap: .55rem; padding: .45rem .5rem;
  border-radius: .5rem; cursor: pointer; }
.sf-thread-item:hover, .sf-roster-item:hover { background: rgba(13,110,253,.07); }
.sf-thread-mid { flex: 1; min-width: 0; }
.sf-thread-title { font-weight: 600; font-size: .88rem; }
.sf-thread-prev { font-size: .78rem; color: var(--sf-collab-muted); }
.sf-thread-item.unread .sf-thread-title, .sf-thread-item.unread .sf-thread-prev { font-weight: 700; color: var(--bs-body-color); }
.sf-thread-right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; }
.sf-thread-time { font-size: .7rem; color: var(--sf-collab-muted); }
.sf-unread-badge { background: #0d6efd; color: #fff; border-radius: 10px; font-size: .7rem; font-weight: 700; padding: 0 .4rem; min-width: 18px; text-align: center; }
.sf-pin-ind .material-icons { font-size: 14px; color: var(--sf-collab-muted); }

/* avatars + presence dots */
.sf-avatar { position: relative; width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  background: #dfe6ee; color: #2a3744; display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700; }
[data-bs-theme="dark"] .sf-avatar { background: #2a323c; color: #cbd5e1; }
.sf-avatar.st-active { box-shadow: 0 0 0 2px var(--sf-pres-active); }
.sf-avatar.st-away { box-shadow: 0 0 0 2px var(--sf-pres-away); }
.sf-avatar.st-busy { box-shadow: 0 0 0 2px var(--sf-pres-busy); }
.sf-presence-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--sf-pres-offline);
  border: 2px solid var(--sf-collab-surface); }
.sf-avatar > .sf-presence-dot { position: absolute; right: -1px; bottom: -1px; }
.sf-presence-dot.is-active { background: var(--sf-pres-active); }
.sf-presence-dot.is-away { background: var(--sf-pres-away); }
.sf-presence-dot.is-busy { background: var(--sf-pres-busy); }
.sf-presence-dot.is-offline { background: var(--sf-pres-offline); }
/* inline dot next to names on HR/Planning pages */
[data-emp-id] > .sf-presence-dot { margin-left: .35rem; vertical-align: middle; border-color: var(--bs-body-bg); }

/* conversation */
.sf-conv { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.sf-conv-msgs { flex: 1; height: auto; overflow-y: auto; }
.sf-conv-typing { font-size: .76rem; color: var(--sf-collab-muted); padding: .1rem .75rem .3rem; font-style: italic; }
.sf-msg { position: relative; }
.sf-msg-sender { font-size: .72rem; font-weight: 700; color: #0d6efd; margin-bottom: .1rem; }
.sf-msg-foot { display: flex; align-items: center; gap: .25rem; justify-content: flex-end; margin-top: .15rem; }
.sf-msg-time { font-size: .66rem; opacity: .7; }
.sf-checks .material-icons { font-size: 15px; opacity: .75; }
.sf-checks.read .material-icons { color: #4ea1ff; opacity: 1; }
.sf-msg.sf-pending { opacity: .65; }
.sf-ctx-card { display: flex; align-items: center; gap: .3rem; margin-top: .35rem; padding: .3rem .5rem;
  background: rgba(0,0,0,.06); border-radius: .4rem; font-size: .78rem; font-weight: 600; text-decoration: none; color: inherit; }
.sf-msg-user .sf-ctx-card { background: rgba(255,255,255,.2); color: #fff; }
.sf-ctx-card .material-icons { font-size: 16px; }

/* reactions */
.sf-reactions { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem; margin-top: .2rem; }
.sf-react-chip { border: 1px solid var(--sf-collab-border); background: var(--sf-collab-surface); border-radius: 1rem;
  font-size: .72rem; padding: 0 .4rem; cursor: pointer; line-height: 1.5; }
.sf-react-chip.mine { border-color: #0d6efd; background: rgba(13,110,253,.12); }
.sf-react-add { border: 0; background: transparent; color: var(--sf-collab-muted); cursor: pointer; padding: 0; opacity: .55; }
.sf-msg:hover .sf-react-add { opacity: 1; }
.sf-react-add .material-icons { font-size: 16px; }
.sf-react-pick { display: inline-flex; gap: .1rem; background: var(--sf-collab-surface); border: 1px solid var(--sf-collab-border);
  border-radius: 1rem; padding: .1rem .25rem; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.sf-react-opt { border: 0; background: transparent; cursor: pointer; font-size: .95rem; padding: 0 .1rem; }

/* composer */
.sf-panel-compose { border-top: 1px solid var(--sf-collab-border); padding: .4rem .5rem; }
.sf-compose-row { display: flex; align-items: flex-end; gap: .3rem; }
.sf-compose-input { resize: none; font-size: .88rem; min-height: 38px; max-height: 120px; }
.sf-send { flex: 0 0 auto; }
.sf-send .material-icons { font-size: 18px; }
.sf-share-chip { display: inline-flex; align-items: center; gap: .25rem; font-size: .76rem; color: #0d6efd;
  background: rgba(13,110,253,.1); border-radius: .4rem; padding: .15rem .45rem; margin-bottom: .3rem; max-width: 100%; }
.sf-share-chip .material-icons { font-size: 15px; }
.sf-iconbtn.active { color: #0d6efd; }
.sf-iconbtn.pinned { color: #fd7e14; }

/* toasts (bottom-right, above launcher) */
.sf-toasts { position: fixed; right: 20px; bottom: 86px; z-index: 1052; display: flex; flex-direction: column;
  gap: .5rem; width: min(340px, 92vw); pointer-events: none; }
.sf-panel:not([hidden]) ~ .sf-toasts { bottom: calc(86px + min(560px, 72vh) + 8px); }
.sf-toast { pointer-events: auto; display: flex; align-items: center; gap: .5rem; background: var(--sf-collab-surface);
  border: 1px solid var(--sf-collab-border); border-left: 4px solid #0d6efd; border-radius: .6rem; padding: .5rem .6rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.22); cursor: pointer; animation: sfToastIn .18s ease; }
.sf-toast.out { opacity: 0; transform: translateX(12px); transition: all .2s ease; }
@keyframes sfToastIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.sf-toast-mid { flex: 1; min-width: 0; }
.sf-toast-name { font-weight: 700; font-size: .82rem; }
.sf-toast-body { font-size: .78rem; color: var(--sf-collab-muted); }
.sf-toast-act { display: flex; align-items: center; gap: .2rem; }

/* bottom-left "who's on this page" */
.sf-here { position: fixed; left: 18px; bottom: 18px; z-index: 1040; background: var(--sf-collab-surface);
  border: 1px solid var(--sf-collab-border); border-radius: .7rem; padding: .4rem .55rem; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.sf-here-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: var(--sf-collab-muted);
  font-weight: 700; display: flex; align-items: center; gap: .2rem; margin-bottom: .25rem; }
.sf-here-label .material-icons { font-size: 14px; }
.sf-here-stack { display: flex; }
.sf-here-chip { width: 32px; height: 32px; font-size: .72rem; margin-right: -8px; border: 2px solid var(--sf-collab-surface); cursor: pointer; }
.sf-here-chip:hover { transform: translateY(-3px); transition: transform .1s ease; z-index: 2; }
.sf-here-more { width: 32px; height: 32px; font-size: .7rem; background: #cfd8e0; }

@media (max-width: 480px) {
  .sf-panel { right: 10px; left: 10px; width: auto; bottom: 80px; }
  .sf-here { display: none; }
}

/* ---- @mentions, autocomplete, search, edit (collab.js phase 2) ---- */
.sf-mention { color: #0d6efd; font-weight: 600; background: rgba(13,110,253,.1); border-radius: .25rem; padding: 0 .15rem; }
.sf-mention.me { color: #b35900; background: rgba(253,126,20,.18); }
.sf-msg-user .sf-mention { color: #fff; background: rgba(255,255,255,.22); }
.sf-msg-user .sf-mention.me { color: #fff; background: rgba(255,193,7,.5); }

.sf-launcher.has-mention .sf-launcher-badge { background: var(--sf-pres-away); box-shadow: 0 0 0 2px var(--sf-navbar-bg, #1f2a37); }
.sf-pillcount.mention { background: var(--sf-pres-away); }

/* autocomplete dropdown (anchored above the composer) */
.sf-panel-compose { position: relative; }
.sf-ac { position: absolute; left: .5rem; right: .5rem; bottom: calc(100% - .2rem); background: var(--sf-collab-surface);
  border: 1px solid var(--sf-collab-border); border-radius: .5rem; box-shadow: 0 -6px 20px rgba(0,0,0,.18);
  max-height: 220px; overflow-y: auto; z-index: 5; }
.sf-ac-item { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; cursor: pointer; }
.sf-ac-item.active, .sf-ac-item:hover { background: rgba(13,110,253,.1); }
.sf-ac-item .sf-avatar { width: 28px; height: 28px; font-size: .68rem; }
.sf-ac-name { font-size: .85rem; font-weight: 600; min-width: 0; }

/* search */
.sf-search { display: flex; align-items: center; gap: .35rem; padding: .4rem .5rem .15rem; }
.sf-search-ico { color: var(--sf-collab-muted); display: flex; }
.sf-search-ico .material-icons { font-size: 18px; }
.sf-search-input { height: 32px; }

/* mentions inbox */
.sf-mention-item { display: flex; align-items: center; gap: .55rem; padding: .45rem .5rem; border-radius: .5rem; cursor: pointer; }
.sf-mention-item:hover { background: rgba(253,126,20,.08); }
.sf-mention-item.unseen { background: rgba(253,126,20,.1); border-left: 3px solid var(--sf-pres-away); }
.sf-mention-in { font-weight: 400; color: var(--sf-collab-muted); font-size: .8rem; }
.sf-mention-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sf-pres-away); display: inline-block; }

/* edit + edited marker */
.sf-msg-edit { border: 0; background: transparent; color: inherit; opacity: .5; cursor: pointer; padding: 0; display: inline-flex; }
.sf-msg:hover .sf-msg-edit { opacity: .9; }
.sf-msg-edit .material-icons { font-size: 14px; }
.sf-edited { font-size: .64rem; opacity: .6; font-style: italic; margin-right: auto; }
.sf-edit-area { resize: none; font-size: .88rem; width: 100%; }
.sf-edit-actions { display: flex; gap: .3rem; margin-top: .3rem; justify-content: flex-end; }

/* flash a jumped-to message */
.sf-flash { animation: sfFlash 2.2s ease; }
@keyframes sfFlash { 0%, 30% { background: rgba(253,126,20,.28); box-shadow: 0 0 0 3px rgba(253,126,20,.3); } 100% { background: transparent; box-shadow: none; } }

/* toast: mention emphasis */
.sf-toast.mention { border-left-color: var(--sf-pres-away); }
.sf-toast-at { font-size: .7rem; font-weight: 600; color: var(--sf-pres-away); }

/* ---- drafts: multiple attached pages + collapsed conversations (collab.js phase 3) ---- */
.sf-attach-list { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .35rem; }
.sf-attach-chip { display: inline-flex; align-items: center; gap: .2rem; max-width: 100%; font-size: .74rem; font-weight: 600;
  color: #0d6efd; background: rgba(13,110,253,.1); border-radius: .4rem; padding: .12rem .2rem .12rem .4rem; }
.sf-attach-chip .material-icons { font-size: 14px; }
.sf-attach-chip > span.text-truncate { max-width: 150px; }
.sf-attach-x { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 .15rem; opacity: .7; }
.sf-attach-x:hover { opacity: 1; }

.sf-grouphdr .material-icons { font-size: 14px; vertical-align: middle; }

/* "Show N earlier messages" bar inside a conversation (message-history collapse) */
.sf-earlier-bar { display: flex; align-items: center; justify-content: center; gap: .3rem; cursor: pointer;
  font-size: .78rem; font-weight: 600; color: var(--sf-collab-muted); padding: .35rem .5rem; margin-bottom: .4rem;
  border: 1px dashed var(--sf-collab-border); border-radius: .5rem; background: rgba(127,127,127,.05); position: sticky; top: 0; }
.sf-earlier-bar:hover { color: #0d6efd; border-color: #0d6efd; }
.sf-earlier-bar .material-icons { font-size: 16px; }