/* =============================================================================
   ServiceResQ — Component Layer
   =============================================================================
   Reusable, token-driven components (the "First-Responder" system). Loads after
   tokens.css. Zero hardcoded colors/sizes/shadows — every value is a var(--*).
   Includes the Bootstrap 5.3 component-var remap (so .btn-primary / links pick
   up the brand crimson, which :root --bs-primary alone does NOT reach).
   ============================================================================= */

/* ============================ BASE ======================================== */
body.srq {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Base element styles use :where() so they carry near-zero specificity —
   component + page classes (.srq-btn-primary, .srq-lp-h1, .dk-brand…) win
   naturally without specificity fights. */
:where(body.srq) h1, :where(body.srq) h2, :where(body.srq) h3, :where(body.srq) h4, :where(body.srq) h5 {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-tight);
  color: var(--color-text);
  margin: 0;
}
.srq-display { font-family: var(--font-family-display); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-tight); }
:where(body.srq) a { color: var(--color-text-link); text-decoration: none; transition: color var(--transition-fast); }
:where(body.srq) a:hover { color: var(--color-text-link-hover); }
.srq :focus-visible { outline: none; box-shadow: var(--focus-ring-default); border-radius: var(--radius-sm); }

.srq-muted { color: var(--color-text-muted); }
.srq-subtle { color: var(--color-text-subtle); }
.srq-mono { font-family: var(--font-family-mono); }
.srq-num { font-family: var(--font-family-display); font-weight: var(--font-weight-extrabold); font-variant-numeric: tabular-nums; }

/* ===================== BOOTSTRAP 5.3 COMPONENT-VAR REMAP ================== */
/* :root --bs-primary never reaches .btn-primary / .text-primary / links — these
   explicit component blocks are required (see the BS5.3 remap gotcha). */
:root {
  --bs-primary: #C8102E;
  --bs-primary-rgb: 200, 16, 46;
  --bs-link-color: #C8102E;
  --bs-link-hover-color: #A60D26;
  --bs-link-color-rgb: 200, 16, 46;
  --bs-border-radius: 3px;
  --bs-border-radius-sm: 3px;
  --bs-border-radius-lg: 4px;
  --bs-body-font-family: 'Inter', system-ui, sans-serif;
}
.srq .text-primary { color: var(--color-primary) !important; }
.srq .bg-primary { background-color: var(--color-primary) !important; }
.srq .btn-primary {
  --bs-btn-bg: var(--color-primary); --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary-hover); --bs-btn-hover-border-color: var(--color-primary-hover);
  --bs-btn-active-bg: var(--color-primary-active); --bs-btn-active-border-color: var(--color-primary-active);
  --bs-btn-disabled-bg: var(--color-primary); --bs-btn-disabled-border-color: var(--color-primary);
}

/* ============================ BUTTONS ===================================== */
.srq-btn {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-semibold);
  font-size: 0.84375rem; /* 13.5px */
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0 13px;
  height: var(--btn-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  white-space: nowrap; text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.srq-btn i, .srq-btn svg { width: 15px; height: 15px; font-size: 13px; }
.srq-btn-primary { background: var(--color-primary); color: var(--color-on-primary); box-shadow: 0 1px 2px rgba(200,16,46,.35); }
.srq-btn-primary:hover { background: var(--color-primary-hover); color: #fff; }
.srq-btn-primary:active { background: var(--color-primary-active); }
.srq-btn-primary.is-grad { background: var(--grad-crimson); }
.srq-btn-secondary { background: var(--srq-graphite-800); color: #fff; }
.srq-btn-secondary:hover { background: var(--srq-graphite-900); color: #fff; }
.srq-btn-outline { background: #fff; color: var(--srq-graphite-800); border-color: var(--color-border-strong); }
.srq-btn-outline:hover { background: var(--srq-graphite-50); border-color: var(--srq-graphite-400); color: var(--srq-graphite-900); }
.srq-btn-ghost { background: transparent; color: var(--srq-graphite-700); }
.srq-btn-ghost:hover { background: var(--srq-graphite-100); color: var(--srq-graphite-900); }
.srq-btn-amber { background: var(--srq-amber); color: var(--srq-graphite-900); font-weight: var(--font-weight-bold); }
.srq-btn-amber:hover { background: var(--srq-amber-hover); color: var(--srq-graphite-900); }
.srq-btn-danger { background: var(--color-danger); color: #fff; }
.srq-btn-danger:hover { background: var(--color-danger-hover); color: #fff; }
.srq-btn-glass { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.22); }
.srq-btn-glass:hover { background: rgba(255,255,255,.18); color: #fff; }
.srq-btn[disabled], .srq-btn.is-disabled { background: var(--color-disabled-bg); color: var(--color-disabled); cursor: not-allowed; box-shadow: none; border-color: transparent; }
.srq-btn-sm { height: var(--btn-height-sm); font-size: var(--font-size-xs); padding: 0 10px; }
.srq-btn-lg { height: var(--btn-height-lg); font-size: var(--font-size-md); padding: 0 18px; }
.srq-btn-block { width: 100%; }

/* ============================ FORMS ======================================= */
.srq-field { display: block; }
.srq-field > label { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); margin-bottom: 5px; }
.srq-input, .srq-select, .srq-textarea {
  width: 100%; height: var(--input-height);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius);
  padding: 0 11px; font-family: var(--font-family-body); font-size: 0.84375rem;
  color: var(--color-text); background: #fff;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.srq-textarea { height: auto; padding: 9px 11px; resize: vertical; }
.srq-input::placeholder, .srq-textarea::placeholder { color: var(--color-text-subtle); }
.srq-input:focus, .srq-select:focus, .srq-textarea:focus, .srq-input.is-focus {
  outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light);
}
.srq-input.is-error, .srq-select.is-error { border-color: var(--color-danger); box-shadow: 0 0 0 3px rgba(220,38,38,.16); }
.srq-input:disabled { background: var(--color-disabled-bg); color: var(--color-text-subtle); }
.srq-error { color: var(--color-danger-text); font-size: var(--font-size-xs); margin-top: 5px; font-weight: var(--font-weight-medium); }

/* ============================ CARDS ======================================= */
.srq-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.srq-card-hd { padding: 10px 14px; border-bottom: 1px solid var(--color-border); font-weight: var(--font-weight-bold); font-size: var(--font-size-base); display: flex; align-items: center; justify-content: space-between; }
.srq-card-bd { padding: var(--card-padding-y) var(--card-padding-x); }
.srq-card-accent { border-top: var(--stroke-width-accent) solid var(--color-primary); }
.srq-card-hd-brand { background: var(--grad-crimson); color: #fff; border-bottom: none; }

/* ============================ PILLS / BADGES ============================== */
.srq-pill { display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 7px; border-radius: var(--radius-pill); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); border: 1px solid transparent; line-height: 1; }
.srq-pill::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-circle); background: currentColor; }
.srq-pill-open      { background: var(--badge-open-bg);      color: var(--badge-open-text);      border-color: var(--badge-open-bd); }
.srq-pill-scheduled { background: var(--badge-scheduled-bg); color: var(--badge-scheduled-text); border-color: var(--badge-scheduled-bd); }
.srq-pill-progress  { background: var(--badge-progress-bg);  color: var(--badge-progress-text);  border-color: var(--badge-progress-bd); }
.srq-pill-complete  { background: var(--badge-complete-bg);  color: var(--badge-complete-text);  border-color: var(--badge-complete-bd); }
.srq-pill-invoiced  { background: var(--badge-invoiced-bg);  color: var(--badge-invoiced-text);  border-color: var(--badge-invoiced-bd); }
.srq-pill-cancelled { background: var(--badge-cancelled-bg); color: var(--badge-cancelled-text); border-color: var(--badge-cancelled-bd); }
.srq-pill-draft     { background: var(--badge-draft-bg);     color: var(--badge-draft-text);     border-color: var(--badge-draft-bd); }
.srq-badge { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); background: var(--intent-neutral-bg); color: var(--intent-neutral-text); }

/* ============================ KPI ========================================= */
.srq-kpi { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 12px 14px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.srq-kpi::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--color-primary); }
.srq-kpi.is-amber::after { background: var(--srq-amber); }
.srq-kpi.is-success::after { background: var(--color-success); }
.srq-kpi.is-graphite::after { background: var(--srq-graphite-400); }
.srq-kpi-label { font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); }
.srq-kpi-value { font-family: var(--font-family-display); font-weight: var(--font-weight-extrabold); font-size: var(--font-size-3xl); line-height: 1; margin-top: 6px; font-variant-numeric: tabular-nums; }
.srq-kpi-sub { font-size: var(--font-size-xs); margin-top: 6px; font-weight: var(--font-weight-semibold); }
.srq-up { color: var(--color-success-text); } .srq-down { color: var(--color-danger-text); }

/* ============================ TABLE ======================================= */
.srq-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.srq-table th { text-align: left; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); color: var(--color-text-muted); font-weight: var(--font-weight-bold); padding: 8px 12px; border-bottom: 1px solid var(--color-border); background: var(--srq-graphite-50); }
.srq-table td { padding: 8px 12px; border-bottom: 1px solid var(--color-border-light); }
.srq-table tbody tr { transition: background var(--transition-fast); }
.srq-table tbody tr:hover { background: var(--srq-crimson-50); }
.srq-table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--color-primary); }
.srq-table .srq-table-id { font-family: var(--font-family-display); font-weight: var(--font-weight-bold); color: var(--color-primary); }

/* ============================ ALERTS ====================================== */
.srq-alert { display: flex; gap: 10px; padding: 10px 13px; border-radius: var(--radius-lg); font-size: var(--font-size-sm); border: 1px solid; align-items: flex-start; }
.srq-alert b { font-family: var(--font-family-display); }
.srq-alert-success { background: var(--intent-success-bg); border-color: var(--intent-success-border); color: var(--intent-success-text); }
.srq-alert-warning { background: var(--intent-warning-bg); border-color: var(--intent-warning-border); color: var(--intent-warning-text); }
.srq-alert-danger  { background: var(--intent-danger-bg);  border-color: var(--intent-danger-border);  color: var(--intent-danger-text); }
.srq-alert-info    { background: var(--intent-info-bg);    border-color: var(--intent-info-border);    color: var(--intent-info-text); }

/* ============================ TABS / CRUMBS / CHIPS ======================= */
.srq-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--color-border); }
.srq-tab { padding: 9px 13px; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; border-top: 0; border-left: 0; border-right: 0; }
.srq-tab.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.srq-tab:hover:not(.is-active) { color: var(--color-text-secondary); }
.srq-crumbs { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.srq-crumbs b { color: var(--color-text); }
.srq-chip { height: 32px; border: 1px solid var(--color-border-strong); background: #fff; border-radius: var(--radius); padding: 0 12px; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); display: inline-flex; align-items: center; gap: 7px; color: var(--color-text-secondary); cursor: pointer; }
.srq-chip:hover { border-color: var(--srq-graphite-400); }
.srq-chip i { color: var(--color-text-muted); font-size: 12px; }

/* ============================ EMPTY STATE ================================= */
.srq-empty { text-align: center; padding: 34px 20px; border: 1.5px dashed var(--color-border-strong); border-radius: var(--radius-lg); background: var(--grad-surface); }
.srq-empty-ic { width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--srq-crimson-50); color: var(--color-primary); display: grid; place-items: center; margin: 0 auto 13px; font-size: 22px; }
.srq-empty h4 { font-size: var(--font-size-lg); margin-bottom: 5px; }
.srq-empty p { color: var(--color-text-muted); font-size: var(--font-size-sm); margin-bottom: 14px; }

/* ============================ AVATAR (squared) =========================== */
.srq-avatar { width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--grad-crimson); display: grid; place-items: center; font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); color: #fff; }

/* ============================ GRAPHITE SHELL (nav/sidebar) ================ */
.srq-side { background: var(--grad-graphite); color: #fff; padding: 14px 11px; display: flex; flex-direction: column; gap: 2px; width: var(--sidebar-width); }
.srq-brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-family-display); font-weight: var(--font-weight-extrabold); font-size: var(--font-size-lg); color: #fff; padding: 6px 8px 14px; }
.srq-brand-mark { width: 28px; height: 28px; border-radius: var(--radius-md); background: var(--grad-crimson); display: grid; place-items: center; color: #fff; box-shadow: 0 4px 12px rgba(200,16,46,.45); }
.srq-navi { display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: var(--radius); color: #C2CAD6; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); }
.srq-navi i { width: 17px; text-align: center; opacity: .85; }
.srq-navi:hover { background: var(--color-dark-hover); color: #fff; }
.srq-navi.is-active { background: var(--color-primary); color: #fff; font-weight: var(--font-weight-semibold); box-shadow: 0 4px 12px rgba(200,16,46,.4); }
.srq-navi.is-active i { opacity: 1; }
.srq-nav-group { font-size: var(--font-size-2xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-caps); color: #6B7385; padding: 13px 12px 5px; font-weight: var(--font-weight-bold); }