/* 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;
}

*, *::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, 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; }

.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-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: #333; 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: #1a1a1a; 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: 320px; }
.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);
}

.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); }

/* ── 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; }
.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;
}

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

.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;
}

/* 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-panel-main { flex-direction: column; overflow-y: auto; }
  .task-panel-content { order: 1; }
  .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; }
  .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; }
}

/* ── 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;
}

.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; }

/* ── 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;
}

.admin-topbar {
  min-height: 48px;
  background: #1a1a2a;
  border-bottom: 1px solid #313244;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 8px 20px;
  gap: 12px 16px;
}

.admin-topbar .logo { font-weight: 700; color: #f59e0b; font-size: 15px; }
.admin-topbar .label { font-size: 11px; color: #6c7086; text-transform: uppercase; letter-spacing: 0.08em; }

/* Nav cluster: full-width wrap on phone so links stay inside the viewport (fixed-height
   topbar + margin-left:auto used to push them off-screen on iPhone). */
.admin-topbar-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  max-width: 100%;
}
@media (max-width: 680px) {
  .admin-topbar-nav {
    margin-left: 0;
    width: 100%;
  }
}

.admin-content { 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); }

/* 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: #f4f5f7;
  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: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
  color: #334155;
  font-family: Inter, system-ui, sans-serif;
}
#blazor-boot .blazor-boot-card strong {
  font-size: 1.15rem;
  color: #0f172a;
}
#blazor-boot .blazor-boot-card span {
  font-size: 0.92rem;
  line-height: 1.45;
  color: #64748b;
}
/* 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: #6d28d9;
  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); }

/* 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; }
}