/* ScopeIntel design system — reproduces the source app's MUI theme (see
   docs/frontend-design-spec.md). Flat SaaS look: light slate background, white cards, one strong
   blue accent, 12px corners, hairline borders instead of heavy shadows. */

:root {
  --bg-page: #f8fafc;
  --bg-navbar: #ffffff;
  --bg-surface: #f1f5f9;
  --bg-card: #ffffff;
  --bg-card-muted: #e2e8f0;
  --text-on-light: #0f172a;
  --text-muted: #64748b;
  --border: rgba(148, 163, 184, 0.24);
  --accent: #2563eb;
  --accent-strong: #93c5fd;
  --accent-tint: rgba(37, 99, 235, 0.08);
  --accent-tint-soft: rgba(37, 99, 235, 0.04);
  --focus: #3b82f6;

  --secondary: #334155;

  --status-completed: #0ca30c;
  --status-started: #2a78d6;
  --status-pending: #fab219;
  --status-revision: #d03b3b;
  --status-hold: #64748b;

  --priority-normal: #64748b;
  --priority-urgent: #d03b3b;

  --team-q: #2a78d6;
  --team-e: #eb6834;
  --team-s: #1baf7a;
  --team-d: #4a3aa7;

  --warning-strong: #d68c2a;
  --success: #1baf7a;

  --radius: 12px;
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08);
  --font: Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-page);
  color: var(--text-on-light);
  font-family: var(--font);
  font-size: 16px;
  min-height: 100vh;
}

#app-root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: rgba(37, 99, 235, 0.2); }

h1, h2, h3, h4, h5, h6 { color: var(--text-on-light); margin: 0 0 0.5em; font-weight: 700; }
h4.page-title { font-size: 1.75rem; font-weight: 700; margin-bottom: 4px; }
h5 { font-size: 1.375rem; font-weight: 600; color: #1e293b; }
h6, .section-title { font-size: 1.125rem; font-weight: 600; color: #1e293b; margin: 0 0 12px; }
p { line-height: 1.6; margin: 0 0 1em; }
.text-muted { color: var(--text-muted); }
.caption { font-size: 0.8125rem; color: var(--text-muted); }
.subtitle { color: var(--text-muted); font-size: 1rem; margin-bottom: 20px; }

/* ---------- Layout shell ---------- */
.main-content {
  /* No max-width — matches the reference's own main content Box (App.tsx), which is width:100%
     with no cap at all. This 1400px cap was never in the reference; it silently narrowed every
     page's usable width at wide viewports (verified via Reports: identical control widths in
     both apps, but our container measured 1302px against the reference's 1787px at the same
     1900px window — the cap, not the controls, was the difference). */
  flex: 1;
  padding: 24px 16px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
}
@media (min-width: 600px) { .main-content { padding: 24px; } }
@media (min-width: 900px) { .main-content { padding: 32px; } }
@media (min-width: 1536px) { .main-content { padding: 32px 48px; } }

/* Claws back .main-content's top padding on a specific page's title row — matches the
   reference's own trick (WorkflowScreen.tsx: "mt: {xs:-1.5, md:-2.5}") which nets down to a
   consistent ~12px gap under the navbar instead of the shared layout's full 24-32px. */
.page-header-tight { margin-top: -12px; }
@media (min-width: 900px) { .page-header-tight { margin-top: -20px; } }

.logged-out-header {
  text-align: center;
  margin-bottom: 24px;
}
.logged-out-header img { width: 210px; max-width: 80%; }

/* ---------- NavBar ---------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-navbar);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.05);
}
.navbar-inner {
  /* No max-width — reference's Toolbar (NavBar.tsx) has none either, same as .main-content. */
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
}
@media (min-width: 600px) { .navbar-inner { padding: 10px 24px; } }
@media (min-width: 900px) { .navbar-inner { padding: 10px 32px; } }
@media (min-width: 1536px) { .navbar-inner { padding: 10px 48px; } }

.navbar-logo { height: 32px; margin-right: 16px; display: none; }
@media (min-width: 600px) { .navbar-logo { display: block; } }

.navbar-links { display: flex; align-items: center; gap: 4px; flex-grow: 1; flex-wrap: wrap; }
.navbar-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  border: none;
  background: none;
  position: relative;
}
.navbar-link.active { font-weight: 700; color: var(--accent); background: var(--accent-tint); }
.navbar-link .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--status-pending);
  position: absolute; top: 4px; right: 6px;
}

.navbar-right { display: flex; align-items: center; gap: 10px; }
.navbar-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.9rem;
}
.navbar-username { font-size: 0.9375rem; display: none; }
@media (min-width: 600px) { .navbar-username { display: inline; } }

/* ---------- Footer ---------- */
.site-footer {
  text-align: center;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font);
  font-size: 0.9375rem;
  font-weight: 600;
  text-transform: none;
  border-radius: var(--radius);
  padding: 9px 18px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, opacity 0.15s;
  line-height: 1.4;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { background: #1d4ed8; }
.btn-outline { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn-outline:hover:not(:disabled) { background: var(--accent-tint); }
.btn-text { background: none; color: var(--accent); border: none; padding: 6px 8px; }
.btn-text:hover:not(:disabled) { text-decoration: underline; }
.btn-danger { background: transparent; color: var(--status-revision); border-color: var(--status-revision); }
.btn-danger:hover:not(:disabled) { background: rgba(208, 59, 59, 0.08); }
.btn-warning { background: transparent; color: var(--warning-strong); border-color: var(--warning-strong); }
.btn-warning:hover:not(:disabled) { background: rgba(214, 140, 42, 0.08); }
.btn-warning-solid { background: var(--warning-strong); color: #fff; }
.btn-small { padding: 5px 12px; font-size: 0.8125rem; }
.btn-large { padding: 12px 22px; font-size: 1rem; }
.btn-block { width: 100%; }
.btn-icon { padding: 6px; border-radius: 50%; background: none; border: none; cursor: pointer; color: var(--text-muted); }
.btn-icon:hover { background: var(--bg-surface); }
/* Semantic icon colors (mirrors MUI IconButton color="warning"/"error"/"success") — the hover
   tint matches the icon's own color at ~12% alpha instead of the generic gray hover above. */
.btn-icon.icon-warning { color: var(--warning-strong); }
.btn-icon.icon-warning:hover { background: rgba(214, 140, 42, 0.12); }
.btn-icon.icon-error { color: var(--status-revision); }
.btn-icon.icon-error:hover { background: rgba(208, 59, 59, 0.12); }
.btn-icon.icon-success { color: var(--success); }
.btn-icon.icon-success:hover { background: rgba(27, 175, 122, 0.12); }

/* MUI ToggleButtonGroup — measured off the reference's Period/Group By controls: selected is a
   neutral navy-at-8%-alpha fill (NOT the accent blue used elsewhere for "selected"), unselected
   is transparent with a light gray border. Both weight 600.
   Crucially it's a JOINED segmented control, not separate gapped pills (a first pass got the
   colors right but missed this and looked wrong next to the reference) — measured via
   getComputedStyle on the live buttons: the group is a flex row with zero gap, only the first/
   last buttons keep outer corner radius, middle buttons are square, and each non-first button
   overlaps its neighbor by 1px (border-left made transparent + margin-left:-1px) so adjoining
   1px borders don't double up into a visible 2px seam. */
.toggle-group { display: inline-flex; min-width: 0; max-width: 100%; }
.toggle-group .toggle-btn { flex-shrink: 1; min-width: 0; white-space: normal; text-align: center; }
/* Reports' Period/Month/Group By/Company/actions row — the reference (ReportsScreen.tsx:383,
   `Stack direction={{xs:'column', md:'row'}}`) is a SINGLE non-wrapping row above 900px, and a
   full vertical stack below 900px. Verified directly against the live reference at 1280px: it
   does NOT shrink the controls to fit — MUI Stack has no flex-shrink override, so every control
   stays its natural size and the row simply overflows, scrolling horizontally inside the Paper.
   An earlier version of this rule set `min-width:0` on every child hoping shrink would look
   "compressed but tidy" instead — flex-shrink's default (1) then let the Company select and
   action buttons shrink unevenly, and since nothing actually wrapped, the overflowing content
   visually overlapped its neighbor instead of scrolling. flex-shrink:0 + a scrollable card
   matches what the reference actually does. */
.reports-filter-card { overflow-x: auto; }
.reports-controls-row { display: flex; align-items: center; gap: 24px; }
/* Nothing shrinks by default (this is what stops the Company select/action buttons from
   compressing into an overlap) — except the toggle groups, which are designed to shrink by
   wrapping their own button labels in place (see .toggle-btn's white-space:normal), so letting
   THEM alone compress buys back room before the row ever needs to fall back to the scrollbar. */
.reports-controls-row > * { flex-shrink: 0; }
/* This whole filter bar is built from shared classes (.card-flat, global input/select, .btn)
   tuned elsewhere for OTHER contexts (the Workflow filter bar's dense inline fields, generic
   buttons app-wide) — none of which match this specific Paper in the reference, measured
   directly off the live app: p:3 (24px, not .card-flat's 16px), size="small" Month/Company
   fields at 40px tall (8.5px vertical padding, not the global 10.5px), and default (not
   size="small") action buttons at "5px 15px" padding (not .btn's 9px 18px). Scoped here rather
   than changed globally so the Workflow filter bar and every other button in the app keep their
   own already-correct sizing. */
.card-flat.reports-filter-card { padding: 12px 24px; }
.reports-controls-row input[type="month"] { height: 40px; padding: 0 14px; }
.reports-controls-row select#report-company { height: 40px; padding: 0 32px 0 14px; }
.reports-controls-row .flex-gap .btn { height: 38px; padding: 0 15px; }
.reports-controls-row .stack-label { margin-bottom: 8px; }
@media (max-width: 900px) {
  .reports-controls-row { flex-direction: column; align-items: stretch; }
  .reports-controls-row > * { margin-left: 0 !important; }
}
.toggle-btn {
  background: transparent; color: rgba(0, 0, 0, 0.54); border: 1px solid rgba(0, 0, 0, 0.12);
  font-weight: 600; font-size: 0.8125rem; border-radius: 0; position: relative; padding: 7px;
}
.toggle-group .toggle-btn:first-child { border-top-left-radius: var(--radius); border-bottom-left-radius: var(--radius); }
.toggle-group .toggle-btn:last-child { border-top-right-radius: var(--radius); border-bottom-right-radius: var(--radius); }
.toggle-group .toggle-btn:not(:first-child) { border-left-color: transparent; margin-left: -1px; }
.toggle-btn:hover:not(:disabled) { background: rgba(0, 0, 0, 0.04); z-index: 1; }
.toggle-btn.active { background: rgba(15, 23, 42, 0.08); color: var(--text-on-light); z-index: 1; }
.toggle-btn.active:hover { background: rgba(15, 23, 42, 0.12); }

/* MUI Tabs — underline indicator, no background, selected = accent blue text, unselected =
   muted gray text (measured off the reference's Table/Statistics tabs). */
.tab-bar { display: flex; gap: 24px; border-bottom: 1px solid var(--border); }
.tab-btn {
  background: none; border: none; padding: 10px 2px; font-weight: 600; font-size: 0.9375rem;
  color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- Cards / Paper ---------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 24px;
}
.card-flat { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.card-top-border { border-top: 3px solid var(--accent); }

/* ---------- Forms ----------
   Reproduces the source's MUI TextField/Select "outlined" variant, measured directly off the
   running reference app (getComputedStyle on its Workflow Board filter selects): 40px control
   height, 12px border-radius, 1px rgba(0,0,0,.23) border, 16px value text, a floating label that
   sits ON the border line at 12px/gray once the field has a value (every field here always has
   one, so the label is simply rendered pre-floated rather than animating on focus/blur like
   MUI's JS-driven version does — visually identical end state, no behavior lost since these
   controls are never genuinely "empty"). The floating label needs a background patch to punch
   a visual notch in the border; since every surface in this app is a white card, `#fff` is a
   safe universal patch color. */
label, .field-label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 6px; color: var(--text-on-light); }
.field-label .required, label .required { color: var(--status-revision); }

input[type=text], input[type=password], input[type=email], input[type=number],
input[type=date], input[type=month], input[type=year], input[type="datetime-local"],
select, textarea {
  width: 100%;
  font-family: var(--font);
  font-size: 1rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.23);
  border-radius: 12px;
  padding: 10.5px 14px;
  color: var(--text-on-light);
  line-height: 1.4375em;
}
textarea { line-height: 1.4375; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  border-width: 2px;
  margin: -1px; /* compensate the thicker border (1px -> 2px) without disturbing padding */
}
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%2364748b' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 24px;
  cursor: pointer;
}

/* Floating notched label — only applies inside .form-field, which wraps a real MUI-style
   TextField/Select. A bare <label> used elsewhere (toggle-group headers like "Period"/"Group
   By", the "Workflow Pipeline" stack label) is intentionally NOT touched by this rule since the
   reference renders those as plain stacked Typography, not a TextField label. */
.form-field { position: relative; margin-top: 10px; margin-bottom: 18px; }
.form-field > label {
  position: absolute;
  top: -8px;
  left: 10px;
  display: inline-block;
  margin-bottom: 0;
  padding: 0 6px;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-muted);
  background: #fff;
  line-height: 1.1;
  z-index: 1;
  pointer-events: none;
}
/* A field with no <label> (placeholder-only, e.g. the entries-table search box) needs no extra
   top margin for a floating label that isn't there. */
.form-field:not(:has(> label)) { margin-top: 0; }
/* Plain stacked label used above a control that is NOT a TextField/Select with its own floating
   label in the reference (e.g. "Workflow Pipeline", "Period", "Group By") — measured off the
   reference's own Typography (body2, 15px/600/navy) rather than a floating notch. */
.stack-label { display: block; font-size: 0.9375rem; font-weight: 600; color: var(--text-on-light); margin-bottom: 6px; }

.form-error input, .form-error select { border-color: var(--status-revision); }
.field-error-text { color: var(--status-revision); font-size: 0.8125rem; margin-top: 4px; }
.helper-text { color: var(--text-muted); font-size: 0.8125rem; margin-top: 4px; }
.switch-row { display: flex; align-items: center; gap: 10px; cursor: pointer; }
/* MUI-style pill toggle — a plain checkbox styled as track+thumb, matching the source's Switch
   component used for "Enable Team Chat" / "Show Obsolete" / "Backdate this entry". */
.switch { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch-track {
  /* pointer-events: none is required — without it this track (painted after the input in DOM
     order, so it stacks on top) swallows every click meant for the actual checkbox beneath it,
     silently making the switch unclickable. */
  position: absolute; inset: 0; background: var(--bg-card-muted); border-radius: 999px;
  transition: background 0.15s; pointer-events: none;
}
.switch-track::before {
  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: transform 0.15s;
}
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::before { transform: translateX(16px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--focus); outline-offset: 2px; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* Workflow Board's filter bar — a flex row (not a grid) so fields shrink smoothly as the window
   narrows instead of a grid track's hard minmax() floor forcing an abrupt wrap to a 2nd line.
   Matches the reference's Stack direction="row" flexWrap="wrap": everything (fields, Clear
   Filters, Entries count, Show Obsolete) lives in ONE row, wrapping only once truly out of room. */
.filter-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.filter-field { flex: 1 1 auto; min-width: 110px; max-width: 220px; }
.filter-bar-end { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; }

/* ---------- Alerts ---------- */
.alert { border-radius: 8px; padding: 12px 16px; font-size: 0.9375rem; margin-bottom: 16px; border: 1px solid transparent; }
.alert-info { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.alert-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }

/* ---------- Chips (status/priority "tinted chip" convention) ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}
.chip-outline { background: transparent; border: 1px solid var(--border); color: var(--text-muted); }
/* MUI's <Chip> with no `variant`/`color` prop at all (its plain default) — a subtle gray fill,
   NOT the outlined style .chip-outline gives. Measured off the reference (NotificationsScreen's
   "not yet acknowledged" name chips, WorkflowScreen's "Obsolete" tag): rgba(0,0,0,.08) fill,
   regular (400) weight — .chip's own 600 is for the accent-tinted status/priority chips, which
   this default chip doesn't have. */
.chip-default { background: rgba(0, 0, 0, 0.08); color: var(--text-on-light); font-weight: 400; }

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; }
thead th {
  background: var(--bg-page);
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
tbody td { padding: 6px 10px; font-size: 0.9375rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
/* Opt-in for plain-text cells only (Client Name/Task/Assigned To/Department) — matches the
   reference's fixed 50px row height by clipping instead of wrapping to a 2nd line. NOT applied
   to every cell: cells holding a select/input/icon-buttons (Status, Due Date, Actions) must not
   get `overflow:hidden`, since with auto table-layout that lets the browser's column-width
   algorithm treat the cell as shrinkable and clip the actual controls, not just overflow text. */
.cell-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Status/Priority/Revisions/Due Date/Actions cells (all share this existing data attribute)
   hold a select+icon-button or several icon-buttons side by side — these must never wrap to a
   2nd line the way long text does; unlike .cell-truncate this has no overflow:hidden, so if the
   content genuinely needs more room than the column's default width, the column grows to fit it
   instead of clipping a button. */
tbody td[data-stop-row-click] { white-space: nowrap; }
tbody tr:nth-child(odd) { background: #fafbfc; }
tbody tr:hover { background: var(--bg-surface); }
tbody tr.obsolete-row { opacity: 0.55; background: var(--bg-page); }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.table-wrap table { min-width: 800px; }
/* Fixed layout for the Entries table specifically (every column has an explicit width from
   DEFAULT_COLUMN_WIDTHS) — auto layout's column-width algorithm was unpredictably collapsing the
   Actions column (3 icon buttons) below its specified width even with an explicit <th> width and
   white-space:nowrap; fixed layout takes column widths from the header row literally, with no
   such collapsing. Scoped to this table's id, not every `.table-wrap table`, since other tables
   in the app don't define per-column widths and would just divide space evenly under fixed. */
#entries-table { table-layout: fixed; }
/* Inline status/priority selects inside table cells must size to their own text, not the
   global form-field 100% rule above — otherwise the browser clips the selected option's label
   (e.g. "Normal" rendering as "Norm") inside a narrow auto-layout column. */
.table-wrap select { width: auto; min-width: max-content; }
/* Due Date's <input type="datetime-local"> is the one plain (non-chip) form control left in the
   table body — the reference renders it as a borderless "standard" TextField, not the bordered
   "outlined" input used by the filter bar, so the generic input rule above (which gives every
   input a border + 10.5px padding) must not apply here or the row balloons in height. */
.table-wrap td input[type="datetime-local"] {
  background: transparent;
  border: none;
  padding: 2px 4px;
  font-size: 0.8125rem;
  width: auto;
}
.table-wrap td input[type="datetime-local"]:focus {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  border: none;
  margin: 0;
}
th.sortable { cursor: pointer; user-select: none; }
th.sortable .arrow { font-size: 0.7rem; margin-left: 4px; }

/* Status/priority selects rendered as a colored pill (mirrors the source's TextField
   variant="standard" + disableUnderline, whose renderValue swaps the value for a Chip) — the
   background/color are set inline per row from Badges.selectChipStyle() since they vary by
   status/priority value, not something a static class can express. */
.select-chip {
  width: auto;
  min-width: max-content;
  border: none;
  border-radius: 999px;
  padding: 3px 20px 3px 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.6;
  background-position: right 2px center;
  background-size: 15px;
}
.select-chip:focus { border: none; margin: 0; outline: 2px solid var(--focus); outline-offset: 1px; }

/* Pipeline identity marker shown before Entry No. — shape+color pair, matches
   badgeStyles.ts's PIPELINE_MARKERS (see Badges.pipelineMarkerHtml). */
.pipeline-marker { display: inline-block; width: 9px; height: 9px; flex-shrink: 0; margin-right: 6px; vertical-align: middle; }
.shape-circle { border-radius: 50%; }
.shape-square { border-radius: 2px; }
.shape-diamond { border-radius: 1px; transform: rotate(45deg); }
.shape-triangle { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.shape-pentagon { clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); }
.shape-hexagon { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
.shape-star { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.shape-plus { clip-path: polygon(35% 0%, 65% 0%, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0% 65%, 0% 35%, 35% 35%); }

/* ---------- Stat tiles ---------- */
.stat-tile {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px;
}
.stat-tile.clickable { cursor: pointer; transition: box-shadow .15s, transform .15s; }
.stat-tile.clickable:hover { box-shadow: var(--shadow-card); transform: translateY(-1px); }
/* Admin Dashboard's CTA tiles are a different Paper (sx={{p:3}}, Typography variant="h3" value)
   than the plain label-then-h4-value StatTile used on Performance/Reports/Dashboard — measured
   directly off the reference (24px padding; 8px value->title, 8px title->description, 16px
   description->button gaps; the button itself is MUI's unstyled default medium, 6px/16px). */
.admin-tile { padding: 24px; display: flex; flex-direction: column; }
.admin-tile .stat-value-lg { font-size: 2rem; font-weight: 700; margin-bottom: 8px; }
.admin-tile h6 { margin-bottom: 8px; }
.admin-tile p { margin-bottom: 0; flex-grow: 1; }
.admin-tile .btn { margin-top: 16px; align-self: flex-start; padding: 6px 16px; }
.stat-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); font-weight: 700; margin-bottom: 6px; }
.stat-value { font-size: 1.75rem; font-weight: 700; color: var(--text-on-light); }
.stat-caption { font-size: 0.8125rem; color: var(--text-muted); margin-top: 4px; }

/* ---------- Misc utility ---------- */
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.flex-gap { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.hidden { display: none !important; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.divider { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
.progress-track { background: var(--bg-card-muted); border-radius: 999px; height: 8px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 999px; }

/* ---------- Auth screens ---------- */
.auth-wrap { display: flex; justify-content: center; margin-top: 16px; }
.auth-card { width: 400px; max-width: 92vw; padding: 32px; }
/* Login/Change Password/Reset Password use the reference's DEFAULT-size MUI TextField
   (margin="normal", no size="small") — taller (56px) and gray-tinted (#f8fafc), unlike the
   compact white "small" fields used in the Workflow filter bar/table. Measured directly off the
   running reference app (getComputedStyle + CDP on LoginScreen): 56px control height, 16.5px/14px
   padding, #f8fafc fill, 32px title-to-first-field gap, 24px between fields. Since these fields
   start genuinely empty (unlike the filter bar's, which always hold a value), the label can't be
   statically pre-floated the way the rest of the app's .form-field is — :has()/:placeholder-shown
   drive the same shrink-on-focus-or-value animation the reference gets from MUI's JS state. */
.auth-card .page-title { margin-bottom: 10px; }
/* margin-bottom only (not margin-top + margin-bottom) — adjacent block-level .form-field divs
   collapse their touching margins to whichever is larger, so splitting the 24px gap across both
   (e.g. 16px top + 8px bottom) silently collapses down to just 16px instead of 24. */
.auth-card form .form-field { margin-top: 0; margin-bottom: 24px; }
.auth-card form .form-field:first-child { margin-top: 32px; }
.auth-card input { background: var(--bg-page); padding: 16.5px 14px; }
.auth-card .form-field > label {
  position: absolute; top: 50%; left: 14px; transform: translateY(-50%);
  font-size: 1rem; font-weight: 400; background: none; padding: 0;
  transition: top 0.1s ease, font-size 0.1s ease, background 0.1s ease;
}
.auth-card .form-field:focus-within > label,
.auth-card .form-field:has(input:not(:placeholder-shown)) > label {
  top: -8px; left: 10px; transform: none; font-size: 0.75rem; background: #fff; padding: 0 6px;
}
.auth-card .text-center.mt-3 { margin-top: 16px; }

/* ---------- Modal / Dialog ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.4);
  display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px;
}
.modal {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-card);
  width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; padding: 24px;
}
.modal-wide { max-width: 640px; }
.modal-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 16px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }

/* Full-screen slide-up modal for Task Details (mirrors the source's Dialog fullScreen+Slide) */
.drawer-backdrop {
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.4); z-index: 900;
  display: flex; align-items: stretch; justify-content: stretch;
}
.drawer {
  position: absolute; inset: 20px; background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow-card); display: flex; flex-direction: column; overflow: hidden;
  animation: slide-up 0.2s ease-out;
}
@keyframes slide-up { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.drawer-header {
  display: flex; align-items: center; gap: 12px; padding: 16px 20px;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.drawer-body { flex: 1; overflow-y: auto; padding: 20px; }
@media (min-width: 900px) { .drawer-body { padding: 28px; } }

/* ---------- Toast / Snackbar ---------- */
#toast-region { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 2000; display: flex; flex-direction: column; gap: 8px; }
.toast { border-radius: 8px; padding: 12px 20px; color: #fff; font-size: 0.9375rem; box-shadow: var(--shadow-card); min-width: 260px; text-align: center; }
.toast-success { background: #1baf7a; }
.toast-error { background: #d03b3b; }
.toast-info { background: #2563eb; }

/* ---------- Chat widget ---------- */
.chat-fab {
  position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent); color: #fff; border: none; display: flex; align-items: center;
  justify-content: center; font-size: 1.4rem; cursor: pointer; box-shadow: var(--shadow-card); z-index: 500;
}
.chat-fab .badge {
  position: absolute; top: -4px; right: -4px; background: var(--status-revision); color: #fff;
  border-radius: 999px; font-size: 0.7rem; min-width: 18px; height: 18px; display: flex;
  align-items: center; justify-content: center; padding: 0 4px;
}
.chat-panel {
  position: fixed; bottom: 88px; right: 24px; width: 340px; height: 460px; background: #fff;
  border-radius: 16px; box-shadow: var(--shadow-card); display: flex; flex-direction: column;
  overflow: hidden; z-index: 500;
}
.chat-header { background: var(--accent); color: #fff; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.chat-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.chat-roster-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border); }
.chat-roster-item:hover { background: var(--bg-surface); }
.chat-avatar { position: relative; width: 32px; height: 32px; border-radius: 50%; background: var(--text-muted); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 600; flex-shrink: 0; }
.chat-avatar.team { background: var(--accent); }
.presence-dot { position: absolute; bottom: -1px; right: -1px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid #fff; }
.presence-dot.online { background: #22c55e; }
.presence-dot.offline { background: #cbd5e1; }
.chat-messages { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.chat-bubble-row { display: flex; flex-direction: column; max-width: 80%; }
.chat-bubble-row.self { align-self: flex-end; align-items: flex-end; }
.chat-bubble { border-radius: 12px; padding: 8px 12px; font-size: 0.875rem; }
.chat-bubble-row.self .chat-bubble { background: var(--accent); color: #fff; }
.chat-bubble-row:not(.self) .chat-bubble { background: var(--bg-surface); color: var(--text-on-light); }
.chat-input-row { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); flex-shrink: 0; }
.chat-input-row textarea { resize: none; height: 38px; }

/* ---------- Icons (mirrors @mui/icons-material, which renders this same Material Icons glyph
   set as inline SVGs — the font is the non-React equivalent) ---------- */
.material-icons {
  font-size: 24px; /* MUI SvgIcon's default size */
  vertical-align: middle;
  line-height: 1;
}
.material-icons.icon-sm { font-size: 20px; } /* matches MUI's fontSize="small" */
.btn .material-icons, .btn-icon .material-icons { font-size: 20px; }
.sort-arrow { display: inline-flex; }
.sort-arrow .material-icons { transition: transform 0.15s; }
.sort-arrow.asc .material-icons { transform: rotate(180deg); }

/* Input with a leading icon adornment (mirrors MUI TextField's InputAdornment) */
.input-with-icon { position: relative; }
.input-with-icon .input-icon {
  position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none;
}
.input-with-icon input { padding-left: 34px; }

/* ---------- Kbd hint pills ---------- */
.kbd-hint { display: inline-flex; align-items: center; gap: 4px; font-family: monospace; font-size: 0.75rem; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; color: var(--text-muted); }