/* =========================================================================
   9AM · Design System — "Mint"
   Asana's structure (uniform, airy, everything breathes) on a mint palette:
   off-white canvas, mint accent, slate ink, light-gray hairlines.
   Palette: #98FF98 mint · #FDFDFD off-white · #C8FAC8 pastel mint
            #4A4A4A slate · #E0E0E0 light gray
   ========================================================================= */

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("./vendor/fonts/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* --- Accent: mint. Light hue, so text ON accent is deep green, not white --- */
  --accent: #98ff98;
  --accent-hover: #7df57d;
  --accent-press: #63e463;
  --accent-soft: #c8fac8;        /* pastel mint for fills/selection */
  --accent-soft-hover: #b4f6b4;
  --accent-ink: #1e6b3c;         /* deep green ink on mint fills */
  --accent-ring: #98ff98;        /* focus ring */
  --on-accent: #14391f;          /* dark text on mint (white fails contrast) */

  /* --- Neutrals: off-white canvas, white cards, slate ink, gray lines --- */
  --bg: #fdfdfd;                 /* app canvas (off-white) */
  --surface: #ffffff;            /* cards/panels */
  --surface-2: #f7f9f7;          /* nested/secondary surfaces (faint mint tint) */
  --surface-hover: #f0f4f0;      /* hover wash */
  --ink: #4a4a4a;                /* primary text (slate) */
  --ink-2: #5d5d5d;              /* secondary text */
  --muted: #767676;              /* tertiary text */
  --faint: #9c9c9c;              /* placeholders, disabled */
  --line: #e0e0e0;               /* default hairline (light gray) */
  --line-strong: #cfcfcf;        /* emphasized borders */
  --line-subtle: #ececec;        /* whisper dividers */
  --scrim: rgba(74, 74, 74, 0.4);/* modal/drawer backdrops */

  /* --- Legacy glass tokens: map to soft surfaces (no glass effects) --- */
  --glass: #ffffff;
  --glass-2: #f7f9f7;
  --glass-border: var(--line);
  --highlight: transparent;
  --glow: transparent;

  /* --- Semantic: gentle, rounded, Headspace-warm --- */
  --success: #4f9d69;
  --success-soft: #e3f2e7;
  --success-ink: #2c6e44;
  --warning: #e9a23b;
  --warning-soft: #fdf2dd;
  --warning-ink: #8a5e14;
  --danger: #e0614f;
  --danger-soft: #fde7e3;
  --danger-ink: #9c3527;
  --info: #5b8def;
  --info-soft: #e7eefc;
  --info-ink: #2f5bb8;
  --neutral-soft: #f1f1f1;
  --neutral-ink: #5d5d5d;

  /* --- Status palette: pastels — tint fill + same-hue line + deep ink.
         Tuned to sit on the off-white canvas beside the mint primary. --- */
  --st-complete-bg: #e1f0dd;   --st-complete-bd: #8fc07f;   --st-complete-ink: #34672f;   /* green  */
  --st-paused-bg: #fde3dc;     --st-paused-bd: #e89a86;     --st-paused-ink: #99402b;     /* coral  */
  --st-notstarted-bg: #f1f1f1; --st-notstarted-bd: #cfcfcf; --st-notstarted-ink: #5d5d5d; /* gray   */
  --st-inprogress-bg: #ffeec2; --st-inprogress-bd: #f0bf4c; --st-inprogress-ink: #7a5a07; /* honey  */
  --st-billable-bg: #ece4f6;   --st-billable-bd: #b79ad8;   --st-billable-ink: #5b3d7a;   /* lilac  */
  --st-billed-bg: #e0ebf8;     --st-billed-bd: #8fb1d8;     --st-billed-ink: #2f5380;     /* sky    */
  --st-proposed-bg: #ddf2ef;   --st-proposed-bd: #79c2b8;   --st-proposed-ink: #20655b;   /* teal   */

  /* --- Royal kept for invoice DOCUMENT (stays branded) --- */
  --royal: #1e6b3c; /* default document accent (deep mint-green); overridden per workspace via --doc-accent */

  /* --- Type: Nunito — rounded, warm, friendly (self-hosted, CSP-safe) --- */
  --font-sans: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  /* One family everywhere — serif & mono intentionally alias the sans stack */
  --font-serif: var(--font-sans);
  --font-mono: var(--font-sans);

  /* --- Radii: generously rounded, Headspace-soft --- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* --- Shadows: neutral slate, low, calm — elevation whispers, never shouts --- */
  --shadow-xs: 0 1px 2px rgba(74, 74, 74, 0.05);
  --shadow-sm: 0 1px 3px rgba(74, 74, 74, 0.06), 0 2px 8px rgba(74, 74, 74, 0.04);
  --shadow-md: 0 4px 14px rgba(74, 74, 74, 0.08);
  --shadow-lg: 0 12px 32px rgba(74, 74, 74, 0.12);
  --shadow-overlay: 0 24px 64px rgba(74, 74, 74, 0.18);

  /* --- Card interior: ONE horizontal inset for header, toolbar, tables --- */
  --card-pad-x: 20px;

  /* --- Tables: one spec, consumed by every table in the app --- */
  --tbl-font: 14px;
  --tbl-head-font: 13px;
  --tbl-row-h: 44px;
  --tbl-pad-x: 14px;
  --tbl-line: var(--line);

  /* --- Type scale (uniform across the app) --- */
  --text-h1: 26px;   /* page title */
  --text-h2: 20px;   /* card / panel titles */
  --text-h3: 16px;   /* section headings */
  --text-h4: 14px;   /* field labels, small headings */
  --text-body: 15px; /* paragraph, values, inputs, buttons */

  /* --- Motion --- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 120ms;
  --t-base: 180ms;
}

/* Dark theme: same Mint accent, dark slate surfaces. The invoice/proposal
   document stays light on purpose (it is a printable page). */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #181b18;
  --surface: #21251f;
  --surface-2: #282d26;
  --surface-hover: #2f3530;
  --ink: #e7e9e6;
  --ink-2: #c3c7c2;
  --muted: #9aa09a;
  --faint: #71776f;
  --line: #353b34;
  --line-strong: #474e46;
  --line-subtle: #2c322b;
  --scrim: rgba(0, 0, 0, 0.55);
  --accent-soft: #2c4631;
  --accent-soft-hover: #35543b;
  --accent-ink: #b9f6c0;
  --on-accent: #0e2a14;
  --neutral-soft: #2f3530;
  --neutral-ink: #c3c7c2;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-overlay: 0 24px 64px rgba(0, 0, 0, 0.6);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* =========================================================================
   Layout shell
   ========================================================================= */

.app-layout {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  min-height: 100vh;
}

/* Sidebar and topbar share one continuous surface: no divider lines, the
   sidebar's tint fades into the canvas and the topbar fades out of it. */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 12px;
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--bg) 100%);
  border-right: 0;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
}

.brand-icon {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-name {
  color: var(--ink);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
}

.brand-sub {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-height: 0;
}

.nav-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.nav-item:hover {
  background: var(--surface-hover);
}

.nav-item.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.nav-item.active .nav-icon {
  color: var(--accent);
}

.nav-icon {
  flex-shrink: 0;
  color: var(--muted);
}

.nav-item.active .nav-icon,
.nav-item:hover .nav-icon {
  color: var(--ink);
}

.nav-item.active .nav-icon {
  color: var(--accent);
}

/* --- Main area --- */

.main-area {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 32px;
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--bg) 28%);
  border-bottom: 0;
  position: sticky;
  top: 0;
  z-index: 5;
}

/* Bare icon buttons (topbar): icon only, no box until hover */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.icon-btn:hover:not(:disabled) {
  background: var(--surface-hover);
  color: var(--ink);
}

.icon-btn:disabled {
  color: var(--faint);
  cursor: default;
}

/* Bell unread badge: the icon becomes a red count chip */
.icon-btn.has-unread { position: relative; color: var(--ink-2); }
.icon-btn.has-unread::after {
  content: attr(data-count);
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}

/* Left-nav Inbox count */
.nav-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}

/* Inbox (email-feel) */
.inbox-tabs { display: inline-flex; gap: 4px; }
.inbox-tab {
  border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--muted); padding: 6px 12px; border-radius: var(--radius-pill); cursor: pointer;
}
.inbox-tab.active { background: var(--accent-soft); color: var(--accent-ink); }
#inboxMarkAllBtn { margin-left: auto; }
.inbox-list { display: flex; flex-direction: column; padding: 0 var(--card-pad-x) 16px; }
.inbox-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  border-bottom: 1px solid var(--line-subtle);
}
.inbox-row.is-unread { background: var(--surface-2); }
.notif-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
  background: var(--accent-soft); color: var(--accent-ink);
}
.notif-ic-collector { background: var(--st-inprogress-bg); color: var(--st-inprogress-ink); }
.inbox-main {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  border: 0; background: transparent; text-align: left; cursor: pointer; padding: 0;
}
.inbox-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.inbox-row.is-unread .inbox-title::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px;
  border-radius: 50%; background: var(--danger); vertical-align: middle;
}
.inbox-body { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-actions { display: flex; gap: 6px; flex: 0 0 auto; opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.inbox-row:hover .inbox-actions { opacity: 1; }
.inbox-act {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  font: inherit; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-pill); cursor: pointer;
}
.inbox-act:hover { background: var(--surface-hover); border-color: var(--line-strong); }

.workspace-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.workspace-badge img {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
}

.topbar-profile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
}

.topbar-profile {
  width: 42px;
  height: 42px;
}

.topbar-profile .avatar {
  width: 42px;
  height: 42px;
  font-size: 15px;
}

.topbar-profile:hover .avatar {
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.topbar-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.topbar-eyebrow {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.topbar-title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 16px;
}
.topbar { padding-right: 28px; }
.topbar-profile { margin-left: 2px; }

/* Global search trigger in the header (wide, search icon left) */
.topbar-search {
  flex: 1;
  max-width: 460px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  margin: 0 16px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  cursor: text;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.topbar-search:hover { border-color: var(--line-strong); }
.topbar-search svg { flex: 0 0 auto; }
.topbar-search span { color: var(--faint); }

/* Search panel: right-side overlay, same slide language as the item card */
.search-overlay {
  --search-width: 460px;
  position: fixed;
  inset: 0;
  z-index: 85;
  background: transparent;
  transition: background var(--t-base) var(--ease);
  pointer-events: none;
}
.search-overlay[hidden] { display: none; }
.search-overlay.is-open { background: var(--scrim); pointer-events: auto; }
.search-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100vh;
  width: var(--search-width);
  max-width: 96vw;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-overlay);
  transform: translateX(100%);
  transition: transform 0.28s var(--ease);
  pointer-events: auto;
}
.search-overlay.is-open .search-panel { transform: translateX(0); }
.search-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-subtle);
  color: var(--muted);
}
.search-input {
  flex: 1;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  outline: none;
}
.search-results { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 0; }
.search-section-title {
  padding: 10px 18px 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.search-empty { padding: 24px 18px; color: var(--faint); font-size: 14px; }
.search-result {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 10px 18px;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.search-result:hover { background: var(--surface-hover); }
.sr-name { font-size: 15px; font-weight: 600; color: var(--ink); }
.sr-meta { display: flex; gap: 12px; font-size: 13px; color: var(--muted); }
.sr-board { display: inline-flex; align-items: center; gap: 5px; }

@media (prefers-reduced-motion: reduce) {
  .search-panel, .search-overlay { transition: none; }
}

.content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px 32px 48px;
  min-width: 0;
}

.screen {
  display: none;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.screen.active {
  display: flex;
  animation: screen-in var(--t-base) var(--ease);
}

@keyframes screen-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .screen.active { animation: none; }
}

/* =========================================================================
   Cards, panels, sections
   ========================================================================= */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.card + .card {
  margin-top: 0;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px var(--card-pad-x) 12px;
}

.card-header > div:first-child {
  min-width: 0;
}

.card-title {
  margin: 0;
  font-size: var(--text-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.card-sub {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--text-h4);
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 20px;
  border-top: 1px solid var(--line-subtle);
  background: var(--surface-2);
}

.invoice-action-hint {
  margin: 0;
  padding: 0 20px;
  min-height: 1.2em;
  font-size: 13px;
  color: var(--muted);
  background: var(--surface-2);
}

.invoice-action-hint:empty {
  padding: 0;
  min-height: 0;
}

/* =========================================================================
   Metric grid
   ========================================================================= */

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.metric {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.metric-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.metric-value {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.metric-sub {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.metric-accent {
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--surface) 80%);
  border-color: var(--accent-ring);
}

.metric-accent .metric-label {
  color: var(--accent);
}

/* The metric grid lives inside the Finance screen; the .screen flex gap
   handles its spacing, so no per-screen hiding is needed anymore. */

/* =========================================================================
   Buttons
   ========================================================================= */

[hidden] {
  display: none !important;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font-size: var(--text-body);
  font-weight: 600;
  letter-spacing: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform 80ms var(--ease);
}

.btn:active {
  transform: translateY(0.5px);
}

.btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.btn-primary {
  background: var(--accent);
  border-color: transparent;
  color: var(--on-accent);
  box-shadow: var(--shadow-xs);
}

.btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: var(--shadow-sm);
}

.btn-primary:active {
  background: var(--accent-press);
}

.btn-secondary {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink);
}

.btn-secondary:hover {
  background: var(--surface-hover);
  border-color: var(--line-strong);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
}

.btn-ghost:hover {
  background: var(--surface-hover);
}

.btn-ghost-danger {
  background: transparent;
  color: var(--danger);
}

.btn-ghost-danger:hover {
  background: var(--danger-soft);
}

.btn-icon {
  width: 32px;
  min-height: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  border-color: transparent;
}

.btn-icon:hover {
  background: var(--surface-hover);
  color: var(--ink);
}

.btn-icon-left {
  padding-left: 10px;
}

/* =========================================================================
   Form fields
   ========================================================================= */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.field-label {
  color: var(--muted);
  font-size: var(--text-h4);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.input,
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 36px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-body);
  font-family: inherit;
  outline: 0;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
}

.input:hover,
.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--line-strong);
}

.input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.input::placeholder {
  color: var(--faint);
}

.input-sm {
  min-height: 32px;
  padding: 6px 10px;
  font-size: 13px;
}

textarea.input,
.field textarea {
  min-height: 80px;
  resize: vertical;
  line-height: 1.5;
}

select.input,
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236f6a5e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-subtle);
}

.filter-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
  padding: 4px var(--card-pad-x) 12px;
}

.field-wide {
  grid-column: span 2;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* =========================================================================
   Status pills & tabs
   ========================================================================= */

.status-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line-subtle);
  background: var(--surface);
}

/* SP-6: group-by-status toggle sits inline with the status quick-filters */
.status-tab-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--surface);
  border-bottom: 1px solid var(--line-subtle);
}

.status-tab-row .status-tabs {
  flex: 1 1 auto;
  border-bottom: 0;
}

.sheet-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-right: 20px;
}

.group-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 28px;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

/* (the old ▦/▥ ::before text-glyph icons are gone — text glyphs render
   inconsistently and double up with real SVG icons, e.g. on #filterBtn) */

.group-toggle-btn:hover {
  background: var(--surface-hover);
  border-color: var(--line-strong);
}

.group-toggle-btn.active {
  background: var(--accent-soft);
  border-color: var(--accent-ring);
  color: var(--accent-ink);
}

.tab,
.status-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

.tab span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--neutral-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.tab:hover {
  background: var(--surface-hover);
  border-color: var(--line-strong);
}

.tab.active {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent);
}

.tab.active span {
  background: var(--accent);
  color: var(--on-accent);
}

.status-check input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--accent);
}

.pill {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
}

.pill.Complete {
  background: var(--st-complete-bg);
  border-color: var(--st-complete-bd);
  color: var(--st-complete-ink);
}

.pill.Paused {
  background: var(--st-paused-bg);
  border-color: var(--st-paused-bd);
  color: var(--st-paused-ink);
}

.pill.NotStarted {
  background: var(--st-notstarted-bg);
  border-color: var(--st-notstarted-bd);
  color: var(--st-notstarted-ink);
}

.pill.InProgress {
  background: var(--st-inprogress-bg);
  border-color: var(--st-inprogress-bd);
  color: var(--st-inprogress-ink);
}

.pill.Billable {
  background: var(--st-billable-bg);
  border-color: var(--st-billable-bd);
  color: var(--st-billable-ink);
}

.pill.Proposed {
  background: var(--st-proposed-bg);
  border-color: var(--st-proposed-bd);
  color: var(--st-proposed-ink);
}

.pill.Billed {
  background: var(--st-billed-bg);
  border-color: var(--st-billed-bd);
  color: var(--st-billed-ink);
}

/* =========================================================================
   Status chips (storage status)
   ========================================================================= */

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.status-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
}

.status-chip.subtle {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  padding-left: 4px;
}

.status-chip.subtle::before {
  display: none;
}

.status-chip.warning {
  border-color: var(--warning-soft);
  background: var(--warning-soft);
  color: var(--warning-ink);
}

.status-chip.warning::before {
  background: var(--warning);
}

/* =========================================================================
   Settings drawer
   ========================================================================= */

.settings-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 16px;
}

.settings-section + .settings-section {
  border-top: 1px solid var(--line-subtle);
  padding-top: 16px;
}

.settings-section-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  font-size: 14px;
}

.settings-row-label {
  color: var(--muted);
  font-weight: 500;
}

.settings-action {
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  justify-content: flex-start;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}

.settings-action:hover {
  background: var(--surface-hover);
}

.settings-action.danger {
  color: var(--danger);
}

.settings-action.danger:hover {
  background: var(--danger-soft);
}

.settings-action[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

/* Collector: billing-cycle countdown cards */
.collector-cycles {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
}

.cycle-card {
  position: relative;
  min-width: 220px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.cycle-card.is-soon { border-color: var(--warning); }
.cycle-count { font-size: 24px; font-weight: 800; color: var(--ink); line-height: 1.1; }
.cycle-card.is-soon .cycle-count { color: var(--warning-ink); }
.cycle-label-text { margin-top: 2px; font-size: 13px; color: var(--muted); }
.cycle-client-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cycle-chip {
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-2);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.cycle-chip:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.cycle-none { font-size: 12px; color: var(--faint); }
.cycle-edit { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; }
.cycle-card.is-editing { display: flex; flex-direction: column; gap: 8px; min-width: 280px; }
.cycle-clients { display: flex; flex-direction: column; gap: 4px; max-height: 160px; overflow: auto; }
.cycle-client-opt { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.cycle-actions { display: flex; gap: 8px; }

.cycle-add {
  align-self: center;
  border: 1px dashed var(--line-strong);
  background: transparent;
  color: var(--muted);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.cycle-add:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }

.collector-selbar {
  display: flex; align-items: center; gap: 12px;
  margin: 0 var(--card-pad-x) 12px; padding: 8px 14px;
  background: var(--accent-soft); border: 1px solid var(--accent-ring); border-radius: var(--radius-md);
}
.collector-selbar .bulk-count { color: var(--ink); }
.collector-selbar .btn { margin-left: auto; }
.collector-log {
  margin: 12px var(--card-pad-x) 4px; padding-top: 12px; border-top: 1px solid var(--line-subtle);
}
.collector-log-title { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.collector-log-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid var(--line-subtle); font-size: 14px; color: var(--ink-2);
}
.collector-log-date { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 13px; }

/* Collector client groups */
.collector-group { margin-bottom: 18px; }
.collector-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px var(--card-pad-x) 8px;
}
.collector-client { font-size: 15px; font-weight: 700; color: var(--ink); }
.collector-total { font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.collector-group-head .collector-batch { margin-left: auto; }

/* Settings page */
.settings-tabs { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.settings-tab {
  border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--muted); padding: 7px 14px; border-radius: var(--radius-pill); cursor: pointer;
}
.settings-tab.active { background: var(--accent-soft); color: var(--accent-ink); }
.settings-pane { padding: 4px var(--card-pad-x) 20px; max-width: 640px; }
.settings-pane[hidden] { display: none; }
.settings-account-row {
  display: flex; align-items: center; gap: 14px; padding: 8px 0 16px;
}
.settings-account-meta { flex: 1; min-width: 0; }
.settings-account-name { font-size: 16px; font-weight: 700; color: var(--ink); }
.settings-account-email { font-size: 13px; color: var(--muted); }
.theme-options { display: flex; gap: 8px; flex-wrap: wrap; }
.theme-option {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  font: inherit; font-size: 14px; font-weight: 600; padding: 8px 18px; border-radius: var(--radius-pill); cursor: pointer;
}
.theme-option:hover { background: var(--surface-hover); border-color: var(--line-strong); }
.theme-option.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }

/* Configuration: status/type libraries */
.config-group { padding: 4px 10px 10px; }
.config-head { font-size: 13px; font-weight: 700; color: var(--ink-2); margin: 6px 0; }
.config-list { display: flex; flex-direction: column; gap: 4px; }
.config-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; }
.config-tools { display: inline-flex; align-items: center; gap: 6px; }
.config-color { border: 0; background: transparent; padding: 2px; cursor: pointer; border-radius: var(--radius-sm); }
.config-color:hover { background: var(--surface-hover); }
.config-swatch { display: block; width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--line); }
.config-del { border: 0; background: transparent; color: var(--faint); cursor: pointer; border-radius: var(--radius-sm); padding: 2px 6px; }
.config-del:hover { color: var(--danger); background: var(--danger-soft); }
.config-locked { font-size: 11px; font-weight: 600; color: var(--faint); }

/* Type chips + multi-select picker */
.type-chip { cursor: pointer; }
.type-picker .cell-picker-option { display: flex; align-items: center; gap: 8px; }
.type-check { position: relative; width: 14px; height: 14px; border: 1.5px solid var(--line-strong); border-radius: 4px; flex: 0 0 auto; }
.type-option.on .type-check { background: var(--accent); border-color: var(--accent); }
.type-option.on .type-check::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border-right: 2px solid var(--on-accent);
  border-bottom: 2px solid var(--on-accent);
  transform: rotate(40deg);
}
.type-add { color: var(--muted); font-weight: 600; }

/* =========================================================================
   THE table — one spec for every table in the app (.tbl).
   Monday behavior: columns start at the left and the table is only as wide
   as its content needs (never full-bleed). Row AND column hairlines. Every
   cell is a fixed-height middle-aligned line, so pills/inputs/buttons sit
   dead-center vertically.
   ========================================================================= */

.table-wrap {
  overflow: auto;
  padding: 0 var(--card-pad-x) 16px;
}

/* Full bleed, Monday-style: the table always spans the card, but columns are
   pinned to their set widths on the left; one trailing filler column absorbs
   the leftover space so data never stretches to fill. */
.tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: var(--tbl-font);
  background: var(--surface);
  border: 1px solid var(--tbl-line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.tbl th {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 38px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: var(--tbl-head-font);
  font-weight: 600;
  text-align: left;
  padding: 0 var(--tbl-pad-x);
  vertical-align: middle;
  border-bottom: 1px solid var(--tbl-line);
  border-right: 1px solid var(--line-subtle);
  white-space: nowrap;
}

.tbl td {
  height: var(--tbl-row-h);
  padding: 0 var(--tbl-pad-x);
  font-size: var(--tbl-font);
  color: var(--ink);
  border-bottom: 1px solid var(--line-subtle);
  border-right: 1px solid var(--line-subtle);
  vertical-align: middle;
  overflow: hidden;
}

.tbl th { overflow: hidden; }

/* Crop-with-fade: a FULL-WIDTH clip wrapper inside each text cell. Because it
   fills the cell, the fade sits at the cell's right edge and only bites when
   content actually overflows. The mask is never on the <td>, so the cell's
   border (the column line) is never faded. */
.cell-clip {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  min-width: 0;
  white-space: nowrap;
}
.cell-clip,
.item-cell .item-inner,
.due-cell .due-wrap,
.timeline-cell .duration-text {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}
/* The fade is added by JS (markClippedCells) ONLY when content overflows, so a
   fully visible value is never faded and the column border is never touched. */
.cell-clip.is-clipped,
.item-cell .item-inner.is-clipped,
.due-cell .due-wrap.is-clipped,
.timeline-cell .duration-text.is-clipped {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent);
}

.tbl th:last-child,
.tbl td:last-child { border-right: 0; }

.tbl tbody tr {
  transition: background var(--t-fast) var(--ease);
}

.tbl tbody tr:hover {
  background: var(--surface-hover);
}

.tbl tbody tr:last-child td {
  border-bottom: 0;
}

/* Alignment rule: everything left-aligned, headers included. Only cells whose
   content is a button or a profile photo center. */
.tbl .money {
  text-align: left;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Column widths (fixed layout: pinned; the unspecified filler col absorbs) */
.col-select { width: 40px; }
.col-status { width: 118px; }
.col-client { width: 116px; }
.col-type { width: 150px; }
.col-money { width: 96px; }
.col-item { width: 188px; }
.col-person { width: 72px; }
.col-due { width: 138px; }
.col-timeline { width: 152px; }
/* .col-addcol intentionally has NO width: it is the filler */

/* SP-7 column visibility. visibility:collapse on <col> removes the column's
   space AND hides its cells (CSS tables spec) — never display:none on cells,
   which shifts the remaining cells into the wrong columns. */
#projectTable.hide-col-client .col-client { visibility: collapse; }
#projectTable.hide-col-type .col-type { visibility: collapse; }
#projectTable.hide-col-person .col-person { visibility: collapse; }
#projectTable.hide-col-status .col-status { visibility: collapse; }
#projectTable.hide-col-owed .col-money { visibility: collapse; }
#projectTable.hide-col-due .col-due { visibility: collapse; }
#projectTable.hide-col-timeline .col-timeline { visibility: collapse; }

/* Column resize handles (added to project-table headers by JS).
   The header th is already position: sticky, which is a valid containing
   block for the absolutely-positioned handle — no extra positioning needed. */
.col-resizer {
  position: absolute;
  top: 0;
  right: -4px;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  z-index: 3;
  touch-action: none;
}

.col-resizer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 3px;
  width: 1px;
  height: 100%;
  background: transparent;
  transition: background var(--t-fast) var(--ease);
}

.col-resizer:hover::after,
.col-resizer.is-dragging::after {
  background: var(--accent);
  width: 2px;
}

body.is-col-resizing {
  cursor: col-resize;
  user-select: none;
}

.code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-2);
}

.description-cell {
  max-width: none;
}

.description-cell .line-subtitle {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.select-cell {
  text-align: center;
}

.select-cell input {
  width: 15px;
  height: 15px;
  margin: 0;
  vertical-align: middle;
  accent-color: var(--accent);
  cursor: pointer;
}

.job-number-button {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}

.job-number-button:hover {
  color: var(--accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================================
   Spreadsheet grid
   ========================================================================= */

.sheet-table .cell.editable {
  position: relative;
  cursor: text;
  outline: none;
  transition: box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.sheet-table .cell.editable:hover {
  background: var(--surface-hover);
}

.sheet-table .cell.editable.is-active {
  box-shadow: inset 0 0 0 2px var(--accent);
  background: var(--accent-soft);
}

.sheet-table .cell.editable.is-editing {
  padding: 0;
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.cell-editor {
  width: 100%;
  height: 100%;
  min-height: var(--tbl-row-h);
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--tbl-font);
  outline: none;
}

select.cell-editor {
  cursor: pointer;
  appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236f685c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.cell-flag {
  display: inline-block;
  margin-left: 6px;
  color: var(--warning);
  font-size: 9px;
  vertical-align: middle;
  opacity: 0.7;
  cursor: help;
}

/* .period-cell — deleted (not emitted by any JS/HTML) */

.period-edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 11px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  background: var(--glass-2);
  color: var(--ink-2);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}

/* Period text inherits the row's status hue so the line reads as one unit.
   Declared before :hover (equal specificity) so hover still wins. */
.period-tone-Complete,
.period-edit.period-tone-Complete { color: var(--st-complete-ink); }
.period-tone-Paused,
.period-edit.period-tone-Paused { color: var(--st-paused-ink); }
.period-tone-NotStarted,
.period-edit.period-tone-NotStarted { color: var(--st-notstarted-ink); }
.period-tone-InProgress,
.period-edit.period-tone-InProgress { color: var(--st-inprogress-ink); }
.period-tone-Billable,
.period-edit.period-tone-Billable { color: var(--st-billable-ink); }
.period-tone-Billed,
.period-edit.period-tone-Billed { color: var(--st-billed-ink); }

.period-edit:hover {
  background: var(--accent-soft);
  border-color: var(--accent-ring);
  color: var(--ink);
}

/* Whole row is clickable (opens the editor) — give it an obvious, smooth hover. */
.sheet-row {
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}

.sheet-row:hover {
  background: var(--surface-hover);
}

.sheet-row.is-selected {
  background: var(--accent-soft);
}

.sheet-row.is-selected:hover {
  background: var(--accent-soft-hover);
}

.sheet-table .sheet-row { height: var(--tbl-row-h); background: var(--surface); }
.sheet-table .sheet-row:hover { background: var(--surface-hover); }
.sheet-table .sheet-row.is-selected { background: var(--accent-soft); }
.sheet-table .sheet-row.is-selected:hover { background: var(--accent-soft-hover); }

/* SP-6: status group headers ("boards within boards") --------------------- */
.group-header {
  cursor: pointer;
  user-select: none;
}

.group-header-cell {
  padding: 10px 14px 9px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line-subtle);
  border-left: 3px solid var(--line-strong);
  white-space: nowrap;
}

.group-header:hover .group-header-cell {
  background: var(--surface-hover);
}

.group-header.is-collapsed .group-header-cell {
  border-bottom-color: var(--line);
}

/* .group-caret — formerly text-glyph sizing; now an SVG .chev button.
   Transition kept for open/closed rotation if ever applied by JS. */
.group-caret {
  transition: transform var(--t-fast) var(--ease);
}

.group-count {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.group-total {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}


/* Monday-calm sheet: group header — white surface, accent via inset box-shadow */
.sheet-table .group-header-cell {
  padding: 9px 8px;
  background: var(--surface);
  border-left: 0;
  border-top: 1px solid var(--table-line);
  border-bottom: 1px solid var(--table-line);
  box-shadow: inset 3px 0 0 var(--group-accent, transparent);
}
.sheet-table .group-header:hover .group-header-cell { background: var(--surface-hover); }
.sheet-table .group-header.is-collapsed .group-header-cell { border-bottom-color: var(--table-line); }

/* Per-group "+ Add" row, echoing the sheet's own add-row affordance */
.group-add-row td {
  padding: 0;
  border-bottom: 1px solid var(--line-subtle);
}

.group-add {
  display: inline-flex;
  align-items: center;
  width: 100%;
  height: var(--tbl-row-h);
  padding: 0 var(--tbl-pad-x) 0 23px; /* 23px left aligns with the chevron indent */
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.group-add:hover {
  background: var(--surface-hover);
  color: var(--ink);
}

/* Sortable headers */
.th-sort {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.th-sort:hover {
  color: var(--ink-2);
}

.th-sort::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 6px;
  vertical-align: middle;
  opacity: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.th-sort.sorted {
  color: var(--accent);
}

.th-sort.sorted::after {
  opacity: 1;
}

.th-sort.sorted[data-sort-dir="asc"]::after {
  transform: rotate(180deg);
}

/* Bulk action bar */
.bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 var(--card-pad-x) 12px;
  padding: 8px 14px;
  border: 1px solid var(--accent-ring);
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  animation: bulk-in var(--t-base) var(--ease);
}

@keyframes bulk-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.bulk-count {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}

/* Red trashcan delete: icon-only, far right of the bulk bar */
.btn-trash {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--danger);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn-trash:hover { background: var(--danger-soft); color: var(--danger-ink); }

.bulk-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bulk-field {
  margin: 0;
}

/* Inline add-row */
.add-row-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  width: auto;
  margin: 0 var(--card-pad-x) 16px;
  padding: 11px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.add-row-inline:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-press);
}

/* =========================================================================
   Collaboration: auth identity, comments, activity
   ========================================================================= */

.avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}

.avatar.sm {
  width: 24px;
  height: 24px;
  font-size: 10px;
}

.auth-error {
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  color: var(--danger-ink);
  font-size: 12.5px;
}

/* Discussion inside the project drawer */
.discussion {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.discussion-head {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 10px;
}

.discussion-head-sub {
  margin-top: 18px;
}

.comment-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}

.comment {
  display: flex;
  gap: 9px;
}

.comment-body {
  min-width: 0;
}

.comment-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
}

.comment-meta strong {
  color: var(--ink);
}

.comment-meta span {
  color: var(--faint);
  font-size: 11px;
}

.comment.is-log .comment-log-text {
  color: var(--muted);
  font-style: italic;
}

.comment-text {
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 2px;
  word-break: break-word;
}

.comment-composer {
  display: flex;
  gap: 8px;
}

.comment-composer .input {
  flex: 1;
}

/* Activity feed (drawer + full screen) */
.activity-feed {
  display: flex;
  flex-direction: column;
}

.activity-feed:not(.compact) {
  padding: 8px 20px 20px;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-subtle);
}

.activity-item:last-child {
  border-bottom: 0;
}

.activity-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 13px;
  color: var(--ink-2);
}

.activity-time {
  font-size: 11px;
  color: var(--faint);
}

.empty-state.small {
  padding: 10px 0;
  font-size: 12.5px;
  text-align: left;
}

/* =========================================================================
   Collection queue
   ========================================================================= */

/* =========================================================================
   Invoice line picker
   ========================================================================= */

.line-picker {
  display: block;
  max-height: 560px;
  overflow: auto;
  border-bottom: 1px solid var(--line-subtle);
}

.invoice-lines-table {
  display: grid;
  min-width: 0; /* flex columns to the pane; .line-picker scrolls x only if truly tiny */
}

.invoice-line-head,
.line-item {
  display: grid;
  grid-template-columns: minmax(64px, 0.8fr) minmax(84px, 1fr) minmax(84px, 1fr) minmax(110px, 1.8fr) minmax(96px, 1.3fr) minmax(72px, 0.9fr) 40px;
}

.line-item > span:nth-child(5),
.invoice-line-head > span:nth-child(5) {
  white-space: nowrap;
}

.invoice-line-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}

.invoice-line-head span {
  min-height: 38px;
  padding: 0 var(--tbl-pad-x);
  color: var(--muted);
  font-size: var(--tbl-head-font);
  font-weight: 600;
  display: flex;
  align-items: center;
  min-width: 0;
  border-right: 1px solid var(--line-subtle);
}

.invoice-line-head span:last-child { border-right: 0; }

.invoice-line-head span:last-child,
.line-item > span:last-child {
  justify-content: center;
}

.line-item {
  background: var(--surface);
  border-bottom: 1px solid var(--line-subtle);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}

.line-item:hover {
  background: var(--surface-2);
}

.line-item:last-child {
  border-bottom: 0;
}

.line-item > span {
  min-height: var(--tbl-row-h);
  padding: 6px var(--tbl-pad-x);
  font-size: var(--tbl-font);
  color: var(--ink);
  display: flex;
  align-items: center;
  min-width: 0;
  word-break: break-word;
  border-right: 1px solid var(--line-subtle);
}

.line-item > span:last-child { border-right: 0; }

.line-item .money {
  justify-content: flex-end;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.line-item input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--accent);
}

.invoice-client-name {
  font-weight: 600;
}

.line-subtitle {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.invoice-selected-total {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}

.invoice-selected-total strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   Disclosure (Invoice Details, Client Database)
   ========================================================================= */

.disclose {
  border-bottom: 1px solid var(--line-subtle);
}

.disclose > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background var(--t-fast) var(--ease);
}

.disclose > summary::-webkit-details-marker {
  display: none;
}

.disclose > summary::before {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform var(--t-base) var(--ease);
  margin-right: 2px;
}

.disclose[open] > summary::before {
  transform: rotate(45deg);
}

.disclose > summary:hover {
  background: var(--surface-2);
}

.disclose .field-grid {
  border-bottom: 0;
  padding-top: 4px;
}

/* =========================================================================
   Saved invoice list
   ========================================================================= */

.saved-invoice-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 20px 20px;
}

.saved-invoice-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: background var(--t-fast) var(--ease);
}

.saved-invoice-item:hover {
  background: var(--surface-2);
}

.saved-invoice-item > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.saved-invoice-item strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.saved-invoice-item span {
  font-size: 12px;
  color: var(--muted);
}

.saved-invoice-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* =========================================================================
   Cash flow bars
   ========================================================================= */

.month-bars,
.warnings {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
}

.month-row {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 96px;
  align-items: center;
  gap: 12px;
}

.month-row > :first-child {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.month-row .money {
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.bar-track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--neutral-soft);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
  background: var(--accent);
  transition: width var(--t-base) var(--ease);
}

.warnings {
  border-top: 1px solid var(--line-subtle);
}

.warning-item {
  padding: 10px 12px;
  background: var(--warning-soft);
  border: 1px solid var(--warning-soft);
  border-radius: var(--radius-md);
  color: var(--warning-ink);
  font-size: 12.5px;
}

/* =========================================================================
   Empty states
   ========================================================================= */

.empty-state {
  padding: 32px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

/* =========================================================================
   Invoice Assistant — split layout
   ========================================================================= */

.invoice-split {
  display: grid;
  /* Default 60% form / 40% preview; the handle drag updates the variable. */
  grid-template-columns: var(--invoice-split-left, 60%) 8px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.split-handle {
  width: 8px;
  align-self: stretch;
  border-radius: var(--radius-pill);
  cursor: col-resize;
  background: transparent;
  transition: background var(--t-fast) var(--ease);
  touch-action: none;
}

.split-handle:hover,
.split-handle:active {
  background: var(--accent-soft);
}

.invoice-top-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.invoice-template-select {
  min-width: 180px;
}

.doc-color-input {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
}

.invoice-client-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.invoice-client-row .input {
  flex: 1;
  min-width: 0;
}

.invoice-client-summary {
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
}

.invoice-client-summary:empty { display: none; }

.invoice-client-summary .ccard-name {
  font-weight: 600;
  color: var(--ink-2);
  display: inline;
}

.invoice-client-summary .ccard-meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-left: 10px;
}

.invoice-client-summary .ccard-address {
  display: inline;
  margin-left: 10px;
  white-space: normal;
}

/* Invoice details: one row of compact fields — these are tiny values, not essays */
.invoice-details-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.field-compact {
  flex: 1 1 120px;
  max-width: 170px;
}

.field-compact .field-label {
  font-size: 12px;
}

.field-compact .input {
  height: 32px;
  padding: 0 10px;
  font-size: 13px;
}

/* Customize: From / Payment Note / Invoice Message cycle in one space */
.customize-tabs {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 10px;
}

.customize-tab {
  border: 0;
  border-right: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.customize-tab:last-child { border-right: 0; }
.customize-tab:hover:not(.active) { background: var(--surface-hover); }
.customize-tab.active { background: var(--accent-soft); color: var(--accent-ink); }

.customize-panels .customize-panel { width: 100%; }

.customize-hint {
  margin: 8px 0 0;
  color: var(--faint);
  font-size: 12px;
}

/* Saved-invoices popover (portaled panel under the bookmark icon) */
.saved-invoice-pop {
  position: fixed;
  z-index: 40;
  width: min(420px, calc(100vw - 16px));
  max-height: 60vh;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 8px;
}

.saved-invoice-pop-head {
  padding: 6px 8px 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

/* A saved line whose project no longer exists */
.line-item--missing { cursor: default; background: var(--surface-2); }
.line-item--missing:hover { background: var(--surface-2); }
.line-item--missing > span { color: var(--muted); }
.missing-pill {
  background: var(--danger-soft);
  color: var(--danger-ink);
  border: 1px solid var(--danger-soft);
}

.invoice-form-pane {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.invoice-preview-pane {
  position: sticky;
  top: 84px;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-height: calc(100vh - 104px);
  min-width: 0;
}

.preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.preview-label {
  color: var(--ink);
  font-size: 13px;
}

.preview-hint {
  color: var(--muted);
  font-size: 13px;
}

.preview-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0;
  background: var(--surface);
}

/* The document fills the 25% column exactly and scales to it */
.invoice-live-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 8.5 / 11;
  height: auto;
  margin: 0;
  background: #fff;
  border: 0;
  box-shadow: none;
  overflow: hidden;
  zoom: 1;
}

.invoice-live-preview .invoice-page {
  position: absolute;
  top: 0;
  left: 0;
  width: 816px;        /* 8.5in @96dpi */
  min-height: 1056px;  /* 11in */
  box-shadow: none;
  transform: scale(calc(100cqw / 816px));
  transform-origin: top left;
}

.invoice-live-preview:empty {
  position: static;
  aspect-ratio: auto;
  width: 100%;
  min-height: 320px;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px;
  color: var(--muted);
  font-size: 14px;
  background: var(--surface);
}

.invoice-live-preview:empty::before {
  content: "Pick a client and at least one line item to see the live preview.";
}

/* =========================================================================
   Section blocks (within a card)
   ========================================================================= */

.section-block {
  padding: 16px var(--card-pad-x);
  border-bottom: 1px solid var(--line-subtle);
}

.section-block:last-of-type {
  border-bottom: 0;
}

.section-block-title {
  margin-bottom: 12px;
  color: var(--ink);
  font-size: var(--text-h3);
  font-weight: 700;
}

.field-grid.two-col,
.field-grid.three-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0;
  border-bottom: 0;
  gap: 12px;
}

.field-grid.three-col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.inline-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  height: 36px;
}

.btn-sm {
  min-height: 32px;
  padding: 0 12px;
  font-size: var(--text-body);
}

.status-tabs-tight {
  padding: 0 0 12px 0;
  border-bottom: 0;
  background: transparent;
}

/* Contacts table column widths */
.col-business { width: 220px; }
.col-contact { width: 180px; }
.col-phone { width: 140px; }
.col-actions { width: 100px; }
.tbl th.actions { text-align: left; white-space: nowrap; }
.tbl td.actions { text-align: right; white-space: nowrap; }

.contact-row-actions {
  display: inline-flex;
  gap: 4px;
}

/* =========================================================================
   Template dialog
   ========================================================================= */

.template-dialog {
  border: 0;
  background: transparent;
  padding: 0;
}

.template-dialog::backdrop {
  background: var(--scrim);
}

.template-dialog-card {
  width: min(440px, 90vw);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay);
}

.template-dialog-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.template-dialog-card header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.template-dialog-card footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.dialog-hint {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

/* =========================================================================
   Drawer (Edit project)
   ========================================================================= */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--scrim);
  /* Toggle via opacity/visibility (not display) so the backdrop fades and the
     panel can slide on BOTH open and close. */
  opacity: 0;
  visibility: hidden;
  transition: opacity 260ms var(--ease), visibility 260ms var(--ease);
}

.drawer.open {
  opacity: 1;
  visibility: visible;
}

.drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  box-shadow: var(--shadow-overlay);
  /* Slides off the right edge when closed; eased back in when .open is set. */
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.drawer.open .drawer-panel {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .drawer,
  .drawer-panel {
    transition: none;
  }
}

.drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--line-subtle);
}

.drawer-eyebrow {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.drawer-title {
  margin: 0;
  font-size: var(--text-h2);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.drawer-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 22px;
  overflow-y: auto;
}

.drawer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 22px;
  border-top: 1px solid var(--line-subtle);
  background: var(--surface-2);
}

.drawer-footer-right {
  display: flex;
  gap: 8px;
}

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 940px) {
  .invoice-split {
    grid-template-columns: minmax(0, 1fr);
  }
  .split-handle {
    display: none;
  }
  .invoice-preview-pane {
    position: static;
    max-height: none;
    aspect-ratio: auto;
  }
}

@media (max-width: 1100px) {
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .filter-bar,
  .field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .field-grid.three-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .app-layout {
    grid-template-columns: 1fr;
  }
  .sidebar {
    flex-direction: row;
    align-items: center;
    height: auto;
    padding: 12px 14px;
    overflow-x: auto;
    border-right: 0;
    background: linear-gradient(90deg, var(--surface-2) 0%, var(--bg) 100%);
  }
  .sidebar-brand {
    padding: 0;
  }
  .sidebar-nav {
    flex-direction: row;
    flex: 0 1 auto;
  }
  .topbar {
    padding: 12px 18px;
  }
  .content {
    padding: 16px 18px 32px;
  }
}

@media (max-width: 580px) {
  .metric-grid,
  .filter-bar,
  .field-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }
  .topbar {
    flex-wrap: wrap;
    gap: 10px;
  }
  .topbar-eyebrow,
  #topbarEyebrow {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .card-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .field-wide {
    grid-column: span 1;
  }
}

/* =========================================================================
   Invoice preview / Print (preserved — do not change layout values)
   ========================================================================= */

.invoice-print-area {
  display: none;
}

.invoice-page {
  position: relative;
  min-height: 11in;
  padding: 0.55in 0.62in 0.5in 0.88in;
  background: #fff;
  color: #4a4a4a; /* site slate */
  font-family: var(--font-sans);
  box-shadow: 0 12px 40px rgba(74, 74, 74, 0.18);
}

.invoice-hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 0.55in;
  margin: -0.55in -0.62in 0.4in -0.88in;
  padding: 0.5in 0.62in 0.42in 0.88in;
  background: #f7f9f7;
}

.invoice-brand {
  color: var(--doc-accent, var(--royal));
  font-size: 24px;
  font-weight: 900;
}

.invoice-brand img.invoice-logo {
  display: block;
  max-height: 0.6in;
  max-width: 2.4in;
  object-fit: contain;
}

.invoice-from {
  margin-top: 0.08in;
  font-size: 10px;
  line-height: 1.45;
  white-space: pre-line;
}

.invoice-title {
  margin: 0;
  color: var(--doc-accent, var(--royal));
  font-size: 24px;
  text-align: right;
}

.invoice-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7in;
  margin-top: 0.52in;
}

.invoice-print-area .invoice-label,
.invoice-live-preview .invoice-label {
  margin: 0 0 0.08in;
  font-size: 11px;
  font-weight: 800;
  color: #4a4a4a;
  text-transform: none;
  letter-spacing: 0;
}

.invoice-print-area .invoice-label-secondary,
.invoice-live-preview .invoice-label-secondary {
  margin-top: 0.18in;
}

.invoice-print-area .invoice-issue-date,
.invoice-live-preview .invoice-issue-date {
  margin-top: 0.18in;
}

.invoice-print-area .invoice-inline-label,
.invoice-live-preview .invoice-inline-label {
  font-weight: 800;
  margin-right: 0.06in;
}

.invoice-print-area .invoice-value,
.invoice-live-preview .invoice-value {
  margin: 0;
  font-size: 21px;
  font-weight: 900;
  color: #4a4a4a;
}

.invoice-print-area .invoice-subvalue,
.invoice-live-preview .invoice-subvalue {
  margin: 0.13in 0 0;
  font-size: 10px;
  line-height: 1.4;
  white-space: pre-line;
  color: #4a4a4a;
}

.invoice-print-area .accent-bar,
.invoice-live-preview .accent-bar {
  width: 2px;
  height: 0.62in;
  margin: 0.24in 0;
  background: var(--doc-accent, var(--royal));
}

.print-table-wrap {
  width: auto;
  margin: 0.22in -0.62in 0 -0.88in; /* bleed to the page's left/right padding */
}

.print-row {
  display: grid;
  grid-template-columns: 1fr 0.7in 1in 1in;
  align-items: start;
  padding: 0 0.62in 0 0.88in; /* re-inset the content; the row bg/borders bleed */
  border-bottom: 1px solid #e0e0e0;
  break-inside: avoid;
  page-break-inside: avoid;
}

.print-row .cell {
  padding: 10px 8px;
  font-size: 12px;
  border-right: 1px solid #ececec; /* column hairlines, like the app tables */
}

.print-row .cell:first-child { padding-left: 0; }
.print-row .cell:last-child { border-right: 0; padding-right: 0; }

.print-row-head { background: #f7f9f7; }
.print-row-head .cell {
  font-size: 11px;
  font-weight: 800;
  color: #767676;
}

.print-row .center {
  text-align: center;
}

.invoice-summary {
  display: grid;
  grid-template-columns: 1fr 2in;
  gap: 0.45in;
  margin-top: 0.22in;
  break-inside: avoid;
  page-break-inside: avoid;
}

.invoice-totals {
  display: grid;
  gap: 0.09in;
}

.total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.2in;
  font-size: 12px;
  line-height: 1.4;
}

.total-row strong,
.balance-due strong {
  font-weight: 900;
}

.balance-due {
  color: var(--doc-accent, var(--royal));
  font-weight: 900;
}

.due-date-row {
  margin-top: 0;
}

.payment-block {
  display: block;
  text-align: left;
  margin-top: 0.18in;
}

.payment-block img {
  width: 1.15in;
  height: auto;
  margin-top: 0.16in;
}

.payment-copy {
  font-size: 11px;
  line-height: 1.45;
}

.invoice-message {
  font-size: 11px;
  line-height: 1.55;
  white-space: pre-line;
  padding: 0.18in 0.22in;
  background: #f7f9f7;
  border-radius: 4px;
  color: #4a4a4a;
  break-inside: avoid;
  page-break-inside: avoid;
}

.invoice-message strong {
  display: block;
  margin-bottom: 0.08in;
}

.invoice-message br:first-of-type {
  display: none;
}

.invoice-message-hero {
  margin: -0.1in 0 0.28in;
}

.invoiced-by {
  margin-top: 0.16in;
  font-size: 12px;
  font-weight: 800;
}

@media print {
  body {
    background: #fff;
  }

  body > :not(.invoice-print-area) {
    display: none !important;
  }

  .invoice-print-area,
  .invoice-print-area.has-preview {
    display: block;
    margin: 0;
    max-width: none;
    padding: 0;
  }

  @page {
    size: letter;
    margin: 0.45in 0 0.45in 0;
  }

  @page :first {
    margin: 0 0 0.45in 0;
  }

  .invoice-page {
    box-shadow: none;
    padding: 0 0.62in 0 0.88in;
    min-height: 0;
    break-after: auto;
  }

  .invoice-page::before {
    position: fixed;
    left: 0.16in;
    top: 0.52in;
  }

  .invoice-hero {
    margin: 0 -0.62in 0.4in -0.88in;
    padding: 0.55in 0.62in 0.42in 0.88in;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .invoice-page > section,
  .invoice-page > table,
  .invoice-page > div {
    break-inside: auto;
  }

  .print-table {
    border-collapse: separate;
    border-spacing: 0;
  }

  .print-table thead {
    display: table-row-group;
  }
}

/* =========================================================================
   Anthropic-inspired editorial headings (phase 3 reskin)
   ========================================================================= */
.brand-name,
.card-title,
.metric-value,
.topbar-title,
.drawer-title {
  font-family: var(--font-serif);
  letter-spacing: -0.01em;
}
.card-title {
  font-weight: 600;
}
.metric-value {
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* =========================================================================
   Sunrise harmonization — Asana structure, Headspace warmth.
   Soft separated white cards on cream, pill buttons, warm hairlines,
   gentle elevation. (Replaces the former flat/brutalist override layers.)
   ========================================================================= */

/* Cards: white on cream, softly lifted */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
}

/* Topbar sizing (surface/border live in the base .topbar spec) */
.topbar {
  padding-top: 18px;
  padding-bottom: 18px;
}

.topbar-eyebrow {
  color: var(--accent-ink);
}

.nav-item {
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

/* Active nav: rounded peach pill — no rail bars */
.nav-item.active {
  background: var(--accent-soft);
  color: var(--accent-ink);
  box-shadow: none;
}

.nav-item.active .nav-icon {
  color: var(--accent-ink);
}

/* --- Metric strip: separate Asana-style stat cards --- */
.metric-grid {
  gap: 16px;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}

.metric {
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.metric:hover {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.metric-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted);
}

.metric-value {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink);
}

/* Selected metric: soft peach card, still rounded */
.metric-accent {
  background: var(--accent-soft);
  border-color: var(--accent-ring);
}

.metric-accent:hover {
  background: var(--accent-soft-hover);
  box-shadow: var(--shadow-sm);
}

.metric-accent .metric-label,
.metric-accent .metric-sub {
  color: var(--accent-ink);
}

/* Sub-bars stay on the card's white surface */
.card-actions,
.filter-bar,
.field-grid,
.status-tabs {
  background: var(--surface);
}

.th-sort.sorted,
.th-sort.sorted::after {
  color: var(--accent-ink);
}

.tab.active {
  color: var(--accent-ink);
}

/* Dropdown chevron: slate stroke */
select.input,
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Menus float gently */
.dd-menu {
  border-color: var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

/* Period pill: quiet outline, peach hover */
.period-edit {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink-2);
}

.status-chip {
  background: var(--surface);
  border-color: var(--line-strong);
}

@media (prefers-reduced-motion: reduce) {
  .metric {
    transition: none;
  }
}

/* Photos never show a tint behind the circle */
.avatar:has(img) {
  background: transparent;
}

/* Dialogs & drawer: soft overlay, warm scrim, no glass blur */
.template-dialog-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-overlay);
}

.template-dialog::backdrop {
  background: var(--scrim);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.drawer {
  background: var(--scrim);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.drawer-panel {
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* Focus: soft peach ring everywhere */
.btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Status + period chips each carry their own sunny pastel tone. The Period
   chip mirrors its row's status; hover keeps the peach editable affordance.
   !important lets the tones sit above the generic .period-edit outline. */
.pill.Complete,
.period-edit.period-tone-Complete {
  background: var(--st-complete-bg) !important;
  color: var(--st-complete-ink) !important;
  border-color: var(--st-complete-bd) !important;
}
.pill.Paused,
.period-edit.period-tone-Paused {
  background: var(--st-paused-bg) !important;
  color: var(--st-paused-ink) !important;
  border-color: var(--st-paused-bd) !important;
}
.pill.NotStarted,
.period-edit.period-tone-NotStarted {
  background: var(--st-notstarted-bg) !important;
  color: var(--st-notstarted-ink) !important;
  border-color: var(--st-notstarted-bd) !important;
}
.pill.InProgress,
.period-edit.period-tone-InProgress {
  background: var(--st-inprogress-bg) !important;
  color: var(--st-inprogress-ink) !important;
  border-color: var(--st-inprogress-bd) !important;
}
.pill.Billable,
.period-edit.period-tone-Billable {
  background: var(--st-billable-bg) !important;
  color: var(--st-billable-ink) !important;
  border-color: var(--st-billable-bd) !important;
}
.pill.Billed,
.period-edit.period-tone-Billed {
  background: var(--st-billed-bg) !important;
  color: var(--st-billed-ink) !important;
  border-color: var(--st-billed-bd) !important;
}
.period-edit:hover {
  background: var(--accent-soft) !important;
  color: var(--accent-ink) !important;
  border-color: var(--accent-ring) !important;
}

/* Links inside the app read warm */
.app-layout a {
  color: var(--accent-ink);
}

/* --- Trash bin (SP-2): toast + trash view --- */
.toast {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 1000;
  display: none;
  align-items: center;
  gap: 16px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 16px;
  background: var(--ink);
  color: #fff;
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-size: 14px;
}
.toast.toast--show {
  display: inline-flex;
}
.toast-action {
  background: transparent;
  color: var(--accent);
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
/* Trash renders a standard .tbl; the card has no header so add top room. */
#trashList .table-wrap { padding-top: 16px; }
/* Trash renders a standard .tbl — only cell tone helpers live here. */
.trash-title { font-weight: 600; }
.trash-sub { color: var(--muted); }
.trash-empty {
  padding: 24px var(--card-pad-x);
  opacity: 0.6;
}

/* --- Boards (SP-3): sidebar nav + editor --- */
.boards-nav {
  display: flex;
  flex-direction: column;
  margin: 4px 0 8px;
}
.boards-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 6px 2px;
}
.boards-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
}
.boards-toggle:hover { background: var(--surface-hover); color: var(--ink-2); }
.boards-caret { flex: 0 0 auto; transition: transform var(--t-fast) var(--ease); }
.boards-caret.is-collapsed { transform: rotate(-90deg); }
.boards-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  width: 20px;
  height: 20px;
  padding: 0;
  color: var(--muted);
  cursor: pointer;
}
.boards-add:hover {
  background: var(--accent-soft);
  border-color: var(--accent-ring);
  color: var(--accent-ink);
}
.boards-empty {
  padding: 2px 12px 6px;
  font-size: 12px;
  opacity: 0.5;
}
.board-item {
  display: flex;
  align-items: center;
}
.board-item .board-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 6px 12px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.board-item.active .board-pick {
  font-weight: 700;
}
.board-item {
  border-radius: var(--radius-sm);
}
.board-item:hover {
  background: var(--surface-hover);
}
.board-emoji {
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1;
}
.board-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-count.board-count { margin-left: auto; flex: 0 0 auto; }
.board-edit {
  background: transparent;
  border: 0;
  padding: 4px 10px;
  cursor: pointer;
  opacity: 0;
  font-size: 12px;
}
.board-item:hover .board-edit {
  opacity: 0.6;
}
.board-edit:hover {
  opacity: 1;
}
.board-editor {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-overlay);
  padding: 0;
  max-width: 360px;
  width: calc(100vw - 32px);
}
.board-editor::backdrop {
  background: var(--scrim);
}
.board-editor-form {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.board-editor-title {
  margin: 0 0 4px;
}
.board-color-input {
  height: 38px;
  padding: 2px;
}
.board-editor-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.board-editor-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.board-editor-spacer {
  flex: 1;
}
.board-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.board-swatch {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0;
}
.board-swatch.selected {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* SP-7: board identity — emoji input + quick-pick presets */
.board-icon-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.board-icon-input {
  width: 56px;
  flex: 0 0 auto;
  text-align: center;
  font-size: 18px;
  padding: 4px 6px;
}
.board-icon-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.board-icon-preset {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.board-icon-preset:hover {
  background: var(--surface-hover);
}

/* =========================================================================
   SP-8: view switcher + month-grid Calendar
   ========================================================================= */
.view-switch {
  display: inline-flex;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.view-tab {
  padding: 5px 14px;
  border: 0;
  border-right: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.view-tab:last-child { border-right: 0; }
.view-tab:hover:not(.active) { background: var(--surface-hover); }
.view-tab.active { background: var(--accent-soft); color: var(--accent-ink); }

.view-pane[hidden] { display: none; }

/* table-only controls hide in Calendar/Gantt views */
#workspaceCard[data-view="calendar"] .status-tab-row,
#workspaceCard[data-view="gantt"] .status-tab-row,
#workspaceCard[data-view="calendar"] #bulkBar,
#workspaceCard[data-view="gantt"] #bulkBar { display: none !important; }

.view-stub {
  margin: 8px 0 4px;
  padding: 64px 24px;
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  color: var(--muted);
}
.view-stub-title { margin: 0 0 6px; font-size: 16px; color: var(--ink); }
.view-stub-text { margin: 0; font-size: 13px; }

/* --- month grid --- */
#calendarView { --cal-lane: 20px; padding: 4px var(--card-pad-x) 16px; }
.cal-head { display: flex; align-items: center; gap: 16px; padding: 6px 2px 14px; }
.cal-nav { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.cal-nav-btn, .cal-today {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.cal-nav-btn { width: 32px; padding: 0; font-size: 16px; line-height: 1; }
.cal-nav-btn:hover, .cal-today:hover { background: var(--surface-hover); }
.cal-title { flex: 1; margin: 0; font-size: 18px; }
.cal-legend { flex: 0 0 auto; color: var(--muted); font-size: 12px; }

.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; background: var(--surface); }
.cal-dow { background: var(--surface-2); }
.cal-dow span {
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  border-right: 1px solid var(--line-subtle);
}
.cal-dow span:last-child { border-right: 0; }

.cal-weeks { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); overflow: hidden; background: var(--surface); }
.cal-week {
  position: relative;
  min-height: calc(28px + var(--lanes, 0) * var(--cal-lane) + 6px);
  border-bottom: 1px solid var(--line);
}
.cal-week:last-child { border-bottom: 0; }
.cal-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-cell { border-right: 1px solid var(--line-subtle); padding: 4px 5px; min-width: 0; }
.cal-cell:last-child { border-right: 0; }
.cal-cell.out { background: var(--neutral-soft); }
.cal-daynum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}
.cal-cell.out .cal-daynum { color: var(--muted); }
.cal-cell.today .cal-daynum { background: var(--accent); color: var(--on-accent); border-radius: 50%; }

.cal-overlay { position: absolute; left: 3px; right: 3px; top: 26px; bottom: 2px; pointer-events: none; }
.cal-bar, .cal-task {
  position: absolute;
  height: 18px;
  padding: 0 6px;
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  pointer-events: auto;
}
.cal-task { height: 16px; font-size: 10px; line-height: 14px; border-style: dashed; }
.cal-bar.round-l { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.cal-bar.round-r { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.cal-bar:not(.round-l) { border-left-width: 0; }
.cal-bar:not(.round-r) { border-right-width: 0; }

/* status tones (reuse the shared --st-* palette) */
.cal-bar.Complete, .cal-task.Complete, .cal-undated-chip.Complete { background: var(--st-complete-bg); border-color: var(--st-complete-bd); color: var(--st-complete-ink); }
.cal-bar.Paused, .cal-task.Paused, .cal-undated-chip.Paused { background: var(--st-paused-bg); border-color: var(--st-paused-bd); color: var(--st-paused-ink); }
.cal-bar.NotStarted, .cal-task.NotStarted, .cal-undated-chip.NotStarted { background: var(--st-notstarted-bg); border-color: var(--st-notstarted-bd); color: var(--st-notstarted-ink); }
.cal-bar.InProgress, .cal-task.InProgress, .cal-undated-chip.InProgress { background: var(--st-inprogress-bg); border-color: var(--st-inprogress-bd); color: var(--st-inprogress-ink); }
.cal-bar.Billable, .cal-task.Billable, .cal-undated-chip.Billable { background: var(--st-billable-bg); border-color: var(--st-billable-bd); color: var(--st-billable-ink); }
.cal-bar.Billed, .cal-task.Billed, .cal-undated-chip.Billed { background: var(--st-billed-bg); border-color: var(--st-billed-bd); color: var(--st-billed-ink); }

.cal-undated { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 12px 14px; }
.cal-undated-head { margin-bottom: 8px; font-size: 12px; font-weight: 700; color: var(--muted); }
.cal-undated-list { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-undated-chip { padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; cursor: pointer; }
.cal-undated-chip:hover { filter: brightness(0.97); }

/* --- SP-9: Gantt --- */
.gantt-scroll { overflow-x: auto; overflow-y: visible; border: 1px solid var(--line); border-radius: var(--radius-lg); margin: 4px var(--card-pad-x) 16px; }
.gantt-inner { position: relative; }

.gantt-axis { display: flex; position: sticky; top: 0; z-index: 4; background: var(--surface); border-bottom: 1px solid var(--line); }
.gantt-axis-name { width: 240px; flex: 0 0 240px; position: sticky; left: 0; z-index: 5; background: var(--surface); border-right: 1px solid var(--line); }
.gantt-axis-months { position: relative; flex: 0 0 auto; }
.gantt-month {
  position: absolute; top: 0; height: 30px; line-height: 30px;
  padding-left: 6px; box-sizing: border-box;
  font-size: 11px; font-weight: 700;
  color: var(--muted); border-left: 1px solid var(--line-subtle);
}
.gantt-today { position: absolute; top: 0; width: 2px; background: var(--accent); z-index: 0; pointer-events: none; }

.gantt-rows { position: relative; z-index: 2; }
.gantt-row { display: flex; height: 34px; border-bottom: 1px solid var(--line-subtle); }
.gantt-row.is-project { background: var(--surface-2); }
.gantt-name {
  width: 240px; flex: 0 0 240px; position: sticky; left: 0; z-index: 3;
  background: var(--surface); border-right: 1px solid var(--line);
  display: flex; align-items: center; padding: 0 8px; overflow: hidden;
}
.gantt-row.is-project .gantt-name { background: var(--surface-2); }
.gantt-pname { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt-tname { display: flex; align-items: center; gap: 4px; width: 100%; font-size: 12px; }
.gantt-tlabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gantt-dep-btn { margin-left: auto; flex: 0 0 auto; border: 0; background: transparent; cursor: pointer; opacity: 0.35; font-size: 12px; padding: 2px 4px; }
.gantt-row:hover .gantt-dep-btn { opacity: 1; }

.gantt-track { position: relative; flex: 0 0 auto; }
.gantt-bar {
  position: absolute; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 3px;
  font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; text-align: left; cursor: pointer;
  padding: 0 6px;
}
.gantt-bar-project { top: 4px; height: 21px; line-height: 19px; }
.gantt-bar-task { top: 8px; height: 14px; line-height: 12px; background: var(--surface); border-color: var(--line-strong); font-weight: 500; }
.gantt-nodate { line-height: 30px; padding-left: 6px; font-size: 10px; font-style: italic; color: var(--muted); }

/* project bar tones reuse the shared status palette */
.gantt-bar-project.Complete { background: var(--st-complete-bg); border-color: var(--st-complete-bd); color: var(--st-complete-ink); }
.gantt-bar-project.Paused { background: var(--st-paused-bg); border-color: var(--st-paused-bd); color: var(--st-paused-ink); }
.gantt-bar-project.NotStarted { background: var(--st-notstarted-bg); border-color: var(--st-notstarted-bd); color: var(--st-notstarted-ink); }
.gantt-bar-project.InProgress { background: var(--st-inprogress-bg); border-color: var(--st-inprogress-bd); color: var(--st-inprogress-ink); }
.gantt-bar-project.Billable { background: var(--st-billable-bg); border-color: var(--st-billable-bd); color: var(--st-billable-ink); }
.gantt-bar-project.Billed { background: var(--st-billed-bg); border-color: var(--st-billed-bd); color: var(--st-billed-ink); }

.gantt-arrows { position: absolute; z-index: 1; pointer-events: none; overflow: visible; }
.gantt-arrow { fill: none; stroke: var(--ink); stroke-width: 1.5; }

.dep-x { margin-left: auto; opacity: 0.5; }
.dep-empty { padding: 8px 12px; color: var(--muted); font-size: 12px; }

/* --- Custom styled dropdowns (replaces native <select> chrome) --- */
.dd {
  position: relative;
  display: block;
}
.dd > select.input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}
.dd-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.dd-toggle .dd-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dd-toggle .dd-caret {
  flex: 0 0 auto;
  opacity: 0.55;
  font-size: 11px;
}
.dd-menu {
  position: fixed;
  z-index: 600;
  max-height: 280px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.dd-menu[hidden] {
  display: none;
}
.dd-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.dd-option:hover {
  background: var(--surface-hover);
}
.dd-option.selected {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

/* SP-7: column chooser + per-board default-status popover (extends .dd-menu) */
.cols-menu {
  min-width: 210px;
  padding: 4px 0;
}
.cols-menu-head {
  padding: 9px 12px 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.cols-menu-head + .cols-menu-head {
  border-top: 1px solid var(--line-subtle);
  margin-top: 4px;
}
.cols-menu-sep {
  height: 1px;
  margin: 6px 8px;
  background: var(--line-subtle);
}
.cols-reset { color: var(--accent-ink); font-weight: 600; }
.cols-option {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  font: inherit;
  color: var(--ink-2);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.cols-option:hover {
  background: var(--surface-hover);
}
.cols-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--surface);
  font-size: 11px;
  line-height: 1;
}
.cols-option.on .cols-check {
  background: var(--accent);
  border-color: var(--accent);
}
.cols-option.on .cols-check::before {
  content: "\2713"; /* ✓ */
  color: var(--on-accent);
}
/* Default-status rows reuse .cols-option but show a status dot, not a checkbox */
.cols-option .cols-dot {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 50%;
}
.cols-option.chosen {
  font-weight: 700;
}

/* --- Styled confirm modal --- */
.confirm-modal {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-overlay);
  padding: 0;
  max-width: 360px;
  width: calc(100vw - 32px);
}
.confirm-modal::backdrop {
  background: var(--scrim);
}
.confirm-modal-form {
  padding: 20px;
}
.confirm-modal-message {
  margin: 0 0 16px;
  line-height: 1.5;
}
.confirm-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* --- Custom styled date picker --- */
.dp {
  position: relative;
  display: block;
}
.dp > input[type="date"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}
.dp-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.dp-toggle .dp-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dp-toggle .dp-text.dp-empty {
  color: var(--faint);
}
.dp-toggle .dp-icon {
  flex: 0 0 auto;
  opacity: 0.55;
  font-size: 12px;
}
.dp-pop {
  position: fixed;
  z-index: 600;
  width: 244px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 10px;
}
.dp-pop[hidden] {
  display: none;
}
.dp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.dp-title {
  font-weight: 600;
  font-size: 13px;
}
.dp-nav {
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  width: 26px;
  height: 26px;
  cursor: pointer;
  font: inherit;
  line-height: 1;
}
.dp-nav:hover {
  background: var(--accent-soft);
  border-color: var(--accent-ring);
  color: var(--accent-ink);
}
.dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.dp-dow {
  text-align: center;
  font-size: 10px;
  opacity: 0.5;
  padding: 2px 0;
}
.dp-cell {
  aspect-ratio: 1 / 1;
}
.dp-day {
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  padding: 0;
}
.dp-day:hover {
  background: var(--surface-hover);
}
.dp-day.selected {
  background: var(--accent);
  color: var(--on-accent);
}
.dp-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}
.dp-foot button {
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  opacity: 0.7;
  padding: 2px 4px;
}
.dp-foot button:hover {
  opacity: 1;
  text-decoration: underline;
}

/* --- Tasks (SP-4): inline expandable rows --- */
.task-expand {
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  width: 16px;
  padding: 0;
  margin-right: 4px;
  opacity: 0.55;
  line-height: 1;
}
.task-expand:hover {
  opacity: 1;
}
.task-progress {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0 6px;
  opacity: 0.75;
  vertical-align: middle;
}
.task-progress.done {
  background: var(--success-soft);
  border-color: var(--success-soft);
  color: var(--success-ink);
  opacity: 1;
}
.task-rows-row > .task-cell {
  padding: 8px 24px 16px 52px;
  background: var(--surface-2);
}
/* .task-panel, .task-item, .task-line, .task-ctl* — deleted (replaced by subitem-table markup) */
.task-del {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  cursor: pointer;
  opacity: 0.4;
  font-size: 13px;
  padding: 4px 6px;
}
.task-del:hover {
  opacity: 1;
}
/* .task-subs — deleted; .task-add lives in the Subitems v2 block below */
/* .task-empty, .row-open, .open-cell — deleted (no longer emitted by table-view.js) */

/* --- Spreadsheet power-ups (SP-5): in-cell picker, copy flash --- */
.cell-picker {
  position: fixed;
  z-index: 600;
  max-height: 280px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.status-picker .cell-picker-option { padding: 4px 8px; }
.cell-picker-option .picker-pill { width: 100%; justify-content: center; }

.cell-picker-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.cell-picker-option:hover {
  background: var(--surface-hover);
}
.cell-picker-option.selected {
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.sheet-table .cell.editable.is-copied {
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}

/* --- Avatar image support (SB-5a Task 3) --- */
.avatar{overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}

/* --- Profile drawer (SB-5a Task 4) --- */
.avatar.lg{width:72px;height:72px;font-size:24px}
#profileDrawer .profile-avatar-row{display:flex;align-items:center;gap:12px;margin-bottom:4px}
#profileDrawer .profile-save-row{display:flex;align-items:center;gap:12px;margin-top:4px}
#profileDrawer .profile-email-row{display:flex;align-items:center;gap:12px;margin-top:8px}
#profileDrawer .field-msg{font-size:12px;color:var(--muted)}
#profileDrawer hr{border:none;border-top:1px solid var(--line-subtle);margin:4px 0}
#profileDrawer .profile-fields{display:flex;flex-direction:column;gap:10px}

/* --- Hovercard (SB-5a Task 5) --- */
.hovercard{position:fixed;z-index:10000;display:none;min-width:200px;max-width:280px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:12px}
.hovercard.show{display:block}
.hovercard .hc-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.hovercard .hc-line{font-size:12px;color:var(--muted);margin-top:2px}

/* --- Comments (SB-5b): per-comment edit/delete + inline edit --- */
.comment-actions{display:flex;gap:10px;margin-top:4px}
.comment-actions button{background:none;border:none;color:var(--muted);font-size:11px;cursor:pointer;padding:0;text-decoration:underline}
.comment-actions button:hover{color:var(--ink)}
.comment-edit-input{width:100%;box-sizing:border-box;min-height:54px;padding:6px 8px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);font:inherit;font-size:13px;resize:vertical}

/* Monday-style subitem block */
/* Geometry lives in the Subitems v2 block (one spec, no duplicates). */
.subitem-row.is-done .sub-name-input { color: var(--ink); }
/* Geometry lives in the consolidated .task-status-pill spec below; this block
   is colors + cursor only. */
.task-status-pill { border: 1px solid var(--st-notstarted-bd); cursor: pointer; background: var(--st-notstarted-bg); color: var(--st-notstarted-ink); }
.task-status-pill.InProgress { background: var(--st-inprogress-bg); color: var(--st-inprogress-ink); border-color: var(--st-inprogress-bd); }
.task-status-pill.Paused { background: var(--st-paused-bg); color: var(--st-paused-ink); border-color: var(--st-paused-bd); }
.task-status-pill.Complete { background: var(--st-complete-bg); color: var(--st-complete-ink); border-color: var(--st-complete-bd); }
.task-status-pill.InReview { background: var(--st-billable-bg); color: var(--st-billable-ink); border-color: var(--st-billable-bd); }
/* Timeline range picker: two months side by side (the dp-pop look, doubled) */
.range-pop { width: 520px; padding: 12px; }
.rp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.rp-hint { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.rp-months { display: flex; gap: 16px; }
.rp-month { flex: 1; min-width: 0; }
.rp-month-title { text-align: center; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.rp-day.in-range { background: var(--accent-soft); border-radius: 0; }

/* =============================================================================
   Task 7 — Monday-calm table reskin
   White surface, per-status accent bars, big SVG chevrons, clean pills.
   ============================================================================= */

:root { --table-line: var(--line); --table-ink: var(--ink); --table-muted: var(--muted); }

/* Visual table spec lives on .tbl — .sheet-table only adds grid behaviors. */
.sheet-table .cell { font-variant-numeric: tabular-nums; }

/* Type column — read-only text, edited in the item card */
.type-cell {
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.type-empty { color: var(--faint); }

/* "+" add/remove-columns header cell (Monday-style): sits right after the
   last data column; the rest of the filler column stays blank. */
.th-addcol { text-align: left; }
.addcol-cell { background: var(--surface-2); }

.addcol-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.addcol-btn:hover,
.addcol-btn.active {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

/* Left accent bar: rows inherit their status group's color */
.sheet-row td:first-child, .task-rows-row td:first-child { box-shadow: inset 3px 0 0 var(--group-accent, transparent); }

/* Item column */
.item-inner { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.item-open { overflow: hidden; text-overflow: ellipsis; }
.item-cell { font-weight: 600; }
.item-open { background: none; border: 0; color: var(--accent-ink); font: inherit; font-weight: 600; cursor: pointer; padding: 2px 4px; border-radius: 4px; }
.item-open:hover { background: var(--accent-soft); text-decoration: underline; }
/* Child-item count box, right of the item name */
.task-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 5px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.task-count.done { background: var(--success-soft); color: var(--success-ink); }

/* Chevrons — 28px hit target, 16px SVG, flex-centered (no text glyphs) */
.chev { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; background: none; color: var(--table-muted); cursor: pointer; border-radius: 6px; padding: 0; }
.chev:hover { background: var(--neutral-soft); color: var(--table-ink); }
.chev svg { display: block; }

/* Group headers: inner flex wrapper keeps td valid; accent via inset shadow */
.group-header-inner { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.group-header .group-count, .group-header .group-total { color: var(--table-muted); font-weight: 400; font-size: 12px; }

/* Status cells: the compact subitem chip IS the one status style, parents
   included. Centered in the cell, never full-bleed. */
.tbl td.status-cell { text-align: center; }
.status-cell .pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  height: 26px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

/* Due cells: the quiet subitem date input is the one due-date style.
   Inside table cells the calendar toggle goes borderless until hover. */
.due-wrap { display: inline-flex; align-items: center; gap: 5px; }
.due-wrap.is-overdue .dp-toggle .dp-text,
.due-wrap.is-overdue .due-input { color: var(--danger); font-weight: 600; }

.due-wrap .dp-toggle,
.mw-date-cell .dp-toggle {
  border-color: transparent;
  background: transparent;
  font-size: var(--tbl-font);
}

.due-wrap .dp-toggle:hover,
.mw-date-cell .dp-toggle:hover {
  border-color: var(--line);
  background: var(--surface);
}

/* Duration: plain text with a leading calendar icon (no pill bubble). */
.duration-text, .timeline-empty {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--tbl-font);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.duration-label { overflow: hidden; text-overflow: ellipsis; }
.timeline-empty { color: var(--faint); cursor: pointer; font-size: var(--tbl-font); }
.cell-cal-icon { flex: 0 0 auto; color: var(--muted); }
.timeline-cell { cursor: pointer; }
.dp-toggle .dp-warn { color: var(--danger); opacity: 1; }

/* Due + Person. The label is a flex pair so the date text and the
   SVG warn badge share one optical centerline (no baseline drift). */
.due-label { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; }
.due-label.is-overdue { color: var(--danger); font-weight: 600; }
.due-warn { display: block; flex: none; color: var(--danger); }
.due-empty { color: var(--line-strong); }

.timeline-cell { text-align: center; cursor: pointer; }
/* Timeline pill mirrors the status-pill recipe (tint fill + hue line + deep
   ink) — white-on-pastel fails contrast, so never white text here. */
.timeline-bar { display: inline-flex; align-items: center; height: 26px; border-radius: var(--radius-pill); padding: 0 12px; font-size: 12px; line-height: 1; white-space: nowrap; background: var(--neutral-soft); color: var(--neutral-ink); border: 1px solid var(--line-strong); }
.timeline-bar.NotStarted { background: var(--st-notstarted-bg); color: var(--st-notstarted-ink); border-color: var(--st-notstarted-bd); }
.timeline-bar.InProgress { background: var(--st-inprogress-bg); color: var(--st-inprogress-ink); border-color: var(--st-inprogress-bd); }
.timeline-bar.Paused { background: var(--st-paused-bg); color: var(--st-paused-ink); border-color: var(--st-paused-bd); }
.timeline-bar.Billable { background: var(--st-billable-bg); color: var(--st-billable-ink); border-color: var(--st-billable-bd); }
.timeline-bar.Proposed { background: var(--st-proposed-bg); color: var(--st-proposed-ink); border-color: var(--st-proposed-bd); }
.timeline-bar.Billed { background: var(--st-billed-bg); color: var(--st-billed-ink); border-color: var(--st-billed-bd); }
.timeline-bar.Complete { background: var(--st-complete-bg); color: var(--st-complete-ink); border-color: var(--st-complete-bd); }
.timeline-bar.InReview { background: var(--st-billable-bg); color: var(--st-billable-ink); border-color: var(--st-billable-bd); }
.person-cell { cursor: pointer; }
.person-cell .person-rollup { display: flex; align-items: center; justify-content: center; gap: 2px; height: 100%; }
.avatar-empty { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 1.5px dashed var(--line-strong); vertical-align: middle; }
.avatar-more { font-size: 10px; color: var(--table-muted); margin-left: 2px; }

/* Per-status accent vars — using the codebase's --st-*-bd border hex palette */
.group-header { --group-accent: transparent; }
.group-header.NotStarted, tr[data-accent="NotStarted"] { --group-accent: var(--st-notstarted-bd); }
.group-header.InProgress, tr[data-accent="InProgress"] { --group-accent: var(--st-inprogress-bd); }
.group-header.Paused,     tr[data-accent="Paused"]     { --group-accent: var(--st-paused-bd); }
.group-header.Billable,   tr[data-accent="Billable"]   { --group-accent: var(--st-billable-bd); }
.group-header.Billed,     tr[data-accent="Billed"]     { --group-accent: var(--st-billed-bd); }
.group-header.Complete,   tr[data-accent="Complete"]   { --group-accent: var(--st-complete-bd); }

/* Expand animation */
.task-cell .subitem-wrap { animation: sub-in 180ms ease; transform-origin: top; }
@keyframes sub-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .task-cell .subitem-wrap { animation: none; } }

/* =========================================================================
   Auth gate + boot splash — Sunrise skin.
   The base gate styles live in an inline <style> in index.html that loads
   AFTER this sheet, so these selectors carry extra specificity to win.
   ========================================================================= */

body #authGate {
  background: var(--bg);
}

#authGate .gate-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  background: var(--surface);
  font-family: var(--font-sans);
}

#authGate .gate-logo {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-md);
}

#authGate .gate-brand h1 {
  color: var(--ink);
  font-family: var(--font-sans);
}

#authGate .gate-brand p {
  color: var(--muted);
}

#authGate #gateTitle {
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 700;
}

#authGate .gate-card label {
  color: var(--muted);
}

#authGate .gate-card input {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

#authGate .gate-card input:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

#authGate #gateSubmit {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-xs);
  transition: background var(--t-fast) var(--ease);
}

#authGate #gateSubmit:hover:not(:disabled) {
  background: var(--accent-hover);
}

#authGate .gate-row button {
  color: var(--muted);
}

#authGate .gate-row button:hover {
  color: var(--accent-ink);
}

#authGate .gate-msg {
  border-radius: var(--radius-sm);
}

#authGate .gate-msg.error {
  background: var(--danger-soft);
  color: var(--danger-ink);
  border: 1px solid var(--danger-soft);
}

#authGate .gate-msg.ok {
  background: var(--success-soft);
  color: var(--success-ink);
  border: 1px solid var(--success-soft);
}

#authGate .gate-msg.info {
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--line);
}

/* Boot splash: cream canvas, sunny pulsing mark */
html body.booting {
  background: var(--bg);
}

html body.booting::after {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
}

/* =========================================================================
   Monday-structure pass (golden-standard screenshots, 2026-06-11)
   ========================================================================= */

/* Brand: a wordmark, not icon+text. The dot is the identity. */
.brand-logo { font-size: 24px; font-weight: 900; letter-spacing: -0.04em; color: var(--ink); line-height: 1; }
.brand-logo-dot { color: var(--accent); }

/* One compact toolbar row: action → filters → table tools */
.board-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; padding: 0 var(--card-pad-x); }
.board-toolbar .toolbar-search { width: 160px; flex: 0 1 160px; }
.board-toolbar .toolbar-spacer { flex: 1; }
.board-toolbar .group-toggle-btn { white-space: nowrap; }
.board-toolbar .toolbar-select, .board-toolbar .dd-toggle { max-width: 126px; }

/* Group titles read like Monday's: colored per status, count beside */
.group-header .group-title { font-size: 15px; font-weight: 800; }
.group-header.NotStarted .group-title { color: var(--st-notstarted-ink); }
.group-header.InProgress .group-title { color: var(--st-inprogress-ink); }
.group-header.Paused .group-title { color: var(--st-paused-ink); }
.group-header.Billable .group-title { color: var(--st-billable-ink); }
.group-header.Billed .group-title { color: var(--st-billed-ink); }
.group-header.Proposed .group-title { color: var(--st-proposed-ink); }
.group-header.Complete .group-title { color: var(--st-complete-ink); }
.group-header-cell { padding: 18px 14px 8px 12px; }

/* Subitems: completed rows strike the date too, like Monday */


/* =========================================================================
   Item card (item-card.js) — Monday's open-item modal: centered overlay,
   fields pane left, Billing/Comments tab rail right. Tokens only.
   ========================================================================= */

.item-card-overlay {
  --ic-width: 460px;
  position: fixed;
  inset: 0;
  z-index: 80; /* above the drawer (50); below pickers/popovers (600) + toast (1000) */
  background: transparent;
  transition: background var(--t-base) var(--ease);
  pointer-events: none;
}

.item-card-overlay.is-open { background: var(--scrim); pointer-events: auto; }

.item-card {
  position: absolute;
  top: 0;
  right: 0;
  height: 100vh;
  width: var(--ic-width);
  max-width: 96vw;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-overlay);
  transform: translateX(100%);
  transition: transform 0.28s var(--ease);
  pointer-events: auto;
}

.item-card.is-open { transform: translateX(0); }

/* Left-edge resize handle */
.ic-resizer {
  position: absolute;
  top: 0;
  right: var(--ic-width);
  width: 8px;
  height: 100vh;
  margin-right: -4px;
  cursor: col-resize;
  z-index: 81;
  pointer-events: auto;
}
.ic-resizer::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0;
  width: 2px;
  height: 100%;
  background: transparent;
  transition: background var(--t-fast) var(--ease);
}
.item-card-overlay.is-open .ic-resizer:hover::after,
.ic-resizer.is-dragging::after { background: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .item-card, .item-card-overlay { transition: none; }
}

/* --- Header: code + status pill + client, nav/close tools --- */

.ic-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line-subtle);
}

.ic-head-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}

.ic-title-btn {
  background: none;
  border: 0;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--text-h2);
  font-weight: 800;
  color: var(--ink);
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ic-title-btn:hover {
  background: var(--accent-soft);
}

.ic-title-input {
  font-size: 18px;
  font-weight: 700;
  max-width: 320px;
}

.ic-status-pill {
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
}

.ic-client-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
}

.ic-client-btn:hover {
  background: var(--surface-hover);
}

.ic-head-tools {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.ic-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  background: none;
  color: var(--muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.ic-nav:hover {
  background: var(--neutral-soft);
  color: var(--ink);
}

.ic-nav:disabled {
  opacity: 0.35;
  cursor: default;
  background: none;
}

/* --- Two-pane body --- */

/* Stacked sections that scroll as one column */
.ic-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.ic-section {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-subtle);
}
.ic-section:last-child { border-bottom: 0; }

.ic-money-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 6px;
}
.ic-money-field, .ic-notes-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ic-money-field .ic-field-label, .ic-notes-field .ic-field-label { padding-top: 0; }
.ic-notes-field { margin-top: 14px; }
.ic-notes {
  width: 100%;
  min-height: 92px;
  resize: vertical;
  font-size: var(--text-body);
}

/* Composer pinned at the bottom of the panel */
.ic-composer {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.ic-composer .input { flex: 1; }

/* --- Field rows: muted Title Case label + click-to-edit value --- */

.ic-field {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  align-items: start;
  padding: 5px 0;
}

.ic-field-label {
  color: var(--muted);
  font-size: var(--text-h4);
  font-weight: 600;
  padding-top: 7px;
}

.ic-field-control {
  min-width: 0;
}

.ic-field-value {
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-body);
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.ic-field-value:hover {
  background: var(--surface-hover);
  border-color: var(--line);
}

.ic-field-value:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.ic-field-value.is-editing {
  padding: 0;
  cursor: default;
  border-color: transparent;
  background: none;
}

.ic-empty {
  color: var(--faint);
}

.ic-readonly {
  display: inline-block;
  padding: 6px 8px;
  font-size: var(--text-body);
  color: var(--ink-2);
}

.ic-dates {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ic-dates-sep {
  color: var(--faint);
}

.ic-section-title {
  margin: 18px 0 8px;
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--ink);
}

/* Subitems block reuses .subitem-wrap/.subitem-table; trim the grid margins */
.ic-subitems .subitem-wrap {
  margin: 0;
}

/* --- Right rail: tabs + panels --- */

.ic-tabs {
  display: flex;
  gap: 6px;
}

.ic-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

.ic-tab:hover {
  background: var(--surface-hover);
  border-color: var(--line-strong);
}

.ic-tab.active {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent-ink);
}

.ic-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--neutral-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.ic-tab.active .ic-tab-count {
  background: var(--accent);
  color: var(--on-accent);
}

.ic-panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ic-panel .ic-field {
  grid-template-columns: 64px 1fr;
}

.ic-panel .ic-section-title {
  margin-top: 12px;
}

.ic-invoice-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.ic-invoice-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  font-size: var(--text-body);
}

.ic-invoice-row + .ic-invoice-row {
  border-top: 1px solid var(--line-subtle);
}

.ic-invoice-row span {
  color: var(--muted);
  font-size: var(--text-h4);
  white-space: nowrap;
}

.ic-comment-list {
  flex: 1;
  min-height: 80px;
  overflow-y: auto;
}

/* ----------------------------------------------------------------------------
   My Work — date-bucketed table + month calendar of my tasks (my-work.js)
   ---------------------------------------------------------------------------- */

.mywork-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px var(--card-pad-x) 16px;
}

/* Bucket tables already sit inside the padded body; no double inset. */
.mywork-body .mw-table-wrap { padding: 0; }

.mw-empty {
  padding: 32px 0;
}

.mw-buckets {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Bucket headers are group-header ROWS inside the one shared table, so the
   column index sits once above the first bucket (like the workspace). */
.mw-group-header td {
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  box-shadow: inset 3px 0 0 var(--line-strong);
  padding: 0 14px;
  height: 38px;
}
.mw-group-header:first-child td { border-top: 0; }
.mw-group-header.is-overdue td { box-shadow: inset 3px 0 0 var(--danger); }
.mw-group-header.is-today td { box-shadow: inset 3px 0 0 var(--accent); }
.mw-group-inner { display: flex; align-items: center; gap: 8px; }
.mw-group-header.is-overdue .mw-bucket-name { color: var(--danger); }
.mw-group-header.is-today .mw-bucket-name { color: var(--accent-ink); }

.mw-bucket-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}

.mw-bucket.is-overdue .mw-bucket-name { color: var(--danger); }
.mw-bucket.is-today .mw-bucket-name { color: var(--accent-ink); }

.mw-bucket-count {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

/* Same container language as the workspace subitem tables */
/* Visual table spec lives on .tbl; these add bucket personality + widths. */
.mw-table-wrap {
  overflow-x: auto;
}



/* Fixed-layout widths matching the workspace table scale; mw-fill absorbs. */
th.mw-task-cell { width: 280px; }
th.mw-project-cell { width: 140px; }
th.mw-board-cell { width: 140px; }
th.mw-date-cell { width: 150px; }
th.mw-status-cell { width: 124px; }
td.mw-status-cell { text-align: center; }
.mw-board-cell { color: var(--ink-2); white-space: nowrap; }
.mw-fill-cell { background: var(--surface-2); }
td.mw-fill-cell { background: var(--surface); }

.mw-open {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.mw-open:hover { color: var(--accent-ink); text-decoration: underline; }
.mw-open:disabled { color: var(--muted); cursor: default; text-decoration: none; }
.mw-project-cell .mw-open { color: var(--accent-ink); }

.mw-date {
  width: 100%;
  max-width: 150px;
  border: 1px solid transparent;
  background: transparent;
  padding: 4px 6px;
  font-size: 12.5px;
}

.mw-date:hover,
.mw-date:focus { border-color: var(--line-strong); background: var(--surface); }

.mw-status-pill { max-width: 150px; }

/* Calendar tab */

.mw-cal-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.mw-cal-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.mw-cal-today-btn { margin-left: auto; }

.mw-cal-empty { margin-bottom: 10px; }

.mw-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(90px, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  background: var(--surface);
}

.mw-cal-dow {
  padding: 6px 8px;
  font-size: 11.5px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.mw-cal-day {
  min-height: 90px;
  padding: 6px 8px;
  border-top: 1px solid var(--line-subtle);
  border-left: 1px solid var(--line-subtle);
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
}

.mw-cal-grid > .mw-cal-day:nth-of-type(7n + 1) { border-left: 0; }
.mw-cal-day.is-blank { background: var(--surface-2); }
.mw-cal-day.is-today { background: var(--accent-soft); }

.mw-cal-daynum {
  font-size: 11.5px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.mw-cal-day.is-today .mw-cal-daynum { color: var(--accent-ink); font-weight: 600; }

.mw-cal-day.is-overdue .mw-cal-daynum::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--danger);
}

.mw-cal-task {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11.5px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.mw-cal-task:hover { background: var(--surface-hover); border-color: var(--line-strong); }
.mw-cal-day.is-overdue .mw-cal-task { border-color: var(--danger); }

.mw-cal-more {
  font-size: 11px;
  color: var(--muted);
}

@media (max-width: 700px) {
  .mw-cal-grid { grid-template-columns: repeat(7, 90px); }
}

/* =========================================================================
   Polish pass: one control spec + Monday-grade subitems (2026-06-11)
   ========================================================================= */

/* --- Toolbar controls: ONE height (36px), ONE font (13px), ONE radius.
       Measured drift before this block: heights 28/34/39, fonts 12/13/14. --- */
.board-toolbar { gap: 8px; }
.board-toolbar > .btn,
.board-toolbar .group-toggle-btn,
.board-toolbar .toolbar-search,
.board-toolbar .toolbar-select,
.board-toolbar .dd .dd-toggle {
  box-sizing: border-box;
  height: 36px;
  padding: 0 16px;
  font-size: var(--text-body);
  line-height: normal;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.board-toolbar .toolbar-search,
.board-toolbar .toolbar-select,
.board-toolbar .dd .dd-toggle,
.board-toolbar .group-toggle-btn {
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
}
.board-toolbar .toolbar-search { line-height: normal; }
.board-toolbar .group-toggle-btn[aria-pressed="true"],
.board-toolbar .group-toggle-btn.active {
  background: var(--accent-soft);
  border-color: var(--accent-ring);
  color: var(--accent-ink);
}
.board-toolbar .dd { height: 36px; display: inline-flex; align-items: center; }

/* --- Subitems v2: the Monday reference, properly. Indented under the parent
       row (status-colored connector bar), lined mini-table with its own
       header, borderless inline name edit, the add-row inside the table. --- */
.task-cell { padding: 8px 24px 16px 52px; background: var(--surface-2); }
.subitem-wrap {
  margin: 0;
  border: 1px solid var(--line);
  border-left: 3px solid var(--group-accent, var(--accent));
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}
.subitem-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.subitem-table th {
  text-align: left;
  height: 34px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  padding: 0 14px;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.subitem-table th + th, .subitem-table td + td { border-left: 1px solid var(--line-subtle); }
/* Headers stay left-aligned (only cell CONTENT centers when it is a button/avatar) */
.subitem-table .sub-col-name { width: var(--sub-name-w, 200px); }
.subitem-table .sub-col-owner { width: 84px; }
.subitem-table .sub-col-status { width: 132px; }
.subitem-table .sub-col-date { width: 144px; }
.subitem-table .sub-col-del { width: 44px; }
/* sub-col-fill has no width: it absorbs the leftover so the name column does
   not balloon. */
.subitem-table .sub-fill { background: var(--surface-2); border-left: 1px solid var(--line-subtle); }
.subitem-table td, .subitem-table th { overflow: hidden; }

/* Name column resize handle (sticky width shared by every subitem table). */
.sub-name-head { position: relative; }
.sub-resizer {
  position: absolute;
  top: 0;
  right: -3px;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  z-index: 2;
}
.sub-resizer::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0;
  width: 1px;
  height: 100%;
  background: transparent;
  transition: background var(--t-fast) var(--ease);
}
.sub-resizer:hover::after, .sub-resizer.is-dragging::after { background: var(--accent); width: 2px; }
.subitem-table td { border-top: 1px solid var(--line-subtle); padding: 0 14px; height: var(--tbl-row-h); box-sizing: border-box; vertical-align: middle; }
.subitem-table tr:first-child td { border-top: 0; }
.subitem-table .sub-owner, .subitem-table .sub-status, .subitem-table .sub-date { text-align: center; }
.subitem-row:hover td { background: var(--surface-hover); }

/* Name edits inline, Monday-style: invisible input until you're in it */
.sub-name-input {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  padding: 6px 8px;
  font-size: 13px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The card hosts the same table in ~half the width; slim the meta columns */
/* In the narrow item drawer the subitem table sizes to content. */
.ic-subitems .subitem-table { table-layout: auto; }
.ic-subitems .subitem-table .sub-col-name { width: auto; }
.ic-subitems .subitem-table .sub-col-owner { width: 56px; }
.ic-subitems .subitem-table .sub-col-status { width: 110px; }
.ic-subitems .subitem-table .sub-col-date { width: 120px; }
.ic-subitems .subitem-table .sub-col-del { width: 34px; }
.ic-subitems .subitem-table .sub-col-fill { width: 0; }
.ic-subitems .sub-fill { display: none; }
.ic-subitems .sub-resizer { display: none; }
.sub-name-input:hover { border-color: var(--line); }
.sub-name-input:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Status pill: compact rounded chip, centered — never full-bleed in subitems */
.task-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 96px;
  height: 26px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* Date input: quiet until interaction, aligned with the pill height */
.sub-date-input {
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  padding: 3px 6px;
  font-size: 12.5px;
  color: var(--ink-2);
  font-family: inherit;
}
.sub-date-input:hover { border-color: var(--line); }
.sub-date-input:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Owner avatar button: clean circular target */
.task-owner { border: 0; background: none; padding: 4px; border-radius: var(--radius-pill); cursor: pointer; line-height: 0; }
.task-owner:hover { background: var(--surface-hover); }

/* Delete: appears on row hover only (calm by default) */
.subitem-table .task-del { opacity: 0; border: 0; background: none; color: var(--faint); cursor: pointer; border-radius: 6px; padding: 4px 8px; transition: opacity var(--t-fast) var(--ease); }
.subitem-row:hover .task-del { opacity: 1; }
.subitem-table .task-del:hover { color: var(--danger); background: var(--danger-soft); }

/* + Add subitem: the row IS an inline input (Monday). Enter creates and
   refocuses; blur with text creates; Esc clears. */
.subitem-add-row td { padding: 0; border-left: 0 !important; }
.subitem-add-row:hover td { background: var(--surface); }
.sub-add-input {
  display: block;
  width: 100%;
  height: var(--tbl-row-h);
  border: 0;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  padding: 0 14px;
  outline: none;
}
.sub-add-input::placeholder { color: var(--muted); font-weight: 600; }
.sub-add-input:hover { background: var(--surface-hover); }
.sub-add-input:focus { background: var(--surface); box-shadow: inset 0 0 0 2px var(--accent); }

/* Filter popover (Monday pattern): three dropdowns behind one button */
.filter-anchor { position: relative; display: inline-flex; }
.filter-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 120;
  width: 264px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.filter-panel[hidden] { display: none; }
.fp-row { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
.fp-row > span { font-weight: 600; }
.fp-row .input, .fp-row .dd { width: 100%; }
.fp-clear { align-self: flex-end; border: 0; background: none; color: var(--accent-ink); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.fp-clear:hover { background: var(--accent-soft); }
.filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 700;
}