/*
 * buses — dark design system
 *
 * A single, hand-rolled stylesheet shared by every server-rendered staff page
 * and the public quote form. No build step, no framework, no external fonts or
 * CDNs: it is embedded into the binary and served from /static/app.css so it is
 * cached once and is the single source of truth for the product's look.
 *
 * Everything is driven by the custom properties in :root — change a token here
 * and it cascades everywhere. See server/ui.md for the component catalogue and
 * how to build a new page on top of this system.
 */

:root {
  /* Surfaces & structure */
  --bg: #0d1117;
  --surface: #161b22;
  --surface-2: #1c2230;
  --border: #30363d;
  --border-strong: #444c56;

  /* Text */
  --text: #e6edf3;
  --text-muted: #8b949e;

  /* Brand & intent */
  --accent: #4c8dff;
  --accent-hover: #3b7ae0;
  --accent-contrast: #ffffff;
  --success: #3fb950;
  --warning: #d29922;
  --danger: #f85149;

  /* Tinted backgrounds for alerts/badges (kept subtle for AA contrast) */
  --success-bg: #12261a;
  --warning-bg: #2b2411;
  --danger-bg: #2d1416;
  --accent-bg: #12233f;

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;

  /* Shape & elevation */
  --radius: 8px;
  --radius-sm: 6px;
  --radius-pill: 999px;
  --shadow: 0 1px 3px rgba(1, 4, 9, 0.6), 0 8px 24px rgba(1, 4, 9, 0.4);
  --shadow-sm: 0 1px 2px rgba(1, 4, 9, 0.5);

  /* Typography & layout */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    monospace;
  --container: 60rem;
  --focus-ring: 0 0 0 3px rgba(76, 141, 255, 0.45);
}

/* ------------------------------------------------------------------ base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

a:hover {
  text-decoration: underline;
}

h1,
h2,
h3 {
  line-height: 1.25;
  margin: 0;
}

h1 {
  font-size: 1.5rem;
}

h2 {
  font-size: 1.2rem;
}

h3 {
  font-size: 1.05rem;
}

p {
  margin: 0 0 var(--sp-3);
}

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em;
}

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

:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------- top nav */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  /* Wrap rather than overflow. The section nav collapses behind a disclosure
     below 1024px, so wrapping is only ever the safety valve for an unusually
     long company name or email on a mid-size window — two rows, never a
     horizontal scrollbar. */
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding: 0 var(--sp-5);
  min-height: 56px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
}

.topbar__brand:hover {
  text-decoration: none;
}

.topbar__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--accent), #7db0ff);
  color: var(--accent-contrast);
  font-weight: 800;
  font-size: 0.9rem;
}

.topbar__company {
  padding: var(--sp-2) var(--sp-3);
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* The section navigation. Its links are grouped (Commercial, Operations, …) so
   a full-access owner meets a handful of entries instead of eighteen; a group
   holding one link renders as that link, never as a one-entry dropdown. */
.topbar__nav {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-width: 0;
}

.topbar__link {
  color: var(--text-muted);
  font-size: 0.9rem;
  white-space: nowrap;
}

.topbar__link:hover {
  color: var(--text);
}

.topbar__spacer {
  flex: 1;
}

/* Dropdown menus (company switcher + user menu) use <details> so they need no
   JavaScript; a click toggles the panel and it stays keyboard-accessible. */
.menu {
  position: relative;
}

.menu > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.9rem;
  white-space: nowrap;
}

.menu > summary::-webkit-details-marker {
  display: none;
}

.menu > summary::after {
  content: "▾";
  color: var(--text-muted);
  font-size: 0.75rem;
}

.menu[open] > summary {
  border-color: var(--border-strong);
}

.menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--sp-2));
  min-width: 220px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--sp-2);
  z-index: 30;
}

.menu__header {
  padding: var(--sp-2) var(--sp-3);
  font-size: 0.8rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-2);
  word-break: break-word;
}

.menu__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.9rem;
  background: none;
  border: 0;
  cursor: pointer;
}

.menu__item:hover {
  background: var(--surface);
  text-decoration: none;
}

.menu__item--current {
  color: var(--text-muted);
  cursor: default;
}

.menu__form {
  margin: 0;
}

.menu__form .menu__item {
  color: var(--danger);
}

/* A section group's summary is navigation, not a control, so it reads as a
   topbar link rather than as the bordered button the company/account menus
   use. It keeps the shared ▾ affordance and the global :focus-visible ring. */
.menu--nav > summary {
  padding: var(--sp-2) 0;
  border-color: transparent;
  background: none;
  color: var(--text-muted);
  gap: var(--sp-1);
  font-size: 0.9rem;
}

.menu--nav > summary:hover,
.menu--nav[open] > summary {
  border-color: transparent;
  color: var(--text);
}

/* Section panels drop from the left edge of their summary; the company and
   account menus hang off the right edge of the bar instead. */
.menu__panel--start {
  left: 0;
  right: auto;
}

/* The small-screen disclosure. It is hidden here and shown only under the
   narrow media query at the foot of this file, where it reveals .topbar__nav
   through the adjacent-sibling rule .navtoggle[open] + .topbar__nav. The nav
   deliberately is NOT nested inside this <details>: a closed <details> hides
   its own content and no CSS can force one open, so nesting would mean either
   a wide-screen nav behind a click or a second copy of every link. */
.navtoggle {
  display: none;
}

/* ------------------------------------------------------------- app shell */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-7);
}

.page-header {
  margin-bottom: var(--sp-5);
}

.page-header__eyebrow {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: var(--sp-1);
}

.page-header__lead {
  color: var(--text-muted);
  margin: var(--sp-2) 0 0;
}

.section {
  margin-top: var(--sp-6);
}

.section__title {
  margin-bottom: var(--sp-3);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* Breadcrumb trail: the shared back-navigation bar rendered at the top of the
   content container on staff pages (see breadcrumbsTmpl in templates.go). */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  font-size: 0.875rem;
}

.crumbs__link {
  color: var(--text-muted);
  text-decoration: none;
}

.crumbs__link:hover {
  color: var(--accent);
  text-decoration: underline;
}

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

.crumbs__current {
  color: var(--text);
}

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

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
}

.card__title {
  margin-bottom: var(--sp-2);
}

/* Stat tiles for dashboards. */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-4);
}

.tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
}

.tile__label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.tile__value {
  font-size: 1.75rem;
  font-weight: 700;
  margin-top: var(--sp-1);
}

/* A smaller tile value, e.g. a company name on the picker tiles. */
.tile__value--sm {
  font-size: 1.15rem;
}

.tile__hint {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: var(--sp-1);
}

.tile--link {
  display: block;
  color: var(--text);
}

.tile--link:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
  text-decoration: none;
}

/* Dashed placeholder for surfaces that later feature slices will fill. */
.placeholder {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: var(--sp-5);
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.015);
}

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

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.925rem;
}

.table th,
.table td {
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.table thead th {
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table tbody tr:hover td {
  background: var(--surface-2);
}

.table td.actions {
  text-align: right;
  white-space: nowrap;
}

/* A form that sits inline beside other controls (e.g. a row-action button next
   to a link in an actions cell). */
.inline-form {
  display: inline-block;
}

.empty-state {
  padding: var(--sp-6);
  text-align: center;
  color: var(--text-muted);
}

/* ----------------------------------------------------------------- forms */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.field__row {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.field__row > .field {
  flex: 1;
  min-width: 12rem;
}

label {
  font-weight: 600;
  font-size: 0.9rem;
}

.field__hint {
  font-size: 0.8rem;
  color: var(--text-muted);
}

input,
select,
textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--danger);
}

.field__error {
  font-size: 0.82rem;
  color: var(--danger);
}

/* ----------------------------------------------------- address combobox */

/* The autocomplete dropdown for the public quote form's address inputs. The
   list is absolutely positioned under its input and floats over following
   fields; it is hidden (via the [hidden] attribute) until suggestions arrive. */
.combobox {
  position: relative;
}

.combobox__list {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  margin: var(--sp-1) 0 0;
  padding: var(--sp-1);
  list-style: none;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  max-height: 16rem;
  overflow-y: auto;
}

.combobox__option {
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  cursor: pointer;
}

.combobox__option:hover {
  background: var(--surface);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.55rem 1.1rem;
  font-size: 0.95rem;
  font-family: inherit;
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover {
  text-decoration: none;
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn--primary {
  background: var(--accent);
  color: var(--accent-contrast);
}

.btn--primary:hover:not(:disabled) {
  background: var(--accent-hover);
}

.btn--secondary {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border-strong);
}

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

.btn--danger {
  background: transparent;
  color: var(--danger);
  border-color: var(--border-strong);
}

.btn--danger:hover:not(:disabled) {
  background: var(--danger-bg);
  border-color: var(--danger);
}

.btn--block {
  width: 100%;
}

.btn--sm {
  padding: 0.35rem 0.7rem;
  font-size: 0.85rem;
}

/* ----------------------------------------------------------------- badges */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  background: var(--surface-2);
  white-space: nowrap;
}

.badge--accent {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-bg);
}

.badge--success {
  color: var(--success);
  border-color: var(--success);
  background: var(--success-bg);
}

.badge--warning {
  color: var(--warning);
  border-color: var(--warning);
  background: var(--warning-bg);
}

.badge--danger {
  color: var(--danger);
  border-color: var(--danger);
  background: var(--danger-bg);
}

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

.alert {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
}

.alert--error {
  color: var(--danger);
  border-color: var(--danger);
  background: var(--danger-bg);
}

.alert--success {
  color: var(--success);
  border-color: var(--success);
  background: var(--success-bg);
}

/* An advisory: nothing failed, but what the user asked for was adjusted — the
   reports surface uses it when a ?from/?to period is clamped or falls back to
   the default. Same tokens as .badge--warning, so the two read as one intent. */
.alert--warning {
  color: var(--warning);
  border-color: var(--warning);
  background: var(--warning-bg);
}

/* ------------------------------------------------------- centered layout */

/* Used by the sign-in, no-companies and public quote surfaces: a single
   centered card on the app background. */
.centered {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
}

.auth-card {
  width: 100%;
  max-width: 26rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--sp-6);
}

.auth-card--wide {
  max-width: 40rem;
}

.auth-card__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: var(--sp-5);
}

.auth-card__title {
  margin-bottom: var(--sp-2);
}

/* Google sign-in button: white surface with the wordmark, per Google's
   guidance, so it reads as a real product sign-in on the dark card. */
.btn--google {
  background: #ffffff;
  color: #1f1f1f;
  border-color: #dadce0;
  font-weight: 600;
}

.btn--google:hover:not(:disabled) {
  background: #f5f6f7;
}

.gsi-logo {
  width: 18px;
  height: 18px;
  flex: none;
}

/* --------------------------------------------------------------- utility */

.hidden {
  display: none;
}

/* Narrow layout. The bar itself stays one row — brand, company, the Menu
   disclosure, the account menu — and the section nav collapses behind that
   disclosure instead of wrapping into three or four rows of links.

   The breakpoint is much wider than the 640px one below because it is set by
   the nav's own width, not by the phone: a full-access owner's bar (brand,
   company, six section entries, a long email) needs roughly 1050px, so a tablet
   in portrait has no room for it. */
@media (max-width: 1024px) {
  .topbar {
    gap: var(--sp-2);
    padding-block: var(--sp-2);
  }

  .navtoggle {
    display: block;
  }

  .topbar__nav {
    display: none;
  }

  /* Revealed by the disclosure next to it: a full-width column below the bar,
     which the sticky header grows to hold. */
  .navtoggle[open] + .topbar__nav {
    display: flex;
    flex-basis: 100%;
    order: 10;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: var(--sp-2);
  }

  /* Inside the drawer a group expands in place. An overlay panel would fall
     off the side of a narrow screen, and a stacked list is easier to hit. */
  .topbar__nav .menu__panel {
    position: static;
    min-width: 0;
    padding: 0 0 var(--sp-2) var(--sp-3);
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .topbar__nav .topbar__link {
    padding: var(--sp-2) 0;
  }
}

/* Phone layout: tighten the gutters. */
@media (max-width: 640px) {
  .topbar {
    padding-inline: var(--sp-4);
  }

  .container {
    padding: var(--sp-5) var(--sp-4) var(--sp-6);
  }
}