/* =============================================================
   PM Operations Dashboard — v1 look, light/dark variants
   Default = DARK (matches v1). Toggle adds .light-mode to <html>.
   ============================================================= */

:root {
  /* DARK tokens (default) */
  --bg: #0f1117;
  --bg-elev: #171a23;
  --surface: #171a23;
  --surface-2: #1c202b;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --border: #2a2f3d;
  --pill-bg: #1f2430;
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, .25), 0 2px 4px -1px rgba(0, 0, 0, .15);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .45);
  --radius: 16px;

  --primary: #4f46e5;
  --primary-hover: #4338ca;
  --green:  #10b981;
  --green-deep: #059669;
  --red:    #ef4444;
  --amber:  #f59e0b;
  --blue:   #3b82f6;
  --purple: #a855f7;
  --cyan:   #06b6d4;
  --pink:   #ec4899;

  /* v1 status backgrounds (dark variants) */
  --bg-primary-light: #1e1b4b;
  --bg-purple-light:  #2e1a47;
  --bg-success-light: #052e21;
  --bg-warning-light: #3a2a08;
  --bg-danger-light:  #3a1212;

  /* Topbar (v1: flat dark, same in both themes) */
  --tb-grad-start: #111827;
  --tb-grad-end:   #111827;
  --tb-fg:         #ffffff;
  --tb-muted:      #94a3b8;
  --tb-field-bg:   #1f2937;
  --tb-field-bd:   #374151;
  --tb-divider:    #1f2937;

  /* Card surface tones (used by switcher / menu dropdowns). */
  --bg-card:   rgba(255, 255, 255, 0.02);
  --bg-card-2: rgba(255, 255, 255, 0.04);
}

html.light-mode {
  --bg: #f4f6fb;
  --bg-elev: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f4f6;
  --text: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;
  --pill-bg: #f3f4f6;
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, .05), 0 2px 4px -1px rgba(0, 0, 0, .03);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, .15);

  --bg-primary-light: #eef2ff;
  --bg-purple-light:  #f3e8ff;
  --bg-success-light: #d1fae5;
  --bg-warning-light: #fef3c7;
  --bg-danger-light:  #fee2e2;

  /* Topbar follows the active theme (light mode = light topbar). */
  --tb-grad-start: var(--bg-elev);
  --tb-grad-end:   var(--bg-elev);
  --tb-fg:         var(--text);
  --tb-muted:      var(--muted);
  --tb-field-bg:   var(--surface-2);
  --tb-field-bd:   var(--border);
  --tb-divider:    var(--border);

  /* Card surface tones — light theme uses an elevated white. */
  --bg-card:   var(--surface-2);
  --bg-card-2: var(--bg-elev);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html, body { color-scheme: dark; }
html.light-mode, html.light-mode body { color-scheme: light; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--muted); }
.hidden { display: none !important; }

/* ---------- Topbar ---------- */
.topbar {
  background: var(--tb-grad-start);
  color: var(--tb-fg);
  padding: 16px 24px;
  margin: 0 auto 24px;
  /* Full available width: the topbar and content share the same edges at
     every viewport. No centered maximum width. Gutters come from the
     sidebar layout (dashboard-navigation.css), not from a width cap. */
  max-width: none;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  box-shadow: var(--shadow);
}

.brand-block { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brand-mark {
  color: #818cf8;
  display: inline-flex; align-items: center; justify-content: center;
}
.brand-mark svg { width: 18px; height: 18px; }
.brand-text h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tb-fg);
  display: inline-flex; align-items: center; gap: 8px;
}
.brand-text h1 svg { width: 18px; height: 18px; color: #818cf8; }
/* PM-OD symbol (image) in the header. Sized to match the old 18px icon. */
.brand-text h1 .brand-logo-symbol { width: 22px; height: auto; display: block; flex-shrink: 0; }
/* Login wordmark. Width is capped so the lockup stays crisp on small screens. */
/* Login logo: restrained size, centred over the form. Scoped to .auth-title-logo
   so the other auth headings (reset, account, forgot) are unchanged. */
.auth-title-logo { display: flex; justify-content: center; margin: 0 0 28px; font-size: 0; }
.auth-title-logo .auth-logo { display: block; width: 220px; max-width: 100%; height: auto; }
@media (max-width: 640px) {
  .auth-title-logo .auth-logo { width: 180px; }
}
/* Visually hidden but read by screen readers. */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.brand-sub   { margin: 4px 0 0; font-size: 11px; color: var(--tb-muted); }
.brand-meta  { margin: 2px 0 0; font-size: 10px; color: var(--tb-muted); }

.header-controls {
  display: flex; align-items: center; gap: 10px;
  flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end;
}

.search-wrap {
  display: flex; align-items: center; gap: 6px;
  background: var(--tb-field-bg); padding: 7px 12px; border-radius: 10px;
  color: var(--tb-muted);
  border: 1px solid var(--tb-field-bd);
}
.search-wrap input {
  background: transparent; border: 0; outline: 0;
  color: var(--tb-fg); font: inherit; min-width: 220px;
}
.search-wrap input::placeholder { color: var(--tb-muted); }

.filter-select {
  background: var(--tb-field-bg); color: var(--tb-fg);
  border: 1px solid var(--tb-field-bd);
  border-radius: 10px; padding: 7px 12px; font: inherit;
  cursor: pointer;
}
.filter-select:hover { background: var(--surface); }

.btn-add-pill, .btn-refresh-pill {
  background: var(--green); color: #fff; border: 0;
  padding: 8px 14px; border-radius: 10px; cursor: pointer;
  font: inherit; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s ease;
}
.btn-add-pill:hover, .btn-refresh-pill:hover { background: var(--green-deep); }
.btn-refresh-pill { background: var(--primary); }
.btn-refresh-pill:hover { background: var(--primary-hover); }
.btn-add-pill.small { padding: 5px 12px; font-size: 12px; border-radius: 8px; }

/* Theme toggle pill (topbar). Square icon-only button; same height as the
   Refresh / Add pills so they line up. The icon switches between sun and
   moon based on the button's data-mode attribute (set by JS):
     data-mode="dark"   -> show SUN  (click to go light)
     data-mode="light"  -> show MOON (click to go dark)
   We hide the inactive icon with display:none so it doesn't take layout
   space — keeping the button a fixed square. */
.btn-theme-pill {
  background: var(--tb-field-bg);
  color: var(--tb-fg);
  border: 1px solid var(--tb-field-bd);
  width: 36px; height: 36px;
  padding: 0;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-theme-pill:hover {
  background: var(--tb-field-bd);
  border-color: var(--primary);
}
.btn-theme-pill .theme-icon-sun,
.btn-theme-pill .theme-icon-moon { display: none; }
.btn-theme-pill[data-mode="dark"]  .theme-icon-sun  { display: block; }
.btn-theme-pill[data-mode="light"] .theme-icon-moon { display: block; }
/* In light mode the theme pill background uses a slightly elevated surface
   so it stands out from the white topbar without competing with it. */
:root.light-mode .btn-theme-pill {
  background: var(--bg-elev);
  color: var(--text);
  border-color: var(--border);
}
:root.light-mode .btn-theme-pill:hover {
  background: var(--surface);
  border-color: var(--primary);
}

/* ---------- User menu ---------- */
.user-menu { position: relative; }
.user-trigger {
  display: flex; align-items: center; gap: 8px;
  background: var(--tb-field-bg); color: var(--tb-fg);
  border: 1px solid var(--tb-field-bd);
  border-radius: 10px;
  padding: 6px 10px 6px 6px;
  cursor: pointer;
  font: inherit; font-weight: 500;
}
.user-trigger:hover { background: var(--tb-field-bd); }
.user-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
  color: #fff; font-weight: 700; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
}
.user-name {
  font-size: 13px;
  max-width: 140px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 50;
}
.menu-item {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 0;
  color: var(--text);
  padding: 10px 12px; border-radius: 8px;
  font: inherit; cursor: pointer;
}
.menu-item:hover { background: var(--surface-2); }
.menu-item.danger { color: var(--red); }
.menu-item.danger:hover { background: rgba(239, 68, 68, .12); }
.menu-sep {
  border: 0; border-top: 1px solid var(--border);
  margin: 4px 6px;
}

/* ---------- Main / sub-tabs ---------- */
/* Layout container. Fills the full available width with no centered cap,
   so content expands into the space freed by a collapsed sidebar. Outer
   gutters are the padding below plus the sidebar layout's margin
   (dashboard-navigation.css). Grids and charts size to this width. */
.main {
  max-width: none;
  margin: 18px auto;
  padding: 0 24px;
}
.view { display: none; }
.view.active { display: block; }
.view h2 { margin: 0 0 12px; font-weight: 600; }

/* I.2 follow-up #5 (Timeline full-height). When the Calendar tab is active,
   make it a flex column so the Timeline sub-host can fill the remaining
   vertical viewport (instead of shrinking to its natural content height).
   120px ≈ topbar (~56px) + .main top/bottom margin (18+18) + subtab strip
   (~28). Other views (Overview/Tasks/Projects/...) keep the block layout
   they always had — only the Calendar tab opts into this. */
#view-calendar.active {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 120px);
}
/* Both Calendar sub-hosts (Month + Timeline) grow to fill the remaining
   vertical space. The Timeline host has its own internal flex column for
   the toolbar + Gantt split; the Month host just lets FC fill it. */
#view-calendar.active .cal-host {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* Let FullCalendar's root `.fc` element fill the available vertical space
   inside the Month host. Without this FC keeps its natural height and a
   chunk of empty viewport remains below the calendar grid. */
#view-calendar.active .cal-host > .fc {
  flex: 1 1 auto;
  min-height: 0;
}

.subtabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}
.subtab {
  background: transparent; border: 0; padding: 10px 18px;
  border-radius: 10px 10px 0 0; cursor: pointer; color: var(--muted);
  font: inherit; font-weight: 500;
  border-bottom: 2px solid transparent;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color .15s ease, border-color .15s ease;
}
.subtab:hover { color: var(--text); }
.subtab.active {
  color: var(--text);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

.badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--muted); color: #fff; font-size: 11px; font-weight: 700;
  padding: 1px 7px; border-radius: 999px; min-width: 20px;
}
.badge.red { background: var(--red); }

/* ---------- KPI tiles ---------- */
.kpi-row {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 16px; margin-bottom: 24px;
}
.kpi-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.kpi-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px -4px rgba(0, 0, 0, .12);
}
.kpi-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; color: var(--muted); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 4px;
}
.kpi-value { font-size: 30px; font-weight: 800; margin: 6px 0; line-height: 1.1; font-family: "Inter", sans-serif; }
.kpi-foot  { font-size: 11px; font-weight: 500; }
.kpi-value.red    { color: var(--red); }
.kpi-value.amber  { color: var(--amber); }
.kpi-value.green  { color: var(--green); }
.kpi-value.blue   { color: var(--blue); }
.kpi-value.purple { color: var(--purple); }
.kpi-foot.red    { color: var(--red); }
.kpi-foot.amber  { color: var(--amber); }
.kpi-foot.green  { color: var(--green); }
.kpi-foot.blue   { color: var(--blue); }
.kpi-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.kpi-dot.red   { background: var(--red); }
.kpi-dot.amber { background: var(--amber); }
.kpi-dot.green { background: var(--green); }
.kpi-dot.blue  { background: var(--blue); }
.kpi-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--bg-primary-light);
  color: var(--primary);
}
.kpi-icon svg { width: 12px; height: 12px; }
.kpi-tile:nth-child(6) .kpi-icon { background: var(--bg-purple-light); color: var(--purple); }
.kpi-pulse { width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: var(--red); animation: kpi-pulse-kf 2s infinite; }
@keyframes kpi-pulse-kf {
  0% { opacity: 1; }
  50% { opacity: 0.4; }
  100% { opacity: 1; }
}

/* ---------- Card grid ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  margin-bottom: 14px;
}
.card-title {
  margin: 0 0 16px; font-size: 10px; font-weight: 700;
  color: var(--muted); letter-spacing: .12em; text-transform: uppercase;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.ct-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  margin-right: 6px;
  color: var(--muted);
}
.ct-icon.indigo { color: #818cf8; }
.ct-icon.cyan   { color: #22d3ee; }
.ct-icon.violet { color: #c084fc; }
.ct-icon.amber  { color: #fbbf24; }
.ct-icon.green  { color: #34d399; }
.ct-icon.red    { color: #f87171; }
.ct-icon svg { width: 14px; height: 14px; }
.row { display: grid; gap: 14px; }
.row.two    { grid-template-columns: 1fr 1fr; }
.row.three  { grid-template-columns: 1fr 1fr 1fr; }

/* ---------- Bar list (Resource / Clients) ---------- */
.bar-list { display: flex; flex-direction: column; gap: 12px; }
.bar-row  { display: grid; grid-template-columns: 90px 1fr 50px; align-items: center; gap: 12px; }
.bar-row .label { font-weight: 600; font-size: 13px; color: var(--text); }
.bar-row .count { text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; }
.bar-track { background: var(--pill-bg); border-radius: 999px; height: 8px; overflow: hidden; }
.bar-fill  { height: 100%; border-radius: 999px; transition: width .35s ease; }

/* Color cycles (used by resource allocation / clients) */
.c1 { background: #14b8a6; }
.c2 { background: #ef4444; }
.c3 { background: #f59e0b; }
.c4 { background: #6366f1; }
.c5 { background: #3b82f6; }
.c6 { background: #a855f7; }
.c7 { background: #06b6d4; }
.c8 { background: #ec4899; }

/* ---------- Donut / chart wrappers ---------- */
.donut-wrap     { position: relative; height: 240px; }
.bar-chart-wrap { position: relative; height: 260px; }

/* ---------- Tables ---------- */
table.data { width: 100%; border-collapse: collapse; margin: 0; }
table.data th, table.data td {
  text-align: left; padding: 12px 14px;
  border-bottom: 1px solid var(--border); vertical-align: top;
}
table.data th {
  font-weight: 600; color: var(--muted); font-size: 11px;
  text-transform: uppercase; letter-spacing: .06em;
}
table.data tr:last-child td { border-bottom: 0; }
table.data tr:hover td { background: var(--surface-2); }

/* ---------- Pills ---------- */
.pill {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  background: var(--pill-bg); font-size: 12px; font-weight: 600;
  color: var(--text);
}
.pill.status-pending      { background: rgba(245, 158, 11, .15); color: #f59e0b; }
.pill.status-in-progress  { background: rgba(59, 130, 246, .15); color: #3b82f6; }
.pill.status-done         { background: rgba(16, 185, 129, .15); color: #10b981; }
.pill.status-blocked      { background: rgba(239, 68, 68, .15); color: #ef4444; }
.pill.status-overdue, .todo-due.overdue { background: rgba(239, 68, 68, .20); color: #ef4444; font-weight: 600; }
.pill.status-today        { background: rgba(245, 158, 11, .20); color: #f59e0b; font-weight: 600; }

/* Light-mode pill overrides (slightly stronger bg) */
html.light-mode .pill.status-pending     { background: #fef3c7; color: #92400e; }
html.light-mode .pill.status-in-progress { background: #dbeafe; color: #1e40af; }
html.light-mode .pill.status-done        { background: #d1fae5; color: #065f46; }
html.light-mode .pill.status-blocked     { background: #fee2e2; color: #991b1b; }
html.light-mode .pill.status-overdue, html.light-mode .todo-due.overdue { background: #fee2e2; color: #991b1b; font-weight: 600; }
html.light-mode .pill.status-today       { background: #fef3c7; color: #92400e; font-weight: 600; }

/* ---------- Row actions (edit/delete) ---------- */
.row-actions { display: inline-flex; gap: 6px; }
.icon-btn {
  background: transparent; border: 0; cursor: pointer; padding: 6px;
  color: var(--muted); border-radius: 6px; font-size: 14px;
  transition: background .12s ease, color .12s ease;
}
.icon-btn:hover { background: var(--pill-bg); color: var(--text); }
.icon-btn.danger:hover { color: var(--red); }

/* ---------- Leave log (compact) ---------- */
.leave-log .leave-list { display: flex; flex-direction: column; }
.leave-log .leave-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.2fr) 1fr 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 8px;
  border-radius: 8px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.leave-log .leave-row:last-child { border-bottom: 0; }
.leave-log .leave-row:not(.leave-head):hover { background: var(--surface-2); }
.leave-log .leave-head {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); padding-top: 4px; padding-bottom: 8px;
}
.leave-log .leave-owner { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leave-log .leave-date { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.leave-log .leave-row .row-actions { justify-self: end; }
.leave-log { max-height: 280px; overflow-y: auto; }

/* ---------- M.1: Recently added tasks (Overview tab strip) ---------- */
/* Strip under the Leave Log card. The spec said "half-column on desktop
   alongside Leave Log, full-width on mobile" — after looking at the
   existing Overview layout (Workload + Leave Log already fills the
   .row.two), the cleanest fit is a full-width card on its own row below.
   Each row is a clickable flex strip with [customer + type pill] on the
   left, task title + owner in the middle, and a relative-time label on
   the right. Rows older than 14 days are filtered client-side. */
.recent-tasks-view-all {
  font-size: 11px; font-weight: 500; color: var(--primary);
  text-decoration: none; letter-spacing: 0; text-transform: none;
}
.recent-tasks-view-all:hover { text-decoration: underline; }
.recent-tasks { display: flex; flex-direction: column; }
.recent-tasks .recent-list { display: flex; flex-direction: column; }
.recent-tasks .recent-row {
  display: grid;
  grid-template-columns: minmax(140px, auto) 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 10px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s ease;
  border-bottom: 1px solid var(--border);
}
.recent-tasks .recent-row:last-child { border-bottom: 0; }
.recent-tasks .recent-row:hover { background: var(--surface-2); }
.recent-tasks .recent-tags {
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;
  gap: 6px; min-width: 0;
}
.recent-tasks .recent-customer {
  font-size: 12px; font-weight: 600; color: var(--text);
  background: var(--pill-bg); padding: 3px 10px; border-radius: 8px;
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.recent-tasks .recent-customer.is-empty { color: var(--muted); font-weight: 500; }
.recent-tasks .recent-type {
  /* Type pill — same color palette as the mockup variant 2 (single-row chip). */
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; line-height: 1.4; white-space: nowrap;
}
.recent-tasks .recent-type.t-indigo { background: rgba(79, 70, 229, .15); color: #4f46e5; }
.recent-tasks .recent-type.t-cyan   { background: rgba(6, 182, 212, .15); color: #06b6d4; }
.recent-tasks .recent-type.t-green  { background: rgba(16, 185, 129, .15); color: #10b981; }
.recent-tasks .recent-type.t-amber  { background: rgba(245, 158, 11, .15); color: #f59e0b; }
.recent-tasks .recent-type.t-pink   { background: rgba(236, 72, 153, .15); color: #ec4899; }
.recent-tasks .recent-type.t-purple { background: rgba(168, 85, 247, .15); color: #a855f7; }
.recent-tasks .recent-type.t-red    { background: rgba(239, 68, 68, .15);  color: #ef4444; }
.recent-tasks .recent-type.t-muted  { background: var(--pill-bg); color: var(--muted); }
html.light-mode .recent-tasks .recent-type.t-indigo { background: #e0e7ff; color: #3730a3; }
html.light-mode .recent-tasks .recent-type.t-cyan   { background: #cffafe; color: #155e75; }
html.light-mode .recent-tasks .recent-type.t-green  { background: #d1fae5; color: #065f46; }
html.light-mode .recent-tasks .recent-type.t-amber  { background: #fef3c7; color: #92400e; }
html.light-mode .recent-tasks .recent-type.t-pink   { background: #fce7f3; color: #9d174d; }
html.light-mode .recent-tasks .recent-type.t-purple { background: #f3e8ff; color: #6b21a8; }
html.light-mode .recent-tasks .recent-type.t-red    { background: #fee2e2; color: #991b1b; }

.recent-tasks .recent-title-stack { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.recent-tasks .recent-title {
  font-size: 13px; font-weight: 500; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.recent-tasks .recent-meta { font-size: 11px; color: var(--muted); }
.recent-tasks .recent-status {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
}
.recent-tasks .recent-status.s-pending     { background: rgba(245, 158, 11, .15); color: #f59e0b; }
.recent-tasks .recent-status.s-in-progress { background: rgba(59, 130, 246, .15); color: #3b82f6; }
.recent-tasks .recent-status.s-blocked     { background: rgba(239, 68, 68, .15); color: #ef4444; }
.recent-tasks .recent-status.s-overdue     { background: rgba(239, 68, 68, .20); color: #ef4444; font-weight: 600; }
html.light-mode .recent-tasks .recent-status.s-pending     { background: #fef3c7; color: #92400e; }
html.light-mode .recent-tasks .recent-status.s-in-progress { background: #dbeafe; color: #1e40af; }
html.light-mode .recent-tasks .recent-status.s-blocked     { background: #fee2e2; color: #991b1b; }
html.light-mode .recent-tasks .recent-status.s-overdue     { background: #fee2e2; color: #991b1b; font-weight: 600; }

.recent-tasks .recent-when {
  font-size: 11px; color: var(--muted);
  text-align: right; white-space: nowrap; min-width: 64px;
}
.recent-tasks .recent-when.is-fresh { color: var(--primary); font-weight: 600; }

.recent-tasks .recent-empty {
  padding: 32px 12px; text-align: center; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.recent-tasks .recent-empty button {
  background: var(--primary); color: #fff; border: 0; border-radius: 8px;
  padding: 6px 16px; font-size: 13px; font-weight: 500; cursor: pointer;
}

@media (max-width: 720px) {
  .recent-tasks .recent-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "tags    when"
      "title   status"
      "meta    status";
    row-gap: 4px;
  }
  .recent-tasks .recent-tags    { grid-area: tags; }
  .recent-tasks .recent-when    { grid-area: when; }
  .recent-tasks .recent-title-stack { grid-area: title; }
  .recent-tasks .recent-status  { grid-area: status; justify-self: end; }
  .recent-tasks .recent-meta    { grid-area: meta; }
}

/* ---------- Inline create forms ---------- */
.section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 0 0 12px;
}
.section-head h2 { margin: 0; }
.section-head .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.section-head input[type="text"] {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 10px; font: inherit;
}

.create-form {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; margin-bottom: 14px;
  background: var(--surface);
  box-shadow: var(--shadow); display: grid; gap: 14px;
}
.create-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.create-form .row.three { grid-template-columns: 1fr 1fr 1fr; }
.create-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12px; color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
}
.create-form input, .create-form select, .create-form textarea {
  font: inherit; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-elev); color: var(--text);
  text-transform: none; letter-spacing: 0;
}
.create-form textarea { min-height: 70px; resize: vertical; }
.create-form input:focus, .create-form select:focus, .create-form textarea:focus {
  outline: 2px solid var(--primary); outline-offset: 1px; border-color: transparent;
}
.create-form .form-actions { display: flex; gap: 8px; justify-content: flex-end; }
.create-form .form-msg { font-size: 13px; }
.create-form .form-msg.error { color: var(--red); }
.create-form .form-msg.ok    { color: var(--green); }

/* ---------- Modal ---------- */
.modal {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .55);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 16px;
}
.modal-panel {
  background: var(--bg-elev); border-radius: var(--radius);
  width: 100%; max-width: 560px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-lg); border: 1px solid var(--border);
}
.modal-panel.wide { max-width: 720px; }
.modal-panel.wide.settings-open { max-width: 880px; }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.modal-head h3 { margin: 0; font-size: 16px; font-weight: 600; }
.modal-body { padding: 18px; }

/* ---------- Project form (v1-style Add/Edit modal) ---------- */
.project-form {
  display: flex; flex-direction: column; gap: 16px;
}
.pf-field { display: flex; flex-direction: column; gap: 4px; }
.pf-row.two   { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pf-row.three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 720px) {
  .pf-row.two,
  .pf-row.three { grid-template-columns: 1fr; }
}
.pf-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: 600;
}
.pf-input {
  background: var(--bg-elev-2, var(--surface-2));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--text);
  font-family: inherit;
  outline: none;
  transition: border-color 0.12s;
  width: 100%;
  box-sizing: border-box;
}
.pf-input:focus { border-color: var(--color-primary, #4f46e5); }
.pf-input::placeholder { color: var(--muted); }
.pf-input.is-invalid { border-color: #ef4444; }
.pf-input.is-invalid:focus { border-color: #ef4444; }
/* Generic input.is-invalid used by wireForm's live leave-date check. */
input.is-invalid,
input.is-invalid:focus {
  border-color: #ef4444 !important;
}
.pf-label .req { color: #ef4444; }
/* Required-field marker for the generic create/edit forms (Task, Leave, ToDo).
   The label heading is a single text run ("TASK *") so the column-flex
   layout of .create-form label does not push the star onto its own line. */
.req-star { color: #ef4444; font-weight: 700; }
.create-form label .req-label { display: inline; }
.pf-hint {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted, #94a3b8);
}
.pf-hint.is-invalid { color: #ef4444; }

.pf-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.pf-section-head .pf-label { margin: 0; }
.pf-link {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--color-primary, #4f46e5);
  font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 4px;
}
.pf-link:hover { color: #4338ca; }

.pf-list { display: flex; flex-direction: column; gap: 8px; }
.pf-row-item {
  display: flex; align-items: center; gap: 8px;
}
.pf-row-item input[type="text"],
.pf-row-item input[type="date"] {
  background: var(--bg-elev-2, var(--surface-2));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text);
  font-family: inherit;
  outline: none;
  min-width: 0;
}
.pf-row-item input[type="text"] { flex: 1; }
.pf-row-item input[type="text"]:focus,
.pf-row-item input[type="date"]:focus { border-color: var(--color-primary, #4f46e5); }
.pf-row-item input[type="checkbox"] {
  width: 16px; height: 16px; flex-shrink: 0;
  accent-color: var(--color-primary, #4f46e5);
}
.pf-row-item .pf-del {
  background: none; border: none; cursor: pointer; padding: 4px;
  color: var(--muted); display: inline-flex; align-items: center;
  border-radius: 6px;
}
.pf-row-item .pf-del:hover { color: #ef4444; background: rgba(239, 68, 68, 0.08); }
.pf-ms-date { width: 140px; }

.pf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-chip {
  display: inline-flex; align-items: center;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.12s;
  user-select: none;
}
.pf-chip:hover { border-color: var(--color-primary, #4f46e5); color: var(--text); }
.pf-chip.active {
  background: var(--color-primary, #4f46e5);
  border-color: var(--color-primary, #4f46e5);
  color: #fff;
}

.pf-actions { display: flex; gap: 10px; padding-top: 4px; }
.pf-submit { flex: 1; padding: 12px; font-size: 14px; }
.pf-empty { color: var(--muted); font-size: 12px; padding: 6px 0; }

/* ---------- Tasks (Master Task List) ---------- */
.tasks-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.tasks-title { margin: 0; font-size: 16px; font-weight: 800; }
.tasks-sub   { margin: 2px 0 0; font-size: 11px; color: var(--muted); }
.tasks-count { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* K.3 — "My Tasks" filter toggle (top-right of Master Task List) */
.tasks-head-right { display: flex; align-items: center; gap: 12px; }
.tasks-mine-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.12s;
  user-select: none;
}
.tasks-mine-btn:hover { border-color: var(--color-primary, #4f46e5); color: var(--text); }
.tasks-mine-btn svg { opacity: 0.85; }
.tasks-mine-btn.is-active {
  background: var(--color-primary, #4f46e5);
  border-color: var(--color-primary, #4f46e5);
  color: #fff;
}
.tasks-mine-btn.is-active svg { opacity: 1; }
.tasks-mine-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.tasks-mine-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 16px; padding: 0 5px;
  border-radius: 999px;
  background: rgba(127, 127, 127, 0.18);
  font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.tasks-mine-btn.is-active .tasks-mine-count {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}
/* Master Task List scroll container.
   Height strategy: fill the viewport below the chrome (topbar ~72px +
   subtabs ~42px + margins ~64px + tasks-head ~56px ≈ 234px), capped at
   1400px so a 4K monitor doesn't waste a giant empty scroll area. The
   internal overflow-y: auto kicks in once the task list is longer than
   the available height, same scrollbar UX as before. */
.tasks-scroll {
  max-height: min(calc(100vh - 240px), 1400px);
  overflow-y: auto;
}
.task-table { font-size: 12px; }
.task-table thead th {
  position: sticky; top: 0;
  background: var(--surface-2);
  font-size: 11px; font-weight: 700;
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.task-table tbody td { padding: 12px; vertical-align: top; }
.task-table tbody tr:hover { background: var(--surface-2); }
.task-table tbody tr.is-done { opacity: 0.7; }
.task-table tbody tr.is-overdue td:first-child { border-left: 2px solid #ef4444; }
.task-stack { display: flex; flex-direction: column; gap: 2px; max-width: 240px; }
.task-name  { font-weight: 600; color: var(--text); }
.task-name.line-through { text-decoration: line-through; color: var(--muted); }
.task-desc  { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-blue  { color: var(--blue); font-weight: 500; }
.engineer-cell { font-weight: 600; color: var(--text); }
.table-customer-pill {
  display: inline-block; font-size: 12px; font-weight: 600;
  color: var(--text); background: var(--pill-bg);
  padding: 3px 10px; border-radius: 8px;
}

/* ---------- Projects (grid of cards, v1 layout) ---------- */
.projects-grid {
  display: grid; gap: 16px;
  /* 2 cards per row that fill the container. minmax(0, 1fr) is required
     so the deliverables list inside each card doesn't push the column
     wider than its share (otherwise the second card would overflow and
     the layout would break on narrow viewports). The grid grows with
     .main's fluid cap so on 21"+ monitors each card is wider, with no
     awkward empty gutter on the sides. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.projects-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.projects-head h3 { margin: 0; font-size: 16px; font-weight: 800; }
.projects-head p  { margin: 2px 0 0; font-size: 11px; color: var(--muted); }
.projects-head-right {
  display: flex; align-items: center; gap: 12px;
}

/* View toggle (grid / list) — sits in .projects-head */
.proj-view-toggle {
  display: inline-flex;
  background: var(--bg-card-2, rgba(255,255,255,0.04));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 8px;
  padding: 2px;
}
.proj-view-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 26px;
  background: none; border: none;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.proj-view-btn:hover { color: var(--text); }
.proj-view-btn.active {
  background: var(--bg-primary-light, rgba(79,70,229,0.12));
  color: var(--primary, #6366f1);
}

/* List view row layout */
.projects-list {
  display: flex; flex-direction: column;
  background: var(--bg-card, rgba(255,255,255,0.02));
  border: 1px solid var(--border, rgba(255,255,255,0.06));
  border-radius: 12px;
  overflow: hidden;
}
/* Header row of the list view — column titles that match .project-row's
   grid-template-columns exactly so every label lines up under its data.
   Sticky-top so it stays visible while the user scrolls long lists.
   `display: contents` would collapse the row into the parent flex column
   (memory: feedback_css_grid_display_contents_breaks_row_breaks.md), so
   we use a real grid container here and put the actual rows inside
   .projects-list-body. */
.projects-list-head {
  display: grid;
  grid-template-columns: minmax(280px, 1.4fr) 140px 180px 200px 160px 80px;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-card-2, rgba(255,255,255,0.04));
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  position: sticky;
  top: 0;
  z-index: 1;
}
.projects-list-head > div {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.projects-list-body { display: flex; flex-direction: column; }
.projects-list-body > .project-row:last-child { border-bottom: none; }
/* Hide the list head on narrow viewports — the responsive row layout
   stacks fields into named areas, so column labels wouldn't line up. */
@media (max-width: 900px) {
  .projects-list-head { display: none; }
}

/* ---- Clickable project names + active state ---------------------------- */
.project-card .name,
.project-row-title {
  cursor: pointer;
}
.project-card .name:hover,
.project-row-title:hover {
  color: var(--primary, #6366f1);
}
[data-project-id].is-open {
  outline: 2px solid var(--color-primary, #4f46e5);
  outline-offset: -2px;
}

/* ---- Project dashboard (D.5) ------------------------------------------ */
.pd-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.pd-back {
  background: none; border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px; font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.pd-back:hover { border-color: var(--text); }
.pd-head-actions { display: flex; gap: 6px; }

.pd-header {
  padding: 18px 20px;
  background: var(--bg-card, rgba(255,255,255,0.03));
  border: 1px solid var(--border, rgba(255,255,255,0.06));
  border-radius: 12px;
  margin-bottom: 14px;
}
.pd-title-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.pd-title {
  margin: 0;
  font-size: 22px; font-weight: 800;
}
.pd-desc {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.pd-meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 12px;
}
.pd-meta-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px;
  padding: 4px 10px; border-radius: 6px;
  background: var(--bg-card-2, rgba(255,255,255,0.05));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
}
.pd-meta-chip strong {
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted);
}

.pd-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.pd-kpi {
  padding: 14px 16px;
  background: var(--bg-card, rgba(255,255,255,0.03));
  border: 1px solid var(--border, rgba(255,255,255,0.06));
  border-radius: 10px;
}
.pd-kpi-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); font-weight: 700;
}
.pd-kpi-value {
  font-size: 24px; font-weight: 800;
  margin-top: 4px;
}
.pd-kpi-sub {
  font-size: 11px; color: var(--muted);
  margin-top: 2px;
}

.pd-scope {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-bottom: 18px;
}
@media (max-width: 768px) { .pd-scope { grid-template-columns: 1fr; } }
.pd-scope-block {
  padding: 12px 14px;
  background: var(--bg-card, rgba(255,255,255,0.03));
  border: 1px solid var(--border, rgba(255,255,255,0.06));
  border-radius: 10px;
}
.pd-scope-block h4 {
  margin: 0 0 6px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); font-weight: 700;
}
.pd-scope-block p {
  margin: 0; font-size: 12px; line-height: 1.5;
}

.pd-section {
  margin-bottom: 18px;
  padding: 14px 16px;
  background: var(--bg-card, rgba(255,255,255,0.03));
  border: 1px solid var(--border, rgba(255,255,255,0.06));
  border-radius: 10px;
}
.pd-section-title {
  margin: 0 0 10px;
  font-size: 13px; font-weight: 700;
  color: var(--text);
}
.pd-empty {
  color: var(--muted); font-size: 12px; padding: 6px 0;
}

/* M.5 / Proposal 1 — Implementation Progress section inside the project
   dashboard. Three sub-rollups (by Engineer, by Type, by Status) each show
   "X of Y done" + a percentage bar; bar color reflects % complete (green
   ≥ 90%, amber ≥ 50%, red > 0%, neutral when zero). Mirrors the Notion
   "rollup" pattern from the BankX ITSM screenshot but uses fields PM-OD
   already has (owner, type, status). Category / Phase rollups from the
   mockup would require new task fields; revisit if the user asks. */
.pd-impl-progress { padding-bottom: 4px; }
.pd-impl-summary {
  margin: 0 0 12px; font-size: 12px; color: var(--muted);
}
.pd-impl-summary strong { color: var(--text); font-weight: 700; }
.pd-impl-group { margin-bottom: 14px; }
.pd-impl-group:last-child { margin-bottom: 0; }
.pd-impl-group-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); margin-bottom: 6px;
}
.pd-impl-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(120px, 2fr) 90px;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  border-radius: 6px;
}
.pd-impl-row:hover { background: var(--surface-2, rgba(255,255,255,0.04)); }
.pd-impl-cat {
  font-size: 12px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pd-impl-cat small {
  display: block; font-size: 10px; font-weight: 500; color: var(--muted);
  margin-top: 1px;
}
.pd-impl-bar-track {
  height: 8px; background: var(--surface-2, rgba(255,255,255,0.06));
  border-radius: 4px; overflow: hidden;
}
.pd-impl-bar-fill {
  height: 100%; background: var(--primary);
  transition: width .3s ease;
  border-radius: 4px;
}
.pd-impl-bar-fill.green { background: var(--green, #10b981); }
.pd-impl-bar-fill.amber { background: var(--amber, #f59e0b); }
.pd-impl-bar-fill.red   { background: var(--red,   #ef4444); }
.pd-impl-count {
  text-align: right; font-size: 11px; font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.pd-impl-count strong { color: var(--text); font-weight: 700; margin-right: 6px; }

/* M.5 / Proposal 2 — Implementation Tasks table. Compact table that
   lists tasks scoped to this project. Click an edit icon to open the
   standard task editor. */
.pd-impl-tasks .pd-impl-tasks-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.pd-impl-tasks .pd-impl-tasks-head .pd-section-title { margin-bottom: 0; }
.pd-impl-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.pd-impl-table thead th {
  text-align: left; padding: 8px 10px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.pd-impl-table tbody tr { border-bottom: 1px solid var(--border); }
.pd-impl-table tbody tr:last-child { border-bottom: 0; }
.pd-impl-table tbody tr:hover { background: var(--surface-2, rgba(255,255,255,0.04)); }
.pd-impl-table td { padding: 8px 10px; vertical-align: middle; }
.pd-task-name { font-weight: 600; color: var(--text); }
.pd-task-meta { font-size: 10px; color: var(--muted); margin-top: 2px; }
/* M.5 — Description preview under the task name. Two-line clamp with
   ellipsis so the table doesn't reflow when tasks have long descriptions.
   Hover reveals the full text via the native `title` attribute. */
.pd-task-desc {
  font-size: 10px; color: var(--muted);
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  max-width: 280px;
}
.pd-task-engineer { font-size: 12px; color: var(--text); }
/* M.5 — small chip used for Category / Phase / BRD Reference cells.
   `mono` variant uses a monospace font for BRD refs like "4.4.1 #27-32". */
.pd-task-chip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--surface-2, rgba(255,255,255,0.06));
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pd-task-chip.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; }
/* M.5 — Priority pills match the rest of the app's status pill palette. */
.pd-impl-table .pill.prio-high   { background: rgba(239, 68, 68, .15);  color: #f87171; }
.pd-impl-table .pill.prio-medium { background: rgba(245, 158, 11, .15); color: #fbbf24; }
.pd-impl-table .pill.prio-low    { background: rgba(107, 114, 128, .15);color: #d1d5db; }
html.light-mode .pd-impl-table .pill.prio-high   { background: #fee2e2; color: #991b1b; }
html.light-mode .pd-impl-table .pill.prio-medium { background: #fef3c7; color: #92400e; }
html.light-mode .pd-impl-table .pill.prio-low    { background: #f3f4f6; color: #6b7280; }
.pd-task-actions { text-align: right; width: 32px; }

.pd-eng-list {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.pd-eng-list .engineer-chip small {
  display: block;
  font-size: 9px;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  margin-top: 2px;
}

.pd-deliv-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0;
  cursor: pointer;
}
.pd-deliv-row .pd-deliv-name {
  font-size: 13px;
}
.pd-deliv-row .pd-deliv-name.is-done {
  text-decoration: line-through;
  color: var(--muted);
}

.pd-ms-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.04));
}
.pd-ms-row:last-child { border-bottom: none; }
.pd-ms-row.is-overdue .pd-ms-name { color: #ef4444; }
.pd-ms-name {
  font-size: 13px; font-weight: 600;
}
.pd-ms-dates {
  font-size: 11px; color: var(--muted);
  display: flex; gap: 6px; flex-wrap: wrap;
}

/* ---- Admin tab (D.7) --------------------------------------------------- */
.admin-card {
  margin-bottom: 16px;
}
.admin-invite-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-invite-grid .aig-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .04em;
}
.admin-invite-grid .aig-row-fields {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.4fr auto;
  gap: 8px;
  align-items: end;
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
}
.admin-invite-grid .aig-row-fields > label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .04em;
}
.admin-invite-grid label small {
  font-weight: 400; text-transform: none; letter-spacing: 0;
}
.admin-invite-grid input,
.admin-invite-grid select {
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
  background: var(--bg-card-2, rgba(255,255,255,0.04));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 6px;
  color: var(--text);
  outline: none;
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
}
.admin-invite-grid input:focus,
.admin-invite-grid select:focus {
  border-color: var(--color-primary, #4f46e5);
}
@media (max-width: 900px) {
  .admin-invite-grid .aig-row-fields { grid-template-columns: 1fr; }
}

.admin-member-list {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--border, rgba(255,255,255,0.06));
}
.admin-row {
  display: grid;
  grid-template-columns: minmax(180px, 2fr) auto 160px auto;
  align-items: center;
  gap: 20px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.04));
}
.admin-row:last-child { border-bottom: none; }
.admin-row-user { min-width: 0; }
.admin-row-name { font-size: 13px; font-weight: 700; }
.admin-row-email { font-size: 11px; color: var(--muted); }
.admin-row-meta { display: flex; gap: 4px; flex-wrap: wrap; }
.admin-tag {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 999px;
}
.admin-tag.pa       { background: rgba(234, 179, 8, 0.12);  color: #ca8a04; }
.admin-tag.inactive { background: rgba(239, 68, 68, 0.12);  color: #ef4444; }
.admin-row-role {
  height: 28px;
  font-size: 12px;
  padding: 0 8px;
  border-radius: 6px;
  min-width: 180px;
  background: var(--surface-2, #1c202b);
  color: var(--text, #e5e7eb);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  color-scheme: dark;
}
.admin-row-role option {
  background: var(--surface-2, #1c202b);
  color: var(--text, #e5e7eb);
}
.admin-row-role:focus {
  outline: none;
  border-color: var(--primary, #4f46e5);
}
.admin-row-role:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--bg-card-2);
  border-color: var(--border);
  color: var(--muted, #9ca3af);
}
.admin-row-role[disabled] + .admin-row-actions .admin-toggle,
.admin-row-role[disabled] ~ .admin-row-actions .admin-toggle { opacity: 0.55; }

/* --- Platform Admin Settings (Settings > Platform tab) --- */
/* Visible only to users.is_platform_admin = 1. Reuses .admin-card /
   .admin-row* for layout; adds tag colors, audit row layout, members
   panel, and a brief success flash on role change. */
.pa-tenant-slug {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  background: var(--bg-card-2);
  color: var(--muted);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}
.pa-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 999px;
}
.pa-tag.active    { background: rgba(16, 185, 129, 0.12); color: #10b981; }
.pa-tag.suspended { background: rgba(239, 68, 68, 0.12);  color: #ef4444; }
.pa-tenant-toggle { min-width: 84px; }
.pa-tenant-members-panel {
  padding: 4px 16px 14px;
  background: var(--bg-card-2, rgba(255,255,255,0.02));
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.04));
}
.pa-members-panel-inner { padding: 8px 0 4px; }
.pa-members-title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.pa-member-locked {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 6px;
}
.pa-member-status { font-size: 11px; font-weight: 600; }
.pa-row-flash {
  animation: paRowFlash 600ms ease-out;
}
@keyframes paRowFlash {
  0%   { background: rgba(99, 102, 241, 0.18); }
  100% { background: transparent; }
}
.pa-audit-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border, rgba(255,255,255,0.06));
}
.pa-audit-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 12px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.04));
}
.pa-audit-row:last-child { border-bottom: none; }
.pa-audit-when {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  white-space: nowrap;
}
.pa-audit-main {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 12px;
  line-height: 1.5;
}
.pa-audit-actor   { font-weight: 600; }
.pa-audit-action  {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  background: var(--bg-card-2);
  color: var(--primary, #818cf8);
  padding: 1px 6px;
  border-radius: 4px;
}
.pa-audit-target  { color: var(--muted); }
.pa-audit-detail  {
  display: block;
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  white-space: pre-wrap;
  word-break: break-all;
  margin-top: 4px;
}
.admin-row-locked {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600;
  color: var(--muted, #9ca3af);
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 6px;
}
.admin-row-handle {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  background: rgba(99, 102, 241, 0.10);
  color: var(--primary, #6366f1);
  border: 1px solid rgba(99, 102, 241, 0.25);
  vertical-align: middle;
}
.admin-row-handle.missing {
  background: var(--bg-card-2);
  color: var(--muted, #9ca3af);
  border-color: var(--border);
  font-family: inherit;
}
.admin-handle-edit {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 4px; padding: 2px 4px;
  background: transparent; color: var(--muted);
  border: 1px solid transparent; border-radius: 4px;
  cursor: pointer; vertical-align: middle;
  transition: color .15s, border-color .15s, background .15s;
}
.admin-handle-edit:hover { color: var(--primary, #6366f1); border-color: var(--border); background: var(--bg-card-2); }
.admin-handle-form {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 8px; padding: 10px;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.admin-handle-form[hidden] { display: none; }
.admin-handle-form label {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 11px; color: var(--muted);
}
.admin-handle-form label > span { font-weight: 600; }
.admin-handle-form input {
  padding: 4px 8px; font-size: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px; color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.admin-handle-form input:not([pattern]) { font-family: inherit; }
.admin-handle-form-actions { display: flex; gap: 6px; margin-top: 4px; }
.admin-handle-form-actions .btn-add-pill { padding: 4px 12px; font-size: 12px; }
.admin-row-actions {
  display: flex; gap: 6px; align-items: center;
}

/* ---- Settings modal (Tenant + Admin tabs in #editModal) ------------- */
.settings-shell { display: flex; flex-direction: column; gap: 14px; }
.settings-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.settings-tab {
  background: transparent;
  border: none;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted, #9ca3af);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.settings-tab:hover { color: var(--text); }
.settings-tab.is-active {
  color: var(--primary, #6366f1);
  border-bottom-color: var(--primary, #6366f1);
}
.settings-pane { display: block; }
.settings-pane[hidden] { display: none; }
.admin-toggle {
  height: 28px;
  padding: 0 10px;
  font-size: 11px; font-weight: 700;
  border-radius: 6px;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.admin-toggle.is-active {
  background: rgba(34, 197, 94, 0.12);
  border-color: #22c55e;
  color: #22c55e;
}
.admin-toggle:hover { color: var(--text); border-color: var(--text); }
.admin-toggle.is-active:hover { color: #22c55e; border-color: #22c55e; }
@media (max-width: 700px) {
  .admin-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* ---- Tenant switcher (in brand area) ------------------------------- */
.brand-block {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.tenant-switcher { position: relative; }
.tenant-switcher-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
  max-width: 320px;
}
.tenant-switcher-btn:hover { background: var(--bg-card-2); border-color: var(--primary, #6366f1); }
.tenant-switcher-btn .tenant-switcher-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px;
}
.tenant-switcher-mark { color: var(--muted, #9ca3af); font-size: 10px; }

.tenant-switcher-menu {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 280px;
  /* Opaque surface, not --bg-card (which is translucent in dark mode). */
  background: var(--surface, #171a23);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.18);
  padding: 6px;
  z-index: 50;
  max-height: 360px;
  overflow-y: auto;
}
.tenant-switcher-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
}
.tenant-switcher-item:hover { background: var(--bg-card-2); }
.tenant-switcher-item .tsi-meta { font-size: 11px; color: var(--muted, #9ca3af); }
.tenant-switcher-item .tsi-check { color: #22c55e; font-weight: 700; }
.tenant-switcher-sep {
  height: 1px;
  background: var(--border);
  margin: 6px 4px;
}
.tenant-switcher-new {
  color: var(--primary, #6366f1);
  font-weight: 600;
}

/* ---- Admin: Tenant settings card ------------------------------------ */
.admin-tenant-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  padding: 4px 0 8px;
}
.admin-tenant-grid > div { display: flex; flex-direction: column; gap: 2px; }
.at-label { font-size: 11px; font-weight: 700; color: var(--muted, #9ca3af); text-transform: uppercase; letter-spacing: 0.04em; }
.at-value { font-size: 14px; color: var(--text); font-weight: 600; word-break: break-word; }
.admin-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }

/* ---- Tenant modal forms --------------------------------------------- */
.tenant-edit-form, .tenant-delete-form {
  display: flex; flex-direction: column; gap: 14px;
}
.tenant-delete-form code {
  background: var(--bg-card-2);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}
.project-row {
  display: grid;
  /* 7 columns match .projects-list-head:
     [STATUS + Project name + chips] | PRODUCT | Responsible | Milestone | Progress | Actions */
  grid-template-columns: minmax(280px, 1.4fr) 140px 180px 200px 160px 80px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
  background: transparent;
  transition: background 100ms ease;
}
.project-row:last-child { border-bottom: none; }
.project-row:hover { background: var(--bg-card-2, rgba(255,255,255,0.03)); }
.project-row-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.project-row-name {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  min-width: 0;
}
/* Secondary chip row inside .project-row-main — holds Project code, Customer,
   Product. Lives below the title row so the row stays one logical line on
   desktop but the chips don't crowd the title on narrow screens. */
.project-row-chips {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  min-width: 0;
}
.project-row-chips .project-meta-chip { font-size: 10px; padding: 1px 6px; }
.project-row-title {
  font-weight: 700; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}
.project-row-cell {
  font-size: 12px;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.project-row-eng {
  display: flex; align-items: center; gap: 4px; flex-wrap: nowrap;
}
.project-row-ms {
  font-size: 11px; color: var(--muted);
}
.project-row-deli {
  display: flex; align-items: center; gap: 8px;
}
.project-row-deli-bar {
  flex: 1; height: 6px;
  background: var(--bg-card-2, rgba(255,255,255,0.06));
  border-radius: 3px;
  overflow: hidden;
}
.project-row-deli-fill {
  height: 100%;
  background: var(--color-primary, #4f46e5);
  border-radius: 3px;
  transition: width 200ms ease;
}
.project-row-deli-label {
  font-size: 11px; font-weight: 700;
  color: var(--text);
  min-width: 30px; text-align: right;
}
.project-row-actions {
  display: flex; justify-content: flex-end; gap: 6px;
}
@media (max-width: 900px) {
  .project-row {
    grid-template-columns: 1fr 80px;
    grid-template-areas:
      "main       actions"
      "product    product"
      "ms         deli"
      "eng        eng";
    row-gap: 6px;
  }
  .project-row-main     { grid-area: main; }
  .project-row-product  { grid-area: product; }
  .project-row-actions  { grid-area: actions; }
  .project-row-eng      { grid-area: eng; }
  .project-row-ms       { grid-area: ms; }
  .project-row-deli     { grid-area: deli; }
}

/* ---- Projects filter bar (D.3) ---------------------------------------- */
.proj-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 12px; margin-bottom: 14px;
  background: var(--bg-card, rgba(255,255,255,0.03));
  border: 1px solid var(--border, rgba(255,255,255,0.06));
  border-radius: 10px;
}
.proj-filter-input {
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
  background: var(--bg-card-2, rgba(255,255,255,0.04));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 6px;
  color: var(--text);
  outline: none;
}
.proj-filter-input:focus { border-color: var(--color-primary, #4f46e5); }
.proj-filter-input[type="search"] { min-width: 220px; flex: 1 1 220px; }
.proj-filter-input[data-pf-customer],
.proj-filter-input[data-pf-status] { min-width: 140px; }
.proj-filter-chips {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.proj-filter-chips .pf-chip {
  padding: 4px 10px; font-size: 11px;
  background: var(--bg-card-2, rgba(255,255,255,0.04));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.proj-filter-chips .pf-chip:hover { border-color: var(--color-primary, #4f46e5); }
.proj-filter-chips .pf-chip.active {
  background: var(--bg-primary-light, rgba(79,70,229,0.12));
  border-color: var(--color-primary, #4f46e5);
  color: var(--primary, #6366f1);
  font-weight: 700;
}

/* Engineer multi-select combobox used in the projects filter bar. */
.proj-filter-eng {
  position: relative;
  min-width: 220px;
  flex: 1 1 220px;
  max-width: 360px;
}
.proj-engineer-combo {
  position: relative;
}
.proj-engineer-input {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 3px 8px 3px 8px;
  background: var(--bg-input, rgba(255,255,255,0.04));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text);
}
.proj-engineer-input:hover { border-color: var(--color-primary, #4f46e5); }
.proj-engineer-combo.open .proj-engineer-input,
.proj-engineer-input:focus {
  border-color: var(--color-primary, #4f46e5);
  outline: none;
}
.proj-engineer-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
  align-items: center;
  min-width: 0;
}
.proj-engineer-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 2px 8px;
  background: var(--bg-primary-light, rgba(79,70,229,0.18));
  border: 1px solid rgba(99,102,241,0.4);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--primary, #6366f1);
  line-height: 1.4;
}
.proj-engineer-tag-handle {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-weight: 700;
  letter-spacing: 0.2px;
}
.proj-engineer-tag-name {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.7;
  margin-left: 2px;
}
.proj-engineer-tag-x {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  border-radius: 4px;
  opacity: 0.7;
}
.proj-engineer-tag-x:hover { opacity: 1; background: rgba(0,0,0,0.15); }
.proj-engineer-placeholder {
  color: var(--muted, rgba(255,255,255,0.5));
  font-style: italic;
  font-weight: 400;
}
.proj-engineer-caret {
  font-size: 10px;
  color: var(--muted);
  margin-left: 4px;
  transition: transform 0.15s;
}
.proj-engineer-combo.open .proj-engineer-caret { transform: rotate(180deg); }
.proj-engineer-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 280px;
  overflow-y: auto;
  background: var(--bg-card, #1f2937);
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  padding: 4px;
}
html.light-mode .proj-engineer-panel { background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.proj-engineer-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--text);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.proj-engineer-option:hover { background: var(--bg-card-2, rgba(255,255,255,0.06)); }
.proj-engineer-option.active {
  background: var(--bg-primary-light, rgba(79,70,229,0.18));
  color: var(--primary, #6366f1);
}
.proj-engineer-check {
  display: inline-block;
  width: 14px;
  text-align: center;
  font-weight: 700;
}
.proj-engineer-option-handle {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-weight: 700;
  font-size: 12px;
  min-width: 90px;
  color: var(--primary, #6366f1);
}
.proj-engineer-option.active .proj-engineer-option-handle { color: var(--primary, #6366f1); }
.proj-engineer-option-label {
  flex: 1;
  font-size: 12px;
  color: var(--muted, rgba(255,255,255,0.6));
}
.proj-engineer-empty {
  padding: 8px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.proj-filter-clear {
  height: 32px;
  padding: 0 12px;
  font-size: 11px;
  background: none;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
}
.proj-filter-clear:hover { color: var(--text); border-color: var(--text); }
.proj-filter-clear[hidden] { display: none; }

.project-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px;
}
.project-card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
.project-card-head .name {
  font-size: 16px; font-weight: 800; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.project-card-head .project-desc {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.project-meta {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0;
}
.project-meta-chip {
  display: inline-block;
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 4px;
  background: var(--bg-card-2, rgba(255,255,255,0.06));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  color: var(--text);
}
.project-card-actions { display: flex; gap: 6px; flex-shrink: 0; }
.project-status-badge {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 12px; margin-top: 6px;
}
.ps-initiating  { background: var(--bg-primary-light); color: var(--primary); }
.ps-planning    { background: var(--bg-purple-light);  color: var(--purple); }
.ps-executing   { background: var(--bg-primary-light); color: var(--primary); }
.ps-closing     { background: var(--bg-warning-light); color: var(--amber); }
.ps-warranty_ma { background: var(--bg-success-light); color: var(--green); }

.project-scope {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  font-size: 11px;
}
.project-scope .scope-label {
  display: block; color: var(--muted);
  text-transform: uppercase; font-weight: 700; letter-spacing: .04em;
  margin-bottom: 2px;
}
.project-scope p {
  margin: 0; font-size: 12px; color: var(--text); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

.project-deliverables .section-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px; text-transform: uppercase; font-weight: 700;
  color: var(--muted); letter-spacing: .04em;
  margin-bottom: 6px;
}
.project-deliverables .progress-track {
  height: 6px; background: var(--pill-bg);
  border-radius: 999px; overflow: hidden; margin-bottom: 8px;
}
.project-deliverables .progress-fill {
  height: 100%; background: var(--green);
  transition: width .35s ease;
}
.project-deliverables ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
  max-height: 112px; overflow-y: auto;
}
.project-deliverables li {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; cursor: pointer;
}
.project-deliverables input[type="checkbox"] {
  width: 14px; height: 14px;
  accent-color: var(--green);
  flex-shrink: 0;
}
.project-deliverables li.done .label { text-decoration: line-through; color: var(--muted); }
.project-deliverables .empty { color: var(--muted); font-style: italic; font-size: 11px; }

.project-milestones .section-label {
  display: block; font-size: 10px; text-transform: uppercase; font-weight: 700;
  color: var(--muted); letter-spacing: .04em;
  margin-bottom: 6px;
}
.project-milestones ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.project-milestones li {
  display: flex; align-items: center; gap: 8px; font-size: 11px;
}
.project-milestones .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary); flex-shrink: 0;
}
.project-milestones .ms-name {
  flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.project-milestones .ms-dates { color: var(--muted); flex-shrink: 0; font-variant-numeric: tabular-nums; }

.project-engineers {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding-top: 8px; border-top: 1px solid var(--border);
}
.engineer-chip {
  display: inline-block; font-size: 10px; font-weight: 700;
  background: var(--bg-primary-light); color: var(--primary);
  padding: 2px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .04em;
}
.project-empty {
  text-align: center; padding: 32px;
  color: var(--muted); font-size: 13px;
}
html.light-mode .engineer-chip { background: #eef2ff; color: var(--primary); }
.pmod-chips .engineer-chip { display: inline-flex; align-items: center; gap: 6px; }
.pmod-chips .engineer-chip button {
  background: transparent; border: 0; color: inherit; cursor: pointer;
  padding: 0 0 0 2px; font-size: 12px; line-height: 1; opacity: .65;
}
.pmod-chips .engineer-chip button:hover { opacity: 1; color: var(--red); }
.pmod-ms-row {
  display: grid; grid-template-columns: 1fr 130px 130px auto;
  gap: 6px; align-items: center;
}
@media (max-width: 640px) {
  .pmod-ms-row { grid-template-columns: 1fr; }
}

/* ---------- Auth pages ---------- */
.auth-body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 12px;
  overflow: hidden;
  background: #0f1117;  /* dark fallback if image is slow to load */
}
/* Background image lives on a fixed pseudo-element behind everything.
   The auth-card itself sits on top with its own opaque surface, so the
   image shows around the card but never bleeds through it. */
.auth-body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url('/img/loging-bgonly.png') center / cover no-repeat;
  z-index: -1;
}
/* Vignette overlay sits between the image and the card. When the image
   gets cropped (cover on a wide viewport vs. a 1920x1080 source), the
   edges fade to the same dark fallback color used on .auth-body, so the
   crop reads as intentional shading rather than a hard cut. */
.auth-body::after {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 40%, rgba(15, 17, 23, 0.55) 85%, #0f1117 100%),
    linear-gradient(180deg, rgba(15, 17, 23, 0.25) 0%, transparent 30%, transparent 70%, rgba(15, 17, 23, 0.35) 100%);
  z-index: -1;
  pointer-events: none;
}
.auth-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);  /* stronger shadow so card lifts off the image */
  padding: 32px;
  width: 100%;
  max-width: 380px;
  max-height: calc(100vh - 24px);  /* never overflow the viewport */
  overflow-y: auto;                /* internal scroll only if the
                                      viewport is too short to fit */
  border: 1px solid var(--border);
}
.auth-title { margin: 0 0 4px; font-size: 22px; }
.auth-sub   { margin: 0 0 20px; color: var(--muted); }
.auth-form  { display: flex; flex-direction: column; gap: 14px; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; }
.auth-form label span { font-size: 13px; color: var(--muted); font-weight: 500; }
.auth-form input { font: inherit; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elev); color: var(--text); }
.auth-form input:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: transparent; }
.btn-primary { background: var(--primary); color: #fff; border: 0; padding: 10px 14px; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; }
.btn-primary:hover  { background: var(--primary-hover); }
.btn-primary:disabled { background: #99b9ea; cursor: not-allowed; }
.btn-ghost-light {
  background: transparent; border: 1px solid var(--border); color: var(--text);
  padding: 7px 12px; border-radius: 8px; cursor: pointer; font: inherit;
}
.btn-ghost-light:hover { background: var(--surface-2); }
.auth-error { color: #b3271d; margin: 0; font-size: 13px; }
.auth-info  { color: var(--muted); margin: 0; font-size: 13px; }
.auth-foot  { margin: 20px 0 0; text-align: center; font-size: 13px; }
.auth-foot a + a { margin-left: 12px; }
.auth-foot-temp { color: #5c2c0c; }   /* brown — always the darker shade */
.auth-foot-temp:hover { color: #5c2c0c; text-decoration: underline; }
.auth-sub-warn { color: #8b4513; }

/* Auth card: tenant picker (multi-tenant users, after credential check).
   The native <select> defaults to a small OS-rendered control that looks
   broken next to the email/password inputs above. Match the input style and
   add a custom chevron so the OS arrow doesn't show through. */
.auth-picker { margin-top: 18px; }
.auth-picker-label { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.auth-picker select {
  font: inherit;
  font-size: 14px;
  padding: 10px 36px 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elev);
  color: var(--text);
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2399a3b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
}
.auth-picker select:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-color: transparent;
}

/* ---------- Weekly Summary (Notifications) pane ---------------------- */
.ws-config-form { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.ws-row { display: flex; flex-direction: column; gap: 6px; }
.ws-row > span { font-size: 13px; color: var(--muted); font-weight: 500; }
.ws-row > span small { font-weight: 400; }
.ws-row select, .ws-row input[type="checkbox"] {
  font: inherit; font-size: 14px;
}
.ws-row select {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-elev); color: var(--text); max-width: 280px;
}
.ws-row-toggle {
  flex-direction: row; align-items: center; gap: 10px;
  background: var(--bg-card-2, rgba(0,0,0,0.04));
  padding: 8px 10px; border-radius: 8px; width: fit-content;
}
.ws-row-toggle input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.ws-row-toggle span { color: var(--text); font-weight: 600; }

.ws-recipients-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 240px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-elev); padding: 6px;
}
.ws-recipient {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 6px; cursor: pointer;
}
.ws-recipient:hover { background: var(--bg-card-2, rgba(0,0,0,0.04)); }
.ws-recipient input[type="checkbox"] { width: 16px; height: 16px; }
.ws-recipient span:nth-child(2) { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ws-recipient-name { font-size: 13px; font-weight: 500; color: var(--text); }
.ws-recipient-email { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-recipient-role {
  font-size: 11px; color: var(--muted);
  padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px;
}

.ws-actions { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.form-msg.is-ok    { color: #166534; }
.form-msg.is-error { color: #b91c1c; }

/* I.1 — Daily LINE Group digest (in Settings → Notifications, second card) */
.admin-card + .admin-card { margin-top: 14px; }
.ws-row input[type="text"],
.ws-row input[type="password"],
.ws-row input[type="number"] {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-elev); color: var(--text);
  font: inherit; font-size: 14px; max-width: 420px;
}
.ws-row input[type="number"] { max-width: 96px; }
.line-day-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-elev); cursor: pointer; font-size: 12px; font-weight: 600;
  color: var(--muted);
}
.line-day-chip input[type="checkbox"] { width: 14px; height: 14px; margin: 0; }
.line-day-chip:has(input:checked) {
  background: var(--color-primary, #4f46e5); color: #fff; border-color: var(--color-primary, #4f46e5);
}
.line-preview {
  margin-top: 8px; padding: 10px 12px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word;
  color: var(--text); max-height: 240px; overflow-y: auto;
}

/* ---------- N.1 — Retrieve from chat (sync button + modal) ---------- */
.line-sync-btn {
  /* Slightly narrower than the standard .btn-secondary so it fits next to the
     Group ID input on the same row. White-space: nowrap so the label never
     wraps under any zoom level. */
  white-space: nowrap;
  padding: 6px 10px;
  font-size: 12.5px;
}
.line-pending-panel {
  /* Wider than the standard 720px modal — needs room for the long webhook
     URL + per-row buttons. Same as .modal-panel.wide.settings-open used by
     the Settings modal (880px). */
  max-width: 880px;
  width: min(880px, 96vw);
}
.line-pending-steps {
  margin: 0 0 14px 18px;
  padding: 0;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 13px; line-height: 1.5;
}
.line-pending-steps li code {
  font-size: 12px;
}
.line-pending-webhook-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 6px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
}
.line-pending-webhook {
  flex: 1; min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  white-space: nowrap; overflow-x: auto;
  color: var(--text);
}
.btn-copy {
  padding: 4px 10px; font-size: 11.5px;
}
.line-pending-actions {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.line-pending-meta {
  font-size: 11.5px;
}
.line-pending-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 280px; overflow-y: auto;
}
.line-pending-empty {
  font-size: 12px; margin: 0; padding: 14px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 6px;
}
.line-pending-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.line-pending-row-main { flex: 1; min-width: 0; }
.line-pending-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  word-break: break-all;
}
.line-pending-when {
  font-size: 11px; margin-top: 4px;
}
.line-pending-tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 600;
  background: var(--bg-card);
  border: 1px solid var(--border);
  margin-left: 8px;
  vertical-align: middle;
}
.line-pending-tag.is-join    { background: rgba(34, 197, 94, 0.15);  color: #16a34a; border-color: rgba(34, 197, 94, 0.3); }
.line-pending-tag.is-leave   { background: rgba(239, 68, 68, 0.15);  color: #dc2626; border-color: rgba(239, 68, 68, 0.3); }
.line-pending-tag.is-follow  { background: rgba(99, 102, 241, 0.15); color: #4f46e5; border-color: rgba(99, 102, 241, 0.3); }
.line-pending-current {
  font-size: 10.5px;
  color: var(--muted);
  margin-left: 6px;
  font-style: italic;
}
.line-pending-claim {
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 12px;
}

/* Light-mode override — the tag colors above use rgba so they work on
   both dark and light backgrounds, but we tighten the borders a touch
   for the light theme to keep contrast. */
html.light-mode .line-pending-tag.is-join    { color: #15803d; }
html.light-mode .line-pending-tag.is-leave   { color: #b91c1c; }
html.light-mode .line-pending-tag.is-follow  { color: #4338ca; }

/* Pulse animation on the Group ID input after a successful claim so the
   admin sees the field got filled even if they were looking elsewhere. */
@keyframes lineFieldPulse {
  0%   { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.5); }
  60%  { box-shadow: 0 0 0 8px rgba(79, 70, 229, 0); }
  100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
}
.line-field-pulse {
  animation: lineFieldPulse 0.7s ease-out 1;
}

/* ---------- Engineer cards ---------- */
.engineer-card { padding: 18px; }
.engineer-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 12px 0 0;
}
.engineer-stats > div {
  display: flex; flex-direction: column; gap: 2px;
}
.engineer-stats dt {
  font-size: 11px; font-weight: 600;
  color: var(--muted); letter-spacing: .04em;
  text-transform: uppercase;
}
.engineer-stats dd {
  margin: 0;
  font-size: 18px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.engineer-stats dd.green { color: var(--green); }
.engineer-stats dd.red   { color: var(--red); }
.engineer-stats dd.amber { color: var(--amber); }
/* ---------- Deadlines page (Option 2). Colours come from existing tokens so
   light and dark both work. Compact rows, 10-12px radii, fine borders. ---------- */
#view-deadlines .dl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
#view-deadlines .dl-head h2 { margin: 0 0 4px; font-size: 24px; letter-spacing: -.02em; }
#view-deadlines .dl-head > div:first-child { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 4px; min-width: 0; }
#view-deadlines .dl-head h2 { margin: 0; }
#view-deadlines .dl-sub { margin: 0; color: var(--muted); font-size: 14px; }
#view-deadlines .dl-scope { flex-basis: 100%; margin: 0; font-size: 12px; }
#view-deadlines .dl-updated { font-size: 12px; color: var(--muted); }

.dl-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.dl-sum { all: unset; box-sizing: border-box; cursor: pointer; padding: 16px 20px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--border); }
.dl-sum:last-child { border-right: 0; }
.dl-sum:focus-visible, .dl-tab:focus-visible, .dl-view-btn:focus-visible, .dl-day:focus-visible, .dl-attn-open:focus-visible, .dl-review-btn:focus-visible, .dl-clear:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.dl-sum-label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.dl-sum-num { font-size: 28px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.1; }
.dl-sum-sub { font-size: 12px; color: var(--muted); }
.dl-sum-red .dl-sum-num { color: var(--red); }
.dl-sum-amber .dl-sum-num { color: var(--amber); }

.dl-main { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.dl-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dl-table-card, .dl-week-card, .dl-attn-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); min-width: 0; }
.dl-table-card { overflow: hidden; }
.dl-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.dl-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.dl-tab { all: unset; box-sizing: border-box; cursor: pointer; padding: 12px 10px; font-size: 13px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.dl-tab[aria-selected="true"] { color: var(--primary); border-bottom-color: var(--primary); }
.dl-count { display: inline-block; min-width: 20px; padding: 1px 6px; margin-left: 4px; border-radius: 999px; background: var(--pill-bg); color: var(--muted); font-size: 11px; text-align: center; }
.dl-count-red { background: rgba(239,68,68,.15); color: var(--red); }
.dl-viewswitch { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.dl-view-btn { all: unset; box-sizing: border-box; cursor: pointer; padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--muted); }
.dl-view-btn[aria-pressed="true"] { background: var(--primary); color: #fff; }
.dl-filter-note { display: flex; align-items: center; gap: 10px; padding: 8px 14px; font-size: 12px; background: var(--surface-2); border-bottom: 1px solid var(--border); color: var(--text); }
.dl-clear { all: unset; box-sizing: border-box; cursor: pointer; color: var(--primary); font-weight: 600; text-decoration: underline; }
.dl-list-host { position: relative; overflow-x: auto; }
.dl-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dl-table thead th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 12px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.dl-table thead th:first-child { padding-left: 20px; }
.dl-group { --dl-marker: var(--muted); --dl-group-ink: var(--text); --dl-group-bg: var(--surface-2); }
.dl-group-red { --dl-marker: var(--red); --dl-group-ink: color-mix(in srgb, var(--red) 65%, var(--text)); --dl-group-bg: rgba(239,68,68,.08); }
.dl-group-amber { --dl-marker: var(--amber); --dl-group-ink: color-mix(in srgb, var(--amber) 65%, var(--text)); --dl-group-bg: rgba(245,158,11,.08); }
.dl-group-indigo { --dl-marker: var(--blue); --dl-group-ink: color-mix(in srgb, var(--blue) 65%, var(--text)); --dl-group-bg: rgba(59,130,246,.08); }
.dl-group-row th { padding: 8px 8px 0; text-align: left; font-size: 14px; font-weight: 600; border: 0; }
.dl-group:first-of-type .dl-group-row th { padding-top: 0; }
.dl-group-band { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 7px 12px; border-radius: 6px; color: var(--dl-group-ink); background: var(--dl-group-bg); }
.dl-group-icon { width: 20px; height: 20px; flex: 0 0 20px; }
.dl-group-title { color: inherit; }
.dl-group-count { font-weight: inherit; color: inherit; white-space: nowrap; }
.dl-group-sub { margin-left: auto; font-weight: 400; color: var(--muted); font-size: 11px; }
.dl-row td { padding: 4px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.dl-row:last-child td { border-bottom: 0; }
.dl-row:hover td { background: var(--surface-2); }
.dl-row td.dl-task { padding-left: 20px; }
.dl-task { min-width: 220px; max-width: 360px; }
.dl-task-title { display: flex; align-items: center; gap: 20px; color: var(--text); font-size: 14px; font-weight: 500; line-height: 1.4; }
.dl-task-marker { width: 4px; height: 22px; flex: 0 0 4px; border-radius: 2px; background: var(--dl-marker); }
.dl-task-name { min-width: 0; overflow-wrap: anywhere; }
.dl-row .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 28px; min-height: 28px; padding: 4px; line-height: 1; }
@media (max-width: 760px) {
  .dl-row td { padding-block: 6px; }
  .dl-row .icon-btn { min-width: 40px; min-height: 40px; }
  .dl-group-sub { display: none; }
}
.dl-owner { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--text); }
.dl-avatar { width: 24px; height: 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; background: rgba(79,70,229,.14); color: var(--primary); }
.dl-client { color: var(--muted); white-space: nowrap; }
.dl-red { color: var(--red); font-weight: 600; white-space: nowrap; }
.dl-edit { width: 44px; text-align: right; }
.dl-empty { padding: 28px 16px; text-align: center; color: var(--muted); }

.dl-week-card, .dl-attn-card { padding: 14px; }
.dl-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.dl-side-head h3 { margin: 0; font-size: 15px; font-weight: 700; }
.dl-attn-count { font-size: 12px; color: var(--muted); }
.dl-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.dl-day { all: unset; box-sizing: border-box; cursor: pointer; text-align: center; padding: 8px 2px; border: 1px solid var(--border); border-radius: 8px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dl-day:hover { background: var(--surface-2); }
.dl-day-name { font-size: 11px; font-weight: 600; color: var(--muted); }
.dl-day-date { font-size: 10px; color: var(--muted); white-space: nowrap; }
.dl-day-count { font-size: 15px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.dl-day.is-today { border-color: var(--primary); }
.dl-day.is-selected { background: var(--primary); border-color: var(--primary); }
.dl-day.is-selected .dl-day-name, .dl-day.is-selected .dl-day-date, .dl-day.is-selected .dl-day-count { color: #fff; }
.dl-week-hint { margin: 10px 0 0; font-size: 12px; text-align: center; }
.dl-week-empty { margin-top: 8px; font-size: 12px; text-align: center; color: var(--muted); }
.dl-attn-item { display: flex; align-items: center; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.dl-attn-item:last-of-type { border-bottom: 0; }
.dl-attn-open { all: unset; box-sizing: border-box; cursor: pointer; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; border-left: 3px solid var(--red); padding-left: 10px; }
.dl-attn-title { font-size: 13px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.dl-attn-meta { font-size: 12px; color: var(--muted); }
.dl-attn-more { font-size: 12px; margin: 8px 0 0; }
.dl-calm { text-align: center; padding: 16px 8px; color: var(--muted); }
.dl-calm span { display: inline-block; width: 34px; height: 34px; line-height: 34px; border-radius: 999px; background: rgba(16,185,129,.15); color: #10b981; font-weight: 700; }
.dl-calm p { margin: 8px 0 0; font-size: 13px; }
.dl-review-btn { all: unset; box-sizing: border-box; cursor: pointer; margin-top: 10px; color: var(--primary); font-size: 13px; font-weight: 600; }
.dl-review-btn:hover { text-decoration: underline; }

@media (max-width: 1440px) { .dl-main { grid-template-columns: minmax(0, 1fr) 340px; } }
@media (max-width: 1100px) { .dl-main { grid-template-columns: minmax(0, 1fr); } .dl-side { flex-direction: row; } .dl-side > * { flex: 1 1 0; min-width: 0; } }
@media (max-width: 760px) { .dl-summary { grid-template-columns: minmax(0, 1fr); } .dl-sum { border-right: 0; border-bottom: 1px solid var(--border); } .dl-sum:last-child { border-bottom: 0; } .dl-side { flex-direction: column; } .dl-week { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* .deadlines-grid sets display, which would override the UA [hidden] rule. */
#view-deadlines [hidden] { display: none !important; }
.deadlines-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  align-items: start;
}
.deadline-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  min-height: 240px;
}
.deadline-col-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.deadline-col-title {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
}
.deadline-col-title .ct-icon { margin-right: 0; }
.deadline-col-title.red    { color: var(--red); }
.deadline-col-title.amber  { color: var(--amber); }
.deadline-col-title.blue   { color: var(--blue); }
.deadline-count {
  background: var(--pill-bg);
  color: var(--text);
  font-size: 11px; font-weight: 700;
  padding: 2px 9px; border-radius: 999px;
  min-width: 22px; text-align: center;
}
.deadline-count.red   { background: rgba(239, 68, 68, .15); color: var(--red); }
.deadline-count.amber { background: rgba(245, 158, 11, .15); color: var(--amber); }
.deadline-count.blue  { background: rgba(59, 130, 246, .15); color: var(--blue); }
.deadline-list {
  display: flex; flex-direction: column; gap: 10px;
}
.deadline-item {
  /* Matches the engineer-card outer surface (`.card` → `var(--surface)`)
     so the inner boxes inside a deadline column look the same color as
     the engineer boxes on the Engineers tab. Previously this used
     `var(--surface-2)`, which created a "card-within-a-card" depth that
     didn't match the flat look the Engineers tab uses. The border
     (`var(--border)`) is enough to separate items from the column. */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  display: grid;
  gap: 6px;
}
.deadline-item .title {
  font-weight: 600; font-size: 13px; color: var(--text);
}
.deadline-item .meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
  font-size: 12px; color: var(--muted);
}
.deadline-item .meta .pill { font-size: 11px; }
.deadline-item.overdue { border-color: rgba(239, 68, 68, .55); }
.deadline-item.overdue .title { color: var(--red); }
.deadline-item.due-today { border-color: rgba(245, 158, 11, .55); }
.deadline-item .row-actions { justify-content: flex-end; margin-top: 2px; }
.deadline-empty {
  color: var(--muted); font-size: 13px;
  display: flex; align-items: center; gap: 6px;
  padding: 18px 4px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .kpi-row  { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .row.three{ grid-template-columns: 1fr; }
  .row.two  { grid-template-columns: 1fr; }
  .deadlines-grid { grid-template-columns: 1fr; }
  .topbar { gap: 12px; }
  .user-name { display: none; }
}
@media (max-width: 640px) {
  .topbar { padding: 12px; }
  .main { padding: 0 12px; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .create-form .row, .create-form .row.three { grid-template-columns: 1fr; }
}

/* =============================================================
   I.2 — Calendar / Timeline view styles
   ============================================================= */

/* ---------- Header + view toggle ---------- */
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
  flex-wrap: wrap;
}
.cal-head h2 { margin: 0; font-size: 18px; font-weight: 600; }
.cal-head-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cal-filter-summary {
  font-size: 12px; color: var(--muted);
  padding: 6px 10px;
  background: var(--surface-2);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.cal-filter-summary strong { color: var(--text); font-weight: 600; }
.cal-filter-summary .cal-fs-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; margin-right: 6px; }
.cal-filter-summary .cal-fs-sep { margin: 0 8px; color: var(--border); }

.cal-view-toggle {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.cal-view-btn {
  padding: 6px 14px;
  background: transparent;
  border: 0;
  font-size: 12px; font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.cal-view-btn:hover { background: var(--surface); color: var(--text); }
.cal-view-btn.is-active {
  background: var(--primary);
  color: #fff;
}

/* ---------- FullCalendar host ---------- */
.cal-host {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
}
.cal-host.hidden { display: none; }

.cal-load-err {
  padding: 24px 16px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}
.cal-load-err-title {
  margin: 0 0 6px;
  font-weight: 700;
  color: var(--danger, #ef4444);
}
.cal-load-err-detail {
  margin: 0 0 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--muted);
  word-break: break-word;
}
.cal-load-err-hint {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}
.cal-load-err-hint code {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 4px;
  font-size: 11px;
}

/* Override FullCalendar's default white-on-white with PM-OD tokens.
   FC's CSS names are stable in v6 so these selectors are reliable. */
.cal-host .fc {
  --fc-border-color: var(--border);
  --fc-page-bg-color: transparent;
  --fc-neutral-bg-color: var(--surface-2);
  --fc-list-event-hover-bg-color: var(--surface-2);
  --fc-today-bg-color: rgba(79, 70, 229, .08);
  --fc-now-indicator-color: var(--primary);
  --fc-button-bg-color: var(--surface-2);
  --fc-button-border-color: var(--border);
  --fc-button-text-color: var(--text);
  --fc-button-hover-bg-color: var(--surface);
  --fc-button-hover-border-color: var(--border);
  --fc-button-active-bg-color: var(--primary);
  --fc-button-active-border-color: var(--primary);
  --fc-event-bg-color: var(--surface-2);
  --fc-event-border-color: var(--border);
  --fc-event-text-color: var(--text);
  font-family: inherit;
  color: var(--text);
}
.cal-host .fc-toolbar-title { font-size: 16px; font-weight: 600; color: var(--text); }
.cal-host .fc-col-header-cell-cushion,
.cal-host .fc-daygrid-day-number {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 12px;
}
.cal-host .fc-day-today .fc-daygrid-day-number { color: var(--primary); font-weight: 700; }
.cal-host .fc-day-other .fc-daygrid-day-number { opacity: .35; }

/* Status-tinted event backgrounds (tagged by our eventDidMount hook).
   Use solid background + 1px border in dark mode (transparent overlays on
   the dark --surface-2 grid cell are nearly invisible), and the lighter
   pastel fills in light mode.

   IMPORTANT: FullCalendar v6 wraps our eventContent HTML in an <a class=
   "fc-event-main">. Default FC styles set a per-event color on that
   anchor that IGNORES the color we set on .fc-event. So we have to also
   target .fc-event-main (and the title span inside it) to make the text
   actually readable in light mode — otherwise users see white-ish text
   on pastel backgrounds. */
.cal-host .fc-event { cursor: pointer; padding: 2px 6px; border: 1px solid transparent; }
.cal-host .fc-event.fc-evt-pending,
.cal-host .fc-event.fc-evt-pending .fc-event-main     { background: #422006; color: #fbbf24; border-color: #78350f; }
.cal-host .fc-event.fc-evt-in-progress,
.cal-host .fc-event.fc-evt-in-progress .fc-event-main,
.cal-host .fc-event.fc-evt-inprogress,
.cal-host .fc-event.fc-evt-inprogress .fc-event-main  { background: #172554; color: #60a5fa; border-color: #1e3a8a; }
.cal-host .fc-event.fc-evt-done,
.cal-host .fc-event.fc-evt-done .fc-event-main        { background: #052e1a; color: #34d399; opacity: .7; text-decoration: line-through; border-color: #064e3b; }
.cal-host .fc-event.fc-evt-blocked,
.cal-host .fc-event.fc-evt-blocked .fc-event-main     { background: #450a0a; color: #f87171; border-color: #7f1d1d; }
.cal-host .fc-event.fc-evt-overdue,
.cal-host .fc-event.fc-evt-overdue .fc-event-main     { background: #450a0a; color: #fca5a5; font-weight: 600; border-color: #ef4444; }

html.light-mode .cal-host .fc-event.fc-evt-pending,
html.light-mode .cal-host .fc-event.fc-evt-pending .fc-event-main    { background: #fef3c7; color: #78350f; border-color: #d97706; }
html.light-mode .cal-host .fc-event.fc-evt-in-progress,
html.light-mode .cal-host .fc-event.fc-evt-in-progress .fc-event-main,
html.light-mode .cal-host .fc-event.fc-evt-inprogress,
html.light-mode .cal-host .fc-event.fc-evt-inprogress .fc-event-main { background: #dbeafe; color: #1e3a8a; border-color: #2563eb; }
html.light-mode .cal-host .fc-event.fc-evt-done,
html.light-mode .cal-host .fc-event.fc-evt-done .fc-event-main       { background: #d1fae5; color: #064e3b; opacity: .75; text-decoration: line-through; border-color: #059669; }
html.light-mode .cal-host .fc-event.fc-evt-blocked,
html.light-mode .cal-host .fc-event.fc-evt-blocked .fc-event-main    { background: #fee2e2; color: #7f1d1d; border-color: #dc2626; }
html.light-mode .cal-host .fc-event.fc-evt-overdue,
html.light-mode .cal-host .fc-event.fc-evt-overdue .fc-event-main    { background: #fee2e2; color: #7f1d1d; font-weight: 600; border-color: #dc2626; box-shadow: 0 0 0 1px #fca5a5; }

/* Custom event content (engineer prefix + title) — emitted by the
   eventContent hook in JS. Render the engineer name as a small pill so it
   reads as an identifier, not part of the task title. */
.cal-host .fc-event .fc-evt-eng {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  text-transform: lowercase; letter-spacing: .02em;
  padding: 0 4px;
  border-radius: 3px;
  background: rgba(0, 0, 0, .35);
  color: inherit;
  margin-right: 4px;
  max-width: 60px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  vertical-align: middle;
}
html.light-mode .cal-host .fc-event .fc-evt-eng {
  background: rgba(0, 0, 0, .14);
  color: inherit;
}
.cal-host .fc-event .fc-evt-title {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
}

/* List-view styling — FullCalendar's list view has its own row layout;
   give the day-strip and list-event rows some breathing room and inherit
   our status-tinted event styles. The day-cushion is a horizontal strip;
   bump font size and weight so the date number (rendered by FC inside
   listDayFormat) actually reads as a date and not as small grey noise. */
.cal-host .fc-list-day-cushion { background: var(--surface-2); color: var(--text); padding: 10px 14px; font-weight: 600; font-size: 14px; }
.cal-host .fc-list-day-cushion .fc-list-day-text { color: var(--text); font-weight: 700; }
.cal-host .fc-list-event { cursor: pointer; }
.cal-host .fc-list-event:hover td { background: var(--surface-2); }
.cal-host .fc-list-event-time { color: var(--muted); font-variant-numeric: tabular-nums; padding-right: 12px; }

/* ---------- Vanilla timeline (free Gantt) ---------- */
/* I.2 follow-up #5 (Timeline full-height + horizontal scroll). The Timeline
   sub-host becomes a vertical-flex column so the Gantt fills the remaining
   viewport (parent #view-calendar is a flex column with min-height: 100vh
   - 120px). Horizontally, .cal-host-tl itself is the scroll container —
   but the actual grid inside is wider than the host so the day cells keep
   a fixed width regardless of zoom. flex: 1 + min-height: 0 lets the
   inner #tlGridHost shrink-to-fit when the viewport is short. */
.cal-host-tl {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.tl-toolbar {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
  font-size: 12px; color: var(--muted);
}
.tl-toolbar-label { font-weight: 600; }
.tl-toolbar .cal-view-toggle { margin-left: 0; }
.tl-toolbar .cal-view-btn { padding: 4px 10px; font-size: 11px; }
/* I.2 follow-up #5 (Timeline full-height + horizontal scroll):
   - `flex: 1 + min-height: 0` so #tlGridHost fills the remaining vertical
     space inside .cal-host-tl and shrinks-to-fit when viewport is short.
   - `overflow-x: auto` so a zoomed-out (60-day) timeline scrolls
     horizontally instead of squashing day cells to unreadable widths.
   - The grid inside uses FIXED-WIDTH day cells (--tl-day-w, default 36px)
     so every day is the same width regardless of zoom; bar widths are
     computed as percentages of the data column (which is
     `calc(var(--tl-days) * var(--tl-day-w))`), so existing inline-style
     `left: %; width: %;` keeps working unchanged. */
#tlGridHost {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.tl-grid {
  display: grid;
  grid-template-columns: 130px calc(var(--tl-days, 14) * var(--tl-day-w, 36px));
  /* --tl-day-w is a FALLBACK only. JS reads host.clientWidth at render time
     and emits `style="--tl-day-w: <Npx>"` so each zoom fills the available
     horizontal space (Week on 1130px viewport gets ~142px/day; 2 Weeks
     ~71px/day; Month ~36px/day; Quarter hits the 28px floor and the parent
     #tlGridHost scrolls horizontally). The 36px fallback is only used if
     renderCalTimeline runs before the host has been laid out (clientWidth=0)
     — in that case the user sees a 36px-wide grid with a horizontal scroll
     bar, which is the historical default and is harmless. */
  --tl-day-w: 36px;
  /* Hard min-width matches the dynamic day-w formula so the grid's intrinsic
     width tracks what JS computed — when day-w is large (Week), the grid
     fits the host and there's no horizontal scroll; when day-w is at the
     floor (Quarter), the grid is wider than the host and #tlGridHost's
     `overflow: auto` kicks in. */
  min-width: calc(130px + var(--tl-days, 14) * var(--tl-day-w, 36px));
  height: 100%;
  /* I.2 follow-up polish: grid-auto-rows was `minmax(48px, 1fr)` which let
     a row stretch to fill empty vertical space on Week / 2-Weeks / Month
     (where there are only 8 engineers and 700px of viewport). That looked
     gappy. Cap the upper bound at 96px so each row reads as a comfortable
     bar-height cell, and any extra vertical space stays at the bottom of
     the grid (the Gantt remains top-aligned within its viewport). */
  grid-auto-rows: minmax(48px, 96px);
}
.tl-axis.tl-day-axis {
  grid-column: 2 / 3;
  grid-row: 1;
  height: auto;             /* override the 1fr default so the axis doesn't balloon */
  display: grid;
  grid-template-columns: repeat(var(--tl-days, 14), var(--tl-day-w, 36px));
  color: var(--muted);
  font-size: 10px;
  text-align: center;
  padding: 8px 0 6px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  position: sticky;
  top: 0;
  background: var(--bg-elev);
  z-index: 2;
  /* The axis is sticky to the top so it stays visible while the user
     scrolls the engineer rows vertically inside the Gantt. (Horizontally
     it moves with the grid because the grid itself is the scroll
     container.) */
}
.tl-axis.tl-day-axis span { padding: 2px 2px 4px; line-height: 1.1; }
.tl-axis.tl-day-axis span.is-today { color: var(--primary); }
.tl-axis.tl-day-axis span.is-weekend { opacity: .55; }
.tl-axis.tl-day-axis span .tl-day-month {
  display: block;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--muted-2, var(--muted));
  opacity: .8;
  margin-bottom: 1px;
}
.tl-axis.tl-day-axis span.is-month-start .tl-day-month {
  color: var(--primary);
  opacity: 1;
  font-weight: 700;
}

/* Each engineer row is its own grid item spanning the full width.
   Inside, .tl-eng and .tl-track are placed by an internal 2-col grid.
   (display: contents + auto-flow in the parent grid was unreliable across
    browsers — gave the "all tasks are overlay" bug.) */
.tl-grid .tl-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  grid-column: 1 / -1;
  min-height: 64px;
}
.tl-grid .tl-eng {
  grid-column: 1;
  padding: 12px 10px 12px 14px;       /* tighter right edge so the engineer
                                          name sits closer to the day-axis;
                                          visual breathing room from the
                                          window edge stays at the left. */
  font-size: 12px; font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  background: var(--surface-2);
  display: flex; align-items: center;
  gap: 8px;
  overflow: hidden;
}
.tl-grid .tl-eng .tl-eng-dot {
  /* Status dot on the engineer row — green if all their visible tasks are
     completed, amber if anything is pending/in-progress, red if any are
     overdue. Updated by JS at the end of renderCalTimeline. */
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}
.tl-grid .tl-eng .tl-eng-dot.is-green  { background: var(--green);  }
.tl-grid .tl-eng .tl-eng-dot.is-amber  { background: var(--amber);  }
.tl-grid .tl-eng .tl-eng-dot.is-red    { background: var(--red);    }
.tl-grid .tl-eng .tl-eng-name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tl-grid .tl-track {
  grid-column: 2;
  position: relative;
  min-height: 64px;
  border-bottom: 1px solid var(--border);
  background:
    repeating-linear-gradient(to right,
      transparent 0,
      transparent calc(100% / var(--tl-days, 14) - 1px),
      rgba(255,255,255,.04) calc(100% / var(--tl-days, 14) - 1px),
      rgba(255,255,255,.04) calc(100% / var(--tl-days, 14)));
}
html.light-mode .tl-grid .tl-track {
  background:
    repeating-linear-gradient(to right,
      transparent 0,
      transparent calc(100% / var(--tl-days, 14) - 1px),
      rgba(0,0,0,.04) calc(100% / var(--tl-days, 14) - 1px),
      rgba(0,0,0,.04) calc(100% / var(--tl-days, 14)));
}
/* When multiple tasks fall in the same engineer track, stack them on
   separate horizontal "lanes" so they don't visually overlap. The bar
   height is 24px and lanes are spaced 32px apart — leaves an 8px gap
   between bars so they read as discrete rows. The `--lane-i` custom
   property is set inline by JS (see renderCalTimeline) so an arbitrary
   number of lanes (up to MAX_LANES_TOTAL = 16) can be positioned without
   adding more data-attribute rules. */
.tl-grid .tl-track .tl-lane {
  position: absolute; left: 0; right: 0;
  height: 24px;
  top: calc(14px + var(--lane-i, 0) * 32px);
}
/* +more button. A real <button> (not a ::after pseudo) so it's clickable.
   Replaces the earlier non-interactive badge. Hidden when the row is
   already expanded and no longer overflowing — see renderCalTimeline for
   the conditions under which this is rendered. */
/* I.2 follow-up polish: the +more pill was so small/muted it disappeared on
   dense rows (Week zoom with 8 engineers). Bump it to a primary-colored,
   solid pill so users actually notice it. Keep the row-relative position
   so it never collides with bars in the same lane. */
.tl-grid .tl-track .tl-more-btn {
  position: absolute; right: 8px; bottom: 6px;
  font-size: 11px; font-weight: 700;
  color: #fff;
  background: var(--primary);
  border: 1px solid var(--primary);
  padding: 3px 9px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
  z-index: 3;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}
.tl-grid .tl-track .tl-more-btn:hover {
  filter: brightness(1.1);
  border-color: var(--primary);
}
.tl-grid .tl-track .tl-more-btn-still {
  /* "Still hidden after expand" variant — use the muted secondary tone so
     the user reads it as a status badge, not a primary action. */
  background: var(--muted);
  border-color: var(--muted);
  color: #fff;
  opacity: .9;
}
html.light-mode .tl-grid .tl-track .tl-more-btn { background: var(--primary); color: #fff; }
html.light-mode .tl-grid .tl-track .tl-more-btn:hover { color: #fff; }
/* Track grows with the number of populated lanes so overflow doesn't crop
   bars (set via inline style from JS — see renderCalTimeline). The default
   4-lane collapse caps min-height; expanded rows grow to fit the real
   lane count. */
.tl-grid .tl-track[data-lane-count] {
  min-height: calc(80px + max(0, var(--lane-count, 1) - 2) * 32px);
}
.tl-grid .tl-track.tl-track-expanded[data-lane-count] {
  /* When the user has expanded the row, give the track enough room for
     every bar to breathe — 32px per lane past the first two baseline lanes.
     The grid auto-rows stays at minmax(48px, 96px), so this works because
     .tl-row is a sub-grid container that grows independently of the outer
     row-track sizing. */
  min-height: calc(46px + var(--lane-count, 1) * 32px);
}
/* When ANY row is expanded, lift the outer row-cap so the parent .tl-row
   container can grow past 96px to host the expanded track. Triggered by
   a body-level class that JS toggles based on whether window.__tlExpandedOwners
   has any members at render time. */
.tl-grid.has-expanded-row { grid-auto-rows: minmax(48px, 240px); }
.tl-grid .tl-row { min-height: 64px; }   /* matches the default 2-lane track */
.tl-bar {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  height: 24px;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px; font-weight: 500;
  overflow: hidden;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  border: 1px solid transparent;
  display: flex; align-items: center; gap: 6px;
}
/* Engineer tag (prefix on each bar). Shown as a darker pill so the
   eye reads it as an identifier, not part of the title. */
.tl-bar .tl-bar-eng {
  font-size: 10px; font-weight: 700;
  text-transform: lowercase;
  letter-spacing: .02em;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, .25);
  color: inherit;
  white-space: nowrap; flex-shrink: 0;
  max-width: 80px; overflow: hidden; text-overflow: ellipsis;
}
.tl-bar .tl-bar-title {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.tl-bar:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.tl-bar.tl-pending      { background: rgba(245, 158, 11, .22); color: #f59e0b; border-color: rgba(245, 158, 11, .5); }
.tl-bar.tl-in-progress  { background: rgba(59, 130, 246, .22); color: #3b82f6; border-color: rgba(59, 130, 246, .5); }
.tl-bar.tl-inprogress   { background: rgba(59, 130, 246, .22); color: #3b82f6; border-color: rgba(59, 130, 246, .5); }
.tl-bar.tl-done         { background: rgba(16, 185, 129, .15); color: #10b981; border-color: rgba(16, 185, 129, .5); opacity: .7; }
.tl-bar.tl-blocked      { background: rgba(239, 68, 68, .22); color: #ef4444; border-color: rgba(239, 68, 68, .5); }
.tl-bar.tl-overdue      { background: rgba(239, 68, 68, .30); color: #ef4444; border-color: rgba(239, 68, 68, .6); font-weight: 600; }
.tl-bar.is-overdue { box-shadow: 0 0 0 1px rgba(239,68,68,.4); }
.tl-bar.is-today   { box-shadow: 0 0 0 2px var(--primary); }

html.light-mode .tl-bar.tl-pending      { background: #fef3c7; color: #92400e; border-color: #fde68a; }
html.light-mode .tl-bar.tl-in-progress,
html.light-mode .tl-bar.tl-inprogress   { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
html.light-mode .tl-bar.tl-done         { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
html.light-mode .tl-bar.tl-blocked      { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
html.light-mode .tl-bar.tl-overdue      { background: #fee2e2; color: #991b1b; border-color: #fca5a5; font-weight: 600; }
/* Engineer pill on bars — dark backdrop is fine on dark mode, but pastels
   need a softer tint so the text inside still reads. */
html.light-mode .tl-bar .tl-bar-eng {
  background: rgba(0, 0, 0, .08);
  color: inherit;
}

/* I.2 follow-up polish: bars previously sat BEHIND the today line (z-index 2
   vs bars' default auto), so on busy days the line sliced through a bar
   and made the deadline hard to read. Flip the order — bars win on
   overlap, line is a non-interactive guide behind them. The "today"
   label gets a solid pill background so it stays legible even when bars
   pass through the same column. */
.tl-today-line {
  position: absolute; top: 0; bottom: 0;
  width: 2px;
  background: var(--primary);
  z-index: 1;
  pointer-events: none;
}
.tl-today-line::before {
  content: 'today';
  position: absolute; top: 2px; left: 4px;
  font-size: 9px; font-weight: 800;
  color: #fff;
  background: var(--primary);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 6px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  z-index: 4;
  pointer-events: none;
}
/* Today column itself gets a subtle tint so the user can scan vertically
   and find "where am I on the timeline" without reading the label. */
.tl-today-line::after {
  content: '';
  position: absolute; top: 0; bottom: 0;
  left: -1px; right: -1px;
  background: linear-gradient(
    to right,
    rgba(99, 102, 241, 0)   0%,
    rgba(99, 102, 241, .08) 50%,
    rgba(99, 102, 241, 0)   100%
  );
  pointer-events: none;
}
/* Bars always sit ABOVE the today line so deadlines don't get sliced by
   it. Pointer events stay on the bar (z-index doesn't disable clicks). */
.tl-bar { z-index: 3; }
.tl-empty {
  position: absolute; top: 12px; left: 12px;
  font-size: 11px; color: var(--muted); font-style: italic;
}
.cal-empty {
  padding: 32px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* ---------- Side drawer (4C) ---------- */
.cal-drawer.hidden { display: none; }
.cal-drawer {
  position: fixed; inset: 0;
  z-index: 1000;
}
.cal-drawer-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  cursor: pointer;
}
.cal-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(420px, 90vw);
  background: var(--bg-elev);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  animation: calDrawerSlide .18s ease;
}
@keyframes calDrawerSlide {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.cal-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.cal-drawer-head h3 {
  margin: 0; font-size: 14px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: calc(100% - 40px);
}
.cal-drawer-body {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
}
.cal-drawer-field {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 13px; color: var(--text);
}
.cal-drawer-field.cal-drawer-block {
  background: var(--surface-2);
  border-radius: 8px;
  padding: 10px 12px;
}
.cal-drawer-label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.cal-drawer-foot {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  display: flex; gap: 8px; justify-content: flex-end;
}
.btn-primary {
  background: var(--primary); color: #fff;
  border: 0; border-radius: 8px;
  padding: 8px 16px; font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.btn-primary:hover { background: var(--primary-hover); }
.btn-ghost {
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 16px; font-size: 13px; font-weight: 500;
  cursor: pointer;
}
.btn-ghost:hover { background: var(--surface); }

/* ---------- T-list (todo tab) ---------- */
.todo-toolbar {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.todo-toolbar h2 { margin: 0; font-size: 20px; }
.todo-toolbar .spacer { flex: 1; }
.todo-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 10px; font-size: 12px; cursor: pointer;
}
.todo-toggle.on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.todo-toggle .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted);
}
.todo-toggle.on .dot { background: var(--primary); }

.todo-quickadd {
  display: flex; gap: 8px; align-items: center;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px;
  margin-bottom: 18px;
  position: sticky; top: 8px; z-index: 5;
}
.todo-quickadd input[type="text"] {
  flex: 1; background: transparent; border: 0; outline: none;
  color: var(--text); font-size: 14px; padding: 6px 8px;
}
.todo-quickadd input[type="date"] {
  background: transparent; color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 8px; font-size: 12px;
  color-scheme: dark;
}
html.light-mode .todo-quickadd input[type="date"] { color-scheme: light; }
.todo-quickadd button {
  background: var(--primary); color: #fff; border: 0;
  border-radius: 8px; padding: 7px 14px; font-size: 13px; font-weight: 600;
  cursor: pointer;
}

.todo-list-host { display: flex; flex-direction: column; gap: 20px; }

.todo-section-head {
  display: flex; align-items: baseline; gap: 8px;
  margin: 8px 4px 6px;
}
.todo-section-head h3 {
  margin: 0; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--muted);
}
.todo-section-head .count { color: var(--muted); font-size: 12px; font-weight: 500; }
.todo-section-head .range {
  background: var(--primary-soft); color: var(--primary);
  border-radius: 999px; font-size: 10px; font-weight: 700;
  padding: 2px 8px; letter-spacing: 0.5px;
}

.todo-rows { display: flex; flex-direction: column; gap: 6px; }

.todo-row {
  display: grid;
  grid-template-columns: 24px 28px 1fr auto auto auto auto;
  align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.todo-row:hover { border-color: var(--border-soft, var(--border)); }
.todo-row.dragging {
  opacity: 0.5;
  transform: scale(0.98);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.todo-row.drag-over-top    { box-shadow: inset 0  2px 0 0 var(--primary); }
.todo-row.drag-over-bottom { box-shadow: inset 0 -2px 0 0 var(--primary); }
.todo-row.completed { background: var(--surface-2); opacity: 0.7; }
.todo-row.completed .todo-title { text-decoration: line-through; color: var(--muted); }

.todo-drag {
  cursor: grab; color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; user-select: none;
}
.todo-drag:active { cursor: grabbing; }

.todo-priority {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary);
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.todo-row.completed .todo-priority { background: var(--surface); color: var(--muted); }

.todo-body { min-width: 0; }
.todo-title {
  margin: 0 0 2px; font-size: 14px; font-weight: 500; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.todo-notes {
  margin: 0; color: var(--muted); font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.todo-due {
  font-size: 11px; font-weight: 600; padding: 3px 8px;
  border-radius: 6px; background: var(--pill-bg); color: var(--text);
  white-space: nowrap;
}
.todo-due.today    { background: var(--amber-soft, #4d3a14); color: var(--amber); }
.todo-due.tomorrow { background: var(--blue); color: #fff; }
.todo-due.week     { background: var(--surface-2); color: var(--muted); }

.todo-check {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--border); background: transparent;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  padding: 0; color: transparent;
}
.todo-check.checked { background: var(--green); border-color: var(--green); color: #fff; }

.todo-icon {
  background: transparent; color: var(--muted);
  border: 0; cursor: pointer;
  width: 28px; height: 28px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
}
.todo-icon:hover { background: var(--surface-2); color: var(--text); }
.todo-icon.danger:hover { background: var(--red-soft, #4d1f1f); color: var(--red); }

.todo-empty {
  padding: 48px 24px; text-align: center; color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--border); border-radius: 12px;
}
.todo-empty h4 { color: var(--text); margin: 0 0 4px; font-size: 16px; font-weight: 600; }

/* ---------- Customer & Work Type (master lists) ---------- */
.md-head { margin-bottom: 14px; }
.md-head h2 { margin: 0 0 4px; font-size: 20px; }
.md-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  align-items: start;
}
.md-card { padding: 16px; }
.md-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 10px;
}
.md-card-head h3 { margin: 0; font-size: 15px; }
.md-add-row {
  display: flex; gap: 8px; margin-bottom: 6px;
}
.md-add-row input {
  flex: 1; font: inherit; padding: 8px 10px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
}
.md-add-row input:focus { outline: none; border-color: var(--primary); }
.md-add-row button {
  background: var(--primary); color: #fff; border: 0;
  border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.md-msg { min-height: 0; margin: 0 0 6px; color: var(--red); font-size: 12px; }
.md-msg:empty { display: none; }
.md-list { display: flex; flex-direction: column; gap: 4px; max-height: 480px; overflow-y: auto; }
.md-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--border-soft, var(--border));
}
.md-name { font-size: 13px; font-weight: 500; color: var(--text); }
.md-empty { margin: 8px 2px; }
@media (max-width: 720px) {
  .md-grid { grid-template-columns: 1fr; }
}

/* ---------- OT (over-time log) ---------- */
.ot-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.ot-head h2 { margin: 0; font-size: 20px; }
.ot-head .spacer { flex: 1; }
.ot-list-host { display: flex; flex-direction: column; gap: 18px; }
/* OT: two columns — new requests (left) and approved (right). Stacks on narrow screens. */
.ot-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.ot-col { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.ot-col-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.ot-col-head h3 { margin: 0; font-size: 14px; font-weight: 600; }
.ot-col-head .count { font-size: 12px; color: var(--muted); }
.ot-col-empty { padding: 18px; }
.ot-col-empty p { margin: 0; }
.ot-approve-btn {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 5px 10px; border-radius: 6px; border: 1px solid #10b981;
  background: transparent; color: #10b981;
}
.ot-approve-btn:hover { background: rgba(16, 185, 129, .12); }
@media (max-width: 900px) { .ot-columns { grid-template-columns: minmax(0, 1fr); } }
.ot-rows { display: flex; flex-direction: column; gap: 6px; }
.ot-row {
  display: grid;
  grid-template-columns: 150px 1fr auto auto;
  align-items: center; gap: 14px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.ot-time {
  font-variant-numeric: tabular-nums;
  font-weight: 600; font-size: 13px; color: var(--text);
  white-space: nowrap;
}
.ot-body { min-width: 0; }
.ot-title {
  margin: 0 0 2px; font-size: 14px; font-weight: 500; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ot-meta { margin: 0; font-size: 12px; }
.ot-engs { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; max-width: 260px; }
.ot-eng-chip {
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  padding: 3px 8px; border-radius: 6px;
  background: var(--primary-soft); color: var(--primary);
}
.ot-actions { display: flex; gap: 4px; }

/* Engineer multi-select inside the OT form */
.create-form fieldset.ot-engineers {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px 12px; margin: 0;
}
.create-form fieldset.ot-engineers legend {
  font-size: 12px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; padding: 0 4px;
}
.ot-engineer-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px; margin-top: 6px;
}
.ot-eng-option {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text); text-transform: none; font-weight: 500;
  cursor: pointer;
}
.ot-eng-option input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); }

@media (max-width: 720px) {
  .ot-row { grid-template-columns: 1fr auto; }
  .ot-engs { justify-content: flex-start; max-width: none; grid-column: 1 / -1; }
  .ot-time { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .todo-row {
    grid-template-columns: 18px 22px 1fr auto auto auto auto;
    gap: 8px; padding: 8px;
  }
  .todo-quickadd-date { display: none; }
  .todo-notes { display: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .cal-head-actions { width: 100%; }
  .cal-view-toggle { width: 100%; }
  .cal-view-btn { flex: 1; text-align: center; }
  .cal-host { padding: 8px; }
  .cal-drawer-panel { width: 100vw; }
}