/* ============================================================================
   ATIX Project Control — "Precision Contractor" modern theme
   ----------------------------------------------------------------------------
   Load order: AFTER /styles.css. This file restyles the existing class names
   only. Fully revertible by removing its <link>.

   RULES OF ENGAGEMENT (see design audit):
   - Never change display / position / overflow / z-index / grid-template /
     height / min-height / transform on the board-freeze or scroll machinery.
   - Sticky cell backgrounds stay FULLY OPAQUE (hex, never rgba).
   - Never touch inline --group-color or the group rail border-left.
   - Status pill colors come inline w/ !important from JS — shape/type only.
   - !important is required wherever styles.css already uses it; we win by
     source order at equal specificity.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Sora:wght@500;600;700;800&family=Poppins:wght@400;500;600;700&display=swap");

/* ============================================================================
   1. TOKENS
   ========================================================================== */

:root,
body {
  /* Canvas + surfaces */
  --canvas: #f7f8fa;
  --surface: #ffffff;
  --surface-2: #fafbfd;

  /* Brand navy rail */
  --sidebar-bg: #0d1b34;
  --sidebar-bg-2: #132347;
  --sidebar-text: #ccd6e8;
  --sidebar-text-strong: #f2f5fb;
  --sidebar-muted: #8d9cba;
  --sidebar-hover: #1a2b4d;
  --sidebar-active: #22355c;
  --sidebar-line: #24365a;

  /* Accent */
  --accent: #1f6fe5;
  --accent-hover: #1a5ec4;
  --accent-pressed: #174fa5;
  --accent-soft: #e8f0fd;
  --accent-soft-2: #f2f7fe;

  /* Text */
  --text: #1c2436;
  --text-secondary: #545e72; /* column headers, secondary emphasis */
  --muted: #667085;          /* 4.98:1 on white — body-level secondary text */
  --faint: #6a7690;          /* 4.56:1 on white (measured) — smallest text, placeholders */

  /* Lines + fills */
  --border: #e4e7ee;
  --border-strong: #d4d9e4;
  --grid-line: #edeff5;
  --hover: #f3f5f9;

  /* Semantics (harmonized with the inline pill palette) */
  --danger: #c62f47;   /* 5.39:1 as text on white; darker also helps white-on-danger fills */
  --danger-soft: #fdeef1;
  --success: #0f9d63;
  --success-soft: #e8f7f0;
  --warning: #c47f17;
  --warning-soft: #fdf3e3;

  /* Radii */
  --r-lg: 10px;
  --r-md: 8px;
  --r-pill: 999px;

  /* Shadows: small ambient + tighter key */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 24px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 2px 6px rgba(13, 27, 52, 0.08), 0 24px 64px rgba(13, 27, 52, 0.26);
  --focus-ring: 0 0 0 3px rgba(31, 111, 229, 0.16);

  /* Fonts */
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Sora", "Inter", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Vars styles.css references but never defines — free leverage */
  --primary: var(--accent);
  --card-bg: var(--surface);
  --border-color: var(--border);
  --text-color: var(--text);

  /* Legacy token remap (early styles.css rules consume these) */
  --atix-blue: var(--accent);
  --soft-blue: var(--accent-soft-2);
  --panel: var(--surface-2);
  --card: var(--surface);

  /* Typography knobs consumed by styles.css (:root there; body here wins) */
  --atix-board-title-font-size: 23px;
  --atix-group-title-font-size: 16px;

  /* Monday-era knobs remap */
  --monday-blue: var(--accent);
  --monday-blue-soft: var(--accent-soft);
  --monday-border: var(--border-strong);
  --monday-soft-border: var(--border);
  --monday-muted: var(--muted);
  --monday-text: var(--text);
  --monday-sidebar: var(--sidebar-bg);
  --monday-topbar: var(--surface);
  --monday-selected: var(--accent-soft);
}

/* ============================================================================
   2. BASE + TYPOGRAPHY
   ========================================================================== */

/* Beat styles.css:8873 `"Roboto" ... !important` (same specificity, later) */
body,
.app-shell,
.layout,
button,
input,
select,
textarea {
  font-family: var(--font-ui) !important;
}

body,
.app-shell {
  background: var(--canvas) !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased;
}

/* Headings: Sora is the brand voice (beats the Roboto h1–h4 override) */
h1, h2, h3,
.board-header h1,
.dashboard-head h2,
.emp-title,
.emp-modal-head h3,
.empd-name,
.empd-section-title,
.modern-auth h1 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--text);
  letter-spacing: -0.015em;
}

h4 { font-family: var(--font-ui) !important; font-weight: 600 !important; }

/* The board table has its own Roboto !important chain (styles.css 9376,
   10089, 10198…) that the body override cannot reach. Hit the table and
   every cell/label directly — the app's most-used surface must be Inter. */
.task-table,
.task-table th,
.task-table td,
#boardArea .task-table,
#boardArea .task-table th,
#boardArea .task-table td,
#boardArea .frozen-task-table,
#boardArea .frozen-task-table th,
#boardArea .frozen-task-table td,
.group-title-text,
.group-title-btn,
.group-item-count,
#boardArea .frozen-task-table .group-title-text,
.board-field-header .field-header-name,
.status-cell,
.status-cell span,
.item-title,
.add-item-inline-input {
  font-family: var(--font-ui) !important;
}

/* Re-assert monospace where the universal font override above would eat it */
.formula-builder-input,
.txn-connect-row input {
  font-family: var(--font-mono) !important;
}

/* Tabular figures on data: money, qty, numeric + formula cells */
.task-table td.field-type-number,
.task-table td.field-type-formula,
.task-table th[data-field-type="number"],
.task-table th[data-field-type="formula"],
.group-field-summary,
.board-summary-cell,
.emp-table tbody td,
.txn-amount,
.po-kpi-value,
.kpi-card b,
.mini-stats .stat b,
.txn-account-chip strong {
  font-variant-numeric: tabular-nums;
}

/* Decorative glow: retint to brand navy/accent, keep it whisper-quiet */
.bg-glow {
  background:
    radial-gradient(900px circle at 100% -15%, rgba(31, 111, 229, 0.07), transparent 52%),
    radial-gradient(760px circle at -15% 110%, rgba(13, 27, 52, 0.05), transparent 56%);
}

/* Slim, quiet scrollbars on the main scrollers (cosmetic only) */
.table-freeze-viewport::-webkit-scrollbar,
.emp-table-wrap::-webkit-scrollbar,
#homeView::-webkit-scrollbar,
.board-tree::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.table-freeze-viewport::-webkit-scrollbar-thumb,
.emp-table-wrap::-webkit-scrollbar-thumb,
#homeView::-webkit-scrollbar-thumb {
  background: #ccd2de;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.table-freeze-viewport::-webkit-scrollbar-track,
.emp-table-wrap::-webkit-scrollbar-track,
#homeView::-webkit-scrollbar-track {
  background: transparent;
}
.board-tree::-webkit-scrollbar-thumb {
  background: #2a3d63;
  border-radius: 999px;
}
.board-tree::-webkit-scrollbar-track { background: transparent; }

/* ============================================================================
   3. TOPBAR + GLOBAL SEARCH
   ========================================================================== */

.topbar {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}

.global-search {
  height: 38px;
  border-radius: var(--r-md);
  background: #f2f4f8;
  border: 1px solid transparent;
  color: var(--muted);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.global-search:focus-within {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.global-search i { font-size: 15px; color: var(--faint); }
.global-search input {
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
}
.global-search input::placeholder { color: var(--faint); }
.global-search kbd {
  min-width: 20px;
  height: 20px;
  border-radius: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--faint);
  font: 500 11px/1 var(--font-ui);
}

.topbar-actions .icon-btn {
  border-radius: var(--r-md) !important;
  color: #4a5468 !important;
  font-size: 17px !important;
  transition: background 0.15s ease, color 0.15s ease;
}
.topbar-actions .icon-btn:hover {
  background: var(--hover) !important;
  color: var(--text) !important;
}

#profileMenuBtn {
  width: 34px !important;
  height: 34px !important;
  background: var(--sidebar-bg) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
}
#profileMenuBtn:hover { background: var(--sidebar-bg-2) !important; }

.notify-badge { background: var(--danger); color: #fff; }

.topbar-divider { background: var(--border); }

.profile-menu {
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  background: var(--surface);
}
.profile-menu p { color: var(--muted); font-size: 13px; }
.profile-menu button { font-weight: 500; color: var(--text) !important; }
.profile-menu button:hover { background: var(--hover) !important; }
.profile-menu .danger-btn,
.profile-menu .danger-btn i { color: var(--danger) !important; }

/* ============================================================================
   4. SIDEBAR — the deep-navy brand rail
   ========================================================================== */

.app-body { background: var(--canvas) !important; }

.sidebar {
  background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-2) 100%) !important;
  border-right: 1px solid var(--sidebar-bg) !important;
  box-shadow: none !important;
  color: var(--sidebar-text) !important;
}

/* Section label */
.workspace-head h3,
.boards-head h3 {
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--sidebar-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

.sidebar .workspace-header-menu-btn,
.sidebar .sidebar-menu-btn {
  color: var(--sidebar-muted) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  min-height: 0 !important;
}
.sidebar .workspace-header-menu-btn:hover,
.sidebar .sidebar-menu-btn:hover {
  color: var(--sidebar-text-strong) !important;
  background: var(--sidebar-hover) !important;
}

/* Workspace selector row */
.workspace-picker-row { grid-template-columns: minmax(0, 1fr) 40px !important; gap: 8px !important; }
.workspace-picker-row .selector-btn {
  height: 40px !important;
  min-height: 40px !important;
  border-radius: var(--r-md) !important;
  border: 1px solid var(--sidebar-line) !important;
  background: var(--sidebar-hover) !important;
  color: var(--sidebar-text-strong) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 0 12px !important;
  box-shadow: none !important;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.workspace-picker-row .selector-btn:hover {
  background: var(--sidebar-active) !important;
  border-color: #2e4470 !important;
  filter: none;
}
.workspace-picker-row .sidebar-plus-btn {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  border-radius: var(--r-md) !important;
  border: 1px solid var(--sidebar-line) !important;
  background: transparent !important;
  color: var(--sidebar-text) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
}
.workspace-picker-row .sidebar-plus-btn:hover {
  background: var(--sidebar-hover) !important;
  color: #fff !important;
  filter: none;
}

/* Inline workspace menu (expands inside the rail) */
.sidebar .workspace-menu {
  background: var(--sidebar-hover);
  border: 1px solid var(--sidebar-line);
  border-radius: var(--r-lg);
}
.sidebar .workspace-item {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--sidebar-text) !important;
  border-radius: var(--r-md) !important;
  min-height: 0 !important;
}
.sidebar .workspace-item:hover { background: var(--sidebar-active) !important; color: #fff !important; }
.sidebar .workspace-item.active {
  background: var(--sidebar-active) !important;
  border-color: #2e4470 !important;
  color: #fff !important;
}
.sidebar .workspace-menu-label { color: var(--sidebar-muted); }
.sidebar .workspace-menu-search input {
  background: var(--sidebar-bg);
  border: 1px solid var(--sidebar-line);
  color: var(--sidebar-text-strong);
}

/* Nav items: boards, dashboards, special sections, Trash */
.board-item,
.nav-item {
  min-height: 36px !important;
  border-radius: var(--r-md) !important;
  color: var(--sidebar-text) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 7px 10px !important;
  border: 1px solid transparent !important;
  background: transparent;
  transition: background 0.13s ease, color 0.13s ease;
}
.board-item i,
.nav-item i { font-size: 15px; color: var(--sidebar-muted); transition: color 0.13s ease; }

.board-item:hover,
.nav-item:hover {
  background: var(--sidebar-hover) !important;
  color: var(--sidebar-text-strong) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.board-item:hover i,
.nav-item:hover i { color: var(--sidebar-text) ; }

.board-item.active,
.nav-item.active {
  background: var(--sidebar-active) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-color: transparent !important;
  box-shadow: inset 3px 0 0 #4d8dff !important;
}
.board-item.active i,
.nav-item.active i { color: #7fa9f4; }

/* Folder groups */
.folder-row {
  color: var(--sidebar-muted) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  border-radius: var(--r-md);
}
.folder-row:hover { background: var(--sidebar-hover) !important; color: var(--sidebar-text-strong) !important; }
.workspace-nav-item-menu { color: var(--sidebar-muted); }
.workspace-nav-item-menu:hover { color: #fff; }

.sidebar-divider,
hr.sidebar-divider {
  border-top: 1px solid var(--sidebar-line) !important;
  background: transparent;
}

/* Footer mini-stats */
.mini-stats .stat {
  background: var(--sidebar-hover);
  border: 1px solid var(--sidebar-line);
  border-radius: var(--r-md);
  box-shadow: none;
}
.mini-stats .stat b { color: var(--sidebar-text-strong); font-size: 16px; }
.mini-stats .stat span { color: var(--sidebar-muted); letter-spacing: 0.06em; }

.sidebar-resizer:hover,
.sidebar-resizer.resizing { background: var(--accent) !important; }

/* --- Specificity corrections vs styles.css's sidebar block ---------------
   styles.css paints `.sidebar button`, `.workspace-block`,
   `.workspace-picker-row`, and `.mini-stats .stat b/span` with !important at
   higher specificity than the simple class rules above. Re-assert the navy
   palette at equal-or-higher specificity. */

.sidebar button { color: var(--sidebar-text) !important; }

/* Sticky workspace block: solid navy (opaque — it pins over scrolled nav) */
.sidebar .workspace-block {
  background: var(--sidebar-bg) !important;
  border: none !important;
  box-shadow: none !important;
}
.sidebar .workspace-picker-row {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}
.workspace-block .workspace-head h3,
.boards-head h3 {
  color: var(--sidebar-muted) !important;
  letter-spacing: 0.1em !important;
}

.sidebar .ghost,
.sidebar .sidebar-menu-btn { background: transparent !important; }
.sidebar .ghost:hover,
.sidebar .workspace-header-menu-btn:hover,
.sidebar .sidebar-menu-btn:hover {
  background: var(--sidebar-hover) !important;
  color: var(--sidebar-text-strong) !important;
}

.sidebar .board-item,
.sidebar .nav-item { border-radius: var(--r-md) !important; }
.sidebar .board-item:hover,
.sidebar .nav-item:hover {
  background: var(--sidebar-hover) !important;
  color: var(--sidebar-text-strong) !important;
}
.sidebar .board-item.active,
.sidebar .nav-item.active {
  background: var(--sidebar-active) !important;
  color: #ffffff !important;
}

.workspace-nav-item .workspace-nav-item-menu { color: var(--sidebar-muted); }
.workspace-nav-item-menu:hover { background: rgba(255, 255, 255, 0.12); }

.sidebar-footer .mini-stats .stat {
  background: var(--sidebar-hover) !important;
  border: 1px solid var(--sidebar-line) !important;
}
.mini-stats .stat b { color: var(--sidebar-text-strong) !important; }
.mini-stats .stat span { color: var(--sidebar-muted) !important; }

/* Dropdown popovers spawned from the rail stay light (they float above) */
.sidebar-dropdown {
  background: var(--surface);
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}
.sidebar-dropdown button { color: var(--text) !important; font-weight: 500; }
.sidebar-dropdown button i { color: var(--muted); }
.sidebar-dropdown button:hover { background: var(--hover) !important; }
.sidebar-dropdown .danger-btn,
.sidebar-dropdown .danger-btn i { color: var(--danger) !important; }

/* ============================================================================
   5. CONTENT SHELL + BOARD HEADER + TABS + TOOLBAR
   ========================================================================== */

.content { background: var(--canvas) !important; }

.board-view,
.home-view { background: transparent !important; }

.board-header h1 {
  font-size: 23px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  letter-spacing: -0.015em;
}
.board-header h1::after {
  color: var(--faint);
  font-size: 17px;
  margin-left: 9px;
}
.board-header p { color: var(--muted); font-size: 13px; }

/* View tabs: quiet labels, crisp accent underline */
.view-tabs {
  height: 42px !important;
  gap: 4px !important;
  border-bottom: 1px solid var(--border) !important;
  margin: 0 0 14px !important;
}
.view-tab {
  height: 42px !important;
  padding: 0 12px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  border-radius: 6px 6px 0 0 !important;
  transition: color 0.13s ease, background 0.13s ease;
}
.view-tab:hover { color: var(--text) !important; background: var(--hover) !important; filter: none; }
.view-tab.active {
  color: var(--accent) !important;
  font-weight: 600 !important;
  border-bottom: 2px solid var(--accent) !important;
  background: transparent !important;
}

/* Header action cluster */
.board-action-link {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  border-radius: var(--r-md) !important;
}
.board-action-link:hover { color: var(--text) !important; filter: none; }
.board-action-link i,
.board-link-btn i { color: var(--faint) !important; font-size: 16px !important; }

#shareBoardBtn {
  height: 32px !important;
  padding: 0 14px !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-md) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
#shareBoardBtn:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: var(--accent-soft-2) !important;
  box-shadow: none;
  filter: none;
}

.board-link-btn,
#boardMoreBtn {
  border-radius: var(--r-md) !important;
  color: var(--muted) !important;
  font-size: 16px !important;
}
.board-link-btn:hover,
#boardMoreBtn:hover { background: var(--hover) !important; color: var(--text) !important; filter: none; }

.board-avatar { background: var(--sidebar-bg); font-size: 14px; }

/* Board toolbar — styles.css pins #newItemBtn at 46px/5px-radius/19px with
   a #0073ea fill via id-level !important rules; match and repaint them all */
#newItemBtn {
  height: 34px !important;
  min-height: 34px !important;
  min-width: auto !important; /* natural width; never squeezed below content */
  flex-shrink: 0;
  padding: 0 14px !important;
  background: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  border-radius: var(--r-md) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #fff !important;
  box-shadow: var(--shadow-sm) !important;
  transition: background 0.15s ease;
}
#newItemBtn:hover { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; filter: none; }
#newItemBtn:active { background: var(--accent-pressed) !important; }
#newItemBtn::after {
  width: 28px;
  height: 34px;
  margin: 0 -14px 0 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 13px;
}

.board-toolbar .toolbar-text-btn {
  padding: 5px 8px !important;
  border-radius: var(--r-md) !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  transition: background 0.13s ease, color 0.13s ease;
}
.board-toolbar .toolbar-text-btn i { font-size: 15px; color: var(--faint); }
.board-toolbar .toolbar-text-btn:hover {
  background: var(--hover) !important;
  color: var(--text) !important;
}
.toolbar-text-btn.active,
.toolbar-text-btn.active i { color: var(--accent) !important; }
.toolbar-filter-arrow { color: var(--faint) !important; padding: 4px 6px !important; }

.filter-badge {
  background: var(--accent);
  color: #fff;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
}

/* Toolbar dropdowns + filter panel */
.toolbar-dropdown {
  background: var(--surface);
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}
.toolbar-dropdown button { font-weight: 500; }
.toolbar-pop-input {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font-size: 13.5px;
}
.toolbar-pop-input:focus { border-color: var(--accent); box-shadow: var(--focus-ring); outline: none; }

.monday-filter-title { font-family: var(--font-display) !important; font-weight: 600; color: var(--text); }
.monday-filter-subtitle { color: var(--muted); }
.monday-filter-search { border-color: var(--border-strong); border-radius: var(--r-md); }

/* Bulk action bar */
.bulk-bar {
  border: 1px solid var(--sidebar-bg) !important;
  border-radius: 12px !important;
  background: var(--sidebar-bg) !important;
  box-shadow: var(--shadow-lg) !important;
}
.bulk-bar #bulkCount { color: #fff !important; font-weight: 600 !important; }
.bulk-bar .ghost {
  background: transparent !important;
  border: 1px solid var(--sidebar-line) !important;
  color: var(--sidebar-text) !important;
}
.bulk-bar .ghost:hover { background: var(--sidebar-hover) !important; color: #fff !important; filter: none; }
.bulk-bar .danger-btn { background: var(--danger) !important; color: #fff !important; }

/* ============================================================================
   6. BOARD TABLE — density preserved, chrome refined
   (freeze machinery untouched: colors, borders, type only)
   ========================================================================== */

/* Board card: restore a quiet frame where the flatten pass removed it */
#boardArea.table-wrap {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
}

/* Column header row */
.task-table .group-header-row th {
  background: #fafbfd !important; /* opaque — sticky layer */
  border-bottom-color: var(--grid-line) !important;
}
.task-table th.sticky-item-col { background: #fafbfd !important; }
.board-field-header .field-header-name,
#boardArea .task-table .field-header-name,
#boardArea .frozen-task-table .field-header-name {
  color: var(--text-secondary) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
}
.board-field-header .field-header-name:hover,
#boardArea .task-table .field-header-name:hover { color: var(--text) !important; }

/* Cell text: retire the legacy #323338 gray (one text color governs) */
#boardArea .task-table td,
#boardArea .frozen-task-table td { color: var(--text) !important; }
.field-header-drag-handle,
.field-header-menu-btn { color: var(--faint) !important; }
.field-header-menu-btn:hover { color: var(--text) !important; background: var(--hover) !important; }
.field-header-menu {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}

/* Gridlines: subtler. NOTE: bottom/right only — border-left carries the
   inline group rail and must never be overridden. */
#boardArea .task-table td {
  border-bottom-color: var(--grid-line) !important;
  border-right-color: var(--grid-line) !important;
}
#boardArea .task-table .group-header-row th {
  border-bottom-color: #e7eaf1 !important;
  border-right-color: var(--grid-line) !important;
}

/* Item column (frozen) */
.task-table .sticky-item-col { background: #ffffff; } /* keep opaque */
.item-title { color: var(--text); font-weight: 500; }
.subitem-toggle-btn { color: var(--faint) !important; padding: 2px 4px !important; }
.subitem-toggle-btn:hover { color: var(--accent) !important; }

/* Row hover: whole row, opaque on sticky cells */
#boardArea .task-table tbody tr.task-row:hover td { background-color: #f5f7fb !important; }
#boardArea .task-table tbody tr.task-row:hover td.sticky-item-col { background-color: #f5f7fb !important; }

/* Selection checkboxes */
.task-table input[type="checkbox"],
.emp-table input[type="checkbox"],
.col-select input[type="checkbox"] {
  accent-color: var(--accent);
}

/* Group title rows */
#boardArea .task-table .group-title-row td { background: #ffffff !important; } /* opaque sticky */
#boardArea .frozen-task-table .group-title-text {
  font-family: var(--font-ui) !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}
.group-title-btn {
  font-size: 15.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}
.group-item-count,
.group-collapsed-count {
  font-family: var(--font-ui) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--faint) !important;
  background: transparent !important;
}
.group-drag-handle { color: var(--faint); }

/* Status cells: color is inline !important from JS — shape + type only */
.status-cell {
  border-radius: 4px !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.01em;
}
.status-cell span { color: #fff !important; }

/* File cells */
.file-icon-btn i { color: var(--accent) !important; }
.file-more-count { color: var(--muted); font-size: 12px; }

/* Add-item inline row */
.add-item-inline-input {
  color: var(--muted);
  font-size: 13px;
  border-radius: 6px;
}
.add-item-inline-input::placeholder { color: var(--faint); }
.add-item-inline-input:focus { box-shadow: var(--focus-ring); outline: none; }
.add-column-cell .ghost { color: var(--faint) !important; }
.add-column-cell .ghost:hover { color: var(--accent) !important; background: var(--hover) !important; filter: none; }

/* Summary rows */
.group-field-summary,
.board-summary-cell {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.board-summary-label { color: var(--text); font-weight: 600; font-size: 12.5px; }

.task-table td.search-match-cell { box-shadow: inset 0 0 0 2px rgba(31, 111, 229, 0.4); }

.subitem-arrow-tip { background: var(--sidebar-bg); border-radius: 6px; }

/* ============================================================================
   7. BUTTONS (global systems)
   ========================================================================== */

/* styles.css fights itself with two blanket !important passes:
     button, .toolbar button, … { background:#fff !important; border:1px solid
       #d8e0ee !important; border-radius:8px !important; font-weight:600 !important }
     button, .btn { border-radius:4px !important; font-weight:400 !important }
   We win by matched-specificity !important later in the cascade.

   System: default <button> = quiet secondary (white, hairline border);
   primary is OPT-IN and always accent-filled; ghost/danger/icon/quiet
   variants re-asserted after the blanket. One radius (8px), one weight
   scale, one minimum height. */

/* Normalize every button */
button,
.btn {
  border-radius: var(--r-md) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
button {
  min-height: 34px;
  padding: 6px 14px;
  font-size: 13.5px;
  white-space: nowrap;
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
  letter-spacing: 0.005em;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.btn {
  min-height: 34px;
  padding: 6px 14px !important;
  font-size: 13.5px !important;
  white-space: nowrap;
}
button:hover {
  background: var(--hover) !important;
  border-color: var(--border-strong) !important;
  filter: none !important;
}
button:focus-visible { outline: none !important; box-shadow: var(--focus-ring) !important; }
button:disabled { opacity: 0.55 !important; cursor: not-allowed; }

/* Ghost (explicit secondary) */
button.ghost,
.btn.ghost {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
  font-weight: 500 !important;
  margin-top: 0 !important; /* legacy `.ghost { margin-top:10px }` skews flex rows */
}
button.ghost:hover,
.btn.ghost:hover { background: var(--hover) !important; border-color: var(--border-strong) !important; }

/* PRIMARY — opt-in, must win everywhere (incl. legacy modal affirmatives) */
#newItemBtn,
#authSubmit,
#bulkApplyBtn,
button[type="submit"],
.btn.primary,
a.btn.btn-primary, .global-error-actions .btn-primary, #poLinkSaveBtn, #prCreateBtn, .pr-template-box .btn-primary,
.modal-actions button:not(.ghost):not(.danger-btn):not(.icon-btn) {
  background: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  color: #ffffff !important;
  border-radius: var(--r-md) !important;
  font-weight: 600 !important;
}
#newItemBtn:hover,
#authSubmit:hover,
#bulkApplyBtn:hover,
button[type="submit"]:hover,
.btn.primary:hover,
a.btn.btn-primary:hover, .global-error-actions .btn-primary:hover, #poLinkSaveBtn:hover, #prCreateBtn:hover, .pr-template-box .btn-primary:hover,
.modal-actions button:not(.ghost):not(.danger-btn):not(.icon-btn):hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}
#newItemBtn:active,
#authSubmit:active,
.btn.primary:active { background: var(--accent-pressed) !important; }

/* Danger */
.danger-btn,
.btn-danger {
  background: var(--danger) !important;
  border: 1px solid var(--danger) !important;
  color: #ffffff !important;
}
.danger-btn:hover,
.btn-danger:hover { background: #c22c45 !important; border-color: #c22c45 !important; }

/* Icon buttons */
.icon-btn {
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0 !important;
  border-radius: var(--r-md) !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: #4a5468 !important;
  font-weight: 600 !important;
}
.icon-btn:hover { background: var(--hover) !important; color: var(--text) !important; }

/* Quiet inline controls: opt OUT of the normalized chrome (density!) */
.txn-delete-btn {
  background: transparent !important;
  border: none !important;
  color: var(--danger) !important;
  min-height: 0 !important;
  padding: 4px 6px !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
}
.txn-delete-btn:hover { background: var(--danger-soft) !important; filter: none; }

.toast-close,
.emp-modal-close,
.subitem-toggle-btn,
.field-header-menu-btn,
.field-header-name,
.group-title-btn,
.toolbar-filter-arrow,
.pw-merge-chip button {
  background: transparent !important;
  border: none !important;
  min-height: 0 !important;
  box-shadow: none !important;
}

/* Toolbar text buttons (unscoped — the .board-toolbar copy is handled above) */
.toolbar-text-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent !important;
  border: none !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  min-height: 32px;
  padding: 5px 8px !important;
  border-radius: var(--r-md) !important;
}
.toolbar-text-btn:hover { background: var(--hover) !important; color: var(--text) !important; }
.toolbar-text-btn i { font-size: 15px; color: var(--faint); }

/* Menu items inside popovers are quiet rows, never chrome buttons */
.profile-menu button,
.sidebar-dropdown button,
.toolbar-dropdown button,
.field-header-menu button,
.meatballs-dropdown button,
.workspace-menu button,
#boardMoreMenu button {
  background: transparent !important;
  border: none !important;
  min-height: 0 !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
}
.profile-menu button:hover,
.sidebar-dropdown button:hover,
.toolbar-dropdown button:hover,
.field-header-menu button:hover,
.meatballs-dropdown button:hover,
#boardMoreMenu button:hover { background: var(--hover) !important; }
.sidebar .workspace-menu button:hover { background: var(--sidebar-active) !important; }

/* In-table micro buttons stay invisible chrome */
.file-icon-btn,
.add-column-cell .ghost,
.add-column-cell button {
  background: transparent !important;
  border: none !important;
  min-height: 0 !important;
  box-shadow: none !important;
  padding: 2px 6px !important;
}

/* ============================================================================
   8. INPUTS + FORMS
   ========================================================================== */

input,
select,
textarea {
  border-radius: var(--r-md);
  color: var(--text);
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  outline: none;
}

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

.txn-filter-grid label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.txn-filter-grid select,
.txn-filter-grid input {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
}

.ts-toolbar label { color: var(--muted); font-weight: 600; }
.ts-toolbar input,
.ts-toolbar select,
.txn-toolbar input,
.txn-toolbar select {
  border-color: var(--border-strong);
  border-radius: var(--r-md);
}

.emp-search input {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
}
.emp-search input:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
.emp-search i { color: var(--faint); }

.emp-toggle { color: var(--text); }
.emp-toggle input { accent-color: var(--accent); }

.ts-error {
  border: 1px solid #f3c1ca;
  background: var(--danger-soft);
  color: #b02a41;
  border-radius: var(--r-md);
}

/* ============================================================================
   9. MODALS — legacy .modal, emp-modal, wizard modals
   ========================================================================== */

.modal-card,
.emp-modal-card {
  background: var(--surface);
  border-radius: var(--r-lg); /* 10px — same radius scale as every card */
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(13, 27, 52, 0.06);
}
.emp-modal-overlay { background: rgba(13, 27, 52, 0.45); }

.modal-head,
.emp-modal-head { border-bottom: 1px solid var(--border); }
.modal-head h2,
.emp-modal-head h3 {
  font-family: var(--font-display) !important;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.emp-modal-close {
  color: var(--muted) !important;
  padding: 6px !important;
  background: transparent;
  border-radius: var(--r-md);
}
.emp-modal-close:hover { background: var(--hover); color: var(--text); filter: none; }
.emp-modal-foot {
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.emp-muted { color: var(--muted); }
.emp-map-list li { color: var(--text); }

/* Wizard drop zones */
.pw-drop-zone {
  border: 1.5px dashed #c4cddd;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  color: var(--muted);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.pw-drop-zone i { color: var(--success); }
.pw-drop-zone:hover,
.pw-drop-zone.pw-drop-active {
  border-color: var(--accent);
  background: var(--accent-soft-2);
  color: var(--accent);
}

/* File chips */
.pw-merge-chip {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--r-pill);
  color: var(--text);
  font-weight: 500;
}
.pw-merge-chip button { color: var(--faint) !important; background: transparent !important; padding: 2px 5px !important; }
.pw-merge-chip button:hover { background: var(--danger-soft); color: var(--danger); filter: none; }

/* Source banners */
.pw-source-banner {
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-weight: 500;
}
.pw-source-banner.pw-source-merge {
  color: #0c7a4b;
  background: var(--success-soft);
  border-color: #bfe7d4;
}
.pw-inventory-banner {
  background: var(--success-soft);
  border: 1px solid #bfe7d4;
  color: #0c7a4b;
  border-radius: var(--r-md);
}

/* Proposal wizard AI box: keep the purple identity, calmer chrome */
.pr-ai-box {
  border: 1px solid #ddcbf1;
  background: #f9f5fe;
  border-radius: var(--r-lg);
}
.pr-ai-box h4 { font-weight: 600; color: #5b3d8a; }
.pr-template-box {
  background: var(--accent-soft-2);
  border: 1px solid #c8dcf8;
  border-radius: var(--r-lg);
}
.pr-section-block { border: 1px solid var(--border); border-radius: var(--r-lg); }
.pr-cheatsheet code { background: var(--hover); border-radius: 4px; color: var(--text); }

/* ============================================================================
   10. TOASTS
   ========================================================================== */

/* styles.css ships two toast skins; the later one is filled solid color.
   Reset every variant back to a calm white card + colored key line. */
.toast,
.toast.success,
.toast.error,
.toast.info,
.toast.warning {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  background: var(--surface);
  background-color: var(--surface);
  color: var(--text);
}
/* .toast.error also matches the bare `.error` rule (text-align:center,
   red text, min-height) — neutralize that collision */
.toast.error {
  border-left: 3px solid var(--danger);
  text-align: left;
  min-height: 0;
}
.toast.success { border-left: 3px solid var(--success); }
.toast.info    { border-left: 3px solid var(--accent); }
.toast.warning { border-left: 3px solid #e8a13c; }
.toast-message { color: var(--text); font-weight: 500; }
.toast .toast-close { color: var(--faint) !important; padding: 0 !important; font-weight: 400 !important; }
.toast .toast-close:hover { color: var(--text); }

/* ============================================================================
   11. PILLS + BADGES
   ========================================================================== */

.emp-pill {
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  border-radius: var(--r-pill);
  padding: 4px 11px;
}
.emp-pill-active     { background: var(--success-soft); color: #0c7a4b; }
.emp-pill-warn       { background: var(--danger-soft); color: #b02a41; }
.emp-pill-terminated { background: #eef0f5; color: #5f6b85; /* 4.69:1 on this bg */ }

.board-type-badge { border-radius: 6px; font-weight: 600; letter-spacing: 0.03em; }

.role-chip { border-radius: var(--r-pill); font-weight: 600; }

/* ============================================================================
   12. DASHBOARD — KPI cards, home cards, project overview
   ========================================================================== */

.home-view {
  background: transparent !important;
  border: none !important;
  color: var(--text);
}

.dashboard-head h2 { color: var(--text); }
.dashboard-head p { color: var(--muted); }

.kpi-card,
.home-view .home-card,
.dashboard-controls {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}
.kpi-card { padding: 14px 16px; transition: box-shadow 0.15s ease, border-color 0.15s ease; }
.kpi-card:hover { box-shadow: var(--shadow-md) !important; }
.kpi-card span {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 600;
}
/* ONE big-number treatment for both KPI card families (styles.css pins the
   legacy #323338/500 with !important — match it) */
.kpi-card b,
.po-kpi-value {
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  letter-spacing: -0.015em;
}
.kpi-card small { color: var(--muted); }

/* Cards size to content (no hollow bottoms), titles sit below section h2s */
.card-grid { align-items: start; }
.home-card { transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease; }
.home-card:hover {
  box-shadow: var(--shadow-md) !important;
  border-color: #d8ddea !important;
}
.home-card h4,
.monday-board-card h4,
.monday-workspace-card h4 {
  color: var(--text);
  font-weight: 600 !important;
  font-size: 16px !important; /* below the 19px section headings */
}
.home-card p { color: var(--muted); }
.board-meta-row span {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: var(--r-pill);
  font-weight: 500;
}

.dashboard-view-label { color: var(--muted); letter-spacing: 0.08em; font-weight: 600; }

/* Project overview KPIs */
.po-kpi,
.po-chart-card,
.po-link-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.po-kpi-label { color: var(--muted); font-weight: 600; letter-spacing: 0.06em; }
.po-kpi-sub { color: var(--muted); }
/* Color only where it is genuinely semantic: the accent metric keeps blue;
   plain-money values sit in --text (the sub-label carries the meaning) */
.po-kpi.po-good  .po-kpi-value,
.po-kpi.po-bad   .po-kpi-value,
.po-kpi.po-warn  .po-kpi-value { color: var(--text) !important; }
.po-kpi.po-accent { border-color: var(--border); background: var(--surface); }
.po-kpi.po-accent .po-kpi-value { color: var(--accent) !important; }

/* ============================================================================
   13. EMP / TXN / TS SECTIONS — page shell + table
   ========================================================================== */

.emp-title { font-size: 24px !important; color: var(--text) !important; letter-spacing: -0.015em; }
.emp-count { color: var(--muted); }

.emp-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.emp-table thead th {
  background: #f8f9fc; /* opaque — sticky header */
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.07em;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.emp-table tbody td {
  border-bottom: 1px solid var(--grid-line);
  color: var(--text);
  font-size: 13px;
}
.emp-table tbody tr:hover { background: var(--hover); }
.emp-table tbody tr.txn-row-selected td { background: rgba(31, 111, 229, 0.07); }
.emp-table tbody td.txn-amount.txn-pos { color: var(--success); font-weight: 600; }
.emp-table tbody td.txn-amount.txn-transfer { color: var(--muted); }
.emp-empty { color: var(--faint); }

#transactionsView .txn-table thead th { background: #f8f9fc; } /* opaque sticky */

/* Accounts bar */
.txn-account-chip {
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.txn-account-chip:hover { border-color: var(--border-strong) !important; background: var(--surface) !important; }
.txn-account-chip span { color: var(--muted); font-weight: 600; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; }
.txn-account-chip strong { color: var(--text); }
.txn-account-chip.active {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent) inset !important;
  background: var(--accent-soft-2) !important;
}

.ts-metrics .ts-metric,
.po-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

/* ============================================================================
   14. LOGIN — the branded navy moment
   ========================================================================== */

#authView.layout {
  background:
    radial-gradient(1100px circle at 85% -10%, rgba(77, 141, 255, 0.16), transparent 55%),
    radial-gradient(900px circle at -10% 110%, rgba(31, 111, 229, 0.12), transparent 50%),
    linear-gradient(165deg, #0d1b34 0%, #132347 58%, #16294e 100%) !important;
}

.auth-card {
  background: var(--surface);
  border: none;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(5, 12, 28, 0.25), 0 32px 80px rgba(5, 12, 28, 0.45);
  padding: 38px 40px 26px; /* balanced against the ~60px above the lockup */
}
.modern-auth .error:empty { min-height: 0; margin: 0; }

.modern-auth h1 {
  font-size: clamp(30px, 4vw, 40px) !important;
  color: var(--text);
}
.modern-auth p { color: var(--muted); font-size: 15px; }

.field label { font-size: 13px; font-weight: 600; color: var(--text); }

.input-wrap {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input-wrap:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
.input-wrap input { font-size: 15px; }
.input-wrap input:focus { box-shadow: none; } /* ring lives on the wrap */

#authSubmit {
  height: 46px;
  border-radius: var(--r-lg);
  font-size: 15px;
  font-weight: 600;
  background: var(--accent);
  letter-spacing: 0.01em;
}
#authSubmit:hover { background: var(--accent-hover); filter: none; }

.aux-link { color: var(--accent); font-weight: 600; }
.error { color: #b3223c; }
.invite-notice {
  border: 1px solid #c8dcf8;
  background: var(--accent-soft-2);
  color: #17376b;
  border-radius: var(--r-lg);
}
.back-home { color: #cdd8ea; }

/* ============================================================================
   15. MISC + RESPONSIVE POLISH
   ========================================================================== */

.column-visibility-panel {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}

.meatballs-dropdown {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}

/* Small screens / iPad portrait: keep the chrome quiet, never touch layout */
@media (max-width: 1024px) {
  .board-header h1 { font-size: 20px !important; }
  .kpi-card b { font-size: 22px; }
  .auth-card { padding: 28px 24px; }
}

/* Deploy-update banner (above modals and toasts) */
.update-banner {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 100002;
  background: var(--sidebar-bg, #0d1b34); color: #fff;
  padding: 9px 10px 9px 16px; border-radius: 999px;
  font-size: 13.5px; font-weight: 500;
  box-shadow: 0 10px 28px rgba(13, 27, 52, 0.35);
  display: flex; gap: 12px; align-items: center;
}
.update-banner button {
  background: var(--accent, #1f6fe5) !important; color: #fff !important;
  border: none !important; border-radius: 999px !important;
  padding: 5px 14px !important; font-weight: 600 !important;
  min-height: 0 !important; cursor: pointer;
}

/* Errors modal (admin) */
.err-modal { max-width: 980px; }
.err-table-wrap { max-height: 420px; overflow-y: auto; }
.err-when, .err-build, .err-count { white-space: nowrap; color: var(--muted); font-size: 12.5px; }
.err-count { font-weight: 700; color: var(--danger); }
.err-msg { max-width: 380px; }
.err-src { color: var(--muted); font-size: 12.5px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Theme variant: Field Ops =============================================
   A durable operations theme for project control: graphite navigation,
   blueprint-blue actions, concrete canvas, and amber accents for field signals.
   Activated by html[data-theme="fieldops"] from the Theme picker. */
html[data-theme="fieldops"],
html[data-theme="fieldops"] body {
  --canvas: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #f8fafc;

  --sidebar-bg: #17202b;
  --sidebar-bg-2: #1f2a37;
  --sidebar-text: #d7dee8;
  --sidebar-text-strong: #ffffff;
  --sidebar-muted: #9aa7b7;
  --sidebar-hover: #253244;
  --sidebar-active: #304156;
  --sidebar-line: #334155;

  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-pressed: #1e40af;
  --accent-soft: #dbeafe;
  --accent-soft-2: #eff6ff;

  --text: #1f2937;
  --text-secondary: #475569;
  --muted: #64748b;
  --faint: #64748b;

  --border: #d7dee8;
  --border-strong: #cbd5e1;
  --grid-line: #e5eaf0;
  --hover: #eef3f8;

  --danger: #dc2626;
  --danger-soft: #fee2e2;
  --success: #10b981;
  --success-soft: #d1fae5;
  --warning: #f59e0b;
  --warning-soft: #fff7ed;

  --r-lg: 8px;
  --r-md: 6px;

  --shadow-sm: 0 1px 2px rgba(23, 32, 43, 0.07);
  --shadow-md: 0 1px 2px rgba(23, 32, 43, 0.06), 0 10px 28px rgba(23, 32, 43, 0.09);
  --shadow-lg: 0 8px 24px rgba(23, 32, 43, 0.16);
  --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

html[data-theme="fieldops"] h1,
html[data-theme="fieldops"] h2,
html[data-theme="fieldops"] h3,
html[data-theme="fieldops"] .board-header h1,
html[data-theme="fieldops"] .dashboard-head h2,
html[data-theme="fieldops"] .emp-title,
html[data-theme="fieldops"] .emp-modal-head h3,
html[data-theme="fieldops"] .empd-name,
html[data-theme="fieldops"] .empd-section-title,
html[data-theme="fieldops"] .modern-auth h1 {
  letter-spacing: 0 !important;
}

html[data-theme="fieldops"] .bg-glow {
  background:
    radial-gradient(900px circle at 100% -15%, rgba(37, 99, 235, 0.05), transparent 52%),
    radial-gradient(760px circle at -15% 110%, rgba(245, 158, 11, 0.06), transparent 56%);
}

html[data-theme="fieldops"] .sidebar {
  background: linear-gradient(180deg, #17202b 0%, #1f2a37 100%) !important;
}

html[data-theme="fieldops"] .board-item.active,
html[data-theme="fieldops"] .nav-item.active {
  box-shadow: inset 3px 0 0 #f59e0b !important;
}

html[data-theme="fieldops"] .workspace-picker-row .sidebar-plus-btn,
html[data-theme="fieldops"] .primary-btn,
html[data-theme="fieldops"] .btn-primary,
html[data-theme="fieldops"] .new-item-btn {
  border-radius: 6px !important;
}

html[data-theme="fieldops"] .topbar,
html[data-theme="fieldops"] .board-toolbar,
html[data-theme="fieldops"] .board-view-tabs,
html[data-theme="fieldops"] .emp-modal-card,
html[data-theme="fieldops"] .profile-menu {
  box-shadow: none !important;
}

html[data-theme="fieldops"] .task-table th,
html[data-theme="fieldops"] #boardArea .task-table th,
html[data-theme="fieldops"] #boardArea .frozen-task-table th {
  background: #f8fafc !important;
  color: #475569 !important;
}

html[data-theme="fieldops"] .view-tab.active,
html[data-theme="fieldops"] .calendar-view-toggle button.active {
  color: #2563eb !important;
  border-color: #2563eb !important;
}

html[data-theme="fieldops"] #authView.layout {
  background: linear-gradient(165deg, #111827 0%, #17202b 52%, #2563eb 100%) !important;
}


/* ===== Theme variant: Indigo =================================================
   A Velzon-inspired look, implemented as original token overrides on our own
   selectors: indigo rail and primary, cool #f3f3f9 canvas, Poppins type,
   flat 4px radii, feather-light card shadows. Activated by
   html[data-theme="velzon"] (see the Theme picker in the profile menu). */
html[data-theme="velzon"],
html[data-theme="velzon"] body {
  --canvas: #f3f3f9;
  --surface: #ffffff;
  --surface-2: #f9f9fc;

  --sidebar-bg: #405189;
  --sidebar-bg-2: #405189;          /* flat rail — same value kills the gradient */
  --sidebar-text: #abb9e8;
  --sidebar-text-strong: #ffffff;
  --sidebar-muted: #92a0cf;
  --sidebar-hover: #4a5c96;
  --sidebar-active: #52639e;
  --sidebar-line: #4d5e99;

  --accent: #405189;
  --accent-hover: #364574;
  --accent-pressed: #2e3a62;
  --accent-soft: #e9ecf5;
  --accent-soft-2: #f2f4fa;

  --text: #212529;
  --text-secondary: #495057;
  --muted: #878a99;
  --faint: #878a99;

  --border: #e9ebec;
  --border-strong: #d9dcdf;
  --grid-line: #eff1f2;
  --hover: #f3f6f9;

  --danger: #f06548;
  --danger-soft: #fdefec;
  --success: #0ab39c;
  --success-soft: #e6f7f5;
  --warning: #f7b84b;
  --warning-soft: #fef6e7;

  --r-lg: 4px;
  --r-md: 4px;

  --shadow-sm: 0 1px 2px rgba(56, 65, 74, 0.15);
  --shadow-md: 0 1px 2px rgba(56, 65, 74, 0.15);
  --shadow-lg: 0 5px 12px rgba(30, 32, 37, 0.14);
  --focus-ring: 0 0 0 3px rgba(64, 81, 137, 0.18);

  --font-ui: "Poppins", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Poppins", "Sora", sans-serif;
}
/* Slightly denser type to match the flatter look */
html[data-theme="velzon"] body { font-size: 13px; }
/* Login keeps a branded moment, in indigo */
html[data-theme="velzon"] #authView.layout {
  background: linear-gradient(165deg, #2e3a62 0%, #405189 60%, #47599b 100%) !important;
}