/*
 * OPS//HUB component library.
 *
 * Class names mirror the rendered Style Tile HTML
 * (Vertex OPS HUB / OPS HUB  Style Tile / OPS-HUB Style Tile.html)
 * so markup composes 1:1 against the visual reference. Token values
 * come from tokens.css (sourced from OPSHUB_design_tokens_v2.md).
 *
 * Components grouped: buttons, badges (division), pills (status),
 * fields (form), kpi-tile, alerts.
 */

/* ============================================================
 * Buttons (per design doc § Buttons)
 * ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  height: 36px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 0.1s ease, background 0.1s ease;
}

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

.btn-primary {
  background: var(--primary);
  color: var(--text-inverse);
  border-color: var(--primary);
}
.btn-primary:hover:not(:disabled) {
  filter: brightness(1.08);
}

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

.btn-accent {
  background: var(--accent);
  color: var(--text-inverse);
  border-color: var(--accent);
}
.btn-accent:hover:not(:disabled) {
  filter: brightness(1.08);
}

.btn-danger {
  background: var(--danger);
  color: var(--text-inverse);
  border-color: var(--danger);
}
.btn-danger:hover:not(:disabled) {
  filter: brightness(1.08);
}

.btn-ghost {
  background: transparent;
  color: var(--primary);
  border-color: transparent;
}
.btn-ghost:hover:not(:disabled) {
  background: var(--primary-light);
}

/* ============================================================
 * Status pills (per design doc § Status Pills)
 * ============================================================ */

.pill {
  display: inline-block;
  padding: 2px var(--space-3);
  border-radius: var(--radius-xl);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.6;
  white-space: nowrap;
}

.pill-draft {
  background: var(--surface-alt);
  color: var(--text-muted);
}
.pill-new {
  background: var(--info-light);
  color: var(--info);
}
.pill-completed {
  background: var(--primary-light);
  color: var(--primary);
}
.pill-ready {
  background: var(--warning-light);
  color: var(--warning);
}
.pill-closed {
  background: var(--success-light);
  color: var(--success);
}
.pill-pushed {
  background: var(--success);
  color: var(--text-inverse);
}
.pill-failed {
  background: var(--danger-light);
  color: var(--danger);
}

/* ============================================================
 * Division badges (per design doc § Division Badges)
 *
 * CMT and Marrero use 18% alpha tints of chart-indigo / chart-violet
 * for the background, with the matching solid color for the text.
 * ============================================================ */

.badge {
  display: inline-block;
  padding: 2px var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.6;
  white-space: nowrap;
}

.badge-bwc {
  background: var(--primary-light);
  color: var(--primary);
}
.badge-cmt {
  background: rgba(82, 101, 165, 0.18); /* chart-indigo @ 18% alpha */
  color: var(--chart-indigo);
}
.badge-mar {
  background: rgba(133, 96, 168, 0.18); /* chart-violet @ 18% alpha */
  color: var(--chart-violet);
}

/* ============================================================
 * Form fields (per design doc § Form Fields)
 *
 * Yellow editable + pink calculated convention preserved from V1.
 * Required: * suffix on label. Errors: danger text + danger border.
 * ============================================================ */

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

.field-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.field-required::after {
  content: " *";
  color: var(--text-muted);
}

.field-input {
  height: 36px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text);
  border: 1px solid var(--input-border);
  background: var(--input-bg);
}

.field-input:focus {
  outline: 2px solid var(--info);
  outline-offset: -1px;
}

.field-input.numeric {
  font-family: var(--font-mono);
  text-align: right;
}

/* Calculated (read-only, system-computed) field */
.field-conv {
  height: 36px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  border: 1px solid var(--calc-border);
  background: var(--calc-bg);
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* The ƒ icon prefix on calc field labels per design doc */
.field-label.calc::before {
  content: "ƒ ";
  color: var(--text-muted);
  font-style: italic;
  margin-right: 2px;
}

/* Field error message (sits under the input) */
.field-err {
  font-size: 11px;
  color: var(--danger);
  margin-top: var(--space-1);
}

/* Error state on the input itself */
.field-input.has-error,
.field-conv.has-error {
  border-color: var(--danger);
}

/* Helper text under an input — V41 prototype caption pattern.
 * Used for things like the ASTM T.8 explanation block under the
 * Lbs / US Gallon calc field. */
.field-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: var(--space-1);
  line-height: 1.35;
}

/* Inline label suffix used by both `unit` (editable) and
 * `annotation` (calc) — same visual treatment per V41. Renders
 * inside the label as a muted, normal-case span. */
.field-label-unit,
.field-annotation {
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-muted);
}

/* Section label inside a card body — V41's color-coded
 * `—— Service Address ——` headers. Used by Customer Setup to group
 * fields within a single card. */
.section-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: var(--space-3) 0 var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--border);
}

/* ============================================================
 * Reports — V41 parity additions (issue #111)
 * ============================================================ */

/* Totals row at the bottom of the results table. Slightly darker
 * background + bold contents, mirroring V41 line 7050.
 */
.reports-totals-row td {
  background: var(--surface2, var(--surface));
  border-top: 2px solid var(--border);
  font-weight: 600;
}

/* "Active" badge on the saved-report row whose config is loaded
 * into the builder — V41 line 7317. Distinct color so it doesn't
 * blend with `shared`/`owner` chips. */
.badge.badge-active {
  background: var(--accent2, var(--info, #4f46e5));
  color: #fff;
}

/* Subtle highlight on the active saved-report row. */
.reports-saved-row-active > td {
  background: rgba(79, 70, 229, 0.06);
}

/* Per-row detail line under the report name — V41 lines 7318-7320. */
.reports-saved-detail {
  font-size: 11px;
  margin-top: 2px;
}

/* Inline date-edit toggle on each saved-report row. <details>
 * collapses by default; the form expands inline when the user
 * clicks "Edit Dates". */
.reports-edit-dates-toggle {
  display: inline-block;
  margin-left: var(--space-2);
}

.reports-edit-dates-form {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-2);
  padding: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.reports-edit-dates-form .field-input {
  width: 8.5em;
}

/* ============================================================
 * KPI Tile (per design doc § KPI Stat Card)
 *
 * Vertical accent strip on left edge, mono numeric value, optional
 * sub-line. Default accent uses --primary; override via the data-accent
 * attribute or the variant class for division-colored tiles.
 * ============================================================ */

.kpi-tile {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.kpi-tile::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--primary);
}

.kpi-tile.accent-success::before { background: var(--success); }
.kpi-tile.accent-warning::before { background: var(--warning); }
.kpi-tile.accent-danger::before { background: var(--danger); }
.kpi-tile.accent-accent::before { background: var(--accent); }

.kpi-tile-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 500;
}

.kpi-tile-value {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 700;
  margin-top: var(--space-2);
  color: var(--primary);
  line-height: 1.1;
}

.kpi-tile.accent-success .kpi-tile-value { color: var(--success); }
.kpi-tile.accent-warning .kpi-tile-value { color: var(--warning); }
.kpi-tile.accent-danger .kpi-tile-value { color: var(--danger); }
.kpi-tile.accent-accent .kpi-tile-value { color: var(--accent); }

.kpi-tile-sub {
  margin-top: var(--space-1);
  font-size: 12px;
  color: var(--text-muted);
}

/* ============================================================
 * Alerts / Banners (per design doc § Alert / Banner)
 *
 * radius-md, 12x16 padding, left-border 3px solid, color pair per
 * variant. Use sparingly — flash messages at top of screen.
 * ============================================================ */

.alert {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border-left: 3px solid;
  font-size: 13px;
}

.alert-info {
  background: var(--info-light);
  border-left-color: var(--info);
  color: var(--info);
}
.alert-success {
  background: var(--success-light);
  border-left-color: var(--success);
  color: var(--success);
}
.alert-warning {
  background: var(--warning-light);
  border-left-color: var(--warning);
  color: var(--warning);
}
.alert-danger {
  background: var(--danger-light);
  border-left-color: var(--danger);
  color: var(--danger);
}

/* ============================================================
 * Design-system reference page layout
 * ============================================================ */

.ds-section {
  margin-bottom: var(--space-6);
}

.ds-section h2 {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--primary);
  margin: 0 0 var(--space-2);
}

.ds-section .ds-description {
  color: var(--text-muted);
  font-size: 12px;
  margin-bottom: var(--space-4);
  max-width: 800px;
}

.ds-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.ds-row + .ds-row {
  margin-top: var(--space-3);
}

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

.ds-grid-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.ds-grid-alerts {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}