/* CARS SPACE — Operations Command Center
   Official brand source: carsspace.services (2026-08-27).
   This layer is presentation-only and intentionally loads after legacy themes. */

@font-face {
  font-family: "Cairo Local";
  src: url("/static/fonts/cairo-arabic.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 200 1000;
}

:root {
  --brand-red: #8f1014;
  --brand-red-hover: #b71920;
  --brand-red-deep: #680b0e;
  --brand-red-soft: #f7eeee;
  --graphite: #181c20;
  --charcoal: #242a2e;
  --charcoal-2: #30373c;
  --steel: #5f666d;
  --steel-2: #7d858b;
  --concrete: #f3f5f6;
  --off-white: #fafbfb;
  --surface: #ffffff;
  --surface-2: #f3f5f6;
  --surface-3: #e8ebed;
  --text: #181c20;
  --text-2: #343a3f;
  --muted: #5f666d;
  --line: #d9dddf;
  --line-strong: #b8bec2;

  --success: #176b45;
  --success-soft: #e9f5ee;
  --warning: #8a5a00;
  --warning-soft: #fff5dc;
  --danger: #b42318;
  --danger-soft: #fff0ef;
  --information: #285d7a;
  --information-soft: #edf5f8;
  --sla-normal: #176b45;
  --sla-grace: #8a5a00;
  --sla-overdue: #b42318;
  --sla-waiting: #285d7a;

  --primary: var(--brand-red);
  --primary-strong: var(--brand-red-deep);
  --primary-soft: var(--brand-red-soft);
  --primary-text: var(--brand-red-deep);
  --accent: var(--information);
  --accent-soft: var(--information-soft);
  --warn: var(--warning);
  --warn-soft: var(--warning-soft);
  --shadow-sm: 0 1px 1px rgb(24 28 32 / 5%);
  --shadow-md: 0 10px 28px rgb(24 28 32 / 10%);
  --shadow-command: 0 14px 34px rgb(24 28 32 / 12%);
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 8px;
  --radius-pill: 999px;
  --focus-ring: 0 0 0 3px rgb(143 16 20 / 22%);
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --header-h: 72px;
  --bottomnav-h: 68px;
  --z-header: 50;
  --z-popover: 70;
  --z-dialog: 90;
  font-family: "Cairo Local", Tahoma, Arial, sans-serif;
}

::selection { color: #fff; background: var(--brand-red); }
html { background: var(--concrete); }
html { scroll-padding-block-start: calc(var(--header-h) + env(safe-area-inset-top) + 16px); }
body {
  color: var(--graphite);
  background-color: var(--concrete);
  background-image:
    linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), rgb(24 28 32 / 3%) calc(100% - 1px));
  background-size: min(100%, 240px) 100%;
  font-family: "Cairo Local", Tahoma, Arial, sans-serif;
}
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, strong { letter-spacing: -.012em; }
code, pre, [dir="ltr"], bdi, .client-phone {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
:focus-visible { outline: 3px solid rgb(143 16 20 / 26%); outline-offset: 3px; }

/* Command shell */
.topbar {
  height: var(--header-h);
  z-index: var(--z-header);
  gap: 12px;
  padding-inline: clamp(12px, 2vw, 28px);
  border-bottom: 1px solid var(--line);
  background: rgb(255 255 255 / 97%);
  box-shadow: 0 1px 0 rgb(24 28 32 / 4%);
  backdrop-filter: saturate(120%) blur(18px);
}
.topbar::after {
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-red) 0 16%, var(--graphite) 16% 28%, transparent 28%);
  content: "";
  pointer-events: none;
}
.header-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-inline-end: 12px;
  color: var(--graphite);
}
.brand-wordmark { width: 142px; height: 50px; object-fit: contain; }
.brand-app-icon { display: none; width: 40px; height: 40px; border-radius: 8px; }
.header-context {
  min-width: 0;
  padding-inline-start: 14px;
  border-inline-start: 1px solid var(--line);
}
.header-brand strong {
  max-width: 24vw;
  color: var(--graphite);
  font-size: .9rem;
  font-weight: 850;
}
.header-brand small {
  color: var(--steel);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .075em;
}
.desktop-nav { gap: 1px; }
.desktop-nav a {
  position: relative;
  min-height: 44px;
  padding: 8px 11px;
  border-radius: 4px;
  color: var(--steel);
  font-size: .82rem;
  font-weight: 750;
  transition: color var(--motion-fast), background var(--motion-fast);
}
.desktop-nav a:hover { color: var(--graphite); background: var(--concrete); }
.desktop-nav a.active { color: var(--brand-red-deep); background: var(--brand-red-soft); }
.desktop-nav a.active::after {
  position: absolute;
  inset-inline: 11px;
  inset-block-end: 3px;
  height: 2px;
  background: var(--brand-red);
  content: "";
}
.header-actions { margin-inline-start: auto; }
.account-btn, .back-btn, .icon-btn {
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--graphite);
  background: #fff;
}
.account-btn:hover, .back-btn:hover, .icon-btn:hover { border-color: var(--brand-red); color: var(--brand-red); }
.account-pop {
  z-index: var(--z-popover);
  padding: 6px;
  border-color: var(--line-strong);
  border-radius: 8px;
  box-shadow: var(--shadow-command);
}
.account-pop .menu-item { border-radius: 5px; }
.account-pop .menu-item:hover { color: var(--brand-red-deep); background: var(--brand-red-soft); }
.live-status {
  min-height: 32px;
  border-radius: 4px;
  color: var(--steel);
  background: var(--off-white);
  font-weight: 750;
}
.live-status::before { border-radius: 2px; }
.live-status[data-state="connected"]::before { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.live-status[data-state="syncing"]::before { background: var(--information); }
.live-status[data-state="offline"]::before { background: var(--danger); }

.bottom-nav {
  min-height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
  padding: 4px 6px env(safe-area-inset-bottom);
  border-top: 1px solid var(--line-strong);
  background: rgb(250 251 251 / 97%);
  box-shadow: 0 -8px 22px rgb(24 28 32 / 7%);
  backdrop-filter: blur(18px);
}
.bottom-nav a {
  position: relative;
  min-height: 60px;
  border-radius: 4px;
  color: var(--steel);
  font-weight: 750;
}
.bottom-nav a.active { color: var(--brand-red-deep); background: var(--brand-red-soft); }
.bottom-nav a.active::before {
  position: absolute;
  inset-inline: 22%;
  inset-block-start: 0;
  height: 3px;
  display: block;
  background: var(--brand-red);
  content: "";
}
.bottom-nav a.active svg { fill: none; stroke: currentColor; }
.navigation-progress { height: 3px; background: var(--brand-red); }

/* Layout and hierarchy */
.page { max-width: 1280px; padding-top: 22px; }
.page-narrow, .settings-home, .settings-detail { max-width: 900px; }
.page-head, .settings-intro, .settings-detail-head, .advanced-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 18px;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid #343b40;
  border-inline-start: 5px solid var(--brand-red);
  border-radius: 8px;
  color: #fff;
  background: var(--charcoal);
  box-shadow: var(--shadow-sm);
}
.page-head::after, .settings-intro::after, .settings-detail-head::after, .advanced-hero::before {
  position: absolute;
  inset-inline-end: -34px;
  inset-block: -24px;
  width: 140px;
  border-inline-start: 1px solid rgb(255 255 255 / 13%);
  border-inline-end: 32px solid rgb(143 16 20 / 26%);
  content: "";
  transform: skewX(-9deg);
  pointer-events: none;
}
.page-head h1, .settings-intro h1, .settings-detail-head h1, .advanced-hero h1 {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: clamp(1.45rem, 3vw, 2.15rem);
  font-weight: 900;
}
.page-head p, .settings-intro p, .settings-detail-head p, .advanced-hero p {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 5px 0 0;
  color: #c9ced1;
}
.page-kicker, .section-kicker, .eyebrow {
  color: #e8a7a9 !important;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.page > .card-title-row:first-child {
  min-height: 74px;
  margin-bottom: 18px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--brand-red);
  border-radius: 8px;
  background: #fff;
}
.section-title { color: var(--graphite); font-size: .9rem; font-weight: 850; }
.section-title::before { width: 22px; height: 3px; border-radius: 0; background: var(--brand-red); }

/* Surfaces, operational rows and state language */
.card, .panel, .list-card, .settings-groups, .table-wrap {
  border-color: var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.card, .panel { padding: clamp(15px, 2vw, 22px); }
.panel:hover, .card:hover { border-color: var(--line-strong); }
a.list-card, .list-card-link { transition: border-color var(--motion-fast), background var(--motion-fast); }
a.list-card:hover, .list-card-link:hover { border-color: var(--line-strong); background: var(--off-white); transform: none; }
.conversation-card, .client-card, .person-card-compact, .review-list-card {
  position: relative;
  border-radius: 0;
}
.conversation-card::before, .client-card::before, .person-card-compact::before, .review-list-card::before {
  position: absolute;
  inset-inline-start: 0;
  inset-block: 14px;
  width: 3px;
  background: transparent;
  content: "";
}
.conversation-card:hover::before, .client-card:hover::before, .person-card-compact:hover::before, .review-list-card:hover::before { background: var(--brand-red); }
.conversation-avatar, .client-avatar, .person-avatar {
  border: 1px solid #d6dadd;
  border-radius: 8px;
  color: var(--graphite);
  background: var(--concrete);
}
.client-num {
  border-radius: 3px;
  color: var(--brand-red-deep);
  background: var(--brand-red-soft);
}
.anchor-text { border-inline-start-color: var(--brand-red); background: var(--concrete); }
.row-meta, .row-foot, .hint, .muted { color: var(--steel); }

.badge, .status-pill {
  min-height: 25px;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--text-2);
  background: var(--concrete);
  font-weight: 800;
}
.badge::before, .status-pill::before {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 1px;
  background: currentColor;
  content: "";
}
.badge.primary { color: var(--brand-red-deep); border-color: #e8cacc; background: var(--brand-red-soft); }
.badge.ok, .status-pill.success { color: var(--success); border-color: #cce3d5; background: var(--success-soft); }
.badge.warn { color: var(--warning); border-color: #ead7a8; background: var(--warning-soft); }
.badge.danger { color: var(--danger); border-color: #efcbc7; background: var(--danger-soft); }
.badge.role { color: var(--information); border-color: #cbdee7; background: var(--information-soft); }
.alert, .notice {
  border: 1px solid var(--line);
  border-inline-start-width: 4px;
  border-radius: 6px;
  background: #fff;
}
.alert.info { color: var(--information); border-color: #cbdee7; background: var(--information-soft); }
.alert.success, .notice.success { color: var(--success); border-color: #cce3d5; background: var(--success-soft); }
.alert.warn { color: var(--warning); border-color: #ead7a8; background: var(--warning-soft); }
.alert.danger, .notice.danger { color: var(--danger); border-color: #efcbc7; background: var(--danger-soft); }
.empty-state {
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  color: var(--steel);
  background: var(--off-white);
}

/* Forms and actions */
.btn, .primary-button, .secondary-button, .danger-button {
  min-height: 44px;
  border-radius: 6px;
  font-weight: 850;
  box-shadow: none;
  transition: color var(--motion-fast), background var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast);
}
.btn-primary, .primary-button { color: #fff; border-color: var(--brand-red); background: var(--brand-red); }
.btn-primary:hover, .primary-button:hover { border-color: var(--brand-red-hover); background: var(--brand-red-hover); }
.btn-secondary, .secondary-button { color: var(--graphite); border-color: var(--line-strong); background: #fff; }
.btn-secondary:hover, .secondary-button:hover { color: var(--brand-red-deep); border-color: var(--brand-red); background: var(--brand-red-soft); }
.btn-danger, .danger-button { color: var(--danger); border-color: #efcbc7; background: var(--danger-soft); }
.btn:active, .primary-button:active, .secondary-button:active, .danger-button:active { transform: translateY(1px); }
.input, .select, .textarea,
.form-grid > label input, .form-grid > label select, .form-grid > label textarea,
.advanced-form input, .advanced-form textarea, .advanced-form select,
.reports-settings-form input, .reports-settings-form select, .settings-stack-form input, .settings-stack-form select {
  min-height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--graphite);
  background: #fff;
}
.input:hover, .select:hover, .textarea:hover,
.form-grid > label input:hover, .form-grid > label select:hover { border-color: var(--steel-2); }
.input:focus, .select:focus, .textarea:focus,
.form-grid > label input:focus, .form-grid > label select:focus, .form-grid > label textarea:focus,
.advanced-form input:focus, .advanced-form textarea:focus, .advanced-form select:focus,
.settings-stack-form input:focus, .settings-stack-form select:focus {
  border-color: var(--brand-red);
  background: #fff;
  box-shadow: var(--focus-ring);
  outline: 0;
}
.label, .form-grid > label, .advanced-form label, .reports-settings-form label { color: var(--text-2); font-weight: 800; }
input[type="checkbox"], input[type="radio"], .check-line input, .toggle-card input, .capability-grid input { accent-color: var(--brand-red); }
.switch input:checked + .switch-track { background: var(--brand-red); }
.segmented { border: 1px solid var(--line); border-radius: 6px; background: var(--concrete); }
.segmented a, .segmented button { border-radius: 4px; }
.segmented a.active, .segmented button.active { color: var(--brand-red-deep); background: #fff; box-shadow: none; }
.disclosure summary, .summary-action, .text-button, .password-toggle { color: var(--brand-red-deep); }

dialog, .media-viewer-dialog {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--graphite);
  background: #fff;
  box-shadow: var(--shadow-command);
}
dialog::backdrop, .media-viewer-dialog::backdrop { background: rgb(24 28 32 / 70%); backdrop-filter: blur(3px); }

/* Numbers, KPIs and dashboard decision hierarchy */
.stat, .metric-grid > div {
  min-height: 76px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--off-white);
}
.stat-value, .metric-grid strong {
  color: var(--graphite);
  font-family: "Cairo Local", Tahoma, Arial, sans-serif;
  font-size: 1.18rem;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}
.stat-label { color: var(--steel); font-weight: 700; }
.report-executive-grid { gap: 10px; }
.report-operation-card {
  position: relative;
  min-height: 150px;
  overflow: hidden;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}
.report-operation-card::before {
  position: absolute;
  inset-inline-start: 0;
  inset-block: 0;
  width: 4px;
  background: var(--graphite);
  content: "";
}
.report-operation-card strong { color: var(--graphite); font-size: clamp(1.8rem, 4vw, 2.7rem); font-weight: 950; }
.report-operation-card span { color: var(--graphite); font-weight: 900; }
.report-operation-card small { color: var(--steel); }
.report-operation-card.is-alert {
  grid-column: span 2;
  color: #fff;
  border-color: var(--brand-red-deep);
  background: var(--brand-red-deep);
}
.report-operation-card.is-alert::before { width: 8px; background: #e04b50; }
.report-operation-card.is-alert strong, .report-operation-card.is-alert span { color: #fff; }
.report-operation-card.is-alert small { color: #f1cfd0; }
.decision-callout { border-radius: 6px; border-inline-start: 5px solid currentColor; }
.report-result-first { border-top: 4px solid var(--graphite); }

/* SLA scanability */
.sla-metrics { gap: 8px; }
.sla-metric {
  position: relative;
  min-height: 92px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}
.sla-metric::after {
  position: absolute;
  inset-inline-start: 0;
  inset-block: 0;
  width: 4px;
  background: var(--information);
  content: "";
}
.sla-metric.within::after { background: var(--sla-normal); }
.sla-metric.overdue::after { background: var(--sla-overdue); }
.sla-metric.overdue { color: var(--danger); background: var(--danger-soft); }
.sla-case {
  overflow: hidden;
  border-radius: 8px;
  border-inline-start: 5px solid var(--information);
}
.sla-case.is-overdue { border-inline-start-color: var(--sla-overdue); }
.sla-case.is-within { border-inline-start-color: var(--sla-normal); }
.sla-clock { border-radius: 4px; font-variant-numeric: tabular-nums; }

/* Bulk actions stay strong without covering content */
.bulk-toolbar {
  inset-block-end: calc(var(--bottomnav-h) + env(safe-area-inset-bottom) + 8px);
  padding: 13px;
  border: 1px solid var(--line-strong);
  border-top: 4px solid var(--brand-red);
  border-radius: 8px;
  background: rgb(255 255 255 / 98%);
  box-shadow: var(--shadow-command);
  backdrop-filter: blur(14px);
}
.bulk-summary { color: var(--graphite); font-weight: 850; }
.bulk-check input { width: 21px; height: 21px; }

/* Dense data tables: controlled scroll on narrow screens */
.table-wrap {
  max-width: 100%;
  overflow: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: var(--steel-2) var(--concrete);
}
table.data-table { border-collapse: separate; border-spacing: 0; background: #fff; }
.data-table th {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
  min-height: 44px;
  padding: 11px 12px;
  color: #fff;
  border-bottom: 0;
  background: var(--charcoal);
  font-size: .76rem;
  font-weight: 850;
  white-space: nowrap;
}
.data-table td { padding: 11px 12px; border-bottom-color: var(--line); }
.data-table tbody tr:nth-child(even) { background: var(--off-white); }
.data-table tbody tr:hover { background: var(--brand-red-soft); }

/* Reports */
.report-center-tabs, .advanced-tabs, .lab-jump-nav {
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.report-center-tabs a, .advanced-tabs a, .lab-jump-nav a {
  position: relative;
  border: 0;
  border-radius: 4px;
  color: var(--steel);
  background: transparent;
  font-weight: 800;
}
.report-center-tabs a:hover, .advanced-tabs a:hover, .lab-jump-nav a:hover { color: var(--graphite); background: var(--concrete); }
.report-center-tabs a.active, .advanced-tabs a.active {
  color: #fff;
  background: var(--graphite);
}
.report-center-tabs a.active::after, .advanced-tabs a.active::after {
  position: absolute;
  inset-inline: 10px;
  inset-block-end: 2px;
  height: 2px;
  background: var(--brand-red);
  content: "";
}
.period-switch { border-radius: 6px; background: var(--concrete); }
.period-switch a.active { color: #fff; background: var(--brand-red); }
.quick-send-grid a, .schedule-simple-grid > *, .report-profile-card, .batch-preview {
  border-radius: 8px;
  border-color: var(--line);
}
.quick-send-grid a.primary { color: #fff; border-color: var(--brand-red); background: var(--brand-red); }
.destination-chip { border-radius: 4px; color: var(--brand-red-deep); background: var(--brand-red-soft); }
.batch-item-preview li { border-inline-start: 3px solid var(--graphite); border-radius: 4px; }
.version-card { border-radius: 6px; background: var(--brand-red-deep); }
.section-number { border-radius: 3px; color: #fff; background: var(--brand-red); box-shadow: none; }
.toggle-card, .capability-grid label, .operator-card, .new-rule, .review-card, .schedule-card {
  border-color: var(--line);
  border-radius: 6px;
  background: #fff;
  box-shadow: none;
}
.toggle-card:hover, .capability-grid label:hover { border-color: #d4a8aa; background: var(--brand-red-soft); }
.toggle-card:has(input:checked), .capability-grid label:has(input:checked) { border-color: var(--brand-red); background: var(--brand-red-soft); }
.reports-save { box-shadow: none; }

/* Settings */
.settings-groups { overflow: hidden; border-color: var(--line-strong); }
.settings-group-label {
  margin: 0;
  padding: 15px 16px 8px;
  color: var(--steel);
  border-bottom: 1px solid var(--line);
  background: var(--concrete);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .04em;
}
.settings-row {
  min-height: 72px;
  border-bottom-color: var(--line);
  color: var(--graphite);
  background: #fff;
}
.settings-row:hover { color: var(--brand-red-deep); background: var(--brand-red-soft); }
.settings-icon {
  border: 1px solid #3a4247;
  border-radius: 5px;
  color: #fff;
  background: var(--charcoal);
}
.settings-row-secondary .settings-icon { border-color: #e0b8ba; color: var(--brand-red-deep); background: var(--brand-red-soft); }
.settings-row > b { color: var(--brand-red); }
.settings-form-card { border-top: 3px solid var(--graphite); }
.effective-settings { border-inline-start: 4px solid var(--information); }
.settings-detail > section, .settings-detail [id] {
  scroll-margin-block-start: calc(var(--header-h) + env(safe-area-inset-top) + 16px);
}
.settings-primary-form button { align-self: end; }
.reviewer-card, .permission-card { border-radius: 6px; border-color: var(--line); }
.permission-card:has(input:checked) { border-color: var(--brand-red); background: var(--brand-red-soft); }

/* System status and lab */
.overall-health {
  min-height: 80px;
  border: 1px solid var(--line-strong);
  border-inline-start: 6px solid var(--information);
  border-radius: 8px;
  background: #fff;
}
.overall-health.is-healthy { border-inline-start-color: var(--success); }
.overall-health.is-warning { border-inline-start-color: var(--warning); }
.overall-health.is-error { border-inline-start-color: var(--danger); }
.health-dot { border-radius: 2px; }
.status-card-grid { gap: 10px; }
.status-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--information);
  border-radius: 8px;
  background: #fff;
}
.status-card.is-healthy { border-inline-start-color: var(--success); }
.status-card.is-warning { border-inline-start-color: var(--warning); }
.status-card.is-error { border-inline-start-color: var(--danger); }
.status-card summary b { border-radius: 3px; }
.status-card dl { background: var(--concrete); }
.lab-jump-nav { position: sticky; inset-block-start: calc(var(--header-h) + 8px); z-index: 10; }
.lab-grid { gap: 12px; }
.lab-card {
  overflow: hidden;
  border: 1px solid #3b4348;
  border-inline-start: 4px solid var(--brand-red);
  border-radius: 8px;
  color: #eef0f1;
  background: var(--charcoal);
}
.lab-card h2, .lab-card strong, .lab-card b { color: #fff; }
.lab-card p, .lab-card li, .lab-card label { color: #cbd0d3; }
.lab-card-head { border-bottom-color: #3b4348; }
.lab-card-head > span { color: #e8a7a9; letter-spacing: .07em; }
.lab-card .btn-secondary { color: #fff; border-color: #596268; background: var(--charcoal-2); }
.lab-card .btn-secondary:hover { border-color: #e8a7a9; background: var(--brand-red-deep); }
.lab-card input, .lab-card select { color: var(--graphite); background: #fff; }
.lab-card.is-unavailable { border-inline-start-color: var(--steel-2); color: #cbd0d3; background: #30363a; }
.unavailable-action { border-radius: 6px; border-color: #596268; color: #cbd0d3; background: #30363a; }
.lab-result { border-radius: 8px; }

/* Conversation remains familiar, but belongs to the same system */
.messages {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background-color: #e9ebea;
  background-image:
    linear-gradient(45deg, rgb(24 28 32 / 2%) 25%, transparent 25%, transparent 75%, rgb(24 28 32 / 2%) 75%);
  background-size: 48px 48px;
}
.msg { border-radius: 7px; }
.msg.out { background: #f2e6e6; }
.msg.in { background: #fff; }
.msg-sender { color: var(--brand-red-deep); }
.msg.out::before, .msg.in::before { display: none; }
.day-sep span { border-radius: 3px; color: var(--steel); background: #fff; }
.new-messages { border-radius: 4px; background: var(--brand-red); box-shadow: none; }
.sticky-actions { border-radius: 8px; }

/* Login, offline prompt and update */
.page-guest {
  position: relative;
  overflow: hidden;
  background: var(--charcoal);
}
.page-guest::before {
  position: fixed;
  inset-inline-end: -10vw;
  inset-block: -20vh;
  width: min(42vw, 520px);
  border-inline-start: 1px solid rgb(255 255 255 / 14%);
  border-inline-end: 16vw solid rgb(143 16 20 / 62%);
  content: "";
  transform: skewX(-8deg);
}
.login-shell { position: relative; z-index: 1; max-width: 430px; }
.login-brand { color: #fff; }
.login-wordmark {
  width: min(290px, 78vw);
  height: auto;
  margin: 0 auto 12px;
  padding: 12px 14px;
  border-radius: 6px;
  background: #fff;
  object-fit: contain;
}
.login-signal {
  display: block;
  margin-bottom: 6px;
  color: #e8a7a9;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .08em;
}
.login-brand h1 { color: #fff; font-size: 1.55rem; }
.login-brand p { color: #cbd0d3; }
.login-card { border-top: 4px solid var(--brand-red); border-radius: 8px; background: #fff; box-shadow: var(--shadow-command); }
.login-step {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 4px 9px;
  border-radius: 999px;
  color: var(--brand-red-deep);
  background: #f8e7e8;
  font-size: .7rem;
  font-weight: 900;
}
.login-back { float: left; color: var(--brand-red-deep); font-size: .78rem; font-weight: 800; text-decoration: none; }
.login-choice-grid { display: grid; gap: 10px; margin-top: 18px; }
.login-choice-grid form { margin: 0; }
.login-choice {
  width: 100%;
  min-height: 72px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  border: 1px solid #dfe3e5;
  border-radius: 10px;
  color: var(--charcoal);
  background: #fff;
  text-align: right;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.login-choice:hover { border-color: var(--brand-red); box-shadow: 0 8px 20px rgb(31 40 48 / 9%); transform: translateY(-1px); }
.login-choice-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #fff;
  background: var(--charcoal);
  font-size: .82rem;
  font-weight: 900;
}
.login-choice > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.login-choice strong { font-size: .94rem; }
.login-choice small { overflow: hidden; color: var(--steel); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.login-choice b { color: var(--brand-red); font-size: 1.5rem; font-weight: 500; }
.login-programmer-choice { display: grid; gap: 6px; }
.login-password-alternative {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dfe3e5;
  border-radius: 8px;
  color: var(--brand-red-deep);
  background: var(--brand-red-soft);
  font-size: .78rem;
  font-weight: 850;
}
.login-password-alternative:hover { border-color: var(--brand-red); }
.login-password-form { display: grid; gap: 13px; margin-top: 18px; }
.login-password-form label { display: grid; gap: 6px; color: var(--steel); font-size: .8rem; font-weight: 800; }
.login-password-form input {
  width: 100%;
  min-height: 50px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--graphite);
  background: #fff;
  font: inherit;
}
.login-password-form input:focus { border-color: var(--brand-red); box-shadow: var(--focus-ring); outline: 0; }
.login-code-form { display: grid; gap: 12px; margin-top: 18px; }
.login-code-input { direction: ltr; height: 58px; text-align: center; font-size: 1.55rem; font-weight: 900; letter-spacing: .35em; }
.login-foot { color: #aeb5b9; }
.pwa-update, .pwa-install {
  border: 1px solid #4a5257;
  border-radius: 6px;
  color: #fff;
  background: var(--charcoal);
  box-shadow: var(--shadow-command);
}
.pwa-update button, .pwa-install button { border-radius: 4px; background: var(--brand-red); }
.pwa-install {
  position: fixed;
  z-index: 109;
  inset-inline: 12px;
  inset-block-end: calc(var(--bottomnav-h) + env(safe-area-inset-bottom) + 10px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
  font-size: .82rem;
}
.pwa-install[hidden] { display: none; }
.pwa-install > div:first-child { display: grid; gap: 2px; }
.pwa-install strong { color: #fff; }
.pwa-install span { color: #cbd0d3; }
.pwa-install-actions { display: flex; flex: 0 0 auto; gap: 6px; }
.pwa-install button { min-height: 40px; padding: 7px 11px; border: 0; color: #fff; font: 800 .78rem "Cairo Local", sans-serif; cursor: pointer; }
.pwa-install .pwa-dismiss { border: 1px solid #596268; color: #fff; background: transparent; }

@media (max-width: 959px) {
  :root { --header-h: 62px; }
  .topbar { gap: 8px; padding-inline: 10px; }
  .brand-wordmark { display: none; }
  .brand-app-icon { display: block; width: 38px; height: 38px; }
  .header-brand { flex: 1 1 auto; gap: 9px; margin: 0; }
  .header-context { padding-inline-start: 9px; }
  .header-brand strong { max-width: 42vw; font-size: .9rem; }
  .header-brand small { display: none; }
  .live-status { max-width: 84px; overflow: hidden; }
  .page { padding-top: 14px; }
  .topbar, .bottom-nav { backdrop-filter: none; }
  .lab-jump-nav { inset-block-start: calc(var(--header-h) + 6px); }
}

@media (max-width: 700px) {
  body { background-image: none; }
  .page { padding-inline: 10px; }
  .page-head, .settings-intro, .settings-detail-head, .advanced-hero { padding: 18px 16px; }
  .page-head h1, .settings-intro h1, .settings-detail-head h1, .advanced-hero h1 { font-size: 1.45rem; }
  .card, .panel { padding: 14px; }
  .report-operation-card { min-height: 126px; padding: 16px; }
  .report-operation-card.is-alert { grid-column: 1 / -1; }
  .report-operation-card strong { font-size: 2rem; }
  .report-center-tabs, .advanced-tabs, .lab-jump-nav {
    margin-inline: -2px;
    padding: 4px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .report-center-tabs::-webkit-scrollbar, .advanced-tabs::-webkit-scrollbar, .lab-jump-nav::-webkit-scrollbar { display: none; }
  .report-center-tabs a, .advanced-tabs a, .lab-jump-nav a { min-height: 44px; flex: 0 0 auto; scroll-snap-align: start; }
  .bulk-toolbar { inset-inline: 10px; }
  .button-row > form, .button-row > form button { width: 100%; }
  .data-table { min-width: 640px; }
  .table-wrap::after {
    position: sticky;
    inset-inline-start: 8px;
    inset-block-end: 6px;
    display: inline-block;
    padding: 3px 7px;
    border-radius: 3px;
    color: var(--steel);
    background: rgb(255 255 255 / 92%);
    content: "اسحب لعرض بقية الأعمدة";
    font-size: .66rem;
    pointer-events: none;
  }
  .settings-row { min-height: 68px; padding-inline: 12px; }
  .settings-icon { width: 38px; height: 38px; }
  .lab-card { padding: 16px; }
  .messages { padding: 8px; }
  .msg { max-width: 92%; }
  .pwa-install { align-items: stretch; flex-direction: column; gap: 9px; }
  .pwa-install-actions button:first-child { flex: 1; }
  .settings-primary-form button { width: 100%; }
}

@media (min-width: 960px) {
  .bottom-nav { display: none; }
  .page { padding-bottom: 44px; }
  .bulk-toolbar { inset-block-end: 20px; }
  .account-btn { width: auto; min-width: 48px; padding-inline: 12px; border-radius: 6px; }
  .account-btn span, .account-btn svg:last-child { display: block; }
  .pwa-install { inset-inline-start: auto; inset-inline-end: 24px; inset-block-end: 24px; width: 390px; }
}

@media (display-mode: standalone) {
  .topbar { padding-block-start: env(safe-area-inset-top); height: calc(var(--header-h) + env(safe-area-inset-top)); }
  .bottom-nav { padding-block-end: max(4px, env(safe-area-inset-bottom)); }
  .page {
    min-height: 100svh;
    padding-block-start: calc(var(--header-h) + env(safe-area-inset-top) + 18px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}