/* ── Global Styles ── */
:root {
  /* Harbor, the primary. Ember, held back for things that need chasing. */
  --primary:    #14657A;
  --primary-dk: #0E4B59;
  --primary-lt: #E4EFF2;
  --accent:     #C4562F;
  --accent-dk:  #A32E1C;
  --accent-lt:  #F8E3DF;

  --sidebar-bg: #1A1D21;
  --sidebar-w:  216px;
  --header-h:   56px;

  --text:       #1A1D21;
  --text-2:     #4A4D53;
  --muted:      #6E7076;
  --border:     #E3E1DB;
  --border-2:   #EDEBE5;
  --surface:    #FFFFFF;
  --surface-2:  #F4F2ED;
  --bg:         #FAF9F6;

  --danger:     #A32E1C;
  --success:    #10603F;
  --warning:    #8A4F09;
  --info:       #0E4B59;

  --font-display: 'Sora', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-body); background: var(--bg); color: var(--text); font-size: 14px; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, .heading-sm, .stat-value { font-family: var(--font-display); letter-spacing: -0.01em; }
table { font-variant-numeric: tabular-nums; }

/* ── Sidebar ── */
.sidebar {
  position: fixed; top: 0; left: 0; height: 100vh;
  width: var(--sidebar-w); background: var(--sidebar-bg);
  display: flex; flex-direction: column; z-index: 100;
}
.sidebar-logo {
  height: var(--header-h); padding: 0 20px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-logo span { font-size: 18px; font-weight: normal; color: #fff; letter-spacing: -.3px; }
.sidebar-logo .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 12px 0; }
.sidebar-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px; color: rgba(255,255,255,.65);
  font-size: 13.5px; font-weight: normal; border-radius: 0;
  transition: background .15s, color .15s;
}
.sidebar-nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar-nav a.active { background: rgba(108,92,231,.25); color: #fff; border-left: 3px solid var(--primary); }
.sidebar-nav a svg { opacity: .75; flex-shrink: 0; }
.sidebar-nav a.active svg { opacity: 1; }
.sidebar-section { padding: 14px 20px 4px; font-size: 10px; text-transform: uppercase; letter-spacing: .8px; color: rgba(255,255,255,.3); }
.sidebar-footer { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,.08); }

/* ── Collapsible nav group (HR Admin, etc.) ──────────────────────────────── */
details.nav-group { }
details.nav-group > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px; color: rgba(255,255,255,.65);
  font-size: 13.5px; cursor: pointer; list-style: none;
  border-left: 3px solid transparent;
  transition: background .15s, color .15s;
  user-select: none;
}
details.nav-group > summary::-webkit-details-marker { display: none; }
details.nav-group > summary:hover { background: rgba(255,255,255,.07); color: #fff; }
details.nav-group[open] > summary { color: #fff; background: rgba(255,255,255,.04); }
details.nav-group > summary svg { opacity: .75; flex-shrink: 0; }
details.nav-group[open] > summary svg { opacity: 1; }
.nav-chevron { margin-left: auto; font-size: 10px; opacity: .5; transition: transform .2s; }
details.nav-group[open] .nav-chevron { transform: rotate(180deg); opacity: .8; }
.nav-group-items { background: rgba(0,0,0,.18); }
.nav-group-items a {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 16px 8px 40px; font-size: 13px;
  color: rgba(255,255,255,.55); text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .15s, color .15s;
}
.nav-group-items a:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-group-items a.active { background: rgba(108,92,231,.2); color: #fff; border-left: 3px solid var(--primary); }
.nav-group-items a svg { opacity: .65; flex-shrink: 0; width: 14px; height: 14px; }
.sidebar-user { display: flex; align-items: center; gap: 10px; }
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-info .name { font-size: 13px; font-weight: normal; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-info .role { font-size: 11px; color: rgba(255,255,255,.45); }
.logout-btn { font-size: 11px; color: rgba(255,255,255,.45); margin-top: 8px; display: inline-block; }
.logout-btn:hover { color: var(--danger); }

/* ── Main layout ── */
.main-wrap { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  height: var(--header-h); background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 28px;
  position: sticky; top: 0; z-index: 90;
  gap: 16px;
}
.topbar h1 { font-size: 17px; font-weight: normal; flex: 1; }
.page-content { flex: 1; padding: 28px; }

/* ── Cards ── */
/* color is declared because Bootstrap's own .card sets it to --bs-body-color,
   and ours loads later but never overrode it, so card contents rendered in
   Bootstrap grey rather than our ink. */
.card { background: var(--surface); color: var(--text); border-radius: 10px; border: 1px solid var(--border); }
.card-body { padding: 20px 24px; }
.card-header-bar { padding: 16px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.card-header-bar h2 { font-size: 15px; font-weight: 600; }

/* ── Stat cards ── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card { background: var(--surface); border-radius: 10px; border: 1px solid var(--border); padding: 20px 22px; display: flex; align-items: center; gap: 16px; }
.stat-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-icon.purple { background: var(--primary-lt); color: var(--primary); }
.stat-icon.blue   { background: #e8f4fd; color: #2980b9; }
.stat-icon.green  { background: #eafaf1; color: #27ae60; }
.stat-icon.orange { background: #fef9e7; color: #f39c12; }
.stat-val { font-size: 26px; font-weight: normal; line-height: 1; }
.stat-label { font-size: 12px; color: var(--muted); margin-top: 3px; }

/* ── Table ── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left; font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap; background: var(--surface-2);
}
tbody tr { border-bottom: 1px solid var(--border); transition: background .1s; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: #fafbff; }
tbody td { padding: 12px 14px; vertical-align: middle; }

/* ── Badges ── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px;
  font-size: 11.5px; font-weight: normal; white-space: nowrap;
}
.badge-active      { background: #DFEFE6; color: #10603F; }
.badge-not-started { background: #EDECE8; color: #56595F; }
.badge-on-hold     { background: #F7E9D7; color: #8A4F09; }
.badge-completed   { background: #DFEFE6; color: #10603F; }
.badge-in-progress { background: #E4EFF2; color: #0E4B59; }
.badge-waiting     { background: #EDECE8; color: #56595F; }
.badge-ongoing     { background: #F7E9D7; color: #8A4F09; }
.badge-overdue     { background: #F8E3DF; color: #A32E1C; }
.badge-high        { background: #F8E3DF; color: #A32E1C; }
.badge-medium      { background: #F7E9D7; color: #8A4F09; }
.badge-low         { background: #DFEFE6; color: #10603F; }
.badge-draft       { background: #EDECE8; color: #56595F; }
.badge-success     { background: #DFEFE6; color: #10603F; }
.badge-design      { background: #f3e5f5; color: #7b1fa2; }
.badge-development { background: #e3f2fd; color: #1565c0; }
.badge-marketing   { background: #fff3e0; color: #e65100; }
.badge-support     { background: #e8f5e9; color: #2e7d32; }
.badge-training    { background: #fce4ec; color: #880e4f; }

/* ── Priority dot ── */
.priority-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.priority-dot.high   { background: #e74c3c; }
.priority-dot.medium { background: #f39c12; }
.priority-dot.low    { background: #27ae60; }

/* ── Avatar ── */
.avatar {
  width: 28px; height: 28px; border-radius: 50%;
  font-size: 11px; font-weight: normal; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.avatar-lg { width: 38px; height: 38px; font-size: 14px; }
.av-purple { background: #6c5ce7; }
.av-blue   { background: #0984e3; }
.av-green  { background: #00b894; }
.av-orange { background: #e17055; }
.av-pink   { background: #fd79a8; }
.av-teal   { background: #00cec9; }

/* ── Buttons ──
   min-height 44px is the touch target; btn-sm keeps 36px for dense table rows
   where a finger is not the primary input. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 18px; min-height: 44px; border-radius: 8px; font-size: 14px;
  font-family: var(--font-body); font-weight: 600; cursor: pointer; border: none;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-primary  { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dk); }
.btn-outline  { background: var(--surface); border: 1px solid #D6D3CB; color: var(--text); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-danger   { background: var(--surface); border: 1px solid #E8C4BB; color: var(--danger); }
.btn-danger:hover { background: var(--accent-lt); }
.btn-sm       { padding: 8px 14px; min-height: 36px; font-size: 13px; border-radius: 7px; }
.btn-icon     { padding: 6px; border-radius: 6px; background: transparent; border: none; cursor: pointer; color: var(--muted); transition: background .15s, color .15s; }
.btn-icon:hover { background: var(--bg); color: var(--text); }

/* ── Filters bar ── */
.filters-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; }
.filters-bar input, .filters-bar select {
  padding: 7px 12px; border: 1.5px solid var(--border); border-radius: 7px;
  font-size: 13.5px; background: var(--surface); color: var(--text);
  outline: none; transition: border-color .15s;
}
.filters-bar input:focus, .filters-bar select:focus { border-color: var(--primary); }

/* Filter controls share one row: each field flexes, buttons keep their size.
   min-width:0 is what actually lets a flex item shrink below its content. */
.filters-bar > .form-select,
.filters-bar > .form-control,
.filters-bar > .search-box { flex: 1 1 0; min-width: 0; }
.filters-bar > .search-box { flex: 1.6 1 0; }
.filters-bar .btn { flex: 0 0 auto; white-space: nowrap; }

/* Single line from the large breakpoint up; wraps below so it stays usable. */
@media (min-width: 992px) { .filters-bar { flex-wrap: nowrap; } }

.search-box { position: relative; }
.search-box input { padding-left: 32px; min-width: 220px; }
.search-box svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--muted); }
/* Inside a filter row the search field fills its flex track instead of
   enforcing a fixed minimum, which would force the row to wrap.
   padding-left is restated here because `.filters-bar .form-control` below
   otherwise resets it and the search icon lands on top of the text. */
.filters-bar .search-box input,
.filters-bar .search-box .form-control { width: 100%; min-width: 0; padding-left: 32px; }

/* ── Form ── */
.form-grid, .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .form-grid, .form-grid-2 { grid-template-columns: 1fr; } }
.toggle-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; user-select: none; }
.toggle-label input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--primary); }
.static-value { padding: 8px 0; font-size: 14px; color: var(--text); }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { font-size: 12.5px; font-weight: normal; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.form-group input, .form-group select, .form-group textarea {
  padding: 9px 13px; border: 1.5px solid var(--border); border-radius: 7px;
  font-size: 14px; color: var(--text); outline: none; background: var(--surface);
  transition: border-color .15s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--primary); }
.form-group textarea { resize: vertical; min-height: 90px; }
.checkboxes { display: flex; flex-wrap: wrap; gap: 8px; }
.checkbox-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 20px; border: 1.5px solid var(--border); font-size: 13px; cursor: pointer; transition: all .15s; }
.checkbox-pill input { display: none; }
.checkbox-pill:has(input:checked) { background: var(--primary-lt); border-color: var(--primary); color: var(--primary); font-weight: normal; }
.form-actions { display: flex; gap: 10px; margin-top: 24px; }

/* ── Bootstrap 5 form overrides - keep the custom visual style ── */
.form-label {
  font-size: 12.5px; font-weight: normal; color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px; margin-bottom: 5px;
}
.form-control, .form-select {
  padding: 9px 13px; border: 1.5px solid var(--border); border-radius: 7px;
  font-size: 14px; color: var(--text); background-color: var(--surface);
  transition: border-color .15s; box-shadow: none;
}
.form-control:focus, .form-select:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(108,92,231,.12);
  outline: none; background-color: var(--surface); color: var(--text);
}
.form-control::placeholder { color: #b0b0c0; opacity: 1; }
textarea.form-control { resize: vertical; min-height: 90px; }
.form-text { font-size: 12px; color: var(--muted); margin-top: 4px; display: block; }
/* Compact sizing for filter bar controls */
.filters-bar .form-control,
.filters-bar .form-select { padding: 7px 12px; font-size: 13.5px; }
/* btn-outline-secondary - match the old btn-outline look */
.btn-outline-secondary {
  background: var(--surface); border: 1px solid #D6D3CB;
  color: var(--text); border-radius: 8px;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  border-color: var(--primary); color: var(--primary);
  background: transparent; box-shadow: none;
}

/* ── Alerts ── */
.alert { padding: 12px 16px; border-radius: 8px; font-size: 13.5px; font-weight: normal; margin-bottom: 18px; }
.alert-success { background: #eafaf1; color: #1e8449; border: 1px solid #a9dfbf; }
.alert-error,
.alert-danger  { background: #fdecea; color: #c0392b; border: 1px solid #f5b7b1; }
.alert-warning { background: #fef9e7; color: #7d6608; border: 1px solid #f9e79f; }
.alert ul      { margin: 0; padding-left: 18px; }

/* ── Progress bar ── */
.progress-wrap { background: #eee; border-radius: 20px; height: 7px; overflow: hidden; min-width: 80px; }
.progress-bar { height: 100%; border-radius: 20px; background: var(--primary); transition: width .4s; }
.progress-bar.green  { background: #27ae60; }
.progress-bar.orange { background: #f39c12; }
.progress-bar.red    { background: #e74c3c; }

/* ── Detail page ── */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.detail-item label { font-size: 11px; font-weight: normal; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; display: block; margin-bottom: 3px; }
.detail-item span { font-size: 14px; }

/* ── Subtask table ── */
.subitem-row td { font-size: 13px; padding: 9px 14px; }

/* ── Empty state ── */
.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty-state svg { margin-bottom: 14px; opacity: .35; }
.empty-state p { font-size: 15px; }

/* ── Health dot ── */
.health-dot { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: normal; }
.health-dot::before { content: ''; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.health-completed::before   { background: #27ae60; }
.health-on-track::before    { background: #2980b9; }
.health-delayed::before     { background: #e74c3c; }
.health-ongoing::before     { background: #f39c12; }

/* ── Login page ── */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1e1f2e 0%, #2d3063 100%); }
.login-box { background: #fff; border-radius: 14px; padding: 42px 40px; width: 100%; max-width: 400px; }
.login-box .logo-row { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.login-box .logo-row span { font-size: 22px; font-weight: normal; color: var(--text); }
.login-box h2 { font-size: 20px; font-weight: normal; margin-bottom: 6px; }
.login-box p  { font-size: 13.5px; color: var(--muted); margin-bottom: 24px; }
.login-box .form-group label { color: var(--muted); }
.login-box .form-group + .form-group { margin-top: 14px; }
.login-box .logo-row .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); flex-shrink: 0; }
.login-box .btn { width: 100%; justify-content: center; margin-top: 20px; padding: 11px; font-size: 15px; }

/* ── Breadcrumb ── */
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); margin-bottom: 16px; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb span { color: var(--text); font-weight: normal; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .main-wrap { margin-left: 0; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   Task Execution Table  (te-*)
   ══════════════════════════════════════════════════════════════ */

.te-card { overflow: visible; }

/* Main table */
.te-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
/* Matches the global thead th, so the task table reads like every other list. */
.te-head th {
  background: var(--surface-2); font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
  padding: 11px 12px; border-bottom: 1px solid var(--border);
  white-space: nowrap; text-align: left;
}

/* Column widths */
.te-col-toggle   { width: 36px; }
.te-col-name     { width: 220px; }
.te-col-project  { width: 160px; }
.te-col-client   { width: 130px; }
.te-col-sub      { width: 110px; }
.te-col-status   { width: 110px; }
.te-col-priority { width: 90px; }
.te-col-due      { width: 80px; }
.te-col-comp     { width: 80px; }
.te-col-actions  { width: 64px; }

/* Group header row */
.te-group-header td {
  background: #fafbff; padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  display: flex; /* NOT a flex row - see below */ 
}
.te-group-header > td {
  display: table-cell;
  vertical-align: middle;
}
.te-group-header {
  cursor: default;
}
.te-group-toggle {
  background: none; border: none; cursor: pointer;
  color: var(--muted); padding: 0 6px 0 0;
  transition: transform .2s; display: inline-flex; align-items: center;
  vertical-align: middle;
}
.te-group-toggle.collapsed svg { transform: rotate(-90deg); }
.te-group-toggle svg { transition: transform .2s; }
.te-group-count {
  display: inline-flex; align-items: center; justify-content: center;
  background: #e8e8f0; color: var(--muted); border-radius: 10px;
  font-size: 11px; font-weight: normal; padding: 1px 8px; margin-left: 8px;
}

/* Task rows */
.te-task-row td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.te-task-row:hover td { background: #fafbff; }
.te-task-toggle {
  background: none; border: none; cursor: pointer; padding: 3px;
  color: var(--muted); border-radius: 4px; display: inline-flex;
  align-items: center; transition: background .15s, color .15s;
}
.te-task-toggle:hover { background: var(--primary-lt); color: var(--primary); }
.te-arrow { transition: transform .2s; }
.te-task-toggle.open .te-arrow { transform: rotate(90deg); }

.te-task-name {
  font-weight: normal; color: var(--text); font-size: 13.5px;
  transition: color .15s;
}
.te-task-name:hover { color: var(--primary); }
.te-subcount {
  display: inline-flex; align-items: center; justify-content: center;
  background: #e8e8f0; color: var(--muted);
  border-radius: 10px; font-size: 10px; font-weight: normal;
  padding: 1px 6px; margin-left: 6px;
}
.te-link { color: var(--muted); font-size: 12.5px; }
.te-link:hover { color: var(--primary); }
.te-muted { color: var(--muted); font-size: 12px; }
.te-overdue { color: #e74c3c !important; font-weight: normal; font-size: 12px; }
.te-actions { display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.te-task-row:hover .te-actions { opacity: 1; }

/* Substatus color bar */
.substatus-bar {
  display: inline-block; padding: 3px 10px; border-radius: 4px;
  font-size: 11.5px; font-weight: normal; color: #fff;
  white-space: nowrap;
}

/* Subitem section wrapper */
/* Only the wrapper cell, not every td inside it. Without the child combinator
   this also stripped the padding from the nested subitem table's cells, which
   is why subitems never lined up with the task rows above them. */
.te-sub-section > td { padding: 0 !important; border-bottom: 1px solid var(--border); }
.te-sub-wrap { background: var(--bg); border-top: 1px solid var(--border); }

/* Subitem table */
.te-sub-table { width: 100%; border-collapse: collapse; }
.te-sub-head th {
  background: var(--surface-2); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
  padding: 7px 12px; border-bottom: 1px solid var(--border);
  white-space: nowrap; text-align: left;
}
/* First cell clears the parent's toggle column (36px) so the subitem name
   starts under the task name rather than under the expand arrow. */
.te-sub-head th:first-child,
.te-sub-row  td:first-child { padding-left: 48px; }

/* Subitem data rows */
.te-sub-row td {
  padding: 9px 12px; border-bottom: 1px solid var(--border-2);
  font-size: 13px; vertical-align: middle;
}
.te-sub-row:hover td { background: var(--surface-2); }
.te-sub-done .te-sub-name { text-decoration: line-through; color: var(--muted); }
.te-sub-empty {
  padding: 14px 16px !important; color: var(--muted);
  font-size: 13px; font-style: italic;
}

/* Add subitem row */
.te-add-row td { padding: 8px 14px 10px 16px !important; border-bottom: none; }
.te-add-btn {
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 13px; font-weight: normal;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px; border-radius: 6px; transition: background .15s, color .15s;
}
.te-add-btn:hover { background: var(--primary-lt); color: var(--primary); }
.te-add-form-row td { padding: 0 0 12px 0 !important; border-bottom: none; }

/* Inline add form */
.te-inline-form { background: #fff; border: 1.5px solid var(--primary); border-radius: 8px; padding: 12px 16px; margin: 0 10px; }
.te-form-grid { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.te-form-cell { flex: 1; min-width: 100px; }
.te-form-cell.te-assignee-cell { min-width: 160px; flex: 1.5; }
.te-input {
  width: 100%; padding: 7px 10px; border: 1.5px solid var(--border);
  border-radius: 6px; font-size: 13px; background: #fff;
  outline: none; transition: border-color .15s;
}
.te-input:focus { border-color: var(--primary); }

/* Multi-select dropdown */
.te-multi-select { position: relative; }
.te-ms-trigger {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; border: 1.5px solid var(--border); border-radius: 6px;
  font-size: 13px; cursor: pointer; background: #fff; gap: 6px;
  transition: border-color .15s;
}
.te-ms-trigger:hover { border-color: var(--primary); }
.te-ms-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.te-ms-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: #fff; border: 1.5px solid var(--border); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.1); z-index: 200; overflow: hidden;
}
.te-ms-option {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  cursor: pointer; font-size: 13px; transition: background .1s;
}
.te-ms-option:hover { background: var(--primary-lt); }
.te-ms-option input[type=checkbox] { accent-color: var(--primary); width: 14px; height: 14px; flex-shrink: 0; }

/* ── Assignee tooltip ────────────────────────────────────────── */
.te-assignee-wrap {
  position: relative; display: inline-flex; align-items: center; gap: 3px;
}
.te-assignee-wrap::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%; transform: translateX(-50%);
  background: #1e1f2e; color: #fff;
  font-size: 12px; font-weight: normal;
  padding: 5px 10px; border-radius: 6px;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .15s;
  z-index: 500;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.te-assignee-wrap::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 1px);
  left: 50%; transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1e1f2e;
  pointer-events: none;
  opacity: 0; transition: opacity .15s;
  z-index: 500;
}
.te-assignee-wrap:hover::after,
.te-assignee-wrap:hover::before { opacity: 1; }
.te-assignee-extra {
  font-size: 11px; background: #e8e8f0; border-radius: 10px;
  padding: 2px 7px; font-weight: normal; color: var(--muted);
}

/* ── Inline edit form ────────────────────────────────────────── */
.te-edit-form { border-color: #f39c12; background: #fffdf5; }
.te-edit-form-row td { background: transparent; }
.te-form-label {
  display: block; font-size: 10.5px; font-weight: normal;
  text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted); margin-bottom: 4px;
}


/* ── Pagination ──────────────────────────────────────────────── */
.pager-nav {
  display: flex; align-items: center; gap: 4px;
  padding: 14px 16px; justify-content: center; flex-wrap: wrap;
}
.pager-btn {
  display: inline-block; padding: 5px 11px; border-radius: 7px;
  font-size: 13px; font-weight: normal; color: var(--text);
  border: 1px solid var(--border); text-decoration: none;
  background: var(--card); transition: background .1s, border-color .1s;
  cursor: pointer;
}
.pager-btn:hover:not(.disabled):not(.active) {
  background: var(--primary-lt); border-color: var(--primary); color: var(--primary);
}
.pager-btn.active {
  background: var(--primary); color: #fff; border-color: var(--primary);
}
.pager-btn.disabled { color: var(--muted); cursor: default; opacity: .45; pointer-events: none; }

/* ══════════════════════════════════════════════════════════════
   Utility Classes
   ══════════════════════════════════════════════════════════════ */

/* Layout grids */
.grid-2col    { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-2-1col  { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
.grid-1-2col  { display: grid; grid-template-columns: 1fr 2fr; gap: 20px; }
.grid-sidebar { display: grid; grid-template-columns: 300px 1fr; gap: 20px; }

/* Spacing */
.mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }

/* Card modifiers */
/* ── Form widths ──
   Three sizes, chosen by the shape of the form rather than per file. A field's
   width is a hint about the expected input, so nothing is left unbounded: on a
   wide monitor an uncapped form gives a 1200px box for a client name and puts
   paired fields half a screen apart.

     narrow   one column, a handful of fields
     standard two columns of ~350px
     dense    three columns, for records with many fields

   Note Bootstrap's col-md-* responds to the VIEWPORT, not the container, so a
   narrow card still splits into desktop-sized columns and crushes them. Keep
   col-md-3 and finer out of .form-narrow. */
.form-narrow   { max-width: 520px; }
.form-standard { max-width: 760px; }
.form-dense    { max-width: 1100px; }
.form-full     { max-width: none; }
.card-top { align-self: start; }
.card-body.compact { padding: 16px 20px; }

/* Flex */
.flex            { display: flex; }
.flex-center     { display: flex; align-items: center; }
.flex-between    { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.flex-between > .filters-bar { flex: 1 1 auto; min-width: 0; }
.row-layout      { display: flex; flex-wrap: wrap; }
.align-center    { align-items: center; }
.flex-end        { display: flex; justify-content: flex-end; }
.flex-align-end  { display: flex; align-items: flex-end; }
.flex-1   { flex: 1; }
.flex-2   { flex: 2; }
.flex-none { flex: 0 0 auto; }
.gap-2  { gap: 2px; }
.gap-3  { gap: 3px; }
.gap-4  { gap: 4px; }
.gap-6  { gap: 6px; }
.gap-7  { gap: 7px; }
.gap-8  { gap: 8px; }
.gap-10 { gap: 10px; }

/* Typography */
.link-primary { color: var(--primary); }
.text-muted   { color: var(--muted); }
.text-sm      { font-size: 12px; }
.text-xs      { font-size: 11px; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.nowrap       { white-space: nowrap; }
.pre-wrap     { white-space: pre-wrap; }
.invisible    { visibility: hidden; }

/* Display */
.d-inline { display: inline; }

/* Page-level header */
.page-actions { display: flex; justify-content: flex-end; margin-bottom: 20px; }

/* Field label (detail/show pages) */
.field-label {
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; display: block; margin-bottom: 3px;
}

/* Sub-heading in detail card */
.heading-sm  { font-size: 14px; }

/* Inline count e.g. "Tasks (3)" */
.count-label { color: var(--muted); }

/* Dashboard status chart row */
.stat-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.stat-count   { font-size: 14px; min-width: 24px; text-align: right; }
.stage-row    { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }

/* Delivery bar + percentage */
.delivery-cell   { display: flex; align-items: center; gap: 8px; }
.delivery-pct    { font-size: 12px; color: var(--muted); min-width: 32px; }
.pct-sm          { font-size: 11px; color: var(--muted); }
.delivery-number { font-size: 32px; margin-bottom: 8px; }

/* Avatar group */
.avatar-group { display: flex; align-items: center; gap: 3px; }
.avatar-sm    { width: 22px; height: 22px; font-size: 10px; }

/* Row actions */
.actions-cell { display: flex; gap: 4px; align-items: center; }
.actions-xs   { display: flex; gap: 2px; }

/* Table cell helpers */
.timeline-col { white-space: nowrap; font-size: 12px; color: var(--muted); }
.icon-check   { color: #27ae60; }
.td-empty     { text-align: center; color: var(--muted); padding: 28px 14px !important; }
.td-muted-sm  { color: var(--muted); font-size: 12px; }
.td-truncate  { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.col-actions  { width: 100px; }
.col-sm       { width: 50px; }
.pl-16        { padding-left: 16px; }

/* Notes/text content */
.notes-text { font-size: 13px; white-space: pre-wrap; }

/* Section label (within cards) */
/* ── Group heading ──
   This was 12px uppercase muted, while .form-label is 12.5px uppercase muted,
   so a section heading read as just another field label and the groups ran
   together. It is now a heading: display face, sentence case, full ink, and a
   hairline rule to close the group above it. */
.section-label {
  font-family: var(--font-display);
  font-size: 14.5px; font-weight: 600; color: var(--text);
  text-transform: none; letter-spacing: -0.005em;
  margin-top: 30px; margin-bottom: 14px;
  padding-bottom: 9px; border-bottom: 1px solid var(--border);
}
/* The first heading in a panel has nothing to separate it from. */
.section-label:first-child,
.card-body > form > .section-label:first-of-type,
form > .section-label:first-of-type { margin-top: 0; }

/* A caption sitting above a big figure is not a heading: keep the old
   treatment for those. */
.stat-caption {
  font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 12px;
}

/* Subitem add panel */
.subitem-add { border-top: 1px solid var(--border); padding: 16px 20px; }

/* Subitem inline add/edit form grids */
.subitem-grid-top    { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.subitem-grid-bottom { display: grid; grid-template-columns: 1fr 1fr 80px auto; gap: 10px; align-items: end; }

/* Single-column form-grid override */
.form-grid-single { grid-template-columns: 1fr; }

/* Extra-small card */

/* Flex column direction */
.flex-col { flex-direction: column; }

/* Additional gaps */
.gap-12 { gap: 12px; }

/* Zero margin override */
.m-0 { margin: 0; }

/* Flex wrap */
.flex-wrap  { flex-wrap: wrap; }
.items-start { align-items: flex-start; }

/* Zero padding */
.p-0 { padding: 0 !important; }

/* Column widths */
.col-60 { width: 60px; }

/* Toggle spacer (tasks without subitems) */
.toggle-spacer { width: 22px; display: inline-block; }

/* Inline edit / add form cells */
.te-edit-form-cell { padding: 0 0 4px 0; }
.te-add-form-cell  { padding: 10px 14px; }

/* Full-width detail-item */
.detail-item.full { grid-column: 1 / -1; }

/* Inline checkbox label */
.checkbox-label { display: flex; align-items: center; gap: 5px; font-size: 13px; cursor: pointer; }

/* ── HRMS ─────────────────────────────────────────────────────────── */

/* Org Chart */
.org-chart { overflow-x: auto; padding-bottom: 20px; }
.org-root,
.org-children { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; justify-content: center; padding-top: 20px; }
.org-root { padding-top: 0; }
.org-node { display: flex; flex-direction: column; align-items: center; position: relative; }
.org-node > .org-children { margin-top: 0; }
/* vertical connector from parent card to children line */
.org-children::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 20px;
  background: var(--border);
}
.org-children > li { position: relative; }
.org-children > li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 20px;
  background: var(--border);
}
.org-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  text-align: center;
  min-width: 140px;
  max-width: 180px;
  cursor: default;
  transition: border-color .15s, box-shadow .15s;
}
.org-card:hover { border-color: var(--primary); box-shadow: 0 2px 8px rgba(108,92,231,.12); }
.org-name  { font-size: 13px; font-weight: 600; color: var(--text); }
.org-title { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.org-dept  { font-size: 11px; color: var(--primary); margin-top: 2px; }
.org-empid { font-size: 10.5px; color: var(--muted); margin-top: 3px; letter-spacing: .3px; }

/* Print styles for org chart */
@media print {
  .sidebar, .topbar, .breadcrumb, .btn, .page-actions { display: none !important; }
  .main-wrap { margin-left: 0 !important; }
  .org-chart { overflow: visible; }
}

/* HR leave calendar grid */
.leave-calendar { width: 100%; border-collapse: collapse; }
.leave-calendar th { background: var(--bg); padding: 8px 6px; font-size: 12px; font-weight: normal; color: var(--muted); text-align: center; border: 1px solid var(--border); }
.leave-calendar td { padding: 4px 6px; border: 1px solid var(--border); vertical-align: top; min-height: 60px; font-size: 12px; }
.leave-calendar .cal-day-num { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.leave-calendar .cal-today .cal-day-num { color: var(--primary); font-weight: 600; }
.leave-calendar .cal-weekend { background: var(--bg); }
/* Holiday tints are country-coded. These carry two-class specificity to beat
   the weekend rule above - otherwise a holiday landing on a Saturday would be
   painted as a plain weekend and lose its marking. */
.leave-calendar .cal-holiday-in     { background: #fef9e7; }
.leave-calendar .cal-holiday-us     { background: #eaf2fd; }
.leave-calendar .cal-holiday-common { background: #eaf7ef; }
.leave-pill { display: inline-block; padding: 1px 6px; border-radius: 10px; font-size: 10.5px; background: var(--primary-lt); color: var(--primary); margin: 1px 0; white-space: nowrap; }

/* Attendance check-in card */
.checkin-card { text-align: center; padding: 40px 24px; }
.checkin-status { font-size: 14px; color: var(--muted); margin-bottom: 20px; }
.checkin-btn { font-size: 16px; padding: 14px 40px; border-radius: 50px; }

/* HR profile section anchors */
.hr-section-nav { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 20px; }
.hr-section-nav a { padding: 5px 14px; border-radius: 20px; font-size: 13px; color: var(--muted); text-decoration: none; border: 1.5px solid var(--border); }
.hr-section-nav a:hover { border-color: var(--primary); color: var(--primary); }
.hr-section-nav a.active { border-color: var(--primary); color: var(--primary); background: var(--primary-lt); }

/* Onboarding progress */
.onboard-card { padding: 16px 20px; }
.onboard-progress { font-size: 12px; color: var(--muted); margin-top: 4px; }
.onboard-tasks { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.onboard-task { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.onboard-task.done { text-decoration: line-through; color: var(--muted); }
.onboard-task input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--primary); }

/* Appraisal rating scale */
.rating-scale { display: flex; gap: 6px; flex-wrap: wrap; }
.rating-scale label { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; padding: 6px 10px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 13px; min-width: 44px; text-align: center; transition: border-color .15s, background .15s; }
.rating-scale input[type=radio] { display: none; }
.rating-scale input[type=radio]:checked + label,
.rating-scale label:has(input[type=radio]:checked) { border-color: var(--primary); background: var(--primary-lt); color: var(--primary); }

/* Leave balance inline display */
.leave-balance-bar { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.leave-balance-item { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; min-width: 120px; }
.leave-balance-item .lb-type { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.leave-balance-item .lb-count { font-size: 22px; font-weight: 600; color: var(--primary); margin-top: 2px; }
.leave-balance-item .lb-used { font-size: 11px; color: var(--muted); }

/* ── Leave balance card grid (index / form sidebar) ─────────────────────── */
.leave-balances-grid { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px 16px 16px; }
.leave-balance-card  { display: flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; min-width: 180px; flex: 1 1 200px; max-width: 260px; background: var(--surface); }
.lb-color  { width: 5px; flex-shrink: 0; }
.lb-body   { padding: 10px 12px; flex: 1; }
.lb-name   { font-size: 12px; font-weight: 600; color: var(--text); }
.lb-numbers { display: flex; align-items: baseline; gap: 4px; margin: 4px 0; }
.lb-avail  { font-size: 22px; font-weight: 700; color: var(--text); }
.lb-of     { font-size: 12px; color: var(--muted); }
.lb-bar-bg { height: 4px; background: var(--bg); border-radius: 2px; overflow: hidden; }
.lb-bar-fill { height: 4px; border-radius: 2px; transition: width .3s; }
.lb-meta   { display: flex; gap: 10px; font-size: 11px; color: var(--muted); margin-top: 4px; }

/* ── Div-based leave calendar (replaces table version) ───────────────────── */
.leave-calendar        { }
.cal-header-row        { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; margin-bottom: 2px; }
.cal-header-cell       { text-align: center; font-size: 12px; color: var(--muted); padding: 6px 0; font-weight: 500; }
.cal-header-cell.weekend { color: #e74c3c; }
.cal-week              { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; margin-bottom: 2px; }
.cal-cell              { min-height: 88px; border: 1px solid var(--border); border-radius: 6px; padding: 6px; background: var(--surface); overflow: hidden; }
.cal-empty             { background: transparent; border-color: transparent; }
.cal-weekend           { background: var(--bg); }
/* Holiday cells, coloured by country: India amber, US blue, common green.
   Restricted holidays are marked "(RH)" in the label rather than by colour. */
.cal-holiday               { border-color: #e0c04d; }
.cal-holiday-in            { background: #fef9e7; border-color: #e0c04d; }
.cal-holiday-us            { background: #eaf2fd; border-color: #8ab4e8; }
.cal-holiday-common        { background: #eaf7ef; border-color: #86ceaa; }
.cal-day-num               { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.cal-holiday-label         { font-size: 10px; font-style: italic; margin-bottom: 3px; line-height: 1.3; }
.cal-holiday-label.is-in     { color: #b7950b; }
.cal-holiday-label.is-us     { color: #2f6cb5; }
.cal-holiday-label.is-common { color: #2e7d53; }

/* Legend above the grid */
.cal-legend            { display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
                         margin-bottom: 12px; font-size: 12.5px; color: var(--muted); }
.cal-legend-item       { display: inline-flex; align-items: center; gap: 7px; }
.cal-legend-note       { color: var(--muted); }
.cal-swatch            { width: 14px; height: 14px; border-radius: 3px; border: 1px solid transparent; }
.cal-swatch-in         { background: #fef9e7; border-color: #e0c04d; }
.cal-swatch-us         { background: #eaf2fd; border-color: #8ab4e8; }
.cal-swatch-common     { background: #eaf7ef; border-color: #86ceaa; }
.cal-swatch-weekend    { background: var(--bg); border-color: var(--border); }
.cal-leave-pill        { display: block; border-radius: 4px; color: #fff; font-size: 10.5px; padding: 1px 5px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Client meeting notes ---- */
.cn-attendees          { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cn-attendee           { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.cn-external           { font-size: 12px; color: var(--muted); }
.cn-body               { font-size: 13.5px; line-height: 1.6; white-space: normal; }
.cn-followup-due       { display: inline-flex; align-items: center; gap: 5px; color: #c0392b; font-weight: 500; }
.cn-followup-due svg   { width: 14px; height: 14px; }

.cn-attendee-picker    { max-height: 220px; overflow-y: auto; border: 1px solid var(--border);
                         border-radius: 7px; padding: 8px; background: var(--bg); }
.cn-attendee-option    { display: flex; align-items: center; gap: 8px; padding: 4px 2px;
                         font-size: 13px; cursor: pointer; }
.cn-attendee-option:hover { background: rgba(0,0,0,.03); border-radius: 5px; }

/* The card on a client's own page */
.cn-client-card-item   { padding: 10px 0; border-bottom: 1px solid var(--border); }
.cn-client-card-item:last-child { border-bottom: 0; }
.cn-client-card-title  { font-size: 13.5px; font-weight: 500; }
.cn-client-card-meta   { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ── Mobile navigation ──
   The sidebar is a fixed rail on desktop. Below 900px it becomes a drawer
   behind a 44px button, because a 216px rail on a 375px screen leaves almost
   nothing for the content. */
.mobile-topbar { display: none; }

@media (max-width: 900px) {
  .mobile-topbar {
    display: flex; align-items: center; gap: 12px;
    position: sticky; top: 0; z-index: 90;
    padding: 10px 16px; background: var(--surface);
    border-bottom: 1px solid var(--border);
  }
  .mobile-topbar .mt-title {
    font-family: var(--font-display); font-size: 16px; font-weight: 600;
    flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .nav-toggle {
    width: 44px; height: 44px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface); border: 1px solid #D6D3CB;
    border-radius: 8px; cursor: pointer; color: var(--text);
  }

  .sidebar {
    transform: translateX(-100%);
    transition: transform .22s ease;
    width: 278px; box-shadow: 0 0 40px rgba(26,29,33,.25);
  }
  body.nav-open .sidebar { transform: translateX(0); }

  .nav-backdrop {
    position: fixed; inset: 0; z-index: 99;
    background: rgba(26,29,33,.55);
    opacity: 0; pointer-events: none; transition: opacity .22s ease;
  }
  body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }

  .main-wrap { margin-left: 0 !important; }
  .page-content { padding: 16px; }

  /* Wide tables scroll rather than breaking the layout */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .sidebar-nav a { padding-top: 11px; padding-bottom: 11px; font-size: 15px; }
}

/* Someone who prefers less motion gets no slide */
@media (prefers-reduced-motion: reduce) {
  .sidebar, .nav-backdrop { transition: none; }
}

/* ── Dashboard: things that need attention ── */
.needs-grid  { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.needs-card  {
  display: flex; align-items: center; gap: 16px;
  background: var(--surface); border: 1px solid #E8C4BB;
  border-left: 4px solid var(--accent); border-radius: 12px;
  padding: 18px 20px; text-decoration: none; transition: border-color .15s;
}
.needs-card:hover { border-color: var(--accent); }
.needs-num   { font-family: var(--font-display); font-size: 32px; font-weight: 700;
               color: var(--danger); font-variant-numeric: tabular-nums; }
.needs-body  { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.needs-title { font-size: 15px; font-weight: 600; color: var(--text); }
.needs-sub   { font-size: 13px; color: var(--muted); overflow: hidden;
               text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) { .needs-grid { grid-template-columns: 1fr; } }

/* Stat tiles are links now, so they need to look reachable */
a.stat-card { text-decoration: none; transition: border-color .15s; }
a.stat-card:hover { border-color: var(--primary); }