/*
 * Time Tracker · Material Design 3
 *
 * One stylesheet, no build step. Tokens follow the M3 naming (md-sys-*) so values can be swapped
 * for a new palette from Material Theme Builder without touching components.
 * See docs/STYLE_GUIDE.md for how to use each component, and /style/ for a live reference.
 */

/* ---------- Tokens ---------- */

:root {
  color-scheme: light;

  /* Color: M3 tonal-spot scheme from the brand guide (2024): seed Fullscore Navy #043362, which is also the
     light primary; tertiary from Fullscore Orange #E05E00; neutrals take the hue of Off-White #F8F2F2, which
     is the light surface. Brand orange itself is for the logo and small accents only (the guide asks for it
     to be used sparingly), so it has its own token rather than carrying text. */
  --brand-orange: #e05e00;
  --md-sys-color-primary: #043362;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #d5e3ff;
  --md-sys-color-on-primary-container: #234776;
  --md-sys-color-secondary: #555f71;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #d9e3f8;
  --md-sys-color-on-secondary-container: #3d4758;
  --md-sys-color-tertiary: #a04100;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #ffdbcc;
  --md-sys-color-on-tertiary-container: #7a3000;
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #93000a;
  --md-sys-color-surface: #f8f2f2;
  --md-sys-color-on-surface: #1d1b1c;
  --md-sys-color-on-surface-variant: #4b4547;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f6efef;
  --md-sys-color-surface-container: #f0e9ea;
  --md-sys-color-surface-container-high: #eae4e4;
  --md-sys-color-surface-container-highest: #e4dede;
  --md-sys-color-outline: #7c7577;
  --md-sys-color-outline-variant: #cdc4c6;
  --md-sys-color-inverse-surface: #323030;
  --md-sys-color-inverse-on-surface: #f6efef;

  /* Typography: the brand typeface is Avenir (sans serif throughout). It ships with Apple devices; elsewhere
     Nunito Sans, a free near match, stands in. Headlines use a heavy weight, as the guide does for titles. */
  --md-ref-typeface: "Avenir Next", Avenir, "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --md-sys-typescale-headline-small: 700 24px/32px var(--md-ref-typeface);
  --md-sys-typescale-title-large: 400 22px/28px var(--md-ref-typeface);
  --md-sys-typescale-title-medium: 500 16px/24px var(--md-ref-typeface);
  --md-sys-typescale-title-small: 500 14px/20px var(--md-ref-typeface);
  --md-sys-typescale-body-large: 400 16px/24px var(--md-ref-typeface);
  --md-sys-typescale-body-medium: 400 14px/20px var(--md-ref-typeface);
  --md-sys-typescale-body-small: 400 12px/16px var(--md-ref-typeface);
  --md-sys-typescale-label-large: 500 14px/20px var(--md-ref-typeface);
  --md-sys-typescale-label-medium: 500 12px/16px var(--md-ref-typeface);

  /* Shape */
  --md-sys-shape-extra-small: 4px;
  --md-sys-shape-small: 8px;
  --md-sys-shape-medium: 12px;
  --md-sys-shape-large: 16px;
  --md-sys-shape-full: 999px;

  /* Elevation */
  --md-sys-elevation-1: 0 1px 2px rgb(0 0 0 / .3), 0 1px 3px 1px rgb(0 0 0 / .15);
  --md-sys-elevation-2: 0 1px 2px rgb(0 0 0 / .3), 0 2px 6px 2px rgb(0 0 0 / .15);

  /* State layers */
  --md-sys-state-hover: 8%;
  --md-sys-state-focus: 10%;
  --md-sys-state-pressed: 10%;

  /* Motion */
  --md-sys-motion-standard: cubic-bezier(.2, 0, 0, 1);

  /* Layout */
  --app-bar-height: 64px;
  --view-as-height: 0px;
  --nav-rail-width: 88px;
  --nav-bar-height: 80px;
  --content-max: 1200px;

  /* Text fields float their label over the outline, so they need the container color behind them. */
  --field-container: var(--md-sys-color-surface-container-lowest);
}

/* Dark scheme: opt-in from the theme switcher in the app bar (light is the default). "System" follows the
   device setting; the script in base.html resolves it to data-theme="light" or "dark" on <html>. */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --md-sys-color-primary: #a6c8ff;
    --md-sys-color-on-primary: #02315f;
    --md-sys-color-primary-container: #234776;
    --md-sys-color-on-primary-container: #d5e3ff;
    --md-sys-color-secondary: #bdc7dc;
    --md-sys-color-on-secondary: #273141;
    --md-sys-color-secondary-container: #3d4758;
    --md-sys-color-on-secondary-container: #d9e3f8;
    --md-sys-color-tertiary: #ffb693;
    --md-sys-color-on-tertiary: #561f00;
    --md-sys-color-tertiary-container: #7a3000;
    --md-sys-color-on-tertiary-container: #ffdbcc;
    --md-sys-color-error: #ffb4ab;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000a;
    --md-sys-color-on-error-container: #ffdad6;
    --md-sys-color-surface: #151313;
    --md-sys-color-on-surface: #e7e1e1;
    --md-sys-color-on-surface-variant: #cdc4c6;
    --md-sys-color-surface-container-lowest: #100e0e;
    --md-sys-color-surface-container-low: #1d1b1c;
    --md-sys-color-surface-container: #211f20;
    --md-sys-color-surface-container-high: #2c292a;
    --md-sys-color-surface-container-highest: #373435;
    --md-sys-color-outline: #968f90;
    --md-sys-color-outline-variant: #4b4547;
    --md-sys-color-inverse-surface: #e7e1e1;
    --md-sys-color-inverse-on-surface: #323030;
    --field-container: var(--md-sys-color-surface-container-low);
  }
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: var(--md-sys-typescale-body-large);
  letter-spacing: .5px;
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; }
p { margin: 0 0 12px; }
a { color: var(--md-sys-color-primary); }
button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; }

.icon { width: 24px; height: 24px; fill: currentColor; flex: none; }
.icon--sm { width: 18px; height: 18px; }

.headline-small { font: var(--md-sys-typescale-headline-small); }
.title-large { font: var(--md-sys-typescale-title-large); }
.title-medium { font: var(--md-sys-typescale-title-medium); letter-spacing: .15px; }
.body-medium { font: var(--md-sys-typescale-body-medium); letter-spacing: .25px; }
.body-small { font: var(--md-sys-typescale-body-small); letter-spacing: .4px; }
.label-large { font: var(--md-sys-typescale-label-large); letter-spacing: .1px; }
.muted { color: var(--md-sys-color-on-surface-variant); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- App shell: top app bar + navigation rail (wide) / navigation bar (compact) ---------- */

.top-app-bar {
  position: sticky; top: var(--view-as-height); z-index: 10;
  height: var(--app-bar-height);
  display: flex; align-items: center; gap: 8px;
  padding: 0 8px 0 16px;
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
}
.top-app-bar__title {
  display: flex; align-items: center; gap: 12px;
  font: var(--md-sys-typescale-title-large);
  color: inherit; text-decoration: none;
  margin-right: auto;
}
.top-app-bar__title .icon { color: var(--md-sys-color-primary); }
/* Full Score Data logo, left of the app name, in the brand guide's approved versions: navy and orange on the
   light scheme, all white on the dark one (the guide rules out orange with white type). Compact screens show
   only the logomark. Replace the PNGs in static/img to rebrand. */
.top-app-bar__brand {
  display: flex; align-items: center; flex: none;
  padding-right: 16px; margin-right: 4px;
  border-right: 1px solid var(--md-sys-color-outline-variant);
  height: 32px;
}
.top-app-bar__logo { display: block; height: 44px; width: auto; }
.top-app-bar__mark { display: none; height: 32px; width: 32px; }
.top-app-bar__brand .top-app-bar__logo--dark,
:root[data-theme="dark"] .top-app-bar__brand .top-app-bar__logo--light { display: none; }
:root[data-theme="dark"] .top-app-bar__logo.top-app-bar__logo--dark { display: block; }
@media (max-width: 599.98px) {
  .top-app-bar__brand { padding-right: 8px; margin-right: 0; }
  :root[data-theme] .top-app-bar__brand .top-app-bar__logo { display: none; }
  .top-app-bar__mark.top-app-bar__logo--light { display: block; }
  :root[data-theme="dark"] .top-app-bar__mark.top-app-bar__logo--light { display: none; }
  :root[data-theme="dark"] .top-app-bar__mark.top-app-bar__logo--dark { display: block; }
  /* Admins' segmented button needs the room: the logo stands in for the clock and app name. */
  .top-app-bar:has(.mode-switch) .top-app-bar__brand { border-right: 0; padding-right: 0; margin-right: auto; }
  .top-app-bar:has(.mode-switch) .top-app-bar__title { display: none; }
}
/* View as: while the super admin sees the app as someone else, a brand-orange bar stays pinned above the app bar. */
.viewing-as { --view-as-height: 48px; }
.view-as-bar {
  position: sticky; top: 0; z-index: 11;
  height: var(--view-as-height);
  display: flex; align-items: center; gap: 12px;
  padding: 0 8px 0 16px;
  background: var(--md-sys-color-tertiary); color: var(--md-sys-color-on-tertiary);
  font: var(--md-sys-typescale-label-large); letter-spacing: .1px;
}
.view-as-bar .icon { flex: none; }
.view-as-bar__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-as-bar form { display: contents; }
.view-as-bar .btn { height: 32px; padding: 0 16px; background: var(--md-sys-color-on-tertiary); color: var(--md-sys-color-tertiary); }
@media (max-width: 599.98px) { .view-as-bar__detail { display: none; } }
.top-app-bar__user { font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-on-surface-variant); margin-right: 4px; }
.top-app-bar form { display: contents; }
/* Theme switcher: one button cycling light, dark and system; it shows the icon for the current choice. */
.theme-toggle > span { display: none; }
:root:not([data-theme-pref]) .theme-toggle__light,
[data-theme-pref="light"] .theme-toggle__light,
[data-theme-pref="dark"] .theme-toggle__dark,
[data-theme-pref="system"] .theme-toggle__system { display: grid; }

/* Admins' Manage / My time switch: an M3 segmented button; the selected side shows a check. */
.top-app-bar .mode-switch {
  display: inline-flex; height: 32px; margin-right: 4px;
  border: 1px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-full); overflow: hidden;
}
.mode-switch button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 14px; border: 0; background: transparent; cursor: pointer; white-space: nowrap;
  color: var(--md-sys-color-on-surface); font: var(--md-sys-typescale-label-large); letter-spacing: .1px;
}
.mode-switch button + button { border-left: 1px solid var(--md-sys-color-outline); }
.mode-switch button:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.mode-switch .icon { width: 18px; height: 18px; display: none; }
.mode-switch [aria-pressed="true"] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.mode-switch [aria-pressed="true"] .icon { display: block; }
@media (max-width: 599.98px) {
  .mode-switch button { padding: 0 10px; }
}

/* Activity's Week / Day: indented under Activity in the rail; tabs above the page on compact screens. */
.nav__sub { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: -6px; }
.nav__sub a {
  min-width: 56px; padding: 4px 8px; border-radius: var(--md-sys-shape-full); text-align: center;
  color: var(--md-sys-color-on-surface-variant); text-decoration: none;
  font: var(--md-sys-typescale-label-medium); letter-spacing: .5px;
}
.nav__sub a:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.nav__sub a[aria-current="page"] { color: var(--md-sys-color-on-surface); font-weight: 700; background: color-mix(in srgb, var(--md-sys-color-secondary-container) 60%, transparent); }
.subnav { display: none; }
@media (max-width: 839.98px) {
  .nav__sub { display: none; }
  .subnav { display: flex; margin: -8px 0 16px; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
  .subnav a {
    flex: 1; padding: 12px 0; text-align: center; text-decoration: none;
    color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-title-small);
    border-bottom: 3px solid transparent;
  }
  .subnav a[aria-current="page"] { color: var(--md-sys-color-primary); border-bottom-color: var(--md-sys-color-primary); }
}

.app-body { display: flex; min-height: calc(100vh - var(--app-bar-height)); }

.nav {
  display: flex;
  background: var(--md-sys-color-surface-container);
}
.nav__item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--md-sys-color-on-surface-variant);
  text-decoration: none;
  font: var(--md-sys-typescale-label-medium); letter-spacing: .5px;
}
.nav__indicator {
  position: relative;
  display: grid; place-items: center;
  width: 56px; height: 32px;
  border-radius: var(--md-sys-shape-full);
  overflow: hidden;
}
.nav__indicator::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity .2s; }
.nav__item:hover .nav__indicator::before { opacity: var(--md-sys-state-hover); }
.nav__item[aria-current="page"] { color: var(--md-sys-color-on-surface); font-weight: 700; }
.nav__item[aria-current="page"] .nav__indicator {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

main {
  flex: 1; min-width: 0;
  padding: 24px;
}
.content { max-width: var(--content-max); margin: 0 auto; }

/* Wide: navigation rail on the left */
@media (min-width: 840px) {
  .nav {
    flex-direction: column; align-items: center; gap: 12px;
    width: var(--nav-rail-width); flex: none;
    padding-top: 12px;
    background: transparent;
    position: sticky; top: calc(var(--app-bar-height) + var(--view-as-height)); height: calc(100vh - var(--app-bar-height) - var(--view-as-height));
  }
  .nav__item { width: 100%; }
}

/* Compact: navigation bar along the bottom */
@media (max-width: 839.98px) {
  .nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    height: var(--nav-bar-height);
    justify-content: space-around; align-items: center;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .nav__item { flex: 1; }
  main { padding: 16px 16px calc(var(--nav-bar-height) + 24px); }
  .top-app-bar__user { display: none; }
}

/* ---------- Page header: title, date navigation, filters ---------- */

.page-header {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
  margin-bottom: 24px;
}
.page-header__title { flex: 1 1 280px; min-width: 0; }
.page-header__title h1 { font: var(--md-sys-typescale-headline-small); }
.page-header__title p { margin: 4px 0 0; font: var(--md-sys-typescale-body-medium); letter-spacing: .25px; color: var(--md-sys-color-on-surface-variant); }
.page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.date-nav { display: inline-flex; align-items: center; gap: 4px; }

/* ---------- Cards ---------- */

.card {
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-medium);
  padding: 24px;
  margin-bottom: 16px;
}
.card--flush { padding: 0; overflow: hidden; }
.card__header {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px;
  margin-bottom: 16px;
}
.card--flush .card__header { padding: 20px 24px 0; }
.card__header h2 { font: var(--md-sys-typescale-title-large); }
.card__header .meta { font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); }
.card--auth { max-width: 400px; margin: 48px auto; padding: 32px 24px; }
.card--auth h1 { font: var(--md-sys-typescale-headline-small); margin-bottom: 4px; }

@media (max-width: 599.98px) {
  .card { padding: 16px; }
  .card--flush { padding: 0; }
  .card--flush .card__header { padding: 16px 16px 0; }
}

/* ---------- Buttons ---------- */

.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 24px;
  border: 0; border-radius: var(--md-sys-shape-full);
  font: var(--md-sys-typescale-label-large); letter-spacing: .1px;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);
}
.btn .icon { width: 18px; height: 18px; margin-left: -8px; }
.btn::before, .icon-btn::before {
  content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0;
  transition: opacity .2s var(--md-sys-motion-standard);
}
.btn:hover::before, .icon-btn:hover::before { opacity: var(--md-sys-state-hover); }
.btn:focus-visible::before, .icon-btn:focus-visible::before { opacity: var(--md-sys-state-focus); }
.btn:active::before, .icon-btn:active::before { opacity: var(--md-sys-state-pressed); }
.btn:hover { box-shadow: var(--md-sys-elevation-1); }

.btn--tonal { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.btn--outlined { background: transparent; color: var(--md-sys-color-primary); border: 1px solid var(--md-sys-color-outline); }
.btn--text { background: transparent; color: var(--md-sys-color-primary); padding: 0 12px; }
.btn--outlined:hover, .btn--text:hover { box-shadow: none; }
.btn--text .icon { margin-left: -4px; }

.icon-btn {
  position: relative; overflow: hidden;
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: var(--md-sys-shape-full);
  background: transparent; color: var(--md-sys-color-on-surface-variant);
  cursor: pointer; text-decoration: none;
}
.icon-btn--danger { color: var(--md-sys-color-error); }
.icon-btn--outlined { border: 1px solid var(--md-sys-color-outline-variant); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.actions--end { justify-content: flex-end; }
.inline-form { display: inline; }

/* ---------- Text fields (outlined) ---------- */

.field { position: relative; display: flex; flex-direction: column; min-width: 0; }
.field > label {
  position: absolute; top: -8px; left: 12px; z-index: 1;
  padding: 0 4px;
  font: var(--md-sys-typescale-body-small); letter-spacing: .4px;
  color: var(--md-sys-color-on-surface-variant);
  background: var(--field-container);
  pointer-events: none;
  max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.field input:not([type=checkbox]), .field select, .field textarea {
  width: 100%; min-height: 56px;
  padding: 16px;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-extra-small);
  background: transparent;
  color: var(--md-sys-color-on-surface);
  font: var(--md-sys-typescale-body-large); letter-spacing: .5px;
}
.field textarea { resize: vertical; min-height: 112px; }
.field select {
  appearance: none; -webkit-appearance: none;
  padding-right: 44px;
  background: no-repeat right 12px center / 24px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2344474e'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}
@media screen {
  [data-theme="dark"] .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c4c6d0'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); }
  [data-theme="dark"] .field select option { background: var(--md-sys-color-surface-container-high); }
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--md-sys-color-on-surface); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--md-sys-color-primary);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
}
.field:focus-within > label { color: var(--md-sys-color-primary); }
.field__support, .field .errorlist {
  margin: 4px 16px 0; padding: 0; list-style: none;
  font: var(--md-sys-typescale-body-small); letter-spacing: .4px;
  color: var(--md-sys-color-on-surface-variant);
}
.field--error > label, .field--error .field__support, .field .errorlist { color: var(--md-sys-color-error); }
.field--error input, .field--error select, .field--error textarea { border-color: var(--md-sys-color-error); }
.field--error:focus-within > label { color: var(--md-sys-color-error); }
.field--compact input:not([type=checkbox]), .field--compact select { min-height: 40px; padding-top: 8px; padding-bottom: 8px; font: var(--md-sys-typescale-body-medium); }

/* Form layout: a 12-column grid that collapses to one column on phones */
.form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px 16px; padding-top: 8px; }
.span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; } .span-8 { grid-column: span 8; } .span-12 { grid-column: span 12; }
.form-grid__footer { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
@media (max-width: 839.98px) {
  .span-2 { grid-column: span 3; }
  .span-3, .span-4, .span-5 { grid-column: span 4; }
  .span-8 { grid-column: span 6; }
}
@media (max-width: 599.98px) {
  .form-grid > * { grid-column: span 12; }
  .form-grid > .span-2 { grid-column: span 6; }
  .form-grid__footer .btn { flex: 1; }
}

/* ---------- Switch (style any checkbox with .switch around it) ---------- */

.switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font: var(--md-sys-typescale-body-large); }
.switch input[type=checkbox] {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none;
  position: relative; width: 52px; height: 32px;
  border: 2px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-full);
  background: var(--md-sys-color-surface-container-highest);
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.switch input[type=checkbox]::before {
  content: ""; position: absolute; top: 50%; left: 6px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--md-sys-color-outline);
  transform: translateY(-50%);
  transition: all .2s var(--md-sys-motion-standard);
}
.switch input[type=checkbox]:checked { background: var(--md-sys-color-primary); border-color: var(--md-sys-color-primary); }
.switch input[type=checkbox]:checked::before { left: 22px; width: 24px; height: 24px; background: var(--md-sys-color-on-primary); }

/* ---------- Chips ---------- */

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 0 8px;
  border-radius: var(--md-sys-shape-small);
  font: var(--md-sys-typescale-label-medium); letter-spacing: .5px;
  white-space: nowrap;
  border: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface-variant);
}
.chip--billable { border-color: transparent; background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.chip .icon { width: 16px; height: 16px; }

/* ---------- Banners (Django messages and inline notices) ---------- */

.banners { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.banner {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px;
  border-radius: var(--md-sys-shape-small);
  font: var(--md-sys-typescale-body-medium); letter-spacing: .25px;
  background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);
}
.banner .icon { width: 20px; height: 20px; }
.banner--error { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.banner--warning { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.banner .errorlist { margin: 0; padding: 0; list-style: none; }

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

.table-wrap { position: relative; overflow-x: auto; } /* relative: keeps visually-hidden headers from widening the page */
.data-table { width: 100%; border-collapse: collapse; font: var(--md-sys-typescale-body-medium); letter-spacing: .25px; }
.data-table th, .data-table td { padding: 12px 16px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.data-table thead th {
  font: var(--md-sys-typescale-title-small); letter-spacing: .1px;
  color: var(--md-sys-color-on-surface-variant);
  white-space: nowrap;
}
.data-table .num { text-align: right; }
.data-table tbody tr:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 4%, transparent); }
.card--flush .data-table tbody:last-child tr:last-child td { border-bottom: 0; }
.data-table tfoot td { font: var(--md-sys-typescale-title-small); border-bottom: 0; background: var(--md-sys-color-surface-container-low); }
.data-table .empty { padding: 32px 16px; text-align: center; color: var(--md-sys-color-on-surface-variant); }
.data-table td.actions-cell { width: 1%; white-space: nowrap; text-align: right; padding-top: 4px; padding-bottom: 4px; }
.data-table a.cell-link { color: inherit; text-decoration: none; }
.data-table a.cell-link:hover { color: var(--md-sys-color-primary); text-decoration: underline; }
.data-table .primary-text { color: var(--md-sys-color-on-surface); font-weight: 500; }
.data-table .secondary-text { display: block; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-small); letter-spacing: .4px; }
.data-table tr > :first-child { padding-left: 24px; }
.data-table tr > :last-child { padding-right: 24px; }

/* Week grid: a calendar of hours, today highlighted, first column pinned when scrolling sideways */
.week-grid th.day, .week-grid td.cell { text-align: center; width: 76px; }
.week-grid th.day a { color: inherit; text-decoration: none; display: block; border-radius: var(--md-sys-shape-small); padding: 4px 0; }
.week-grid th.day a:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.week-grid .dow { display: block; font: var(--md-sys-typescale-label-medium); letter-spacing: .5px; text-transform: uppercase; }
.week-grid .dom { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 4px; border-radius: var(--md-sys-shape-full); font: var(--md-sys-typescale-title-medium); color: var(--md-sys-color-on-surface); }
.week-grid th.today .dom { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.week-grid th.today .dow { color: var(--md-sys-color-primary); }
.week-grid td.today { background: color-mix(in srgb, var(--md-sys-color-primary-container) 45%, transparent); }
.week-grid td.cell a {
  display: inline-grid; place-items: center; min-width: 48px; height: 32px; padding: 0 8px;
  border-radius: var(--md-sys-shape-small);
  color: var(--md-sys-color-on-surface); text-decoration: none; font-variant-numeric: tabular-nums;
}
.week-grid td.cell a:hover { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.week-grid .summary-mark { display: block; height: 16px; color: var(--md-sys-color-primary); }
.week-grid .summary-mark .icon { width: 16px; height: 16px; }
.week-grid td.label { min-width: 200px; }
@media (max-width: 599.98px) {
  .week-grid td.label { min-width: 140px; }
  .week-grid th.day, .week-grid td.cell { width: 56px; padding-left: 4px; padding-right: 4px; }
  .week-grid td.cell a { min-width: 40px; padding: 0 4px; }
}
.sticky-col { position: sticky; left: 0; z-index: 1; background: var(--md-sys-color-surface-container-lowest); }
.data-table tfoot .sticky-col { background: var(--md-sys-color-surface-container-low); }

/* Entry list: a table on wide screens, stacked list items on phones */
@media (max-width: 599.98px) {
  .entry-table thead { display: none; }
  .entry-table, .entry-table tbody { display: block; }
  .entry-table tr {
    display: grid; grid-template-columns: 1fr auto; gap: 2px 12px;
    grid-template-areas: "what hours" "time time" "desc desc" "tags actions";
    padding: 12px 16px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
  }
  .entry-table td { padding: 0 !important; border: 0; }
  .entry-table td.e-what { grid-area: what; }
  .entry-table td.e-hours { grid-area: hours; font: var(--md-sys-typescale-title-medium); }
  .entry-table td.e-time { grid-area: time; color: var(--md-sys-color-on-surface-variant); }
  .entry-table td.e-desc { grid-area: desc; }
  .entry-table td.e-desc:empty { display: none; }
  .entry-table td.e-tags { grid-area: tags; align-self: center; }
  .entry-table td.actions-cell { grid-area: actions; width: auto; }
  .entry-table td.empty { grid-column: 1 / -1; }
}

/* Team view: Summaries as a list */
.summary-list { list-style: none; margin: 0; padding: 0; }
.summary-list li { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 16px 24px; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.summary-list li:last-child { border-bottom: 0; }
.summary-list .who { font: var(--md-sys-typescale-title-small); }
.summary-list .text { grid-column: 1 / -1; font: var(--md-sys-typescale-body-medium); letter-spacing: .25px; color: var(--md-sys-color-on-surface-variant); }

/* Stat row (totals at the top of a page) */
.stats { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.stat { display: flex; flex-direction: column; }
.stat__value { font: var(--md-sys-typescale-headline-small); font-variant-numeric: tabular-nums; }
.stat__label { font: var(--md-sys-typescale-label-medium); letter-spacing: .5px; color: var(--md-sys-color-on-surface-variant); }

/* Style guide page */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.swatch { padding: 16px 12px; border-radius: var(--md-sys-shape-small); font: var(--md-sys-typescale-label-medium); min-height: 72px; border: 1px solid var(--md-sys-color-outline-variant); }
.sg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.sg-type > * { margin: 0 0 8px; }

/* Invoicing report */
.report-filters { padding-top: 0; }
.report-filters__submit { display: flex; align-items: flex-start; }
.report-filters__submit .btn { min-height: 56px; width: 100%; }
.error-text { color: var(--md-sys-color-error); }

/* Entry review: flags an admin raises before invoicing, and the person's fix or reply (tracking/review.py). */
.chip--flag { border-color: transparent; background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.chip--fixed { border-color: transparent; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
a.chip { text-decoration: none; }
.flag-note {
  display: grid; gap: 2px; margin-top: 8px; padding: 8px 12px;
  border-left: 3px solid var(--md-sys-color-tertiary);
  border-radius: 0 var(--md-sys-shape-small) var(--md-sys-shape-small) 0;
  background: color-mix(in srgb, var(--md-sys-color-tertiary-container) 55%, transparent);
  color: var(--md-sys-color-on-surface);
  font: var(--md-sys-typescale-body-medium); letter-spacing: .25px;
}
.flag-note--fixed { border-left-color: var(--md-sys-color-primary); background: color-mix(in srgb, var(--md-sys-color-primary-container) 45%, transparent); }
.flag-note--cleared { border-left-color: var(--md-sys-color-outline-variant); background: none; color: var(--md-sys-color-on-surface-variant); }
.flag-note p { margin: 0; white-space: pre-line; }
.flag-note__who { font: var(--md-sys-typescale-label-medium); letter-spacing: .5px; color: var(--md-sys-color-on-surface-variant); }
.flag-form { display: grid; gap: 8px; margin-top: 8px; }
.flag-form[hidden] { display: none; }
.flag-form textarea { min-height: 0; }
.review-table td.e-desc { min-width: 280px; }
.review-table tr.is-flagged { background: color-mix(in srgb, var(--md-sys-color-tertiary-container) 18%, transparent); }
.review-filter { display: inline-flex; border: 1px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-full); overflow: hidden; }
.review-filter a { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; color: var(--md-sys-color-on-surface); text-decoration: none; font: var(--md-sys-typescale-label-large); letter-spacing: .1px; }
.review-filter a + a { border-left: 1px solid var(--md-sys-color-outline); }
.review-filter a:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.review-filter a[aria-current="true"] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.review-filter .icon { width: 18px; height: 18px; }
.nav__indicator .nav__badge {
  position: absolute; top: 2px; left: 32px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--md-sys-shape-full); background: var(--md-sys-color-error); color: var(--md-sys-color-on-error);
  font: 500 11px/16px var(--md-ref-typeface); text-align: center;
}
.nav__indicator { overflow: visible; }
.nav__indicator::before { border-radius: inherit; }
.fix-form { display: grid; gap: 8px; margin-top: 8px; }
@media (max-width: 599.98px) {
  .review-table td.e-desc { min-width: 0; }
}

.btn:disabled { opacity: .38; cursor: default; pointer-events: none; }

/* Invoicing workflow: the steps strip on each client's pages, and the landing list (tracking/workflow.py). */
.stepper__label { display: inline-flex; flex-direction: column; line-height: 1.2; }
.stepper__note { font: var(--md-sys-typescale-body-small); letter-spacing: .4px; color: var(--md-sys-color-on-surface-variant); }
.workflow-steps li:first-child { flex: 0 0 auto; }
.step-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.step-chips .chip--next { border-color: var(--md-sys-color-primary); color: var(--md-sys-color-primary); }
.client-projects { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
.client-projects li { display: flex; gap: 8px; align-items: baseline; font: var(--md-sys-typescale-body-small); letter-spacing: .4px; color: var(--md-sys-color-on-surface-variant); }
.client-projects .num { margin-left: auto; padding-left: 16px; }
.invoicing-table td { vertical-align: top; }
.invoicing-table .actions-cell { white-space: nowrap; }
.workflow-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.workflow-next p { margin: 0; }
@media (max-width: 599.98px) {
  .invoicing-table thead { display: none; }
  .invoicing-table, .invoicing-table tbody { display: block; }
  .invoicing-table tr { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; grid-template-areas: "client amount" "steps steps" "action action"; padding: 16px; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
  .invoicing-table td { padding: 0 !important; border: 0; }
  .invoicing-table td.i-client { grid-area: client; }
  .invoicing-table td.i-hours { display: none; }
  .invoicing-table td.i-amount { grid-area: amount; }
  .invoicing-table td.i-steps { grid-area: steps; }
  .invoicing-table td.actions-cell { grid-area: action; text-align: left; }
}

/* Printing: just the page content, in light colors, edge to edge */
@media print {
  /* Dark mode only applies on screen, so print always uses the light scheme. */
  .no-print { display: none !important; }
  body, .card { background: var(--md-sys-color-surface-container-lowest); }
  main { padding: 0 !important; margin: 0 !important; }
  .app-body { display: block; min-height: 0; }
  .content { max-width: none; }
  .card { border: 0; padding: 0; }
  .table-wrap { overflow: visible; }
  .data-table tbody tr:hover { background: none; }
  .data-table tr { break-inside: avoid; }
  .chip { border-color: #999; }
}

/* Invoices */
.chip--sent { border-color: transparent; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.chip--open { border-color: transparent; background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.reference-form { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.reference-form .field { width: 200px; }

/* Invoice document: a paper replica of the firm's invoice, the same in light and dark mode.
   Its colors are the invoice's own, not the app's M3 tokens, because it is the client's copy. */
.doc {
  --doc-ink: #262626; --doc-muted: #555; --doc-accent: #2f5496; --doc-band: #dbe5f1; --doc-rule: #bfbfbf;
  background: #fff; color: var(--doc-ink);
  max-width: 8.5in; margin: 0 auto 24px; padding: 0.6in 0.65in;
  border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-small);
  font: 400 11px/1.4 Roboto, system-ui, sans-serif; letter-spacing: 0;
}
.doc p { margin: 0 0 4px; }
.doc__letterhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 14px; }
.doc__logo { width: 1.7in; height: auto; }
.doc__firm { text-align: right; padding-top: 6px; }
.doc__band { display: flex; justify-content: space-between; background: var(--doc-band); padding: 8px 10px; margin-bottom: 16px; text-transform: uppercase; }
.doc__invno { font-size: 13px; }
.doc__invno span { text-transform: none; }
.doc__period { font-size: 10px; }
.doc__date { font-size: 12px; }
.doc__date span { margin-left: 4px; }
.doc__parties { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 16px; }
.doc__parties h3 { font: inherit; color: var(--doc-accent); text-transform: uppercase; border-bottom: 1px solid var(--doc-ink); padding-bottom: 2px; margin-bottom: 4px; }
.doc__table { width: 100%; border-collapse: collapse; margin-bottom: 4px; }
.doc__table th { background: var(--doc-band); font-weight: 400; text-transform: uppercase; text-align: left; padding: 6px; vertical-align: bottom; }
.doc__table td { padding: 4px 6px; border-bottom: 1px solid var(--doc-rule); vertical-align: top; }
.doc__table .num { text-align: right; font-variant-numeric: tabular-nums; }
.doc__table tbody tr:last-child td { border-bottom-color: var(--doc-ink); }
.doc__table tr { break-inside: avoid; }
.doc__totals { border-collapse: collapse; width: 3.4in; margin-bottom: 28px; }
.doc__totals th { text-align: left; font-weight: 400; color: var(--doc-accent); text-transform: uppercase; padding: 6px; border-bottom: 1px solid var(--doc-rule); }
.doc__totals td { text-align: right; color: var(--doc-accent); font-size: 12px; padding: 6px; border-bottom: 1px solid var(--doc-rule); font-variant-numeric: tabular-nums; }
.doc__due th, .doc__due td { font-weight: 700; border-bottom: 2px solid var(--doc-accent); }
.doc__terms { font-size: 10px; break-inside: avoid; }
.doc__accept { margin-top: 10px !important; }
.doc__sign { display: flex; align-items: flex-end; gap: 6px; margin-top: 14px !important; }
.doc__rule { flex: 0 0 3in; border-bottom: 1px solid var(--doc-ink); height: 12px; }
.doc__rule--short { flex-basis: 1.2in; }
.doc__subhead { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 12px; }
.doc__table--items { margin-bottom: 18px; }
.doc__table--items .doc__person th { background: none; color: var(--doc-accent); font-size: 12px; text-transform: none; border-bottom: 1px solid var(--doc-ink); padding-left: 0; }
.doc__table--items td:first-child, .doc__table--items th:first-child { padding-left: 0; width: 0.6in; }
.doc__empty { color: var(--doc-muted); padding: 12px 0; }
.doc__page-break { break-after: page; height: 0; }
@media (max-width: 599.98px) {
  .doc { padding: 20px 16px; overflow-x: auto; }
  .doc__parties { grid-template-columns: 1fr; }
}
@media print {
  .doc { border: 0; border-radius: 0; margin: 0; padding: 0; max-width: none; }
  .doc__band, .doc__table th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page { size: letter; margin: 0.4in 0.6in; }
}

/* New client wizard: numbered steps across the top, done steps checked */
.stepper { display: flex; gap: 4px; margin: 0 0 16px; padding: 0; list-style: none; overflow-x: auto; }
.stepper li { flex: 1 0 auto; }
.stepper a, .stepper span.stepper__step {
  display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 12px 4px 4px; border-radius: var(--md-sys-shape-full);
  color: var(--md-sys-color-on-surface-variant); text-decoration: none; font: var(--md-sys-typescale-label-large); letter-spacing: .1px; white-space: nowrap;
}
.stepper a:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.stepper__num {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; flex: none;
  border: 1px solid var(--md-sys-color-outline); font: var(--md-sys-typescale-label-medium);
}
.stepper__num .icon { width: 18px; height: 18px; }
.stepper .is-done .stepper__num { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border-color: transparent; }
.stepper [aria-current="step"] { color: var(--md-sys-color-on-surface); background: var(--md-sys-color-secondary-container); }
.stepper [aria-current="step"] .stepper__num { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); border-color: transparent; }
@media (max-width: 599px) {
  .stepper li:not(:has([aria-current="step"])) .stepper__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .stepper li { flex: 0 0 auto; }
}
.wizard-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-top: 16px; }
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { display: grid; grid-template-columns: 24px 1fr auto; gap: 4px 16px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.checklist li:last-child { border-bottom: 0; }
.checklist .icon { color: var(--md-sys-color-primary); }
.checklist .is-missing .icon { color: var(--md-sys-color-tertiary); }
.checklist .what { font: var(--md-sys-typescale-title-small); }
.checklist .detail { display: block; font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); }
.chip--warn { text-decoration: none; border-color: transparent; background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }

/* Project budgets: the over-budget chip, the meter, and burn charts (tracking/budgets.py). */
.chip--over { border-color: transparent; background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.chip-row { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.meter { position: relative; height: 8px; margin: 6px 0 4px; border-radius: var(--md-sys-shape-full); background: var(--md-sys-color-surface-container-highest); overflow: hidden; min-width: 120px; }
.meter__fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--md-sys-shape-full); background: var(--md-sys-color-primary); }
.meter--warn .meter__fill { background: var(--md-sys-color-tertiary); }
.meter--over .meter__fill { background: var(--md-sys-color-error); }
.meter__mark { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--md-sys-color-on-surface-variant); opacity: .6; }
.burn-chart { margin: 0; }
.burn-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.burn-chart__grid { stroke: var(--md-sys-color-outline-variant); stroke-width: 1; }
.burn-chart__axis, .burn-chart__label { fill: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-small); }
.burn-chart__label { fill: var(--md-sys-color-on-surface); font: var(--md-sys-typescale-label-medium); }
.burn-chart__line { fill: none; stroke: var(--md-sys-color-primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.burn-chart__line.is-over, .burn-chart__dot.is-over { stroke: var(--md-sys-color-error); }
.burn-chart__dot { fill: var(--md-sys-color-primary); stroke: var(--md-sys-color-surface-container-lowest); stroke-width: 2; }
.burn-chart__dot.is-over { fill: var(--md-sys-color-error); }
.burn-chart__hit { fill: transparent; }
.burn-chart__bar path { fill: var(--md-sys-color-primary); }
.burn-chart__bar.is-over path { fill: var(--md-sys-color-error); }
.burn-chart__bar:hover path { opacity: .8; }
.burn-chart__bar:hover .burn-chart__hit { fill: var(--md-sys-color-on-surface); fill-opacity: .04; }
.burn-chart__budget { stroke: var(--md-sys-color-on-surface); stroke-width: 2; stroke-dasharray: 6 4; }
.burn-chart__warn { stroke: var(--md-sys-color-tertiary); stroke-width: 1.5; stroke-dasharray: 2 4; }
.burn-chart__pace { stroke: var(--md-sys-color-outline); stroke-width: 1.5; stroke-dasharray: 4 4; }
.burn-chart__today { stroke: var(--md-sys-color-outline); stroke-width: 1; }
.burn-chart__legend { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; margin-top: 8px; font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface-variant); }
.burn-chart__legend .key { display: inline-block; width: 16px; margin-right: 6px; vertical-align: middle; }
.key--line { height: 2px; background: var(--md-sys-color-primary); }
.key--bar { height: 10px; border-radius: 2px 2px 0 0; background: var(--md-sys-color-primary); }
.key--budget { border-top: 2px dashed var(--md-sys-color-on-surface); }
.key--warn { border-top: 2px dotted var(--md-sys-color-tertiary); }
.key--pace { border-top: 2px dashed var(--md-sys-color-outline); }
/* The chart scales down to fit a phone, so its text is drawn larger to come out readable. */
@media (max-width: 599px) {
  .burn-chart__axis { font-size: 30px; }
  .burn-chart__label { font-size: 32px; }
  .burn-chart__line, .burn-chart__budget { stroke-width: 5; }
}
.project-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.field[hidden] { display: none; }

/* Spreadsheet import (tracking/spreadsheet.py): the columns list, the checked rows and their problems. */
.import-intro { margin: 0; padding: 0 24px 16px; }
.import-note { display: flex; gap: 8px; align-items: flex-start; margin: 16px 0 0; color: var(--md-sys-color-on-surface-variant); }
.import-note .icon { flex: none; width: 20px; height: 20px; color: var(--md-sys-color-primary); }
.import-table td { vertical-align: top; }
.import-table .i-num { width: 1%; color: var(--md-sys-color-on-surface-variant); font-variant-numeric: tabular-nums; }
.import-table .i-desc { min-width: 200px; }
.import-table tr.is-error { background: color-mix(in srgb, var(--md-sys-color-error-container) 30%, transparent); }
.import-table tr.is-duplicate td, .import-table tr.is-skipped td { color: var(--md-sys-color-on-surface-variant); }
.import-errors { display: grid; gap: 2px; margin: 4px 0 0; padding: 0; list-style: none; font: var(--md-sys-typescale-body-small); letter-spacing: .4px; color: var(--md-sys-color-error); }
.import-errors li { display: flex; gap: 4px; align-items: flex-start; }
.import-errors .icon { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.import-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.import-actions p { margin: 0; flex: 1 1 280px; }
@media (max-width: 599.98px) {
  .import-table thead { display: none; }
  .import-table, .import-table tbody { display: block; }
  .import-table tr {
    display: grid; grid-template-columns: 1fr auto; gap: 2px 12px;
    grid-template-areas: "what hours" "date time" "desc desc" "tags num";
    padding: 12px 16px; border-bottom: 1px solid var(--md-sys-color-outline-variant);
  }
  .import-table td { padding: 0 !important; border: 0; }
  .import-table .i-what { grid-area: what; }
  .import-table .i-hours { grid-area: hours; font: var(--md-sys-typescale-title-medium); }
  .import-table .i-date { grid-area: date; color: var(--md-sys-color-on-surface-variant); }
  .import-table .i-time { grid-area: time; color: var(--md-sys-color-on-surface-variant); text-align: right; }
  .import-table .i-desc { grid-area: desc; min-width: 0; }
  .import-table .i-desc:empty { display: none; }
  .import-table .i-tags { grid-area: tags; margin-top: 4px; }
  .import-table .i-num { grid-area: num; width: auto; align-self: end; }
  .import-table .i-num::before { content: "Row "; }
  .import-actions .chip-row { width: 100%; justify-content: flex-end; }
}

/* ---------- Google Workspace ---------- */

.btn--google { width: 100%; margin-top: 24px; justify-content: center; color: var(--md-sys-color-on-surface); }
.btn--google .google-g { flex: none; }
.auth-note { margin: 8px 0 0; text-align: center; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0 16px; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-label-medium); letter-spacing: .5px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; border-top: 1px solid var(--md-sys-color-outline-variant); }
.chip--google { border-color: transparent; background: var(--md-sys-color-surface-container-high, var(--md-sys-color-secondary-container)); color: var(--md-sys-color-on-surface-variant); }
.chip--google .google-g { width: 14px; height: 14px; }
.chip--new { border-color: transparent; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.chip--off { border-color: transparent; background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.sync-changes { display: block; margin-top: 2px; }
.setup-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.setup-steps code { word-break: break-all; }
.sync-add { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-primary); }
.sync-add input { width: 18px; height: 18px; accent-color: var(--md-sys-color-primary); margin: 0; }

/* ---------- Checkbox group (tick several, e.g. stakeholders/depts) ---------- */

.field select + input { margin-top: 8px; }
.check-group { margin: 0; padding: 12px 16px 8px; border: 1px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-extra-small); }
.check-group > legend { padding: 0 4px; font: var(--md-sys-typescale-body-small); letter-spacing: .4px; color: var(--md-sys-color-on-surface-variant); }
.check-group.field--error { border-color: var(--md-sys-color-error); }
.check-group.field--error > legend { color: var(--md-sys-color-error); }
.check-group__options { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.check-group .field__support { margin: 4px 0 0; }
.check { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; font: var(--md-sys-typescale-body-large); }
.check input[type=checkbox] { width: 18px; height: 18px; margin: 0; accent-color: var(--md-sys-color-primary); }

/* Your clients: the landing page for logging time, one card per client */
.client-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-bottom: 16px; }
.client-cards .card { margin-bottom: 0; }
.client-card { display: flex; flex-direction: column; gap: 16px; }
.client-card__name { font: var(--md-sys-typescale-title-large); }
.client-card__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 16px; }
.stat__value--over { color: var(--md-sys-color-error); }
.client-card__bucket { display: grid; gap: 4px; }
.client-card__bucket-name { font: var(--md-sys-typescale-title-small); }
.client-card__actions { margin-top: auto; display: flex; justify-content: flex-end; }
@media (max-width: 599.98px) {
  .client-cards { grid-template-columns: 1fr; }
  .client-card__actions .btn { flex: 1; justify-content: center; }
}