/* Components. Every value here comes from tokens.css — no hardcoded colours.
 * Loaded after Bootstrap, so these rules win where they overlap. */

/* --- Bootstrap bridge ---------------------------------------------------- */
/* Bootstrap still provides the grid, tabs and dropdowns. Point its variables at our
   tokens so its own components stop looking like a different product. */
:root {
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-body-font-family: var(--font-ui);
  --bs-body-font-size: var(--text-body);
  --bs-body-line-height: var(--leading-normal);
  --bs-border-color: var(--color-border);
  --bs-border-radius: var(--radius-card);
  --bs-primary: var(--color-brand);
  --bs-link-color: var(--color-brand-text);
  --bs-link-hover-color: var(--color-brand);
  --bs-secondary-color: var(--color-text-2);
  --bs-emphasis-color: var(--color-text);
}

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

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--color-text);
}

h1, .h1 { font-size: var(--text-h1); font-weight: 200; }
h2, .h2 { font-size: var(--text-h2); }
h3, .h3, h4, h5, h6 { font-size: var(--text-h3); font-weight: 400; }

a { color: var(--color-brand-text); text-decoration-color: color-mix(in srgb, var(--color-brand) 40%, transparent); }
a:hover { color: var(--color-brand); }

code, pre, .mono { font-family: var(--font-mono); }

::selection {
  background-color: var(--color-selection-bg, var(--color-brand));
  color: var(--color-selection-text, var(--color-on-brand));
}

::-moz-selection {
  background-color: var(--color-selection-bg, var(--color-brand));
  color: var(--color-selection-text, var(--color-on-brand));
}

/* Labels, eyebrows and anything that names a thing rather than saying it. */
.eyebrow,
.label-mono {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 400;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.eyebrow { color: var(--color-brand-text); margin-bottom: var(--space-2); display: block; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

/* --- Shell --------------------------------------------------------------- */

.app-shell { display: flex; min-height: 100vh; }

.app-sidebar {
  width: 232px;
  flex-shrink: 0;
  background-color: var(--color-accent);
  color: var(--color-on-brand);
  padding: var(--space-6) var(--space-4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  white-space: nowrap;
  transition: width var(--transition-base), padding var(--transition-base);
}

html.sidebar-collapsed .app-sidebar {
  width: 0;
  padding-left: 0;
  padding-right: 0;
}

.app-sidebar-brand {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.25rem;
  letter-spacing: var(--tracking-tight);
  color: var(--color-on-brand);
  text-decoration: none;
  margin-bottom: var(--space-6);
  display: block;
}

/* Scrolls rather than clipping: the menu has grown to fifteen entries, and what fell off
   the bottom was the way out. */
.app-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.app-sidebar-link {
  color: color-mix(in srgb, var(--color-on-brand) 88%, transparent);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-card);
  font-size: var(--text-sm);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

/* Names a group of links without being clickable itself. */
.app-sidebar-section {
  padding: var(--space-3) var(--space-3) var(--space-1);
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--color-on-brand) 60%, transparent);
}

.app-sidebar-link:hover {
  background-color: color-mix(in srgb, var(--color-on-brand) 16%, transparent);
  color: var(--color-on-brand);
}

.app-sidebar-logout { margin-top: auto; padding-top: var(--space-4); }

.app-sidebar-logout-btn {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
}

.app-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.app-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.app-topbar-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-h2);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.app-topbar-user { color: var(--color-text-2); font-size: var(--text-sm); }
.app-topbar-tools { display: flex; align-items: center; gap: var(--space-3); }

.app-main { flex: 1; padding: var(--space-6); }

.app-sidebar-toggle,
.app-theme-toggle {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  color: var(--color-text-2);
  line-height: 1;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.app-sidebar-toggle:hover,
.app-theme-toggle:hover {
  background-color: var(--color-brand-subtle);
  border-color: var(--color-brand);
  color: var(--color-text);
}

/* --- Surfaces ------------------------------------------------------------ */

.panel,
.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
}

.panel { padding: var(--space-5) var(--space-6); }

.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: var(--space-3) var(--space-4);
}

.card-body { padding: var(--space-4); }

.card-content {
  background-color: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-4);
}

.list-group-item {
  background-color: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
}

/* --- Accordion bridge ---------------------------------------------------- */
.accordion {
  --bs-accordion-bg: var(--color-surface);
  --bs-accordion-color: var(--color-text);
  --bs-accordion-border-color: var(--color-border);
  --bs-accordion-border-radius: var(--radius-panel);
  --bs-accordion-inner-border-radius: var(--radius-panel);
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-btn-color: var(--color-text);
  --bs-accordion-active-bg: var(--color-surface-2);
  --bs-accordion-active-color: var(--color-text);
  --bs-accordion-btn-focus-box-shadow: none;
}

.accordion-item {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.accordion-button {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text);
  background-color: transparent;
  padding: var(--space-3) var(--space-4);
  box-shadow: none;
}

.accordion-button:not(.collapsed) {
  color: var(--color-text);
  background-color: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
  box-shadow: none;
}

.accordion-button:focus {
  box-shadow: none;
  border-color: var(--color-border);
}

[data-theme='dark'] .accordion-button::after {
  filter: invert(1) grayscale(100%);
}

/* --- Stat (KPI) ---------------------------------------------------------- */

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.stat-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.stat-value {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 200;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.stat-hint { font-size: var(--text-xs); color: var(--color-text-muted); }

.stat-trend { font-size: var(--text-xs); font-weight: 600; }
.stat-trend-up { color: var(--color-success-text); }
.stat-trend-down { color: var(--color-danger-text); }

/* --- Buttons ------------------------------------------------------------- */
/* Bootstrap's .btn keeps its layout duties; the look and the breathing room are ours.
   Adjacent controls never touch: siblings get their own gap. */

.btn {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-badge);
  padding: 0.5rem 0.9rem;
  border: 1px solid transparent;
  transition: background-color var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-sm { padding: 0.35rem 0.7rem; font-size: var(--text-label); }
.btn + .btn, .btn + form, form + .btn, form + form { margin-left: var(--space-2); }
.btn:focus-visible { box-shadow: var(--shadow-focus); outline: none; }

.btn-primary {
  background-color: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-on-brand);
}

.btn-primary:hover {
  background-color: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
  color: var(--color-on-brand);
}

.btn-outline-primary {
  background-color: transparent;
  border-color: var(--color-brand);
  color: var(--color-brand-text);
}

.btn-outline-primary:hover {
  background-color: var(--color-brand-subtle);
  border-color: var(--color-brand);
  color: var(--color-brand-text);
}

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

.btn-outline-secondary:hover,
.btn-secondary:hover {
  background-color: var(--color-brand-subtle);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.btn-outline-danger, .btn-danger {
  background-color: transparent;
  border-color: var(--color-danger-border);
  color: var(--color-danger-text);
}

.btn-outline-danger:hover, .btn-danger:hover {
  background-color: var(--color-danger-subtle);
  border-color: var(--color-danger);
  color: var(--color-danger-text);
}

.btn-success { background-color: var(--color-success); border-color: var(--color-success); color: var(--color-on-brand); }
.btn-link { color: var(--color-brand-text); text-transform: none; letter-spacing: normal; font-family: var(--font-ui); }

/* --- Badges -------------------------------------------------------------- */
/* Semantic by meaning, not decoration: an SLA breach must not look like a resolved case. */

.badge,
.badge-status {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-badge);
  padding: 0.25rem 0.5rem;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.badge-neutral, .text-bg-secondary, .text-bg-light {
  background-color: var(--color-neutral-subtle) !important;
  border-color: var(--color-neutral-border);
  color: var(--color-neutral-text) !important;
}

.badge-brand { background-color: var(--color-brand-subtle); border-color: var(--color-info-border); color: var(--color-brand-text); }

.badge-success, .text-bg-success {
  background-color: var(--color-success-subtle) !important;
  border-color: var(--color-success-border);
  color: var(--color-success-text) !important;
}

.badge-warning, .text-bg-warning {
  background-color: var(--color-warning-subtle) !important;
  border-color: var(--color-warning-border);
  color: var(--color-warning-text) !important;
}

.badge-danger, .text-bg-danger {
  background-color: var(--color-danger-subtle) !important;
  border-color: var(--color-danger-border);
  color: var(--color-danger-text) !important;
}

.badge-info, .text-bg-info {
  background-color: var(--color-info-subtle) !important;
  border-color: var(--color-info-border);
  color: var(--color-info-text) !important;
}

/* A dot carries the state at a glance when the label is long. */
.badge-dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: currentColor;
  flex-shrink: 0;
}

/* --- Alerts -------------------------------------------------------------- */

.alert {
  border-radius: var(--radius-card);
  border-width: 1px;
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-4);
}

.alert-info { background-color: var(--color-info-subtle); border-color: var(--color-info-border); color: var(--color-info-text); }
.alert-success { background-color: var(--color-success-subtle); border-color: var(--color-success-border); color: var(--color-success-text); }
.alert-warning { background-color: var(--color-warning-subtle); border-color: var(--color-warning-border); color: var(--color-warning-text); }
.alert-danger { background-color: var(--color-danger-subtle); border-color: var(--color-danger-border); color: var(--color-danger-text); }
.alert-light { background-color: var(--color-surface-2); border-color: var(--color-border); color: var(--color-text-2); }

/* --- Tables -------------------------------------------------------------- */

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--color-text);
  border-color: var(--color-border);
  font-size: var(--text-sm);
}

.table > thead th {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 400;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-3);
  background-color: transparent;
}

.table > tbody td, .table > tbody th {
  border-color: var(--color-border);
  padding: var(--space-3);
  vertical-align: middle;
}

.table-hover > tbody > tr:hover > * {
  background-color: var(--color-brand-subtle);
  color: var(--color-text);
}

.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Forms --------------------------------------------------------------- */

.form-control, .form-select {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  padding: 0.4rem 0.65rem;
  user-select: text;
  -webkit-user-select: text;
}

#composer-editor,
#composer-body {
  user-select: text !important;
  -webkit-user-select: text !important;
  cursor: text;
}

.form-control::selection,
textarea::selection,
input::selection,
[contenteditable="true"]::selection,
#composer-editor::selection,
#composer-body::selection {
  background-color: var(--color-selection-bg, var(--color-brand));
  color: var(--color-selection-text, var(--color-on-brand));
}

.form-control::-moz-selection,
textarea::-moz-selection,
input::-moz-selection,
[contenteditable="true"]::-moz-selection,
#composer-editor::-moz-selection,
#composer-body::-moz-selection {
  background-color: var(--color-selection-bg, var(--color-brand));
  color: var(--color-selection-text, var(--color-on-brand));
}

/* The caret is a background image pinned to the right edge, and Bootstrap keeps it clear
   of the text with padding-right. The shorthand above wipes that out for selects, so the
   text of a narrow one runs underneath the arrow. Give the room back. */
.form-select {
  padding-right: 2.25rem;
  background-position: right 0.65rem center;
}

.form-select-sm { padding-right: 2rem; background-position: right 0.5rem center; }

/* Bootstrap bakes the caret's colour into an SVG data URI, dark grey for a light page.
   On the dark theme that is a dark arrow on a dark field, so swap the whole image for
   one drawn in the muted text colour. Kept in sync with --color-text-2 by hand: a data
   URI cannot read a custom property. */
:root[data-theme='dark'] .form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23bcac97' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-control:focus, .form-select:focus {
  background-color: var(--color-brand-subtle);
  border-color: var(--color-brand);
  box-shadow: var(--shadow-focus);
  color: var(--color-text);
}

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

.form-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

/* --- Budget grid --------------------------------------------------------- */

.budget-grid th[scope='row'] { min-width: 11rem; }
.budget-hotel { display: block; font-weight: 600; color: var(--color-text); }
.budget-grid .res-hint { display: block; font-size: var(--text-xs); }

.budget-currency {
  width: 4.5rem;
  margin-top: var(--space-1);
  text-transform: uppercase;
}

.budget-cell { min-width: 6.5rem; vertical-align: top; }

.budget-input {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* The cell is tinted by consumption, so an overspent month is visible without reading. */
.budget-cell.is-warning .budget-input { border-color: var(--color-warning-border); background-color: var(--color-warning-subtle); }
.budget-cell.is-critical .budget-input { border-color: var(--color-danger-border); background-color: var(--color-danger-subtle); }

.budget-used {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--text-xs);
  line-height: 1.2;
  min-height: 1.2em;
  color: var(--color-text-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* A month with no spending still occupies its line, so twelve cells stay level. */
.budget-used:empty::after { content: "a0"; }

.budget-total { font-weight: 600; font-variant-numeric: tabular-nums; }

.budget-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

/* --- Approval box -------------------------------------------------------- */

.approve-box {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-card);
  background-color: var(--color-warning-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.approve-head { display: flex; align-items: center; gap: var(--space-2); }
.approve-actions { display: flex; gap: var(--space-2); }

/* --- Searchable select --------------------------------------------------- */
/* Added by static/js/combobox.js to any select that outgrows 15 options. */

.combo { display: flex; flex-direction: column; gap: var(--space-1); min-width: 12rem; }

.combo-search {
  font-family: var(--font-ui);
  background-image: none;
}

/* While filtering, show more of the list so the matches are visible at once. */
.combo.is-filtering select { min-height: 7rem; }

/* --- Tabs ---------------------------------------------------------------- */

.nav-tabs { border-bottom: 1px solid var(--color-border); gap: var(--space-1); }

.nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: var(--space-3) var(--space-4);
}

.nav-tabs .nav-link:hover { color: var(--color-text-2); background-color: var(--color-brand-subtle); }

.nav-tabs .nav-link.active {
  background-color: transparent;
  color: var(--color-text);
  border-bottom-color: var(--color-brand);
}

/* --- Dashboard ----------------------------------------------------------- */

.dash-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.dash-kpis .panel { padding: var(--space-4) var(--space-5); }

.stat-value-sep { color: var(--color-text-muted); margin: 0 0.15em; font-weight: 200; }
.stat-unit { font-size: 1rem; color: var(--color-text-muted); margin-left: 0.15em; font-family: var(--font-ui); }

.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--space-4);
  align-items: start;
}

/* Two columns wide wherever the grid has room for it. */
.dash-wide { grid-column: 1 / -1; }

.dash-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
}

/* Charts need a bounded box: Chart.js grows to fill its parent. */
.chart-frame { position: relative; height: 240px; }
.chart-frame-tall { height: 300px; }

.chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.dash-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}

.dash-figures dt {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 400;
}

.dash-figures dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 200;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.dash-costs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.dash-cost {
  font-size: var(--text-body);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.dash-cost em { font-style: normal; color: var(--color-text-muted); font-size: var(--text-xs); }

/* Meters: consumption against a budget, coloured by threshold. */
.meter-row + .meter-row { margin-top: var(--space-3); }

.meter-head {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.meter-value { font-variant-numeric: tabular-nums; font-weight: 600; }

.meter {
  height: 8px;
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-2);
  overflow: hidden;
}

.meter-fill { display: block; height: 100%; border-radius: var(--radius-pill); }
.meter-fill.is-ok { background-color: var(--color-success); }
.meter-fill.is-warning { background-color: var(--color-warning); }
.meter-fill.is-critical { background-color: var(--color-danger); }

.meter-foot { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 0.15rem; }

.dash-alerts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
}

.alert-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; }

.alert-list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

.alert-list li:first-child { border-top: none; }
.alert-case { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-2); }
.alert-subject { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text); }
.alert-age { color: var(--color-text-muted); font-size: var(--text-xs); white-space: nowrap; }

.dash-timestamp { display: block; margin-top: var(--space-4); color: var(--color-text-muted); }

/* --- Reports ------------------------------------------------------------- */

/* Filters live in one row above the charts they control. */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
}

.filter-field { display: flex; flex-direction: column; gap: 0.15rem; }
.filter-field .form-label { margin-bottom: 0; }

.filter-stamp { margin-left: auto; color: var(--color-text-muted); }
.filter-stamp.is-stale { color: var(--color-warning-text); }

.report-actions { display: flex; gap: var(--space-2); }

.report-tables { margin-top: var(--space-4); }

.report-table-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-5);
}

.report-table-grid .table { margin-top: var(--space-2); margin-bottom: 0; }

/* --- Case header --------------------------------------------------------- */

.case-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.case-head-main { min-width: 0; }

.case-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: 200;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--color-text);
  overflow-wrap: anywhere;
}

/* Facts read as a row of separated items rather than a run-on line of dots. */
.case-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-2);
}

.case-facts > span { position: relative; }

.case-facts > span + span::before {
  content: '';
  position: absolute;
  left: calc(var(--space-2) * -1);
  top: 0.45em;
  width: 3px;
  height: 3px;
  border-radius: var(--radius-pill);
  background-color: var(--color-border-strong);
}

.case-head-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
}

/* --- Reservation card ---------------------------------------------------- */

.res-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.res-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-5) var(--space-5);
  background: linear-gradient(180deg, var(--color-surface-2), var(--color-surface));
  border-bottom: 1px solid var(--color-border);
}

.res-guest {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.res-subline { display: flex; flex-wrap: wrap; gap: var(--space-1); }

.res-chip {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.06em;
  color: var(--color-text-2);
  white-space: nowrap;
}

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

.res-status { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.res-state {
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-brand-subtle);
  border: 1px solid var(--color-info-border);
  color: var(--color-brand-text);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.res-section { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border); }
.res-section:first-of-type { border-top: none; }

.res-section-title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 400;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.res-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3) var(--space-5);
}

.res-field { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }

.res-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.res-value { font-size: var(--text-sm); color: var(--color-text); overflow-wrap: anywhere; }
.res-amount { font-variant-numeric: tabular-nums; font-weight: 600; }
.res-hint { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 400; }

.res-comments {
  margin: 0;
  padding: var(--space-3);
  max-height: 16rem;
  overflow: auto;
  background-color: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-2);
  white-space: pre-wrap;
}

.res-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-surface-2);
}

.res-meta { font-size: var(--text-xs); color: var(--color-text-muted); }
.res-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* --- Email thread -------------------------------------------------------- */

.email-thread-item { border-top: 1px solid var(--color-border); padding: var(--space-4) 0; }
.email-thread-item:first-child { border-top: none; padding-top: 0; }

.email-message-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.email-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background-color: var(--color-accent);
  color: var(--color-on-brand);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

.email-meta { flex: 1; min-width: 0; }
.email-from { font-weight: 600; color: var(--color-text); overflow-wrap: anywhere; }

.email-direction,
.email-to,
.email-date,
.email-snippet {
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.email-date { flex-shrink: 0; white-space: nowrap; }

.email-body {
  font-size: var(--text-body);
  line-height: var(--leading-loose);
  color: var(--color-text);
  overflow-x: auto;
}

.email-body img { max-width: 100%; height: auto; }
.email-body table { max-width: 100%; }

.email-body blockquote {
  margin: var(--space-2) 0 var(--space-2) var(--space-1);
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-border);
  color: var(--color-text-2);
}

.email-body-plain { overflow-wrap: anywhere; }

.email-collapsed > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  list-style: none;
  padding: var(--space-1) 0;
}

.email-collapsed > summary:hover { background-color: var(--color-surface-2); border-radius: var(--radius-card); }
.email-collapsed > summary .email-avatar { width: 26px; height: 26px; font-size: var(--text-xs); }
.email-collapsed > summary .email-snippet { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.email-attachments { margin-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2); }

.email-attachment {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  background-color: var(--color-surface-2);
  text-decoration: none;
  color: var(--color-text-2);
}

.email-attachment.is-clean:hover {
  background-color: var(--color-brand-subtle);
  border-color: var(--color-brand);
  color: var(--color-text);
}

/* Not cleared: readable, obviously inert, and its reason stated. */
.email-attachment.is-pending { color: var(--color-text-muted); }
.email-attachment.is-suspicious { border-color: var(--color-warning-border); background-color: var(--color-warning-subtle); color: var(--color-warning-text); }
.email-attachment.is-infected { border-color: var(--color-danger-border); background-color: var(--color-danger-subtle); color: var(--color-danger-text); }

.attachment-state {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-left: 0.35rem;
}

/* A message answered on someone else's behalf, not the guest's: the left border and
   tinted background make it impossible to mistake for the guest's own words. */
.email-message.is-third-party {
  border-left: 3px solid var(--color-warning-border);
  background-color: var(--color-warning-subtle);
  padding-left: var(--space-3);
}

.email-third-party {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-warning-text);
}

.email-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* Content editor — one long form of blocks, so each block needs air around it
   and its placeholder hint has to read as a hint, not as part of the text. */
.content-editor { display: grid; gap: var(--space-4); }

.content-block { display: grid; gap: var(--space-2); }
.content-block .res-hint { font-family: var(--font-mono); }

.content-error {
  font-size: var(--text-xs);
  color: var(--color-danger-text);
}

.content-actions { display: flex; align-items: center; gap: var(--space-3); }

/* The preview frame: tall enough for a whole letter without scrolling inside it. */
.content-preview {
  width: 100%;
  height: 40rem;
  margin-top: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background-color: var(--color-surface);
}

.content-history { margin-top: var(--space-5); }
.content-history .table { margin-bottom: 0; }

/* Quality review: the guest's words and the judgement side by side, stacking on
   narrow screens where reading beats comparing. */
.qa-review { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }

@media (min-width: 62em) {
  .qa-review { grid-template-columns: 3fr 2fr; align-items: start; }
}

.qa-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  max-height: 22rem;
  overflow: auto;
  background-color: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
}

.qa-mine-card { margin-bottom: var(--space-4); }
.qa-mine-card .table { margin: var(--space-3) 0; }

.app-topbar-logout { display: inline-flex; }

/* Tabs over the case list: the queue's own shape, not Bootstrap's default blue. */
.case-tabs { border-bottom: 1px solid var(--color-border); gap: var(--space-1); }

.case-tabs .nav-link {
  color: var(--color-text-2);
  border: 1px solid transparent;
  border-radius: var(--radius-control) var(--radius-control) 0 0;
  font-size: var(--text-sm);
}

.case-tabs .nav-link:hover { background-color: var(--color-brand-subtle); color: var(--color-text); }

.case-tabs .nav-link.active {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  border-bottom-color: var(--color-surface);
  color: var(--color-text);
  font-weight: 600;
}

/* An embedded picture we will not render: says why, instead of a broken icon. */
.email-image-blocked {
  display: inline-block;
  min-width: 8rem;
  min-height: 2rem;
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-card);
  background-color: var(--color-surface-2);
}

.email-image-blocked::after {
  content: "Image not shown: pending or refused by the scanner";
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* --- Error pages (400, 403, 404, 500, 503) ------------------------------ */

.error-page-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 12rem);
  padding: var(--space-8) var(--space-4);
  text-align: center;
}

.error-card {
  max-width: 40rem;
  width: 100%;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-8) var(--space-6);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}

.error-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-brand), var(--color-accent), var(--color-brand));
}

.error-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-2);
  border: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-brand-text);
  margin-bottom: var(--space-3);
}

.error-code {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 12vw, 7.5rem);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-brand-text);
  margin-bottom: var(--space-2);
  user-select: none;
}

.error-title {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: 300;
  color: var(--color-text);
  margin-bottom: var(--space-3);
  line-height: var(--leading-tight);
}

.error-description {
  font-size: var(--text-body);
  color: var(--color-text-2);
  line-height: var(--leading-normal);
  max-width: 32rem;
  margin: 0 auto var(--space-6);
}

.error-context {
  background-color: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  word-break: break-all;
  margin-bottom: var(--space-6);
  display: inline-block;
  max-width: 100%;
}

.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  align-items: center;
  margin-bottom: var(--space-4);
}

.error-footer {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-family: var(--font-ui);
}

/* --- Duplicate Warning Alert (Collapsible) -------------------------------- */
.duplicate-warning-header {
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}

.duplicate-warning-header:hover {
  text-decoration: none;
}

.duplicate-warning-header .collapse-chevron {
  transition: transform 0.2s ease-in-out;
}

.duplicate-warning-header[aria-expanded="true"] .collapse-chevron {
  transform: rotate(180deg);
}

.duplicate-warning-header[aria-expanded="true"] .collapse-label-show {
  display: none !important;
}

.duplicate-warning-header[aria-expanded="true"] .collapse-label-hide {
  display: inline !important;
}

.duplicate-warning-header[aria-expanded="false"] .collapse-label-show {
  display: inline !important;
}

.duplicate-warning-header[aria-expanded="false"] .collapse-label-hide {
  display: none !important;
}

/* --- Compensation and modification card anchor target highlight ----------- */
div[id^="comp-"]:target {
  border-color: var(--color-brand) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 30%, transparent) !important;
  animation: compTargetPulse 2.5s ease-out;
}

@keyframes compTargetPulse {
  0% {
    background-color: color-mix(in srgb, var(--color-brand) 15%, transparent);
  }
  100% {
    background-color: transparent;
  }
}