/* Task App Design System
 * Font: Inter (locally bundled in wwwroot/fonts/Inter/)
 * Color scheme: dark sidebar + purple accent
 */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter/Inter-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter/Inter-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter/Inter-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Sidebar */
  --sidebar-bg: #1e1e2e;
  --sidebar-text: #cdd6f4;
  /* Muted label text on the DARK sidebar. #6c7086 was too dim (~2.1:1); brightened for
     readability of the workspace name and section labels without competing with --sidebar-text. */
  --sidebar-text-muted: #9095b2;
  --sidebar-border: #313244;
  --sidebar-hover: #313244;
  --sidebar-active: #45475a;
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 52px;

  /* Surfaces */
  --surface-0: #f8fafc;
  --surface-1: #ffffff;
  --surface-2: #f1f5f9;
  --border: #e2e8f0;
  --border-subtle: #f1f5f9;

  /* Dialog / input surface aliases. Defined explicitly so any component that
     references them resolves to the (light) design system instead of falling
     back to a hardcoded dark literal — the cause of dark-text-on-dark clashes. */
  --bg-card: var(--surface-1);
  --bg-input: var(--surface-1);
  --bg-hover: var(--surface-2);
  --bg-overlay: rgba(0, 0, 0, 0.4);

  /* Text (on LIGHT surfaces). Ordered dark→light; all meet WCAG AA (≥4.5:1) on white.
     --text-muted was #94a3b8 (slate-400, ~2.5:1) — the "light gray on white" that was hard to
     read in empty states, breadcrumbs, hints, due dates. Darkened to ~5:1 while staying clearly
     secondary to --text-primary/--text-secondary. */
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-muted: #5b6675;

  /* Accent */
  --accent: #7c3aed;
  --accent-light: #ede9fe;
  --accent-hover: #6d28d9;

  /* Status badges */
  --status-open-bg: #f1f5f9;
  --status-open-fg: #64748b;
  --status-progress-bg: #ede9fe;
  --status-progress-fg: #7c3aed;
  --status-review-bg: #fef3c7;
  --status-review-fg: #d97706;
  --status-done-bg: #dcfce7;
  --status-done-fg: #16a34a;

  /* Priority */
  --pri-urgent: #ef4444;
  --pri-high: #f97316;
  --pri-normal: #6366f1;
  --pri-low: #94a3b8;

  /* Semantic */
  --danger: #dc2626;
  --warning: #d97706;
  --success: #16a34a;
  --info: #0ea5e9;

  --on-accent: #ffffff;
  --surface-3: #e2e8f0;
  --danger-bg: #fef2f2;
  --danger-fg: #991b1b;
  --success-bg: #dcfce7;
  --success-fg: #166534;
  --warning-bg: #ffedd5;
  --warning-fg: #9a3412;
}

/* Dark tokens. data-theme is the *resolved* scheme (light|dark). System is stored separately
   (data-theme-pref) and resolved by theme.js, so Light always beats OS dark and Dark always
   beats OS light. Seeded from the existing dark sidebar palette. */
html[data-theme="dark"] {
  color-scheme: dark;
  --surface-0: #11111b;
  --surface-1: #1e1e2e;
  --surface-2: #313244;
  --surface-3: #45475a;
  --border: #45475a;
  --border-subtle: #313244;
  --bg-card: var(--surface-1);
  --bg-input: var(--surface-2);
  --bg-hover: var(--surface-2);
  --bg-overlay: rgba(0, 0, 0, 0.6);
  --text-primary: #cdd6f4;
  --text-secondary: #bac2de;
  --text-muted: #9095b2;
  --accent: #a78bfa;
  --accent-light: #2e2060;
  --accent-hover: #c4b5fd;
  --status-open-bg: #313244;
  --status-open-fg: #a6adc8;
  --status-progress-bg: #2e2060;
  --status-progress-fg: #c4b5fd;
  --status-review-bg: #3d2e12;
  --status-review-fg: #fbbf24;
  --status-done-bg: #16351f;
  --status-done-fg: #4ade80;
  --danger: #f87171;
  --warning: #fbbf24;
  --success: #4ade80;
  --info: #38bdf8;
  --on-accent: #ffffff;
  --danger-bg: #3f1d1d;
  --danger-fg: #fca5a5;
  --success-bg: #16351f;
  --success-fg: #86efac;
  --warning-bg: #3d2e12;
  --warning-fg: #fcd34d;

  --mud-palette-primary: #a78bfa;
  --mud-palette-primary-darken: #8b5cf6;
  --mud-palette-primary-lighten: #2e2060;
  --mud-palette-secondary: #818cf8;
  --mud-palette-background: #11111b;
  --mud-palette-surface: #1e1e2e;
  --mud-palette-drawer-background: #1e1e2e;
  --mud-palette-drawer-text: #cdd6f4;
  --mud-palette-drawer-icon: #cdd6f4;
  --mud-palette-appbar-background: #1e1e2e;
  --mud-palette-appbar-text: #cdd6f4;
  --mud-palette-text-primary: #cdd6f4;
  --mud-palette-text-secondary: #bac2de;
  --mud-palette-action-default: #a6adc8;
  --mud-palette-divider: #45475a;
  --mud-palette-lines-default: #45475a;
  --mud-palette-table-lines: #45475a;
  --mud-palette-error: #f87171;
  --mud-palette-success: #4ade80;
  --mud-palette-warning: #fb923c;
  --mud-palette-info: #818cf8;
  --mud-palette-overlay-dark: rgba(0,0,0,0.7);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* SVGs inside flex/inline contexts align to the text midline, not the baseline. */
svg { vertical-align: middle; }

html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

html, body {
  height: 100%;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
}

/* ── App Shell ─────────────────────────────────────────────────────────── */

.app-shell { display: flex; height: 100vh; overflow: hidden; }

/* ── Login page ────────────────────────────────────────────────────────── */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #15131f 0%, #1e1e2e 60%, #2a1f4e 100%);
  padding: 24px;
}

.login-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 36px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}

.login-card .app-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 4px;
}

.login-card .company-name {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 24px;
}

/* Shared LoginCard (DotNetShared.AspNet): match Task's purple wordmark. The extra .dns-login
   class raises specificity above the component's scoped default so this wins regardless of
   stylesheet order. */
.dns-login.task-login .dns-login__title {
  color: var(--accent);
}

.btn-workspace {
  display: block;
  width: 100%;
  padding: 12px 16px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.btn-workspace:hover {
  background: var(--surface-2);
  border-color: var(--accent);
  color: var(--text-primary);
  text-decoration: none;
}

.btn-workspace-slug {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 2px;
}

.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 9px 16px;
  border: 1px solid #dadce0;
  border-radius: 6px;
  background: #fff;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
  margin-bottom: 16px;
  line-height: 1.4;
}
.btn-google svg { flex-shrink: 0; display: block; }
.btn-google:hover { background: #f8f9fa; border-color: #b0b8c4; }

.login-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.login-divider::before, .login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #dadce0;
}

/* ── ClickUp-style 3-pane shell (icon rail + submenu + main) ─────────────── */
:root {
  --rail-bg: #15131f;
  --rail-width: 54px;
  --submenu-width: 248px;
  --topbar-height: 48px;
}
.tshell { display: flex; flex-direction: column; height: 100vh; width: 100%; overflow: hidden; background: var(--surface-0); }

/* Global top bar: full-width row above the rail + submenu + main, so it can never be
   clipped or covered by the task-detail overlay (which only spans the area below it).
   Selector is `.tshell .tshell-topbar` (not bare `.tshell-topbar`) so its specificity
   (0,0,2,0) beats MudBlazor's own `.mud-appbar{z-index:var(--mud-zindex-appbar)}` rule
   (0,0,1,0) regardless of stylesheet load order — MudBlazor.min.css loads AFTER app.css,
   so on equal specificity its ~1100+ default AppBar z-index would otherwise win and bury
   the mobile hamburger (z-index 600 in responsive.css) underneath the top bar. */
.tshell .tshell-topbar {
  height: var(--topbar-height); flex-shrink: 0;
  background: var(--surface-1); border-bottom: 1px solid var(--border);
  padding: 0 16px; gap: 12px; z-index: 500;
}
.tshell-topbar-switcher-label {
  display: flex; align-items: center; gap: 4px; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--text-primary);
}

/* Row containing the icon rail + submenu + main pane, filling the remaining height below the top bar. */
.tshell-body { flex: 1; display: flex; min-height: 0; overflow: hidden; }

/* Icon rail */
.rail {
  width: var(--rail-width); flex-shrink: 0; background: var(--rail-bg);
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 0; gap: 2px; z-index: 30;
}
.rail-item {
  width: 40px; height: 40px; border-radius: 8px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  color: var(--sidebar-text-muted); transition: background .12s, color .12s; position: relative;
}
.rail-item:hover { background: rgba(255,255,255,.07); color: var(--sidebar-text); }
.rail-item.active { background: rgba(124,58,237,.22); color: #fff; }
.rail-item .rail-label { font-size: 8.5px; line-height: 1; font-weight: 500; }
.rail-spacer { flex: 1; }

/* ClickUp-style >> open control at the top of the collapsed icon rail */
.rail-expand-btn {
  width: 40px; height: 32px; border: none; border-radius: 8px; padding: 0;
  background: transparent; color: rgba(255,255,255,.75); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .12s, color .12s;
}
.rail-expand-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.rail-expand-divider {
  width: 28px; height: 1px; margin: 4px 0 6px;
  background: rgba(255,255,255,.12); flex-shrink: 0;
}

/* Submenu panel */
.submenu {
  width: var(--submenu-width); flex-shrink: 0; background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex; flex-direction: column; overflow: hidden; z-index: 20;
  transition: width .2s ease;
}
/* Pages that build their own full-page left nav (Dashboard, Goals, Planner, Timesheet, Clips, and
   any future rail item not added to TenantLayout's ShowSubmenuTree allow-list) get no generic
   Spaces tree here — collapse instead of showing stale/unrelated nav next to page content.
   Also used when the user collapses the panel via << / Ctrl+\. */
.submenu.submenu-collapsed { width: 0; border-right: none; }
.submenu-header {
  padding: 10px 10px 10px 14px; display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--sidebar-border); min-height: 48px;
}
.submenu-title { font-size: 14px; font-weight: 600; color: var(--sidebar-text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ClickUp-style << close control in the secondary panel header */
.sidebar-toggle-btn {
  width: 28px; height: 28px; flex-shrink: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--sidebar-border, #e2e8f0);
  border-radius: 6px;
  background: var(--surface-1, #fff);
  color: var(--sidebar-text-muted, #64748b);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.sidebar-toggle-btn:hover {
  background: var(--surface-2, #f1f5f9);
  color: var(--sidebar-text, #1e293b);
  border-color: var(--border, #cbd5e1);
}
.submenu-scroll { flex: 1; overflow-y: auto; padding: 6px 0; }
.submenu-section {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--sidebar-text-muted); padding: 10px 14px 4px; display: flex; align-items: center; gap: 6px;
}
.submenu-section .submenu-section-action { margin-left: auto; cursor: pointer; opacity: .7; }
.submenu-section .submenu-section-action:hover { opacity: 1; color: var(--sidebar-text); }

/* Custom space/folder/list nav tree */
.nav-tree { padding: 2px 0; }
.nav-tree-row {
    display: flex; align-items: center; gap: 3px;
    padding: 2px 6px; border-radius: 4px; cursor: pointer;
    text-decoration: none; color: var(--sidebar-text);
}
.nav-tree-row:hover { background: var(--sidebar-hover, rgba(255,255,255,.06)); }
.nav-tree-row.active,
.nav-tree-row.active:hover { background: rgba(124,58,237,.18); box-shadow: inset 2px 0 0 var(--accent, #7c3aed); }
.nav-tree-row.active .nav-tree-link,
.nav-tree-row.nav-tree-link.active { color: var(--accent-light, #a78bfa); font-weight: 500; }
.nav-expand-btn {
    display: flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; flex-shrink: 0;
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--sidebar-text-muted); border-radius: 3px;
}
.nav-expand-btn:hover { color: var(--sidebar-text); background: rgba(255,255,255,.08); }
.nav-tree-link {
    display: flex; align-items: center; gap: 5px;
    flex: 1; min-width: 0; color: var(--sidebar-text);
    text-decoration: none; font-size: 13px; padding: 2px 2px;
}
.nav-tree-link:hover { color: var(--sidebar-text); }
.nav-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.nav-children { padding-left: 18px; }
.nav-list-item { padding-left: 22px; font-size: 12px; color: var(--sidebar-text-muted); }
.nav-list-item:hover { color: var(--sidebar-text); }
.nav-drop-target { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; background: rgba(124,58,237,.12); }
.nav-add-row { color: var(--sidebar-text-muted); font-size: 13px; }
.nav-add-row:hover { color: var(--sidebar-text); }

/* Hover-revealed per-row actions (quick-add "+" and "..." menu), ClickUp-style */
.nav-row-actions { display: none; align-items: center; gap: 2px; flex-shrink: 0; padding-left: 4px; }
.nav-tree-row:hover .nav-row-actions,
.nav-tree-row:focus-within .nav-row-actions,
.nav-tree-row:has(.demo-pulse) .nav-row-actions { display: flex; }
/* Touch / coarse pointers have no hover — keep Add/More reachable on phones. */
@media (hover: none), (pointer: coarse) {
  .nav-row-actions { display: flex; opacity: 0.85; }
}
.nav-row-btn {
    display: flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 3px;
    color: var(--sidebar-text-muted); cursor: pointer;
}
.nav-row-btn:hover { color: var(--sidebar-text); background: rgba(255,255,255,.12); }
.nav-fav-star { color: #eab308; flex-shrink: 0; }
.nav-state-badge {
    flex-shrink: 0; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
    color: var(--sidebar-text-muted); background: rgba(255,255,255,.08);
    border-radius: 4px; padding: 1px 5px; margin-left: 4px;
}

/* Quick-add / context popup menu */
.ctx-menu {
    min-width: 224px; max-height: 80vh; overflow-y: auto;
    background: var(--surface-1, #fff); border: 1px solid var(--border);
    border-radius: 8px; box-shadow: 0 10px 38px rgba(0,0,0,.30); padding: 4px;
}
.ctx-head { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding: 8px 10px 4px; }
.ctx-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 5px; font-size: 13px; color: var(--text-primary); cursor: pointer; }
.ctx-item:hover { background: var(--accent-light, rgba(124,58,237,.14)); }
.ctx-item-icon { color: var(--text-muted); }
.ctx-item-lbl { flex: 1; }
.ctx-item-arrow { color: var(--text-muted); margin-left: auto; }
.ctx-danger, .ctx-danger .ctx-item-icon { color: var(--danger); }
.ctx-sep { height: 1px; background: var(--border); margin: 4px 2px; }
.ctx-swatches { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; max-width: 224px; }
.ctx-swatch { width: 22px; height: 22px; border-radius: 5px; cursor: pointer; border: 2px solid transparent; }
.ctx-swatch:hover { border-color: var(--text-primary); }
.ctx-swatch-none { display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--text-muted); font-size: 14px; }
.ctx-icons { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 10px 8px; max-width: 224px; }
.ctx-icon-opt { width: 26px; height: 26px; border-radius: 5px; cursor: pointer; border: 2px solid transparent; display: flex; align-items: center; justify-content: center; color: var(--text-secondary, var(--text-primary)); }
.ctx-icon-opt:hover { border-color: var(--text-primary); background: var(--surface-2); }
.ctx-icon-opt.selected { border-color: var(--accent); }
.ctx-icon-opt.ctx-icon-emoji { font-size: 15px; }
.ctx-icon-none { color: var(--text-muted); font-size: 14px; }
.ctx-toggle-row { display: flex; align-items: flex-start; gap: 8px; padding: 7px 10px; }

/* Icon/emoji picker (Space icon selection — CreateSpaceDialog's avatar button) */
.icon-emoji-picker {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 210;
  width: 240px;
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  padding-bottom: 4px;
}
.icon-emoji-picker-section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  padding: 8px 10px 2px;
}
.icon-emoji-picker-clear {
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px 10px;
  margin: 2px 6px 0;
  border-radius: 5px;
}
.icon-emoji-picker-clear:hover { background: var(--surface-2); color: var(--text-primary); }
.ctx-toggle-text { display: flex; flex-direction: column; flex: 1; }
.ctx-toggle-desc { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Dashboard / whiteboard / form editors */
.dash-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
.dash-card-title { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.dash-big { font-size: 32px; font-weight: 700; color: var(--text-primary); margin-top: 6px; line-height: 1.1; }
.dash-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.dash-chip { font-size: 12px; padding: 4px 10px; border-radius: 14px; border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; user-select: none; }
.dash-chip-on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Dashboard Phase B card library (TASK-263) */
.dash-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 720px) { .dash-grid { grid-template-columns: repeat(2, 1fr); } .dash-grid .dash-card { grid-column: span 2 !important; } }
.dash-card-v2 { display: flex; flex-direction: column; min-width: 0; }
.dash-card-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
/* SortableJS iOS fallback bails on !evt.cancelable; a parent overflow pan would steal the gesture. */
.dash-card-drag-handle { cursor: grab; color: var(--text-muted); font-size: 13px; user-select: none; touch-action: none; }
.dash-card-drag-handle:active { cursor: grabbing; }
.dash-card-head-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-card-btn { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 12px; padding: 2px 5px; border-radius: 4px; }
.dash-card-btn:hover { background: var(--surface-2); color: var(--text-primary); }
.dash-bar-row { cursor: pointer; }
.dash-bar-row:hover .dash-bar-label { color: var(--accent); }
.dash-pie { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dash-pie-legend { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.dash-pie-legend-item { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.dash-pie-swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.dash-battery { display: flex; align-items: center; gap: 10px; }
.dash-battery-track { flex: 1; height: 18px; border-radius: 9px; background: var(--surface-2); overflow: hidden; }
.dash-battery-fill { height: 100%; border-radius: 9px; }
.dash-line-svg { width: 100%; height: 90px; }
.dash-task-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--border-subtle); font-size: 12px; cursor: pointer; }
.dash-task-row:hover { background: var(--surface-2); }
.dash-task-row:last-child { border-bottom: none; }
.dash-task-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dash-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.dash-table th { text-align: left; padding: 4px 8px; color: var(--text-muted); font-weight: 600; border-bottom: 1px solid var(--border); }
.dash-table td { padding: 5px 8px; border-bottom: 1px solid var(--border-subtle); }
.dash-table tr { cursor: pointer; }
.dash-table tr:hover { background: var(--surface-2); }
.dash-add-menu { position: absolute; z-index: 40; background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.15); padding: 6px; min-width: 240px; max-height: 380px; overflow-y: auto; }
.dash-add-menu-cat { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); padding: 6px 8px 2px; }
.dash-add-menu-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.dash-add-menu-item:hover { background: var(--surface-2); }
.dash-portfolio-bar { background: var(--surface-2); border-radius: 4px; height: 6px; width: 60px; overflow: hidden; display: inline-block; vertical-align: middle; }
.dash-portfolio-bar-fill { height: 100%; background: var(--accent); }
.dash-embed-frame { width: 100%; height: 320px; border: none; border-radius: 6px; }

.wb-canvas {
    position: relative; width: 100%; min-height: 600px; height: 70vh; overflow: auto;
    background-color: var(--surface-0); background-image: radial-gradient(var(--border) 1px, transparent 1px);
    background-size: 22px 22px; border: 1px solid var(--border); border-radius: 10px;
}
.wb-engine-canvas {
    width: 100%; height: 100%; min-height: 480px; position: relative; overflow: hidden;
}
.mm-engine-canvas {
    width: 100%; height: 100%; min-height: 480px; position: relative; overflow: hidden;
}
.wb-editor { display:flex; flex-direction:column; height:100%; min-height:0; }
.wb-editor-bar { flex-shrink:0; display:flex; align-items:center; gap:8px; padding:6px 10px; border-bottom:1px solid var(--border); background:var(--surface-0); }
.wb-editor-stage { flex:1; min-height:0; position:relative; }
.wb-task-picker {
    position:absolute; top:8px; left:8px; z-index:5; width:260px; max-height:min(70%, 420px);
    display:flex; flex-direction:column; background:var(--surface-1,#fff); border:1px solid var(--border);
    border-radius:10px; box-shadow:0 8px 24px rgba(15,23,42,.12); padding:10px;
}
.wb-task-picker-list { overflow-y:auto; margin-top:8px; }
.wb-task-picker-empty { font-size:12px; color:var(--text-muted); padding:12px 4px; text-align:center; }
.wb-pick-row {
    display:flex; flex-direction:column; gap:2px; width:100%; text-align:left; background:transparent;
    border:none; border-radius:8px; padding:8px; cursor:grab; color:var(--text-primary);
}
.wb-pick-row:hover { background:var(--surface-2,rgba(15,23,42,.06)); }
.wb-pick-name { font-size:13px; font-weight:600; }
.wb-pick-meta { font-size:11px; }
.wb-note {
    position: absolute; width: 200px; min-height: 120px; border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,.18); padding: 6px; cursor: grab; display: flex; flex-direction: column;
}
.wb-note-bar { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.wb-dot { width: 14px; height: 14px; border-radius: 50%; cursor: pointer; border: 1px solid rgba(0,0,0,.15); }
.wb-del { background: none; border: none; cursor: pointer; color: var(--text-secondary); font-size: 13px; line-height: 1; padding: 0 2px; }
.wb-note textarea { flex: 1; resize: none; border: none; background: transparent; outline: none; font-size: 13px; color: var(--text-primary); font-family: inherit; }
.submenu-footer {
  border-top: 1px solid var(--sidebar-border); padding: 8px 10px;
  display: flex; align-items: center; gap: 8px;
}

/* Main pane */
.tmain { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--surface-0); }

/* Top global search bar (ClickUp-style quick search). The results dropdown lives inside a
   MudPopover, which positions itself dynamically off the input via MudPopoverProvider's JS —
   no more manually-guessed pixel offsets, and it isn't clipped by any ancestor's overflow:hidden. */
.topsearch-input {
  width: 220px; padding: 6px 10px 6px 30px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface-1);
  color: var(--text-primary); transition: width .15s ease;
}
.topsearch-input:focus { width: 320px; outline: none; border-color: var(--accent); }
.topsearch-results-popover { width: 380px; }
.topsearch-kind-pills { display:flex; flex-wrap:wrap; gap:4px; padding:8px 10px 4px; }
.topsearch-kind { font-size:10px; color:var(--text-muted); text-transform:uppercase; flex-shrink:0; width:52px; }
.topsearch-results {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 10px 38px rgba(0,0,0,.25); max-height: 360px; overflow-y: auto; padding: 4px;
}
.topsearch-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 5px; cursor: pointer; }
.topsearch-row:hover { background: var(--accent-light, rgba(124,58,237,.14)); }
.topsearch-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.topsearch-name { flex: 1; min-width: 0; font-size: 13px; color: var(--text-primary); }
.topsearch-list { font-size: 11px; color: var(--text-muted); max-width: 90px; }
.topsearch-empty { padding: 10px 12px; font-size: 12px; color: var(--text-muted); }
.topsearch-seeall { padding: 8px 10px; font-size: 12px; color: var(--accent); cursor: pointer; border-top: 1px solid var(--border); margin-top: 2px; }

/* Click-outside trap for MudPopover-based dropdowns (MudPopover has no built-in outside-click close) */
.shell-backdrop { position: fixed; inset: 0; z-index: 399; }
.shell-menu-label {
  padding: 8px 16px 4px; font-size: 11px; font-weight: 600;
  color: var(--sidebar-text-muted); text-transform: uppercase; letter-spacing: .04em;
}

/* User profile dropdown content (rendered inside a MudMenu, light theme) */
.user-dropdown-sep { border: none; border-top: 1px solid var(--border); margin: 0; }
.user-dropdown-section-label {
  padding: 6px 16px 2px; font-size: 11px; font-weight: 600;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em;
}
.user-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; cursor: pointer; color: var(--text-primary);
  white-space: nowrap; transition: background .1s;
}
.user-menu-item:hover { background: var(--surface-2); }
.user-menu-item.danger { color: var(--danger, #ef4444); }
.user-menu-item .mud-icon-root { width: 18px; height: 18px; font-size: 18px; flex-shrink: 0; color: var(--text-muted); }
.user-menu-item.danger .mud-icon-root { color: var(--danger, #ef4444); }

/* MudNavMenu theming to fit the dark submenu (overrides MudBlazor light defaults) */
.submenu .mud-nav-link { color: var(--sidebar-text); font-size: 13px; padding: 6px 14px; min-height: 32px; }
.submenu .mud-nav-link:hover { background: var(--sidebar-hover); }
.submenu .mud-nav-link.active { background: var(--sidebar-active); color: #fff; }
.submenu .mud-nav-link .mud-nav-link-icon { color: var(--sidebar-text-muted); margin-right: 8px; }
.submenu .mud-nav-group .mud-nav-link-text,
.submenu .mud-nav-link .mud-nav-link-text { color: inherit; }
.submenu .mud-nav-group > .mud-nav-link { color: var(--sidebar-text); }
.submenu .mud-list-item-icon { min-width: 28px; }

/* ── Sidebar ───────────────────────────────────────────────────────────── */

.sidebar {
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--sidebar-border);
  overflow: hidden;
  transition: width 0.2s ease;
}

.sidebar-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--sidebar-border);
}

.sidebar-logo {
  font-weight: 700;
  font-size: 16px;
  color: var(--accent-light);
  letter-spacing: -0.3px;
}

.sidebar-workspace-name {
  font-size: 11px;
  color: var(--sidebar-text-muted);
  margin-top: 1px;
}

.sidebar-nav { flex: 1; overflow-y: auto; padding: 8px 0; }

.sidebar-section {
  padding: 4px 8px 2px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sidebar-text-muted);
  margin-top: 8px;
}

.sidebar-item {
  padding: 5px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  margin: 0 4px;
  font-size: 13px;
  color: var(--sidebar-text);
  text-decoration: none;
  transition: background 0.1s;
}

.sidebar-item:hover { background: var(--sidebar-hover); }
.sidebar-item.active { background: var(--sidebar-active); color: var(--accent-light); }

.sidebar-item .space-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sidebar-footer {
  padding: 8px 12px;
  border-top: 1px solid var(--sidebar-border);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Main Content Area ─────────────────────────────────────────────────── */

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-0);
  min-width: 0;
}

/* ── Topbar ────────────────────────────────────────────────────────────── */

.topbar {
  height: 44px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 56px 0 16px;
  gap: 12px;
  flex-shrink: 0;
}

.breadcrumb { font-size: 12px; color: var(--text-muted); }
.breadcrumb strong { color: var(--text-primary); font-weight: 600; }

.view-tabs {
  display: flex;
  gap: 1px;
  background: var(--surface-2);
  padding: 2px;
  border-radius: 6px;
  border: 1px solid var(--border);
}

.view-tab {
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  color: var(--text-muted);
  border: none;
  background: transparent;
}

.view-tab.active {
  background: var(--surface-1);
  color: var(--text-primary);
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.view-tab-group-divider {
  width: 1px;
  align-self: stretch;
  margin: 2px 4px;
  background: var(--border);
}

/* Saved-view tabs are drag-reorderable (TASK-306, ListPage.razor's HandleSavedViewDrop) --
   same drop-target treatment as the List/Table column headers below. */
.view-tab[draggable="true"] { cursor: grab; }
.view-tab[draggable="true"]:active { cursor: grabbing; }
.view-tab.view-tab-drop-target {
  background: var(--accent-light, #ede9fe);
  outline: 2px solid var(--accent, #6366f1);
  outline-offset: -2px;
}

.topbar-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }

/* ── Toolbar ───────────────────────────────────────────────────────────── */

.toolbar {
  min-height: 36px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 6px;
  flex-shrink: 0;
}

.filter-chip {
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  background: transparent;
}

.filter-chip:hover { border-color: var(--text-muted); }
.filter-chip.active { background: var(--accent-light); color: var(--accent); border-color: var(--accent); font-weight: 600; }

.search-page { max-width: 760px; }
.search-kind-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.search-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.search-filter { display: flex; flex-direction: column; gap: 2px; min-width: 140px; flex: 1; }
.search-filter span { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.search-filter select { font-size: 12px; padding: 4px 8px; }
.search-result-section { margin-top: 16px; }
.search-result-section h2 { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 6px; }
.search-hit { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
.search-hit:hover { border-color: var(--accent); }
.search-hit-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── Task List ─────────────────────────────────────────────────────────── */

.list-content { flex: 1; overflow-y: auto; }

.list-header-row {
  display: grid;
  grid-template-columns: 24px 110px 1fr 90px 90px 70px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-0);
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1;
}

.task-row {
  display: grid;
  grid-template-columns: 24px 110px 1fr 90px 90px 70px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border-subtle);
  align-items: center;
  cursor: pointer;
  transition: background 0.05s;
  /* Required, not cosmetic. Most .task-row lists (My Tasks, Search, the detail panel's
     subtasks) put these rows inside a `display:grid` wrapper, which makes each row a GRID
     ITEM — and a grid/flex item's automatic minimum size is its min-content width, not 0.
     The row's children are all `white-space:nowrap` (.truncate), so min-content is the full
     untruncated width of every column added up: measured 919px on a real My Tasks row.
     That automatic minimum outranks the wrapper's own `max-width:760px`, so the row broke
     out of the container that was supposed to cap it, and `.main-content`'s
     `overflow-x:hidden` then CLIPPED the excess with no scrollbar — unreachable, at every
     viewport narrower than ~943px, which includes a 1024px laptop, not just phones.
     min-width:0 restores the declared 760px cap and lets .truncate do its job.
     Measured before/after: 430px viewport 919px -> 382px (page overflow 513px -> 0);
     1024px 919 -> 674; 1700px 919 -> 760 (i.e. exactly the wrapper's max-width). */
  min-width: 0;
}

.task-row:hover { background: var(--accent-light); }
.task-row:hover .task-name { color: var(--accent); }

/* ── Task List: dynamic columns (ListPage's List View only — see FieldsPanel) ────────────
   Deliberately separate from .list-header-row/.task-row above rather than making those
   dynamic: those two classes are also used unmodified by My Tasks, Search, and the task
   detail panel's own subtask rendering, none of which participate in per-List column config.
   grid-template-columns is set inline per view (see TaskListView.razor/NestedTaskRow.razor)
   since the column count varies; everything else mirrors .list-header-row/.task-row exactly
   so the default 4-column view is visually identical to the fixed layout it replaces. */
.tlv-header-row {
  display: grid;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-0);
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1;
}
.tlv-row {
  display: grid;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border-subtle);
  align-items: center;
  cursor: pointer;
  transition: background 0.05s;
  min-width: 0;
}
.tlv-row:hover { background: var(--accent-light); }
.tlv-row:hover .task-name { color: var(--accent); }

/* Drag-reorderable List/Table view column headers — TaskListView.razor/TableView.razor. */
.tlv-col-header, .table-col-header { cursor: grab; user-select: none; }
.table-col-header { position: relative; }
.tlv-ai-refresh, .table-ai-refresh {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; cursor: pointer; z-index: 1;
  padding: 0 2px; font-size: 11px; line-height: 1; color: var(--accent);
}
.tlv-ai-refresh:hover, .table-ai-refresh:hover { filter: brightness(1.15); }
.tlv-col-header:active, .table-col-header:active { cursor: grabbing; }
.tlv-col-header.col-drop-target, .table-col-header.col-drop-target {
  background: var(--accent-light, #ede9fe);
  outline: 2px solid var(--accent, #6366f1);
  outline-offset: -2px;
}

/* ClickUp-style column resize grip on the right edge of Status + dynamic headers.
   Task name has none — it stays the flex 1fr track. */
.tlv-col-resizable { position: relative; }
.tlv-col-resize {
  position: absolute; top: 0; right: -3px; bottom: 0; width: 7px;
  padding: 0; margin: 0; border: none; background: transparent;
  cursor: col-resize; z-index: 2;
}
.tlv-col-resize:hover, .tlv-col-resize:focus-visible {
  background: linear-gradient(to right, transparent 2px, var(--accent, #7c3aed) 2px, var(--accent, #7c3aed) 4px, transparent 4px);
  outline: none;
}
body.tlv-col-resizing { cursor: col-resize !important; user-select: none !important; }
body.tlv-col-resizing * { cursor: col-resize !important; }

/* A fixed-width grid track never grows to fit its content, so anything wider than its column —
   a long custom-field header ("Total time in Status"), a 3-avatar stack in the narrowed phone
   columns — would spill over the NEXT column instead of being clipped. min-width:0 is required
   for that: without it a grid item's automatic minimum size is its content, which keeps the item
   box wider than its track (the track itself stays put) and defeats the ellipsis. */
.tlv-col-header, .tlv-col-cell {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-name {
  font-size: 13px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Without an explicit min-width, a CSS Grid item with overflow:hidden gets an automatic minimum
     size of 0 (not its content size) — inside .tlv-row's dynamic-column grid (see responsive.css's
     #task-list note) that let this 1fr column collapse to ~0px on narrow viewports while the
     neighboring fixed-width column visually/hit-test-wise landed on top of the invisible name. */
  min-width: 100px;
}

/* .task-name is a flex container (the row also holds an expand caret and a subtask-count badge),
   and text-overflow only ellipsizes a block's own inline content — the name in a child <span>
   just got cut off mid-word instead. Ellipsize that span itself; min-width:0 is what lets a flex
   item shrink below its content width at all. */
.task-name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Status Badges ─────────────────────────────────────────────────────── */

.status-badge {
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

/* ── Priority Dots ─────────────────────────────────────────────────────── */

.priority-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.priority-urgent { background: var(--pri-urgent); }
.priority-high { background: var(--pri-high); }
.priority-normal { background: var(--pri-normal); }
.priority-low { background: var(--pri-low); }
.priority-none { background: var(--border); }

/* ── Assignee Avatars ──────────────────────────────────────────────────── */

.avatar-stack { display: flex; }
.avatar-sm {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--surface-1);
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  background: var(--surface-2);
}
.avatar-sm:not(:first-child) { margin-left: -5px; }

.avatar-md {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-light);
  color: var(--accent);
  flex-shrink: 0;
}

/* ── Section Group Headers ─────────────────────────────────────────────── */

.group-header {
  padding: 7px 12px 5px;
  background: var(--surface-0);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}

.group-count { font-size: 10px; font-weight: 400; color: var(--text-muted); }
.group-drop-target { background: var(--accent-light, #ede9fe); color: var(--accent, #6366f1); border-bottom-color: var(--accent, #6366f1); }
.group-overdue { color: #ef4444; }
.group-header-nested { font-weight: 500; background: var(--surface-1); }

/* ── List view Group by / Show subtasks pills (ClickUp parity) ─────────── */

.lvt-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid color-mix(in srgb, var(--accent, #6366f1) 35%, var(--border));
  border-radius: 14px;
  font-size: 12px;
  color: var(--accent, #6366f1);
  background: color-mix(in srgb, var(--accent, #6366f1) 12%, transparent);
  cursor: pointer;
}
.lvt-pill:hover { border-color: var(--accent, #6366f1); }
.lvt-pill-icon { font-size: 11px; opacity: 0.85; }
.lvt-popover {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 50;
  min-width: 260px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lvt-popover-label { font-size: 11px; color: var(--text-muted); }
.lvt-group-row { display: flex; align-items: center; gap: 6px; }
.lvt-select { width: auto; font-size: 12px; padding: 4px 8px; flex: 1; }
.lvt-trash { font-size: 14px; padding: 2px 6px; }
.lvt-divider { height: 1px; background: var(--border); margin: 2px 0; }
.lvt-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--text-primary);
  cursor: pointer;
}
.lvt-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
}
.lvt-menu-item:hover { background: var(--surface-2); }
.lvt-menu-item.active { color: var(--accent, #6366f1); }
.lvt-check { color: var(--accent, #6366f1); font-weight: 700; }
.lvt-hint { font-size: 11px; color: var(--text-muted); padding: 0 8px 4px; }

/* All Tasks preset view pills — own row under the topbar so phone left/right chrome
   (hamburger / account) can't occlude the first pills inside .topbar's 52px padding. */
.all-tasks-pills {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  overflow-x: auto;
  flex-shrink: 0;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-1);
  -webkit-overflow-scrolling: touch;
}
.all-tasks-pill {
  padding: 6px 12px;
  border: none;
  background: transparent;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.all-tasks-pill:hover { color: var(--text-primary); }
.all-tasks-pill.active {
  color: var(--text-primary);
  font-weight: 600;
  border-bottom-color: var(--accent, #6366f1);
}

/* ── Add Task Row ──────────────────────────────────────────────────────── */

.add-task-row {
  padding: 6px 12px;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.add-task-row:hover { color: var(--accent); background: var(--accent-light); }

/* ── Buttons ───────────────────────────────────────────────────────────── */

.btn {
  padding: 5px 12px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  transition: background 0.1s, opacity 0.1s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-danger { background: var(--danger); color: #fff; }

/* ── Task Detail Panel ─────────────────────────────────────────────────── */

.task-panel-overlay {
  /* Overlay starts at the right edge of the submenu so the task panel fills the full main area,
     and below the global top bar so the search box + workspace switcher (z-index: 500) always
     stay on top of and clear of the panel instead of being covered by it. */
  position: fixed;
  top: var(--topbar-height, 48px); bottom: 0; right: 0;
  left: calc(var(--rail-width, 54px) + var(--submenu-width, 248px));
  background: rgba(0,0,0,0.15);
  z-index: 100;
  display: flex;
  justify-content: flex-end;
}

.task-panel {
  width: 78%;
  height: 100%;
  background: var(--surface-1);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: -4px 0 16px rgba(0,0,0,0.08);
  animation: slide-in 0.15s ease-out;
  /* Query container for the sidebar-stacking breakpoint below. This has to live here
     rather than on .task-panel-main: a container query can't restyle the very element
     that establishes the container (CSS Containment spec excludes the container itself
     from being a "subject" of its own query), and .task-panel-main is the element that
     breakpoint needs to flip to flex-direction:column. */
  container-type: inline-size;
  container-name: task-panel;
}

@keyframes slide-in {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* Full-screen mode: toggled from the header button (task-panel-fullscreen-toggle), and forced
   unconditionally on phone (responsive.css) where there's no room for a docked, dimmed panel.
   Drops the backdrop and lets the panel take the full width instead of 78% docked right.
   `top` stays at --topbar-height (not 0): the global top bar sits at z-index:500, above this
   overlay's z-index:100, specifically so it's never covered (see .tshell-topbar's own comment) --
   pulling the panel up under it would just bury the panel's own header underneath the topbar. */
.task-panel-overlay.fullscreen {
  left: 0;
  background: var(--surface-1);
}
.task-panel-overlay.fullscreen .task-panel {
  width: 100%;
  border-left: none;
  box-shadow: none;
}

.task-panel-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* ClickUp-style type dropdown + ID copy, sits under breadcrumb / above title */
.task-panel-typebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px 0;
  flex-shrink: 0;
}
.task-type-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  line-height: 1.4;
}
.task-type-trigger:hover { border-color: var(--accent); color: var(--text-primary); }
.task-type-trigger-icon { font-size: 13px; }
.task-type-trigger-caret { font-size: 9px; color: var(--text-muted); }
.task-type-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 210;
  min-width: 240px;
  max-width: 300px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.task-type-menu-search {
  width: 100%;
  box-sizing: border-box;
  font-size: 12px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text-primary);
  margin-bottom: 4px;
}
.task-type-menu-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 4px 6px 2px;
}
.task-type-menu-edit {
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--accent);
  text-decoration: none;
}
.task-type-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
}
.task-type-menu-item:hover { background: var(--surface-2); }
.task-type-menu-item.selected { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.task-type-menu-item-icon { width: 18px; text-align: center; flex-shrink: 0; }
.task-type-menu-check { color: var(--accent); font-size: 12px; }
.task-type-menu-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px;
}
.task-type-menu-create {
  display: block;
  margin-top: 4px;
  padding: 6px 8px;
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  border-top: 1px solid var(--border-subtle);
}
.task-type-menu-create:hover { text-decoration: underline; }
.task-id-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 24px;
  height: 24px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  padding: 0 8px;
  color: var(--text-secondary);
}
.task-id-copy:hover { border-color: var(--accent); color: var(--accent); }
.task-id-copy-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.task-id-copy-value {
  font-size: 11px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;
}
/* Narrow phones: type trigger + full ID text can't both fit under the breadcrumb row, so drop the value and keep just the ID button (still copyable via tap + toast). */
@media (max-width: 380px) {
  .task-id-copy-value { display: none; }
  .task-id-copy { padding: 0; width: 28px; }
}

.task-panel-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  font-family: inherit;
}

.task-panel-close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 18px;
  padding: 2px;
  flex-shrink: 0;
}

.task-panel-close:hover { color: var(--text-primary); }

/* Properties bar: full-width 3-column grid, sits between header and body */
.task-props-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.task-props-bar .prop-row {
  border-right: 1px solid var(--border);
  border-radius: 0;
  padding: 0 12px;
  margin: 0;
  grid-template-columns: 84px 1fr;
  min-height: 38px;
}
.task-props-bar .prop-row:nth-child(3n) { border-right: none; }

/* Two-pane body: scrollable content (left) + activity/comments sidebar (right). */
.task-panel-main {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

/* Left: all content sections scroll together */
.task-panel-content {
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
}

/* Right: activity feed on top + comments on bottom */
.task-panel-right {
  width: 300px;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.task-activity-feed {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.task-comments-panel {
  flex: 0 0 380px;
  border-top: 1px solid var(--border);
  overflow-y: auto;
}

/* Comments-on-left toggle: swap sides and give the sidebar room for wide
   content (tables, long code) that gets clipped at the default 300px. */
.task-panel-right.comments-left {
  order: -1;
  width: min(680px, 50%);
  border-left: none;
  border-right: 1px solid var(--border);
}

/* Inline content sections */
.task-section {
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
}
.task-section-desc { padding-top: 4px; padding-bottom: 0; }
.task-section-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.task-section-body { padding-bottom: 16px; }
.task-section-count {
  background: var(--surface-2);
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

/* Narrow screens: stack panes vertically */
@media (max-width: 900px) {
  .task-panel { width: 100vw; }
  .task-props-bar { grid-template-columns: repeat(2, 1fr); }
  .task-props-bar .prop-row:nth-child(3n) { border-right: 1px solid var(--border); }
  .task-props-bar .prop-row:nth-child(2n) { border-right: none; }
}

/* Activity/comments sidebar is secondary to the description, so once the panel
   itself doesn't have room for a 300px sidebar alongside readable content,
   drop it below the content column instead of squeezing both. Queries the
   .task-panel container (see its container-type above), not the browser
   viewport, since the panel is only 78% of the space right of the rail+submenu
   and can be narrow well before the window itself is. */
@container task-panel (max-width: 700px) {
  .task-panel-main { flex-direction: column; overflow-y: auto; }
  /* .task-panel-content keeps its desktop flex:1 1 auto + overflow-y:auto (base rule above)
     otherwise: stacked with .task-panel-right (which no longer clips to a fixed height below),
     flex-shrink's automatic-minimum-size-0 rule (triggered by this element's own overflow-y:auto)
     lets the flex algorithm crush this pane toward 0 height to make room for its
     flex-shrink:0 sibling, hiding the Description and turning this into a second, nearly-zero-
     height scroll container fighting the outer .task-panel-main for touch-scroll input. */
  .task-panel-content { order: 1; flex: none; overflow-y: visible; }
  .task-panel-right {
    order: 2;
    width: auto;
    border-left: none;
    border-top: 1px solid var(--border);
    flex: 0 0 auto;
    overflow: visible;
  }
  .task-activity-feed { flex: none; overflow-y: visible; }
  .task-comments-panel { flex: none; }
}

/* ── Fields panel (ClickUp-parity "Add" column picker) ──────────────────── */
/* Narrower sibling of .task-panel-overlay/.task-panel — same slide-in overlay
   language, own width so it doesn't inherit the task detail panel's 78%. */
.fields-panel-overlay {
  position: fixed;
  top: var(--topbar-height, 48px); bottom: 0; right: 0;
  left: calc(var(--rail-width, 54px) + var(--submenu-width, 248px));
  background: rgba(0,0,0,0.15);
  z-index: 210;
  display: flex;
  justify-content: flex-end;
}
.fields-panel {
  width: 380px;
  max-width: 100vw;
  height: 100%;
  background: var(--surface-1);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: -4px 0 16px rgba(0,0,0,0.08);
  animation: slide-in 0.15s ease-out;
}
.fp-search { padding: 10px 16px; border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; }
.fp-search input { width: 100%; }
.fp-tabs { display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.fp-tab {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.fp-tab.active { color: var(--text-primary); border-bottom-color: var(--accent); }
.fp-body { flex: 1; overflow-y: auto; }
.fp-type-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  padding: 0 20px 12px;
}
.fp-type-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-0);
  cursor: pointer;
  font-size: 12px;
  color: var(--text-primary);
}
.fp-type-card:hover { border-color: var(--accent); background: var(--surface-2); }
.fp-type-card.disabled { opacity: 0.5; cursor: not-allowed; }
.fp-type-card.disabled:hover { border-color: var(--border); background: var(--surface-0); }
.fp-type-icon { font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; }
.fp-type-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 20px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
}
.fp-type-row:hover { background: var(--surface-2); }
.fp-type-row.disabled { opacity: 0.5; cursor: not-allowed; }
.fp-type-row.disabled:hover { background: none; }
.fp-attach-row:hover { background: var(--surface-2); }
.fp-badge-new {
  font-size: 9px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-light);
  border-radius: 8px;
  padding: 1px 6px;
  text-transform: uppercase;
}
.fp-empty-state { padding: 10px 20px 4px; font-size: 12px; color: var(--text-muted); }
.fp-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 20px;
  font-size: 13px;
  color: var(--text-primary);
}
.fp-toggle-row.disabled { color: var(--text-muted); }
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 17px;
  flex-shrink: 0;
  border-radius: 10px;
  border: none;
  background: var(--border);
  cursor: pointer;
  transition: background 0.12s;
}
.toggle-switch.on { background: var(--accent); }
.toggle-switch:disabled { cursor: not-allowed; opacity: 0.5; }
.toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.12s;
}
.toggle-switch.on::after { transform: translateX(13px); }
.fp-collapsible-hdr { cursor: pointer; user-select: none; }
.fp-collapsible-hdr:hover { color: var(--text-secondary); }
.fp-apply-all-link {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
}
.fp-apply-all-link:hover { text-decoration: underline; }

/* ── Task detail: labeled property rows ─────────────────────────────────── */
/* One property per row: icon+label on the left, control on the right. */
.prop-row {
  display: grid;
  grid-template-columns: 112px 1fr;
  align-items: center;
  min-height: 34px;
  padding: 0 6px;
  margin: 0 -6px;
  border-radius: 6px;
}
.prop-row:hover { background: var(--surface-2); }

.prop-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

.prop-label .prop-ico {
  width: 16px;
  text-align: center;
  font-size: 13px;
  opacity: 0.8;
  flex-shrink: 0;
}

.prop-value {
  font-size: 13px;
  color: var(--text-primary);
  min-width: 0;
  display: flex;
  align-items: center;
}

/* Controls read as plain text until hovered/focused (ClickUp-style inline edit).
   The -8px pull cancels the control's own left padding so its text aligns to the column. */
.prop-input {
  font-size: 13px;
  padding: 4px 8px;
  margin-left: -8px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
  cursor: pointer;
  max-width: 100%;
}

.prop-input:hover { border-color: var(--border); background: var(--surface-1); }
.prop-input:focus { outline: none; border-color: var(--accent); background: var(--surface-1); }

/* Description block (always visible) */
.task-desc-block { padding: 14px 20px; border-bottom: 1px solid var(--border); }

.prop-section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 7px;
}

.task-desc-editor {
  min-height: 80px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary);
  outline: none;
}

.task-desc-editor:focus { border-color: var(--accent); }

/* Dropdown menu rows (account menu, workspace switcher) */
.menu-row {
  padding: 6px 8px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary);
  white-space: nowrap;
}
.menu-row:hover { background: var(--surface-2, rgba(0,0,0,0.05)); }

/* ── Kanban Board ──────────────────────────────────────────────────────── */

.board-content {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  gap: 12px;
  padding: 12px;
  align-items: flex-start;
}

.kanban-column {
  width: 220px;
  flex-shrink: 0;
  background: var(--surface-2);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 120px);
}

.kanban-column-header {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.kanban-cards { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }

.kanban-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: box-shadow 0.1s;
  /* SortableJS iOS fallback bails on !evt.cancelable. overflow-y on .kanban-cards
     and overflow-x on .board-content would otherwise mark the touch as a pan. */
  touch-action: none;
}

.kanban-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

.kanban-card-name {
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kanban-card-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kanban-card-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 6px; }
.tag-pill {
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  background: var(--surface-2);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.kanban-card-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

.kanban-card-footer .spacer { flex: 1; }

/* ── Team view (ClickUp Box/Team view, TASK-258) ───────────────────────── */
.team-view { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; padding: 12px; }
.team-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.team-show-menu { position: relative; }
.team-show-panel {
  position: absolute; top: 100%; left: 0; margin-top: 4px; z-index: 40;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.18); width: 220px;
  display: flex; flex-direction: column; gap: 6px;
}
.team-show-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-primary); cursor: pointer; }
.team-boxes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px; align-items: start; overflow: auto; flex: 1; min-height: 0;
}
.team-box {
  background: var(--surface-2); border-radius: 8px; border: 1px solid var(--border);
  display: flex; flex-direction: column; min-height: 120px;
}
.team-box-header {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 600;
  color: var(--text-primary);
}
.team-box-load { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--text-muted); flex-shrink: 0; }
.team-box-cards { min-height: 80px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.team-status-label {
  font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: .03em; padding: 6px 2px 2px; display: flex; align-items: center; gap: 6px;
}
.team-card-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-report {
  background: var(--surface-2); border-radius: 8px; padding: 12px 14px;
  border: 1px solid var(--border); flex-shrink: 0;
}
.team-report-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); margin-bottom: 6px; }
.team-report-row { font-size: 13px; color: var(--text-primary); padding: 2px 0; }
.team-report-count { color: var(--text-muted); font-size: 12px; }

/* ── Due Date ──────────────────────────────────────────────────────────── */

.due-date { font-size: 11px; color: var(--text-muted); }
.due-overdue { color: var(--danger); font-weight: 500; }
.due-soon { color: var(--warning); }

/* ── Empty States ──────────────────────────────────────────────────────── */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  text-align: center;
  color: var(--text-muted);
}

.empty-state-icon { font-size: 40px; margin-bottom: 16px; opacity: 0.6; }
.empty-state-title { font-size: 16px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.empty-state-body { font-size: 13px; margin-bottom: 20px; max-width: 320px; }

/* ── Login Pages ───────────────────────────────────────────────────────── */
/* (canonical definition is above; this section handles only the admin dark-theme overrides) */

/* Super-admin login — dark theme */
.login-page-admin {
  background: #0f0f17;
}

.login-page-admin .login-card {
  background: #1a1a2a;
  border-color: #313244;
}

.login-page-admin .login-card .app-name {
  color: #f59e0b;
}

.login-page-admin .admin-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #f59e0b;
  margin-bottom: 16px;
}

.login-page-admin input {
  background: #252535;
  border-color: #313244;
  color: #cdd6f4;
}

/* ── Form Elements ─────────────────────────────────────────────────────── */

.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-bottom: 4px; }
.form-control {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--surface-1);
  outline: none;
  transition: border-color 0.1s;
}
.form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-light); }

.cl-space-field { position: relative; }
.cl-space-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 13px;
  color: var(--text-primary);
  background: var(--surface-1);
  cursor: pointer;
}
.cl-space-picker:hover { border-color: var(--accent); }
.cl-space-picker-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-space-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  padding: 4px;
  z-index: 10;
}
.cl-space-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 5px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
}
.cl-space-option:hover { background: var(--surface-2); }
.cl-space-option.selected { background: var(--surface-2); font-weight: 600; }

/* ── Super-Admin pages ─────────────────────────────────────────────────── */

.admin-shell {
  min-height: 100vh;
  background: #0f0f17;
  color: #cdd6f4;
  font-family: 'Inter', sans-serif;
  display: flex;
}

/* TASK-227: left sidebar (was a top bar) — sticky full-height rail so the growing link list
   scales vertically instead of wrapping across a fixed-height header. */
.admin-sidebar {
  flex: 0 0 220px;
  width: 220px;
  background: #1a1a2a;
  border-right: 1px solid #313244;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.admin-sidebar-brand { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.admin-sidebar .logo { font-weight: 700; color: #f59e0b; font-size: 16px; }
.admin-sidebar .label { font-size: 10px; color: #6c7086; text-transform: uppercase; letter-spacing: 0.08em; }

.admin-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
}
.admin-sidebar-nav a {
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 12px;
  text-decoration: none;
}
.admin-sidebar-nav a:hover { background: #232338; color: #cdd6f4; }

/* Not pinned to the sidebar's bottom edge (e.g. via margin-top:auto) on purpose -- the support
   widget launcher (wwwroot/support/widget.js) is a position:fixed, always-on-top corner button
   that a bottom-pinned link would sit directly under, making it unclickable. */
.admin-sidebar-signout {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #313244;
  color: #6c7086;
  font-size: 11px;
  text-decoration: none;
}
.admin-sidebar-signout:hover { color: #cdd6f4; }

/* Phone: collapse the rail back into a wrapping top bar — these SuperAdmin pages render static
   (no interactive circuit, see SuperAdminBackLink.razor), so a JS/checkbox-driven drawer isn't an
   option here; wrapping is the same strategy the old .admin-topbar-nav used. */
@media (max-width: 680px) {
  .admin-shell { flex-direction: column; }
  .admin-sidebar {
    width: auto;
    flex: none;
    height: auto;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    border-right: none;
    border-bottom: 1px solid #313244;
    padding: 8px 20px;
    gap: 8px 16px;
  }
  .admin-sidebar-brand { flex-direction: row; align-items: center; gap: 8px; margin-bottom: 0; }
  .admin-sidebar-nav {
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1 1 100%;
    margin-top: 0;
    gap: 4px 12px;
    order: 3;
  }
  .admin-sidebar-nav a { padding: 3px 0; border-radius: 0; border-left: none !important; }
  .admin-sidebar-signout { margin-top: 0; padding-top: 0; border-top: none; }

  /* Cross-axis auto margins override stretch once .admin-shell becomes a column flex container,
     shrinking .admin-content to its intrinsic content width (e.g. a wide table) instead of filling
     the viewport -- that horizontal overflow is what let it cover the page below the collapsed rail. */
  .admin-content { width: 100%; margin: 0; }
}

.admin-content { flex: 1; min-width: 0; max-width: 960px; margin: 0 auto; padding: 24px 20px; }

/* ── Utility ───────────────────────────────────────────────────────────── */

.text-muted { color: var(--text-muted) !important; }
.text-danger { color: var(--danger) !important; }
.text-success { color: var(--success) !important; }
.flex { display: flex; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.gap-2 { gap: 8px; }
.ml-auto { margin-left: auto; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* ── Rich Text Editor (Quill) ─────────────────────────────────────────── */

.rich-editor-wrap {
  max-width: 100%;
  overflow-x: hidden;
}

.rich-editor-wrap .ql-toolbar {
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: var(--surface-2);
}

.rich-editor-wrap .ql-container {
  border: 1px solid var(--border);
  border-radius: 0 0 6px 6px;
  background: var(--surface-1);
  font-family: inherit;
  font-size: 13px;
  color: var(--text-primary);
  min-height: 80px;
}

.rich-editor-wrap .ql-editor {
  min-height: 80px;
  color: var(--text-primary);
  overflow-wrap: break-word;
  word-break: break-word;
}

.rich-editor-wrap .ql-editor.ql-blank::before {
  color: var(--text-muted);
  font-style: normal;
}

.rich-editor-wrap .ql-snow .ql-stroke { stroke: var(--text-secondary); }
.rich-editor-wrap .ql-snow .ql-fill { fill: var(--text-secondary); }
.rich-editor-wrap .ql-snow .ql-picker { color: var(--text-secondary); }
.rich-editor-wrap .ql-snow .ql-picker-options { background: var(--surface-2); border-color: var(--border); }
.rich-editor-wrap .ql-snow.ql-toolbar button:hover .ql-stroke,
.rich-editor-wrap .ql-snow .ql-toolbar button:hover .ql-stroke { stroke: var(--accent); }
.rich-editor-wrap .ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--accent); }
.rich-editor-wrap .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--accent); }
.rich-editor-wrap .ql-snow .ql-picker.ql-expanded .ql-picker-label { color: var(--accent); }

.rich-editor-wrap .ql-editor a { color: var(--accent); }
.rich-editor-wrap .ql-editor blockquote { border-left: 3px solid var(--accent); padding-left: 10px; color: var(--text-secondary); }
.rich-editor-wrap .ql-editor code, .rich-editor-wrap .ql-editor pre { background: var(--surface-2); color: var(--text-primary); border-radius: 4px; overflow-wrap: break-word; }
.rich-editor-wrap .ql-editor pre { white-space: pre-wrap; overflow-x: auto; max-height: 420px; overflow-y: auto; }
/* Quill's bundled quill.snow.css ships ".ql-snow .ql-editor pre.ql-syntax" (every code-block gets the
   ql-syntax class, even without the optional syntax/highlight.js module) which outspecifies the rule
   above and, since it loads after app.css, silently wins — undoing our theme colors and re-opening the
   code block to unbounded height with no scrollbar. Re-assert with the extra .ql-container qualifier so
   this beats that selector on specificity alone, regardless of link order. */
.rich-editor-wrap .ql-container .ql-editor pre.ql-syntax {
  background: var(--surface-2);
  color: var(--text-primary);
  white-space: pre-wrap;
  overflow-x: auto;
  max-height: 420px;
  overflow-y: auto;
}
.rich-editor-wrap .ql-editor img { max-width: 100%; border-radius: 4px; }

/* Link-embed card (ClickUp-style "paste a link, get a card" embed) */
.doc-embed-card { margin: 6px 0; }
.doc-embed-card-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  text-decoration: none;
  max-width: 420px;
}
.doc-embed-card-link:hover { border-color: var(--accent); }
.doc-embed-card-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
.doc-embed-card-text { display: flex; flex-direction: column; overflow: hidden; }
.doc-embed-card-title {
  color: var(--accent);
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-embed-card-host { color: var(--text-muted); font-size: 11px; }

/* Embed-link insert modal */
.doc-embed-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.doc-embed-modal {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  width: 320px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.doc-embed-modal-title { font-weight: 600; font-size: 14px; color: var(--text-primary); margin-bottom: 10px; }
.doc-embed-modal label { display: block; font-size: 11px; color: var(--text-secondary); margin: 8px 0 4px; }
.doc-embed-modal input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--text-primary);
  font-size: 13px;
  box-sizing: border-box;
}
.doc-embed-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.doc-embed-modal-actions button {
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-primary);
}
.doc-embed-modal-actions .doc-embed-insert { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Mention dropdown */
.ql-mention-list-container {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important;
  max-height: 200px;
  overflow-y: auto;
}

.ql-mention-list-item {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--text-primary) !important;
  cursor: pointer;
}

.ql-mention-list-item.selected { background: var(--accent) !important; color: #fff !important; }

/* Mention chip in content */
.mention {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  border-radius: 3px;
  padding: 0 3px;
  font-weight: 500;
}

/* Rich content viewer — rendered HTML from Quill */
.rich-content p { margin: 0 0 4px; }
.rich-content a { color: var(--accent); text-decoration: underline; cursor: pointer; }
.rich-content img { max-width: 100%; border-radius: 4px; }
.rich-content blockquote { border-left: 3px solid var(--accent); padding-left: 10px; color: var(--text-secondary); margin: 4px 0; }
.rich-content code { background: var(--surface-2); border-radius: 3px; padding: 1px 4px; font-size: 12px; }
.rich-content pre { background: var(--surface-2); border-radius: 4px; padding: 8px; overflow-x: auto; font-size: 12px; }
.rich-content ul, .rich-content ol { padding-left: 20px; margin: 4px 0; }
.rich-content h1 { font-size: 18px; font-weight: 700; margin: 6px 0 2px; }
.rich-content h2 { font-size: 15px; font-weight: 700; margin: 6px 0 2px; }

/* ── New Task popup (ClickUp-style quick create) ──────────────────────── */

.newtask-panel {
  /* Anchored on all four sides — top-left flush against the rail/submenu and just under the
     global top bar, bottom-right with a small margin from the viewport edge — instead of the
     old fixed-460px box shrink-wrapped to the bottom-right corner. Width and height are pure
     functions of the viewport (no explicit width/height/max-height), so the panel fills most of
     the main panel and resizes live as the window is resized. */
  position: fixed;
  top: calc(var(--topbar-height, 48px) + 16px);
  left: calc(var(--rail-width, 54px) + var(--submenu-width, 248px) + 16px);
  right: 24px;
  bottom: 24px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.22);
  overflow: visible;
}

.newtask-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 10px 8px 0 14px;
  border-bottom: 1px solid var(--border);
}

.newtask-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 6px 10px 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
}

.newtask-tab:hover:not(:disabled) { color: var(--text-primary); }
.newtask-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.newtask-tab:disabled { opacity: 0.45; cursor: default; }

/* GlobalCreateDialog's tab strip — same look as .newtask-tab but sits inside a MudDialog TitleContent. */
.gcreate-tabs { display: flex; align-items: center; gap: 2px; }
.gcreate-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 4px 10px 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
}
.gcreate-tab:hover { color: var(--text-primary); }
.gcreate-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ── Notepad slide-out (ClickUp-style personal scratchpad) ─────────────── */
.notepad-backdrop { position: fixed; inset: 0; z-index: 199; background: transparent; }
.notepad-panel {
  position: fixed;
  top: var(--topbar-height, 48px);
  right: 0;
  bottom: 0;
  width: 340px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 24px rgba(0,0,0,0.15);
}
.notepad-header {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px;
  font-size: 14px; font-weight: 600; color: var(--text-primary);
  border-bottom: 1px solid var(--border);
}
.notepad-header > span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notepad-back, .notepad-close {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  font-size: 16px; line-height: 1; padding: 2px 4px;
}
.notepad-back:hover, .notepad-close:hover { color: var(--text-primary); }
.notepad-list { flex: 1; overflow-y: auto; padding: 6px 0; }
.notepad-row {
  padding: 9px 16px; font-size: 13px; color: var(--text-primary);
  cursor: pointer; border-bottom: 1px solid var(--border);
}
.notepad-row:hover { background: var(--surface-2); }
.notepad-footer { padding: 10px 16px; border-top: 1px solid var(--border); }
.notepad-new-btn {
  width: 100%; padding: 8px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-primary); font-size: 13px; cursor: pointer;
}
.notepad-new-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.notepad-editor { flex: 1; overflow-y: auto; padding: 8px 16px; }

/* Top-bar quick-action icons (Create task / My Work / Notepad / Clips / Reminder / Doc) */
.tshell-toolbar-icons { display: flex; align-items: center; gap: 2px; margin-right: 8px; }
.tshell-toolbar-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 6px; border: none; background: none;
  color: var(--text-muted); cursor: pointer;
}
.tshell-toolbar-btn:hover { background: var(--surface-2); color: var(--text-primary); }

.newtask-close {
  margin-left: auto;
  align-self: flex-start;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  padding: 2px 6px;
}
.newtask-close:hover { color: var(--text-primary); }

.newtask-body {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.newtask-location-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--surface-2);
  border-radius: 12px;
  padding: 3px 10px;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.newtask-name-input {
  width: 100%;
  border: none;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  background: transparent;
  padding: 4px 0;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.newtask-name-input:focus { outline: none; }
.newtask-name-input::placeholder { color: var(--text-muted); font-weight: 500; }

.newtask-desc-input {
  /* Grows to absorb the extra vertical room the now much-taller panel has, instead of leaving
     a large dead gap between the description and the pills row below it. */
  width: 100%;
  border: none;
  resize: vertical;
  font-size: 13px;
  color: var(--text-primary);
  background: transparent;
  padding: 4px 0;
  margin-bottom: 14px;
  font-family: inherit;
  flex: 1 1 auto;
  min-height: 80px;
}
.newtask-desc-input:focus { outline: none; }
.newtask-desc-input::placeholder { color: var(--text-muted); }

.newtask-pills-row {
  /* Sits outside .newtask-body's overflow-y:auto box (not inside it) so open dropdown menus
     (status/assignee/priority/tags) aren't clipped by the scroll container and hidden behind
     the footer. */
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
  padding: 0 16px 16px;
}

.newtask-pill-wrap { position: relative; }

.newtask-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 5px 11px;
  cursor: pointer;
}
.newtask-pill:hover { border-color: var(--accent); color: var(--text-primary); }

.newtask-pill-date { padding: 4px 11px 4px 11px; }
.newtask-date-input {
  border: none;
  background: transparent;
  font-size: 12px;
  font-family: inherit;
  color: inherit;
  padding: 0;
  width: 104px;
  cursor: pointer;
}
.newtask-date-input:focus { outline: none; }

.newtask-check { width: 12px; display: inline-block; color: var(--accent); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

.newtask-dropdown {
  /* Opens upward from the pill (bottom-anchored) since the pills row sits near the bottom of
     the panel, just above the footer — opening downward would run the dropdown off the
     bottom of the viewport. */
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  z-index: 210;
  min-width: 180px;
  max-height: 220px;
  overflow-y: auto;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  padding: 6px;
}

.newtask-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-primary);
  padding: 6px 8px;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
}
.newtask-dropdown-item:hover { background: var(--accent-light); }

.newtask-dropdown-empty { font-size: 12px; color: var(--text-muted); padding: 6px 8px; }

/* Invisible full-viewport click-catcher placed just behind a popover so any click outside it
   closes the popover, without also closing an ancestor overlay it stopPropagation's against. */
.popover-backdrop { position: fixed; inset: 0; z-index: 205; background: transparent; }

/* Assignee picker (ClickUp-style search + individuals/Teams list) */
.assignee-picker {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 210;
  width: 280px;
  max-height: 320px;
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
}
.assignee-picker-search { padding: 8px; border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; }
.assignee-picker-search-input {
  width: 100%;
  font-size: 12px;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
}
.assignee-picker-search-input:focus { outline: none; border-color: var(--accent); }
.assignee-picker-list { overflow-y: auto; padding: 6px; }
.assignee-picker-section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  padding: 6px 8px 2px;
}
.assignee-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 5px;
  cursor: pointer;
}
.assignee-picker-item:hover { background: var(--accent-light); }
.assignee-picker-item-text { flex: 1; min-width: 0; }
.assignee-picker-item-name { font-size: 12px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assignee-picker-item-sub { font-size: 10.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assignee-picker-check { color: var(--accent); font-size: 12px; flex-shrink: 0; }
.assignee-picker-team-badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.assignee-picker-empty { font-size: 12px; color: var(--text-muted); padding: 6px 8px; }
.assignee-picker-upward { top: auto; bottom: calc(100% + 4px); }

/* Recurrence picker (TASK-254) — schedule/trigger/end-condition/carry-over editor for the task
   detail panel's "Repeat" row. Same popover convention as .assignee-picker/.icon-emoji-picker. */
.recurrence-picker {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 210;
  width: 300px;
  max-height: 440px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
}
.recurrence-picker-section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin-top: 4px;
}
.recurrence-off-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.recurrence-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.recurrence-label { font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; }
.recurrence-weekdays { gap: 4px; }
.recurrence-weekday-btn {
  width: 28px;
  height: 24px;
  font-size: 10.5px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-secondary);
  cursor: pointer;
}
.recurrence-weekday-btn.selected { background: var(--accent); border-color: var(--accent); color: #fff; }
.recurrence-checkbox-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-primary); cursor: pointer; }
.recurrence-carryover-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; }
.recurrence-footer { border-top: 1px solid var(--border-subtle); padding-top: 8px; margin-top: 4px; }

/* Calendar view: read-only "ghost" projection of a recurring task's upcoming (not-yet-real)
   occurrences (TASK-254). Dashed border + reduced opacity distinguishes it from a real due-date entry. */
.calendar-ghost-occurrence {
  margin-top: 2px;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.6;
  border: 1px dashed var(--text-muted);
  color: var(--text-muted);
  cursor: pointer;
}

/* Status picker (ClickUp-style: colored pill + next/closed action buttons + search dropdown) */
.status-picker { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}
.status-pill-check { font-size: 10px; }
.status-action-btn {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface-1);
  color: var(--text-secondary);
  font-size: 10px;
  cursor: pointer;
}
.status-action-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.status-action-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.status-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 210;
  width: 260px;
  max-height: 340px;
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
}
.status-dropdown-search { padding: 8px; border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; }
.status-dropdown-search-input {
  width: 100%;
  font-size: 12px;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
}
.status-dropdown-search-input:focus { outline: none; border-color: var(--accent); }
.status-dropdown-list { overflow-y: auto; padding: 6px; }
.status-dropdown-section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  padding: 6px 8px 2px;
}
.status-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 5px;
  cursor: pointer;
}
.status-dropdown-item:hover { background: var(--accent-light); }
.status-dropdown-item.current { background: var(--surface-2); }
.status-dropdown-item-name { flex: 1; min-width: 0; font-size: 12px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-dropdown-check { color: var(--accent); font-size: 11px; flex-shrink: 0; }
.status-dropdown-duration { font-size: 10.5px; color: var(--text-muted); flex-shrink: 0; }
.status-dropdown-empty { font-size: 12px; color: var(--text-muted); padding: 6px 8px; }

.status-cat-icon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  color: #fff;
}
.status-icon-outline { border: 2px dashed currentColor; background: transparent; }

/* Status template picker (search + list, "+ New template" — used by ManageStatusesDialog) */
.template-picker {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 210;
  width: 260px;
  max-height: 320px;
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
}
.template-picker-search { padding: 8px; border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; }
.template-picker-search-input {
  width: 100%; font-size: 12px; font-family: inherit; color: var(--text-primary);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px;
}
.template-picker-search-input:focus { outline: none; border-color: var(--accent); }
.template-picker-list { overflow-y: auto; padding: 6px; flex: 1 1 auto; }
.template-picker-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 8px; border-radius: 5px; cursor: pointer; font-size: 12.5px; color: var(--text-primary);
}
.template-picker-item:hover { background: var(--accent-light); }
.template-picker-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.template-picker-check { color: var(--accent); font-size: 12px; flex-shrink: 0; }
.template-picker-empty { font-size: 12px; color: var(--text-muted); padding: 6px 8px; }
.template-picker-new {
  flex-shrink: 0; text-align: left; background: none; border: none; border-top: 1px solid var(--border-subtle);
  color: var(--text-secondary); font-size: 12.5px; padding: 9px 12px; cursor: pointer;
}
.template-picker-new:hover { background: var(--surface-2); color: var(--text-primary); }

.newtask-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}

.newtask-create-split {
  position: relative;
  display: flex;
}

.newtask-create-btn { border-radius: 6px 0 0 6px; }
.newtask-create-caret {
  border-radius: 0 6px 6px 0;
  border-left: 1px solid rgba(255,255,255,0.3);
  padding: 5px 9px;
}

.newtask-create-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  z-index: 210;
  width: 220px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  padding: 6px;
}

.newtask-create-menu-item {
  font-size: 13px;
  color: var(--text-primary);
  padding: 8px 10px;
  border-radius: 5px;
  cursor: pointer;
}
.newtask-create-menu-item:hover { background: var(--accent-light); }

@media (max-width: 767px) {
  /* Below 767px the rail + submenu are off-canvas (see responsive.css), so the desktop left-anchor
     offset no longer applies. Pin top AND bottom (not just bottom) so the panel actually fills
     most of the phone screen instead of shrink-wrapping to its (short) form content. */
  .newtask-panel {
    top: 60px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
    max-height: none;
  }
}
.rich-content h3 { font-size: 13px; font-weight: 700; margin: 4px 0 2px; }

/* ── Docs hub (ClickUp-style docs listing) ─────────────────────────────── */
.doc-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  padding: 7px 8px;
  border-radius: 5px;
  color: var(--text-primary);
}
.doc-menu-item:hover { background: var(--surface-2); }

.doc-tpl-card {
  flex: 0 0 auto;
  width: 168px;
  text-align: left;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
.doc-tpl-card:hover {
  border-color: var(--accent, #6366f1);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  transform: translateY(-1px);
}

.doc-row:hover { background: var(--surface-1); }
.doc-row-del { opacity: 0; transition: opacity 0.12s; }
.doc-row:hover .doc-row-del { opacity: 1; }

/* ── ClickUp-style open-doc view: Pages panel · content · docked panel · right rail ── */
.doc-ws { display: flex; height: 100%; overflow: hidden; width: 100%; position: relative; }

.doc-icon-btn {
  background: none; border: none; cursor: pointer; border-radius: 6px;
  padding: 3px 7px; font-size: 14px; color: var(--text-secondary); line-height: 1;
}
.doc-icon-btn:hover { background: var(--surface-2); color: var(--text-primary); }
.doc-icon-btn:disabled { opacity: 0.4; cursor: default; }

.doc-dropdown {
  position: absolute; top: 100%; margin-top: 4px; z-index: 60;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px; box-shadow: 0 8px 32px rgba(0,0,0,0.18); min-width: 200px;
}
.doc-menu-sep { border-top: 1px solid var(--border-subtle); margin: 6px 0; }

/* Pages panel (left) */
.doc-pages-panel {
  width: 258px; flex-shrink: 0; background: var(--surface-1);
  border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden;
}
.doc-pages-head { display: flex; align-items: center; gap: 6px; padding: 12px 10px 10px 12px; border-bottom: 1px solid var(--border); }
.doc-back-btn { background: none; border: none; cursor: pointer; font-size: 15px; color: var(--text-secondary); padding: 2px 5px; border-radius: 6px; }
.doc-back-btn:hover { background: var(--surface-2); }
.doc-pages-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.doc-pages-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-pages-sub { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.doc-pages-list { flex: 1; overflow-y: auto; padding: 2px 8px 10px; }
.doc-addpage-btn { display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer; font-size: 12.5px; color: var(--text-muted); padding: 6px 8px; border-radius: 5px; margin-top: 2px; }
.doc-addpage-btn:hover { background: var(--surface-2); color: var(--text-primary); }
.doc-addpage-btn:disabled { opacity: 0.4; cursor: default; }

/* Page tree row — ClickUp-style hover + / ... */
.doc-page-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 12.5px;
  border-radius: 6px;
  color: var(--text-secondary);
  min-height: 28px;
}
.doc-page-row:hover { background: var(--surface-2); }
.doc-page-row.selected { color: var(--accent); background: var(--accent-light, rgba(124, 58, 237, 0.1)); }
.doc-page-row.archived { opacity: 0.55; }
.doc-page-caret, .doc-page-caret-spacer {
  width: 12px; flex-shrink: 0; opacity: 0.55; font-size: 10px; text-align: center; user-select: none;
}
.doc-page-icon { flex-shrink: 0; font-size: 12px; line-height: 1; }
.doc-page-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: flex; align-items: center; gap: 4px;
}
.doc-page-fav { color: #eab308; font-size: 11px; }
.doc-page-archived-tag {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--text-muted); background: var(--surface-2); padding: 1px 5px; border-radius: 4px;
}
.doc-page-rename {
  flex: 1; min-width: 0; font-size: 12.5px; border: 1px solid var(--accent);
  border-radius: 4px; padding: 2px 6px; background: var(--surface-0); color: var(--text-primary);
}
.doc-page-actions {
  display: none; align-items: center; gap: 1px; flex-shrink: 0; margin-left: 2px;
}
.doc-page-row:hover .doc-page-actions,
.doc-page-row.selected .doc-page-actions,
.doc-page-row.menu-open .doc-page-actions { display: flex; }
.doc-page-action-btn {
  background: none; border: none; cursor: pointer; border-radius: 4px;
  padding: 1px 5px; font-size: 13px; color: var(--text-secondary); line-height: 1.2;
}
.doc-page-action-btn:hover { background: var(--surface-1); color: var(--text-primary); }
.doc-page-action-btn:disabled { opacity: 0.35; cursor: default; }

/* Page settings dropdown (ClickUp parity). Default absolute; JS pins it fixed to escape overflow. */
.doc-page-settings {
  position: absolute; top: calc(100% + 4px); right: 8px; z-index: 300;
  width: 260px; max-height: min(70vh, 560px); overflow-y: auto; overflow-x: visible;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px; box-shadow: 0 12px 40px rgba(0,0,0,0.22);
}
.doc-page-settings-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted); padding: 2px 8px 8px;
}
.doc-menu-has-sub {
  position: relative; display: flex !important; align-items: center; justify-content: space-between;
}
.doc-menu-caret { color: var(--text-muted); font-size: 14px; margin-left: 8px; }
.doc-page-submenu {
  position: absolute; left: calc(100% + 4px); top: -6px; z-index: 81;
  min-width: 180px; max-height: 280px; overflow-y: auto;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px; box-shadow: 0 8px 28px rgba(0,0,0,0.18);
}
.doc-page-submenu-wide { min-width: 220px; }
.doc-page-submenu-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted); padding: 6px 8px 4px;
}
.doc-page-submenu-empty { font-size: 12px; color: var(--text-muted); padding: 8px; }
.doc-menu-toggle-row {
  display: flex !important; align-items: center; justify-content: space-between; gap: 10px;
}
.doc-toggle {
  width: 32px; height: 18px; border-radius: 9px; background: var(--surface-2);
  position: relative; flex-shrink: 0; cursor: pointer;
}
.doc-toggle.on { background: var(--accent, #7c3aed); }
.doc-toggle-knob {
  width: 14px; height: 14px; border-radius: 50%; background: #fff;
  position: absolute; top: 2px; left: 2px; transition: left 0.15s;
}
.doc-toggle.on .doc-toggle-knob { left: 16px; }
.doc-menu-danger { color: #dc2626 !important; }
.doc-page-meta { padding: 4px 8px 8px; }
.doc-page-meta-label { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
.doc-page-meta-row { display: flex; align-items: center; gap: 8px; }
.doc-page-meta-avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--text-secondary); flex-shrink: 0;
}
.doc-page-meta-name { font-size: 12px; color: var(--text-primary); font-weight: 500; }
.doc-page-meta-time { font-size: 11px; color: var(--text-muted); }
.doc-page-share-btn { width: 100%; margin-top: 6px; font-size: 12px; }

/* Page history panel */
.doc-history-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 100;
  display: flex; align-items: center; justify-content: center;
}
.doc-history-panel {
  width: min(420px, 92vw); max-height: 70vh; overflow: hidden;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.28); display: flex; flex-direction: column;
}
.doc-history-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 14px;
}
.doc-history-list { overflow-y: auto; padding: 8px; }
.doc-history-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer; border-radius: 8px; padding: 10px;
  color: var(--text-primary);
}
.doc-history-item:hover { background: var(--surface-2); }
.doc-history-empty { padding: 24px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* Main content column */
.doc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.doc-denied { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-muted); }
.doc-topbar { display: flex; align-items: center; gap: 8px; padding: 9px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.doc-breadcrumb { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 340px; }
.doc-protected-pill { font-size: 11px; color: var(--text-muted); background: var(--surface-2); padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.doc-share-btn { font-size: 12px; padding: 5px 12px; }

.doc-scroll { flex: 1; overflow-y: auto; }
.doc-body { max-width: 820px; margin: 0 auto; padding: 26px 40px 90px; }
.doc-body.doc-width-full { max-width: none; }
.doc-size-small .doc-body { font-size: 13px; }
.doc-size-large .doc-body { font-size: 17px; }
.doc-font-serif .doc-body, .doc-font-serif .doc-title, .doc-font-serif .doc-title-input { font-family: Georgia, 'Times New Roman', serif; }
.doc-font-mono .doc-body, .doc-font-mono .doc-title, .doc-font-mono .doc-title-input { font-family: 'Courier New', Consolas, monospace; }

/* Masthead: cover + hover toolbar + title/icon + subtitle + meta (ClickUp Docs parity) */
.doc-masthead { position: relative; }
.doc-title-hoverbar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; opacity: 0; visibility: hidden; transition: opacity 0.12s ease; min-height: 26px; margin-bottom: 4px; }
.doc-masthead:hover .doc-title-hoverbar, .doc-title-hoverbar:focus-within { opacity: 1; visibility: visible; }
.doc-hoverbar-btn { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; cursor: pointer; font-size: 12px; color: var(--text-muted); padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.doc-hoverbar-btn:hover { background: var(--surface-2); color: var(--text-primary); }
.doc-hoverbar-btn.on { color: var(--accent); background: var(--accent-light); }
.doc-title-row { display: flex; align-items: center; gap: 10px; }
.doc-title-row .doc-title, .doc-title-row .doc-title-input { margin: 0; }
.doc-title-icon { flex-shrink: 0; display: inline-flex; }
.doc-title { font-size: 30px; font-weight: 700; color: var(--text-primary); margin: 0 0 8px; line-height: 1.2; }
.doc-title-input { font-size: 30px; font-weight: 700; border: none; outline: none; width: 100%; color: var(--text-primary); background: transparent; padding: 0; margin: 0 0 8px; line-height: 1.2; }
.doc-subtitle, .doc-subtitle-input { display: block; font-size: 15px; color: var(--text-muted); margin: -4px 0 10px; }
.doc-subtitle-input { border: none; outline: none; background: transparent; width: 100%; padding: 0; font-family: inherit; }
.doc-meta { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.doc-meta-dot { opacity: 0.6; }
.doc-meta-contributors { display: flex; align-items: center; }
.doc-stats-inline { font-size: 12px; color: var(--text-muted); margin: -2px 0 12px; }
.doc-tags-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.doc-tag-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 2px 8px; border-radius: 10px; }

/* Page outline (auto TOC from headings) */
.doc-outline { position: sticky; top: 8px; z-index: 5; display: flex; flex-direction: column; max-height: calc(100vh - 150px); border: 1px solid var(--border); border-radius: 8px; margin: 6px 0 20px; overflow: hidden; background: var(--surface-1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
.doc-outline-head { display: flex; align-items: center; gap: 7px; width: 100%; padding: 8px 12px; background: none; border: none; cursor: pointer; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); text-align: left; }
.doc-outline-head:hover { color: var(--text-secondary); }
.doc-outline-caret { font-size: 10px; width: 10px; }
.doc-outline-count { margin-left: auto; font-weight: 600; opacity: 0.7; }
.doc-outline-list { display: flex; flex-direction: column; padding: 2px 0 6px; overflow-y: auto; min-height: 0; }
.doc-outline-item { display: block; width: 100%; text-align: left; background: none; border: none; border-left: 2px solid transparent; cursor: pointer; font-size: 13px; color: var(--text-secondary); padding: 4px 12px 4px 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-outline-item:hover { background: var(--surface-2); color: var(--text-primary); }
.doc-outline-item.active { color: var(--accent); border-left-color: var(--accent); }
.doc-outline-item.lvl-1 { font-weight: 600; }
.doc-outline-item.lvl-2 { padding-left: 28px; }
.doc-outline-item.lvl-3 { padding-left: 42px; color: var(--text-muted); }
.doc-heading-flash { animation: docHeadingFlash 1.2s ease-out; border-radius: 4px; }
@keyframes docHeadingFlash { 0% { background: rgba(124,58,237,.22); } 100% { background: transparent; } }

.doc-subpages { border: 1px solid var(--border); border-radius: 8px; margin: 6px 0 20px; overflow: hidden; }
.doc-subpages-head { padding: 8px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); border-bottom: 1px solid var(--border-subtle); }
.doc-subpage-row { display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; font-size: 13px; color: var(--text-primary); }
.doc-subpage-row:hover { background: var(--surface-1); }
.doc-subpage-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-subpage-owner { display: flex; align-items: center; flex-shrink: 0; }
.doc-subpage-contributors { display: flex; align-items: center; padding-left: 6px; flex-shrink: 0; }

.doc-attach { margin-top: 32px; border-top: 1px solid var(--border); padding-top: 10px; }
.doc-attach > summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text-secondary); list-style: none; }
.doc-attach > summary::-webkit-details-marker { display: none; }
.doc-attach-add { font-size: 11px; padding: 3px 8px; cursor: pointer; color: var(--accent); border-radius: 5px; }
.doc-attach-add:hover { background: var(--surface-2); }

/* Right rail */
.doc-rail { width: 50px; flex-shrink: 0; border-left: 1px solid var(--border); background: var(--surface-1); display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 12px; }
.doc-rail-btn { position: relative; width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-secondary); background: none; border: none; }
.doc-rail-btn:hover { background: var(--surface-2); color: var(--text-primary); }
.doc-rail-btn.active { background: var(--accent-light); color: var(--accent); }
.doc-rail-badge { position: absolute; top: 2px; right: 2px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: var(--accent, #7c3aed); color: #fff; font-size: 9px; font-weight: 600; display: flex; align-items: center; justify-content: center; }

/* Docked panel */
.doc-panel { width: 340px; flex-shrink: 0; border-left: 1px solid var(--border); background: var(--surface-1); display: flex; flex-direction: column; overflow: hidden; }
.doc-panel-header { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 14px; color: var(--text-primary); }
.doc-panel-body { flex: 1; overflow-y: auto; padding: 14px 16px; }

.doc-styles-group { margin-bottom: 14px; }
.doc-styles-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 6px; }
.doc-seg { display: flex; gap: 6px; }
.doc-seg-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-0); cursor: pointer; font-size: 12px; color: var(--text-secondary); }
.doc-seg-btn span { font-size: 10px; color: var(--text-muted); }
.doc-seg-btn:hover { border-color: var(--accent); }
.doc-seg-btn.on { border-color: var(--accent); background: var(--accent-light); color: var(--accent); }
.doc-toggle-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-primary); padding: 6px 0; cursor: pointer; }

.doc-rel-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: 13px; border-bottom: 1px solid var(--border-subtle); }
.doc-rel-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.doc-rel-status { flex-shrink: 0; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: #fff; padding: 1px 7px; border-radius: 10px; }
.doc-rel-status.done { opacity: 0.85; }

/* Cover image (ClickUp/Notion-style doc banner) */
.doc-cover { position: relative; margin: -6px 0 16px; border-radius: 10px; overflow: hidden; }
.doc-cover img { display: block; width: 100%; height: 200px; object-fit: cover; }
.doc-cover-actions { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; opacity: 0; transition: opacity 0.15s; }
.doc-cover:hover .doc-cover-actions { opacity: 1; }
.doc-cover-btn { font-size: 12px; padding: 4px 10px; border: none; border-radius: 6px; cursor: pointer; background: rgba(0, 0, 0, 0.55); color: #fff; backdrop-filter: blur(2px); }
.doc-cover-btn:hover { background: rgba(0, 0, 0, 0.75); }
.doc-rel-picker { margin-top: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 8px; background: var(--surface-0); }

.doc-stat-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--text-secondary); padding: 4px 0; }
.doc-stat-row span:last-child { font-weight: 600; color: var(--text-primary); }

/* Focus mode — Block: dim every editor block except the one with the caret */
.doc-focus-block .ql-editor > * { opacity: 0.32; transition: opacity 0.18s ease; }
.doc-focus-block .ql-editor > *.doc-block-active { opacity: 1; }

/* Focus mode — Page: hide chrome for distraction-free writing, centered narrow column */
.doc-focus-page .doc-pages-panel,
.doc-focus-page .doc-rail,
.doc-focus-page .doc-panel,
.doc-focus-page .doc-topbar { display: none; }
.doc-focus-page .doc-body { max-width: 720px; padding-top: 56px; }
.doc-focus-exit {
  position: absolute; top: 14px; right: 18px; z-index: 40;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px;
  padding: 5px 12px; font-size: 12px; color: var(--text-secondary); cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.doc-focus-exit:hover { background: var(--surface-2); color: var(--text-primary); }

/* Dashboards hub template cards (ClickUp-style: icon left, title + description right) */
.dash-tpl-card {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
.dash-tpl-card:hover {
  border-color: var(--accent, #6366f1);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  transform: translateY(-1px);
}
.dash-tpl-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: linear-gradient(135deg, rgba(168,85,247,0.16), rgba(99,102,241,0.16));
}

/* Static boot marker for prerender:false interactive routes (see App.razor + boot.js). */
#blazor-boot {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-0);
  pointer-events: none;
}
#blazor-boot .blazor-boot-card {
  /* Deliberately NOT clickable while merely loading. The marker is position:fixed inset:0, so if
     boot.js ever fails to remove it (an app shell missing from its READY_SEL — see boot.js), an
     interactive card here silently swallows every click in the middle of the page and the app just
     looks broken with nothing in the console. Only the error state below opts back in, because it
     owns a Reload link the user has to be able to press. */
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  max-width: 22rem;
  padding: 28px 32px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
  color: var(--text-secondary);
  font-family: Inter, system-ui, sans-serif;
}
#blazor-boot .blazor-boot-card strong {
  font-size: 1.15rem;
  color: var(--text-primary);
}
#blazor-boot .blazor-boot-card span {
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text-muted);
}
/* The "workspace didn't come up" state (boot.js sets .is-error) is the one case that must accept
   clicks — its Reload link is the user's only way out. */
#blazor-boot.is-error .blazor-boot-card {
  pointer-events: auto;
}
#blazor-boot .blazor-boot-reload {
  margin-top: 8px;
  color: var(--accent-hover);
  font-weight: 600;
  text-decoration: underline;
}

.space-empty {
  margin-top: 24px;
  padding: 28px 24px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--surface-1);
}

/* ── Status group editor (Manage Task Statuses — Space/Folder/List) ───────────────────── */
.status-group-editor { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.status-group-col { width: 100%; display: flex; flex-direction: column; }
.status-group-head {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  padding: 0 2px 6px; display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.status-group-count { color: var(--text-muted); font-weight: 500; }
.status-group-add-icon {
  background: none; border: 1px solid var(--border-subtle); border-radius: 4px;
  color: var(--text-muted); font-size: 13px; line-height: 1; width: 18px; height: 18px;
  cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.status-group-add-icon:hover { background: var(--surface-2); color: var(--text-primary); }
.status-group-body {
  display: flex; flex-direction: column; gap: 6px; min-height: 40px;
  padding: 4px; border-radius: 8px; background: var(--surface-1, transparent);
}
.status-group-empty {
  font-size: 11px; color: var(--text-muted); border: 1px dashed var(--border-subtle);
  border-radius: 6px; padding: 10px 6px; text-align: center;
}
.status-chip {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  border: 1px solid var(--border-subtle, var(--border)); border-radius: 6px;
  background: var(--surface-2); cursor: default;
}
.status-chip[draggable="true"] { cursor: grab; }
.status-chip.editing { border-color: var(--accent); }
.status-chip-handle { color: var(--text-muted); font-size: 12px; cursor: grab; flex-shrink: 0; }
.status-chip-color-wrap { position: relative; flex-shrink: 0; }
.status-chip-color { width: 20px; height: 20px; padding: 0; border: 1px solid var(--border); border-radius: 4px; cursor: pointer; flex-shrink: 0; }
.status-chip-color:disabled { cursor: default; opacity: 0.7; }
.status-color-picker {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 210;
  display: grid; grid-template-columns: repeat(6, 22px); gap: 6px;
  padding: 10px; background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,0.18);
}
.status-color-swatch {
  width: 22px; height: 22px; padding: 0; border: 1px solid var(--border-subtle); border-radius: 5px; cursor: pointer;
}
.status-color-swatch.selected { box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--accent); }
.status-chip-name { flex: 1; font-size: 13px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: text; }
.status-chip-name-input { flex: 1; font-size: 13px; padding: 2px 4px; border: 1px solid var(--accent); border-radius: 3px; background: var(--surface-1); color: var(--text-primary); min-width: 0; }
.status-chip-badge { font-size: 9px; color: var(--text-muted); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 1px 6px; flex-shrink: 0; }
.status-chip-wip-wrap { flex-shrink: 0; }
.status-chip-wip-btn {
  font-size: 10px; font-weight: 600; color: var(--text-muted); background: none;
  border: 1px dashed var(--border-subtle); border-radius: 8px; padding: 1px 7px; cursor: pointer; white-space: nowrap;
}
.status-chip-wip-btn:hover { background: var(--surface-1); color: var(--text-primary); }
.status-chip-wip-btn.set { border-style: solid; border-color: var(--border-subtle); color: var(--text-secondary); }
.status-chip-wip-input { width: 46px; font-size: 11px; padding: 2px 4px; border: 1px solid var(--accent); border-radius: 4px; background: var(--surface-1); color: var(--text-primary); }
.status-chip-del { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 14px; padding: 0 2px; flex-shrink: 0; line-height: 1; }
.status-chip-del:hover { color: var(--danger, #ef4444); }
.status-add-btn {
  margin-top: 6px; background: none; border: 1px dashed var(--border-subtle); border-radius: 6px;
  color: var(--text-muted); font-size: 12px; padding: 6px; cursor: pointer; text-align: left;
}
.status-add-btn:hover { background: var(--surface-2); color: var(--text-primary); }
.status-add-row { margin-top: 6px; display: flex; gap: 4px; align-items: center; }
.status-add-input { flex: 1; font-size: 12px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-1); color: var(--text-primary); min-width: 0; }
.status-add-confirm, .status-add-cancel { background: none; border: 1px solid var(--border); border-radius: 4px; font-size: 11px; padding: 3px 8px; cursor: pointer; color: var(--text-secondary); }
.status-add-confirm:disabled { opacity: 0.5; cursor: default; }
.status-inherit-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 12px; color: var(--text-secondary); background: var(--surface-2);
  border-radius: 6px; padding: 8px 10px; margin-bottom: 12px;
}

/* Two-column body (Status type / Status template on the left, vertical editor on the right) —
   mirrors ClickUp's "Edit ... statuses" dialog. */
.status-dialog-body { display: flex; gap: 24px; align-items: flex-start; }
.status-dialog-left { flex: 0 0 210px; display: flex; flex-direction: column; gap: 8px; position: relative; }
.status-dialog-right { flex: 1 1 auto; min-width: 0; max-height: 56vh; overflow-y: auto; padding-right: 2px; }
.status-type-label, .status-template-label {
  font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.04em; margin-top: 10px;
}
.status-type-label:first-child, .status-template-label:first-child { margin-top: 0; }
.status-type-radio { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-primary); cursor: pointer; }
.status-type-radio input[type="radio"] { accent-color: var(--accent); cursor: pointer; }
.status-inherit-preview-label { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }

.status-template-trigger-wrap { position: relative; }
.status-template-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  font-size: 13px; color: var(--text-primary); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px; cursor: pointer;
}
.status-template-trigger:hover { background: var(--surface-1); }
.status-template-trigger:disabled { opacity: 0.6; cursor: default; }
.status-template-trigger-caret { color: var(--text-muted); font-size: 11px; }

/* Footer: "Save template ▾" split button + "Apply changes" */
.status-dialog-footer { display: flex; align-items: center; justify-content: flex-end; width: 100%; gap: 10px; }
.split-btn { display: flex; position: relative; }
.split-btn-main {
  border: 1px solid var(--border); border-right: none; border-radius: 6px 0 0 6px;
  background: var(--surface-1); color: var(--text-primary); font-size: 13px; padding: 7px 12px; cursor: pointer;
}
.split-btn-main:disabled { opacity: 0.5; cursor: default; }
.split-btn-caret {
  border: 1px solid var(--border); border-radius: 0 6px 6px 0;
  background: var(--surface-1); color: var(--text-primary); padding: 7px 8px; cursor: pointer;
}
.split-btn-menu {
  /* Opens upward (bottom-anchored) since this button lives in the dialog's DialogActions
     footer row — opening downward pushes past the dialog's bottom edge and forces the
     whole modal to grow a vertical scrollbar to fit it. */
  position: absolute; bottom: calc(100% + 4px); right: 0; z-index: 210; min-width: 190px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
}
.split-btn-menu button {
  display: block; width: 100%; text-align: left; padding: 8px 12px; font-size: 13px;
  background: none; border: none; cursor: pointer; color: var(--text-primary);
}
.split-btn-menu button:hover { background: var(--surface-2); }

/* ── Workload view side panel (Unscheduled / Overdue) ──────────────────────────────────── */
.workload-side-task {
  font-size: 12.5px; color: var(--text-primary); padding: 5px 6px; border-radius: 5px;
  cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.workload-side-task:hover { background: var(--surface-1); }
.status-dialog-save-msg { font-size: 12px; color: var(--success, #16a34a); margin-right: auto; }

/* ── Gantt view (frappe-gantt) ─────────────────────────────────────────────────────────── */
/* #gantt-pane is the fixed-height flex child that fills the view area; the chart has to scroll
   INSIDE it. frappe's own wrapper (.gantt-container — note that's a CLASS it generates, not our
   #gantt-pane id) already carries overflow:auto but no height, so it grew to the full SVG height
   (~44px per task) inside a clipped pane: every row past the fold was unreachable, with no
   scrollbar and no wheel scroll, and the horizontal scrollbar sat below the fold too. Chaining an
   explicit height down to it puts both scrollbars back at the panel edges. */
/* Everything is flex rather than percentage heights so the chain stays definite no matter what
   sits above the chart (today: the zoom control). */
#gantt-pane {
  flex: 1; min-height: 0; position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
#frappe-gantt-target {
  flex: 1; min-height: 0; box-sizing: border-box; padding: 16px;
  display: flex; flex-direction: column;
}
#frappe-gantt-target > .gantt-container { flex: 1; min-height: 0; }

.gantt-zoom { display: flex; align-items: center; gap: 8px; padding: 10px 16px 0; flex-shrink: 0; }
.gantt-zoom-label { font-size: 11px; color: var(--text-muted); }

/* ── Map view (Leaflet + OpenStreetMap, TASK-257) ──────────────────────────────────────── */
/* Same fixed-height flex-child pattern as #gantt-pane above -- Leaflet needs a definite pixel
   height on its container or the map canvas collapses to 0px. */
.map-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.map-layout { flex: 1; min-height: 0; display: flex; }
.map-canvas { flex: 1; min-height: 0; }
.map-sidebar {
  width: 220px; flex-shrink: 0; border-left: 1px solid var(--border); overflow-y: auto;
  padding: 10px 12px; background: var(--surface-1);
}
.map-sidebar-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--text-muted); margin-bottom: 6px;
}
.map-sidebar-count { font-weight: 400; }
.map-sidebar-empty { font-size: 12px; color: var(--text-muted); }
.map-sidebar-task {
  font-size: 12.5px; color: var(--text-primary); padding: 5px 6px; border-radius: 5px;
  cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.map-sidebar-task:hover { background: var(--surface-2); }
.map-empty-state { padding: 24px; text-align: center; color: var(--text-muted); font-size: 13px; }
.map-pin-icon { background: none; border: none; }
.map-pin-popup { display: flex; flex-direction: column; gap: 4px; max-width: 200px; }
.map-pin-popup-task { font-size: 12.5px; color: var(--accent); cursor: pointer; }
.map-pin-popup-task:hover { text-decoration: underline; }

/* ── Embed view (arbitrary https iframe, TASK-259) ─────────────────────────────────────── */
.embed-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.embed-setup { padding: 24px 16px; display: flex; flex-direction: column; gap: 4px; }
.embed-error { color: var(--danger, #f38ba8); font-size: 12px; margin-top: 4px; }
.embed-hint { color: var(--text-muted); font-size: 12px; margin-top: 6px; max-width: 480px; }
.embed-toolbar {
  display: flex; align-items: center; gap: 8px; padding: 6px 16px; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.embed-url-label {
  font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.embed-iframe { flex: 1; min-height: 0; width: 100%; border: none; }

/* Demo mode: pulse the nav controls we want visitors to try next. */
@keyframes demo-nav-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(30, 200, 165, 0.45); }
  70%  { box-shadow: 0 0 0 8px rgba(30, 200, 165, 0); }
  100% { box-shadow: 0 0 0 0 rgba(30, 200, 165, 0); }
}
.demo-pulse {
  animation: demo-nav-pulse 1.8s ease-out infinite;
  border-radius: 6px;
}

.tshell-demo-save {
  display: inline-flex;
  align-items: center;
  margin-right: 10px;
  padding: 6px 12px;
  border-radius: 8px;
  background: #1ec8a5;
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.tshell-demo-save:hover { background: #0fa888; color: #fff !important; }

.demo-wizard {
  max-width: 480px;
  margin: 48px auto;
  padding: 0 20px 48px;
  color: var(--text-primary, #0c1220);
}
.demo-wizard h1 {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 8px;
}
.demo-wizard__step-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0fa888;
  margin: 0 0 12px;
}
.demo-wizard__lead, .demo-wizard__muted, .demo-wizard__intro p {
  color: var(--text-muted, #5c6b80);
  margin: 0 0 20px;
  line-height: 1.5;
}
.demo-wizard__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
}
.demo-wizard__input {
  padding: 10px 12px;
  border: 1px solid var(--border, #d5dde8);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
}
.demo-wizard__input:focus { outline: 2px solid #1ec8a5; border-color: #1ec8a5; }
.demo-wizard__cta, .demo-wizard__cta--link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1ec8a5;
  color: #fff !important;
  border: none;
  border-radius: 10px;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
.demo-wizard__cta:disabled { opacity: 0.6; cursor: default; }
.demo-wizard__ghost, .demo-wizard__ghost.demo-wizard__cta--link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #0fa888 !important;
  border: 1px solid #0fa888;
  border-radius: 10px;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
.demo-wizard__actions, .demo-wizard__finish {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.demo-wizard__finish { margin-top: 24px; }
.demo-wizard__error { color: #dc2626; font-size: 13px; }
.demo-wizard__ok { color: #15803d; font-size: 14px; margin-bottom: 16px; }

/* ── First-login Quickstart (Home + Help dialog) ───────────────────────── */
.qs-home { flex: 1; min-height: 0; overflow: auto; padding: 20px 24px 40px; }
.qs-hero { margin-bottom: 20px; max-width: 640px; }
.qs-hero-title { font-size: 22px; font-weight: 700; color: var(--text-primary); margin: 0 0 6px; }
.qs-hero-lead { font-size: 14px; color: var(--text-muted); margin: 0; line-height: 1.45; }
.qs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.qs-card {
  position: relative;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 16px 14px 44px;
  min-height: 0;
}
.qs-card-num {
  position: absolute; left: 12px; top: 16px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.qs-card-icon { color: var(--accent); margin-bottom: 6px; }
.qs-card-title { font-size: 14px; font-weight: 650; color: var(--text-primary); margin: 0 0 6px; }
.qs-card-body { font-size: 13px; color: var(--text-muted); margin: 0; line-height: 1.45; }
.qs-card-action { margin-top: 12px; }
.qs-spaces { margin-top: 28px; }
.qs-spaces-title {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .06em; margin: 0 0 10px;
}
.qs-space-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.qs-space-tile {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-1);
  color: var(--text-primary); font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.qs-space-tile:hover { background: var(--surface-2); }
.qs-space-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

.qs-dialog { min-width: 280px; max-width: 420px; padding: 4px 0 8px; }
.qs-steps { display: flex; align-items: center; gap: 6px; margin-bottom: 20px; }
.qs-step-dot {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--text-muted);
}
.qs-step-dot.active { background: var(--accent); color: #fff; }
.qs-step-line { flex: 1; height: 2px; background: var(--border); }
.qs-step-line.active { background: var(--accent); }
.qs-dialog-icon { color: var(--accent); margin-bottom: 8px; }
.qs-dialog-title { font-size: 18px; font-weight: 700; color: var(--text-primary); margin: 0 0 8px; }
.qs-dialog-body { font-size: 13px; color: var(--text-muted); margin: 0 0 16px; line-height: 1.45; }
.qs-dialog-cta { margin-bottom: 4px; }

@media (max-width: 767px) {
  .qs-home { padding: 16px 16px 32px; }
  .qs-grid { grid-template-columns: 1fr; }
  .qs-dialog { min-width: 0; }
}

/* ── Timesheet weekly grid ─────────────────────────────────────────────── */

.timesheet-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.timesheet-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 12px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.timesheet-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.timesheet-view-pills {
  padding: 0;
  border-bottom: none;
  background: transparent;
  overflow: visible;
}
.timesheet-toolbar-total {
  font-size: 12px;
  color: var(--text-muted);
}
.timesheet-config-btn { margin-left: auto; }
.timesheet-config {
  margin: 0 20px 12px;
  padding: 14px 16px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.timesheet-config-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.timesheet-config-summary-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-primary);
}
.timesheet-config-days {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.timesheet-config-day {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
}
.timesheet-config-day.on {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.timesheet-config-expand {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 6px 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
}
.timesheet-config-weekly-total {
  margin-left: auto;
  font-weight: 500;
  color: var(--text-muted);
}
.timesheet-config-weekly {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.timesheet-config-rates {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 240px;
  overflow: auto;
}
.timesheet-config-week-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-primary);
}
.timesheet-config-week-row input[type=text],
.timesheet-config-week-row input:not([type=checkbox]) {
  width: 72px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-0);
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
}
.timesheet-config-week-row input:disabled {
  opacity: .5;
}
.timesheet-config-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.timesheet-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 0 20px 12px;
  flex-shrink: 0;
}
.timesheet-filter-field {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}
.timesheet-filters select {
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-1);
  color: var(--text-primary);
  max-width: 160px;
}
.timesheet-filter-duration {
  width: 72px;
  min-width: 72px;
  padding: 4px 8px;
  font-size: 12px;
}
.timesheet-sort-wrap { position: relative; }
.timesheet-sort-dir { margin-left: 4px; font-size: 11px; }
.timesheet-filters .filter-chip.active {
  border-color: var(--accent);
  color: var(--text-primary);
}
.timesheet-week-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.timesheet-week-arrow {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-1);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.timesheet-week-arrow:hover { background: var(--surface-2); }
.timesheet-week-range {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
}
.timesheet-week-range:hover { background: var(--surface-2); }
.timesheet-week-range input[type=date] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  border: 0;
}
.timesheet-empty {
  padding: 40px;
  color: var(--text-muted);
  text-align: center;
}
.timesheet-grid-wrap {
  flex: 1;
  overflow: auto;
  padding: 0 20px 16px;
  -webkit-overflow-scrolling: touch;
}
.timesheet-grid {
  border-collapse: collapse;
  min-width: 720px;
  width: 100%;
  font-size: 13px;
}
.timesheet-grid th,
.timesheet-grid td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--border-subtle, var(--border));
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.timesheet-grid thead th {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  position: sticky;
  top: 0;
  background: var(--surface-0);
  z-index: 2;
}
.timesheet-day-num { font-size: 13px; font-weight: 600; color: var(--text-primary); text-transform: none; letter-spacing: 0; }
.timesheet-task-col {
  text-align: left !important;
  position: sticky;
  left: 0;
  background: var(--surface-0);
  z-index: 1;
  min-width: 160px;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.timesheet-grid thead .timesheet-task-col { z-index: 3; }
.timesheet-day-col { min-width: 72px; width: 72px; }
.timesheet-day-col.is-today { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.timesheet-grid thead .timesheet-day-col.is-today { background: var(--surface-0); }
.timesheet-row-total { font-weight: 600; color: var(--text-primary); }
.timesheet-grid tfoot td { font-weight: 600; color: var(--text-primary); }
.timesheet-cell {
  display: block;
  width: 100%;
  min-height: 28px;
  padding: 4px 6px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
  cursor: text;
}
.timesheet-cell:hover { background: var(--surface-2); border-color: var(--border); }
.timesheet-cell-input {
  width: 100%;
  padding: 2px 4px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--surface-1);
  color: var(--text-primary);
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.timesheet-entries { flex: 1; overflow: auto; padding: 0 20px 16px; }
.timesheet-entry-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 720px;
}
.timesheet-entry-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.timesheet-entry-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-subtle, var(--border));
  vertical-align: middle;
}
.timesheet-entry-day-row td { padding: 0; border-bottom: 0; }
.timesheet-entry-desc-cell { min-width: 160px; max-width: 280px; }
.timesheet-entry-task-sub {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.timesheet-entry-tags-cell { position: relative; min-width: 140px; }
.timesheet-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 12px;
  font-size: 11px;
  margin: 0 4px 4px 0;
}
.timesheet-tag-x {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font-size: 12px;
  padding: 0;
  line-height: 1;
}
.timesheet-tag-add {
  padding: 0 6px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
}
.timesheet-tag-picker {
  position: absolute;
  z-index: 5;
  top: 100%;
  left: 0;
  min-width: 180px;
  padding: 8px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
.timesheet-tag-pick {
  display: block;
  width: 100%;
  text-align: left;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: 12px;
  cursor: pointer;
  border-radius: 4px;
}
.timesheet-tag-pick:hover { background: var(--surface-2); }
.timesheet-tag-create {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.timesheet-entry-day { margin-bottom: 20px; }
.timesheet-entry-day-hdr {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 8px 0 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.timesheet-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 120px) minmax(0, 90px) minmax(0, 64px);
  gap: 8px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-subtle, var(--border));
  font-size: 13px;
}
.timesheet-row-task {
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.timesheet-row-user, .timesheet-row-time { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.timesheet-row-dur {
  color: var(--text-primary);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.timesheet-submit-btn {
  padding: 6px 12px;
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.timesheet-submit-btn:disabled { opacity: .6; cursor: default; }
.timesheet-ghost-btn {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.timesheet-status {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.timesheet-status-pending { background: var(--status-review-bg); color: var(--status-review-fg); }
.timesheet-status-changesneeded { background: var(--warning-bg); color: var(--warning-fg); }
.timesheet-status-approved { background: var(--success-bg); color: var(--success-fg); }
.timesheet-cell-locked { cursor: default; }
.timesheet-cell-locked:hover { background: transparent; border-color: transparent; }
.timesheet-error {
  margin: 0 20px 8px;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--danger-bg);
  color: var(--danger-fg);
  font-size: 12px;
}
.timesheet-review-note {
  margin: 0 20px 12px;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--warning-bg);
  color: var(--warning-fg);
  font-size: 13px;
}
.timesheet-comments {
  margin: 0 20px 16px;
  padding: 12px 0 0;
  border-top: 1px solid var(--border);
}
.timesheet-comments-hdr {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
}
.timesheet-comment {
  display: flex;
  gap: 8px;
  font-size: 13px;
  padding: 4px 0;
}
.timesheet-comment-author { font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.timesheet-comment-body { color: var(--text-primary); }
.timesheet-comment-compose {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.timesheet-comment-input {
  flex: 1;
  min-width: 160px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-1);
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
}
.timesheet-setup { max-width: 480px; margin: 40px auto; }
.timesheet-setup p { margin: 0 0 16px; line-height: 1.45; }
.timesheet-approvals {
  border-collapse: collapse;
  min-width: 720px;
  width: 100%;
  font-size: 13px;
}
.timesheet-approvals th,
.timesheet-approvals td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-subtle, var(--border));
  text-align: left;
  white-space: nowrap;
}
.timesheet-approvals thead th {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  position: sticky;
  top: 0;
  background: var(--surface-0);
  z-index: 2;
}
.timesheet-approval-details { white-space: normal; min-width: 140px; }
.timesheet-approval-week { font-size: 12px; color: var(--text-muted); }
.timesheet-approval-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.timesheet-add-wrap { position: relative; }
.timesheet-add-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  min-width: 200px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  padding: 4px;
  display: flex;
  flex-direction: column;
}
.timesheet-add-menu button {
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 6px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
}
.timesheet-add-menu button:hover { background: var(--surface-2); }
.timesheet-hint {
  padding: 0 20px 8px;
  font-size: 13px;
  color: var(--text-muted);
}
.timesheet-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 16px;
}
.timesheet-picker {
  margin: 0 20px 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-1);
}
.timesheet-picker-hdr {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.timesheet-picker-hdr .timesheet-comment-input { flex: 1; }
.timesheet-picker-tabs { margin: 0 0 8px; }
.timesheet-picker-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin: 0 0 8px;
  color: var(--text-primary);
}
.timesheet-picker-list { max-height: 240px; overflow: auto; }
.timesheet-track { width: 100%; min-width: 0; }
.timesheet-track-duration-row { display: flex; gap: 8px; align-items: center; }
.timesheet-track-duration-row .form-control { flex: 1; }
.timesheet-track-picked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
}
.timesheet-track-hits {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  max-height: 180px;
  overflow: auto;
}
.timesheet-track-hit {
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 6px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  width: 100%;
}
.timesheet-track-hit:hover { background: var(--surface-2); }
.timesheet-track-hint { font-size: 12px; color: var(--text-muted); padding: 8px 0; }
.timesheet-person-name {
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
}
.timesheet-person-capacity {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.timesheet-roster-open-col { width: 88px; min-width: 88px; text-align: right; }
.timesheet-focus-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 20px 12px;
  font-size: 13px;
  color: var(--text-primary);
  flex-shrink: 0;
}

/* ── Theme picker (Appearance settings) ─────────────────────────────────── */
.theme-picker { display: flex; gap: 12px; flex-wrap: wrap; }
.theme-option {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 20px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--surface-1);
  font-family: inherit;
}
.theme-option[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  color: var(--text-primary);
  font-weight: 600;
}
.theme-option:hover { border-color: var(--accent); color: var(--text-primary); }

/* Reconnect modal: shared CSS hardcodes white; retokenize in dark. */
html[data-theme="dark"] #components-reconnect-modal {
  background-color: var(--surface-1);
  color: var(--text-primary);
}
html[data-theme="dark"] #components-reconnect-modal button {
  background-color: var(--accent);
  color: var(--on-accent);
}
html[data-theme="dark"] #components-reconnect-modal button:hover,
html[data-theme="dark"] #components-reconnect-modal button:active {
  background-color: var(--accent-hover);
}

/* Gantt (frappe-gantt.css loads after app.css; attribute selector still wins). */
html[data-theme="dark"] .gantt .grid-header { fill: var(--surface-1); stroke: var(--border); }
html[data-theme="dark"] .gantt .grid-row { fill: var(--surface-1); }
html[data-theme="dark"] .gantt .grid-row:nth-child(even) { fill: var(--surface-2); }
html[data-theme="dark"] .gantt .row-line,
html[data-theme="dark"] .gantt .tick { stroke: var(--border); }
html[data-theme="dark"] .gantt .today-highlight { fill: var(--status-review-bg); }
html[data-theme="dark"] .gantt .arrow { stroke: var(--text-muted); }

/* PDF / print stay light even if the screen theme is dark. */
@media print {
  html[data-theme="dark"] {
    color-scheme: light;
    --surface-0: #ffffff;
    --surface-1: #ffffff;
    --surface-2: #f1f5f9;
    --surface-3: #e2e8f0;
    --border: #e2e8f0;
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-muted: #5b6675;
    --accent: #7c3aed;
    --accent-light: #ede9fe;
  }
}