/* ============================================================================
   Component styles - the hand-built replacements for the 55 MUI components the
   React build used. Everything here is plain CSS on plain markup; the matching
   behaviour (open/close, focus, positioning) lives in js/ui/.
   ========================================================================== */

/* ---------------------------------------------------------------- icons */

/* Default box for every inline SVG from js/ui/icons.js. An <svg> with no width has no
   intrinsic size, so without this it stretches to fill whatever flex row it sits in.
   An explicit size passed to icon() is an inline style and still wins over this. */
.ic { width: 24px; height: 24px; flex-shrink: 0; }

/* -------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--ctl-h); padding: 5px 14px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--primary);
  font-size: .8125rem; font-weight: 600; text-transform: none;
  cursor: pointer; user-select: none;
  transition: background-color .2s, box-shadow .2s, border-color .2s;
}
.btn:hover:not(:disabled) { background: var(--primary-soft); }
.btn:disabled { color: var(--text-disabled); cursor: default; pointer-events: none; }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.btn-primary {
  background: var(--primary-soft); color: var(--primary-dark); box-shadow: none;
}
.btn-primary:hover:not(:disabled) { background: #dbeafe; box-shadow: none; }
.btn-primary:disabled { background: rgba(0,0,0,.12); color: var(--text-disabled); box-shadow: none; }

.btn-danger { background: #fef2f2; color: #dc2626; box-shadow: none; }
.btn-danger:hover:not(:disabled) { background: #fee2e2; }
.btn-warning { background: #fff7ed; color: #ea580c; box-shadow: none; }
.btn-warning:hover:not(:disabled) { background: #ffedd5; }

.btn-outlined { border-color: var(--border); color: var(--text-secondary); background: var(--surface); }
.btn-outlined:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }

.btn-sm    { min-height: 30px; padding: 4px 10px; font-size: .8125rem; }
.btn-block { width: 100%; }

/* icon-only */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--ctl-h); height: var(--ctl-h); padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: inherit;
  cursor: pointer; transition: background-color .2s;
}
.icon-btn:hover:not(:disabled) { background: rgba(0,0,0,.06); }
.icon-btn:disabled { color: var(--text-disabled); pointer-events: none; }
.icon-btn.sm { width: 28px; height: 28px; }
.icon-btn svg { width: 20px; height: 20px; }

/* toggle group - Day wise / Week wise / Month wise, Group by Project / Engineer */
.toggle-group { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-xs); overflow: hidden; }
.toggle-group button {
  padding: 7px 14px; border: 0; border-right: 1px solid var(--border);
  background: #fff; color: var(--text-secondary);
  font-size: .8125rem; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.toggle-group button:last-child { border-right: 0; }
.toggle-group button:hover:not(.active) { background: #f1f5f9; }
.toggle-group button.active { background: var(--primary); color: #fff; }

/* ------------------------------------------------------- text fields */

/* MUI's outlined field with the label notched into the border. Recreated with a
   floating <span> and a transparent gap so it reads identically. */
.field { position: relative; display: inline-flex; flex-direction: column; min-width: 0; }
.field.block { display: flex; width: 100%; }

.field > label {
  position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  padding: 0 5px; background: var(--surface);
  color: var(--text-secondary); font-size: .875rem; pointer-events: none;
  transition: top .15s, font-size .15s, color .15s;
}
.field.filled > label,
.field:focus-within > label {
  top: 0; font-size: .75rem;
}
.field:focus-within > label { color: var(--primary); }
.field.error > label { color: var(--error); }

.field input,
.field select,
.field textarea,
.field .field-box {
  width: 100%; min-height: var(--field-h); padding: 6px 11px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  font-size: .875rem; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 80px; resize: vertical; padding-top: 10px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--text); }
.field input:focus, .field select:focus, .field textarea:focus,
.field.open .field-box {
  border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
.field.error input, .field.error select, .field.error .field-box { border-color: var(--error); }
.field input:disabled, .field select:disabled { background: #f5f5f5; color: var(--text-disabled); }

.field .helper { margin: 3px 14px 0; font-size: .75rem; color: var(--text-secondary); }
.field.error .helper { color: var(--error); }

/* a button that looks like a text field - the filter dropdown triggers */
.field-box {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  cursor: pointer; text-align: left;
}
.field-box .caret { flex-shrink: 0; color: var(--text-secondary); transition: transform .15s; }
.field.open .field-box .caret { transform: rotate(180deg); }

/* input with a trailing icon (password eye, search) */
.field .adornment {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center;
}
.field.has-adornment input { padding-right: 42px; }

/* --------------------------------------------------------------- cards */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}
.card.pad     { padding: 24px; }
.card.pad-sm  { padding: 16px; }
.card.hoverable { transition: box-shadow .2s, transform .2s; }
.card.hoverable:hover { box-shadow: var(--shadow-3); transform: translateY(-2px); }

/* stat tile - "Projects in range", "Peak day load", "Days over capacity" */
/* Icon tile left, label over value right, optional trend chip pinned to the corner.
   The label sits ABOVE the number: the number is what you scan for, so it should be the
   thing at the baseline your eye stops on, not the caption. */
.stat {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: var(--stat-pad-y) var(--stat-pad-x); min-width: 0;
}
.stat .stat-trend {
  position: absolute; right: var(--stat-pad-x); bottom: var(--stat-pad-y);
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .6875rem; font-weight: 700;
}
.stat .stat-trend.up   { color: var(--success); }
.stat .stat-trend.down { color: var(--error); }
.stat > div { min-width: 0; }
.stat .stat-icon {
  display: flex; align-items: center; justify-content: center;
  width: var(--stat-icon); height: var(--stat-icon); border-radius: 11px; flex-shrink: 0;
}
.stat .stat-label { font-size: .75rem; color: var(--text-secondary); font-weight: 500; }
.stat .stat-value { font-size: var(--stat-value); font-weight: 700; line-height: 1.15; }

/* --------------------------------------------------------------- chips */

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 9px; border-radius: 12px;
  background: #eef2f7; color: var(--text);
  font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.chip.sm { height: 20px; font-size: .6875rem; padding: 0 7px; }

/* Status pill: tinted fill, no border, so a column of them reads as a colour bar you can
   scan vertically without reading a single word. */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 9px; border-radius: var(--radius-pill);
  font-size: .6875rem; font-weight: 700; white-space: nowrap;
}
.pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pill.ok      { background: var(--success-soft); color: #15803d; }
.pill.info    { background: var(--info-soft);    color: #0369a1; }
.pill.warn    { background: var(--warning-soft); color: #b45309; }
.pill.danger  { background: var(--error-soft);   color: #b91c1c; }
.pill.neutral { background: #f1f5f9;             color: #475569; }

/* Row-leading dot, the coloured marker before a project code. */
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }

/* Small round initials badge used inside table rows for the assigned person. */
.avatar-sm {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 50%;
  font-size: .625rem; font-weight: 700; color: #fff;
}

/* --------------------------------------------------------------- alerts */

.alert {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 16px; border-radius: var(--radius-xs);
  font-size: .875rem;
}
.alert svg { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; }
.alert-success { background: var(--success-soft); color: #1b5e20; }
.alert-error   { background: var(--error-soft);   color: #611a15; }
.alert-warning { background: var(--warning-soft); color: #663c00; }
.alert-info    { background: var(--info-soft);    color: #014361; }

.alert-filled.alert-success { background: var(--success); color: #fff; }
.alert-filled.alert-error   { background: var(--error);   color: #fff; }
.alert-filled.alert-warning { background: var(--warning); color: #fff; }
.alert-filled.alert-info    { background: var(--info);    color: #fff; }

/* --------------------------------------------------------------- tables */

.table { width: 100%; border-collapse: collapse; font-size: var(--table-font); }
.table th, .table td {
  padding: var(--table-pad-y) var(--table-pad-x);
  text-align: left; border-bottom: 1px solid var(--grid-line);
  vertical-align: middle;
  /* Data cells never wrap.

     Without this the browser's table algorithm reacts to a cramped container by splitting
     cell text, so "19-08-2026" becomes "19-08-" over "2026" and every row grows by a
     line. One long line that scrolls is readable; a date broken in half is not. The
     .scroll-x wrapper around every table absorbs the overflow, and the responsive tiers
     in layout.css shrink the surrounding chrome so the common case still fits with none. */
  white-space: nowrap;
}
/* Opt back in where a cell is prose rather than a value. */
.table th.wrap, .table td.wrap { white-space: normal; }
/* Free text - a task title, a delay remark - kept to one line. Wrapping these is what
   made rows three lines tall; the full string is on the cell's title attribute, so
   hovering still shows everything. The cap follows the density scale, because on a
   narrow screen a 240px title column is the difference between the table fitting and
   not. */
.table td.clip { max-width: var(--clip-w); overflow: hidden; text-overflow: ellipsis; }
.table thead th {
  font-weight: 600; font-size: .75rem; color: var(--text-secondary);
  background: var(--surface-sunken); position: sticky; top: 0; z-index: 1;
  border-bottom: 1px solid var(--border);
  /* Headers may wrap; data may not.

     This ordering is the whole trick to fitting a wide table. A nowrap data cell has a
     min-content width equal to its full text, so the browser cannot shrink it - which
     means when the table is over budget it takes the space out of the wrappable headers
     first. "Total Hours Spent" stacking onto two lines costs 16px of height once and
     gives back 57px of width on every row; a date splitting in half costs a line on
     every row and is unreadable besides. */
  white-space: normal; line-height: 1.2;
}
.table tbody tr { transition: background-color .12s; }
.table tbody tr:hover { background: var(--primary-soft); }
.table tbody tr.zebra:nth-child(even) { background: var(--zebra); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table .empty { padding: 40px 16px; text-align: center; color: var(--text-secondary); }

/* The blue header three tables use. This was applied with inline styles in each page,
   which is why nothing in a stylesheet could override its padding or wrapping. */
/* `.blue` is now a light header, not a solid blue bar. A saturated bar competes with
   the status pills and the primary button for attention; the data should be the loudest
   thing on the page. The class name is kept so no page markup has to change. */
.table.blue thead th { background: var(--surface-sunken); color: var(--text-secondary); }
.table.blue thead th.sortable:hover { color: var(--primary); }

/* sortable header */
.table th.sortable { cursor: pointer; user-select: none; }
.table th.sortable:hover { color: var(--primary); }
.table th.sortable .sort-arrow { opacity: 0; font-size: .7rem; margin-left: 4px; }
.table th.sortable.sorted .sort-arrow { opacity: 1; }

/* ----------------------------------------------------------- pagination */

/* One footer for every table in the app. The summary takes the left, the page buttons the
   right, and the row-size select sits between them so it never separates the two. */
.pagination {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; font-size: .8125rem; color: var(--text-secondary);
  border-top: 1px solid var(--grid-line);
  flex-wrap: wrap; row-gap: 8px;
}
.pagination .pg-summary { margin-right: auto; }
.pagination .pg-summary b { color: var(--text); font-weight: 600; }

.pagination .pg-size {
  height: 30px; padding: 0 6px;
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  background: #fff; color: var(--text-secondary); cursor: pointer;
}

.pagination .pages { display: flex; align-items: center; gap: 4px; }
.pagination .pages button {
  min-width: 30px; height: 30px; padding: 0 6px;
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  font-weight: 600;
  background: #fff; cursor: pointer; font-size: .8125rem; color: var(--text);
}
.pagination .pages button:hover:not(:disabled) { background: #f1f5f9; }
.pagination .pages button.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.pagination .pages button:disabled { color: var(--text-disabled); cursor: default; }
/* The arrows are navigation, not choices - no box, so the page numbers are what the eye
   picks out and the current page is the only filled thing in the row. */
.pagination .pages .pg-step {
  border-color: transparent; background: transparent;
  font-size: 1.125rem; line-height: 1; color: var(--text-secondary);
}
.pagination .pages .pg-step:hover:not(:disabled) { background: #f1f5f9; color: var(--text); }
.pagination .pg-gap { padding: 0 2px; color: var(--text-disabled); }

/* ----------------------------------------------------------------- tabs */

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tabs button {
  position: relative; padding: 9px 14px;
  border: 0; background: transparent; cursor: pointer;
  font-size: .8125rem; font-weight: 600; letter-spacing: .01em;
  color: var(--text-secondary); white-space: nowrap;
}
.tabs button:hover { color: var(--primary); }
.tabs button.active { color: var(--primary); }
.tabs button.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--primary);
}

/* -------------------------------------------------------------- popover */

.popover {
  position: absolute; z-index: 1300;
  background: var(--surface); border-radius: var(--radius-sm);
  box-shadow: 0 5px 5px -3px rgb(0 0 0/.2), 0 8px 10px 1px rgb(0 0 0/.14), 0 3px 14px 2px rgb(0 0 0/.12);
  overflow: hidden;
}
.popover .popover-search { padding: 10px; border-bottom: 1px solid var(--grid-line); }
.popover .popover-list { max-height: 280px; overflow-y: auto; padding: 4px 0; }
.popover .popover-actions {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border-top: 1px solid var(--grid-line);
}
.popover .opt {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 14px; cursor: pointer; font-size: .875rem;
}
.popover .opt:hover { background: #f1f5f9; }
.popover .opt.selected { background: var(--primary-soft); }
.popover .opt input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
.popover .no-results { padding: 18px 14px; text-align: center; color: var(--text-secondary); font-size: .8125rem; }

/* --------------------------------------------------------------- dialog */

.backdrop {
  position: fixed; inset: 0; z-index: 1300;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(0, 0, 0, .5);
  animation: fade-in .18s ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.dialog {
  display: flex; flex-direction: column;
  width: 100%; max-width: 600px; max-height: calc(100vh - 64px);
  background: var(--surface); border-radius: var(--radius-sm);
  box-shadow: 0 11px 15px -7px rgb(0 0 0/.2), 0 24px 38px 3px rgb(0 0 0/.14);
  animation: dialog-in .18s ease;
}
@keyframes dialog-in { from { opacity: 0; transform: translateY(-12px) scale(.98); } to { opacity: 1; transform: none; } }
.dialog.xs { max-width: 420px; }
.dialog.sm { max-width: 560px; }
.dialog.md { max-width: 760px; }
.dialog.lg { max-width: 1000px; }

.dialog > header {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 24px; font-size: 1.25rem; font-weight: 700; flex-shrink: 0;
}
.dialog > .dialog-body { padding: 8px 24px 20px; overflow-y: auto; flex: 1 1 auto; }
.dialog > .dialog-body.divided { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding-top: 20px; }
.dialog > footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 20px; flex-shrink: 0;
}

/* ------------------------------------------------------------- snackbar */

.snackbar-host {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 1400; display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none;
}
.snackbar {
  display: flex; align-items: center; gap: 12px;
  max-width: 560px; padding: 8px 16px;
  border-radius: var(--radius-xs); box-shadow: var(--shadow-4);
  font-size: .875rem; pointer-events: auto;
  animation: snack-in .2s ease;
}
@keyframes snack-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.snackbar.closing { opacity: 0; transform: translateY(12px); transition: opacity .2s, transform .2s; }
.snackbar .close { margin-left: auto; color: inherit; opacity: .85; }
.snackbar .close:hover { opacity: 1; background: rgba(255,255,255,.15); }

/* -------------------------------------------------------------- tooltip */

.tooltip {
  position: fixed; z-index: 1500; max-width: 320px;
  padding: 6px 10px; border-radius: var(--radius-xs);
  background: rgba(97, 97, 97, .94); color: #fff;
  font-size: .75rem; line-height: 1.45; pointer-events: none;
  animation: fade-in .12s ease;
}
.tooltip .t-title { font-weight: 700; margin-bottom: 2px; }

/* Indeterminate loading bar in the utilization panel. */
@keyframes util-indeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(340%); }
}

/* ------------------------------------------------------------ progress */

.progress { height: 8px; border-radius: 4px; background: #eef2f7; overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 4px; background: #16a34a; transition: width .3s; }

.meter { min-width: 92px; }
.meter .meter-value { font-size: .75rem; font-weight: 700; }
.meter .meter-bar { margin-top: 2px; height: 4px; border-radius: 2px; background: #eef2f7; overflow: hidden; }
.meter .meter-bar > span { display: block; height: 100%; border-radius: 2px; }

/* spinner */
.spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid var(--primary-soft); border-top-color: var(--primary);
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-box { display: flex; align-items: center; justify-content: center; padding: 60px; }

/* --------------------------------------------------------- placeholder */

.placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 64px 24px; text-align: center; }
.placeholder .ph-icon {
  display: flex; align-items: center; justify-content: center;
  width: 76px; height: 76px; border-radius: 50%; background: #e3f2fd; color: var(--primary);
}
.placeholder .ph-icon svg { width: 34px; height: 34px; }
.placeholder h3 { font-size: 1.25rem; font-weight: 700; }
.placeholder p  { color: var(--text-secondary); max-width: 560px; }

/* --------------------------------------------------------------- avatar */

.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--primary); color: #fff;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}

/* ============================================================================
   Timeline grid (js/pages/pmTimeline.js)
   ========================================================================== */

/*
  One scroll container for both the header and the rows, so the columns can never drift
  out of alignment with their headings the way two separate scrollers would.

  Slim, quiet scrollbars: Windows and Linux Chrome reserve real layout space and paint a
  full-contrast grey track, which read as a dead grey band down the right of the grid and
  across its foot - next to the coloured bars that looked like broken chrome rather than a
  control. macOS hides them until use, which is why it only showed on some machines.
*/
.tl-scroll {
  flex: 1; overflow: auto; min-height: 340px;
  scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent;
}
.tl-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.tl-scroll::-webkit-scrollbar-track,
.tl-scroll::-webkit-scrollbar-corner { background: transparent; }
.tl-scroll::-webkit-scrollbar-thumb {
  background-color: #cbd5e1; border-radius: 8px;
  border: 2px solid transparent; background-clip: content-box;
}
.tl-scroll::-webkit-scrollbar-thumb:hover { background-color: #94a3b8; }

.tl-grid { display: grid; min-width: fit-content; }

.tl-head {
  position: sticky; top: 0;
  border-bottom: 1px solid var(--border); padding: 10px 8px;
}
.tl-head-label {
  left: 0; z-index: 3; background: #f1f5f9;
  border-right: 1px solid var(--border); padding-left: 16px; padding-right: 16px;
}
.tl-head-col { z-index: 2; background: #f8fafc; border-left: 1px solid var(--border); text-align: center; }

/* left hand label column, pinned while the time columns scroll */
.tl-label {
  position: sticky; left: 0; z-index: 1; background: #fff;
  border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
  padding: 8px; display: flex; align-items: center; gap: 4px;
  cursor: pointer; min-width: 0;
}
.tl-label:hover { background: #f1f5f9; }
.tl-label.open { background: #eff6ff; }
.tl-label.tl-sub {
  display: block; cursor: default; background: #fbfdff;
  padding: 6px 8px 6px 40px;
}
.tl-label.tl-sub:hover { background: #fbfdff; }

/* the band of time columns for one row */
.tl-band {
  display: grid; align-items: center;
  /* Clip, do not scroll: sub-pixel rounding makes this inner grid a few pixels wider than
     its track, and a scroll region there paints a grey sliver down the edge of every row. */
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.tl-cell-bg { grid-row: 1; border-left: 1px solid var(--border); height: 100%; }

.tl-bar {
  align-self: center; margin: 0 4px; padding: 0 8px;
  display: flex; align-items: center; gap: 4px;
  border-radius: 4px; overflow: hidden; min-width: 0;
}
.tl-bar:hover { filter: brightness(0.92); }

/* one scored utilization cell in the engineer view */
.tl-score {
  border-bottom: 1px solid var(--border); border-left: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}

/* filter strip: one row, scrolls sideways rather than wrapping */
.tl-toolbar {
  display: flex; flex-wrap: nowrap; gap: 10px; align-items: center;
  justify-content: space-between; overflow-x: auto;
  /* overflow-x:auto forces overflow-y to auto as well, which would clip the notched field
     labels sitting above the input border. Pad instead of clip. */
  padding-top: 8px; padding-bottom: 4px;
  scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent;
}
.tl-toolbar::-webkit-scrollbar { height: 8px; }
.tl-toolbar::-webkit-scrollbar-track { background: transparent; }
.tl-toolbar::-webkit-scrollbar-thumb {
  background-color: #cbd5e1; border-radius: 8px;
  border: 2px solid transparent; background-clip: content-box;
}
.tl-toolbar input[type=date] { font-size: 13px; }

/* ============================================================================
   Calendar (js/pages/engineerCalendar.js)
   ========================================================================== */

/* a spanning task bar, in the week grid or a month week-row */
.cal-bar {
  align-self: center; margin: 0 4px; padding: 0 10px;
  display: flex; align-items: center; gap: 6px;
  border-radius: 6px; cursor: pointer; overflow: hidden; min-width: 0;
}
.cal-bar:hover { filter: brightness(0.96); }

/* DAY view: one card per task */
.cal-day-card { padding: 12px; border-radius: 8px; cursor: pointer; }
.cal-day-card:hover { filter: brightness(0.97); }

/* WEEK view */
.cal-week-head { flex-shrink: 0; display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-week-head > div {
  text-align: center; padding: 10px 0;
  border-left: 1px solid var(--border);
}
.cal-week-head > div:first-child { border-left: none; }

.cal-week-lines {
  position: absolute; inset: 0; display: grid;
  grid-template-columns: repeat(7, 1fr); pointer-events: none;
}
.cal-week-lines > div { border-left: 1px solid var(--border); }
.cal-week-lines > div:first-child { border-left: none; }

.cal-daynum-lg {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
}

/* MONTH view */
.cal-month-head {
  flex-shrink: 0; display: grid; grid-template-columns: repeat(7, 1fr);
  background: #f8fafc;
}
.cal-month-head > div { text-align: center; padding: 8px 0; letter-spacing: .6px; }

/* flex-grow so the six rows share the card height, but flex-shrink 0 with an auto basis so
   a week holding more task lanes than the others grows instead of being squeezed -
   squeezing made its bars overflow into the next week. */
.cal-month-row { flex: 1 0 auto; min-height: 96px; display: flex; flex-direction: column; }

.cal-month-days { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-month-days > div {
  display: flex; justify-content: center; padding-top: 6px;
  border-left: 1px solid var(--border);
}
.cal-month-days > div:first-child { border-left: none; }

.cal-daynum {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem;
}

/* YEAR view + the mini month picker */
.cal-year {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 16px;
}
@media (max-width: 1200px) { .cal-year { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .cal-year { grid-template-columns: 1fr; } }

.cal-mini-cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.cal-mini-cell:hover { background: rgba(0, 0, 0, .06); }

@media (max-width: 900px) {
  .cal-year { grid-template-columns: 1fr; }
}

/* ------------------------------------------------- responsive components

   Companions to the tiers in layout.css: the pieces whose own padding is what stops a
   card or dialog fitting, rather than the page gutter. */

/* Sizes here come from the tokens, so these tiers only carry what a token cannot
   express. */
@media (max-width: 1500px) { .card.pad { padding: 18px; } }
@media (max-width: 1200px) {
  .card.pad { padding: 14px; }
  .stat .stat-label { font-size: .75rem; }
  .stat { gap: 10px; }
}

/* A tab strip is the one row that should never wrap - a tab on a second line reads as a
   different control. Let it scroll sideways instead. */
@media (max-width: 1000px) {
  .tabs { overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex-shrink: 0; }
}

/* A dialog sized in px cannot fit a phone. Cap every size at the viewport and let the
   body scroll rather than pushing the footer buttons off-screen. */
@media (max-width: 700px) {
  /* Filter fields are given a fixed px width in JS (`width: 200` etc). That is right on a
     desktop and impossible on a phone, so cap it and let the row it sits in wrap. The
     cap does not fight the inline width - max-width simply wins when it is smaller. */
  .field { max-width: 100%; }
  .page .row { flex-wrap: wrap; row-gap: 10px; }
  /* The size classes are listed explicitly: `.dialog.xs { max-width: 420px }` outranks a
     bare `.dialog` selector no matter which media query it sits in. */
  .dialog, .dialog.xs, .dialog.sm, .dialog.md, .dialog.lg {
    max-width: calc(100vw - 20px); max-height: calc(100vh - 20px);
  }
  .dialog > header { padding: 14px 16px; }
  .dialog > .dialog-body { padding: 8px 16px 16px; }
  .dialog > footer { padding: 10px 16px; flex-wrap: wrap; }
  .popover { max-width: calc(100vw - 20px); }
}

.tabs { scrollbar-width: none; -ms-overflow-style: none; }
.tabs::-webkit-scrollbar { display: none; }

.btn-export { background: var(--secondary); color: #fff; box-shadow: var(--shadow-1); }
.btn-export:hover:not(:disabled) { background: #6d28d9; box-shadow: var(--shadow-2); }
.btn-create { background: #60a5fa; color: #000; box-shadow: var(--shadow-1); }
.btn-create:hover:not(:disabled) { background: #3b82f6; color: #fff; box-shadow: var(--shadow-2); }
.btn-create:disabled { color: #000; opacity: 0.6; }