/* ============================================================================
   DRIVR — Component styles. Depends on colors_and_type.css.
   Restyles the source Airtable kit's grammar (3px controls, glyph icons,
   choice tokens, record rows) into DRIVR's dark industrial theme.
   ============================================================================ */

/* ---- BUTTONS ------------------------------------------------------------- */
.btn {
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  height: 32px; padding: 0 14px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, transform .04s ease, color .12s ease;
  user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn .ic { width: 14px; height: 14px; }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-bright); }
.btn-primary:active { background: var(--accent-press); }

/* Communications / positive actions — SMS, e-mail, share (real-product green). */
.btn-comms { background: var(--green); color: #fff; }
.btn-comms:hover { background: var(--green-bright); }
.btn-comms:active { background: var(--green-press); }

/* Dark neutral action — "Add note", row Edit (real-product slate). */
.btn-dark { background: var(--ink-700); color: var(--paper); border-color: var(--line-strong); }
.btn-dark:hover { background: var(--ink-650); }

.btn-secondary { background: var(--ink-700); color: var(--paper); border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--ink-650); border-color: var(--line-hover); }
.btn-secondary:active { background: var(--ink-600); }

.btn-danger { background: transparent; color: var(--bad); border-color: rgba(242,73,92,0.45); }
.btn-danger:hover { background: var(--bad-dim); }

.btn-text { background: transparent; color: var(--paper-2); padding: 0 8px; }
.btn-text:hover { color: var(--paper); background: var(--ink-700); }

.btn-icon { width: 32px; padding: 0; justify-content: center; }
.btn-sm { height: 26px; font-size: 12px; padding: 0 10px; }
.btn-lg { height: 40px; font-size: 14px; padding: 0 18px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---- FORM CONTROLS ------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > .label { color: var(--paper-3); }

.input, .select {
  height: 32px; background: var(--ink-700); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); color: var(--paper); font-family: var(--font-body);
  font-size: 13px; padding: 0 11px; display: flex; align-items: center; gap: 8px;
  transition: border-color .12s ease, background .12s ease;
}
.input::placeholder { color: var(--paper-4); }
.input:hover, .select:hover { border-color: var(--line-hover); }
.input:focus, .input:focus-within, .select:focus { outline: none; border-color: var(--accent); background: var(--ink-750); }
.select { justify-content: space-between; cursor: pointer; }
.select .ic-chevron-down { color: var(--paper-3); width: 12px; height: 12px; }

/* Switch */
.switch { width: 36px; height: 20px; border-radius: var(--r-pill); background: var(--ink-600);
  position: relative; cursor: pointer; transition: background .15s ease; flex: none; border: 1px solid var(--line-strong); }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: var(--r-pill); background: var(--paper-2); transition: transform .15s ease, background .15s ease; }
.switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(16px); background: #fff; }

/* Segmented control */
.segmented { display: inline-flex; background: var(--ink-700); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); padding: 2px; gap: 2px; }
.segmented button { font-family: var(--font-body); font-weight: 600; font-size: 12px; color: var(--paper-3);
  background: transparent; border: none; border-radius: 2px; padding: 4px 12px; cursor: pointer; transition: all .12s; }
.segmented button[aria-selected="true"] { background: var(--ink-600); color: var(--paper); }
.segmented button:hover:not([aria-selected="true"]) { color: var(--paper-2); }

/* ---- STATUS PILLS & TOKENS ---------------------------------------------- */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px;
  border-radius: var(--r-sm); font-family: var(--font-body); font-weight: 700; font-size: 11px;
  letter-spacing: 0.04em; text-transform: uppercase; }
.pill .dot { width: 7px; height: 7px; border-radius: var(--r-pill); flex: none; }
.pill-ok   { background: var(--ok-dim);   color: var(--ok); }
.pill-warn { background: var(--warn-dim); color: var(--warn); }
.pill-bad  { background: var(--bad-dim);  color: var(--bad); }
.pill-neutral { background: var(--ink-700); color: var(--paper-2); }

/* Choice token (from source kit's record cells) — soft colored chip */
.token { display: inline-flex; align-items: center; height: 18px; padding: 0 8px; border-radius: var(--r-pill);
  font-family: var(--font-body); font-size: 12px; font-weight: 500; white-space: nowrap; }

/* Tier badge — solid, the loudest label on the page */
.tier-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 11px; border-radius: var(--r-sm);
  font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: -0.01em; color: #0B0C0E; }

/* Driver chip — avatar + name */
.driver { display: inline-flex; align-items: center; gap: 9px; }
.avatar { width: 28px; height: 28px; border-radius: var(--r-pill); flex: none; display: flex; align-items: center;
  justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 11px; color: #0B0C0E; }

/* ---- CARDS / SURFACES ---------------------------------------------------- */
.surface { background: var(--ink-800); border: 1px solid var(--line); border-radius: var(--r-md); }
.surface-raised { background: var(--ink-750); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-card); }

.stat-card { background: var(--ink-800); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.stat-card .top { display: flex; align-items: center; justify-content: space-between; }
.stat-card .val { font-family: var(--font-mono); font-weight: 600; font-size: 34px; letter-spacing: -0.02em; line-height: 1; }
.stat-card .delta { font-family: var(--font-mono); font-size: 12px; }
.delta-up { color: var(--ok); }
.delta-down { color: var(--bad); }

/* ---- SIDEBAR NAV ITEM ---------------------------------------------------- */
.navitem {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 9px 11px; border-radius: var(--r-sm); border: none; cursor: pointer;
  background: transparent; color: var(--paper-2);
  font-family: var(--font-body); font-weight: 500; font-size: 14px;
  transition: background .12s ease, color .12s ease;
}
.navitem:hover { background: var(--ink-700); color: var(--paper); }
.navitem.on { background: var(--accent-ghost); color: var(--accent); font-weight: 700; }

/* ---- METRIC ROWS + HEAT BARS --------------------------------------------- */
/* The DA-scorecard signature: a label on the left, a value on the right, with a
   green→yellow→red heat track behind it showing where the value sits. */
.metric-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; border-radius: var(--r-sm); position: relative; overflow: hidden;
}
.metric-row .m-label { font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--paper); z-index: 1; white-space: nowrap; }
.metric-row .m-sub   { font-family: var(--font-body); font-weight: 500; font-size: 12.5px; color: var(--paper-3); padding-left: 14px; z-index: 1; white-space: nowrap; }
.metric-row .m-val   { font-family: var(--font-mono); font-weight: 600; font-size: 13px; color: var(--paper); z-index: 1; white-space: nowrap; padding-left: 12px; }
/* heat fill: a REAL element behind the value, faded in from the left */
.heat-fill {
  position: absolute; right: 0; top: 4px; bottom: 4px; width: 46%;
  border-radius: var(--r-sm); opacity: 0.9; background: var(--heat);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 42%);
  mask-image: linear-gradient(90deg, transparent, #000 42%);
}
.heat-fill[data-kind="good"] { background: var(--heat-good); }
.heat-fill[data-kind="bad"]  { background: var(--heat-bad); }
.metric-row.has-heat .m-val { color: #0B0C0E; font-weight: 700; }

/* Standalone heat track (for a single bar with a marker) */
.heat-track { height: 7px; border-radius: 4px; background: var(--heat); position: relative; }
.heat-track .mark { position: absolute; top: -3px; width: 3px; height: 13px; border-radius: 2px; background: var(--paper); box-shadow: 0 0 0 2px var(--ink-900); }