/* ============================================================================
   SES Operations — finance operations dashboard.
   Calm, elegant, light. Self-contained: system fonts, inline SVG, no CDN.
   ========================================================================== */

:root {
  /* Brand palette */
  /* SES brand palette (from docs/branding: logo + retractable banner).
     Navy primary, teal-green accent (no gold), purple secondary, lavender
     surfaces. Variable names kept so every usage re-skins at once (#96). */
  --teal:        #24306C;   /* SES navy — primary / headers / links */
  --teal-2:      #1b2550;   /* deeper navy */
  --gold:        #0C8478;   /* SES teal-green — accent / key figures (was gold) */
  --gold-dark:   #0a6a60;
  --purple:      #545490;   /* SES purple — secondary */
  --purple-dark: #43436f;
  --sage:        #78B4A8;   /* SES soft teal */
  --sage-light:  #dcefeb;
  --page:        #f5f5fb;   /* lavender-tinted off-white page */
  --white:       #ffffff;
  --panel-2:     #ececf6;   /* lavender panel */
  --ink:         #24306C;   /* SES navy headings */
  --slate:       #39405e;   /* body (navy-grey) */
  --muted:       #6b7091;
  --terracotta:  #c0492e;   /* overdue / warnings */
  --terracotta-tint: #f7e6e0;
  --green:       #0C8478;   /* completed stages */
  --green-tint:  #dcefeb;

  --border:      #dcdcec;
  --border-soft: #e8e8f3;
  --line:        #e6e6f2;

  --shadow: 0 1px 2px rgba(36, 48, 108, 0.05), 0 8px 24px rgba(36, 48, 108, 0.08);
  --radius: 14px;
  --radius-sm: 9px;

  /* Dashboard cards: one height and one padding scale for every tile, so the
     grid reads as a set rather than as six differently-sized boxes. Cards are
     also never taller than the window — a card you cannot see the foot of
     hides its own controls. */
  --tile-h:      30rem;
  --tile-h-wide: 34rem;   /* the full-width timesheet pipeline */
  --tile-pad-x:  1.25rem;
  --tile-pad-y:  1.1rem;
  --tile-gap:    1.2rem;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto,
          Helvetica, Arial, sans-serif;
  --maxw: 1180px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Never let a stray wide child push the page sideways and clip the cards on
     the right (mobile). Wide content (timesheet grid, chat tables) scrolls
     inside its own overflow-x container, so this only clips slop. */
  overflow-x: hidden;
  font-family: var(--font);
  background: var(--page);
  color: var(--slate);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--ink); font-weight: 650; }

.muted { color: var(--muted); }

a { color: var(--teal); }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 1.4rem 3rem; }

/* ---------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------- */
.site-header {
  background: var(--teal);
  color: #eaf1ef;
  box-shadow: 0 2px 0 var(--gold), var(--shadow);
}
.site-header-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0.55rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
  line-height: 1.05;
  text-decoration: none;
  color: #fff;
}
.brand-logo {
  height: 34px; width: auto; display: block;
  /* the swirl is on transparent; a soft ring lifts it off the navy bar */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}
.brand-words { display: flex; flex-direction: column; }
.brand-mark {
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  position: relative;
  padding-bottom: 4px;
}
.brand-mark::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 26px; height: 2px;
  background: var(--gold);
  border-radius: 2px;
}
.brand-sub {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage);
  margin-top: 3px;
}

/* Desktop: nav + user actions sit inline; user-box pushes to the right. */
.site-menu { display: flex; align-items: center; gap: 1.6rem; flex: 1 1 auto; min-width: 0; }
/* Hamburger toggle — hidden on desktop, shown on narrow screens. */
.nav-toggle {
  display: none;
  margin-left: auto;
  flex-direction: column;
  gap: 5px;
  background: none; border: 0; cursor: pointer;
  padding: 8px 4px;
}
.nav-toggle-bar {
  display: block; width: 24px; height: 2px; border-radius: 2px;
  background: #eaf1ef; transition: background 0.15s;
}
.nav-toggle:hover .nav-toggle-bar { background: #fff; }
.site-nav { display: flex; gap: 1.35rem; align-items: center; }
.site-header a { color: #cfe0dc; text-decoration: none; font-size: 0.9rem; }
.site-nav a { position: relative; padding: 0.15rem 0; transition: color 0.15s; }
.site-nav a:hover { color: #fff; }
.site-nav a:hover::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -4px;
  height: 2px; background: var(--gold); border-radius: 2px;
}

/* Tools dropdown (#152). The panel is light on the dark header bar, so its
   links set an explicit ink colour — inheriting would give them the header's
   near-white #eaf1ef on white. */
.nav-dropdown { position: relative; display: inline-block; }
.nav-dropdown-toggle {
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  color: #cfe0dc;
  padding: 0.15rem 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.nav-dropdown-toggle:hover { color: #fff; }
.nav-dropdown-arrow { font-size: 0.7em; }
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: var(--shadow);
  min-width: 150px;
  z-index: 100;
  padding: 4px 0;
}
.nav-dropdown-menu a {
  display: block;
  padding: 8px 16px;
  white-space: nowrap;
  color: var(--slate);
  text-decoration: none;
}
.nav-dropdown-menu a:hover { background: var(--page); color: var(--ink); }
/* The nav's gold hover bar is for the top-level links only. */
.nav-dropdown-menu a:hover::after { display: none; }

.user-box {
  margin-left: auto;
  display: flex;
  gap: 1rem;
  align-items: center;
  padding-left: 1.2rem;
  border-left: 1px solid rgba(217, 226, 224, 0.18);
}
.user-name { color: #eaf1ef; font-size: 0.88rem; font-weight: 550; }
.logout { font-size: 0.85rem; color: var(--sage) !important; }
.logout:hover { color: #fff !important; }

/* ---------------------------------------------------------------------------
   Hero greeting
   ------------------------------------------------------------------------- */
.hero { padding: 2rem 0 1.4rem; }
.hero-eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 700;
  margin: 0 0 0.5rem;
}
.hero-greeting {
  font-size: 1.85rem;
  color: var(--ink);
  font-weight: 650;
  margin: 0 0 0.3rem;
  letter-spacing: -0.01em;
}
.hero-date {
  margin: 0 0 0.35rem;
  color: var(--muted);
  font-size: 0.92rem;
}
.hero-summary {
  margin: 0;
  color: var(--slate);
  font-size: 1.02rem;
}

/* ---------------------------------------------------------------------------
   KPI stat row
   ------------------------------------------------------------------------- */
/* Urgent-task banner (#65): due tomorrow or overdue. Hidden when none. */
.task-banner {
  margin: 0 0 1rem;
  padding: 0.7rem 1rem;
  border-radius: var(--radius);
  background: var(--terracotta-tint);
  border-left: 4px solid var(--terracotta);
  color: var(--terracotta);
  font-weight: 600;
  font-size: 0.95rem;
}
.task-banner[hidden] { display: none; }

.kpi-row {
  display: grid;
  /* 240px, not 210px: with auto-fit a WIDER viewport fits MORE columns, so each
     card gets NARROWER. That is why "Emails needing reply" wrapped onto two
     lines at full width and fitted on one when the window was narrowed (#129,
     reported again at UAT). 240px leaves that label room on a single line in
     the tightest column this grid produces. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin: 0.4rem 0 1.8rem;
}
.kpi-card {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.05rem 1.15rem 1.1rem;
  position: relative;
  overflow: hidden;
  /* Grid item: allow it to shrink below its content so a long figure never
     widens the whole row past the viewport on mobile (#100). */
  min-width: 0;
}
.kpi-card::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--sage);
}
.kpi-gold::before  { background: var(--gold); }
.kpi-alert::before { background: var(--terracotta); }
.kpi-sage::before  { background: var(--teal); }
.kpi-calm::before  { background: var(--sage); }

.kpi-top { display: flex; align-items: center; gap: 0.5rem; color: var(--muted); }
.kpi-label {
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 650;
  /* Belt and braces with the 240px column: a KPI title on two lines shifts the
     figure below it out of line with its neighbours, which is what made this
     visible at all. */
  white-space: nowrap;
}
.ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6;
       stroke-linecap: round; stroke-linejoin: round; }
.kpi-top .ico { color: var(--sage); }
.kpi-gold .kpi-top .ico  { color: var(--gold-dark); }
.kpi-alert .kpi-top .ico { color: var(--terracotta); }

.kpi-value {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0.55rem 0 0.15rem;
  min-width: 0;
}
.kpi-number {
  /* Scales down on narrow cards so long figures fit on ONE line and never
     break mid-digit (#84). overflow-wrap:anywhere used to shatter numbers
     like "8,217,316" into "8,217,3 / 16"; nowrap + a low clamp floor keeps
     the figure whole and shrinks it to fit instead. */
  font-size: clamp(0.95rem, 4.6vw, 2rem);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  white-space: nowrap;
}
.kpi-gold .kpi-number  { color: var(--gold-dark); }
.kpi-alert .kpi-number { color: var(--terracotta); }
.kpi-unit { font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.kpi-note {
  font-size: 0.82rem;
  color: var(--muted);
  /* Long sender · subject on the Oldest unreplied KPI (#266) must truncate
     inside the card rather than stretch the row or wrap under the figure. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* ---------------------------------------------------------------------------
   Detail cards — deliberate two-column grid (#218)
   Row order follows tiles.TILE_ORDER (left-to-right, top-to-bottom), so
   New clients always sits above Emails awaiting reply. CSS multi-column
   packing (#153) filled gaps by letting later tiles rise beside tall
   neighbours, which swapped those two. Prefer a stable grid over that.
   ------------------------------------------------------------------------- */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tile-gap);
  align-items: stretch;
}
/* The timesheet pipeline wants the full width when there's room. */
.tile-grid > .tile-timesheet_tracker {
  grid-column: 1 / -1;
}

.tile {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.1rem 1.25rem 1.25rem;
  /* Shrink below content width so wide inner rows (email lists,
     the timesheet pipeline) don't push the tile past the viewport (#100). */
  min-width: 0;
}
.tile-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  padding-bottom: 0.3rem;
}
/* Full-width, one-sentence description of what the tile answers (#51). */
.tile-explainer {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--muted);
  margin: 0 0 0.85rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
}

/* ---------------------------------------------------------------------------
   One card shape for the whole dashboard grid.

   Scoped to `.tile-grid` on purpose: `.tile` is also the card on /updates,
   where entries must grow to fit their text. Only the dashboard's cards take
   a fixed height.

   Every card is the same stack, top to bottom:

     .tile-head      title + "Refreshed …"      fixed
     .tile-explainer one-sentence description   fixed
     .tile-subhead   the headline figure        fixed
     .tile-body      the rows                   SCROLLS, only when it must
     .tile-foot      the card's controls        fixed, hidden when empty

   The head/subhead/foot stay put so the figure and the controls are readable
   at any scroll position; `overflow-y: auto` on the body means a card whose
   rows already fit shows no scrollbar at all. Padding lives on the regions
   rather than on the card so the body's scrollbar runs down the card edge.
   ------------------------------------------------------------------------- */
.tile-grid > .tile {
  display: flex;
  flex-direction: column;
  height: min(var(--tile-h), 85vh);
  padding: 0;
  overflow: hidden;   /* keep scrolled rows inside the rounded corners */
}
/* The timesheet pipeline spans both columns and lists every BL, so it gets
   the taller card — it shares a row with nothing, so nothing goes ragged. */
.tile-grid > .tile-timesheet_tracker {
  height: min(var(--tile-h-wide), 85vh);
}
.tile-grid > .tile > .tile-head {
  flex-shrink: 0;
  padding: var(--tile-pad-y) var(--tile-pad-x) 0.45rem;
}
.tile-grid > .tile > .tile-explainer {
  flex-shrink: 0;
  margin: 0 var(--tile-pad-x);
}
.tile-subhead {
  flex-shrink: 0;
  padding: 0.8rem var(--tile-pad-x) 0;
}
.tile-subhead:empty { display: none; }
.tile-subhead > .tile-metric { margin: 0; }

.tile-grid > .tile > .tile-body {
  flex: 1 1 auto;
  min-height: 0;      /* without this a flex child refuses to scroll */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.8rem var(--tile-pad-x) var(--tile-pad-y);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.tile-grid > .tile > .tile-body::-webkit-scrollbar { width: 10px; }
.tile-grid > .tile > .tile-body::-webkit-scrollbar-track { background: transparent; }
.tile-grid > .tile > .tile-body::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
  border: 3px solid var(--white);   /* inset the thumb off the card edge */
}

.tile-foot {
  flex-shrink: 0;
  padding: 0.7rem var(--tile-pad-x) var(--tile-pad-y);
  border-top: 1px solid var(--border-soft);
  background: var(--white);
  /* A card's controls can open a panel (the statement picker). Let it use up
     to half the card, then scroll, rather than squeezing the rows away. */
  max-height: 50%;
  overflow-y: auto;
}
.tile-foot:empty { display: none; }
.tile-foot > .more-note { margin: 0; }
.tile-title {
  font-size: 1.02rem;
  color: var(--teal);
  font-weight: 650;
  letter-spacing: -0.005em;
}
.tile-stamp {
  font-size: 0.7rem;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
}
.tile-metric {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--slate);
  margin: 0 0 0.9rem;
}
.tile-loading { font-size: 0.9rem; }
.more-note { font-size: 0.82rem; color: var(--muted); margin: 0.75rem 0 0; }

/* ---- Pending tasks ---- */
.task-list { list-style: none; margin: 0; padding: 0; }
.task {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-soft);
}
.task:last-child { border-bottom: 0; }
.pdot {
  width: 9px; height: 9px; border-radius: 50%;
  margin-top: 0.42rem; flex-shrink: 0;
  background: var(--sage);
}
.pdot-1 { background: var(--terracotta); }
.pdot-2 { background: var(--gold); }
.pdot-3 { background: var(--sage); }
.task-grip {
  flex-shrink: 0;
  width: 0.75rem;
  margin-top: 0.15rem;
  color: var(--muted);
  cursor: grab;
  line-height: 1;
  opacity: 0.55;
}
.task-grip::before { content: "\22EE\22EE"; letter-spacing: -0.18em; }
.task-grip:hover { opacity: 1; }
.task-sortable.task-dragging { opacity: 0.5; cursor: grabbing; }
.task-main { flex: 1; min-width: 0; }
.task-title { display: block; color: var(--ink); font-size: 0.92rem; }
.task-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.2rem; align-items: center; }
.task-due { font-size: 0.78rem; color: var(--muted); }
.src-tag {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 650;
  padding: 0.06rem 0.42rem;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--teal);
  border: 1px solid var(--line);
}
.src-recurring { background: var(--sage-light); color: var(--teal); border-color: transparent; }
.src-email { background: #eef3f6; color: #35606f; border-color: transparent; }
.src-manual { background: var(--panel-2); color: var(--muted); border-color: transparent; }
.src-yours { background: #e8f0ff; color: #2a4a7a; border-color: transparent; }

/* ---- Manage own tasks on the tile (#54) ---- */
.task-input {
  font: inherit;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
}
.task-input:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.task-title-input { width: 100%; }
.task-add-form,
.task-edit-form {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.task-add-form {
  margin: 0 0 0.6rem;
  padding: 0.55rem 0.6rem;
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  /* Two lines, not three: the card is a fixed height now, and every line the
     composer takes is a task row the reader doesn't see. */
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.task-add-form > .task-title-input { flex: 1 1 100%; }
.task-add-form > .task-edit-row { flex: 1 1 auto; }
.task-add-form > .task-btn-add { flex: 0 0 auto; margin-left: auto; }
.task-edit-form { flex: 1; min-width: 0; }
.task.task-editing { align-items: stretch; }
.task-edit-row { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.task-priority-input { flex: 0 0 auto; }
.task-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.3rem; }
.task .task-actions { margin-top: 0.4rem; }
.task-btn {
  padding: 0.22rem 0.6rem;
  border: 1px solid var(--teal);
  background: var(--white);
  color: var(--teal);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 650;
  cursor: pointer;
}
.task-btn:hover { background: var(--teal); color: var(--white); }
.task-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.task-btn:disabled { opacity: 0.55; cursor: default; }
.task-btn-add,
.task-btn-done { border-color: var(--teal); background: var(--teal); color: var(--white); }
.task-btn-add:hover,
.task-btn-done:hover { background: var(--teal-2); border-color: var(--teal-2); }
.task-btn-danger { border-color: var(--terracotta); color: var(--terracotta); }
.task-btn-danger:hover { background: var(--terracotta); color: var(--white); }
.task-form-error {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  color: var(--terracotta);
}

/* ---- Outstanding invoices ---- */
.inv-list { display: flex; flex-direction: column; gap: 0.85rem; }
.inv-row {
  padding: 0.15rem 0 0.05rem;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.12s ease;
}
.inv-row + .inv-row { border-top: 1px solid var(--border-soft); padding-top: 0.75rem; }
/* Whole heading is a clear tap/click target that expands the invoice lines. */
.inv-row-head { display: flex; justify-content: space-between; gap: 0.6rem; align-items: baseline; }
.inv-row:hover .inv-client { color: var(--teal); }
.inv-name-wrap { display: flex; align-items: baseline; gap: 0.45rem; flex: 1 1 auto; min-width: 0; }
/* A real accordion affordance: a clear teal chevron that rotates on open (#87). */
.inv-caret {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 1.3em; height: 1.3em;
  color: var(--teal); font-size: 1.25em; font-weight: 700; line-height: 1;
  transition: transform 0.15s ease;
}
.inv-row:hover .inv-caret { color: var(--teal-dark, var(--teal)); }
.inv-row.inv-open .inv-caret { transform: rotate(90deg); }
.inv-client {
  color: var(--ink); font-weight: 600; font-size: 0.94rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
/* USD primary in gold, IQD equivalent in grey (#86). */
.inv-amount { font-size: 0.94rem; white-space: nowrap; flex-shrink: 0; }
/* Overdue amounts in red to signal urgency (traffic-light, #86). */
.inv-amount-usd { color: var(--terracotta); font-weight: 700; font-variant-numeric: tabular-nums; }
.inv-amount-iqd { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.inv-row-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  margin: 0.28rem 0 0.4rem;
  font-size: 0.79rem;
  color: var(--muted);
}
.inv-detail {
  display: none;
  list-style: none;
  margin: 0.15rem 0 0.45rem;
  padding: 0;
}
.inv-row.inv-open .inv-detail { display: block; }
.inv-line {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.18rem 0;
  font-size: 0.8rem;
  color: var(--ink);
  border-top: 1px solid var(--border-soft);
}
.inv-line:first-child { border-top: 0; }
.inv-ref { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 0; }
.inv-line-age { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv-line-amt {
  color: var(--gold-dark);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin-left: auto;
}
.inv-line-overdue,
.inv-line-overdue .inv-ref,
.inv-line-overdue .inv-line-age,
.inv-line-overdue .inv-line-amt {
  color: var(--terracotta);
}
.inv-more {
  padding: 0.2rem 0 0;
  font-size: 0.76rem;
  color: var(--muted);
}
.pill {
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.08rem 0.45rem;
  border-radius: 999px;
}
.pill-past { background: var(--terracotta-tint); color: var(--terracotta); }
.aged-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--panel-2);
  overflow: hidden;
}
.aged-fill { height: 100%; border-radius: 999px; background: var(--teal); transition: width 0.4s ease; }
.aged-ok   { background: linear-gradient(90deg, var(--sage), var(--teal)); }
.aged-near { background: linear-gradient(90deg, var(--gold), var(--gold-dark)); }
.aged-past { background: linear-gradient(90deg, var(--terracotta), #8f351f); }

/* ---- Unreplied emails ---- */
.email-list { list-style: none; margin: 0; padding: 0; }
.email {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border-soft);
}
.email:last-child { border-bottom: 0; }
.email-main { flex: 1; min-width: 0; }
.email-from { display: block; color: var(--ink); font-size: 0.86rem; font-weight: 550;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.email-subject { display: block; color: var(--muted); font-size: 0.82rem;
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.age-badge {
  flex-shrink: 0;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.14rem 0.5rem;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.age-calm { background: var(--sage-light); color: var(--teal); }
.age-warm { background: #f6ecd8; color: var(--gold-dark); }
.age-hot  { background: var(--terracotta-tint); color: var(--terracotta); }

/* Expandable unreplied-email rows: a clickable header that reveals the full
   indexed body inline (#67). The row stacks (header + body); the header keeps
   the original single-line email layout. */
.email-expandable {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
}
.email-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.55rem 0;
  cursor: pointer;
}
.email-head:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.email-caret {
  display: inline-block;
  flex-shrink: 0;
  color: var(--muted);
  font-size: 0.7em;
  transition: transform 0.15s ease;
}
.email-expandable.email-open .email-caret { transform: rotate(90deg); }
.email-body {
  padding: 0 0 0.65rem 1.1rem;
}
.email-body-text {
  margin: 0;
  max-height: 18rem;
  overflow-y: auto;
  padding: 0.6rem 0.75rem;
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--slate);
  font-family: var(--font);
  font-size: 0.82rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.email-body-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
/* "Remove from dashboard": a quiet, secondary action next to Draft reply. */
.email-remove {
  background: none; border: 0; cursor: pointer;
  color: var(--muted); font-size: 0.8rem; text-decoration: underline;
  padding: 4px 0;
}
.email-remove:hover { color: var(--terracotta); }
.email-remove:disabled { opacity: 0.5; cursor: default; }

/* Marking phishing is a different act from tidying the tile — it should read
   as a warning, not as another quiet "remove". */
.email-phishing {
  background: none;
  border: 1px solid var(--terracotta);
  border-radius: 999px;
  cursor: pointer;
  color: var(--terracotta);
  font-size: 0.78rem;
  font-weight: 650;
  padding: 3px 10px;
}
.email-phishing:hover { background: var(--terracotta); color: var(--white); }
.email-phishing:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }
.email-phishing:disabled { opacity: 0.5; cursor: default; }

/* ---- Timesheet pipeline ---- */
.ts-legend {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
  padding-left: calc(72px + 0.75rem);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
/* Header column width matches the pip width so labels sit over their column
   and never overlap (#92). */
.ts-legend-item { width: 68px; text-align: center; }
.ts-pipeline {
  max-height: 460px;
  overflow-y: auto;
  overflow-x: auto;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
/* Month groups (#278): heading sticks inside the pipeline scrollport so it
   does not fight the tile title (tile-head sits outside .tile-body; #265's
   body scroll leaves this pipeline as the list scrollport). */
.ts-month-group { position: relative; }
.ts-month-heading {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0.45rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: var(--panel-2);
  border-bottom: 1px solid var(--border-soft);
}
.ts-line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid var(--border-soft);
  border-left: 3px solid transparent;
}
.ts-month-group:last-child .ts-line:last-child { border-bottom: 0; }
/* Heading is child 1; even children are the 1st, 3rd, … data rows. */
.ts-month-group .ts-line:nth-child(even) { background: #fafbfa; }
/* Traffic-light status (#101): grey = nothing & not due; red = nothing &
   overdue; amber = at least one stage in; green = all three in. Overrides the
   alternating stripe so the status reads at a glance. */
.ts-line.ts-status-red   { border-left-color: var(--terracotta); background: var(--terracotta-tint) !important; }
.ts-line.ts-status-amber { border-left-color: #d9a54e; background: #fbf3e2 !important; }
.ts-line.ts-status-green { border-left-color: var(--green); background: var(--green-tint) !important; }
.ts-alert { border-left-color: var(--terracotta); }
.ts-bl {
  width: 72px;
  flex-shrink: 0;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ts-track { display: flex; gap: 0.5rem; }
.pip {
  width: 68px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--muted);
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
  cursor: default;
}
.pip-on { background: var(--green-tint); color: var(--green); border-color: transparent; }

/* ---------------------------------------------------------------------------
   Login
   ------------------------------------------------------------------------- */
.login-card {
  max-width: 400px;
  margin: 4.5rem auto;
  padding: 2.2rem 2.2rem 2.4rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
}
.login-card h1 { color: var(--teal); margin-top: 0; font-size: 1.4rem; }
.login-card label { display: block; margin: 1rem 0 0.3rem; font-weight: 600; font-size: 0.85rem; color: var(--slate); }
.login-card input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  background: var(--white);
}
.login-card input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(15,47,56,0.08); }
.login-card button {
  margin-top: 1.4rem;
  width: 100%;
  padding: 0.7rem;
  background: var(--teal);
  color: #fff;
  border: 0;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.login-card button:hover { background: var(--teal-2); }
.error { color: var(--terracotta); font-size: 0.9rem; }

/* ---------------------------------------------------------------------------
   Chat
   ------------------------------------------------------------------------- */
h1 { font-size: 1.55rem; margin: 1.6rem 0 1rem; }

.chat-panel {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
  max-width: 760px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.chat-messages { min-height: 320px; max-height: 60vh; overflow-y: auto; padding: 1.2rem; }
.msg { margin: 0 0 0.8rem; display: flex; }
.msg:last-child { margin-bottom: 0; }
.msg-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 85%;
  min-width: 0;
}
.msg-user { justify-content: flex-end; }
.msg-user .msg-col { align-items: flex-end; }
.msg-body {
  max-width: 100%;
  padding: 0.6rem 0.9rem;
  border-radius: 12px;
  font-size: 0.95rem;
  /* User messages stay textContent; pre-wrap keeps Shift+Enter breaks visible (#225). */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.msg-body.msg-md { white-space: normal; }
.msg-user .msg-body { background: var(--teal); color: #fff; border-bottom-right-radius: 4px; }
.msg-assistant .msg-body { background: var(--panel-2); border: 1px solid var(--line); color: var(--slate); border-bottom-left-radius: 4px; }
.msg-brief { flex-direction: column; }
.msg-brief .msg-col { max-width: 100%; }
.msg-brief .msg-body { max-width: 100%; background: var(--sage-light); border-color: transparent; }
.msg-link { margin: 0.4rem 0 0; font-size: 0.9rem; }
.msg-error .msg-body { background: var(--terracotta-tint); border-color: transparent; color: var(--terracotta); }
.msg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin-top: 0.28rem;
}
.msg-copy,
.msg-feedback {
  margin-top: 0;
  padding: 0.12rem 0.55rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.4;
}
.msg-copy:hover,
.msg-feedback:hover { color: var(--teal); border-color: var(--border); background: var(--white); }
.msg-copy.is-copied,
.msg-copy.is-copied:hover {
  color: var(--teal);
  border-color: transparent;
  background: var(--sage-light);
  cursor: default;
}
.msg-feedback:disabled,
.msg-feedback:disabled:hover {
  color: var(--teal);
  border-color: transparent;
  background: var(--sage-light);
  cursor: default;
}
.msg-thinking .msg-actions { visibility: hidden; }
.msg-feedback-form {
  margin-top: 0.45rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  max-width: 28rem;
}
.msg-feedback-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--slate);
  margin-bottom: 0.35rem;
}
.msg-feedback-text {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 4.5rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-size: 0.9rem;
  color: var(--slate);
  resize: vertical;
  background: var(--panel-2);
}
.msg-feedback-text:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}
.msg-feedback-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.45rem;
}
.msg-feedback-send,
.msg-feedback-cancel {
  padding: 0.28rem 0.75rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--slate);
}
.msg-feedback-send {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.msg-feedback-send:disabled,
.msg-feedback-cancel:disabled {
  opacity: 0.65;
  cursor: default;
}
.msg-feedback-status {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

/* "Thinking…" indicator until the first token (#57), and again between
   tool-round segments while the assistant is still working (#144). */
.msg-thinking .msg-body { min-height: 1.4em; }
.thinking-dots { display: inline-flex; gap: 5px; align-items: center; padding: 0.15rem 0; }
.thinking-dots span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal); opacity: 0.35;
  animation: thinking-bounce 1.2s infinite ease-in-out;
}
.thinking-dots span:nth-child(2) { animation-delay: 0.16s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.32s; }
@keyframes thinking-bounce {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .thinking-dots span { animation: none; opacity: 0.6; }
}

/* Sanitised Markdown inside assistant bubbles */
.msg-md > :first-child { margin-top: 0; }
.msg-md > :last-child { margin-bottom: 0; }
.msg-md p { margin: 0 0 0.55rem; }
.msg-md ul, .msg-md ol { margin: 0 0 0.55rem; padding-left: 1.25rem; }
.msg-md li { margin: 0.15rem 0; }
.msg-md strong, .msg-md b { color: var(--ink); font-weight: 700; }
.msg-md code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: rgba(15, 47, 56, 0.06);
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
}
.msg-md pre {
  margin: 0 0 0.55rem;
  padding: 0.55rem 0.7rem;
  overflow-x: auto;
  background: rgba(15, 47, 56, 0.05);
  border-radius: var(--radius-sm);
}
.msg-md pre code { background: transparent; padding: 0; }
.msg-md .md-table-wrap,
.msg-md table { display: block; width: 100%; overflow-x: auto; }
.msg-md table {
  border-collapse: collapse;
  font-size: 0.86rem;
  margin: 0 0 0.55rem;
  max-width: 100%;
}
.msg-md th, .msg-md td {
  padding: 0.35rem 0.55rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}
.msg-md th {
  color: var(--teal);
  font-weight: 650;
  border-bottom-color: var(--border);
}
.msg-md td:nth-child(n+2), .msg-md th:nth-child(n+2) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.msg-md a { color: var(--teal); }
@media (max-width: 720px) {
  .msg-col { max-width: 95%; }
  .msg-md th, .msg-md td { padding: 0.3rem 0.4rem; font-size: 0.82rem; }
}
.chat-procedures {
  padding: 0.75rem 0.9rem 0;
  border-top: 1px solid var(--line);
}
.chat-procedures-label {
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.chat-procedure-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
  gap: 0.45rem;
}
.procedure {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  text-align: left;
  padding: 0.55rem 0.7rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.procedure:hover { background: var(--sage-light); border-color: transparent; }
.procedure:disabled { cursor: wait; opacity: 0.6; }
.procedure-title {
  color: var(--teal);
  font-size: 0.9rem;
  font-weight: 600;
}
.procedure-desc {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.3;
}
.chat-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 0.7rem 0.9rem 0; }
.chip {
  padding: 0.32rem 0.8rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--teal);
  font-size: 0.84rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.chip:hover { background: var(--sage-light); border-color: transparent; }
.chip:disabled { cursor: wait; opacity: 0.6; }
.chat-input {
  display: flex;
  gap: 0.55rem;
  padding: 0.85rem 0.9rem 0.35rem;
  border-top: 1px solid var(--line);
  align-items: flex-end;
  position: relative;
}
.chat-input textarea {
  flex: 1;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: inherit;
  line-height: 1.4;
  resize: none;
  overflow-y: hidden;
  min-height: calc(1.4em + 1.2rem);
  max-height: calc(1.4em * 6 + 1.2rem);
}
.chat-input textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(15,47,56,0.08); }
.chat-input button {
  padding: 0.6rem 1.3rem;
  background: var(--teal);
  color: #fff;
  border: 0;
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
  align-self: flex-end;
}
.chat-input button:hover { background: var(--teal-2); }
.chat-input button:disabled { cursor: wait; opacity: 0.6; }
.chat-input-hint {
  margin: 0;
  padding: 0 0.9rem 0.65rem;
  font-size: 0.78rem;
}
.chat-file-input {
  position: absolute;
  left: 0.9rem;
  bottom: 0.85rem;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}
.chat-attach {
  padding: 0.6rem 1rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--teal);
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  align-self: flex-end;
}
.chat-attach:hover { background: var(--sage-light); }
.chat-file-input:focus-visible + .chat-attach,
.chat-attach:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.chat-attach.is-disabled { cursor: wait; opacity: 0.6; }
.chat-upload-help {
  margin: 0;
  padding: 0 0.9rem 0.6rem;
  color: var(--muted);
  font-size: 0.8rem;
}
.chat-attached {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.6rem 0.9rem 0;
}
.chat-attached-file {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.5rem;
  background: var(--sage-light);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
}
.chat-attached-remove {
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.chat-attached-refused {
  flex-basis: 100%;
  margin: 0;
  color: var(--terracotta);
  font-size: 0.82rem;
}
.chat-actions { padding: 0 0.9rem 0.9rem; display: flex; gap: 0.55rem; flex-wrap: wrap; }
.chat-new {
  padding: 0.35rem 0.85rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 0.84rem;
  cursor: pointer;
}
.chat-new:hover { color: var(--teal); border-color: var(--teal); }
.chat-history { padding: 0 0.9rem 0.9rem; }
.chat-history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.chat-history-list .muted { padding: 0.3rem 0; font-size: 0.85rem; }
.chat-history-item { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.chat-history-continue {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-sm);
  background: var(--sage-light);
  color: var(--teal);
  font-size: 0.75rem;
  font-weight: 600;
  vertical-align: middle;
}
.chat-history-head {
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.7rem;
  background: var(--white);
  border: 0;
  color: var(--slate);
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-history-head:hover { background: var(--sage-light); }
.chat-history-body { padding: 0.6rem 0.7rem; border-top: 1px solid var(--line); background: var(--panel-2); }

/* ---------------------------------------------------------------------------
   Aged debtors
   ------------------------------------------------------------------------- */
.debtors-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; background: var(--white); }
.debtors-table th, .debtors-table td { padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--line); text-align: left; }
.debtors-table th { color: var(--teal); font-weight: 650; }
.debtors-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.debtors-total td { font-weight: 700; border-top: 2px solid var(--teal); }

/* ---------------------------------------------------------------------------
   Admin import
   ------------------------------------------------------------------------- */
.import-form {
  max-width: 500px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 1.3rem 1.4rem 1.5rem;
  background: var(--white);
  box-shadow: var(--shadow);
}
.import-form label { display: block; margin: 0.9rem 0 0.3rem; font-weight: 600; font-size: 0.85rem; color: var(--slate); }
.import-form select,
.import-form input[type="file"],
.import-form input[type="text"],
.import-form input[type="date"],
.import-form input[type="number"] {
  width: 100%;
  padding: 0.5rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: 0.95rem;
}
.import-form button {
  margin-top: 1.1rem;
  padding: 0.6rem 1.5rem;
  background: var(--teal);
  color: #fff;
  border: 0;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}
.import-form button:hover { background: var(--teal-2); }
.import-result {
  border: 1px solid var(--border-soft);
  border-left: 4px solid var(--green);
  border-radius: var(--radius-sm);
  padding: 0.7rem 1.1rem;
  margin: 0.9rem 0;
  background: var(--white);
}
.import-result-errors { border-left-color: var(--terracotta); }
.import-errors { color: var(--terracotta); font-size: 0.9rem; }
.template-heading { margin-top: 1.8rem; color: var(--teal); }

/* ---------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
/* Collapse the top nav before the links get pressed together (#103).
   Finance/admin have seven links plus the user box; they run out of room
   well above the old 720px phone breakpoint (symptoms start ~750–1000px). */
@media (max-width: 1100px) {
  .site-header-inner { flex-wrap: wrap; gap: 0.6rem 1rem; }
  .nav-toggle { display: flex; }
  .site-menu { display: none; flex-basis: 100%; }
  .site-header.nav-open .site-menu {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 0.9rem; width: 100%; padding: 0.3rem 0 0.2rem;
  }
  .site-header.nav-open .site-nav {
    flex-direction: column; align-items: flex-start; gap: 0.9rem; width: 100%;
  }
  /* Tools dropdown (#152): the stacked menu has the vertical room the header
     bar lacks, so its items join the list directly. The toggle is hidden
     rather than left as a control that collapses nothing — and hiding it
     keeps aria-expanded from claiming "collapsed" over visible links. */
  .nav-dropdown { display: block; width: 100%; }
  .nav-dropdown-toggle { display: none; }
  .nav-dropdown-menu {
    position: static;
    display: flex !important;
    flex-direction: column;
    gap: 0.9rem;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    min-width: 0;
    padding: 0;
  }
  .nav-dropdown-menu a { padding: 0; color: #cfe0dc; }
  .nav-dropdown-menu a:hover { background: none; color: #fff; }
  .site-header.nav-open .user-box {
    margin-left: 0; padding-left: 0; border-left: 0; width: 100%;
    padding-top: 0.8rem; border-top: 1px solid rgba(217, 226, 224, 0.18);
  }
}
@media (max-width: 720px) {
  .site-header-inner { padding: 0.6rem 1.1rem; }
  .container { padding: 0 1.1rem 2.4rem; }
  .hero { padding: 1.5rem 0 1rem; }
  .hero-greeting { font-size: 1.5rem; }
  .kpi-row { grid-template-columns: 1fr 1fr; }
  .tile-grid { grid-template-columns: 1fr; }
  /* Let the refreshed-at stamp wrap under the title instead of forcing the
     header wider than the tile on narrow screens (#100). */
  .tile-head { flex-wrap: wrap; }
  .tile-stamp { white-space: normal; text-align: left; flex-shrink: 1; }
}
@media (max-width: 460px) {
  .kpi-row { grid-template-columns: 1fr; }
  .ts-bl { width: 60px; }
  .ts-legend { padding-left: calc(60px + 0.75rem); }
}

/* ---- My tasks (/tasks) ---- */
.tasks-page h1 { color: var(--teal); margin: 0 0 0.35rem; }
.tasks-page > .muted { margin: 0 0 1.4rem; }
.tasks-error {
  color: var(--terracotta);
  font-weight: 600;
  margin: 0 0 1rem;
}
.tasks-add, .tasks-open, .tasks-done {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.1rem 1.25rem 1.2rem;
  margin-bottom: 1.1rem;
}
.tasks-add h2, .tasks-open h2, .tasks-done h2 {
  margin: 0 0 0.85rem;
  color: var(--teal);
  font-size: 1.05rem;
}
.tasks-form { display: flex; flex-direction: column; gap: 0.45rem; max-width: 560px; }
.tasks-form label { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.tasks-form input, .tasks-form select,
.my-task-edit input, .my-task-edit select {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.65rem;
  font: inherit;
  color: var(--ink);
  background: var(--white);
}
.tasks-form-row {
  display: grid;
  grid-template-columns: 1fr 140px;
  gap: 0.75rem;
}
.my-task-list { list-style: none; margin: 0; padding: 0; }
.my-task {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-soft);
}
.my-task:last-child { border-bottom: 0; }
.my-task-edit {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  flex: 1;
  min-width: 220px;
  align-items: center;
}
.my-task-edit input[name="title"] { flex: 1; min-width: 140px; }
.my-task-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
.my-task-summary { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; }
.my-task-title { font-weight: 600; color: var(--ink); }
.my-task-done .my-task-title { text-decoration: line-through; color: var(--muted); }
.btn-danger {
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  font-weight: 650;
  font-size: 0.85rem;
  cursor: pointer;
  border: 1px solid var(--terracotta);
  background: var(--white);
  color: var(--terracotta);
}
.btn-danger:hover { background: var(--terracotta-tint); }
@media (max-width: 720px) {
  .tasks-form-row { grid-template-columns: 1fr; }
}

/* ---- Draft chase (tiles) ---- */
.inv-contact, .ts-contact {
  color: var(--teal);
  font-weight: 550;
}
.ts-bl-wrap {
  width: 110px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.ts-bl-wrap .ts-bl { width: auto; }
.ts-contact { font-size: 0.7rem; color: var(--muted); font-weight: 500; }
.chase-btn {
  margin: 0.35rem 0 0.45rem;
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--teal);
  background: var(--white);
  color: var(--teal);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
}
.chase-btn:hover { background: var(--teal); color: var(--white); }
.ts-line .chase-btn { margin: 0 0 0 0.25rem; flex-shrink: 0; }
/* Per-customer overdue statement button (#113): secondary, sits by Draft chase. */
.inv-statement {
  margin: 0.35rem 0 0.45rem 0.4rem;
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--border-soft);
  background: var(--white);
  color: var(--slate);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
}
.inv-statement:hover { border-color: var(--teal); color: var(--teal); }
/* Multi-select overdue download panel (#111) */
.overdue-download { margin-top: 0.75rem; border-top: 1px solid var(--line); padding-top: 0.6rem; }
.overdue-download-panel { margin-top: 0.5rem; }
.odl-controls { display: flex; gap: 0.75rem; margin-bottom: 0.4rem; }
.odl-link { background: none; border: 0; color: var(--teal); cursor: pointer; font-size: 0.78rem; text-decoration: underline; padding: 0; }
.odl-item { display: block; font-size: 0.85rem; color: var(--slate); margin: 0.15rem 0; cursor: pointer; }
.odl-actions { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.chase-modal {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  max-width: 560px;
  width: calc(100% - 2rem);
  box-shadow: var(--shadow);
}
.chase-modal::backdrop { background: rgba(15, 47, 56, 0.35); }
.chase-form { padding: 1.25rem 1.35rem 1.1rem; display: flex; flex-direction: column; gap: 0.45rem; }
.chase-title { margin: 0; color: var(--teal); font-size: 1.15rem; }
.chase-to { margin: 0 0 0.4rem; }
.chase-form label { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.chase-body-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.chase-body-label-row label { margin: 0; }
.btn-suggest {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.2rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
  background: var(--panel-2);
  color: var(--teal);
}
.btn-suggest:hover { background: var(--white); border-color: var(--teal); }
.btn-suggest:disabled { opacity: 0.6; cursor: wait; }
.chase-form input, .chase-form textarea, .chase-form select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.7rem;
  font: inherit;
  color: var(--ink);
  background: var(--white);
}
.chase-form textarea { resize: vertical; min-height: 180px; }
.chase-template-note { margin: 0; font-size: 0.8rem; }
.chase-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 0.5rem; }
.btn-primary, .btn-secondary {
  border-radius: 999px;
  padding: 0.45rem 1rem;
  font-weight: 650;
  font-size: 0.88rem;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn-primary { background: var(--teal); color: var(--white); border-color: var(--teal); }
.btn-primary:hover { background: var(--teal-2); }
.btn-primary:disabled { opacity: 0.6; cursor: wait; }
.btn-secondary { background: var(--white); color: var(--teal); border-color: var(--border); }
.btn-secondary:hover { background: var(--panel-2); }
.chase-ok { color: var(--green); font-weight: 600; }
.chase-err { color: var(--terracotta); font-weight: 600; }

/* ---- Cash balances: per-row edit / delete ---- */
.row-actions { display: flex; gap: 0.4rem; align-items: center; white-space: nowrap; }
.row-actions form { margin: 0; }
/* Edit and Cancel are links, so they need the button box explicitly. */
a.btn-secondary { display: inline-block; text-decoration: none; }
.row-editing { background: var(--panel-2); }
.cash-edit-note { font-weight: 600; color: var(--teal); }

/* ---- What's new (/updates) ---- */
.updates-day { margin-bottom: 1.25rem; }
.updates-list { list-style: none; margin: 0; padding: 0; }
.updates-item { padding: 0.85rem 0; border-bottom: 1px solid rgba(47, 67, 86, 0.08); }
.updates-item:last-child { border-bottom: none; }
.updates-asked { margin: 0 0 0.25rem; font-weight: 600; }
.updates-asked::before { content: "You asked: "; font-weight: 400; opacity: 0.6; }
.updates-done { margin: 0; }
.updates-done::before { content: "Done: "; font-weight: 600; color: #2e7d4f; }

/* In-progress items on the What's new page (#68): gold, not the alert red. */
.updates-pending-title { margin: 0 0 0.25rem; font-weight: 700; color: var(--teal); }
.updates-item-pending .updates-done::before { content: "Coming up: "; color: var(--gold-dark); }
.updates-status {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: #f6ecd8;
  color: var(--gold-dark);
}

/* Unread updates: red count in the menu, green tile until marked read. */
.nav-updates { display: inline-flex; align-items: center; gap: 0.4rem; }
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #d92c20;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}
.nav-badge[hidden] { display: none; }

.updates-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-left: 0.5rem;
  padding: 0 5px;
  border-radius: 999px;
  background: #d92c20;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}
.updates-badge[hidden] { display: none; }

/* Light green while unread. */
.updates-unread { background: #eafaf0; border-color: #b7e3c6; }

.updates-actions { display: flex; justify-content: flex-end; margin-top: 0.9rem; }
.updates-read-btn { font-size: 0.8rem; padding: 0.35rem 0.85rem; }

/* Unread: green Mark as read. Read: white with black text, Mark as unread. */
.updates-read-btn.btn-primary {
  background: var(--green); border-color: var(--green); color: #fff;
}
.updates-read-btn.btn-primary:hover { background: var(--gold-dark); border-color: var(--gold-dark); }
.updates-read-btn.btn-secondary { background: var(--white); color: #1b1b1b; }
.updates-read-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* Tutorial picture or video showing where the change landed. */
.updates-media { margin: 1rem 0 0; }
.updates-media-frame {
  display: block;
  width: 100%;
  max-width: 780px;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
}
.updates-media-caption {
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: var(--muted);
}

/* ---- UAT fixes: expandable "+N more", task-tab priority dot, responsive ---- */

/* Clickable "+N more" reveals the remaining rows in place (#83). */
.more-toggle {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.more-toggle:hover { color: var(--teal); text-decoration: underline; }

/* Priority colour dot on the My Tasks tab, matching the dashboard (#88). */
.my-task > .pdot { margin-top: 0; align-self: center; }

/* Responsive: keep figures and tiles usable on small screens (#81, #84).
   The card tokens are stepped down rather than the card rules restated, so
   one column keeps exactly the same anatomy as two. */
@media (max-width: 560px) {
  :root {
    /* One column, so a taller card costs nothing side-to-side — and the head
       needs more of it here, where the stamp wraps under the title. */
    --tile-h:      28rem;
    --tile-h-wide: 30rem;
    --tile-pad-x:  1rem;
    --tile-pad-y:  0.95rem;
    --tile-gap:    0.9rem;
  }
  .kpi-row { grid-template-columns: 1fr 1fr; }
  .tile { padding: 0.95rem 1rem 1.1rem; }
  .inv-row-head { gap: 0.4rem; }
}
@media (max-width: 380px) {
  .kpi-row { grid-template-columns: 1fr; }
}

/* Clickable KPI jumps to its detail tile and briefly flashes it (#53). */
.kpi-clickable { cursor: pointer; transition: box-shadow 0.15s, border-color 0.15s; }
.kpi-clickable:hover { border-color: var(--gold); }
.kpi-clickable:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@keyframes tileFlash {
  0%   { box-shadow: 0 0 0 3px rgba(217, 165, 78, 0.55), var(--shadow); }
  100% { box-shadow: 0 0 0 3px rgba(217, 165, 78, 0), var(--shadow); }
}
.tile-flash { animation: tileFlash 1.1s ease-out; }

/* On paper there is no scrolling to do, so a capped card would simply lose
   its later rows. Let every card print at its full length. */
@media print {
  .tile-grid { display: block; }
  .tile-grid > .tile,
  .tile-grid > .tile-timesheet_tracker {
    height: auto;
    overflow: visible;
    margin-bottom: var(--tile-gap);
    break-inside: avoid;
  }
  .tile-grid > .tile > .tile-body,
  .tile-foot { overflow: visible; max-height: none; }
}

/* Version footer (UAT: testers confirm the build here). */
.site-footer{max-width:var(--maxw);margin:2.5rem auto 1.5rem;padding:0 1.4rem;color:var(--muted);font-size:.75rem;text-align:center;letter-spacing:.02em;}

/* Recently marked as phishing: quiet, below the list, with an undo. */
.phishing-recent { margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px solid var(--line); }
.phishing-recent .muted { font-size: 0.78rem; }
.phishing-recent-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; padding: 0.25rem 0; font-size: 0.78rem;
}

/* Tender / new-client opportunity status (#205). */
.opportunity-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--muted);
}
.opportunity-status-select {
  font: inherit;
  font-size: 0.78rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 6px;
}
.opportunity-tracked {
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
}
.opportunity-tracked .muted { font-size: 0.78rem; }
.opportunity-tracked-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.35rem 0;
  font-size: 0.78rem;
}
.opportunity-tracked-main {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.opportunity-status-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--line);
  color: var(--ink);
}
.opportunity-status-badge.status-responded { background: #e8eef8; color: #24306C; }
.opportunity-status-badge.status-won { background: #e6f3ea; color: #1f6b3a; }
.opportunity-status-badge.status-lost { background: #f6e8e4; color: #8a3b28; }
.opportunity-provenance { font-size: 0.72rem; }

/* ---------------------------------------------------------------------------
   Open email from chat (#231)
   ------------------------------------------------------------------------- */
.email-view-back { margin: 0 0 1rem; font-size: 0.92rem; }
.email-view-focus {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem 1.4rem 1.5rem;
  margin-bottom: 1.5rem;
}
.email-view-focus.email-view-phishing { border-color: var(--terracotta); }
.email-view-subject {
  margin: 0 0 0.35rem;
  font-size: 1.35rem;
  line-height: 1.25;
}
.email-view-meta { margin: 0 0 1rem; font-size: 0.9rem; }
.email-view-banner {
  margin: 0 0 1rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--terracotta-tint);
  color: var(--terracotta);
  font-size: 0.9rem;
  font-weight: 550;
}
.email-view-body {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--slate);
}
.email-view-thread { margin-bottom: 1.75rem; }
.email-view-thread h2,
.email-view-reply h2 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}
.email-thread-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
}
.email-thread-item + .email-thread-item {
  border-top: 1px solid var(--line);
}
.email-thread-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.15rem 0.75rem;
  padding: 0.7rem 0.9rem;
  text-decoration: none;
  color: inherit;
}
a.email-thread-link:hover { background: var(--panel-2); }
.email-thread-link.is-current { background: var(--sage-light); }
.email-thread-who { font-weight: 600; color: var(--ink); font-size: 0.9rem; }
.email-thread-when { font-size: 0.8rem; justify-self: end; }
.email-thread-subject,
.email-thread-snippet {
  grid-column: 1 / -1;
  font-size: 0.86rem;
}
.email-thread-snippet {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.email-view-reply {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem 1.35rem;
  margin-bottom: 2rem;
}
.email-view-reply-form {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.75rem;
  max-width: 40rem;
}
.email-view-reply-form label {
  font-size: 0.85rem;
  font-weight: 550;
  color: var(--ink);
  margin-top: 0.35rem;
}
.email-view-reply-form input,
.email-view-reply-form textarea {
  font: inherit;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--slate);
  background: var(--white);
}
.email-view-reply-form textarea { min-height: 10rem; resize: vertical; }
.email-view-reply-form button {
  align-self: flex-start;
  margin-top: 0.6rem;
  font: inherit;
  font-weight: 600;
  padding: 0.55rem 1rem;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--teal);
  color: #fff;
  cursor: pointer;
}
.email-view-reply-form button:hover { background: var(--teal-2); }
.email-view-draft-ok {
  margin: 0.6rem 0 0;
  color: var(--green);
  font-weight: 550;
}
.email-view-draft-err {
  margin: 0.6rem 0 0;
  color: var(--terracotta);
  font-weight: 550;
}