/* ── MiniCRM Global Styles ── */
:root {
  --primary:    #6c5ce7;
  --primary-lt: #f0eeff;
  --sidebar-bg: #1e1f2e;
  /* Sidebar ink, so each product can paint its own panel (2f). */
  --sidebar-fg:        rgba(255,255,255,.65);
  --sidebar-fg-strong: #fff;
  --sidebar-fg-faint:  rgba(255,255,255,.45);
  --sidebar-section:   rgba(255,255,255,.3);
  --sidebar-hover:     rgba(255,255,255,.07);
  --sidebar-active:    rgba(108,92,231,.25);
  --sidebar-line:      rgba(255,255,255,.08);
  --sidebar-w:  220px;
  --header-h:   56px;
  --text:       #2d2d3a;
  --muted:      #8a8a9a;
  --border:     #e8e8f0;
  --surface:    #ffffff;
  --bg:         #f4f5fb;
  --danger:     #e74c3c;
  --success:    #27ae60;
  --warning:    #f39c12;
  --info:       #2980b9;
  /* Badge grounds: a tint per tone, so 11.5px text never sits on a saturated fill. */
  --tone-draft-bg:    #eeeef3;  --tone-draft-fg:    #4a4a5e;
  --tone-progress-bg: #efecfe;  --tone-progress-fg: #4a3bbd;
  --tone-info-bg:     #e4edfb;  --tone-info-fg:     #1c4f8f;
  --tone-ok-bg:       #e1f4e9;  --tone-ok-fg:       #156b41;
  --tone-warn-bg:     #fcf0dc;  --tone-warn-fg:     #8a5100;
  --tone-stop-bg:     #fbe6e3;  --tone-stop-fg:     #9e2f26;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; }
a { color: inherit; text-decoration: none; }

/* ── 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 var(--sidebar-line);
  /* Now an <a> back to the user's home; keep it looking like the wordmark. */
  text-decoration: none; transition: background .15s;
}
.sidebar-logo:hover { background: var(--sidebar-hover); }
.sidebar-logo:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.sidebar-logo span { font-size: 18px; font-weight: normal; color: var(--sidebar-fg-strong); letter-spacing: -.3px; }
.sidebar-logo .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
/* The app's name, and under it the product you are in. */
.sidebar-logo-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 12px 0; }
.sidebar-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px; color: var(--sidebar-fg);
  font-size: 13.5px; font-weight: normal; border-radius: 0;
  transition: background .15s, color .15s;
}
.sidebar-nav a:hover { background: var(--sidebar-hover); color: var(--sidebar-fg-strong); }
.sidebar-nav a.active { background: var(--sidebar-active); color: var(--sidebar-fg-strong); 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: var(--sidebar-section); }
.sidebar-footer { padding: 16px 20px; border-top: 1px solid var(--sidebar-line); }

/* ── 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: var(--sidebar-fg-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-info .role { font-size: 11px; color: var(--sidebar-fg-faint); }
.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 ── */
.card { background: var(--surface); 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: normal; }

/* ── 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 ── */
/* Horizontal scroll with a shadow at whichever edge still has content behind
   it. The `local` attachment on the first two layers is what makes the white
   cover slide away as you scroll, revealing the shadow underneath. */
.table-wrap {
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--surface) 30%, rgba(255,255,255,0)) left center,
    linear-gradient(to left,  var(--surface) 30%, rgba(255,255,255,0)) right center,
    radial-gradient(farthest-side at 0 50%,    rgba(15,23,42,.10), rgba(15,23,42,0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(15,23,42,.10), rgba(15,23,42,0)) right center;
  background-repeat: no-repeat;
  background-size: 44px 100%, 44px 100%, 13px 100%, 13px 100%;
  background-attachment: local, local, scroll, scroll;
}
table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left; font-size: 11px; font-weight: normal;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap; background: #fafafa;
}
tbody tr { border-bottom: 1px solid var(--border); transition: background .1s; }
tbody tr:last-child { border-bottom: none; }

/* Bootstrap puts a bottom-border WIDTH on every .table cell and leaves the
   colour at currentColor, so cells inherited the text colour as a rule: black
   under the last row, and green under a coloured figure. Our own rule lives on
   the row, so the cells only need the right colour and none on the last row. */
.table > :not(caption) > * > * { border-bottom-color: var(--border); }
.table > tbody > tr:last-child > * { border-bottom-width: 0; }
tbody tr:hover { background: #fafbff; }
tbody td { padding: 11px 14px; vertical-align: middle; }

/*
 * One table. `.data-table` is the name to use from here on; the three older
 * names are kept beside it so no page had to change in the same breath as the
 * stylesheet, and so a view missed in the sweep still renders.
 */
.data-table { width: 100%; border-collapse: collapse; }
.table-wrap > table.data-table { min-width: 760px; }

/* List tables scroll rather than squeeze. Without a floor the browser keeps
   shrinking columns until names break one word per line and badges clip. Scoped
   to `.table-stack` so the small tables embedded in dashboard and detail
   columns are left to fit their narrower space; below 768px the stacked layout
   resets it anyway. */
.table-wrap > table.table-stack { min-width: 760px; }

/* Person cell: avatar plus name over identifier, kept on one line */
.cell-user { display: flex; align-items: center; gap: 9px; }
.cell-user .cell-user-body { min-width: 0; }
.cell-user .cell-user-name {
  display: block; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
a.cell-user-name:hover { color: var(--primary); }
.cell-user .cell-user-meta { font-size: 11.5px; color: var(--muted); white-space: nowrap; }

/* Table links carry the app's own accent, not the Bootstrap blue that
   `.link-primary` brings with it. */
.link-name { color: var(--text); font-weight: 500; }
.link-name:hover { color: var(--primary); }

/* Columns whose content should never wrap mid-value */
.td-nowrap, td.td-date, th.td-date { white-space: nowrap; }

/* ── 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;
}
/*
 * Six tones, one badge. Every status in the product maps to one of these
 * through status_badge(); the older per-module colours below stay only for
 * priorities, types and the like, which are not statuses.
 */
.badge.is-draft    { background: var(--tone-draft-bg);    color: var(--tone-draft-fg); }
.badge.is-progress { background: var(--tone-progress-bg); color: var(--tone-progress-fg); }
.badge.is-info     { background: var(--tone-info-bg);     color: var(--tone-info-fg); }
.badge.is-ok       { background: var(--tone-ok-bg);       color: var(--tone-ok-fg); }
.badge.is-warn     { background: var(--tone-warn-bg);     color: var(--tone-warn-fg); }
.badge.is-stop     { background: var(--tone-stop-bg);     color: var(--tone-stop-fg); }

.badge-active      { background: #e8faf3; color: #1a9e5c; }
.badge-not-started { background: #fef9e7; color: #d68910; }
.badge-on-hold     { background: #f0f0f0; color: #7a7a8a; }
.badge-completed   { background: #e8f8f0; color: #1e8449; }
.badge-in-progress { background: #e8f4fd; color: #1a6eb5; }
.badge-waiting     { background: #f4f4f4; color: #7a7a8a; }
.badge-ongoing     { background: #fff3e0; color: #e65100; }
.badge-overdue     { background: #fdecea; color: #c0392b; }
.badge-high        { background: #fdecea; color: #c0392b; }
.badge-medium      { background: #fff8e1; color: #d68910; }
.badge-low         { background: #e8f8f0; color: #1e8449; }
.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; }
/* Used across seven HR views but never defined, so they rendered as unstyled
   text - an "Active" / "No login" pill with no background at all. */
.badge-success     { background: #e8faf3; color: #1a9e5c; }
.badge-draft       { background: #f0f0f0; color: #7a7a8a; }
.badge-pending     { background: #fef4e0; color: #b9770e; }

/* ── 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 ── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 7px; font-size: 13.5px;
  font-weight: normal; cursor: pointer; border: none;
  transition: opacity .15s, box-shadow .15s;
}
.btn:hover { opacity: .88; }
.btn-primary  { background: var(--primary); color: #fff; }
.btn-outline  { background: transparent; border: 1.5px solid var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-danger   { background: var(--danger); color: #fff; }
.btn-sm       { padding: 5px 12px; font-size: 12.5px; border-radius: 6px; }
.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; }

/* One header pattern for every list page. `.flex-between` did not wrap, so the
   page actions were pushed off the right edge as soon as the filter bar grew. */
.list-header {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 12px; margin-bottom: 20px;
}
.list-header > form, .list-header .filters-bar { margin: 0; flex: 1 1 340px; }
.list-header-actions { display: flex; flex-wrap: wrap; gap: 8px; flex: 0 0 auto; }
.list-count { font-size: 13px; color: var(--muted); margin: -4px 0 12px; }
.list-count strong { color: var(--text); font-weight: 600; }
.list-header-actions .btn { white-space: nowrap; }
@media (max-width: 700px) {
  .list-header-actions { width: 100%; }
  .list-header-actions .btn { flex: 1 1 auto; justify-content: center; }
}
.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); }
.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); }

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

/* Bootstrap sizes .form-select/.form-control at width:100%, which inside a
   wrapping flex row meant one control per line however wide the screen was.
   Sizing them to content puts the whole filter bar back on a single row. */
.filters-bar .form-control,
.filters-bar .form-select { width: auto; min-width: 150px; }
/* Only when the box is a child of the bar itself: inside a labelled field the
   bar's column direction would read this basis as a height. */
.filters-bar > .search-box { flex: 0 1 260px; }
/* Keep room for the magnifier: the padding rule above is more specific than
   `.search-box input`, so without this the icon sits on top of the text. */
.filters-bar .search-box .form-control { width: 100%; min-width: 0; padding-left: 32px; }
/* btn-outline-secondary - match the old btn-outline look */
.btn-outline-secondary {
  background: transparent; border: 1.5px solid var(--border);
  color: var(--text); border-radius: 7px;
}
.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-info    { background: #eef4fd; color: #1f4e79; border: 1px solid #bcd4ee; }
.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 ── */
/* minmax(0, 1fr) rather than 1fr: a plain `1fr` track cannot shrink below its
   min-content, so one unbreakable value (a work email, a long URL) pushed the
   whole grid past the card it sits in. The wrap rule then breaks that value
   instead of letting it spill. */
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.detail-item { min-width: 0; }
.detail-item > div { overflow-wrap: anywhere; }
.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; }
.login-box p.login-aside { margin: 18px 0 0; text-align: center; font-size: 13px; }

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

/* ── Mobile navigation ── */
/* The hamburger only exists on small screens; on desktop the sidebar is
   always visible so the control would be redundant. */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-left: -6px;
  background: none; border: 1px solid transparent; border-radius: 8px;
  color: var(--text); cursor: pointer; flex-shrink: 0;
}
.nav-toggle:hover { background: rgba(0,0,0,.05); }
.nav-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.nav-backdrop {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(15,17,32,.5);
  opacity: 0; transition: opacity .2s ease;
}
body.nav-open .nav-backdrop { opacity: 1; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform .25s ease;
    width: min(84vw, 300px);
  }
  body.nav-open .sidebar { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.35); }
  body.nav-open { overflow: hidden; }   /* stop the page scrolling behind the drawer */

  .nav-toggle { display: inline-flex; }

  .main-wrap { margin-left: 0; }
  .stats-grid { grid-template-columns: 1fr 1fr; }

  /* Tighter gutters so content isn't squeezed on a phone */
  .topbar { padding: 0 14px; gap: 10px; }
  .topbar h1 { font-size: 16px; }
  .page-content { padding: 16px 14px; }

  /* Wide tables scroll inside their card instead of stretching the page */
  .table-wrap, .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Filter bars and page actions stack rather than overflow */
  .filters-bar { flex-wrap: wrap; }
  .filters-bar > * { flex: 1 1 calc(50% - 5px); min-width: 0; }
  .filters-bar .form-control,
  .filters-bar .form-select { width: 100%; min-width: 0; }
  /* Search gets the full row; the buttons only need their own width */
  .filters-bar > .search-box,
  .filters-bar > .filter-field:has(.search-box) { flex: 1 1 100%; }
  .filters-bar > .btn { flex: 0 1 auto; }

  /* Two-column page layouts stack on a phone.
     These pages pair a `flex-1` main column with a fixed-width aside (e.g. the
     260px balance panel on the leave form). Because `flex-1` resolves to a 0
     basis while the aside sets flex-shrink:0, the main column collapsed to a
     few pixels instead of wrapping - the leave form rendered one letter per
     line. Stacking is the correct mobile presentation anyway.
     `!important` is required because those widths are inline styles. */
  .row-layout { flex-direction: column; }
  .row-layout > * {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: auto !important;
  }

}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .sidebar, .nav-backdrop { transition: none; }
}

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

.te-card { overflow: visible; }

/* Main table */
.te-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.te-head th {
  background: #fafafa; font-size: 11px; font-weight: normal;
  text-transform: uppercase; letter-spacing: .5px; color: var(--muted);
  padding: 10px 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 */
/* The child combinator matters: this is meant for the wrapper cell that holds
   the nested subitem table, but as a descendant selector the !important zeroed
   the padding on every cell inside it too, so subitem rows sat flush against
   the edge and out of line with their own headers. */
.te-sub-section > td { padding: 0 !important; border-bottom: 1px solid var(--border); }
.te-sub-wrap { background: #f8f9fe; border-top: 1px solid var(--border); }

/* Subitem table */
.te-sub-table { width: 100%; border-collapse: collapse; }
.te-sub-head th {
  background: #f0f1f8; font-size: 10.5px; font-weight: normal;
  text-transform: uppercase; letter-spacing: .4px; color: #8a90b0;
  padding: 7px 14px 7px 14px; border-bottom: 1px solid #e0e2f0;
  white-space: nowrap; text-align: left;
}
/* The first column is the subitem name now that the completed checkbox has
   gone; it was inheriting the checkbox's 36px slot and centring, which broke
   even short names like "web dev" across two lines. */
.te-sub-head th:first-child { width: 24%; min-width: 190px; }

/* Subitem data rows */
.te-sub-row td {
  padding: 9px 14px; border-bottom: 1px solid #eaedf5;
  font-size: 13px; vertical-align: middle;
}
.te-sub-row td:first-child { width: 24%; min-width: 190px; }
.te-sub-row:hover td { background: #f0f2fc; }
.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;
}
/* Says what a field does, under it: quieter than the label above it. */
.te-form-hint {
  display: block; font-size: 10.5px; color: var(--muted);
  margin-top: 3px; line-height: 1.3;
}


/* ── 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 */
/*
 * Widths. Pages run the full width of the window: a list has columns to show
 * and a detail page has sections side by side, and capping either one left a
 * band of empty ground on the right of every screen. Only a short single-column
 * form still reads better narrow, so those keep a ceiling.
 */
.card-sm  { max-width: 520px; }
.card-md  { max-width: 720px; }
.card-lg  { max-width: 1100px; }
.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; }
.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; }

/*
 * One empty state. It carries the way out, because "nothing here yet" and
 * "nothing matches these filters" need different ways out: make something, or
 * clear the filter.
 */
.blank-slate {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 44px 20px; text-align: center; color: var(--muted);
}
.blank-slate .bs-head { font-size: 14.5px; font-weight: 600; color: var(--text); }
.blank-slate .bs-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 6px; }
td > .blank-slate { padding-block: 34px; }

/* Money and counts line up down their column, and read as one number. */
.ta-right, td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Filter and Clear sit on the baseline of the controls beside them. */
.filters-bar .filter-actions { display: flex; gap: 8px; align-self: flex-end; }

/* Filter controls say what they filter, rather than relying on a placeholder. */
.filter-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.filter-field > label {
  font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
}
/* The controls used to sit straight in the bar, so the sizing rules addressed
   them as its children. They are a step further down now, inside their label's
   wrapper, and the bar lays out the wrappers instead. */
.filters-bar .filter-field { flex: 0 1 auto; }
.filters-bar .filter-field:has(.search-box) { flex: 0 1 280px; }
.filters-bar .filter-field .search-box { flex: none; width: 100%; }
.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) */
.section-label {
  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 */
.card-xs { max-width: 480px; }

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

/* Calendar cell footnote: holiday name, or the leave type on a leave day */
.cal-note {
  font-size: 9px; color: var(--muted); line-height: 1.15; text-align: center;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════
   Employee profile
   Identity as one band, the numbers people come for beneath it, reference
   detail in two columns. Nothing is hidden behind a tab.
   ══════════════════════════════════════════════════════════════ */
.ep-identity { display: flex; flex-direction: row; align-items: center; gap: 20px; padding: 20px 24px; flex-wrap: wrap; }
.ep-id-body { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ep-id-name { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ep-id-name .nm { font-size: 21px; letter-spacing: -.3px; }
.ep-id-name .pn { font-size: 13.5px; }
.ep-id-role { font-size: 14px; }
.ep-id-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.ep-id-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.ep-id-actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.ep-id-actions .btn { height: 44px; }

.ep-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--border); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
}
.ep-stat { background: var(--surface); padding: 15px 20px; }
.ep-stat .n { font-size: 24px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ep-stat .n.is-text { font-size: 17px; line-height: 1.5; }
.ep-stat .l { font-size: 11.5px; color: var(--muted); margin-top: 3px; }

.ep-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; margin-top: 16px; }
.ep-hint { font-size: 12px; }
.ep-access-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.ep-access-actions .ep-danger { margin-left: auto; }

@media (max-width: 900px) {
  .ep-grid { grid-template-columns: minmax(0, 1fr); }
  .ep-id-actions { margin-left: 0; width: 100%; }
  .ep-id-actions .btn { flex: 1 1 auto; justify-content: center; }
  .ep-access-actions .ep-danger { margin-left: 0; }
}

/* ══════════════════════════════════════════════════════════════
   Team approvals
   Leave and attendance corrections are the same job, so one queue holds both,
   ordered by how long each has waited.
   ══════════════════════════════════════════════════════════════ */
.tq-crumb { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; font-size: 13px; }
.tq-crumb a { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); }
.tq-crumb a svg { transform: rotate(180deg); width: 15px; height: 15px; }
.tq-crumb .muted { font-size: 12.5px; }
.tq-hr-link { margin-left: auto; color: var(--info) !important; }
.tone-blue-badge { background: #eef5fd; color: #1f6a9c; }

.tq-tabs { display: flex; align-items: center; gap: 24px; padding: 0 24px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.tq-tab { padding: 15px 2px; font-size: 14px; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.tq-tab.is-on { color: var(--text); box-shadow: inset 0 -2px 0 var(--primary); }
.tq-count { background: var(--primary); color: #fff; font-size: 11px; padding: 1px 8px; }
.tq-count.is-muted { background: #eeeef5; color: var(--muted); }
.tq-sort { margin-left: auto; font-size: 12.5px; color: var(--muted); }

/* Sized so the whole row - person, request, age and the decision - fits one
   line in the ~1000px content column; wrapping every row cost 60px each. */
.tq-row { display: flex; align-items: center; gap: 11px; padding: 10px 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.tq-row:last-child { border-bottom: none; }
.tq-row.is-attendance { background: #fcfcfe; }
.tq-who { width: 128px; flex-shrink: 0; min-width: 0; }
.tq-who .nm { font-size: 14px; font-weight: 600; }
.tq-who .mt { font-size: 11.5px; color: var(--muted); }
.tq-kind { width: 52px; flex-shrink: 0; }
.tq-fix-badge { background: #fff8ed; color: #9a5b00; }
.tq-detail { flex: 1 1 200px; min-width: 0; }
.tq-detail .d1 { font-size: 14px; }
.tq-detail .d2 {
  font-size: 12.5px; color: var(--muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; margin-top: 2px;
}
.tq-fix { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.tq-fix .dt { margin-right: 4px; }
.tq-fix .is-changed { color: var(--primary); font-weight: 600; }
.tq-fix svg { color: var(--muted); }

.tq-age { font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; min-width: 38px; text-align: center; }
.tq-age.is-fresh { background: #eef1f6; color: #5b6472; }
.tq-age.is-stale { background: #fff3e0; color: #9a5b00; }
.tq-age.is-old   { background: #fdecea; color: #b3261e; }

.tq-act { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.tq-comment { width: 136px; height: 38px; }
.tq-act .btn, .tq-view { height: 38px; display: inline-flex; align-items: center; padding-left: 13px; padding-right: 13px; }
.tq-noaction { font-size: 12.5px; flex-shrink: 0; }

.tq-legend { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }
.tq-legend code { background: var(--bg); padding: 1px 5px; border-radius: 4px; }
.tq-col-type { width: 78px; }
.tq-code { min-width: 38px; justify-content: center; letter-spacing: .3px; }
.tq-rowlink { font-size: 12.5px; color: var(--primary); }

/* Group heading inside the history table, so both groups share one header */
.tq-band td {
  background: #fafafa; font-size: 11px; text-transform: uppercase;
  letter-spacing: .5px; color: var(--muted);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.tq-band td .n { text-transform: none; letter-spacing: 0; }

@media (max-width: 1000px) {
  .tq-act { flex: 1 1 100%; }
  .tq-comment { flex: 1 1 auto; width: auto; }
  .tq-view { margin-left: auto; }
}

/* ══════════════════════════════════════════════════════════════
   Leave request detail
   The span and the day count are the decision, so they are typeset as the
   headline; the balance panel and the overlap list are the two things an
   approver would otherwise leave the page to find.
   ══════════════════════════════════════════════════════════════ */
.lr-crumb { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; font-size: 13px; }
.lr-crumb a { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); }
.lr-crumb a svg { transform: rotate(180deg); width: 15px; height: 15px; }
.lr-crumb .muted { font-size: 12.5px; }

/* flex-direction is explicit because Bootstrap's .card sets column, which
   would turn the basis values below into heights. */
.lr-head { display: flex; flex-direction: row; align-items: stretch; flex-wrap: wrap; }
.lr-head-main { flex: 1 1 460px; min-width: 0; padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; }

.lr-who { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lr-who-body { min-width: 0; }
.lr-who-body .nm { font-size: 15px; font-weight: 600; }
.lr-who-body .mt { font-size: 12px; color: var(--muted); }

.lr-span { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.lr-span-part .big { font-size: 26px; line-height: 1.1; letter-spacing: -.4px; }
.lr-span-part .big.is-accent { color: var(--primary); }
.lr-span-part .sub { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.lr-span-part.is-note { padding-bottom: 3px; }
.lr-span-arrow { color: var(--muted); font-size: 22px; padding-bottom: 22px; }
.lr-span-rule { width: 1px; align-self: stretch; background: var(--border); }

.lr-balance {
  flex: 0 0 260px; border-left: 1px solid var(--border); background: #faf9ff;
  padding: 18px 22px; display: flex; flex-direction: column; gap: 10px;
}
.lr-balance-figures { display: flex; align-items: baseline; gap: 10px; color: var(--muted); }
.lr-balance-figures .from { font-size: 30px; line-height: 1; color: var(--text); }
.lr-balance-figures .to   { font-size: 30px; line-height: 1; color: var(--primary); }
.lr-balance-figures .to.is-over { color: var(--danger); }
.lr-balance-bar { height: 7px; border-radius: 20px; background: var(--border); overflow: hidden; display: flex; }
.lr-balance-bar .used { background: var(--primary); }
.lr-balance-bar .this { background: #b9aef5; }
.lr-balance-note, .lr-balance-none { font-size: 12px; line-height: 1.55; }

.lr-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; align-items: start; margin-bottom: 14px; }

.lr-reason { margin: 8px 0 0; padding: 4px 0 4px 14px; border-left: 3px solid var(--border); font-size: 15px; line-height: 1.6; }
.lr-reason-none { margin-top: 8px; font-size: 14px; }
.lr-doc { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12.5px; color: var(--muted); }
.lr-doc svg { width: 15px; height: 15px; }

.lr-overlap-none { margin-top: 8px; font-size: 13px; line-height: 1.55; }
.lr-overlaps { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.lr-overlap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lr-overlap .nm { font-size: 13.5px; }
.lr-overlap .dt { font-size: 12.5px; }
.lr-overlap-days { margin-left: auto; background: #fdf1ef; color: #c0392b; }

/* Trail: one rail, one dot per step, comments inline under the step */
.lr-trail { display: flex; flex-direction: column; margin-top: 10px; }
.lr-step { display: flex; gap: 14px; }
.lr-step-rail { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lr-step:not(.is-last) .lr-step-rail::after { content: ""; width: 2px; flex-grow: 1; background: var(--border); }
.lr-step-body { padding-bottom: 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lr-step.is-last .lr-step-body { padding-bottom: 0; }
.lr-step-body .t { font-size: 13.5px; font-weight: 600; }
.lr-step-body .s { font-size: 12.5px; }
.lr-waiting { color: var(--danger); }
.lr-step-comment {
  font-size: 12.5px; padding: 7px 11px; background: #f7f7fb;
  border-radius: 7px; line-height: 1.5; margin-top: 2px;
}
.lr-step .dot {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: #fff; font-size: 13px; line-height: 1;
}
.lr-step .dot svg { width: 12px; height: 12px; }
.lr-step .dot.is-done   { background: var(--success); }
.lr-step .dot.is-bad    { background: var(--danger); }
.lr-step .dot.is-live   { border: 2px solid var(--warning); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 9px var(--warning); }
.lr-step .dot.is-idle   { border: 2px solid var(--border); }
.lr-step .dot.is-future { border: 2px dashed var(--border); }

.lr-actions { padding: 14px 20px; display: flex; flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }
.lr-decide { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex-grow: 1; }
.lr-comment { flex: 1 1 240px; min-width: 0; max-width: 380px; height: 44px; }
.lr-actions .btn { height: 44px; }
.lr-primary { padding-left: 22px; padding-right: 22px; }
.lr-actions-rest { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.lr-cancel-note {
  flex: 1 1 100%; display: flex; align-items: center; gap: 10px;
  background: #fff8e1; border: 1px solid #f9e79f; color: #7d6608;
  border-radius: 8px; padding: 11px 14px; font-size: 13px;
}
.lr-cancel-note svg { width: 16px; height: 16px; flex-shrink: 0; }

@media (max-width: 900px) {
  .lr-grid { grid-template-columns: minmax(0, 1fr); }
  .lr-balance { flex-basis: 100%; border-left: none; border-top: 1px solid var(--border); }
  .lr-actions-rest { margin-left: 0; }
}

/* ══════════════════════════════════════════════════════════════
   Pending regularisations
   A regularisation is a diff on one attendance day, so the layout puts the
   before and after side by side and marks only the value that moves. Age is
   the other thing an approver needs: these sit for weeks otherwise.
   ══════════════════════════════════════════════════════════════ */
.reg-summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 1px; background: var(--border); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
}
.reg-summary-item { background: var(--surface); padding: 14px 18px; }
.reg-summary-item .n {
  font-size: 24px; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.reg-summary-item .n.is-alarming { color: var(--danger); }
.reg-summary-item .l { font-size: 11.5px; color: var(--muted); margin-top: 3px; }

/* ── Pending regularisations queue ───────────────────────────────────────
   One row per request. The columns are fixed widths so a legend at the top
   can name them once, rather than every row repeating "on record" and
   "requested" labels. box-sizing on the two panels is load-bearing: without
   it their padding and border sit outside the declared width and push the
   right-hand columns into each other. */
.reg-queue { overflow: hidden; }

/* The topbar already names the page, so the heading only has to say which
   slice of it this is, and how the list is ordered. */
.reg-sort { font-size: 11.5px; font-weight: normal; color: var(--muted); margin-left: 6px; }

.reg-legend,
.reg-row { display: flex; align-items: center; gap: 10px; padding: 10px 20px; }
.reg-row { border-bottom: 1px solid var(--border); }
.reg-row:last-child { border-bottom: none; }

.reg-legend {
  padding: 8px 20px; background: #fafafa;
  border-bottom: 1px solid var(--border);
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px; color: var(--muted);
}
.reg-legend .reg-col-mid { display: flex; align-items: center; gap: 10px; }
.reg-legend .is-requested { color: var(--primary); }
/* The two panel columns share their width with the rows, but a header label
   is a label: strip the panel's own background, border and padding so it does
   not read as a filled box sitting in the header. */
.reg-legend .reg-side,
.reg-legend .reg-side.is-requested {
  display: block; background: none; border-color: transparent; padding: 0;
}
/* The trailing columns are spacers in the header, so they must not carry the
   38px height the comment field and buttons need in a row. */
.reg-legend .reg-col-note,
.reg-legend .reg-col-act { height: auto; }
/* One line per label. "Hours" is the tight one, and a wrapped header makes
   the whole row two lines tall. */
.reg-legend span { white-space: nowrap; }

/* The column grid, shared by the legend and every row. The avatar column is
   a spacer in the legend and the avatar itself in a row, so both need the
   same width or every label downstream sits 38px to the left. */
.reg-col-av   { width: 38px; flex-shrink: 0; }
.reg-col-who  { width: 140px; flex-shrink: 0; min-width: 0; }
.reg-col-mid  { width: 434px; flex-shrink: 0; }
.reg-col-age  { width: 112px; flex-shrink: 0; }
.reg-col-note { width: 176px; flex-shrink: 0; }
.reg-col-act  { width: 156px; flex-shrink: 0; display: flex; gap: 6px; }

.reg-col-who .nm { font-weight: 600; font-size: 14px; }
.reg-col-who .cd { font-size: 11.5px; color: var(--muted); }

.reg-change { display: flex; align-items: center; gap: 10px; }
.reg-date { width: 78px; flex-shrink: 0; font-size: 13px; font-weight: 500; }

/* On record, then requested. Two panels, never one run of values. */
.reg-side {
  width: 110px; flex-shrink: 0; box-sizing: border-box;
  display: flex; align-items: center; gap: 8px;
  background: #f8f9fb; border: 1px solid var(--border); border-radius: 7px;
  padding: 5px 10px;
  font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.reg-side.is-requested { width: 136px; background: #f6f4ff; border-color: #ddd6fb; }
.reg-side .t { display: inline-flex; align-items: baseline; gap: 4px; }
.reg-side .t .k {
  font-size: 9px; font-weight: 400; color: var(--muted);
  text-transform: uppercase; letter-spacing: .3px;
}
/* Only the value that actually moves is marked, so the edit catches the eye. */
.reg-side .t.is-changed { color: var(--primary); font-weight: 700; }
.reg-nil { color: #b0b0c0; }

.reg-arrow { width: 18px; flex-shrink: 0; text-align: center; color: var(--muted); font-size: 16px; }
.reg-hrs { width: 52px; flex-shrink: 0; font-size: 12.5px; color: var(--muted); }

.reg-reason {
  margin-top: 4px; font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.reg-age {
  box-sizing: border-box; text-align: center;
  padding: 4px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 600; white-space: nowrap; letter-spacing: .2px;
}
.reg-age.is-fresh { background: #eef1f6; color: #5b6472; }
.reg-age.is-stale { background: #fff3e0; color: #9a5b00; }
.reg-age.is-old   { background: #fdecea; color: #b3261e; }

.reg-act { display: contents; }
.reg-col-note { height: 38px; }
.reg-col-act .btn { height: 38px; padding-left: 13px; padding-right: 13px; }

/* A run of requests from one person, offering to decide them together. */
.reg-band {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 20px; background: var(--primary-lt);
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.reg-band svg { flex-shrink: 0; color: var(--primary); }
.reg-band form { margin-left: auto; flex-shrink: 0; }

/* Below the width the fixed grid needs, the legend stops meaning anything
   and the columns wrap instead. */
@media (max-width: 1180px) {
  .reg-legend { display: none; }
  .reg-row { flex-wrap: wrap; }
  .reg-col-mid { width: auto; flex: 1 1 434px; }
  .reg-col-note { flex: 1 1 160px; width: auto; }
}
@media (max-width: 640px) {
  /* The two panels are the whole point of the row, so they need more air
     between them here, not less: with the arrow squeezed to 6px a side they
     ran together into one strip. */
  .reg-change { flex-wrap: wrap; gap: 12px; }
  .reg-date { width: 100%; }
  .reg-arrow { width: auto; }
  .reg-col-who, .reg-col-age { width: auto; }
  .reg-col-act { width: 100%; }
  .reg-col-act .btn { flex: 1 1 auto; justify-content: center; }

  /* Stacked, a request is a block about 280px tall rather than a line, so the
     10px that separated rows on a desktop leaves its content sitting on the
     divider and the next request starting straight after it. */
  .reg-row { padding-top: 18px; padding-bottom: 18px; }
  .reg-band { padding-top: 14px; padding-bottom: 14px; }
}

/* ── Productivity rules page ── */
.heading-xs { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
/* Formula lines: monospace so the operators line up, and pre-wrap so the
   indented continuation stays put without turning into an overflow. */
.rule-formula {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; line-height: 1.8; white-space: pre-wrap;
  background: var(--surface-2, #f4f6f8); border: 1px solid var(--border);
  border-radius: 8px; padding: 13px 16px; margin: 10px 0 12px;
  overflow-x: auto;
}
/* Permanent caveat on the rules page. Deliberately NOT `.alert`: app.js
   auto-dismisses that class after four seconds, which is right for a flash
   message and wrong for text that has to stay on the page. */
.rule-note {
  background: #fef9e7; color: #7d6608; border: 1px solid #f9e79f;
  border-left: 3px solid #d4ac0d; border-radius: 8px;
  padding: 12px 16px; font-size: 13px; line-height: 1.6; margin: 12px 0 0;
}
.rule-note strong { color: #6b5606; }

.rule-list { margin: 0; padding-left: 20px; }
.rule-list li { margin-bottom: 7px; }
.rule-list li:last-child { margin-bottom: 0; }

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

/* System Access: the sign-in address sits beside its badge, and drops to its
   own line rather than being squeezed when the card is narrow. */
.access-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.access-line .access-email { font-size: 12px; }
.credential-panel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.credential-panel .credential-text { flex: 1; min-width: 220px; }
.credential-panel .credential-hint { font-size: 12px; margin-top: 2px; }
.credential-panel .credential-value { font-size: 15px; padding: 6px 10px; background: #fff; border: 1px solid #e0c060; border-radius: 6px; user-select: all; word-break: break-all; }
.el-views { display: flex; gap: 6px; }
.el-counts { display: flex; flex-wrap: wrap; gap: 10px; }
.el-count { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; color: var(--text); }
.el-count.is-on { border-color: var(--primary); }
.el-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; margin: 0; }

/* 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-photo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; margin-bottom: 6px; }
.org-avatar { width: 40px; height: 40px; font-size: 14px; margin: 0 auto 6px; }
.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-holiday { background: #fef9e7; }
.leave-calendar .cal-rh      { background: #eaf4fb; }
.leave-calendar .cal-weekend { background: var(--bg); }
.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); }
.cal-holiday           { background: #fef9e7; border-color: #e0c04d; }
/* Optional, and only for whoever claimed it, so it must not read as the same
   kind of day as a company-wide holiday. */
.cal-rh                { background: #eaf4fb; border-color: #93c5e8; }
.cal-holiday-label.is-rh { color: #1f6a9c; }
.cal-rh-tag {
  display: inline-block; padding: 0 4px; border-radius: 3px;
  background: #d6e9f7; color: #1f6a9c;
  font-size: 9px; font-weight: 700; font-style: normal; letter-spacing: .3px;
}
.cal-day-num           { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.cal-holiday-label     { font-size: 10px; color: #b7950b; font-style: italic; margin-bottom: 3px; }
.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; }

/* ══════════════════════════════════════════════════════════════
   Mobile layout overrides
   Kept at the end of the file on purpose: the multi-column grid
   helpers below are declared later in this stylesheet than the main
   responsive block, so an override placed there loses the cascade.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Fixed track lists (e.g. `300px 1fr`, `2fr 1fr 1fr 1fr 1fr`) don't fit a
     phone - trailing columns were clipped off the right edge, so the employee
     profile lost half of Personal Details, Emergency Contact and Employment.
     `.form-grid` already collapsed at 600px; this brings the rest in line. */
  .grid-sidebar,
  .grid-2col, .grid-2-1col, .grid-1-2col,
  .detail-grid,
  .subitem-grid-top, .subitem-grid-bottom {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ══════════════════════════════════════════════════════════════
   HR dashboard - "Needs your attention" action list
   ══════════════════════════════════════════════════════════════ */
.dash-actions { display: flex; flex-direction: column; }
.dash-action {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 22px; border-bottom: 1px solid var(--border);
  color: var(--text); transition: background .12s;
}
.dash-action:last-child { border-bottom: none; }
.dash-action:hover { background: #fafbff; }
.dash-action-count {
  min-width: 36px; height: 36px; padding: 0 9px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; font-size: 15px; flex-shrink: 0;
  /* Solid chip in the tone's colour - the count is the thing being scanned */
  background: var(--cta-chip, var(--primary-lt));
  color: var(--cta-chip-ink, var(--primary));
}
.dash-action-label { flex: 1; font-size: 13.5px; }
.dash-action-go { color: var(--muted); flex-shrink: 0; transition: transform .14s ease, color .14s ease; }
.dash-action:hover .dash-action-go { color: var(--cta-chip, var(--primary)); transform: translateX(3px); }

/* A coloured rail keeps rows distinguishable once several are stacked */
.dash-action { border-left: 3px solid transparent; }
.dash-action:hover { background: var(--cta-bg, #fafbff); border-left-color: var(--cta-chip, var(--primary)); }

@media (prefers-reduced-motion: reduce) {
  .dash-action-go { transition: none; }
  .dash-action:hover .dash-action-go { transform: none; }
}

/* ── Leave form: live duration / conflict preview ── */
.leave-preview {
  border: 1px solid #d9e6f7; background: #f4f9ff; color: #23486d;
  border-radius: 8px; padding: 11px 14px; font-size: 13px; line-height: 1.65;
  margin: -4px 0 14px;
}
.leave-preview.is-warn  { background: #fff9ec; border-color: #f2dca6; color: #7a5a12; }
.leave-preview.is-error { background: #fdecea; border-color: #f5c2bd; color: #a03228; }
.leave-preview .lp-muted { color: inherit; opacity: .75; }
.leave-preview .lp-warn  { color: #c0392b; font-weight: 500; }

/* ── Sidebar footer account links (Password · Log out) ── */
/* One link per line. */
.sidebar-footer-links { margin-top: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.sidebar-footer-links a { font-size: 11.5px; color: var(--sidebar-fg-faint); }
.sidebar-footer-links a:hover { color: var(--sidebar-fg-strong); }
.sidebar-footer-links a.is-active { color: var(--sidebar-fg-strong); }

/* ══════════════════════════════════════════════════════════════
   Stacked tables on small screens
   A table wide enough to need horizontal scrolling is hard to read on a
   phone - each row wrapped to five or six lines. `.table-stack` turns rows
   into cards below 768px, with each cell labelled from its data-label.
   Cells without a data-label (the actions column) render full width.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .table-wrap > table.table-stack { min-width: 0; }
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }

  .table-stack tr {
    border: 1px solid var(--border); border-radius: 10px;
    padding: 6px 4px; margin-bottom: 10px; background: var(--surface);
  }
  .table-stack tr:hover { background: var(--surface); }

  .table-stack td {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 7px 12px; border: none; text-align: left !important;
  }
  .table-stack td + td { border-top: 1px solid #f4f4f8; }

  /* Let the value side shrink so long names ellipsis inside the card
     instead of running past its right edge. */
  .table-stack td > * { min-width: 0; }
  .table-stack td.td-truncate { max-width: none; }
  .table-stack td .cell-user { min-width: 0; }
  /* A value with a note under it stays one block, right aligned (6b). */
  .table-stack td .cell-stack { text-align: right; }

  .table-stack td[data-label]::before {
    content: attr(data-label);
    font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
    color: var(--muted); flex-shrink: 0;
  }

  /* Actions sit on their own full-width row at the foot of the card */
  .table-stack td:not([data-label]) { justify-content: flex-end; }

  /* The empty-state cell should not look like a labelled field */
  .table-stack td[colspan] { justify-content: center; }
  /* A row with no actions would otherwise draw an empty band here. */
  .table-stack td.actions-cell.is-empty { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   Form padding
   Form bodies previously carried ad-hoc inline padding - 20px 24px in most
   places, 24px in two, 30px in another, and none on the login card - so the
   gutter changed from screen to screen. `.form-body` is the single source of
   truth and matches .card-body, which the other half of the forms already use.

   Both shrink on small screens: an inline 24px inset on top of the page's own
   gutter left roughly 299px of a 375px viewport for the fields themselves.
   ══════════════════════════════════════════════════════════════ */
.form-body { padding: 20px 24px; }

@media (max-width: 768px) {
  .form-body, .card-body { padding: 16px 14px; }
  /* 40px of side padding on a 375px screen leaves the fields under 300px. */
  .login-box { padding: 28px 22px; }
}

/* ══════════════════════════════════════════════════════════════
   Action prompts - shared tone palette
   One set of tones drives both the Team Approvals chips and the HR
   dashboard rows, so a queue reads the same colour wherever it appears:
   purple = leave, amber = attendance, blue = informational, red = problem.
   Each tone exposes the same four variables, so a new tone is four values
   and needs no extra component CSS.
   ══════════════════════════════════════════════════════════════ */
.tone-primary { --cta-bg:#f4f2ff; --cta-line:#dcd5fb; --cta-ink:#4a37c8; --cta-chip:#6c5ce7; --cta-chip-ink:#fff; }
.tone-amber   { --cta-bg:#fff8ed; --cta-line:#f2ddb4; --cta-ink:#8a5a08; --cta-chip:#f0a52a; --cta-chip-ink:#402700; }
.tone-blue    { --cta-bg:#eef5fd; --cta-line:#cfe1f6; --cta-ink:#1a5a94; --cta-chip:#1f6a9c; --cta-chip-ink:#fff; }
.tone-red     { --cta-bg:#fdf1ef; --cta-line:#f6cec7; --cta-ink:#9e2f21; --cta-chip:#e74c3c; --cta-chip-ink:#fff; }

/* ── Team Approvals: "what's waiting on me" chips ── */
.approval-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.approval-cta-item {
  flex: 1 1 250px;
  display: flex; align-items: center; gap: 13px;
  padding: 14px 16px; border-radius: 12px;
  background: var(--cta-bg, var(--surface));
  border: 1px solid var(--cta-line, var(--border));
  color: var(--cta-ink, var(--text));
  font-size: 13.5px; line-height: 1.35;
  transition: transform .14s ease, box-shadow .14s ease;
}
.approval-cta-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(45, 45, 58, .10);
}
.approval-cta-item:focus-visible { outline: 2px solid var(--cta-chip); outline-offset: 2px; }

.approval-cta-count {
  width: 40px; height: 40px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px; font-size: 17px;
  background: var(--cta-chip); color: var(--cta-chip-ink);
}
/* Arrow sits at the end and nudges on hover to signal it's a jump link */
.approval-cta-item::after {
  content: '→'; margin-left: auto; opacity: .5; flex-shrink: 0;
  transition: transform .14s ease, opacity .14s ease;
}
.approval-cta-item:hover::after { opacity: 1; transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .approval-cta-item, .approval-cta-item::after { transition: none; }
  .approval-cta-item:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════
   Attendance check-in
   The page was built from inline styles on a 480px-capped card, so it sat
   in the top-left of a wide screen with a large empty area beneath. These
   classes give it a balanced two-column layout and let the clock and the
   check-in button carry the hierarchy they deserve.
   ══════════════════════════════════════════════════════════════ */
.checkin-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }

/* ── Hero card ── */
.checkin-hero { overflow: hidden; }
.checkin-greet {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px; background: linear-gradient(180deg, #f7f6ff 0%, var(--surface) 100%);
  border-bottom: 1px solid var(--border);
}
.checkin-greet-name { font-size: 15.5px; font-weight: 700; }
.checkin-greet-date { font-size: 12px; color: var(--muted); }
.checkin-status-pill {
  margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: #fff; border-radius: 20px; padding: 4px 12px;
}

.checkin-clock { text-align: center; padding: 26px 24px 10px; }
.checkin-clock .time {
  font-size: 60px; font-weight: 700; letter-spacing: -2.5px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.checkin-clock .secs { font-size: 24px; color: var(--muted); font-weight: 600; }

.checkin-timeline {
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 14px 20px; margin-top: 14px; background: #fbfbfd;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.checkin-timeline > div { text-align: center; }
.checkin-timeline .k {
  font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); margin-bottom: 3px;
}
.checkin-timeline .v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.checkin-timeline .v.is-live { color: var(--success); }

.checkin-action { padding: 20px 22px 24px; }
.checkin-action .btn:not(.btn-domain-lg) { width: 100%; padding: 13px 16px; font-size: 15px; justify-content: center; }
.checkin-time-field { margin-bottom: 14px; text-align: left; }
.checkin-time-field label { font-size: 12px; color: var(--muted); display: block; margin-bottom: 5px; }
.checkin-time-field input { font-size: 20px; font-weight: 600; text-align: center; padding: 11px; }
.checkin-time-hint { font-size: 11px; color: var(--muted); margin-top: 5px; }

/* ── Week strip ── */
.week-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.week-day { text-align: center; }
.week-day .dow { font-size: 10px; color: var(--muted); margin-bottom: 5px; }
.week-day .pip {
  width: 34px; height: 34px; line-height: 34px; margin: 0 auto;
  border-radius: 10px; font-size: 12px; font-weight: 600;
}
.week-day .pip.is-today { box-shadow: 0 0 0 2px var(--primary); }
.week-day .pip.is-future { background: transparent; border: 1px dashed var(--border); color: var(--muted); }
.week-day .hrs { font-size: 9.5px; color: var(--muted); margin-top: 5px; white-space: nowrap; }

/* Week strip pager - back button is always live, forward stops at today */
.week-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 12px;
}
.week-nav-label {
  flex: 1; text-align: center;
  font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted); white-space: nowrap;
}
.week-nav-btn {
  flex: 0 0 auto;
  width: 26px; height: 26px; line-height: 24px; text-align: center;
  border: 1px solid var(--border); border-radius: 8px;
  background: #fff; color: var(--text);
  font-size: 15px; text-decoration: none;
  transition: background .12s ease, border-color .12s ease;
}
.week-nav-btn:hover { background: var(--domain-soft, #f4f6f8); border-color: var(--domain-line, var(--border)); }
.week-nav-btn.is-disabled { color: var(--border); background: #fff; cursor: default; }

/* Held briefly while the next week is fetched */
#week-strip.is-loading { opacity: .45; pointer-events: none; transition: opacity .1s ease; }

/* ── Month stats ── */
.checkin-stats { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.checkin-stats > div + div { border-left: 1px solid var(--border); }
.checkin-stats .n { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }
.checkin-stats .n.is-hours { color: var(--success); }
.checkin-stats .l { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ── Small key/value list (schedule, IP) ── */
.checkin-kv { display: flex; justify-content: space-between; font-size: 13px; }
.checkin-kv + .checkin-kv { margin-top: 7px; }

.checkin-section-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted); margin-bottom: 12px;
}
.checkin-links { display: grid; gap: 8px; }
.checkin-links .btn { justify-content: center; }

@media (max-width: 768px) {
  .checkin-grid { grid-template-columns: 1fr; }
  .checkin-clock .time { font-size: 48px; }
}

/* ══════════════════════════════════════════════════════════════
   Domain colours
   One colour per subject area, applied by putting a .domain-* class on a
   page wrapper. Descendants read --domain*, so a page picks up its accent
   without any component knowing which area it belongs to.

     purple  leave          amber  attendance
     blue    informational  red    problem

   Status colours (approved green, rejected red …) are deliberately separate:
   those describe an outcome, not a subject area.
   ══════════════════════════════════════════════════════════════ */
.domain-leave      { --domain:#6c5ce7; --domain-dark:#5847d4; --domain-ink:#fff; --domain-soft:#f4f2ff; --domain-line:#dcd5fb; }
.domain-attendance { --domain:#e08c1a; --domain-dark:#c47a12; --domain-ink:#3a2400; --domain-soft:#fff8ed; --domain-line:#f2ddb4; }
.domain-info       { --domain:#1f6a9c; --domain-dark:#175a86; --domain-ink:#fff; --domain-soft:#eef5fd; --domain-line:#cfe1f6; }
.domain-problem    { --domain:#e74c3c; --domain-dark:#cf4133; --domain-ink:#fff; --domain-soft:#fdf1ef; --domain-line:#f6cec7; }

/* Buttons and accents that follow whichever domain wraps them */
.btn-domain {
  background: var(--domain, var(--primary)); color: var(--domain-ink, #fff);
  border: none; transition: background .15s ease, box-shadow .15s ease, transform .1s ease;
}
.btn-domain:hover { background: var(--domain-dark, var(--primary)); color: var(--domain-ink, #fff); }
.btn-domain:active { transform: translateY(1px); }
.btn-domain:focus-visible { outline: 2px solid var(--domain); outline-offset: 2px; }

/* The primary action on a domain page - sized to be the obvious next step */
.btn-domain-lg {
  width: 100%; padding: 15px 24px; font-size: 15.5px; font-weight: 600;
  justify-content: center; gap: 8px;
  border-radius: 10px; letter-spacing: .2px;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--domain, var(--primary)) 32%, transparent);
}
.btn-domain-lg:hover {
  box-shadow: 0 4px 14px color-mix(in srgb, var(--domain, var(--primary)) 42%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .btn-domain { transition: none; }
  .btn-domain:active { transform: none; }
}

/* ── Check-in: remaining pieces (replaces this page's inline styles) ── */
.checkin-empty { padding: 40px; }
.checkin-empty .hint { font-size: 13px; }

.checkin-exempt-card { max-width: 480px; }
.checkin-exempt { padding: 40px 24px; text-align: center; }
.checkin-exempt .emoji { font-size: 44px; margin-bottom: 14px; }
.checkin-exempt .who { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 10px; }
.checkin-exempt .who strong { font-size: 15px; }
.checkin-exempt .headline { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.checkin-exempt .sub { font-size: 13px; }

.checkin-progress { padding: 16px 22px 0; }
.checkin-progress-head { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 6px; }
.checkin-progress-head .pct { font-weight: 600; }
.checkin-progress-track { background: #eef1f4; border-radius: 6px; height: 8px; overflow: hidden; }
.checkin-progress-fill {
  height: 100%; border-radius: 6px; transition: width .5s ease;
  background: linear-gradient(90deg, var(--domain, var(--primary)), color-mix(in srgb, var(--domain, var(--primary)) 65%, #fff));
}

.checkin-alert { margin: 0; }
.checkin-alert.is-spaced { margin: 12px 0 0; font-size: 12.5px; }
.checkin-alert .detail { font-size: 12.5px; margin-top: 3px; }

.checkin-ip-line { font-size: 13px; margin-bottom: 4px; }
.checkin-ip-line.is-ok { color: var(--success); }
.checkin-ip-line.is-blocked { color: var(--danger); }
.checkin-ip-note { font-size: 12px; }
.checkin-month-empty { font-size: 13px; }

/* The seconds span is injected by the ticking script, so it needs a class
   rather than an inline style on the element it replaces. */
#live-clock .secs { font-size: 24px; color: var(--muted); font-weight: 600; }

/* Data-driven values arrive as custom properties so the rules stay here and
   only the value comes from PHP. */
.checkin-status-pill { background: var(--pill, var(--muted)); }
.checkin-progress-fill { width: var(--pct, 0%); }
.week-day .pip { background: var(--pip-bg, #e4e8ec); color: var(--pip-ink, var(--muted)); }
.week-day .pip.is-future { background: transparent; }

/* Avatar sizing comes from the helper as custom properties, so the rules
   live here and only the size travels inline. */
.avatar-img, .avatar-sized { width: var(--av-size, 32px); height: var(--av-size, 32px); flex-shrink: 0; }
.avatar-img { border-radius: 50%; object-fit: cover; }
.avatar-sized { font-size: var(--av-font, 12px); }

/* ── Team attendance month grid ─────────────────────────────────────────
   One row per employee, one narrow column per day, so the whole month has
   to fit: 11px type, minimal cell padding, and the name column pinned so
   it survives the horizontal scroll. */
.tm-nav { display: flex; align-items: center; gap: 8px; }
.tm-nav strong { font-size: 14px; }

.tm-legend {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-bottom: 16px; font-size: 11px;
}
.tm-legend-item { display: flex; align-items: center; gap: 5px; }

.tm-grid { font-size: 11px; min-width: 900px; }
.tm-grid thead th { padding: 6px 2px; }

/* The name column stays put while the days scroll under it. */
.tm-name-col {
  position: sticky; left: 0; z-index: 2;
  background: var(--surface);
  min-width: 150px; padding: 6px 10px;
}
tbody .tm-name-col { z-index: 1; }
.tm-name-col a { font-size: 11px; }
.tm-code { font-size: 10px; }

.tm-day { text-align: center; width: 28px; }
.tm-day.is-we { color: #b2bec3; }
/* A restricted holiday marks the date, not the people: everyone who did not
   claim it worked that day like any other. */
.tm-day.is-rh-day { color: #b9770e; }
.tm-day.is-rh-day::after {
  content: "RH"; display: block;
  font-size: 8px; letter-spacing: .3px; line-height: 1;
}
.tm-legend-rh {
  padding: 1px 6px; border-radius: 3px;
  background: #fff4e0; color: #b9770e;
  font-size: 9px; font-weight: 700;
}

.tm-cell { text-align: center; padding: 2px; position: relative; }
.tm-cell.is-we { background: #f8f9fa; }
.tm-cell-none { color: var(--muted); font-size: 9px; }

.tm-cell-badge {
  display: inline-block; width: 20px; height: 18px; line-height: 18px;
  font-size: 9px; font-weight: 700; color: #fff;
  border-radius: 3px; cursor: default; text-align: center;
}
.tm-cell-badge.is-present { background: var(--success); }
.tm-cell-badge.is-late    { background: #e67e22; }
.tm-cell-badge.is-half    { background: var(--warning); }
.tm-cell-badge.is-absent  { background: var(--danger); }
.tm-cell-badge.is-leave   { background: var(--primary); }
.tm-cell-badge.is-holiday { background: #0984e3; }
.tm-cell-badge.is-weekend { background: #f0f0f0; }

.tm-total { text-align: center; padding: 6px 6px; font-weight: 600; font-size: 11px; }
.tm-total.is-present-n { color: var(--success); }
.tm-total.is-late-n    { color: #e67e22; }
.tm-total.is-hours     { color: #0984e3; white-space: nowrap; }
.tm-total.is-leave-n   { color: var(--primary); }
.tm-total.is-absent-n  { color: var(--danger); }
.tm-total.is-half-n    { color: var(--warning); }

/* Deleting a record is a hover action on its own cell, so the grid is not
   littered with controls for days that have nothing to delete. */
.att-del-form { display: none; position: absolute; inset: 0; margin: 0; }
.tm-cell:hover .att-del-form { display: block; }
.att-del-btn {
  width: 100%; height: 100%;
  background: rgba(231, 76, 60, .85);
  border: none; border-radius: 3px;
  color: #fff; font-size: 9px; font-weight: 700; line-height: 1;
  cursor: pointer;
}

/* ── Team attendance, daily ─────────────────────────────────────────────
   Every tracked employee gets a row, so most of the table is now days with
   nothing recorded. Those rows are dimmed a shade: they are context for the
   ones that carry times, not competing with them. */
.td-13 { font-size: 13px; }
.td-code { font-size: 11px; }

.att-status { font-size: 12px; font-weight: 600; }
.att-status.is-present { color: var(--success); }
.att-status.is-late    { color: #e67e22; }
.att-status.is-half    { color: var(--warning); }
.att-status.is-absent  { color: var(--danger); }
.att-status.is-leave   { color: var(--primary); }
.att-status.is-holiday { color: #0984e3; }

/* A restricted holiday is a property of the date, not of a person, so it is
   tagged next to the date rather than shown as anybody's status. */
.att-rh-tag {
  display: inline-flex; align-items: center;
  margin-left: 8px; padding: 2px 9px; border-radius: 20px;
  background: #fff4e0; color: #b9770e;
  font-size: 11px; font-weight: 600; letter-spacing: .2px;
  vertical-align: middle;
}
.att-status.is-weekend { color: var(--muted); }

tbody tr.is-derived .link-name { color: var(--text); }
tbody tr.is-derived td[data-label="Check-In"],
tbody tr.is-derived td[data-label="Check-Out"],
tbody tr.is-derived td[data-label="Hours"] { opacity: .55; }

/* A whole team sharing one non-working day is a fact about the day, so it
   reads as a line above the table rather than a row each. The names stay
   one click away rather than being dropped. */
.att-dayoff {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border);
}
.att-dayoff:last-child { border-bottom: none; }
.att-dayoff-note { font-size: 13px; }
.att-dayoff-who { font-size: 12px; color: var(--muted); }
.att-dayoff-who summary { cursor: pointer; }
.att-dayoff-who[open] summary { margin-bottom: 4px; }

/* Day stepper on the daily view. Same cluster as the month pager, but it
   wraps a date input rather than a label, so the buttons match the input's
   height instead of the smaller button default. */
/* The stepper stays on one line: an arrow that wraps away from its date
   input stops reading as a pair. The filter bar around it still wraps. */
.att-daynav {
  display: flex; align-items: center; flex-wrap: nowrap; gap: 8px;
  flex: 0 0 auto;   /* hold the intrinsic width; the bar wraps around it */
}
.att-daynav .form-control { width: auto; min-width: 150px; }
.att-daynav .btn {
  height: 37px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ── Scheduled-job endpoints (Configure > APIs) ─────────────────────────── */
.api-jobs { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; }
.api-job-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.api-cron {
  padding: 4px 10px; border-radius: 6px;
  background: var(--primary-lt); color: var(--primary);
  font-size: 12px; white-space: nowrap;
}
.api-job-summary { font-size: 13px; max-width: 70ch; margin: 0 0 16px; }
.api-job-extra   { font-size: 12px; margin: 6px 0 16px; }

/* The URL is the thing people came for, so it is selectable in one gesture
   and wraps rather than scrolling out of reach. */
.api-url {
  display: block; padding: 9px 11px;
  background: #f6f6f6; border: 1px solid #e2e2e2; border-radius: 6px;
  font-size: 12px; word-break: break-all; user-select: all;
}
.api-url-row { display: flex; gap: 8px; align-items: center; }
.api-url-row .api-url { flex: 1; }
.api-url-row .btn { flex-shrink: 0; }

@media (max-width: 640px) {
  .api-url-row { flex-wrap: wrap; }
  .api-url-row .btn { width: 100%; justify-content: center; }
}

/* ── Invoice: settings logo, and the internal comment thread ──── */
.inv-logo-current {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 10px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 8px; background: #fff;
}
.inv-logo-current img { max-height: 52px; max-width: 200px; }

.inv-comments { margin-top: 18px; }
.inv-comment-count {
  font-size: 12px; font-weight: normal; color: var(--muted);
  background: var(--bg); border-radius: 10px; padding: 1px 8px; margin-left: 6px;
}
.inv-comment-form { display: flex; gap: 10px; align-items: flex-start; padding: 14px 18px; }
.inv-comment-form textarea { flex: 1; resize: vertical; }
.inv-comment-list { list-style: none; margin: 0; padding: 0 18px 8px; }
.inv-comment { display: flex; gap: 10px; padding: 12px 0; border-top: 1px solid var(--border); }
.inv-comment-body { flex: 1; min-width: 0; }
.inv-comment-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--muted); margin-bottom: 3px;
}
.inv-comment-text { font-size: 13.5px; line-height: 1.55; word-wrap: break-word; }

/* ── Permissions: who the page is about ──────────────────────── */
.perm-who {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px;
}
.perm-who .nm { font-weight: 600; }
.perm-who .cd { font-size: 12.5px; color: var(--muted); }
.perm-who > a { margin-left: auto; }

/* ── Client meeting notes ────────────────────────────────────── */
.cn-next, .cn-external { font-size: 12px; color: var(--muted); margin-top: 2px; }
.cn-follow { font-size: 12.5px; }
.cn-follow.is-late { color: #e74c3c; font-weight: 600; }

.cn-sub {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-size: 12.5px; color: var(--muted); margin-top: 4px;
}
.cn-followup {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; padding: 9px 12px; margin-bottom: 16px;
  border: 1px solid var(--border); border-radius: 8px;
}
.cn-followup.is-late { border-color: #f5c6cb; background: #fdf3f4; color: #a33; }

.cn-section { padding: 14px 0; border-top: 1px solid var(--border); }
.cn-section:first-of-type { border-top: 0; padding-top: 0; }
.cn-h {
  font-size: 10.5px; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.cn-body { font-size: 13.5px; line-height: 1.65; white-space: normal; }

/* Picking who was in the room: a plain grid of people, no dropdown to open. */
.cn-people {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px; padding: 10px; border: 1px solid var(--border); border-radius: 8px;
}
.cn-person { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.cn-people-list { display: flex; flex-wrap: wrap; gap: 8px; }
.cn-person-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; padding: 3px 10px 3px 3px;
  border: 1px solid var(--border); border-radius: 999px;
}
.cn-back { margin: 0 0 14px; }

/* The title can be long; let the actions drop below it rather than squeeze. */
.cn-note .card-header-bar { flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.cn-note .card-header-bar > div:first-child { flex: 1 1 260px; min-width: 0; }

/* ── Client documents ────────────────────────────────────────── */
.cd-upload { padding: 14px 18px 4px; border-bottom: 1px solid var(--border); }
.cd-upload-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.cd-upload-row .te-form-cell { flex: 1 1 160px; }
.cd-upload-row .te-form-cell.flex-2 { flex: 2 1 220px; }
.cd-file { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* ── Invoices on the client page ─────────────────────────────── */
.ta-right { text-align: right; white-space: nowrap; }
.cl-outstanding {
  align-self: center; font-size: 12.5px; font-weight: 600; color: #b45309;
  background: #fef3c7; border-radius: 12px; padding: 3px 10px;
}

/* ── Detail page tabs ────────────────────────────────────────── */
.client-tabs { display: flex; flex-direction: column; gap: 18px; }
.tab-strip {
  display: flex; flex-wrap: wrap; gap: 2px;
  border-bottom: 1px solid var(--border);
}
.tab-strip .tab {
  padding: 9px 15px; font-size: 13.5px; color: var(--muted);
  text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap;
}
.tab-strip .tab:hover { color: var(--text); }
.tab-strip .tab.is-on { color: var(--text); font-weight: 600; border-bottom-color: var(--primary); }
.tab-count {
  font-size: 11.5px; font-weight: normal; color: var(--muted);
  background: var(--bg); border-radius: 10px; padding: 1px 7px; margin-left: 2px;
}
.tab-panel { display: none; }
.tab-panel.is-on { display: block; }

/*
 * With scripting off every panel shows, one after another, which is what the
 * page did before tabs existed. :target then narrows it to the linked one, so
 * a bookmarked tab still opens on that tab.
 */
.no-js .tab-panel { display: block; }
.no-js .client-tabs:has(.tab-panel:target) .tab-panel { display: none; }
.no-js .tab-panel:target { display: block; }

/* ── Recycle bin ─────────────────────────────────────────────── */
.rb-lede { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.rb-restored { margin-bottom: 14px; font-size: 13px; }
.rb-kind {
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); margin-bottom: 2px;
}
.rb-kind-inline {
  font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted); margin-right: 4px;
}
.rb-context { font-size: 12px; color: var(--muted); margin-top: 2px; }
.rb-facts { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12px; color: var(--text-2); margin-top: 3px; }
.rb-fact-label { color: var(--muted); }
.rb-snippet { font-size: 12px; color: var(--muted); margin-top: 3px; max-width: 520px; overflow-wrap: anywhere; }
.rb-namesakes { font-size: 13px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.rb-fields { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 4px 16px; margin: 0; font-size: 13px; }
.rb-fields dt { font-weight: normal; color: var(--muted); }
.rb-fields dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
.rb-parts {
  font-size: 12px; background: var(--bg); border-radius: 10px; padding: 2px 9px;
  white-space: nowrap;
}
.rb-heading { font-size: 12.5px; font-weight: 600; margin: 4px 0 6px; }
.rb-list { margin: 0 0 12px; padding-left: 18px; font-size: 13px; }
.rb-list li { margin-bottom: 3px; overflow-wrap: anywhere; }
.rb-notes { color: var(--muted); }
.rb-text { font-size: 13px; margin-bottom: 12px; }
.rb-choices {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px;
  align-items: start;
}
.rb-danger .card-header-bar h2 { color: var(--tone-stop-fg); }
.rb-block {
  background: var(--tone-warn-bg); color: var(--tone-warn-fg);
  border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 12px;
}
.rb-block .rb-list { margin: 6px 0; }
.rb-blocking { margin: 4px 0 6px; padding-left: 18px; }
.rb-blocking li { margin-bottom: 2px; }
.rb-blocking-state { font-size: 12px; color: var(--muted); margin-left: 4px; }
.rb-confirm { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; font-size: 13px; cursor: pointer; }
.rb-bulk {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
}
.rb-bulk-count { flex: 1 1 auto; font-size: 12.5px; color: var(--muted); }
.data-table .col-tick { width: 36px; }
.rb-purge-list { list-style: none; margin: 0 0 16px; padding: 0; }
.rb-purge-list > li { padding: 10px 0; border-bottom: 1px solid var(--border); }
.rb-purge-list > li:last-child { border-bottom: 0; }
.rb-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 767px) {
  .rb-choices { grid-template-columns: minmax(0, 1fr); }
}

/* ── Invoice: Billed To ──────────────────────────────────────── */
.bt-box { border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; }
.bt-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.bt-row {
  display: grid; grid-template-columns: 20px 140px minmax(0, 1fr); gap: 8px;
  align-items: start; padding: 5px 0; font-size: 13px; cursor: pointer;
}
.bt-row .form-check-input { margin-top: 2px; }
.bt-label { color: var(--muted); }
.bt-value { white-space: pre-line; overflow-wrap: anywhere; }
.bt-value.is-missing { color: var(--muted); font-style: italic; }
@media (max-width: 575px) {
  .bt-row { grid-template-columns: 20px minmax(0, 1fr); }
  .bt-value { grid-column: 2; }
}
.inv-client-line { font-size: 13px; color: var(--muted); margin: -8px 0 12px; }
.mt-16 { margin-top: 16px; }

/* ── Roles ─────────────────────────────────────────────────────────── */
.role-product { margin-top: 1rem; }
.role-grid .role-tick { width: 7.5rem; text-align: center; }
.role-extra { border-top: 1px solid var(--border, #e5e7eb); }
.form-note { padding: 10px 12px; border-radius: 6px; background: var(--surface-2, #f6f6fa); border: 1px solid var(--border); font-size: 13px; }


/* ── Each product's look (2f) ──────────────────────────────────────────
   Set once on <body data-product>, so every shared screen and component
   takes the product's colours. HRMS keeps the dark panel this app has always
   had; CRM keeps Newkit's white and orange; Project Management's are a first
   proposal. */
body[data-product="hrms"],
body[data-product="organisation"] { /* the defaults above */ }

body[data-product="projects"] {
  --primary:    #2563eb;
  --primary-lt: #eff6ff;
  --sidebar-bg:        #ffffff;
  --sidebar-fg:        #4b5563;
  --sidebar-fg-strong: #111827;
  --sidebar-fg-faint:  #6b7280;
  --sidebar-section:   #9ca3af;
  --sidebar-hover:     #f3f4f6;
  --sidebar-active:    #eff6ff;
  --sidebar-line:      #e5e7eb;
}

body[data-product="crm"] {
  --primary:    #ff6f00;
  --primary-lt: #fff3e6;
  --sidebar-bg:        #ffffff;
  --sidebar-fg:        #5c6b7a;
  --sidebar-fg-strong: #1f2933;
  --sidebar-fg-faint:  #5c6b7a;
  --sidebar-section:   #8a96a3;
  --sidebar-hover:     #f4f6f8;
  --sidebar-active:    #fff3e6;
  --sidebar-line:      #e0e4e8;
}

/* The Data Room keeps DLG's teal (Phase 4), on a light panel. */
body[data-product="dataroom"] {
  --primary:    #14657a;
  --primary-dk: #0e4b59;
  --primary-lt: #e4eff2;
  --text-2:     #4a4d53;
  --border-2:   #edebe5;
  --surface-2:  #f4f2ed;
  --font-display: inherit;
  --font-body:    inherit;
  --sidebar-bg:        #ffffff;
  --sidebar-fg:        #4a4d53;
  --sidebar-fg-strong: #14212a;
  --sidebar-fg-faint:  #6b7280;
  --sidebar-section:   #9ca3af;
  --sidebar-hover:     #f3f6f7;
  --sidebar-active:    #e4eff2;
  --sidebar-line:      #e5e7eb;
}

/* A light panel needs its edge drawn. */
body[data-product="projects"] .sidebar,
body[data-product="crm"] .sidebar,
body[data-product="dataroom"] .sidebar { border-right: 1px solid var(--sidebar-line); }

.sidebar-product { margin-top: 2px; font-size: 11px; color: var(--sidebar-fg-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Who is signed in, at the right of the top bar, as in CRM's ──────── */
.topbar-user { display: flex; align-items: center; gap: 12px; margin-left: 12px; font-size: 14px; min-width: 0; flex-shrink: 1; }
.topbar-user-name { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.topbar-sign-out { color: var(--primary); white-space: nowrap; }
.topbar-sign-out:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .topbar-user { gap: 8px; margin-left: 4px; font-size: 13px; }
  .topbar-user-name { max-width: 90px; }
}

/* ── The 9-dot launcher ───────────────────────────────────────────────── */
.launcher { margin-left: 12px; }
.launcher-toggle {
  width: 36px; height: 36px; border-radius: 8px; border: 1px solid transparent;
  background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center;
}
.launcher-toggle:hover, .launcher-toggle[aria-expanded="true"] { background: var(--primary-lt); color: var(--primary); }
.launcher-menu { width: 280px; padding: 12px; border-radius: 10px; }
.launcher-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.launcher-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px;
  border-radius: 8px; font-size: 12px; text-align: center; color: var(--text);
}
.launcher-tile:hover { background: var(--bg); }
.launcher-tile.is-current { background: var(--primary-lt); font-weight: 600; }
.launcher-icon {
  width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff;
}
.launcher-links { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
.launcher-links a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; color: var(--text); font-size: 13px; }
.launcher-links a:hover { background: var(--bg); }

/* ── The settings page ────────────────────────────────────────────────── */
/* Settings: you, then each group's settings, each with where it stands now. */
.st-page { max-width: 1040px; display: flex; flex-direction: column; gap: 28px; padding-top: 8px; }

.st-me {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  color: var(--text); transition: border-color .15s;
}
.st-me:hover { border-color: var(--primary); }
.st-me:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.st-me-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 220px; }
.st-me-name { font-family: var(--font-display, inherit); font-size: 17px; font-weight: 600; }
.st-me-meta { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.st-me-start { display: flex; flex-direction: column; gap: 2px; padding: 0 20px; border-left: 1px solid var(--border); }
.st-me-start-label { font-size: 12px; color: var(--muted); }
.st-me-start-value { font-size: 14px; font-weight: 600; }
.st-me-go { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--primary); font-weight: 600; }

.st-group { display: flex; flex-direction: column; gap: 10px; }
.st-group-title { font-family: var(--font-display, inherit); font-size: 15px; font-weight: 600; margin: 0; color: var(--text); }

/* One surface per group; its rows sit in two columns, divided by hairlines. */
.st-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--border); gap: 1px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
}
.st-item {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: start; gap: 12px;
  padding: 16px 18px; background: var(--surface); color: var(--text); transition: background .15s;
}
.st-item:hover { background: var(--primary-lt); }
.st-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
/* An odd last row spans both columns, so the grid has no empty cell. */
.st-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.st-icon {
  width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-lt); color: var(--primary);
}
.st-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.st-name { font-weight: 600; font-size: 14px; }
.st-about { font-size: 12.5px; color: var(--muted); line-height: 1.45; max-width: 46ch; }

/* Where it stands: plain, or with a dot in its tone when it says something. */
.st-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2, #555b66); white-space: nowrap; padding-top: 2px; }
.st-state.is-ok, .st-state.is-warn, .st-state.is-stop, .st-state.is-info { font-weight: 600; }
.st-state.is-ok::before, .st-state.is-warn::before, .st-state.is-stop::before, .st-state.is-info::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
}
.st-state.is-ok   { color: var(--tone-ok-fg); }
.st-state.is-warn { color: var(--tone-warn-fg); }
.st-state.is-stop { color: var(--tone-stop-fg); }
.st-state.is-info { color: var(--tone-info-fg); }

@media (max-width: 760px) {
  .st-grid { grid-template-columns: minmax(0, 1fr); }
  .st-item:last-child:nth-child(odd) { grid-column: auto; }
  .st-me-start { border-left: 0; padding: 0; }
}

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


/* ── The Data Room (Phase 4) ──────────────────────────────────────────
   Moved from DLG's stylesheet with its pages: the folder tree, the page,
   the details panel, the cards and tiles, move and copy. */
.tone-draft { background: #EDECE8; color: #56595F; }

.tone-info { background: #E6ECF5; color: #2B4C7E; }

.filter-field.is-search { flex: 1.6 1 0; }

.filter-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 991.98px) {
  .filters-bar > .search-box,
  .filters-bar > .filter-field.is-search { flex: 1 1 100%; }
}

.health-dot.tone-draft::before { background: #9A9CA1; }

.health-dot.tone-info::before { background: #2B4C7E; }

.form-standard { max-width: 760px; }

.bin-note { font-size: 12px; color: var(--muted); }

.dr-sort { color: inherit; text-decoration: none; white-space: nowrap; }

.dr-sort:hover { color: var(--primary); }

.dr-sort { display: inline-flex; align-items: center; gap: 4px; }

.dr-sort-icon { display: inline-flex; color: var(--muted); opacity: .55; }

.dr-sort:hover .dr-sort-icon { opacity: 1; }

.dr-sort-icon.is-on { color: var(--primary); opacity: 1; }

.dr-archived td { color: var(--muted); }

.dr-edit-row td { padding-top: 0; border-top: 0; }

.dr-edit-row summary { cursor: pointer; font-size: 12.5px; color: var(--primary); }

.dr-field-form { margin: 12px 0 4px; }

.dr-level { width: auto; min-width: 130px; }

.dr-shell { display: block; }

.dr-main { min-width: 0; }

/* The folder tree, in the sidebar below the Data Room menu. Its links are
   rows of their own, so the sidebar's link padding and active bar are undone. */
.dr-tree { display: flex; flex-direction: column; padding-bottom: 8px; }

.dr-tree-find { position: relative; margin: 2px 12px 6px; }

.dr-tree-find svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--sidebar-fg-faint); width: 14px; height: 14px; }

.dr-tree-find input {
  padding-left: 28px; background: transparent; color: var(--sidebar-fg-strong);
  border-color: var(--sidebar-line);
}

.dr-tree-find input::placeholder { color: var(--sidebar-fg-faint); }

.dr-tree-list { display: flex; flex-direction: column; }

.dr-tree-empty { font-size: 12.5px; color: var(--sidebar-fg-faint); padding: 6px 20px; margin: 0; }

.dr-node-row {
  display: flex; align-items: center; padding-left: 10px; cursor: pointer; list-style: none;
  border-left: 3px solid transparent; transition: background .15s;
}

.dr-node-row::-webkit-details-marker { display: none; }

.dr-node-row:hover { background: var(--sidebar-hover); }

.dr-caret, .dr-caret-space { width: 18px; flex-shrink: 0; display: inline-flex; justify-content: center; color: var(--sidebar-fg-faint); }

.dr-caret svg { width: 12px; height: 12px; transition: transform .15s; }

details.dr-node[open] > .dr-node-row .dr-caret svg { transform: rotate(90deg); }

.sidebar-nav .dr-node-link {
  flex: 1; min-width: 0; gap: 8px; padding: 8px 4px; font-size: 13px; background: none; border-left: 0;
}

.sidebar-nav .dr-node-link:hover { background: none; }

.dr-node-link svg { width: 15px; height: 15px; }

.dr-node-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sidebar-nav .dr-node-link.is-current { color: var(--sidebar-fg-strong); }

.sidebar-nav .dr-node-link.is-current svg { opacity: 1; }

.dr-node-row:has(> .dr-node-link.is-current) { background: var(--sidebar-active); border-left-color: var(--primary); }

.dr-node-count { font-size: 11.5px; color: var(--sidebar-fg-faint); padding-right: 16px; font-variant-numeric: tabular-nums; }

.dr-node-children { padding-left: 12px; }

.dr-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }

.dr-title { font-size: 22px; font-weight: 600; margin: 0 0 4px; }

.dr-meta { font-size: 13px; color: var(--muted); margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.dr-meta-sep { color: var(--border); }

.dr-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.dr-actions .btn { white-space: nowrap; }

.dr-shared { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); }

.dr-shared:hover { color: var(--primary); }

.dr-avatar {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-lt); color: var(--primary-dk); font-size: 10px; font-weight: 600;
  border: 2px solid var(--surface);
}

.dr-shared .dr-avatar + .dr-avatar { margin-left: -8px; }

.dr-section { font-size: 14px; font-weight: 600; margin: 22px 0 10px; }

.dr-search { position: relative; display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }

.dr-search > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }

.dr-search input { padding-left: 36px; }

.dr-search-sm { margin-bottom: 0; flex: 1 1 220px; max-width: 320px; }

.dr-search-sm > svg { left: 10px; width: 14px; height: 14px; }

.dr-search-sm input { padding-left: 30px; }

.dr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }

.dr-cards-sm { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

.dr-card {
  display: flex; flex-direction: column; gap: 10px; padding: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); transition: border-color .15s, box-shadow .15s;
}

.dr-card:hover { border-color: var(--primary); box-shadow: 0 2px 8px rgba(20,101,122,.08); color: var(--text); }

.dr-card-top { display: flex; gap: 10px; align-items: center; min-width: 0; }

.dr-card-text { display: flex; flex-direction: column; min-width: 0; }

.dr-card-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dr-card-meta { font-size: 12px; color: var(--muted); }

.dr-card-desc { font-size: 12.5px; color: var(--text-2); }

.dr-card-kids { display: flex; flex-wrap: wrap; gap: 4px; }

.dr-folder-chip {
  width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-lt); color: var(--primary-dk);
}

.dr-chip { display: inline-block; font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dr-chip-more { background: transparent; color: var(--muted); }

.dr-result { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border-2); color: var(--text); }

.dr-result:last-child { border-bottom: 0; }

a.dr-result:hover { background: var(--surface-2); color: var(--text); }

.dr-result-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.dr-result-text a.bin-note:hover { color: var(--primary); }

.dr-result-chips { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }

.dr-cover {
  width: 40px; height: 30px; border-radius: 5px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 8.5px; font-weight: 600; letter-spacing: .04em;
}

.dr-cover-lg { width: 64px; height: 48px; font-size: 11px; border-radius: 7px; }

.dr-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }

.dr-filter { width: auto; max-width: 220px; }

.dr-toolbar-gap { flex: 1; }

.dr-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; background: var(--surface); }

.dr-toggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 34px; color: var(--muted); }

.dr-toggle-btn + .dr-toggle-btn { border-left: 1px solid var(--border); }

.dr-toggle-btn:hover { color: var(--primary); }

.dr-toggle-btn.is-on { background: var(--primary-lt); color: var(--primary-dk); }

.dr-table tbody tr[data-dr-row] { cursor: pointer; }

.dr-table tbody tr.is-selected td { background: #F2F7F8; }

.dr-table tbody tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--primary); }

.dr-doc { display: flex; align-items: center; gap: 12px; min-width: 220px; }

.dr-doc-text { display: flex; flex-direction: column; min-width: 0; }

.dr-host { font-size: 11.5px; color: var(--muted); }

.dr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }

.dr-tile { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }

.dr-tile.is-selected { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-lt); }

.dr-tile-cover { height: 96px; display: flex; align-items: center; justify-content: center; font-weight: 600; letter-spacing: .06em; font-size: 13px; }

.dr-tile-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }

.dr-tile-title { font-weight: 600; font-size: 13px; line-height: 1.35; }

.dr-tile-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

.dr-tile-foot { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 6px 12px; border-top: 1px solid var(--border-2); }

.dr-panel {
  position: sticky; top: calc(var(--header-h) + 16px);
  max-height: calc(100vh - var(--header-h) - 44px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px;
}

.dr-panel-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }

.dr-panel-title { font-size: 16px; font-weight: 600; margin: 0 0 2px; }

.dr-panel-sub { font-size: 12.5px; color: var(--muted); margin: 0 0 14px; }

.dr-panel-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

.dr-panel-h { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 18px 0 8px; font-family: var(--font-body); }

.dr-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.dr-stats > div { background: var(--surface-2); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; }

.dr-stat-label { font-size: 11.5px; color: var(--muted); }

.dr-stat-value { font-family: var(--font-display); font-size: 20px; font-weight: 600; }

.dr-openers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.dr-openers li { display: flex; align-items: center; gap: 10px; }

.dr-opener-name { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; }

.dr-opener-count { font-variant-numeric: tabular-nums; font-weight: 600; }

.dr-facts { display: grid; grid-template-columns: minmax(80px, auto) 1fr; gap: 6px 12px; margin: 0; font-size: 13px; }

.dr-facts dt { color: var(--muted); font-weight: normal; }

.dr-facts dd { margin: 0; overflow-wrap: anywhere; }

.dr-notes { font-size: 13px; }

.dr-panel-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border-2); }

.dr-pick-box { width: 44px; }

.dr-pick label { cursor: pointer; }

.dr-pick tbody tr.is-on td { background: #F2F7F8; }

.dr-pick-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

@media (max-width: 1279.98px) {
  .dr-body.has-panel { grid-template-columns: minmax(0, 1fr); }
  .dr-panel {
    position: fixed; top: var(--header-h); right: 0; bottom: 0; z-index: 95;
    width: min(360px, 100%); max-height: none; border-radius: 0;
    box-shadow: -8px 0 24px rgba(26,29,33,.12);
  }
}

@media (max-width: 900px) {
  .dr-panel { top: 0; }
}

.dr-panel.is-loading { opacity: .55; transition: opacity .15s; }

.dr-erase-list { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; color: var(--text-2); }

.dr-head-compact { align-items: center; margin-bottom: 12px; gap: 8px 16px; }

.dr-head-text { min-width: 0; flex: 1 1 320px; display: flex; flex-direction: column; gap: 2px; }

.dr-crumbs { margin: 0; flex-wrap: wrap; row-gap: 2px; }

.dr-crumb-current { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--text); margin: 0; letter-spacing: -0.01em; }

.dr-head-compact .dr-meta { font-size: 12.5px; flex-wrap: nowrap; min-width: 0; }

.dr-desc-inline { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dr-head-compact .dr-actions { gap: 6px; }

.dr-subfolders { margin-bottom: 12px; }

.dr-subfolders .dr-card { padding: 10px 12px; }

.dr-subfolders .dr-folder-chip { width: 28px; height: 28px; }

.dr-section-first { margin-top: 12px; }

.dr-main > .breadcrumb { margin-bottom: 10px; }

.dr-toolbar { margin-bottom: 10px; }

.dr-toolbar .btn, .dr-toolbar .form-control, .dr-toolbar .form-select { min-height: 34px; }

.page-content:has(> .dr-shell) { padding-top: 16px; }

.dr-title { font-size: 18px; }

.dr-nowrap, .dr-head-compact .dr-shared, .dr-head-compact .dr-meta-sep { white-space: nowrap; flex-shrink: 0; }

@media (min-width: 1100px) {
  .dr-head-compact { flex-wrap: nowrap; }
  .dr-head-text { flex: 1 1 0; }
  .dr-head-compact .dr-actions { flex: none; flex-wrap: nowrap; }
}

.dr-crumbs { flex-wrap: nowrap; min-width: 0; overflow: hidden; }

.dr-crumbs > a, .dr-crumbs > svg { flex-shrink: 0; white-space: nowrap; }

.dr-crumb-current { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dr-btn-icon { display: inline-flex; align-items: center; justify-content: center; gap: 1px; min-width: 34px; padding-left: 8px; padding-right: 8px; }

.dr-plus { font-weight: 600; font-size: 13px; line-height: 1; }

.roles-item-text .bin-note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.u-break-anywhere { overflow-wrap: anywhere; }

.dr-panel-title, .dr-doc-text a, .dr-tile-title, .dr-result-text strong, .dr-entry-title { overflow-wrap: anywhere; word-break: break-word; }

.dr-panel { overflow-x: hidden; }

.dr-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }

.dr-body.has-panel { grid-template-columns: minmax(0, 1fr) 340px; }

.dr-list { min-width: 0; }

.dr-doc-name { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }

.dr-doc-title { color: var(--text); font-weight: 500; }

.dr-doc-title:hover { color: var(--primary); }

.dr-open-icon { color: var(--muted); display: inline-flex; flex-shrink: 0; position: relative; top: 2px; }

.dr-open-icon:hover { color: var(--primary); }

.dr-open-icon svg { width: 13px; height: 13px; }

@media (max-width: 1279.98px) {
  .dr-body.has-panel { grid-template-columns: minmax(0, 1fr); }
}

.wr-links { display: flex; flex-direction: column; gap: 8px; }

.wr-link-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }

@media (max-width: 640px) {
  .wr-link-row { grid-template-columns: minmax(0, 1fr) auto; }
  .wr-link-row .wr-link-label { grid-column: 1; }
}

@media (max-width: 900px) {
  .dr-result { flex-wrap: wrap; }
  .dr-result-chips { flex-basis: 100%; justify-content: flex-start; }
}

.dr-dialog { margin: auto; border: 0; border-radius: 12px; padding: 20px; width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); box-shadow: 0 20px 50px rgba(0,0,0,.25); background: var(--surface); color: var(--text); }

.dr-dialog::backdrop { background: rgba(15, 23, 42, .45); }

.dr-transfer-title { font-size: 17px; font-weight: 600; margin: 0 0 14px; overflow-wrap: anywhere; }

.dr-transfer .dr-search { margin-bottom: 8px; width: 100%; max-width: none; }

.dr-folder-pick { max-height: 300px; overflow-y: auto; border: 1px solid var(--border-2); border-radius: 8px; }

.dr-folder-option { display: flex; gap: 10px; align-items: flex-start; padding: 8px 12px; border-top: 1px solid var(--border-2); cursor: pointer; margin: 0; }

.dr-folder-option:first-child { border-top: 0; }

.dr-folder-option:hover { background: var(--surface-2); }

.dr-folder-option:has(input:checked) { background: var(--surface-2); }

.dr-folder-option[hidden] { display: none; }

.dr-folder-option .form-check-input { margin: 3px 0 0; float: none; flex: none; }

.dr-folder-option-text { display: flex; flex-direction: column; min-width: 0; }

.dr-folder-option-name { font-weight: 500; overflow-wrap: anywhere; }

.dr-folder-option-path { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }

.dr-folder-none { margin: 0; padding: 10px 12px; }

.dr-transfer-list { margin: 0 0 16px; padding-left: 20px; }

.dr-transfer-list li { margin-bottom: 4px; }

/* Clients, Confirm the client: each likely client on its own line, with its button. */
.confirm-candidate { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.confirm-candidate:last-child { margin-bottom: 0; }

/* ── Notification bell (Phase 6c, from DLG) ──
   In the top bar beside the launcher. The list opens below the bell,
   right aligned, and is fetched when it opens. */
.nb { position: relative; flex-shrink: 0; }
.nb-toggle {
  position: relative; width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  color: var(--muted); cursor: pointer;
}
.nb-toggle:hover, .nb-toggle[aria-expanded="true"] { background: var(--primary-lt); color: var(--primary); }
.nb-badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--danger); color: #fff;
  font-size: 11px; font-weight: 600; line-height: 18px; text-align: center;
}
.nb-badge[hidden] { display: none; }
.nb-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 120;
  width: 360px; max-width: calc(100vw - 32px);
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(26,29,33,.16); overflow: hidden;
}
.nb-pop[hidden] { display: none; }
.nb-pop-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.nb-pop-head form { margin: 0; }
.nb-pop-title { font-size: 14px; font-weight: 600; color: var(--text); }
.nb-link { background: none; border: 0; padding: 0; font-size: 12.5px; color: var(--primary); cursor: pointer; }
.nb-link:hover { text-decoration: underline; }
.nb-pop-body { max-height: 380px; overflow-y: auto; }
.nb-pop-foot {
  display: block; padding: 10px 16px; border-top: 1px solid var(--border);
  font-size: 13px; text-align: center; color: var(--primary);
}
.nb-empty { margin: 0; padding: 24px 16px; font-size: 13px; color: var(--muted); text-align: center; }
.nb-list { list-style: none; margin: 0; padding: 0; }
.nb-list li + li { border-top: 1px solid var(--border); }
.nb-item {
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 16px 11px 28px; position: relative; color: var(--muted);
}
.nb-item:hover { background: var(--bg); color: var(--text); }
.nb-item.is-unread { color: var(--text); background: var(--primary-lt); }
.nb-item.is-unread::before {
  content: ""; position: absolute; left: 12px; top: 17px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
}
.nb-item-title { font-size: 13.5px; line-height: 1.4; overflow-wrap: anywhere; }
.nb-item.is-unread .nb-item-title { font-weight: 600; }
.nb-item-time { font-size: 12px; color: var(--muted); }
.nb-page-count { font-size: 13px; color: var(--muted); }
.nb-pager { padding: 12px 16px; }
@media (max-width: 900px) {
  .nb-toggle { width: 44px; height: 44px; }
  .nb-pop { position: fixed; top: 64px; right: 16px; left: 16px; width: auto; max-width: none; }
}

/* ── Weekly updates (Phase 6c, from DLG) ── */
.wr-links { display: flex; flex-direction: column; gap: 8px; }
.wr-link-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.wr-important-input { border-color: #E8C77A; background: #FFFBEF; }
.wr-important { padding: 14px 16px; border-radius: 8px; background: #FFF7E0; border: 1px solid #E8C77A; }
.wr-important .section-label { color: #8A5A00; margin-bottom: 6px; }
.wr-text { font-size: 14px; line-height: 1.6; color: var(--text); overflow-wrap: anywhere; }
.wr-link-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wr-link-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.wr-link-list svg { flex-shrink: 0; color: var(--muted); }
.wr-link-host { font-size: 12px; color: var(--muted); }
@media (max-width: 640px) {
  .wr-link-row { grid-template-columns: minmax(0, 1fr) auto; }
  .wr-link-row .wr-link-label { grid-column: 1; }
}
.wr-details { margin-bottom: 20px; }
.wr-important { margin-bottom: 20px; }
.wr-block { margin-bottom: 20px; }

/* ── The platform page (Phase 6b) ── */
.platform-body { background: var(--bg); }
.platform-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 24px; background: var(--sidebar-bg); color: var(--sidebar-fg-strong); }
.platform-bar .btn { color: var(--sidebar-fg-strong); border-color: var(--sidebar-fg-faint); }
.platform-bar .btn:hover { background: var(--sidebar-hover); color: var(--sidebar-fg-strong); }
.platform-brand { font-size: 16px; }
.platform-nav { display: flex; flex-wrap: wrap; gap: 6px 14px; flex: 1; }
.platform-nav a { color: var(--sidebar-fg); }
.platform-nav a:hover { color: var(--sidebar-fg-strong); }
.platform-who { font-size: 13px; color: var(--sidebar-fg); }
.platform-main { max-width: 1100px; margin: 0 auto; padding: 24px 16px; }
.platform-title { font-size: 20px; font-weight: normal; margin-bottom: 16px; }
.platform-products { display: flex; flex-wrap: wrap; gap: 8px; }
.platform-spare-form { margin-top: 20px; }
.platform-owners { margin-top: 16px; font-size: 13px; }

/* The email settings page: one setup for every product. */
.email-for-all { font-size: 13px; margin-bottom: 14px; }

/* A product's Emails page: its placeholders, and the body in a fixed font. */
.email-placeholders { display: flex; flex-wrap: wrap; gap: 6px; }
.email-placeholder { background: #f0f3f7; border: 0; border-radius: 4px; padding: 3px 8px; font-family: var(--bs-font-monospace, monospace); font-size: 12px; cursor: pointer; }
.email-placeholder:hover { background: var(--primary-lt); color: var(--primary); }
.email-body { font-family: var(--bs-font-monospace, monospace); font-size: 13px; }
.email-page-links { display: flex; flex-direction: column; gap: 6px; }

/* ── A project's Gantt chart (projects/_gantt) ────────────────────
   The project page, in both views: details across the top, tasks full width below. */
.project-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.project-layout > div:first-child { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.project-layout > div:first-child > .card { margin-bottom: 0; }
/* The project's fields flow across rather than down, so the tasks start higher. */
.project-layout > div:first-child .card-body > .flex-col { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 20px; }
@media (max-width: 900px) { .project-layout > div:first-child { grid-template-columns: minmax(0, 1fr); } }

   The planning sheets' look: working days in weeks, the weeks in bands of
   four, each band its colour, a bar taking its band's colour as it crosses. */
.gt-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gt-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.gt-switch a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: 12.5px; color: var(--muted); }
.gt-switch a + a { border-left: 1px solid var(--border); }
.gt-switch a.is-on { background: var(--primary-lt); color: var(--primary); font-weight: 600; }
.gt-switch a:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

.gt {
  /* Weeks alternate: odd plain, even tinted; Prep its own grey. */
  --gt-prep-head: #6f7384; --gt-prep-tint: #f3f3f6;
  --gt-b1-head:   #3d5a80; --gt-b1-tint:   #ffffff;
  --gt-b2-head:   #5b7aa3; --gt-b2-tint:   #f1f5fa;
  /* Where a subtask stands. */
  --gt-done:     #4fae6f; --gt-progress: #b9e4c5;
  --gt-planned:  #bcd7f2; --gt-overdue:  #f4b6ae;
  --gt-section:   #f0f0f4; --gt-line: rgba(30, 31, 46, .08);
  border-collapse: separate; border-spacing: 0; font-size: 12.5px; min-width: 100%;
}
.gt-wrap { overflow-x: auto; border-top: 1px solid var(--border); }
.gt-wrap:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.gt th, .gt td { padding: 0; height: 30px; white-space: nowrap; border-bottom: 1px solid var(--gt-line); }
.gt thead th { font-weight: 600; color: var(--text); background: var(--surface); }

/* The columns before the timeline. Number and task stay put while it scrolls. */
.gt .gt-c-wbs, .gt .gt-c-title, .gt .gt-c-info { padding: 0 10px; text-align: left; vertical-align: middle; }
.gt-c-info { color: var(--muted); }
.gt-c-last { border-right: 1px solid var(--border); }
.gt .gt-num { text-align: right; font-variant-numeric: tabular-nums; }
.gt-pin { position: sticky; left: 0; z-index: 2; width: 48px; min-width: 48px; background: var(--surface); font-variant-numeric: tabular-nums; color: var(--muted); }
.gt-pin2 {
  position: sticky; left: 48px; z-index: 2; width: 240px; min-width: 240px; max-width: 240px;
  background: var(--surface); overflow: hidden; text-overflow: ellipsis; box-shadow: 1px 0 0 var(--border);
}
.gt-pin2 a { color: var(--text); }
.gt-pin2 a:hover { color: var(--primary); }
.gt-row-section td { background: var(--gt-section); }
.gt-row-section .gt-pin, .gt-row-section .gt-pin2 { background: var(--gt-section); }
.gt-row-section .gt-c-wbs, .gt-row-section .gt-pin2 a { font-weight: 600; color: var(--text); }
.gt .gt-row-item .gt-pin2 { padding-left: 22px; }

/* Week and day headings, in each band's colour. */
.gt .gt-wkhead { padding: 4px 6px; text-align: left; color: #fff; border-left: 1px solid rgba(255,255,255,.35); }
.gt thead .gt-wkhead.gt-prep { background: var(--gt-prep-head); }
.gt thead .gt-wkhead.gt-b1 { background: var(--gt-b1-head); }
.gt thead .gt-wkhead.gt-b2 { background: var(--gt-b2-head); }
.gt thead .gt-wkhead, .gt thead .gt-day { text-transform: none; letter-spacing: normal; }
.gt-wkname { display: block; font-size: 12px; }
.gt-wkdate { display: block; font-size: 10.5px; font-weight: normal; opacity: .85; }
.gt-day { width: 22px; min-width: 22px; font-size: 10.5px; font-weight: normal; text-align: center; color: var(--text-2, #555b66); }
.gt thead .gt-day.gt-prep { background: var(--gt-prep-tint); }
.gt thead .gt-day.gt-b1 { background: var(--gt-b1-tint); }
.gt thead .gt-day.gt-b2 { background: var(--gt-b2-tint); }

/* The timeline: every other week tinted. */
.gt-gap.gt-tint.gt-b2, .gt-bar.gt-tint.gt-b2 { background: var(--gt-b2-tint); }
.gt-gap.gt-prep, .gt-bar.gt-prep { background: var(--gt-prep-tint); }
.gt td.gt-wk, .gt th.gt-wk { border-left: 1px solid var(--gt-line); }

/* Bars: coloured by where the subtask stands, rounded where they begin and end.
   An overdue bar keeps its colour to its end, then runs on in red to today. */
.gt-fill { display: block; height: 14px; }
.gt-bar.is-done .gt-fill     { background: var(--gt-done); }
.gt-bar.is-progress .gt-fill { background: var(--gt-progress); }
.gt-bar.is-planned .gt-fill  { background: var(--gt-planned); }
.gt-bar.is-overdue .gt-fill  { background: var(--gt-overdue); }
.gt-row-item.is-editable .gt-bar { cursor: pointer; }
.gt-row-item.is-editable:hover td { background-image: linear-gradient(rgba(108, 92, 231, .05), rgba(108, 92, 231, .05)); }
.gt-sum .gt-fill { height: 6px; background: #7a7d8c; }
.gt-from .gt-fill { border-top-left-radius: 4px; border-bottom-left-radius: 4px; margin-left: 2px; }
.gt-to .gt-fill { border-top-right-radius: 4px; border-bottom-right-radius: 4px; margin-right: 2px; }

/* Today: a line down the timeline, at the start of the day. */
.gt .gt-today { box-shadow: inset 2px 0 0 var(--tone-stop-fg); }
.gt thead .gt-day.gt-today { color: var(--tone-stop-fg); font-weight: 600; }

.gt-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 12px 16px; font-size: 12px; color: var(--muted); }
.gt-key > span { display: inline-flex; align-items: center; gap: 6px; }
.gt-key-swatch { width: 18px; height: 10px; border-radius: 3px; display: inline-block; }
.gt-key-done     { background: #4fae6f; }
.gt-key-progress { background: #b9e4c5; }
.gt-key-planned  { background: #bcd7f2; }
.gt-key-overdue  { background: #f4b6ae; }
.gt-key-today { width: 2px; height: 14px; border-radius: 0; background: var(--tone-stop-fg); }
.gt-key-note { flex-basis: 100%; }

/* The pencil beside a subtask's name, and the popup it opens. */
.gt-edit {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 4px;
  border: 0; border-radius: 5px; background: transparent; color: var(--muted); cursor: pointer; vertical-align: middle;
}
.gt-edit:hover, .gt-edit:focus-visible { background: var(--primary-lt); color: var(--primary); }
.gt-edit:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.gt-edit svg { width: 13px; height: 13px; }
.gt .gt-row-item.is-editable .gt-pin2 { padding-left: 6px; }
.gt .gt-row-item.is-editable .gt-pin2 a { margin-left: 0; }

/* margin: auto puts back the centring the global reset takes away. */
.gt-dialog { margin: auto; width: min(640px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 12px; box-shadow: 0 20px 50px rgba(30, 31, 46, .25); }
.gt-dialog::backdrop { background: rgba(30, 31, 46, .4); }
.gt-dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.gt-dialog-head h2 { margin: 0; font-size: 16px; font-weight: 600; }
.gt-dialog-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; padding: 18px 20px; max-height: min(70vh, 640px); overflow-y: auto; }
.gt-field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; margin: 0; min-width: 0; border: 0; padding: 0; }
.gt-field > span, .gt-field > legend { font-size: 12px; color: var(--muted); padding: 0; margin: 0; }
.gt-field small { font-size: 11.5px; color: var(--muted); }
.gt-field-wide { grid-column: 1 / -1; }
.gt-check { flex-direction: row; align-items: center; gap: 8px; align-self: end; }
.gt-check > span { color: var(--text); font-size: 13px; }
.gt-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 12px; max-height: 160px; overflow-y: auto; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; }
.gt-person { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.gt-dialog-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); }
@media (max-width: 560px) { .gt-dialog-body { grid-template-columns: minmax(0, 1fr); } }

/* A client's Gantt tab: each project's chart, the latest start on top. */
.gt-stack { display: flex; flex-direction: column; gap: 20px; }
.gt-project-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gt-project-head h2 { margin: 0; font-size: 15px; }
.gt-project-dates { font-size: 12.5px; color: var(--muted); }

/* On a task opened from a Gantt chart: the way back to it. */
.gt-back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--primary); }
.gt-back:hover { text-decoration: underline; }

/* A client's Sharing tab: who may follow it in the client portal. */
.cs-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 16px; border-bottom: 1px solid var(--border); }
.cs-field { display: flex; flex-direction: column; gap: 4px; margin: 0; flex: 1 1 200px; font-size: 13px; }
.cs-field > span { font-size: 12px; color: var(--muted); }
.cs-field-email { flex-basis: 280px; }
.cs-link { padding: 12px 16px; background: var(--tone-warn-bg); border-bottom: 1px solid var(--border); }
.cs-link-label { font-size: 12px; font-weight: 600; color: var(--tone-warn-fg); margin-bottom: 6px; }
.cs-login { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.cs-login label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 12px; color: var(--muted); }
.cs-password { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .5px; }
.cs-link-note { font-size: 12px; color: var(--tone-warn-fg); margin-top: 8px; }
.cs-off td { color: var(--muted); }
.cs-table .actions-cell { gap: 8px; }
.cs-table .actions-cell .btn { white-space: nowrap; }
.cs-off .link-name { color: var(--muted); }

/* ── The client portal (portal/*): the client's own view, plain and calm ── */
.pt-body { background: var(--bg); min-height: 100vh; }
.pt-top { background: var(--surface); border-bottom: 1px solid var(--border); }
.pt-top-inner { max-width: 1200px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pt-brand { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; color: var(--text); }
.pt-brand .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.pt-who { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.pt-client { font-weight: 600; color: var(--text); }
.pt-me { color: var(--muted); }
.pt-link { color: var(--primary); font-size: 13px; }
.pt-link-btn { background: none; border: 0; padding: 0; cursor: pointer; }
.pt-link:hover { text-decoration: underline; }
.pt-main { max-width: 1200px; margin: 0 auto; padding: 28px 24px 48px; }

.pt-head { margin-bottom: 20px; }
.pt-head h1 { font-size: 22px; font-weight: 600; margin: 0 0 4px; }
.pt-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pt-lede { color: var(--muted); font-size: 14px; margin: 0; }

.pt-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.pt-project {
  display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; color: var(--text); transition: border-color .15s;
}
.pt-project:hover { border-color: var(--primary); }
.pt-project:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pt-project-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pt-project-name { font-size: 15px; font-weight: 600; }
.pt-project-dates, .pt-project-count { font-size: 12.5px; color: var(--muted); }

.pt-progress { display: flex; align-items: baseline; gap: 10px; }
.pt-progress-num { font-size: 26px; font-weight: 600; line-height: 1; }
.pt-progress-label { font-size: 12.5px; color: var(--muted); }

/* Signing in, resetting, choosing: one narrow card. */
.pt-auth { max-width: 400px; margin: 40px auto; padding: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.pt-auth h1 { font-size: 20px; font-weight: 600; margin: 0 0 6px; }
.pt-auth .pt-lede { margin-bottom: 20px; }
.pt-form { display: flex; flex-direction: column; gap: 14px; }
.pt-field { display: flex; flex-direction: column; gap: 5px; margin: 0; font-size: 13px; }
.pt-field > span { font-size: 12.5px; color: var(--muted); }
.pt-aside { display: inline-block; margin-top: 16px; font-size: 13px; color: var(--primary); }
.pt-choices { display: flex; flex-direction: column; gap: 8px; }
.pt-choice {
  width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; font-size: 14px; color: var(--text); cursor: pointer;
}
.pt-choice:hover { border-color: var(--primary); color: var(--primary); }
@media (max-width: 560px) { .pt-top-inner, .pt-main { padding-left: 16px; padding-right: 16px; } .pt-auth { margin: 16px auto; } }

/* An invoice's payments received (Cash Collection counts them by date). */
.inv-payments { margin-top: 20px; }
.inv-pay-totals { display: flex; gap: 18px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.inv-pay-totals strong { color: var(--text); font-weight: 600; }
.inv-pay-note { padding: 10px 16px; font-size: 13px; background: var(--tone-warn-bg); color: var(--tone-warn-fg); border-bottom: 1px solid var(--border); }
.inv-pay-empty { padding: 14px 16px; font-size: 13px; color: var(--muted); }
.inv-pay-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 16px; border-top: 1px solid var(--border); }
.inv-pay-field { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 13px; flex: 1 1 150px; }
.inv-pay-field > span { font-size: 12px; color: var(--muted); }

/* Where an invoice's money stands, at the top of its page and in the list. */
.inv-pay-line { display: inline-block; margin-bottom: 10px; padding: 4px 10px; border-radius: 6px; font-size: 13px; }
.inv-pay-line:hover { text-decoration: underline; }
.inv-pay-line.is-paid       { background: var(--tone-ok-bg);       color: var(--tone-ok-fg); }
.inv-pay-line.is-part       { background: var(--tone-progress-bg); color: var(--tone-progress-fg); }
.inv-pay-line.is-unrecorded { background: var(--tone-warn-bg);     color: var(--tone-warn-fg); }
.inv-pay-line.is-none       { background: var(--tone-draft-bg);    color: var(--tone-draft-fg); }
.inv-part-paid { font-size: 12.5px; color: var(--tone-progress-fg); }
.inv-unrecorded { font-size: 12.5px; color: var(--tone-warn-fg); }

/* The invoices list's money columns, right aligned for adding up by eye. */
.data-table .inv-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Subtasks as a Kanban board, by timeline (projects/_kanban.php). */
.kb { padding: 14px 16px 16px; }
.kb-hint { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); }
.kb-board { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding-bottom: 6px; }
.kb-col {
  flex: 0 0 240px; display: flex; flex-direction: column; max-height: 75vh;
  background: var(--bg); border: 1px solid var(--border); border-top: 3px solid var(--muted); border-radius: 10px;
}
.kb-col-overdue   { border-top-color: var(--danger); }
.kb-col-today     { border-top-color: var(--warning); }
.kb-col-week      { border-top-color: var(--info); }
.kb-col-progress  { border-top-color: var(--primary); }
.kb-col-hold      { border-top-color: var(--tone-warn-fg); }
.kb-col-waiting   { border-top-color: var(--muted); }
.kb-col-completed { border-top-color: var(--success); }
.kb-col.is-target { outline: 2px dashed var(--primary); outline-offset: -2px; background: var(--primary-lt); }
.kb-col-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; }
.kb-col-head h3 { margin: 0; font-size: 13px; font-weight: 600; color: var(--text); }
.kb-count { min-width: 22px; padding: 1px 7px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); font-size: 11.5px; text-align: center; color: var(--muted); }
.kb-cards { display: flex; flex-direction: column; gap: 8px; padding: 0 10px 10px; overflow-y: auto; }
.kb-empty { padding: 10px 4px; font-size: 12px; color: var(--muted); text-align: center; }
.kb-card {
  display: flex; flex-direction: column; gap: 6px; padding: 10px 11px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; font-size: 12.5px;
}
.kb-card[draggable="true"] { cursor: grab; }
.kb-card.is-dragging { opacity: .5; }
.kb-card-title { font-weight: 600; font-size: 13px; color: var(--text); line-height: 1.3; }
.kb-card-title:hover { color: var(--primary); text-decoration: underline; }
.kb-card-task { color: var(--muted); line-height: 1.3; }
.kb-sep { opacity: .7; }
.kb-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.kb-due { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 6px; background: var(--tone-draft-bg); color: var(--tone-draft-fg); font-size: 11.5px; }
.kb-due svg { width: 12px; height: 12px; }
.kb-due.is-late  { background: var(--tone-stop-bg); color: var(--tone-stop-fg); }
.kb-due.is-today { background: var(--tone-warn-bg); color: var(--tone-warn-fg); }
.kb-due.is-none  { background: none; padding: 0; color: var(--muted); }
.kb-sub { padding: 1px 7px; border-radius: 6px; background: var(--tone-progress-bg); color: var(--tone-progress-fg); font-size: 11.5px; }
.kb-progress { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.kb-progress progress { flex: 1; height: 5px; appearance: none; border: 0; border-radius: 3px; background: var(--border); overflow: hidden; }
.kb-progress progress::-webkit-progress-bar { background: var(--border); }
.kb-progress progress::-webkit-progress-value { background: var(--success); }
.kb-progress progress::-moz-progress-bar { background: var(--success); }
.kb-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 22px; }
.kb-people { display: flex; align-items: center; gap: 2px; }
.kb-more { font-size: 11px; color: var(--muted); margin-left: 2px; }
.kb-owner { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-move { margin: 0; }
.kb-move summary { display: inline-block; font-size: 11.5px; color: var(--primary); cursor: pointer; list-style: none; }
.kb-move summary::-webkit-details-marker { display: none; }
.kb-move summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.kb-move-menu { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.kb-move-menu button { padding: 2px 8px; font-size: 11.5px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; color: var(--text); cursor: pointer; }
.kb-move-menu button:hover { border-color: var(--primary); color: var(--primary); }
@media (max-width: 560px) { .kb { padding: 12px; } .kb-col { flex-basis: 82vw; } }
.kb-card.is-saving { opacity: .6; pointer-events: none; }
.kb-status { margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; font-size: 13px; background: var(--tone-ok-bg); color: var(--tone-ok-fg); }
.kb-status.is-error { background: var(--tone-stop-bg); color: var(--tone-stop-fg); }