/* Vostok Control — admin and dispatcher chrome.
 *
 * Every value here comes from `docs/design-system.md`, which transcribes
 * `Vostok Design System.dc.html`. The admin is a Vostok surface: it uses the
 * same palette, type ramp, radii and motion as the passenger and driver
 * applications, never another product's look.
 *
 * Fonts are served locally rather than from a CDN so the control panel keeps
 * working on a restricted network.
 */

@font-face { font-family: Manrope; font-weight: 400; font-display: swap; src: url(/fonts/Manrope-Regular.ttf) format('truetype'); }
@font-face { font-family: Manrope; font-weight: 500; font-display: swap; src: url(/fonts/Manrope-Medium.ttf) format('truetype'); }
@font-face { font-family: Manrope; font-weight: 600; font-display: swap; src: url(/fonts/Manrope-SemiBold.ttf) format('truetype'); }
@font-face { font-family: Manrope; font-weight: 700; font-display: swap; src: url(/fonts/Manrope-Bold.ttf) format('truetype'); }
@font-face { font-family: Manrope; font-weight: 800; font-display: swap; src: url(/fonts/Manrope-ExtraBold.ttf) format('truetype'); }
/* The two marks Uzbek is written with — ‘ in o‘ and g‘, ’ in ma’lum. Manrope
 * draws them as a small square tick that reads as a typewriter apostrophe, so
 * "Qo‘ng‘iroqlar" looked misspelt although the text was right. These two faces
 * hold only those two characters, drawn as the turned comma and the comma they
 * are (the same files the public site uses), and stand in for Manrope's
 * wherever Manrope is set: a face declared later wins for the range it names. */
@font-face { font-family: Manrope; font-weight: 400; font-display: swap; src: url(/fonts/UzQuotes-Regular.ttf) format('truetype'); unicode-range: U+2018-2019; }
@font-face { font-family: Manrope; font-weight: 500; font-display: swap; src: url(/fonts/UzQuotes-Regular.ttf) format('truetype'); unicode-range: U+2018-2019; }
@font-face { font-family: Manrope; font-weight: 600; font-display: swap; src: url(/fonts/UzQuotes-Regular.ttf) format('truetype'); unicode-range: U+2018-2019; }
@font-face { font-family: Manrope; font-weight: 700; font-display: swap; src: url(/fonts/UzQuotes-Bold.ttf) format('truetype'); unicode-range: U+2018-2019; }
@font-face { font-family: Manrope; font-weight: 800; font-display: swap; src: url(/fonts/UzQuotes-Bold.ttf) format('truetype'); unicode-range: U+2018-2019; }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-display: swap; src: url(/fonts/JetBrainsMono-Medium.ttf) format('truetype'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 700; font-display: swap; src: url(/fonts/JetBrainsMono-Bold.ttf) format('truetype'); }
/* The small upper-case labels are set in JetBrains Mono, whose two marks are as
 * straight: YO‘LOVCHI and TO‘LOV get the same two glyphs. */
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-display: swap; src: url(/fonts/UzQuotes-Regular.ttf) format('truetype'); unicode-range: U+2018-2019; }
@font-face { font-family: 'JetBrains Mono'; font-weight: 700; font-display: swap; src: url(/fonts/UzQuotes-Bold.ttf) format('truetype'); unicode-range: U+2018-2019; }

:root {
  /* Brand */
  --yellow: #ffed00;
  --yellow-hover: #fff44d;
  --yellow-pressed: #d9c900;
  --ink: #1c1b17;
  --steel: #c5c6c6;
  --paper: #f7f6f2;
  --gold-ink: #a89c00;
  --gold-text: #8a7f00;

  /* Light surfaces */
  --bg: #f7f6f2;
  --panel: #ffffff;
  --fill: #f7f6f2;
  --fill-border: #e9e7df;
  --chrome-border: #e2e0d8;
  --divider: #efede6;
  --muted: #8a8880;
  --muted-soft: #a8a69e;
  --muted-deep: #6e6c66;

  /* Dark chrome (sidebar) */
  --sheet-dark: #1c1b17;
  --surface-dark: #26241f;
  --surface-raised-dark: #35322b;
  --border-dark: #35322b;
  --muted-dark: #8a8880;
  --muted-deep-dark: #5a574e;

  /* Semantic */
  --success: #2f9e63;
  --success-fill: rgba(79, 192, 127, .15);
  --danger: #d24330;
  --danger-fill: rgba(229, 83, 61, .1);
  --danger-border: #f0c9c1;
  --info: #6c9fe0;
  --info-fill: rgba(108, 159, 224, .15);
  --cashback-fill: #fffbe0;
  --cashback-border: #f0e48a;

  /* Radii */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 14px;
  --r-xl: 16px;
  --r-xxl: 18px;
  --r-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 3px 10px rgba(28, 27, 23, .09);
  --shadow-md: 0 4px 14px rgba(28, 27, 23, .10);
  --shadow-yellow: 0 8px 20px rgba(217, 201, 0, .35);

  /* Motion */
  --t-tap: 120ms ease;
  --t-color: 150ms ease;

  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Manrope, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Numerals, plates and technical labels take the mono face, exactly as the
 * mobile applications render them. */
.mono, .num, .plate, .table td.num, .metric strong, .kpi strong {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-soft);
}

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

.layout { display: grid; grid-template-columns: 270px 1fr; min-height: 100vh; }

.sidebar {
  background: var(--sheet-dark);
  color: var(--paper);
  padding: 24px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 8px 22px;
  color: var(--paper);
  text-decoration: none;
}
.brand small {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-dark);
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--yellow);
  color: var(--ink);
  flex: none;
}

.nav { flex: 1; }
.nav-heading {
  margin: 20px 12px 7px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-deep-dark);
}
.nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 2px 0;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--steel);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--t-color), color var(--t-color);
}
/* One drawn icon family, all on the same 24-grid at the same stroke, taking
   the colour of the entry they belong to. They used to be Unicode characters
   from half a dozen typefaces, so half were outlines and half were solid. */
.nav-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--muted);
  transition: color var(--t-color);
}
.nav-icon svg { display: block; }
.nav a:hover { background: var(--surface-dark); color: var(--paper); }
.nav a:hover .nav-icon { color: var(--paper); }
.nav a.active { background: var(--surface-raised-dark); color: var(--yellow); font-weight: 800; }
.nav a.active .nav-icon { color: var(--yellow); }

/* How many things on that screen are waiting for an operator.
   Pushed to the right edge by `margin-left: auto` so the counts line up down
   the sidebar and can be scanned without reading the labels. */
.nav-badge {
  margin-left: auto;
  flex: none;
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
  text-align: center;
}
/* On the current page the link itself is yellow, so the badge inverts to stay
   legible rather than disappearing into it. */
.nav a.active .nav-badge { background: var(--ink); color: var(--yellow); }

.sidebar-user {
  margin-top: 20px;
  padding: 16px 10px 0;
  border-top: 1px solid var(--border-dark);
  display: grid;
  gap: 4px;
}
.sidebar-user strong { font-size: 14px; font-weight: 800; }
.sidebar-user span { font-size: 12px; color: var(--muted-dark); }
.sidebar-user a { color: var(--yellow); text-decoration: none; font-weight: 700; }
.sidebar-user form { margin-top: 8px; }
.sidebar-user button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--steel);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.sidebar-user button:hover { color: var(--yellow); }

.content { padding: 28px 34px; min-width: 0; }

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 26px;
}
.topbar h1 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.03em; }
.topbar p { margin: 7px 0 0; color: var(--muted-deep); font-size: 14px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--chrome-border);
  border-radius: var(--r-pill);
  background: var(--panel);
  font-size: 13px;
  font-weight: 700;
}

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

.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.wide { grid-column: span 3; }
.split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 18px; }

.card {
  background: var(--panel);
  border: 1px solid var(--fill-border);
  border-radius: var(--r-xxl);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.card h2 { margin: 0 0 18px; font-size: 17px; font-weight: 800; }
.card.compact { align-self: start; }

.card-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
.card-heading h2 { margin: 0; }

/* Reusable operational facts. Primary and secondary values must remain
   visibly separate on both the wide desk and the dispatcher tablet. */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
  margin: 0;
}
.detail-grid > div {
  min-width: 0;
  padding: 11px 0;
  border-bottom: 1px solid var(--divider);
}
.detail-grid dt {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.detail-grid dd {
  min-width: 0;
  margin: 5px 0 0;
  overflow-wrap: anywhere;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.4;
}
.detail-grid dd small {
  display: block;
  margin-top: 3px;
  color: var(--muted-deep);
  font-size: 11px;
  font-weight: 550;
}
.tx-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--divider);
}
.tx-row > span { min-width: 0; }
/* A stored value in the change history: kept as written, wrapped to fit. */
.audit-value { margin: 0; max-width: 46ch; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.topbar .eyebrow a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.permission-group { margin-top: 16px; }
.permission-group .permission-grid { margin-bottom: 0; }
/* A moment and when it happened: "Bekor qilingan — 08.10.2026 16:05". The dash
 * is always there; while the moment has not come it stands alone. */
.tx-row--stamp { justify-content: flex-start; gap: 8px; }
/* The status history prints the status's own name, as the dictionary words it. */
#status-history .timeline b { text-transform: none; }
.tx-row--stamp strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tx-row--stamp .tx-sep { color: var(--muted); font-weight: 500; }
.tx-row small { display: block; margin-top: 3px; color: var(--muted); }
.toolbar-more + .toolbar-more { margin-top: 8px; }
.toolbar-more pre { max-width: 100%; overflow: auto; }

.metric span {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.metric strong { display: block; margin-top: 9px; font-size: 29px; }

/* Ledger block — divided rows with a bold total, as on the mobile receipts. */
.ledger { background: var(--fill); border-radius: var(--r-xxl); padding: 0 18px; }
.ledger .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--fill-border);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted-deep);
}
.ledger .row:last-child { border-bottom: 0; }
.ledger .row.total { padding: 16px 0; font-size: 16px; font-weight: 800; color: var(--ink); }
.ledger .row b { font-family: var(--mono); font-weight: 700; color: var(--ink); }
.ledger .row.total b { font-size: 24px; letter-spacing: -.02em; }
.ledger .row b.minus { color: var(--danger); }
.ledger .row b.gold { color: var(--gold-text); }

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

.table-wrap { overflow: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
  padding: 13px 8px;
  border-bottom: 1px solid var(--divider);
  text-align: left;
  font-size: 14px;
  vertical-align: middle;
}
.table th {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-soft);
}
/* A column that can be sorted is a link. It reads as the heading it is —
   not as the browser's blue, underlined default — and says which way the
   list is ordered when it is the one doing the ordering. */
.table th a { color: inherit; text-decoration: none; }
.table th a:hover, .table th a.asc, .table th a.desc { color: var(--ink); }
.table th a.asc::after { content: " ↑"; }
.table th a.desc::after { content: " ↓"; }
.table tbody tr { transition: background var(--t-color); }
.table tbody tr:hover { background: var(--fill); }
.table small, .permission-card small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12.5px;
}

/* --------------------------------------------------------- status & badges */

.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--fill);
  border: 1px solid var(--fill-border);
  color: var(--muted-deep);
  font-size: 12px;
  font-weight: 700;
}
.status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.status.active, .status.online, .status.completed, .status.approved {
  background: var(--success-fill);
  border-color: transparent;
  color: var(--success);
}
.status.blocked, .status.cancelled, .status.offline, .status.rejected {
  background: var(--danger-fill);
  border-color: transparent;
  color: var(--danger);
}
.status.pending, .status.busy {
  background: rgba(255, 237, 0, .22);
  border-color: transparent;
  color: var(--gold-text);
}
.status.in-trip, .status.info {
  background: var(--info-fill);
  border-color: transparent;
  color: var(--info);
}
.status.solid {
  background: var(--yellow);
  border-color: transparent;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: .04em;
}
.status.solid::before { display: none; }

/* Vehicle plate, matching the mobile applications. */
.plate {
  display: inline-block;
  padding: 7px 11px;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--yellow);
  font-size: 14px;
  letter-spacing: .06em;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--fill-border);
  border-radius: var(--r-pill);
  background: var(--fill);
  font-size: 13px;
  font-weight: 700;
}
.tag.selected { background: var(--ink); border-color: var(--ink); color: var(--yellow); font-weight: 800; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 18px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--yellow);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-color), transform var(--t-tap);
}
.btn:hover { background: var(--yellow-hover); }
.btn:active { background: var(--yellow-pressed); transform: scale(.97); }
.btn.secondary { background: var(--fill); border: 1px solid var(--fill-border); color: var(--ink); font-weight: 700; }
.btn.secondary:hover { background: var(--divider); }
.btn.outline { background: transparent; border: 1.5px solid var(--chrome-border); color: var(--ink); font-weight: 700; }
.btn.outline:hover { border-color: var(--yellow-pressed); }
.btn.inverse { background: var(--ink); color: var(--yellow); }
.btn.inverse:hover { background: #2a2924; }
.btn.danger { background: transparent; border: 1.5px solid var(--danger-border); color: var(--danger); }
.btn.danger:hover { background: var(--danger-fill); }
.btn.elevated { box-shadow: var(--shadow-yellow); }
.btn[disabled], .btn.disabled {
  background: var(--fill);
  border-color: var(--fill-border);
  color: var(--muted-soft);
  cursor: not-allowed;
  box-shadow: none;
}

.actions { display: flex; gap: 6px; align-items: center; }
.actions form { margin: 0; }
/* A row with three actions on it — edit, reset the password, block. Full-size
 * buttons made the staff table wider than its card, so the last one was cut
 * off at the edge; these are the same buttons, a size down. */
.actions--compact { gap: 5px; }
.actions--compact .btn { padding: 8px 11px; font-size: 12.5px; white-space: nowrap; }
.cell-sub { display: block; margin-top: 2px; color: var(--muted-deep); font-size: 12.5px; overflow-wrap: anywhere; }

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

.alert {
  margin: 0 0 16px;
  padding: 13px 16px;
  border-radius: var(--r-lg);
  font-size: 14px;
  font-weight: 600;
}
.alert.success { background: var(--success-fill); color: var(--success); }
.alert.error { background: var(--danger-fill); border: 1px solid var(--danger-border); color: var(--danger); }
.alert.warning { background: var(--cashback-fill); border: 1px solid var(--cashback-border); color: var(--gold-text); }
.alert.info { background: var(--fill, #F2F1EB); border: 1px solid var(--fill-border, #E2E0D8); color: var(--ink, #1C1B17); }
/* A notification that can be dismissed: the words, and a cross a thumb can
   find. The cross takes the colour of the notice it closes. */
.alert.is-dismissible { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-right: 8px; }
.alert .alert-text { min-width: 0; overflow-wrap: anywhere; }
.alert.is-dismissible .alert-text { padding-top: 1px; }
.alert-close {
  flex: none; width: 36px; height: 36px; margin: -8px 0; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 9px; background: rgba(28, 27, 23, .06); color: inherit;
  font-family: inherit; font-size: 24px; font-weight: 600; line-height: 1; cursor: pointer; opacity: .9;
  transition: opacity .15s ease, background .15s ease;
}
.alert-close:hover { opacity: 1; background: rgba(28, 27, 23, .14); }
.alert-close:focus-visible { opacity: 1; outline: 2px solid currentColor; outline-offset: 2px; }

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

.card label { display: grid; gap: 7px; margin-bottom: 15px; font-size: 13px; font-weight: 700; }
.card input, .card select, .card textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--fill-border);
  border-radius: var(--r-lg);
  background: var(--fill);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  transition: border-color var(--t-color), box-shadow var(--t-color), background var(--t-color);
}
.card input:focus, .card select:focus, .card textarea:focus {
  outline: 0;
  background: var(--panel);
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(255, 237, 0, .35);
}
.card input.mono, .card input[inputmode='numeric'] { font-family: var(--mono); }
.card .check { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.card .check input, .permission-card input { width: auto; }

.admin-date-field {
  display: inline-flex;
  align-items: stretch;
  min-width: 0;
  max-width: 100%;
  vertical-align: middle;
}
.admin-date-field > input[type='date'],
.admin-date-field > input[type='datetime-local'] {
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.admin-date-trigger {
  flex: 0 0 42px;
  border: 1.5px solid var(--fill-border);
  border-left: 0;
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  background: var(--yellow);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}
.admin-date-trigger:hover { background: var(--yellow-hover); }
.admin-date-trigger:focus-visible { outline: 3px solid rgba(255, 237, 0, .45); outline-offset: 2px; }
.filters .admin-date-field { max-width: 255px; }
.filters .admin-date-field input { width: 100%; max-width: none; }

.permission-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.permission-card {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  margin: 0 !important;
  padding: 15px;
  border: 1px solid var(--fill-border);
  border-radius: var(--r-lg);
  background: var(--panel);
}
.permission-card input { margin-top: 3px; }

.filters { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.filters input { max-width: 340px; }
.filters select { max-width: 190px; }
.filters input, .filters select {
  padding: 11px 14px;
  border: 1.5px solid var(--fill-border);
  border-radius: var(--r-lg);
  background: var(--panel);
  font: inherit;
  font-weight: 600;
}

.form-card { max-width: 850px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.span-2 { grid-column: span 2; }
.error-text { margin: 8px 0; color: var(--danger); font-size: 13px; font-weight: 600; }

/* Segmented control, matching the mobile period switchers. */
.segmented { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-md); background: var(--fill); }
.segmented a {
  padding: 10px 16px;
  border-radius: var(--r-sm);
  color: var(--muted-deep);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--t-color), color var(--t-color);
}
.segmented a.active { background: var(--yellow); color: var(--ink); font-weight: 800; }

/* ------------------------------------------------------------------- login */

/* Sign in: one centred card — branding, two fields, one button. */
.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255, 237, 0, .14), transparent 60%),
    var(--ink);
}
.login-card {
  position: relative;
  width: min(384px, 100%);
  padding: 34px 34px 36px;
  border-radius: 24px;
  background: var(--panel);
  box-shadow: 0 22px 52px rgba(0, 0, 0, .34);
}
.login-brand {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 22px 0 26px;
}
.login-brand .brand-mark {
  width: 44px;
  height: 44px;
  flex: none;
  padding: 8px;
  border-radius: 13px;
  background: var(--ink);
}
.login-brand .brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.login-brand > img { display: block; height: auto; }
.lang-switch--login { margin: 0; }
.login-card .field:has(input[type=checkbox]) label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.login-card .field:has(input[type=checkbox]) { margin: 16px 0 4px; }
.login-card .field input[type=checkbox], .login-remember { width: auto; margin: 0; }
.login-card .field-error { margin-top: 6px; color: #c62828; font-size: 12px; font-weight: 700; }
.login-card .has-error input { border-color: #c62828; }
.btn-block { width: 100%; margin-top: 10px; justify-content: center; }

/* The form fields, shared by the sign-in card. */
.field { margin: 16px 0; }
.field label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 700; }
.field input {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid var(--fill-border);
  border-radius: var(--r-lg);
  background: var(--fill);
  font: inherit;
  font-weight: 600;
}
.field input:focus {
  outline: 0;
  background: var(--panel);
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(255, 237, 0, .35);
}

/* ---------------------------------------------------------- language */

/* Used by the workspace header and by the sign-in card, so it lives here
 * rather than in the operations sheet the sign-in page does not load. */
.lang-switch {
  margin-left: auto;
  display: inline-flex;
  flex: none;
  flex-wrap: nowrap;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--chrome-border);
  border-radius: 999px;
  background: var(--fill);
}
.lang-switch a {
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  color: var(--muted-deep);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.lang-switch img {
  display: block;
  width: 20px;
  height: 14px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(28, 27, 23, .14);
}
.lang-switch a:hover { color: var(--ink); }
.lang-switch a.is-active { background: var(--yellow); color: var(--ink); }
.lang-switch a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

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

.pagination { display: flex; gap: 5px; list-style: none; padding: 0; }
.pagination a, .pagination span {
  display: block;
  padding: 9px 13px;
  border-radius: var(--r-sm);
  background: var(--fill);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.pagination .active a, .pagination .active span, .pagination a:hover { background: var(--yellow); }
.pagination .active a, .pagination .active span { font-weight: 800; cursor: default; }
.pagination .disabled a, .pagination .disabled span { opacity: .4; pointer-events: none; }
.pagination .disabled span { opacity: .45; cursor: not-allowed; }

/* The pager footer every table shares: summary, rows-per-page, page buttons. */
.admin-pager {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
  min-height: 38px;
}
.admin-pager .pager-summary { color: var(--muted-deep); font-size: 13px; margin-right: auto; }
.admin-pager .pager-summary strong { color: var(--ink); }
.admin-pager .pager-size {
  flex: none;
  width: auto;
  max-width: 190px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}
/* A long page list must scroll rather than push the layout sideways. */
.admin-pager nav { max-width: 100%; overflow-x: auto; }
.admin-pager nav .pagination { flex-wrap: nowrap; }

@media (max-width: 640px) {
  .admin-pager .pager-summary { width: 100%; margin-right: 0; }
  .admin-pager nav { order: 3; width: 100%; }
}

/* ------------------------------------------------------------------- empty */

.empty {
  display: grid;
  place-items: center;
  gap: 13px;
  padding: 48px 24px;
  text-align: center;
  color: var(--muted-deep);
}
.empty strong { font-size: 17px; font-weight: 800; color: var(--ink); }
.empty p { margin: 0; max-width: 360px; font-size: 14px; line-height: 1.55; }

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

@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .wide { grid-column: span 2; }
  .permission-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .content { padding: 20px; }
  .split, .form-grid, .permission-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .grid { grid-template-columns: 1fr; }
  .wide { grid-column: span 1; }
  .detail-grid { grid-template-columns: 1fr; }
}

/* Identifier cell: a uuid shortened to its leading block, full value on hover. */
.cell-id { width: 1%; white-space: nowrap; }
.id-short { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted-deep); cursor: help; }

/* ------------------------------------------------------- date picker */

/* flatpickr in Vostok colours. The library ships its own light theme; only
 * the parts that would otherwise look borrowed are restated. */
.vostok-date, .vostok-date--alt {
  padding: 11px 14px;
  border: 1.5px solid var(--fill-border);
  border-radius: var(--r-lg);
  background: var(--fill);
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  min-width: 160px;
}
.vostok-date:focus, .vostok-date--alt:focus {
  outline: 0;
  background: var(--panel);
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(255, 237, 0, .35);
}
.vostok-date--range, .vostok-date--range.vostok-date--alt { min-width: 230px; cursor: pointer; }
/* flatpickr hides the source field and shows this one. */
input.vostok-date--alt { display: block; }

.flatpickr-calendar {
  border-radius: 16px;
  border: 1px solid var(--chrome-border);
  box-shadow: 0 18px 44px rgba(28, 27, 23, .16);
  font-family: inherit;
}
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.endRange,
.flatpickr-calendar .flatpickr-day.selected:hover,
.flatpickr-calendar .flatpickr-day.startRange:hover,
.flatpickr-calendar .flatpickr-day.endRange:hover {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--ink);
  font-weight: 800;
}
.flatpickr-calendar .flatpickr-day.inRange {
  background: rgba(255, 237, 0, .26);
  border-color: rgba(255, 237, 0, .26);
  box-shadow: -5px 0 0 rgba(255,237,0,.26), 5px 0 0 rgba(255,237,0,.26);
}
.flatpickr-calendar .flatpickr-day.today { border-color: var(--ink); }
.flatpickr-calendar .flatpickr-day:hover { background: var(--fill); }
.flatpickr-months .flatpickr-month, .flatpickr-weekdays { color: var(--ink); }
.flatpickr-current-month .flatpickr-monthDropdown-months { font-weight: 700; }

/* Upload box while a file is being dragged over it. */
.upload-field.is-dropping .upload-preview,
.upload-field.is-dropping label {
  outline: 2px dashed var(--ink);
  outline-offset: 3px;
}
.upload-field.is-dropping { background: rgba(255, 237, 0, .10); border-radius: var(--r-sm); }

/* ------------------------------------------------------ sidebar groups */

.nav-group + .nav-group { margin-top: 4px; }
.nav-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 12px 8px;
  border: 0;
  background: none;
  color: var(--muted-soft);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.nav-heading:hover { color: var(--paper); }
.nav-heading:focus-visible { outline: 2px solid var(--yellow); outline-offset: -2px; border-radius: 8px; }
.nav-caret {
  margin-left: auto;
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-top-color: currentColor;
  transform: translateY(2px);
  transition: transform .18s ease;
}
.nav-group.is-open .nav-caret { transform: rotate(180deg) translateY(2px); }
.nav-links { display: none; }
.nav-group.is-open .nav-links { display: block; }

/* ------------------------------------------------------ modal, lightbox */

dialog.modal {
  width: min(520px, calc(100vw - 32px));
  padding: 26px;
  border: 1px solid var(--chrome-border);
  border-radius: 20px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 24px 60px rgba(28,27,23,.28);
}
dialog.modal::backdrop { background: rgba(28, 27, 23, .55); }
dialog.modal h2 { margin: 0 0 6px; font-size: 19px; font-weight: 800; }
dialog.modal .modal-lede { margin: 0 0 16px; color: var(--muted-deep); font-size: 14px; }
dialog.modal label { display: block; font-size: 13px; font-weight: 700; }
dialog.modal textarea {
  width: 100%;
  margin-top: 7px;
  padding: 12px 14px;
  border: 1.5px solid var(--fill-border);
  border-radius: var(--r-lg);
  background: var(--fill);
  font: inherit;
  font-weight: 600;
  resize: vertical;
}
/* A choice in a dialog is a field like the text under it, not the browser's
   own little control sitting beside its label. */
dialog.modal select {
  display: block;
  width: 100%;
  margin-top: 7px;
  padding: 12px 14px;
  border: 1.5px solid var(--fill-border);
  border-radius: var(--r-lg);
  background-color: var(--fill);
  font: inherit;
  font-weight: 600;
}
dialog.modal select:focus { outline: 0; background-color: var(--panel); border-color: var(--ink); box-shadow: 0 0 0 4px rgba(255,237,0,.35); }
dialog.modal textarea:focus { outline: 0; background: var(--panel); border-color: var(--ink); box-shadow: 0 0 0 4px rgba(255,237,0,.35); }
dialog.modal label small { display: block; margin-top: 6px; color: var(--muted-deep); font-size: 12px; font-weight: 600; }
dialog.modal .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.modal-error {
  margin: 0 0 14px;
  padding: 10px 13px;
  border-radius: var(--r-sm);
  background: var(--danger-fill);
  color: var(--danger);
  font-size: 13px;
  font-weight: 700;
}
.review-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.review-actions form { margin: 0; }
.btn-approve { background: var(--success); color: #fff; }
.btn-approve:hover { filter: brightness(1.06); }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  background: rgba(16, 15, 12, .88);
}
.lightbox[hidden] { display: none; }
.lightbox-figure { margin: 0; display: flex; flex-direction: column; gap: 12px; align-items: center; max-width: 100%; }
.lightbox-figure img { max-width: min(1100px, 86vw); max-height: 80vh; border-radius: 12px; background: #fff; }
.lightbox-figure figcaption { color: rgba(247,246,242,.82); font-size: 13px; font-weight: 600; }
.lightbox-close, .lightbox-step {
  flex: none;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(247,246,242,.12);
  color: var(--paper);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close { position: absolute; top: 20px; right: 22px; font-size: 22px; }
.lightbox-close:hover, .lightbox-step:hover { background: rgba(247,246,242,.24); }
.cell-actions { white-space: nowrap; }
@media (max-width: 640px) { .lightbox-step { width: 38px; height: 38px; } }

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

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -4px 0 18px;
}

.tabs .tab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border: 1.5px solid var(--chrome-border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}

.tabs .tab:hover { border-color: var(--ink); transform: translateY(-1px); }
.tabs .tab:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

.tabs .tab.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--yellow);
}

.tab-icon { font-size: 15px; line-height: 1; }

.tab-count {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--fill);
  color: var(--muted-deep);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.tab-count.is-live { background: var(--yellow); color: var(--ink); }
.tabs .tab.is-active .tab-count { background: rgba(247, 246, 242, .18); color: var(--paper); }
.tabs .tab.is-active .tab-count.is-live { background: var(--yellow); color: var(--ink); }

/* Below the tablet break the labels go and the icons carry the tabs, so all
   six sections stay on screen instead of scrolling off the right edge. */
@media (max-width: 720px) {
  .tabs { gap: 6px; }
  .tabs .tab { padding: 10px 12px; gap: 6px; }
  .tabs .tab-label { display: none; }
  .tabs .tab.is-active .tab-label { display: inline; }
  .tab-icon { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .tabs .tab { transition: none; }
  .tabs .tab:hover { transform: none; }
}

/* ------------------------------------------------- label / value details */

.detail-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px 24px;
  margin: 0;
}

.detail-list > div { min-width: 0; }

.detail-list dt {
  margin: 0 0 3px;
  color: var(--muted-deep);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.detail-list dd {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.field-hint {
  margin: -4px 0 14px;
  color: var(--muted-deep);
  font-size: 13px;
}

/* ------------------------------------------------------- searchable select */

.ajax-select { position: relative; }

.ajax-select-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--fill-border);
  border-radius: var(--r-lg);
  background: var(--fill);
  color: var(--ink);
  font: inherit;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

.ajax-select-button:focus-visible {
  outline: 0;
  background: var(--panel);
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(255, 237, 0, .35);
}

.ajax-select-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ajax-select-text.is-placeholder { color: var(--muted-deep); font-weight: 600; }
.ajax-select-caret { flex: none; color: var(--muted-deep); }

.ajax-select-clear {
  position: absolute;
  top: 50%;
  right: 38px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: var(--chrome-border);
  color: var(--ink);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.ajax-select-clear[hidden] { display: none; }
.ajax-select-clear:hover { background: var(--ink); color: var(--paper); }

.ajax-select-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  padding: 10px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: 0 18px 44px rgba(28, 27, 23, .18);
}

.ajax-select-panel[hidden] { display: none; }

.ajax-select-search {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--fill-border);
  border-radius: var(--r-sm);
  background: var(--fill);
  font: inherit;
  font-weight: 650;
}

.ajax-select-search:focus { outline: 0; border-color: var(--ink); background: var(--panel); }

.ajax-select-list {
  max-height: 260px;
  margin: 8px 0 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.ajax-select-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}

.ajax-select-option small { color: var(--muted-deep); font-size: 12px; font-weight: 600; }
.ajax-select-option:hover, .ajax-select-option:focus { background: var(--fill); outline: 0; }
.ajax-select-option.is-selected { background: var(--yellow); }

.ajax-select-note {
  padding: 12px 11px;
  color: var(--muted-deep);
  font-size: 13px;
  font-weight: 600;
}

/* ------------------------------------------------- counts that need noticing */

.count-badge {
  display: inline-block;
  min-width: 30px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--fill);
  color: var(--muted-deep);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.count-badge.is-alert { background: var(--danger-fill); color: var(--danger); }

/* A row the operator should look at before acting on it. The badge already
   carries the number; the tint is what makes it findable while scrolling. */
.table tbody tr.row-alert > td { background: var(--danger-fill); }
.table tbody tr.row-alert:hover > td { background: var(--danger-fill); filter: brightness(.98); }

.card.metric.is-alert { border-color: var(--danger-border); }
.card.metric.is-alert strong { color: var(--danger); }

.inline-form { display: inline; margin: 0; }

/* ------------------------------------------------------- current image card */

.current-image {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 0 0 16px;
  padding: 14px;
  border: 1.5px solid var(--chrome-border);
  border-radius: var(--r-lg);
  background: var(--fill);
}

.current-image img {
  flex: none;
  width: 160px;
  height: 110px;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--panel);
  cursor: zoom-in;
}

.current-image strong { display: block; font-size: 14px; }
.current-image small { display: block; margin: 3px 0 10px; color: var(--muted-deep); overflow-wrap: anywhere; }

@media (max-width: 560px) {
  .current-image { flex-direction: column; }
  .current-image img { width: 100%; height: auto; }
}

/* ------------------------------------------------ site content, by section */

.content-section { margin: 0 0 26px; }

.content-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid var(--chrome-border);
}

.content-section-head h2 { margin: 0; font-size: 17px; font-weight: 800; }
.content-section-head span { color: var(--muted-deep); font-size: 12px; font-weight: 700; }

.content-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.content-card {
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--chrome-border);
  border-radius: var(--r-lg);
  background: var(--panel);
  overflow: hidden;
}

.content-card.is-draft { border-style: dashed; background: var(--fill); }

.content-card-image {
  display: block;
  width: 100%;
  height: 132px;
  object-fit: cover;
  background: var(--fill);
  cursor: zoom-in;
}

.content-card-body { flex: 1; padding: 15px 16px 12px; min-width: 0; }

.content-card-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
}

.content-card-meta code {
  color: var(--muted-deep);
  font-size: 11px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.content-card h3 { margin: 0 0 6px; font-size: 15px; font-weight: 800; line-height: 1.35; }
.content-card p { margin: 0 0 8px; color: var(--muted-deep); font-size: 13px; line-height: 1.55; }
.content-card-link { font-family: inherit; overflow-wrap: anywhere; }

.content-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.content-card-tags span {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--fill);
  color: var(--muted-deep);
  font-size: 11px;
  font-weight: 700;
}

.content-card-actions {
  display: flex;
  gap: 8px;
  padding: 0 16px 15px;
}

.image-field-form { margin: 0; }
.content-card .status { flex: none; }

/* ------------------------------------------------------ validation messages */

/* Yii renders a field error into `.help-block` and marks the wrapper
   `.has-error`. Neither had a rule, so a rejected field looked exactly like an
   accepted one and the reason was printed in body text. */
.help-block {
  margin: 7px 0 0;
  color: var(--danger);
  font-size: 13px;
  font-weight: 650;
}

.help-block:empty { display: none; }

.has-error > label,
.has-error > label > span { color: var(--danger); }

.has-error input,
.has-error select,
.has-error textarea,
.has-error .ajax-select-button {
  border-color: var(--danger-border);
  background: var(--danger-fill);
}

.has-error input:focus,
.has-error select:focus,
.has-error textarea:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 4px rgba(210, 67, 48, .18);
}

/* The summary above a form, for the errors that belong to no single field. */
.alert.error ul,
.alert.error p { margin: 0; padding-left: 18px; }
.alert.error li { font-weight: 650; }

/* Several values, as removable chips above the control. */
.ajax-select--multiple .ajax-select-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.ajax-select--multiple .ajax-select-chips:empty { display: none; }

.ajax-select-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 11px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.ajax-select-chip-remove {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: rgba(28, 27, 23, .14);
  color: var(--ink);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.ajax-select-chip-remove:hover { background: var(--ink); color: var(--yellow); }

/* The picture that goes out with a notification. */
.notification-image { display: grid; gap: 10px; justify-items: start; }
.notification-image img {
  max-width: 260px;
  max-height: 170px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--chrome-border);
  background: var(--fill);
  cursor: zoom-in;
}
.notification-image img[hidden] { display: none; }
.notification-image .actions { display: flex; gap: 8px; }
.notification-image label.btn { margin: 0; cursor: pointer; }

/* A row nobody has looked at yet. */
.table tbody tr.row-new > td { background: rgba(255, 237, 0, .16); }
.table tbody tr.row-new:hover > td { background: rgba(255, 237, 0, .24); }

/* ----------------------------------------------------------------- toolbar */

/* One filter bar rather than a row of unrelated fields: the period on its own
   line because it is chosen first and changes what everything else means, then
   the named filters, then the reference numbers folded away. */
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.toolbar {
  display: grid;
  gap: 14px;
  margin-bottom: 20px;
  padding: 16px;
  border: 1px solid var(--fill-border);
  border-radius: var(--r-xl);
  background: var(--fill);
}

/* Grid and flex children default to min-content width, which lets the period
   row push the whole card wider than the screen on a phone. */
.toolbar > * { min-width: 0; }

.toolbar-periods {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.toolbar-periods .segmented { background: var(--panel); max-width: 100%; }
.toolbar-periods .segmented > * { flex: none; white-space: nowrap; }
.toolbar-range { display: flex; align-items: center; gap: 8px; }
.toolbar-range .vostok-date, .toolbar-range .vostok-date--alt { min-width: 250px; background: var(--panel); }

/* The period buttons are links — they are a place you can go back to — except
   Custom, which only opens the calendar, so it has to be told to look alike. */
.segmented button {
  padding: 10px 16px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--muted-deep);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--t-color), color var(--t-color);
}
.segmented button.active { background: var(--yellow); color: var(--ink); font-weight: 800; }
.segmented a:hover, .segmented button:hover { color: var(--ink); }

.toolbar-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: end;
  gap: 12px;
}
.toolbar .field { display: grid; gap: 7px; margin: 0; }
.toolbar .field > span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--muted-deep);
}
.toolbar .field input {
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border: 1.5px solid var(--fill-border);
  border-radius: var(--r-lg);
  background: var(--panel);
  font: inherit;
  font-weight: 600;
}
.toolbar .field input:focus {
  outline: 0;
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(255, 237, 0, .35);
}
.toolbar .ajax-select-button { background: var(--panel); }

/* Apply first and filled, Reset beside it and quiet: one is the action, the
   other is the way back. */
.toolbar-actions { display: flex; align-items: center; gap: 8px; }
.toolbar-actions .btn { white-space: nowrap; }

.toolbar-more > summary {
  width: max-content;
  padding: 6px 0;
  color: var(--muted-deep);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.toolbar-more > summary:hover { color: var(--ink); }
.toolbar-more .toolbar-fields { padding-top: 10px; }

@media (max-width: 980px) {
  .grid-3 { grid-template-columns: 1fr; }
  .toolbar { padding: 14px; }
  .toolbar-periods { align-items: stretch; flex-direction: column; }
  /* The six periods stay on one line and scroll, rather than reflowing into a
     block of ragged buttons that no longer reads as one control. */
  .toolbar-periods .segmented { width: 100%; overflow-x: auto; }
  .toolbar-range, .toolbar-range .vostok-date, .toolbar-range .vostok-date--alt { width: 100%; min-width: 0; }
  .toolbar-fields { grid-template-columns: 1fr; }
  .toolbar-actions .btn { flex: 1; text-align: center; }
}

/* The back office's own error page. */
.error-page { max-width: 620px; margin: 8vh auto 0; text-align: left; }
.error-page h1 { margin: 8px 0 10px; font-size: 26px; letter-spacing: -.02em; }
.error-page p { margin: 0 0 22px; color: var(--muted-deep); font-size: 15px; line-height: 1.55; }
.error-page .actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* The passenger's photo, or their initials, beside the name on their card. */
.client-identity { display: flex; align-items: center; gap: 16px; }
.client-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  font-size: 22px;
  font-weight: 800;
  object-fit: cover;
}
img.client-avatar { border: 1px solid var(--fill-border); background: var(--fill); cursor: zoom-in; }

/* ------------------------------------------------- ActiveForm field groups */

/* `.card label` assumes the label wraps its input, and spaces itself for that.
   A field built by ActiveForm is a group — label, input, hint, error, one
   after another — so there the label sat 15px above its own input and the
   next field touched this one. In a group the label belongs to the input
   below it and the space goes between groups. */
.card .form-group { min-width: 0; margin: 0 0 16px; }
.card .form-group > label { display: block; margin: 0 0 7px; }
.card .form-group > .hint-block { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; font-weight: 500; }
.card .form-group > .help-block { margin: 6px 0 0; font-size: 12px; }
.card .form-group.required > label::after { content: ' *'; color: var(--danger); font-weight: 700; }

/* ------------------------------------------------------------ staff alerts
   The bell in the header: what the office has been told, and a short banner
   when something arrives while the page is open. */
.staff-alerts { position: relative; margin-left: auto; flex: none; }
.staff-alerts + .lang-switch { margin-left: 10px; }

/* The signed-in person, in the header: their name opens a small menu with
 * what they do to their own account. */
.profile-menu { position: relative; margin-left: 10px; min-width: 0; }
.profile-menu-button {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; max-width: 280px; padding: 0 12px;
  border: 1px solid var(--chrome-border); border-radius: 12px;
  background: var(--panel); color: var(--ink);
  font: 700 13.5px/1.2 inherit; cursor: pointer;
}
.profile-menu-button:hover { border-color: var(--ink); }
.profile-menu-button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.profile-menu-button[aria-expanded="true"] { border-color: var(--ink); }
.profile-menu-button .workspace-identity { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu-avatar { flex: none; color: var(--muted-deep); }
.profile-menu-caret { flex: none; transition: transform .15s ease; }
.profile-menu-button[aria-expanded="true"] .profile-menu-caret { transform: rotate(180deg); }
.profile-menu-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  width: max-content; min-width: 220px; max-width: min(320px, calc(100vw - 24px));
  padding: 6px; border: 1px solid var(--chrome-border); border-radius: 14px;
  background: var(--panel); box-shadow: 0 18px 44px rgba(28, 27, 23, .18);
}
.profile-menu-head { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--fill-border); }
.profile-menu-head strong { font-size: 13.5px; font-weight: 800; overflow-wrap: anywhere; }
.profile-menu-head span { font-size: 12px; color: var(--muted-deep); }
.profile-menu-form { margin: 0; }
.profile-menu-item {
  display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 9px;
  background: none; color: var(--ink); text-align: left; text-decoration: none;
  font: 600 13.5px/1.3 inherit; cursor: pointer;
}
.profile-menu-item:hover, .profile-menu-item:focus-visible { background: var(--fill); outline: none; }
.profile-menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--ink); }
@media (max-width: 760px) {
  /* The name does not fit beside the bell and the flags; the figure stands for it. */
  .profile-menu { margin-left: 6px; }
  .profile-menu-button { padding: 0 9px; gap: 4px; }
  .profile-menu-button .workspace-identity { display: none; }
}
@media (max-width: 520px) { .profile-menu-button { min-height: 36px; } .profile-menu-panel { position: fixed; top: 68px; right: 12px; } }
/* The header is one row of five things. On a phone the row was wider than the
 * screen: the account button kept its width while its box was squeezed to
 * nothing, so it hung off the right edge and every page scrolled sideways.
 * The button is never squeezed, and the row gives up what it can spare —
 * the gaps, and the flags beside UZ and RU — so the page title keeps room. */
.workspace-header > .profile-menu, .workspace-header > .staff-alerts { flex: none; }
@media (max-width: 520px) {
  /* Two classes: the operations sheet is loaded after this one and sets the
   * row's own gap and padding with one. */
  .main-column .workspace-header { gap: 8px; padding-left: 14px; padding-right: 14px; }
  .workspace-header .lang-switch img { display: none; }
  .workspace-header .lang-switch a { padding: 5px 9px; }
  .workspace-header .profile-menu, .workspace-header .staff-alerts + .lang-switch { margin-left: 0; }
}
.staff-alerts-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--chrome-border);
  border-radius: 12px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.staff-alerts-button:hover { border-color: var(--ink); }
.staff-alerts-button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.staff-alerts-button.has-unread { background: var(--yellow); border-color: var(--ink); }
.staff-alerts-button b {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font: 800 11px/20px var(--mono);
  text-align: center;
}
.staff-alerts-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  width: min(380px, calc(100vw - 24px));
  border: 1px solid var(--chrome-border);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: 0 18px 44px rgba(28, 27, 23, .18);
  overflow: hidden;
}
.staff-alerts-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--fill-border); }
.staff-alerts-head strong { font-size: 14px; font-weight: 800; }
.staff-alerts-head button { border: 0; background: none; padding: 4px 0; color: var(--muted-deep); font: 700 12.5px/1.2 inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.staff-alerts-head button:hover { color: var(--ink); }
.staff-alerts-list { max-height: min(60vh, 440px); overflow-y: auto; }
.staff-alerts-empty { margin: 0; padding: 18px 16px; color: var(--muted-deep); font-size: 13px; line-height: 1.5; }
.staff-alert { display: block; padding: 12px 16px 13px; border-bottom: 1px solid var(--fill-border); color: var(--ink); text-decoration: none; }
.staff-alert:last-child { border-bottom: 0; }
a.staff-alert:hover { background: var(--fill); }
.staff-alert.is-unread { box-shadow: inset 3px 0 0 var(--yellow-pressed); background: rgba(255, 237, 0, .08); }
.staff-alert strong { display: block; font-size: 13.5px; font-weight: 800; }
.staff-alert span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--ink); }
.staff-alert small { display: block; margin-top: 5px; font-family: var(--mono); font-size: 11.5px; color: var(--muted-deep); }
.staff-alert-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1300;
  display: block;
  width: min(380px, calc(100vw - 32px));
  padding: 14px 16px 15px;
  border-radius: 14px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 16px 40px rgba(28, 27, 23, .32), inset 4px 0 0 var(--yellow);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease;
}
.staff-alert-toast.show { opacity: 1; transform: none; }
.staff-alert-toast strong { display: block; font-size: 14px; font-weight: 800; color: var(--yellow); }
.staff-alert-toast span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.45; }
@media (prefers-reduced-motion: reduce) { .staff-alert-toast { transition: none; } }
@media (max-width: 520px) { .staff-alerts + .lang-switch { margin-left: 6px; } .staff-alerts-button { width: 36px; height: 36px; } }
/* On a phone the bell is in the middle of the header, so a panel hung from it
   would run off the left edge: it spans the screen under the header instead. */
@media (max-width: 640px) {
  .staff-alerts-panel { position: fixed; left: 12px; right: 12px; top: 68px; width: auto; }
}

/* ------------------------------------------------- tones, badges, wide lists */

/* A badge coloured by what a model says of itself (success, info, warning,
   danger) rather than by the name of one particular status. */
.status.success { background: var(--success-fill); border-color: transparent; color: var(--success); }
.status.warning { background: rgba(255, 237, 0, .22); border-color: transparent; color: var(--gold-text); }
.status.danger { background: var(--danger-fill); border-color: transparent; color: var(--danger); }
.status.neutral::before { opacity: .45; }

/* Several short labels in one cell: a vehicle's tariffs. */
.badge-row { display: flex; flex-wrap: wrap; gap: 4px; }
.mini-badge {
  display: inline-block;
  max-width: 100%;
  padding: 3px 8px;
  border: 1px solid var(--fill-border);
  border-radius: 6px;
  background: var(--fill);
  color: var(--muted-deep);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A value nobody has given yet. */
.table .unset, .detail-list .unset { color: var(--muted-soft, var(--muted)); font-weight: 500; }

/* Lists with many columns keep to the card: the widths are set, a long name
   is cut with an ellipsis and stays readable in its title. */
.table.vehicle-table { table-layout: fixed; min-width: 920px; }
.table.vehicle-table td { overflow-wrap: anywhere; }
.table .cell-line { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table.vehicle-table .status { padding: 5px 9px; gap: 6px; white-space: nowrap; }
.table.vehicle-table .btn { padding-left: 12px; padding-right: 12px; }
.table.vehicle-table th { white-space: normal; overflow-wrap: anywhere; }
.table.vehicle-table td:last-child { padding-left: 4px; padding-right: 4px; text-align: right; }

/* A field shown for one choice of another control. */
[data-visible-when][hidden] { display: none !important; }

/* The registry's word on a company: the number, its band, when it was asked. */
.tax-rating { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.tax-rating-score { font-variant-numeric: tabular-nums; font-weight: 800; }
.tax-note { margin: 10px 0 0; color: var(--muted-deep); font-size: 12.5px; line-height: 1.5; }

/* Cards that follow one another down a page, outside a grid. */
.card.stacked { margin-top: 16px; }

/* Promo codes: who a code is for */
.promo-assignment { border: 1px solid var(--fill-border, #E2E0D8); border-radius: 12px; padding: 14px 16px; margin: 0 0 18px; display: flex; flex-direction: column; gap: 10px; }
.promo-assignment legend { padding: 0 6px; font-weight: 600; }
/* A choice with a line of explanation under its words. `.card label` is a
   one-column grid made for a label above its field; here the box stands
   beside the words, at the size of a box. */
.card .promo-assignment label.promo-choice { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; row-gap: 3px; align-items: center; margin: 0; font-size: 14px; font-weight: 700; cursor: pointer; }
.card .promo-assignment label.promo-choice input { grid-column: 1; grid-row: 1; width: 18px; height: 18px; margin: 0; padding: 0; }
.card .promo-assignment label.promo-choice small { grid-column: 2; font-size: 12.5px; font-weight: 500; line-height: 1.45; opacity: .75; }
.promo-client { margin-left: 28px; max-width: 460px; }
.card .promo-client label.field { margin-bottom: 0; }
.promo-client[hidden] { display: none; }