/* =========================
   LUXURY THEME TOKENS (V1)
   Subtle luxury: calm, black, minimal, high-trust
   ========================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root {
  /* Accent blue - works on both dark and light */
  --accent-blue: #2D6BFF;
  
  /* Dark theme (default) */
  --bg: #000000;
  --surface-1: #000000;
  --surface-2: #050505;
  --surface-3: #0A0A0A;
  --border: #141414;
  --border-2: #1E1E1E;
  --text: #EAEAEA;
  --text-2: #A8A8A8;
  --text-3: #6B6B6B;
  --blue: #2D6BFF;
  --amber: #F0A33A;
  --red: #E23B3B;
  --green: #2FBF71;
  --focus: rgba(255, 255, 255, .22);
  --btn-radius: 0px;
  --btn-pad-y: 8px;
  --btn-pad-x: 10px;
  --hover-bg: rgba(255, 255, 255, .04);
  --active-bg: rgba(255, 255, 255, .06);
  --hairline: rgba(255, 255, 255, .10);
  --hairline-2: rgba(255, 255, 255, .16);
  --radius: 14px;
  --radius-sm: 10px;
  --radius-xs: 8px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .55);
  --shadow-soft: 0 6px 18px rgba(0, 0, 0, .45);
  --pad-1: 10px;
  --pad-2: 14px;
  --pad-3: 18px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Light theme */
[data-theme="light"] {
  --bg: #FFFFFF;
  --surface-1: #FFFFFF;
  --surface-2: #FAFAFA;
  --surface-3: #F5F5F5;
  --border: #E5E5E5;
  --border-2: #D4D4D4;
  --text: #1A1A1A;
  --text-2: #525252;
  --text-3: #737373;
  --focus: rgba(0, 0, 0, .15);
  --hover-bg: rgba(0, 0, 0, .04);
  --active-bg: rgba(0, 0, 0, .06);
  --hairline: rgba(0, 0, 0, .10);
  --hairline-2: rgba(0, 0, 0, .16);
}

/* soften default selection */
::selection {
  background: rgba(45, 107, 255, .28);
}

/* nicer scrollbars (safe on webkit; ignored elsewhere) */
*::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

*::-webkit-scrollbar-thumb {
  background: #1E1E1E;
  border-radius: 0;
  border: 2px solid #0B0B0B;
}

*::-webkit-scrollbar-track {
  background: #070707;
}

/* ========== GLOBAL RESET ========== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  background: var(--bg) !important;
}

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg) !important;
  color: var(--text);
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  opacity: .92;
}

h1,
h2,
h3 {
  letter-spacing: .01em;
  font-weight: 600;
}

small,
.muted {
  color: var(--text-2);
}

/* ========== GLOBAL BANNER (OPS RELIABILITY) ========== */
.global-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  padding: 0.75rem 1.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  border-bottom: 2px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.global-banner.hidden {
  display: none;
}

.global-banner.is-error {
  background: #7a1c1c;
  color: #ff9b9b;
  border-color: #ff6b6b;
}

.global-banner.is-warn {
  background: #7a4418;
  color: #ffb47a;
  border-color: #ffa94d;
}

.global-banner.is-ok {
  background: #204d2a;
  color: #a9ffb7;
  border-color: #51cf66;
}

.global-banner .banner-dismiss {
  margin-left: auto;
  background: transparent;
  border: 1px solid currentColor;
  color: currentColor;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.75rem;
  opacity: 0.8;
}

.global-banner .banner-dismiss:hover {
  opacity: 1;
}

/* ========== DEBUG STRIP (OPS RELIABILITY) ========== */
.debug-strip {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 0.35rem 1rem;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.debug-strip.hidden {
  display: none;
}

.debug-strip .debug-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.debug-strip .debug-label {
  color: var(--text-3);
  font-weight: 500;
}

.debug-strip .debug-value {
  color: var(--text);
  font-weight: 600;
}

.debug-strip .debug-value.connected {
  color: #51cf66;
}

.debug-strip .debug-value.connecting {
  color: #ffa94d;
}

.debug-strip .debug-value.disconnected {
  color: #ff6b6b;
}

.debug-toggle {
  position: fixed;
  top: 0.5rem;
  right: 1rem;
  z-index: 10001;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-3);
  font-size: 0.65rem;
  font-family: var(--mono);
  cursor: pointer;
  opacity: 0.6;
}

.debug-toggle:hover {
  opacity: 1;
  border-color: var(--border-2);
}

/* Adjust body padding when banner/strip are visible */
body:has(.global-banner:not(.hidden)) {
  padding-top: 2.5rem;
}

body:has(.debug-strip:not(.hidden)) {
  padding-top: 1.8rem;
}

body:has(.global-banner:not(.hidden)):has(.debug-strip:not(.hidden)) {
  padding-top: 4.3rem;
}

body:has(.debug-strip:not(.hidden)):not(:has(.global-banner:not(.hidden))) {
  padding-top: 1.8rem;
}

/* ========== SCREEN CONTEXT ========== */
.screen-context {
  margin-top: 6px;
  color: var(--text-3);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ========== APP SHELL ========== */
.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transform: scale(0.85);
  transform-origin: top left;
  width: 117.65%;
}

/* ========== HEADER ========== */
.app-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-1);
}

.app-header img.logo {
  height: 40px;
  width: 40px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  padding: 4px;
  object-fit: cover;
}

.app-header .titles {
  display: flex;
  flex-direction: column;
}

.app-header .brand {
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  font-weight: 600;
  text-transform: uppercase;
}

.app-header .subtitle {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--text-2);
  letter-spacing: .08em;
}

.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.role-pill {
  padding: 4px 10px;
  border-radius: 0;
  border: 1px solid var(--border);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-2);
  background: rgba(255, 255, 255, .02);
}

/* PQI toggle in header */
.pqi-toggle-global {
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-xs);
  border: 1px solid rgba(45, 107, 255, .32);
  background: rgba(45, 107, 255, .12);
  color: var(--text);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}

.pqi-toggle-global.off {
  border-color: var(--border);
  background: var(--surface-2);
  color: var(--text-2);
}

/* ========== MAIN LAYOUT ========== */
.app-main {
  padding: 0.75rem 1rem 1.5rem;
  max-width: 1800px;
  margin: 0 auto;
}

.app-main-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 1-column layout */
.layout-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: flex-start;
}

.layout-left,
.layout-center,
.layout-right {
  min-width: 0;
}

/* ========== SECTIONS / TITLES ========== */
.section {
  margin-bottom: 1rem;
}

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.section-title {
  font-size: 0.95rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.section-subtitle {
  font-size: 0.8rem;
  color: var(--text-2);
}

/* Small blue count pill */
.section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  padding: 0.06rem 0.4rem;
  border-radius: 0;
  border: 1px solid rgba(45, 107, 255, .32);
  background: rgba(45, 107, 255, .08);
  font-size: 0.75rem;
  color: var(--text);
  font-weight: 600;
}

/* ========== BUTTONS / CHIPS ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--btn-radius);
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255, 255, 255, .86);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: background .12s ease, border-color .12s ease, color .12s ease, transform .06s ease;
}

.btn:hover {
  background: var(--hover-bg);
  border-color: var(--hairline);
  color: rgba(255, 255, 255, .96);
}

.btn:active {
  background: var(--active-bg);
  border-color: var(--hairline-2);
  transform: translateY(1px);
}

.btn:focus-visible {
  outline: 1px solid var(--focus);
  outline-offset: 2px;
}

.btn[disabled],
.btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  background: transparent;
  border-color: transparent;
  transform: none;
}

.btn.primary,
.btn-primary {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .95);
}

.btn.primary:hover,
.btn-primary:hover {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .22);
}

.btn.primary:active,
.btn-primary:active {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .26);
}

.btn.danger,
.btn-danger {
  background: rgba(226, 59, 59, .10);
  border-color: rgba(226, 59, 59, .30);
  color: rgba(255, 255, 255, .96);
}

.btn.danger:hover,
.btn-danger:hover {
  background: rgba(226, 59, 59, .16);
  border-color: rgba(226, 59, 59, .44);
}

.btn.compact {
  padding: 6px 8px;
  font-size: 12px;
  border-radius: var(--btn-radius);
}

.btn.small {
  padding: 6px 8px;
  font-size: 12px;
  border-radius: var(--btn-radius);
  line-height: 1.2;
}

.btn.selected,
.btn.active,
.btn.is-active,
.btn.is-selected,
.keys-buttons .btn.selected,
.wash-buttons .btn.selected {
  border-radius: var(--btn-radius);
  border: 1px solid var(--hairline-2);
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .96);
  font-weight: 600;
}

button,
.btn,
.button,
.pill,
.chip {
  border-radius: 0 !important;
}

/* Generic pill */
.pill-blue {
  display: inline-block;
  padding: 0.25rem 0.55rem;
  border-radius: 0;
  border: 1px solid rgba(45, 107, 255, .32);
  background: rgba(45, 107, 255, .1);
  color: var(--text);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

.cell-tag .pill-blue,
.cell-customer .pill-blue {
  display: inline-block;
}

/* Keys (valet names) group */
.keys-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
}

.keys-buttons .btn {
  border-radius: var(--btn-radius);
  border: 1px solid var(--hairline);
  background: transparent;
  padding: 0.35rem 0.65rem;
  font-size: 12px;
  color: rgba(255, 255, 255, .86);
}

.keys-buttons .btn:hover {
  border-color: var(--hairline-2);
  background: var(--hover-bg);
}

/* Valet grid (2 rows x 4 cols) */
.valet-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.2rem;
  margin-top: 0.2rem;
}

.valet-grid .btn {
  width: 100%;
  justify-content: center;
}

/* Status/location options group */
.wash-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.2rem;
  margin-top: 0.2rem;
}

.wash-buttons .btn {
  border-radius: var(--btn-radius);
  border: 1px solid var(--hairline);
  background: transparent;
  padding: 0.35rem 0.65rem;
  font-size: 12px;
  color: rgba(255, 255, 255, .86);
}

.wash-buttons .btn:hover {
  border-color: var(--hairline-2);
  background: var(--hover-bg);
}

/* Notes "Add note" button – keep rectangular */
.notes-button {
  border-radius: var(--btn-radius);
  border-style: solid;
  border-color: var(--border);
  background: rgba(255, 255, 255, .015);
}

/* ========== NEW PICKUP FORM (DISPATCH) ========== */
.new-pickup-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  background: var(--surface-2) !important;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 0.7rem 0.9rem;
  box-shadow: none;
}

.new-pickup-form,
.table-wrapper,
.section,
.panel,
.card {
  background: var(--surface-2) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none !important;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.input-group label {
  font-size: 0.72rem;
  color: var(--text-2);
}

input,
select,
textarea {
  background: var(--surface-1);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  outline: none;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-3);
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(45, 107, 255, .45);
  box-shadow: 0 0 0 3px rgba(45, 107, 255, .14);
}

.input-text {
  background: var(--surface-1);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  padding: 0.5rem 0.65rem;
  font-size: 0.9rem;
  color: var(--text);
  min-width: 150px;
}

.input-text::placeholder {
  color: var(--text-3);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: var(--text-2);
}

/* ========== SCREEN LINKS ========== */
.screen-links {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.screen-links .service-section,
.screen-links .sales-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.screen-links .section-divider {
  height: 1px;
  background: var(--border);
  margin: 1rem 0;
}

.screen-links .section-title {
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.screen-links .section-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ========== TABLE WRAPPERS ========== */
.table-wrapper {
  background: var(--surface-2) !important;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow-y: auto;
  position: relative;
  isolation: isolate;
  box-shadow: none !important;
  /* prevents any overlay/pseudo from leaking into click layering */
}

/* HARD SAFETY: any wrapper pseudo-element must never intercept clicks */
.table-wrapper::before,
.table-wrapper::after {
  pointer-events: none !important;
}

/* Active Pickups highlight — No blue tint (only dispatcher gets white border) */
.section-active {
  position: relative;
  background: transparent;
}

[data-theme="light"] .section-active {
  background: transparent;
}

.section-active .table-wrapper {
  border-width: 1px;
  border-color: var(--border);
  background: transparent !important;
  position: relative;
}

/* Optional subtle pulse on rail */
@keyframes railPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.section-active {
  animation: railPulse 3s ease-in-out infinite;
}

.table-wrapper.small {
  max-height: 280px;
}

/* Staged column wrapper needs its own scroll & width behaviour */
.section-staged .table-wrapper {
  max-height: 260px;
  overflow-y: auto;
  overflow-x: auto;
}

/* ========== TABLE BASE STYLES ========== */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  table-layout: fixed;
}

thead th {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
  padding: 12px 10px;
}

tbody td {
  border-bottom: 1px solid var(--border);
  padding: 12px 10px;
  color: var(--text);
}

tbody tr:hover {
  background: rgba(255, 255, 255, .015);
}

/* Any container you apply .hover-reveal to will look flat until hover */
.hover-reveal {
  border: 1px solid transparent;
  background: transparent;
  transition: background .12s ease, border-color .12s ease;
}

.hover-reveal:hover {
  background: rgba(255, 255, 255, .015);
  border-color: rgba(255, 255, 255, .08);
}

/* Hide “secondary actions” until row hover */
.hover-actions {
  opacity: 0;
  pointer-events: none;
  transform: translateY(1px);
  transition: opacity .12s ease, transform .12s ease;
}

.hover-reveal:hover .hover-actions {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

td .btn {
  padding: 6px 8px;
  font-size: 12px;
}

/* remove “busy” outlines around everything */
hr,
.divider {
  border: none;
  height: 1px;
  background: var(--border);
}

/* ========== TAG / CUSTOMER ========== */
td.cell-tag,
td.cell-customer {
  display: table-cell;
  border: none;
  background: transparent;
  border-radius: 0;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  font-size: 13px;
}

/* Status badge */
.status-badge {
  display: inline-block;
  padding: 0.25rem 0.55rem;
  border-radius: 0;
  border: 1px solid var(--border);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-2);
  background: rgba(255, 255, 255, .02);
}

/* ========== NOTES AREA ========== */
.notes-preview {
  display: inline-block;
  max-width: 220px;
  white-space: normal;
}

.notes-list {
  margin-top: 0.25rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.note-pill {
  display: inline-block;
  max-width: 520px;
  padding: 7px 10px;
  border-radius: 0;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .015);
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.25;
  margin: 3px 6px 3px 0;
  white-space: normal;
  word-break: break-word;
}

.note-pill.latest {
  background: rgba(45, 107, 255, .10);
  border-color: rgba(45, 107, 255, .35);
  color: var(--text);
}

.note-pill.old {
  opacity: .92;
}

/* Legacy note-line support (for backwards compatibility) */
.note-line {
  font-size: 0.68rem;
  color: var(--text-2);
}

.note-line.old {
  opacity: 0.75;
}

.note-line.latest {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-xs);
  border: 1px solid rgba(45, 107, 255, .28);
  background: rgba(45, 107, 255, .1);
  color: var(--text);
}

/* ========== TIMERS ========== */
.timer {
  font-family: var(--mono);
  font-size: 0.8rem;
  padding: 0.15rem 0.5rem;
  border-radius: 0;
  border: 1px solid var(--border);
  display: inline-block;
  background: var(--surface-2);
}

.timer-green {
  border-color: rgba(47, 191, 113, .3);
  background: rgba(47, 191, 113, .1);
  color: var(--text);
}

.timer-yellow {
  border-color: rgba(197, 138, 42, .34);
  background: rgba(197, 138, 42, .12);
  color: var(--text);
}

.timer-orange {
  border-color: rgba(197, 138, 42, .34);
  background: rgba(197, 138, 42, .12);
  color: var(--text);
}

.timer-red {
  border-color: rgba(176, 42, 42, .4);
  background: rgba(176, 42, 42, .12);
  color: var(--text);
}

/* Needs rewash – flashing blue pill */
.wash-needs {
  border-radius: var(--radius-xs);
  border: 1px solid rgba(45, 107, 255, .70);
  background: rgba(45, 107, 255, .10);
  color: var(--text);
  position: relative;
  animation: pulseBlueStrong .85s ease-in-out infinite;
}

.wash-needs::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 4px;
  border-radius: 12px;
  background: rgba(45, 107, 255, .95);
}

/* ========== INLINE DIALOG (REWASH FLOW) ========== */
.inline-dialog {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  margin-top: 0.3rem;
  font-size: 0.85rem;
  color: var(--text);
}

.inline-dialog .dialog-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.inline-dialog .dialog-label {
  color: var(--text);
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.inline-dialog .dialog-buttons {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.inline-dialog .dialog-buttons .btn {
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
}

/* Base “attention” look (steady) */
.attn-blue {
  border-color: rgba(45, 107, 255, .70) !important;
  background: rgba(45, 107, 255, .10) !important;
  position: relative;
}

.attn-orange {
  border-color: rgba(240, 163, 58, .70) !important;
  background: rgba(240, 163, 58, .11) !important;
  position: relative;
}

.attn-red {
  border-color: rgba(226, 59, 59, .75) !important;
  background: rgba(226, 59, 59, .12) !important;
  position: relative;
}

/* Left accent bar for “this matters” */
.attn-blue::before,
.attn-orange::before,
.attn-red::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 4px;
  border-radius: 12px;
}

.attn-blue::before {
  background: rgba(45, 107, 255, .95);
}

.attn-orange::before {
  background: rgba(240, 163, 58, .95);
}

.attn-red::before {
  background: rgba(226, 59, 59, .95);
}

@keyframes pulseBlueStrong {
  0% {
    background: rgba(45, 107, 255, .10);
    border-color: rgba(45, 107, 255, .55);
  }

  50% {
    background: rgba(45, 107, 255, .22);
    border-color: rgba(45, 107, 255, .92);
  }

  100% {
    background: rgba(45, 107, 255, .10);
    border-color: rgba(45, 107, 255, .55);
  }
}

@keyframes pulseOrangeStrong {
  0% {
    background: rgba(240, 163, 58, .10);
    border-color: rgba(240, 163, 58, .55);
  }

  50% {
    background: rgba(240, 163, 58, .24);
    border-color: rgba(240, 163, 58, .92);
  }

  100% {
    background: rgba(240, 163, 58, .10);
    border-color: rgba(240, 163, 58, .55);
  }
}

@keyframes pulseRedStrong {
  0% {
    background: rgba(226, 59, 59, .12);
    border-color: rgba(226, 59, 59, .62);
  }

  50% {
    background: rgba(226, 59, 59, .28);
    border-color: rgba(226, 59, 59, .98);
  }

  100% {
    background: rgba(226, 59, 59, .12);
    border-color: rgba(226, 59, 59, .62);
  }
}

.pulse-blue {
  animation: pulseBlueStrong .85s ease-in-out infinite;
  border: 1px solid rgba(45, 107, 255, .70) !important;
  background: rgba(45, 107, 255, .14) !important;
}

.pulse-orange {
  animation: pulseOrangeStrong .85s ease-in-out infinite;
  border: 1px solid rgba(240, 163, 58, .70) !important;
  background: rgba(240, 163, 58, .16) !important;
}

.pulse-red {
  animation: pulseRedStrong .70s ease-in-out infinite;
  border: 1px solid rgba(226, 59, 59, .78) !important;
  background: rgba(226, 59, 59, .18) !important;
}

/* ========== MODAL SYSTEM ========== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 1rem;
}

.modal {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-soft);
}

.modal-title {
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 1rem;
  color: var(--text);
}

.modal-body {
  margin-bottom: 1.5rem;
  color: var(--text-2);
  line-height: 1.5;
}

.modal-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.modal-input {
  width: 100%;
  padding: 0.75rem 0.8rem;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
  margin-bottom: 1rem;
  box-sizing: border-box;
}

.modal-input:focus {
  outline: none;
  border-color: rgba(45, 107, 255, .45);
  box-shadow: 0 0 0 3px rgba(45, 107, 255, .14);
}

/* ========== TOAST SYSTEM ========== */
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1.5rem;
  font-size: 0.9rem;
  color: var(--text);
  z-index: 10001;
  box-shadow: var(--shadow-soft);
  animation: toastSlideIn 0.3s ease-out;
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes toastSlideOut {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  to {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
}

/* ========== COMPLETED COLLAPSE ========== */
#completed-section.completed-collapsed .section-completed-table {
  display: none;
}

/* ========== EMPTY STATE ========== */
.empty {
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  color: var(--text-3);
}

/* ========== ROLE VISIBILITY ========== */
body.role-dispatcher .dispatcher-only {
  display: initial;
}

body.role-dispatcher th.dispatcher-only,
body.role-dispatcher td.dispatcher-only {
  display: table-cell;
}

body.role-keymachine .dispatcher-only,
body.role-carwash .dispatcher-only,
body.role-wallboard .dispatcher-only,
body.role-serviceadvisor .dispatcher-only,
body.role-loancar .dispatcher-only {
  display: none !important;
}

body.role-keymachine .keymachine-only,
body.role-dispatcher .keymachine-only,
body.role-carwash .keymachine-only {
  display: initial;
}

body.role-wallboard .keymachine-only,
body.role-serviceadvisor .keymachine-only,
body.role-loancar .keymachine-only {
  display: none !important;
}

body.role-carwash .carwash-only {
  display: initial;
}

body.role-serviceadvisor .carwash-only,
body.role-loancar .carwash-only {
  display: none !important;
}

/* Wallboard styling */
.wallboard-main {
  max-width: 1600px;
}

.wallboard-table th,
.wallboard-table td {
  font-size: 1rem;
  padding: 0.6rem 0.7rem;
}

/* Wallboard read-only */
body.role-wallboard button {
  pointer-events: none;
  opacity: 0.7;
}

/* ========== HARD UI LOCK FOR SERVICEADVISOR + LOANCAR ========== */
body.role-serviceadvisor .wash-buttons,
body.role-serviceadvisor .keys-buttons,
body.role-serviceadvisor button[data-action^="toggle-"],
body.role-loancar .wash-buttons,
body.role-loancar .keys-buttons,
body.role-loancar button[data-action^="toggle-"] {
  display: none !important;
}

/* ========== KPI GRID & CARDS ========== */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.kpi-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  text-align: center;
}

.kpi-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.5rem;
  font-family: var(--mono);
}

.kpi-label {
  font-size: 0.75rem;
  color: var(--text-3);
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.kpi-value,
.metric-value {
  font-family: var(--mono);
  letter-spacing: .02em;
}

/* Tab row styling */
.tab-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.tab-btn {
  padding: 0.5rem 1rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: 0;
  border-top-left-radius: var(--radius-xs);
  border-top-right-radius: var(--radius-xs);
}

.tab-btn.selected,
.tab-btn.active {
  border-bottom-color: rgba(45, 107, 255, .55);
  color: var(--text);
  font-weight: 600;
  background: rgba(45, 107, 255, 0.12);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1100px) {
  .layout-grid {
    display: block;
  }

  .layout-left,
  .layout-center,
  .layout-right {
    margin-bottom: 1rem;
  }
}

@media (max-width: 900px) {
  .app-main {
    padding: 0.75rem 0.75rem 1.5rem;
  }

  .new-pickup-form {
    flex-direction: column;
  }

  th,
  td {
    padding: 0.4rem 0.45rem;
  }

  /* Sales Driver Mobile Cards */
  .sales-driver-mobile {
    display: block;
  }

  .sales-driver-desktop {
    display: none;
  }

  .sales-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 1rem;
  }

  .sales-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
  }

  .sales-card-title {
    font-weight: 600;
    font-size: 1rem;
  }

  .sales-card-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
  }

  .sales-card-actions .btn {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    width: 100%;
    text-align: center;
  }
}

@media (min-width: 901px) {
  .sales-driver-mobile {
    display: none;
  }

  .sales-driver-desktop {
    display: block;
  }
}

/* ========== MARKET SCREEN ========== */
.ticker {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 0.5rem;
  margin-bottom: 1rem;
  overflow: hidden;
  position: relative;
}

.ticker-track {
  display: flex;
  white-space: nowrap;
  animation: tickerScroll 30s linear infinite;
}

.ticker-item {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--text);
  padding: 0 1rem;
}

@keyframes tickerScroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-33.333%);
  }
}

.market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.market-tile {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.market-tile:hover {
  border-color: rgba(45, 107, 255, .36);
  background: rgba(45, 107, 255, 0.05);
  transform: translateY(-2px);
}

.market-tile-label {
  font-size: 0.7rem;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.market-tile-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  font-family: var(--mono);
  margin-bottom: 0.25rem;
}

.market-tile-delta {
  font-size: 0.7rem;
  font-weight: 600;
  font-family: var(--mono);
}

.market-tile.flash-up {
  animation: flashUp 0.6s ease-out;
}

.market-tile.flash-down {
  animation: flashDown 0.6s ease-out;
}

@keyframes flashUp {
  0% {
    border-color: var(--border);
    box-shadow: 0 0 0 0 rgba(47, 191, 113, 0);
  }

  50% {
    border-color: rgba(47, 191, 113, .5);
    box-shadow: 0 0 12px 4px rgba(47, 191, 113, 0.35);
  }

  100% {
    border-color: var(--border);
    box-shadow: 0 0 0 0 rgba(47, 191, 113, 0);
  }
}

@keyframes flashDown {
  0% {
    border-color: var(--border);
    box-shadow: 0 0 0 0 rgba(176, 42, 42, 0);
  }

  50% {
    border-color: rgba(176, 42, 42, .5);
    box-shadow: 0 0 12px 4px rgba(176, 42, 42, 0.35);
  }

  100% {
    border-color: var(--border);
    box-shadow: 0 0 0 0 rgba(176, 42, 42, 0);
  }
}

.market-detail {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-top: 1rem;
}

.market-detail-content {
  width: 100%;
}

.market-detail-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.75rem;
}

.market-detail table {
  width: 100%;
  font-size: 0.8rem;
}

.market-detail th,
.market-detail td {
  padding: 0.4rem 0.6rem;
  text-align: left;
}

.market-detail th {
  color: var(--text-3);
  font-weight: 500;
}

.market-detail td {
  color: var(--text);
}

/* =========================================================
   OPTIMA DEALER SERVICES — ELITE BLACK & WHITE UI SYSTEM (FULL)
   ========================================================= */
:root {
  --black: #000;
  --white: #fff;

  --border-white-soft: rgba(255, 255, 255, 0.25);
  --border-white: rgba(255, 255, 255, 0.5);
  --border-white-strong: rgba(255, 255, 255, 0.7);

  --hover-bg: rgba(255, 255, 255, 0.06);
  --active-bg: rgba(255, 255, 255, 0.10);

  --blue: #2D6BFF;
  --amber: #F0A33A;
  --red: #E23B3B;

  --sb-collapsed: 56px;
  --sb-expanded: 220px;
}

/* TRUE BLACK + WHITE TEXT - REMOVED: Now using unified theme system */

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
label,
a,
li,
td,
th {
  color: var(--white) !important;
}

/* NO ROUNDED ANYWHERE */
button,
.btn,
.side-link,
input,
select,
textarea,
.pill,
.chip {
  border-radius: 0 !important;
}

/* QUIET BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  background: transparent;
  border: 1px solid transparent;
  color: var(--white);

  padding: 8px 10px;
  font-size: 13px;
  font-weight: 500;

  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .06s ease;
}

.btn:hover {
  background: var(--hover-bg);
  border-color: var(--border-white);
}

.btn:active {
  background: var(--active-bg);
  transform: translateY(1px);
}

.btn.primary {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-white-strong);
}

.btn.primary:hover {
  background: rgba(255, 255, 255, 0.12);
}

.btn.danger {
  background: rgba(226, 59, 59, 0.18);
  border-color: rgba(226, 59, 59, 0.7);
}

/* ALERT STATES — LOUD */
@keyframes pulseBlue {

  0%,
  100% {
    background: rgba(45, 107, 255, .14)
  }

  50% {
    background: rgba(45, 107, 255, .32)
  }
}

@keyframes pulseOrange {

  0%,
  100% {
    background: rgba(240, 163, 58, .18)
  }

  50% {
    background: rgba(240, 163, 58, .36)
  }
}

@keyframes pulseRed {

  0%,
  100% {
    background: rgba(226, 59, 59, .22)
  }

  50% {
    background: rgba(226, 59, 59, .42)
  }
}

.pulse-blue {
  animation: pulseBlue .9s infinite;
  border: 1px solid var(--blue) !important;
}

.pulse-orange {
  animation: pulseOrange .9s infinite;
  border: 1px solid var(--amber) !important;
}

.pulse-red {
  animation: pulseRed .7s infinite;
  border: 1px solid var(--red) !important;
}

/* INPUTS */
input,
select,
textarea {
  background: var(--panel) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--border-white-strong) !important;
  outline: none !important;
}

/* DIVIDERS */
hr,
.divider {
  border-color: var(--border-white-soft) !important;
}

/* =========================
   APP SHELL + SIDEBAR
   ========================= */
.app-shell {
  display: grid;
  grid-template-columns: var(--sb-collapsed) 1fr;
  min-height: 100vh;
}

/* Sidebar */
.side-nav {
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid var(--border-white-soft);
  overflow: hidden;
  z-index: 20;
}

.side-nav__inner {
  width: var(--sb-expanded);
  height: 100%;
  padding: 12px 8px;
}

/* Brand */
.side-nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 14px 10px;
  border-bottom: 1px solid var(--border-white-soft);
  margin-bottom: 10px;
}

.side-nav__logo {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  font-weight: 600;
  letter-spacing: .02em;
}

.side-nav__brand-text {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .12s ease, transform .12s ease;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}

.side-nav:hover .side-nav__brand-text {
  opacity: 1;
  transform: translateX(0);
}

/* Group title */
.side-nav__group {
  padding: 10px 6px;
}

.side-nav__group-title {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 6px 10px;
  opacity: 0;
  transition: opacity .12s ease;
}

.side-nav:hover .side-nav__group-title {
  opacity: 0.9;
}

/* Links */
.side-link {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 10px;
  margin: 4px 0;

  text-decoration: none;
  border: 1px solid transparent;
  background: transparent;
  transition: background .12s ease, border-color .12s ease;
}

.side-link:hover {
  background: var(--hover-bg);
  border-color: var(--border-white);
}

.side-link.is-active {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--border-white-strong);
}

.side-link__icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
}

.side-link__label {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .12s ease, transform .12s ease;
  font-size: 13px;
  white-space: nowrap;
}

.side-nav:hover .side-link__label {
  opacity: 1;
  transform: translateX(0);
}

/* Main */
.app-main {
  min-width: 0;
}

.app-main__inner {
  padding-left: 0;
}

/* Mobile */
@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .side-nav {
    position: relative;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border-white-soft);
  }

  .side-nav__inner {
    width: 100%;
  }

  .side-nav__brand-text,
  .side-nav__group-title,
  .side-link__label {
    opacity: 1;
    transform: none;
  }
}

/* ===== Sidebar expand fix + SVG icons ===== */

.side-nav { width: var(--sb-collapsed); }              /* hard width when collapsed */
.side-nav__inner { width: var(--sb-expanded); }        /* actual inner width for expanded view */

/* IMPORTANT: grid must expand too (this is what was missing) */
.app-shell { grid-template-columns: var(--sb-collapsed) 1fr; transition: grid-template-columns .12s ease; }
.app-shell.nav-expanded { grid-template-columns: var(--sb-expanded) 1fr; }

.app-shell.nav-expanded .side-nav { width: var(--sb-expanded); }

/* Keep hover feel crisp */
.side-nav { transition: width .12s ease; }

/* SVG icon styling */
.sb-ico {
  width: 18px;
  height: 18px;
  display: block;
  stroke: rgba(255,255,255,0.92);
  stroke-width: 1.6;
  fill: none;
  vector-effect: non-scaling-stroke;
}
.side-link__icon { width: 32px; height: 32px; }
.side-link__icon svg { margin-left: 2px; }

/* Make hover/active a touch more “Supabase” */
.side-link:hover { border-color: rgba(255,255,255,0.55) !important; }
.side-link.is-active { border-color: rgba(255,255,255,0.85) !important; }

/* Optional: make titles always readable when expanded */
.side-nav:hover .side-nav__group-title { opacity: 1 !important; }


/* =========================================================
   OPTIMA — ELITE SYSTEM: TOPBAR + TYPO + DENSITY + FOCUS + BADGES + TICKER
   ========================================================= */

:root{
  --bg:#000;
  --fg:#fff;
  --muted: rgba(255,255,255,.78);
  --dim: rgba(255,255,255,.55);
  --border: rgba(255,255,255,.16);
  --border2: rgba(255,255,255,.26);
  --hover: rgba(255,255,255,.06);
  --active: rgba(255,255,255,.10);

  --sb-collapsed:56px;
  --sb-expanded:220px;

  --topbar-h: 44px;

  --fs-1: 22px;
  --fs-2: 15px;
  --fs-3: 13px;
  --lh: 1.35;

  --pad-1: 6px;
  --pad-2: 10px;
  --pad-3: 14px;

  --blue:#2D6BFF;
  --amber:#F0A33A;
  --red:#E23B3B;
}

/* Global typography */
html,body{ background:var(--bg)!important; color:var(--fg)!important; }
body{
  font-size: var(--fs-3);
  line-height: var(--lh);
  letter-spacing: .01em;
}
h1,h2,h3{ letter-spacing:.01em; }
h1{ font-size: var(--fs-1); }
h2{ font-size: 16px; }
h3{ font-size: 14px; }
p,span,label,td,th{ color:var(--fg)!important; }

/* Focus policy (calm but obvious) */
*:focus{ outline:none !important; }
*:focus-visible{
  outline: 2px solid rgba(255,255,255,.75) !important;
  outline-offset: 2px;
}

/* Buttons: quiet until hover */
.btn, button, a.btnlike{
  border-radius:0 !important;
  background:transparent !important;
  border:1px solid transparent !important;
  color:var(--fg) !important;
  padding: var(--pad-1) var(--pad-2);
  transition: background .12s ease, border-color .12s ease, transform .06s ease;
}
.btn:hover, button:hover, a.btnlike:hover{
  background:var(--hover) !important;
  border-color:var(--border2) !important;
}
.btn:active, button:active, a.btnlike:active{
  background:var(--active) !important;
  transform: translateY(1px);
}

/* Inputs */
input,select,textarea{
  border-radius:0 !important;
  background:var(--panel) !important;
  color:var(--text) !important;
  border:1px solid var(--line) !important;
  padding: var(--pad-1) var(--pad-2);
}
input:focus,select:focus,textarea:focus{
  border-color: rgba(255,255,255,.55) !important;
}

/* Shell expand fix */
.app-shell{
  display:grid;
  grid-template-columns: var(--sb-collapsed) 1fr;
  min-height:100vh;
  width:100%;
  transform:none;
}
.app-shell.nav-expanded{ grid-template-columns: var(--sb-expanded) 1fr; }

.side-nav{
  width: var(--sb-collapsed);
  border-right: 1px solid var(--border);
  overflow:hidden;
  position: sticky;
  top:0;
  height:100vh;
}
.app-shell.nav-expanded .side-nav{ width: var(--sb-expanded); }

.side-nav__inner{ width: var(--sb-expanded); padding: 12px 8px; }
.side-nav__brand{
  display:flex; align-items:center; gap:10px;
  padding:10px; border-bottom:1px solid var(--border); margin-bottom:10px;
}
.side-nav__logo{
  width:24px;height:24px; display:grid;place-items:center;
  font-weight:700; letter-spacing:.02em;
}
.side-nav__brand-text{
  opacity:0; transform: translateX(-4px);
  transition: opacity .12s ease, transform .12s ease;
  white-space:nowrap; font-size:13px; font-weight:700;
}
.side-nav:hover .side-nav__brand-text{ opacity:1; transform:none; }

.side-nav__group{ padding: 10px 6px; }
.side-nav__group-title{
  opacity:0; transition:opacity .12s ease;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  padding: 6px 10px; color:var(--dim);
}
.side-nav:hover .side-nav__group-title{ opacity:1; }

.side-link{
  display:grid; grid-template-columns:32px 1fr; gap:10px;
  align-items:center; height:36px; margin:4px 0; padding:0 10px;
  text-decoration:none;
  border:1px solid transparent;
  transition: background .12s ease, border-color .12s ease;
}
.side-link:hover{ background:var(--hover); border-color:var(--border2); }
.side-link.is-active{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.55); }

.side-link__icon{ width:32px; height:32px; display:grid; place-items:center; }
.side-link__label{
  opacity:0; transform: translateX(-4px);
  transition: opacity .12s ease, transform .12s ease;
  white-space:nowrap; font-size:13px; color:var(--muted);
}
.side-nav:hover .side-link__label{ opacity:1; transform:none; color:var(--fg); }

/* SVG icons */
.sb-ico{ width:18px; height:18px; stroke:rgba(255,255,255,.92); stroke-width:1.6; fill:none; vector-effect:non-scaling-stroke; }

/* Topbar */
.topbar{
  height: var(--topbar-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  border-bottom: 1px solid var(--border);
  padding: 0 var(--pad-3);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
}
.topbar__left{ display:flex; align-items:center; gap:10px; min-width:0; }
.topbar__title{ font-size: 13px; font-weight: 700; letter-spacing:.02em; }
.topbar__who{ font-size: 12px; color: var(--muted); white-space: nowrap; overflow:hidden; text-overflow:ellipsis; }

.topbar__right{ display:flex; align-items:center; gap:8px; }
.topbar__chip{
  border:1px solid var(--border);
  padding: 6px 8px;
  font-size: 12px;
  color: var(--muted);
}
.topbar__chip.is-active{ border-color: rgba(255,255,255,.55); color:#fff; }

/* Theme toggle buttons */
.theme-toggle {
  padding: 6px 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  font-size: 12px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.theme-toggle:hover {
  background: var(--hover-bg);
  border-color: var(--hairline);
  color: var(--text);
}

.theme-toggle.is-active {
  background: var(--active-bg);
  border-color: var(--accent-blue);
  color: var(--text);
}

/* Badges (square, calm) */
.badge{
  display:inline-flex; align-items:center;
  border:1px solid var(--border);
  padding: 4px 8px;
  font-size: 12px;
  color: var(--muted);
}
.badge.good{ border-color: rgba(255,255,255,.28); }
.badge.warn{ border-color: rgba(240,163,58,.55); color:#fff; }
.badge.bad{ border-color: rgba(226,59,59,.55); color:#fff; }

/* Animation policy: ONLY alert pulses */
@keyframes pulseBlue { 0%,100%{background:rgba(45,107,255,.14)} 50%{background:rgba(45,107,255,.32)} }
@keyframes pulseOrange { 0%,100%{background:rgba(240,163,58,.18)} 50%{background:rgba(240,163,58,.36)} }
@keyframes pulseRed { 0%,100%{background:rgba(226,59,59,.22)} 50%{background:rgba(226,59,59,.42)} }
.pulse-blue{ animation:pulseBlue .9s infinite; border:1px solid var(--blue)!important; }
.pulse-orange{ animation:pulseOrange .9s infinite; border:1px solid var(--amber)!important; }
.pulse-red{ animation:pulseRed .7s infinite; border:1px solid var(--red)!important; }

/* Executive stock board */
.stockboard{
  padding: var(--pad-3);
}
.stockgrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.stockcard{
  border:1px solid var(--border);
  padding: 12px;
}
.stockcard h3{ margin:0 0 8px 0; font-size:13px; font-weight:800; }
.stockrow{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding: 6px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.stockrow:first-child{ border-top:none; }
.stockk{ color: var(--muted); }
.stockv{ color:#fff; font-weight:700; }
.ticker{
  margin-top: 12px;
  border:1px solid var(--border);
  overflow:hidden;
  white-space:nowrap;
}
.ticker__inner{
  display:inline-block;
  padding: 10px 12px;
  animation: tickerMove 18s linear infinite;
}
@keyframes tickerMove{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-35%); }
}
.ticker__item{ margin-right: 24px; color: var(--muted); }
.ticker__item b{ color:#fff; }

@media (max-width: 900px){
  .stockgrid{ grid-template-columns: 1fr; }
}

/* =========================================================
   DEMO HARDENING THEME EXTENSION (APPENDED — SAFE)
   ========================================================= */

/* True black baseline - REMOVED: Now using unified theme system */

/* Sidebar hover-expand (CSS only, no JS risk) */
.side-nav {
  width: 56px;
  transition: width 180ms ease;
  overflow: hidden;
}

.side-nav:hover {
  width: 220px;
}

.side-nav__brand-text,
.side-link__label {
  opacity: 0;
  white-space: nowrap;
  transition: opacity 120ms ease;
}

.side-nav:hover .side-nav__brand-text,
.side-nav:hover .side-link__label {
  opacity: 1;
}

/* Calm hover states */
.side-link:hover,
tbody tr:hover {
  background: rgba(255,255,255,0.04);
}

/* De-pill buttons */
.btn {
  border-radius: 4px !important;
}

/* Timer severity colors */
.timer-green { color: #4ade80; }
.timer-yellow { color: #facc15; }
.timer-orange { color: #fb923c; }
.timer-red { color: #f87171; }

/* Screen context header */
.screen-context {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-bottom: 0.5rem;
}

/* =========================================================
   PUBLIC LANDING + LOGIN (PRE-LOGIN ONLY)
   ========================================================= */

.public-landing,
.public-login {
  background: #000 !important;
  color: #fff !important;
}

.landing {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 48px 18px;
}

.landing-card {
  width: min(760px, 100%);
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.02);
  padding: 28px;
}

.landing-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 18px;
}

.landing-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.45);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.landing-company {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  opacity: 0.92;
}

.landing-product {
  font-size: 13px;
  opacity: 0.72;
  margin-top: 3px;
}

.landing-copy {
  margin-top: 10px;
}

.landing-headline {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.35;
}

.landing-sub {
  margin-top: 10px;
  font-size: 13px;
  opacity: 0.74;
  line-height: 1.5;
}

.landing-actions {
  margin-top: 22px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.landing-foot {
  margin-top: 18px;
  font-size: 12px;
  opacity: 0.55;
}

/* Button polish for pre-login pages */
.public-landing .btn,
.public-login .btn {
  border-radius: 0 !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  background: transparent !important;
  color: #fff !important;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.public-landing .btn:hover,
.public-login .btn:hover {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.45) !important;
}

.public-landing .btn:active,
.public-login .btn:active {
  transform: translateY(1px);
}

.public-landing .btn.btn-primary,
.public-login .btn.btn-primary {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.60) !important;
}

/* LOGIN LAYOUT (fixes “raw bars at top”) */
.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 48px 18px;
}

.login-card {
  width: min(440px, 100%);
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.02);
  padding: 22px;
}

.login-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}

.login-sub {
  font-size: 13px;
  opacity: 0.70;
  margin-bottom: 18px;
}

.login-error {
  margin-top: 10px;
  font-size: 12px;
  color: #fff;
  opacity: 0.85;
}

.login-actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
}

.public-login input.input-text {
  width: 100%;
  border-radius: 0 !important;
  background: #000 !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  padding: 10px 12px;
  font-size: 13px;
}

.public-login input.input-text:focus {
  outline: none !important;
  border-color: rgba(255,255,255,0.55) !important;
}

/* Make labels readable on pre-login */
.public-login label {
  display: block;
  font-size: 12px;
  opacity: 0.75;
  margin-bottom: 6px;
}

/* Ensure no sidebar/topbar accidentally affects pre-login */
.public-login .app-shell,
.public-landing .app-shell {
  display: block !important;
}


/* =========================================================
   V2 PUBLIC LANDING + V2 LOGIN (PRE-LOGIN ONLY)
   ========================================================= */

body.public-landing,
body.public-login {
  background: #000 !important;
  color: #fff !important;
}

/* Shared pre-login button system */
body.public-landing .btn,
body.public-login .btn {
  border-radius: 0 !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  background: transparent !important;
  color: #fff !important;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .12s ease, border-color .12s ease, transform .06s ease;
}
body.public-landing .btn:hover,
body.public-login .btn:hover {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.45) !important;
}
body.public-landing .btn:active,
body.public-login .btn:active {
  transform: translateY(1px);
}
body.public-landing .btn.btn-primary,
body.public-login .btn.btn-primary {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.60) !important;
}
body.public-landing .btn.btn-ghost,
body.public-login .btn.btn-ghost {
  border-color: rgba(255,255,255,0.20) !important;
}

/* Landing layout */
.landing-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #000;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.landing-header__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.landing-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 240px;
}
.landing-mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.42);
  font-weight: 900;
  letter-spacing: 0.02em;
}
.landing-company {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  opacity: 0.92;
}
.landing-product {
  font-size: 12px;
  opacity: 0.70;
  margin-top: 2px;
}

.landing-nav {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.landing-navlink {
  font-size: 12px;
  color: rgba(255,255,255,0.70);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.landing-navlink:hover {
  color: #fff;
}

.landing-cta {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  min-width: 260px;
}

.landing-main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 26px 18px 40px;
}

/* Subtle background grid (no gradients/glass) */
.landing-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 120px 120px;
  opacity: 0.35;
  mask-image: radial-gradient(circle at 50% 20%, rgba(0,0,0,0.95), rgba(0,0,0,0.25) 55%, transparent 80%);
}

.hero {
  padding: 18px 0 26px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  align-items: start;
}
.hero-kicker {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  opacity: 0.78;
}
.hero-title {
  margin: 12px 0 10px;
  font-size: 40px;
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.hero-sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  opacity: 0.78;
  max-width: 56ch;
}
.hero-actions {
  margin-top: 18px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.hero-proof {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.proof-item {
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.02);
  padding: 12px;
}
.proof-k {
  font-size: 11px;
  opacity: 0.62;
  letter-spacing: 0.06em;
}
.proof-v {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 800;
  opacity: 0.92;
}

.frame {
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.02);
}
.frame__top {
  padding: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.frame__title {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
  opacity: 0.92;
}
.frame__meta {
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.66;
}
.frame__body {
  padding: 14px;
}
.metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.metric {
  border: 1px solid rgba(255,255,255,0.12);
  padding: 12px;
  background: rgba(0,0,0,0.30);
}
.metric-k {
  font-size: 11px;
  opacity: 0.62;
  letter-spacing: 0.06em;
}
.metric-v {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
}
.divider {
  height: 1px;
  background: rgba(255,255,255,0.10);
  margin: 14px 0;
}
.mini-list {
  display: grid;
  gap: 8px;
}
.mini-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  padding: 10px;
  background: rgba(255,255,255,0.02);
}
.mini-tag {
  font-size: 12px;
  font-weight: 900;
  opacity: 0.92;
  letter-spacing: 0.04em;
}
.mini-status {
  font-size: 11px;
  opacity: 0.70;
  letter-spacing: 0.10em;
}
.mini-time {
  font-size: 12px;
  font-weight: 900;
  opacity: 0.92;
}
.frame__foot {
  margin-top: 12px;
  font-size: 11px;
  opacity: 0.55;
  letter-spacing: 0.02em;
}

.section {
  padding: 26px 0;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.section__title {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.section__sub {
  margin: 0;
  font-size: 13px;
  opacity: 0.70;
  max-width: 70ch;
}

.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.feature {
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.02);
  padding: 14px;
}
.feature__title {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.feature__text {
  margin-top: 8px;
  font-size: 12px;
  opacity: 0.72;
  line-height: 1.55;
}

.use-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.use {
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.02);
  padding: 14px;
}
.use__k {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.use__v {
  margin-top: 8px;
  font-size: 12px;
  opacity: 0.72;
  line-height: 1.55;
}

.security {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.security__card {
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.02);
  padding: 14px;
}
.security__title {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.security__text {
  margin-top: 8px;
  font-size: 12px;
  opacity: 0.72;
  line-height: 1.55;
}
.section__cta {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.landing-footer {
  padding: 18px 0 0;
  border-bottom: none;
}
.landing-footer__inner {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  color: rgba(255,255,255,0.60);
  font-size: 12px;
  letter-spacing: 0.02em;
}

/* Responsive */
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
  .landing-nav { display: none; }
  .landing-brand { min-width: 0; }
  .landing-cta { min-width: 0; }
  .hero-title { font-size: 34px; }
  .feature-grid { grid-template-columns: 1fr; }
  .security { grid-template-columns: 1fr; }
  .hero-proof { grid-template-columns: 1fr; }
  .use-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   V2 LOGIN UI (PRE-LOGIN ONLY)
   ========================================================= */

.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 48px 18px;
}
.login-card {
  width: min(460px, 100%);
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.02);
  padding: 22px;
}
.login-brandrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  margin-bottom: 14px;
}
.login-mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.42);
  font-weight: 900;
}
.login-brandtext .login-company {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  opacity: 0.92;
}
.login-brandtext .login-product {
  font-size: 12px;
  opacity: 0.70;
  margin-top: 2px;
}

.login-title {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.02em;
  margin: 10px 0 6px;
}
.login-sub {
  font-size: 13px;
  opacity: 0.70;
  margin-bottom: 16px;
  line-height: 1.5;
}

.public-login label {
  display: block;
  font-size: 12px;
  opacity: 0.75;
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.public-login input.input-text {
  width: 100%;
  border-radius: 0 !important;
  background: #000 !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  padding: 10px 12px;
  font-size: 13px;
}
.public-login input.input-text:focus {
  outline: none !important;
  border-color: rgba(255,255,255,0.55) !important;
}

.login-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}
.login-meta {
  font-size: 12px;
  opacity: 0.65;
}
.login-actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.login-error {
  margin-top: 10px;
  font-size: 12px;
  color: #fff;
  opacity: 0.85;
  border-left: 2px solid rgba(255,255,255,0.35);
  padding-left: 10px;
}
.login-foot {
  margin-top: 14px;
  font-size: 11px;
  opacity: 0.55;
  line-height: 1.5;
}

/* =========================================================
   MINIMAL PRE-LOGIN SURFACES (LANDING + LOGIN ONLY)
   ========================================================= */
.public-landing,
.public-login {
  background: #000 !important;
  color: #fff !important;
}

.public-landing .secure-entry,
.public-login .prelogin-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 64px 18px;
}

.public-landing .secure-card,
.public-login .prelogin-card {
  width: min(460px, 100%);
  border: 1px solid rgba(255,255,255,0.24);
  background: rgba(255,255,255,0.04);
  padding: 28px;
  border-radius: 0;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
}

.public-landing .secure-brand,
.public-login .secure-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  margin-bottom: 16px;
}

.public-landing .secure-mark,
.public-login .secure-mark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.48);
  font-weight: 900;
  letter-spacing: 0.02em;
}

.public-landing .secure-company,
.public-login .secure-company {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  opacity: 0.9;
}

.public-landing .secure-product,
.public-login .secure-product {
  font-size: 12px;
  opacity: 0.7;
  margin-top: 2px;
}

.public-landing .secure-descriptor {
  font-size: 16px;
  letter-spacing: 0.02em;
  opacity: 0.86;
  margin-bottom: 18px;
}

.public-landing .secure-action {
  margin-top: 10px;
}

.public-login .prelogin-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.01em;
  margin: 6px 0 6px;
}

.public-login .prelogin-sub {
  font-size: 13px;
  opacity: 0.7;
  margin-bottom: 18px;
  letter-spacing: 0.01em;
}

.public-login .prelogin-form {
  display: grid;
  gap: 14px;
}

.public-login .prelogin-actions {
  margin-top: 6px;
}

.public-login .prelogin-foot {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  opacity: 0.7;
}

.public-login .prelogin-back {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  padding: 4px 0;
}

/* =========================================================
   GLOBAL FLAT OVERRIDES (NO CARDS / ROUNDED PANELS)
   ========================================================= */
.card,
.panel,
.section,
.table-wrapper,
.kpi-card,
.market-tile,
.market-detail,
.new-pickup-form,
.sales-card,
.inline-dialog,
.note-pill,
.timer,
.stockcard,
.frame,
.feature,
.use,
.security__card,
.ticker {
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.section {
  padding: 18px 0 !important;
  margin-bottom: 1.2rem !important;
  border-top: 1px solid var(--border) !important;
}

.section:first-of-type {
  border-top: none !important;
}

.table-wrapper {
  border-top: 1px solid var(--border) !important;
}

.public-login .input-group {
  display: grid;
  gap: 6px;
}

/* ================= SYSTEM HARDENING LAYER ================= */

/* System Tokens */
:root {
  --s-1: 6px;
  --s-2: 10px;
  --s-3: 14px;
  --s-4: 18px;
  
  --fs-screen-title: 15px;
  --fs-section-title: 13px;
  --fs-table-header: 11px;
  --fs-body: 13px;
  --fs-meta: 12px;
  
  --lh-tight: 1.2;
  --lh-normal: 1.35;
  --lh-relaxed: 1.5;
}

/* Global Flat Enforcement */
*,
*::before,
*::after {
  border-radius: 0 !important;
}

.card,
.panel,
.section,
.table-wrapper,
.kpi-card,
.market-tile,
.market-detail,
.new-pickup-form,
.sales-card,
.inline-dialog,
.note-pill,
.timer,
.stockcard,
.frame,
.feature,
.use,
.security__card,
.ticker {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Typography Scale */
.section-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: var(--lh-tight);
  color: var(--text);
}

.section-subtitle {
  font-size: 12px;
  color: var(--text-2);
  opacity: 0.70;
  line-height: var(--lh-normal);
}

/* Spacing System */
.section {
  margin-bottom: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
}

.section:first-of-type {
  border-top: none;
  padding-top: 0;
}

.section-header {
  margin-bottom: var(--s-2);
}

/* Table System - Global Standard */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
}

thead th {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  opacity: 0.70;
  border-bottom: 1px solid var(--border);
  padding: var(--s-2) var(--s-2);
  font-weight: 500;
  text-align: left;
}

tbody td {
  border-bottom: 1px solid var(--border);
  padding: var(--s-2) var(--s-2);
  color: var(--text);
  line-height: var(--lh-normal);
}

tbody tr:hover {
  background: rgba(255, 255, 255, 0.015);
}

/* Time columns right-aligned */
th[class*="time"],
td[class*="time"],
th:last-child,
td:last-child {
  text-align: right;
}

/* Primary column emphasis */
tbody td:first-child {
  font-weight: 600;
  color: var(--text);
}

/* Empty states */
.empty {
  padding: var(--s-3) var(--s-2);
  font-size: var(--fs-meta);
  color: var(--text-3);
  text-align: center;
  font-style: italic;
}

/* Dividers - Thin, deliberate */
hr,
.divider {
  border: none;
  height: 1px;
  background: var(--border);
  margin: var(--s-3) 0;
}

/* Flat backgrounds - no gradients, no shadows */
.table-wrapper,
.section,
.card,
.panel {
  background: transparent;
  border: none;
  border-top: 1px solid var(--border);
}

.table-wrapper:first-child,
.section:first-child {
  border-top: none;
}

/* ================= ROLE AUTHORITY STYLING ================= */

/* Wallboard - Broadcast Screen */
body.role-wallboard {
  user-select: none;
  -webkit-user-select: none;
}

body.role-wallboard table tbody tr {
  height: 48px;
}

body.role-wallboard thead th,
body.role-wallboard tbody td {
  font-size: 14px;
  padding: var(--s-3) var(--s-2);
}

body.role-wallboard tbody tr:hover {
  background: transparent !important;
  cursor: default !important;
}

body.role-wallboard tbody tr {
  cursor: default !important;
}

body.role-wallboard tbody tr * {
  cursor: default !important;
  pointer-events: none !important;
}

body.role-wallboard .section-title {
  font-size: 16px;
}

/* Suppress secondary columns visually on wallboard */
body.role-wallboard th:nth-child(n+4),
body.role-wallboard td:nth-child(n+4) {
  opacity: 0.7;
}

/* Dispatcher - Command Center */
body.role-dispatcher .section-active {
  border-top-width: 2px;
  border-top-color: rgba(45, 107, 255, 0.4);
}

body.role-dispatcher .section-active .section-title {
  font-weight: 700;
  color: var(--text);
}

/* De-emphasize Stage/Completed */
body.role-dispatcher .section-staged,
body.role-dispatcher .section-completed {
  opacity: 0.85;
}

body.role-dispatcher .section-staged .section-title,
body.role-dispatcher .section-completed .section-title {
  font-weight: 500;
  color: var(--text-2);
}

/* Key Machine & Car Wash - Tight, Repetitive */
body.role-keymachine .section,
body.role-carwash .section {
  margin-bottom: var(--s-2);
  padding-top: var(--s-2);
}

body.role-keymachine .app-header,
body.role-carwash .app-header {
  padding: var(--s-1) var(--s-2);
  border-bottom-width: 1px;
}

body.role-keymachine .section-title,
body.role-carwash .section-title {
  font-size: var(--fs-section-title);
}

body.role-keymachine table,
body.role-carwash table {
  font-size: var(--fs-body);
}

/* Service Advisor & Loan Car - Kiosk-like */
body.role-serviceadvisor .app-main,
body.role-loancar .app-main {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: var(--s-4);
}

body.role-serviceadvisor .section,
body.role-loancar .section {
  max-width: 500px;
  margin: 0 auto;
}

body.role-serviceadvisor .app-header,
body.role-loancar .app-header {
  text-align: center;
}

body.role-serviceadvisor .header-right,
body.role-loancar .header-right {
  justify-content: center;
}

/* Sales - Distinct but Same System */
body.role-sales_manager .section-title,
body.role-sales_driver .section-title {
  font-size: var(--fs-section-title);
  font-weight: 600;
}

body.role-sales_manager .section,
body.role-sales_driver .section {
  margin-bottom: var(--s-3);
}

/* ================= IDENTITY HARDENING ================= */

/* Topbar is the single source of identity - displays as: "Optima Dealer Services · <Store Name> · <Role>" */
.topbar__left {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.topbar__title {
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
}

.topbar__who {
  font-size: var(--fs-meta);
  color: var(--text-2);
  font-weight: 500;
}

.topbar__left:has(.topbar__who:not(:empty)) .topbar__title::after {
  content: " · ";
  color: var(--text-2);
  font-weight: 400;
  margin: 0 var(--s-1);
}

/* Remove any duplicate brand headers */
.app-header .brand {
  display: none !important;
}

.app-header .subtitle {
  display: none !important;
}

/* Screen context should not appear */
.screen-context {
  display: none !important;
}

/* Page title should show PURPOSE only */
.app-header .section-title {
  font-size: var(--fs-screen-title);
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}

/* ================= PROTOTYPE NOISE REMOVAL ================= */

/* Suppress debug labels */
#build-stamp {
  display: none !important;
}

/* Remove explanatory text that forces "ignore this" */
.section-subtitle {
  opacity: 0.7;
}

/* Keep only essential UI - remove secondary explanatory text */
body.role-wallboard .section-subtitle,
body.role-keymachine .section-subtitle,
body.role-carwash .section-subtitle {
  display: none;
}

/* ================= DISPATCHER CONTROL GROUPS ================= */

.role-dispatcher .ctl-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem 0;
}

.role-dispatcher .ctl-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.role-dispatcher .ctl-status,
.role-dispatcher .ctl-keys {
  min-height: 60px;
}

.role-dispatcher .ctl-status .status-badge,
.role-dispatcher .ctl-keys .status-badge {
  margin-bottom: 0.3rem;
}

/* Improve button/chip readability */
.role-dispatcher .wash-buttons .btn,
.role-dispatcher .valet-grid .btn {
  min-height: 32px;
  padding: 0.4rem 0.7rem;
}

/* ================= FINAL FLAT LOCK ================= */

/* Ensure no rounded corners anywhere */
button,
.btn,
input,
select,
textarea,
.pill,
.chip,
.badge,
.status-badge,
.timer,
.note-pill {
  border-radius: 0 !important;
}

/* No floating panels */
.modal {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* No box shadows */
* {
  box-shadow: none !important;
}

/* Flat dividers only */
.table-wrapper::before,
.table-wrapper::after,
.section::before,
.section::after {
  display: none !important;
}

/* =========================================================
   UNIFIED THEME SYSTEM + SECTION BORDERS + ACTIVE PULSE
   ========================================================= */

/* Remove all hard-coded black backgrounds - use variables */
html,
body,
.app-shell,
.app-main,
.app-main__inner,
.side-nav,
.side-nav__inner,
.topbar {
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Unified theme tokens (highest precedence) */
:root {
  /* Core surfaces */
  --bg: #000000;
  --panel: #000000;
  --panel2: #050505;
  --text: #EAEAEA;
  --muted: #A8A8A8;
  --line: rgba(255, 255, 255, 0.16);
  --hover: rgba(255, 255, 255, 0.04);
  --chip: rgba(255, 255, 255, 0.08);
  --chipText: #EAEAEA;
  
  /* Accents */
  --accentBlue: #2D6BFF;
  --accentBlueTint: rgba(45, 107, 255, 0.06);
  --accentWarn: #F0A33A;
  --accentDanger: #E23B3B;
}

/* Light theme */
html[data-theme="light"] {
  --bg: #FFFFFF;
  --panel: #FFFFFF;
  --panel2: #FAFAFA;
  --text: #1A1A1A;
  --muted: #525252;
  --line: rgba(0, 0, 0, 0.16);
  --hover: rgba(0, 0, 0, 0.04);
  --chip: rgba(0, 0, 0, 0.08);
  --chipText: #1A1A1A;
  
  --accentBlue: #2D6BFF;
  --accentBlueTint: rgba(45, 107, 255, 0.08);
  --accentWarn: #F0A33A;
  --accentDanger: #E23B3B;
}

/* Apply theme to all major containers */
body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

.app-shell,
.app-main,
.app-main__inner {
  background: var(--bg) !important;
}

.side-nav,
.side-nav__inner {
  background: var(--bg) !important;
  color: var(--text) !important;
}

.topbar {
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Section borders everywhere (subtle, not big circles) */
.section {
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: var(--panel) !important;
  padding: 18px !important;
  margin-bottom: 1.2rem !important;
}

.section-header {
  border-bottom: none !important;
  padding-bottom: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.table-wrapper {
  background: transparent !important;
  border: 0 !important;
  border-top: none !important;
  border-radius: 0 !important;
}

/* Dispatcher Active Pickups: Thick white pulsing border ONLY (no blue tint) */
body.role-dispatcher .section.section-active {
  border: 2px solid rgba(255, 255, 255, 0.35) !important;
  background: transparent !important;
  position: relative;
  padding-left: 18px !important;
  animation: pulseBorderWhiteThick 2s ease-in-out infinite;
}

@keyframes pulseBorderWhiteThick {
  0%, 100% {
    border-color: rgba(255, 255, 255, 0.35);
  }
  50% {
    border-color: rgba(255, 255, 255, 0.85);
  }
}

/* Active section title - no blue color, just white */
body.role-dispatcher .section.section-active .section-title {
  color: var(--text) !important;
  font-weight: 700 !important;
}

/* Fix chip density: Status/Location + Valet names */
.role-dispatcher .ctl-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.4rem !important;
}

.role-dispatcher .ctl-status,
.role-dispatcher .ctl-keys {
  min-height: auto !important;
}

.role-dispatcher .wash-buttons,
.role-dispatcher .valet-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 10px !important;
  align-items: center !important;
}

.role-dispatcher .wash-buttons .btn,
.role-dispatcher .valet-grid .btn {
  white-space: nowrap !important;
  min-height: 28px !important;
  padding: 6px 10px !important;
  flex-shrink: 0 !important;
  width: auto !important; /* Override grid width: 100% */
}

.role-dispatcher .status-badge {
  white-space: nowrap !important;
  margin-bottom: 0.3rem !important;
}

/* Ensure inputs and other elements use theme */
input,
select,
textarea {
  background: var(--panel) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accentBlue) !important;
}

/* Table styling with theme */
table {
  background: transparent !important;
}

thead th {
  color: var(--muted) !important;
  border-bottom: 1px solid var(--line) !important;
}

tbody td {
  color: var(--text) !important;
  border-bottom: 1px solid var(--line) !important;
}

tbody tr:hover {
  background: var(--hover) !important;
}

/* Buttons use theme */
.btn {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--text) !important;
}

.btn:hover {
  background: var(--hover) !important;
  border-color: var(--line) !important;
}

/* Chips and badges */
.pill-blue,
.status-badge,
.timer {
  background: var(--chip) !important;
  color: var(--chipText) !important;
  border: 1px solid var(--line) !important;
}

/* ================= OPTIMA THEME + LANES (OVERRIDE LAYER) ================= */

/* Theme tokens on html root */
html {
  --bg: #000;
  --panel: rgba(255, 255, 255, 0.02);
  --panel2: rgba(255, 255, 255, 0.00);
  --text: #fff;
  --muted: rgba(255, 255, 255, 0.70);
  --line: rgba(255, 255, 255, 0.14);
  --line2: rgba(255, 255, 255, 0.22);
  --hover: rgba(255, 255, 255, 0.05);
  --accentBlue: #3B82F6;
  --accentBlueTint: rgba(59, 130, 246, 0.06);
  --warn: #F59E0B;
  --danger: #EF4444;
}

/* Light theme tokens */
html[data-theme="light"] {
  --bg: #fff;
  --panel: rgba(0, 0, 0, 0.03);
  --panel2: rgba(0, 0, 0, 0.00);
  --text: #000;
  --muted: rgba(0, 0, 0, 0.60);
  --line: rgba(0, 0, 0, 0.12);
  --line2: rgba(0, 0, 0, 0.18);
  --hover: rgba(0, 0, 0, 0.04);
  --accentBlue: #2563EB;
  --accentBlueTint: rgba(37, 99, 235, 0.08);
  --warn: #D97706;
  --danger: #DC2626;
}

/* Force all major surfaces to use tokens (100% theme coverage) */
html,
body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

.app-shell,
.app-main,
.app-main__inner,
.side-nav,
.side-nav__inner,
.topbar {
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Panel containers use var(--panel) */
.table-wrapper,
.new-pickup-form,
.card,
.panel {
  background: var(--panel) !important;
}

/* Lane frames: subtle section borders (square, not rounded) */
.section {
  border: 1px solid var(--line) !important;
  background: var(--panel2) !important;
  border-radius: 0 !important;
  padding: 18px !important;
  margin-bottom: 1.2rem !important;
}

.section-header {
  border-bottom: 1px solid var(--line) !important;
  padding-bottom: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

/* Table styling */
table thead th {
  color: var(--muted) !important;
  border-bottom: 1px solid var(--line) !important;
}

tbody tr:hover {
  background: var(--hover) !important;
}

/* Remove blue tint from active sections (only dispatcher gets white border) */
.section-active {
  background: transparent !important;
}

/* Pulsing hairline border animation */
@keyframes optimaPulse {
  0%, 100% {
    border-color: rgba(255, 255, 255, 0.20);
  }
  50% {
    border-color: rgba(255, 255, 255, 0.60);
  }
}

/* ONE pulsing border per screen - Dispatcher Active Pickups (thick white only) */
body.role-dispatcher .section.section-active {
  animation: pulseBorderWhiteThick 2s ease-in-out infinite !important;
  border: 2px solid rgba(255, 255, 255, 0.35) !important;
  background: transparent !important;
}

/* ONE pulsing border per screen - Wallboard Active Pickups */
body.role-wallboard .section.section-active {
  animation: optimaPulse 1.1s ease-in-out infinite !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
}

/* ONE pulsing border per screen - Sales Manager Active Requests */
body.role-sales_manager .section.section-active,
body.role-sales-manager .section.section-active {
  animation: optimaPulse 1.1s ease-in-out infinite !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
}

/* Light theme pulse adjustment for dispatcher (thick white border) */
@keyframes pulseBorderWhiteThickLight {
  0%, 100% {
    border-color: rgba(0, 0, 0, 0.35);
  }
  50% {
    border-color: rgba(0, 0, 0, 0.85);
  }
}

html[data-theme="light"] body.role-dispatcher .section.section-active {
  animation: pulseBorderWhiteThickLight 2s ease-in-out infinite !important;
  border: 2px solid rgba(0, 0, 0, 0.35) !important;
  background: transparent !important;
}

/* Other roles keep their pulse (wallboard, sales manager) */
html[data-theme="light"] body.role-wallboard .section.section-active,
html[data-theme="light"] body.role-sales_manager .section.section-active,
html[data-theme="light"] body.role-sales-manager .section.section-active {
  border-color: rgba(0, 0, 0, 0.20) !important;
}

@keyframes optimaPulseLight {
  0%, 100% {
    border-color: rgba(0, 0, 0, 0.20);
  }
  50% {
    border-color: rgba(0, 0, 0, 0.60);
  }
}

html[data-theme="light"] body.role-wallboard .section.section-active,
html[data-theme="light"] body.role-sales_manager .section.section-active,
html[data-theme="light"] body.role-sales-manager .section.section-active {
  animation: optimaPulseLight 1.1s ease-in-out infinite !important;
}

/* Dispatcher chip overlap fix - Status/Location + Keys With */
.role-dispatcher .wash-buttons,
.role-dispatcher .valet-grid,
.role-dispatcher .keys-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 10px !important;
  align-items: center !important;
}

.role-dispatcher .wash-buttons .btn,
.role-dispatcher .valet-grid .btn,
.role-dispatcher .keys-buttons .btn {
  white-space: nowrap !important;
  padding: 6px 10px !important;
  min-height: 28px !important;
  flex-shrink: 0 !important;
  width: auto !important;
}

/* Override grid layout for valet-grid to allow wrapping */
.role-dispatcher .valet-grid {
  display: flex !important;
  grid-template-columns: none !important;
}

/* Chip/button color tokens */
.btn.danger,
.btn-danger {
  background: rgba(var(--danger-rgb, 239, 68, 68), 0.10) !important;
  border-color: var(--danger) !important;
  color: var(--text) !important;
}

.btn.warn,
.btn-warn {
  background: rgba(var(--warn-rgb, 245, 158, 11), 0.10) !important;
  border-color: var(--warn) !important;
  color: var(--text) !important;
}

/* Inputs and form elements use theme */
input,
select,
textarea {
  background: var(--panel) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accentBlue) !important;
  outline: none !important;
}

/* Ensure all text elements use theme colors */
h1, h2, h3, h4, h5, h6,
p, span, label, a, li,
td, th {
  color: var(--text) !important;
}

small,
.muted {
  color: var(--muted) !important;
}

/* =========================
   LOGIN (V3) — PREMIUM HERO
   Scoped: body.public-login.login-v3
   ========================= */

body.public-login.login-v3 {
  background: #000 !important;
  color: #fff !important;
  overflow-x: hidden;
}

body.public-login.login-v3 .login-stage {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 18px;
  position: relative;
  z-index: 2;
}

/* HERO BACKGROUND LAYERS */
body.public-login.login-v3 .login-hero {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #000;
  overflow: hidden;
}

/* Vignette + spotlight for car-like feel */
body.public-login.login-v3 .login-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 1200px 700px at 50% 65%, rgba(255,255,255,0.12), transparent 60%),
    radial-gradient(ellipse 1600px 1000px at 50% 20%, rgba(255,255,255,0.08), transparent 65%),
    radial-gradient(ellipse 1400px 900px at 50% 95%, rgba(0,0,0,0.90), rgba(0,0,0,1));
  opacity: 1;
}

/* Large blurred logo watermark - car background feel */
body.public-login.login-v3 .login-hero::after {
  content: "";
  position: absolute;
  inset: -15%;
  background-image: url("assets/optima-logo-new.jpg");
  background-repeat: no-repeat;
  background-position: center 50%;
  background-size: min(1600px, 150vw);
  filter: blur(2.5px);
  opacity: 0.20;
  transform: scale(1.05);
  mask-image: radial-gradient(ellipse 100% 80% at 50% 55%, rgba(0,0,0,0.90), rgba(0,0,0,0.30) 65%, transparent 85%);
}

/* Subtle grain texture overlay */
body.public-login.login-v3 .login-stage::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 2px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 2px);
  opacity: 0.12;
  mix-blend-mode: overlay;
}

/* TOP HERO LOGO (BIG) */
body.public-login.login-v3 .login-brand-top {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: min(980px, 92vw);
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

body.public-login.login-v3 .login-brand-top__logo {
  width: 100%;
  display: flex;
  justify-content: center;
}

body.public-login.login-v3 .login-brand-top__logo img {
  width: min(980px, 92vw);
  height: auto;
  opacity: 0.98;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}

/* LOGIN CARD - Translucent with visible border */
body.public-login.login-v3 .login-card-v3 {
  width: min(520px, 92vw);
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.45);
  backdrop-filter: none;
  padding: 32px 28px;
  margin-top: 180px;
  position: relative;
  z-index: 3;
}

/* Internal logo inside card (if needed) */
body.public-login.login-v3 .login-card-v3__logo {
  display: none; /* Hidden by default, can be shown if logo needed inside card */
}

/* Title - Strong and prominent */
body.public-login.login-v3 .login-card-v3__title {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  text-align: center;
  color: #fff;
}

body.public-login.login-v3 .login-card-v3__form {
  display: grid;
  gap: 18px;
}

/* Fields */
body.public-login.login-v3 .login-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.public-login.login-v3 .login-field label {
  display: block;
  font-size: 12px;
  opacity: 0.85;
  margin-bottom: 0;
  letter-spacing: 0.02em;
  font-weight: 500;
  color: #fff;
}

body.public-login.login-v3 input.input-text {
  width: 100%;
  border-radius: 0 !important;
  background: rgba(0,0,0,0.80) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  padding: 14px 14px;
  font-size: 14px;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

body.public-login.login-v3 input.input-text:focus {
  outline: none !important;
  border-color: rgba(255,255,255,0.60) !important;
  background: rgba(0,0,0,0.85) !important;
}

body.public-login.login-v3 input.input-text::placeholder {
  color: rgba(255,255,255,0.45);
  opacity: 1;
}

/* Actions */
body.public-login.login-v3 .login-actions-v3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

body.public-login.login-v3 .login-actions-v3 .btn {
  width: 100%;
}

body.public-login.login-v3 .btn {
  border-radius: 0 !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
  cursor: pointer;
  box-sizing: border-box;
}

body.public-login.login-v3 .btn:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.50) !important;
}

body.public-login.login-v3 .btn:active {
  transform: translateY(1px);
  background: rgba(255,255,255,0.10) !important;
}

body.public-login.login-v3 .btn.btn-primary {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.65) !important;
}

body.public-login.login-v3 .btn.btn-primary:hover {
  background: rgba(255,255,255,0.16) !important;
  border-color: rgba(255,255,255,0.75) !important;
}

/* Errors + footer */
body.public-login.login-v3 .login-error {
  font-size: 12px;
  opacity: 0.95;
  border-left: 2px solid rgba(255,255,255,0.40);
  padding-left: 12px;
  margin-top: 4px;
  color: #fff;
  min-height: 20px;
}

body.public-login.login-v3 .login-foot-v3 {
  font-size: 12px;
  opacity: 0.70;
  margin-top: 16px;
  text-align: center;
  color: rgba(255,255,255,0.70);
  letter-spacing: 0.01em;
}

/* Small screens: reduce top logo spacing */
@media (max-width: 700px) {
  body.public-login.login-v3 .login-brand-top { 
    top: 24px; 
  }
  body.public-login.login-v3 .login-card-v3 { 
    margin-top: 140px;
    padding: 28px 22px;
  }
  body.public-login.login-v3 .login-card-v3__title { 
    font-size: 24px;
    margin-bottom: 20px;
  }
  body.public-login.login-v3 .login-brand-top__logo img {
    width: min(90vw, 600px);
  }
}

/* =========================
   LOGIN HERO V4 — PREMIUM CAR BACKGROUND
   Scoped: body.public-login.login-v4
   ========================= */

body.public-login.login-v4 {
  background: #000 !important;
  color: #fff !important;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* Disable app-shell/topbar/sidebar styles on login page */
body.public-login.login-v4 .app-shell,
body.public-login.login-v4 .app-header,
body.public-login.login-v4 .side-nav,
body.public-login.login-v4 .topbar {
  display: none !important;
}

/* HERO BACKGROUND LAYER (z-index 0) - TRUE BLACK */
body.public-login.login-v4 .login-hero {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #000 !important;
  overflow: hidden;
}

/* Optional: Real car photo background (only if assets/login-bg.jpg exists) */
/* If the file doesn't exist, true black will be used */
body.public-login.login-v4 .login-hero {
  background-image: url("assets/login-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* REMOVED: White haze overlay - now using true black background */
/* VIGNETTE OVERLAY removed to eliminate white haze */
body.public-login.login-v4 .login-hero::before {
  display: none;
}

/* MAIN STAGE (z-index 2+) */
body.public-login.login-v4 .login-stage {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 18px;
  position: relative;
  z-index: 2;
}

/* LARGE CENTERED LOGO above login card */
body.public-login.login-v4 .login-logo-large {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
  position: relative;
  z-index: 3;
}

body.public-login.login-v4 .login-logo-large__img {
  width: min(260px, 80%);
  height: auto;
  max-width: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* TOP HERO BRANDING - Hidden (only mini brand row inside card is shown) */
body.public-login.login-v4 .login-hero-brand {
  display: none !important;
}

body.public-login.login-v4 .login-hero-brand__logo {
  width: 100%;
  display: flex;
  justify-content: center;
}

body.public-login.login-v4 .login-hero-brand__logo img {
  width: min(980px, 92vw);
  height: auto;
  opacity: 0.98;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}

body.public-login.login-v4 .login-hero-brand__name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.95;
  text-align: center;
}

body.public-login.login-v4 .login-hero-brand__tagline {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.85;
  text-align: center;
}

/* LOGIN CARD - Centered, darker for better readability (z-index 3) */
body.public-login.login-v4 .login-card {
  width: min(520px, 92vw);
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.88);
  backdrop-filter: none;
  padding: 32px 28px;
  margin-top: 0;
  position: relative;
  z-index: 3;
  box-shadow: 0 30px 90px rgba(0,0,0,0.85);
}

/* MINI BRAND ROW inside card - now just text, more subtle */
body.public-login.login-v4 .login-card__brand-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 14px;
}

/* Mini logo removed - using large logo above card instead */
body.public-login.login-v4 .login-card__mini-logo {
  display: none;
}

body.public-login.login-v4 .login-card__brand-text {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.80;
}

body.public-login.login-v4 .login-card__divider {
  border: none;
  height: 1px;
  background: rgba(255,255,255,0.20);
  margin: 0 0 20px 0;
}

/* CARD TITLE */
body.public-login.login-v4 .login-card__title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
  text-align: center;
  color: #fff;
}

/* FORM */
body.public-login.login-v4 .login-card__form {
  display: grid;
  gap: 18px;
}

/* FIELDS */
body.public-login.login-v4 .login-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.public-login.login-v4 .login-field label {
  display: block;
  font-size: 12px;
  opacity: 0.85;
  margin-bottom: 0;
  letter-spacing: 0.02em;
  font-weight: 500;
  color: #fff;
}

body.public-login.login-v4 input.input-text {
  width: 100%;
  border-radius: 0 !important;
  background: rgba(0,0,0,0.85) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  padding: 14px 14px;
  font-size: 14px;
  box-sizing: border-box;
  transition: border-color 0.15s ease, background 0.15s ease;
}

body.public-login.login-v4 input.input-text:focus {
  outline: none !important;
  border-color: rgba(255,255,255,0.55) !important;
  background: rgba(0,0,0,0.90) !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.15);
}

body.public-login.login-v4 input.input-text::placeholder {
  color: rgba(255,255,255,0.45);
  opacity: 1;
}

/* CHROME AUTOFILL FIX - Keep inputs dark and premium */
body.public-login.login-v4 input.input-text:-webkit-autofill,
body.public-login.login-v4 input.input-text:-webkit-autofill:hover,
body.public-login.login-v4 input.input-text:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff !important;
  -webkit-box-shadow: 0 0 0px 1000px rgba(0,0,0,0.92) inset !important;
  box-shadow: 0 0 0px 1000px rgba(0,0,0,0.92) inset !important;
  caret-color: #fff !important;
  border-color: rgba(255,255,255,0.20) !important;
  transition: background-color 5000s ease-in-out 0s;
}

body.public-login.login-v4 input.input-text:-webkit-autofill:focus {
  border-color: rgba(255,255,255,0.55) !important;
  -webkit-box-shadow: 0 0 0px 1000px rgba(0,0,0,0.95) inset, 0 0 0 2px rgba(255,255,255,0.15) !important;
  box-shadow: 0 0 0px 1000px rgba(0,0,0,0.95) inset, 0 0 0 2px rgba(255,255,255,0.15) !important;
}

/* ACTIONS */
body.public-login.login-v4 .login-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

body.public-login.login-v4 .login-actions .btn {
  width: 100%;
}

body.public-login.login-v4 .btn {
  border-radius: 0 !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  background: rgba(0,0,0,0.85) !important;
  color: #fff !important;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
  cursor: pointer;
  box-sizing: border-box;
}

body.public-login.login-v4 .btn:hover {
  background: rgba(0,0,0,0.90) !important;
  border-color: rgba(255,255,255,0.40) !important;
}

body.public-login.login-v4 .btn:active {
  transform: translateY(1px);
  background: rgba(0,0,0,0.88) !important;
}

body.public-login.login-v4 .btn.btn-primary {
  background: rgba(0,0,0,0.90) !important;
  border-color: rgba(255,255,255,0.35) !important;
}

body.public-login.login-v4 .btn.btn-primary:hover {
  background: rgba(0,0,0,0.95) !important;
  border-color: rgba(255,255,255,0.50) !important;
}

/* ERRORS + FOOTER */
body.public-login.login-v4 .login-error {
  font-size: 12px;
  opacity: 0.95;
  border-left: 2px solid rgba(255,255,255,0.40);
  padding-left: 12px;
  margin-top: 4px;
  color: #fff;
  min-height: 20px;
}

body.public-login.login-v4 .login-foot {
  font-size: 12px;
  opacity: 0.70;
  margin-top: 16px;
  text-align: center;
  color: rgba(255,255,255,0.70);
  letter-spacing: 0.01em;
}

/* RESPONSIVE */
@media (max-width: 700px) {
  body.public-login.login-v4 .login-logo-large {
    margin-bottom: 24px;
  }
  body.public-login.login-v4 .login-logo-large__img {
    width: min(220px, 75%);
  }
  body.public-login.login-v4 .login-card { 
    margin-top: 0;
    padding: 28px 22px;
  }
  body.public-login.login-v4 .login-card__title { 
    font-size: 20px;
    margin-bottom: 20px;
  }
}

/* =========================================================
   OPTIMA FINAL COLOR SYSTEM + PILL SYSTEM + PULSES
   ========================================================= */

/* 1) OPTIMA COLOR TOKENS */
:root {
  --optima-blue: #0253B5;
  --optima-blue-soft: #0A63D8;
  --optima-red: #F61811;
  --optima-orange: #D44A04;
}

/* 2) BLUE LINKING PILL SYSTEM (global) */
.optima-link {
  background: rgba(2, 83, 181, 0.18) !important;
  border: 1px solid rgba(2, 83, 181, 0.70) !important;
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  border-radius: 0 !important;
  display: inline-block;
  padding: 0.25rem 0.55rem;
  font-size: 0.75rem;
}

.optima-link.optima-time {
  background: rgba(2, 83, 181, 0.12) !important;
  border-color: rgba(2, 83, 181, 0.65) !important;
}

.optima-selected {
  background: rgba(10, 99, 216, 0.22) !important;
  border-color: rgba(10, 99, 216, 0.85) !important;
  color: #fff !important;
  font-weight: 800 !important;
}

/* Apply blue linking to existing pill classes */
.pill-blue,
.cell-tag .pill-blue,
.cell-customer .pill-blue {
  background: rgba(2, 83, 181, 0.18) !important;
  border: 1px solid rgba(2, 83, 181, 0.70) !important;
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
}

/* Timer badges with blue linking */
.timer.optima-link,
.timer.optima-time {
  background: rgba(2, 83, 181, 0.12) !important;
  border-color: rgba(2, 83, 181, 0.65) !important;
  color: #fff !important;
  font-weight: 800 !important;
}

/* Selected state for buttons */
.btn.selected.optima-selected,
.btn.active.optima-selected,
.wash-buttons .btn.selected.optima-selected,
.keys-buttons .btn.selected.optima-selected,
.valet-grid .btn.selected.optima-selected {
  background: rgba(10, 99, 216, 0.22) !important;
  border-color: rgba(10, 99, 216, 0.85) !important;
  color: #fff !important;
  font-weight: 800 !important;
}

/* 3) ACTIVE PICKUPS: THICK PULSING WHITE BORDER ONLY (dispatcher) */
@keyframes optimaActivePulse {
  0%, 100% {
    border-color: rgba(255, 255, 255, 0.35);
  }
  50% {
    border-color: rgba(255, 255, 255, 0.90);
  }
}

body.role-dispatcher .section.section-active {
  border: 2px solid rgba(255, 255, 255, 0.80) !important;
  animation: optimaActivePulse 1.05s ease-in-out infinite !important;
  background: transparent !important;
}

/* Remove blue wash from Active Pickups globally */
.section-active {
  background: transparent !important;
}

body.role-dispatcher .section-active .table-wrapper {
  background: transparent !important;
}

/* 4) FLASH STATES (obvious pulses) */
@keyframes optimaPulseBlue {
  0%, 100% {
    background: rgba(2, 83, 181, 0.18);
    border-color: rgba(2, 83, 181, 0.70);
  }
  50% {
    background: rgba(2, 83, 181, 0.32);
    border-color: rgba(2, 83, 181, 0.95);
  }
}

@keyframes optimaPulseOrange {
  0%, 100% {
    background: rgba(212, 74, 4, 0.20);
    border-color: rgba(212, 74, 4, 0.75);
  }
  50% {
    background: rgba(212, 74, 4, 0.38);
    border-color: rgba(212, 74, 4, 0.95);
  }
}

@keyframes optimaPulseRed {
  0%, 100% {
    background: rgba(246, 24, 17, 0.25);
    border-color: rgba(246, 24, 17, 0.85);
  }
  50% {
    background: rgba(246, 24, 17, 0.45);
    border-color: rgba(246, 24, 17, 1.0);
  }
}

.pulse-blue {
  animation: optimaPulseBlue 0.85s ease-in-out infinite !important;
  border: 1px solid var(--optima-blue) !important;
  background: rgba(2, 83, 181, 0.18) !important;
}

.pulse-orange {
  animation: optimaPulseOrange 0.85s ease-in-out infinite !important;
  border: 1px solid var(--optima-orange) !important;
  background: rgba(212, 74, 4, 0.20) !important;
}

.pulse-red {
  animation: optimaPulseRed 0.70s ease-in-out infinite !important;
  border: 1px solid var(--optima-red) !important;
  background: rgba(246, 24, 17, 0.25) !important;
}

/* Hook pulses to state elements */
.btn.selected[data-action="wash-dusty"],
.wash-buttons .btn.selected[data-action="wash-dusty"] {
  animation: optimaPulseOrange 0.85s ease-in-out infinite !important;
  border-color: var(--optima-orange) !important;
  background: rgba(212, 74, 4, 0.20) !important;
}

.btn.selected[data-action="wash-needs-rewash"],
.wash-buttons .btn.selected[data-action="wash-needs-rewash"],
.inline-dialog.pulse-blue {
  animation: optimaPulseBlue 0.85s ease-in-out infinite !important;
  border-color: var(--optima-blue) !important;
  background: rgba(2, 83, 181, 0.18) !important;
}

.btn.selected[data-action="key-car-missing"],
.wash-buttons .btn.selected[data-action="key-car-missing"] {
  animation: optimaPulseRed 0.70s ease-in-out infinite !important;
  border-color: var(--optima-red) !important;
  background: rgba(246, 24, 17, 0.25) !important;
}

/* =========================================================
   DEEP ROYAL BLUE PILL SYSTEM + BRAND LEFT
   ========================================================= */

:root {
  --pill-blue-base: #0A5ED7;
  --pill-blue-hi: #2F7AF0;
  --pill-blue-acct: #1C6EE8;
  --pill-blue-text: #EAF2FF;
  --pill-red: #F61811;
  --pill-orange: #D44A04;
}

.brand-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-logo {
  width: 22px;
  height: 22px;
  object-fit: cover;
}

.brand-name {
  font-weight: 900;
}

.brand-store {
  opacity: 0.80;
  font-weight: 600;
  margin-left: 8px;
}

.opt-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 10px;
  background: linear-gradient(180deg, rgba(47, 122, 240, 0.22), rgba(10, 94, 215, 0.22));
  border: 1px solid rgba(28, 110, 232, 0.85);
  color: var(--pill-blue-text);
  font-weight: 800;
  letter-spacing: 0.01em;
  border-radius: 0;
  line-height: 1.1;
  box-sizing: border-box;
}

.opt-pill-note {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 10px;
  background: linear-gradient(180deg, rgba(47, 122, 240, 0.22), rgba(10, 94, 215, 0.22));
  border: 1px solid rgba(28, 110, 232, 0.85);
  color: var(--pill-blue-text);
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: 0;
  line-height: 1.25;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
}

.opt-pill-selected {
  background: linear-gradient(180deg, rgba(47, 122, 240, 0.30), rgba(10, 94, 215, 0.28));
  border: 1px solid rgba(47, 122, 240, 0.95);
  color: var(--pill-blue-text);
}

.opt-pulse-red {
  background: rgba(246, 24, 17, 0.22) !important;
  border: 1px solid rgba(246, 24, 17, 0.95) !important;
  box-shadow: 0 0 0 2px rgba(246, 24, 17, 0.22), 0 0 22px rgba(246, 24, 17, 0.35);
  animation: pulseRedGlow 0.75s ease-in-out infinite;
  color: #fff !important;
}

@keyframes pulseRedGlow {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(246, 24, 17, 0.22), 0 0 22px rgba(246, 24, 17, 0.30);
    background: rgba(246, 24, 17, 0.22);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(246, 24, 17, 0.30), 0 0 28px rgba(246, 24, 17, 0.55);
    background: rgba(246, 24, 17, 0.30);
  }
}

/* ========== RAW HOVER MENUS (STATUS / KEYS) ========== */
.hoverctl {
  position: relative;
  display: inline-block;
}

.hoverpill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 26px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  background: var(--chip, rgba(255, 255, 255, 0.06));
  color: var(--chipText, var(--text));
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: none;
  cursor: default;
}

.hoverpill.selected {
  border-color: var(--accentBlue);
  background: rgba(59, 130, 246, 0.16);
  color: #fff;
}

.hovermenu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 190px;
  padding: 6px;
  background: var(--panel, rgba(12, 12, 14, 0.96));
  border: 1px solid var(--line2, rgba(255, 255, 255, 0.14));
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.38);
  display: none;
  z-index: 60;
}

.hoverctl:hover .hovermenu {
  display: block;
}

.hoveritem {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 8px !important;
  margin: 2px 0;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--text) !important;
  font-size: 12px;
  line-height: 1.25;
  cursor: pointer;
}

.hoveritem:hover {
  background: var(--hover) !important;
  border-color: var(--line) !important;
}

.hoveritem.selected {
  border-color: var(--accentBlue) !important;
  background: rgba(59, 130, 246, 0.14) !important;
  color: #fff !important;
  font-weight: 700;
}

.hoveritem.pulse-blue {
  animation: optimaPulseBlue 0.85s ease-in-out infinite !important;
  border-color: var(--optima-blue) !important;
  background: rgba(2, 83, 181, 0.18) !important;
  color: #fff !important;
}

.hoveritem.pulse-orange {
  animation: optimaPulseOrange 0.85s ease-in-out infinite !important;
  border-color: var(--optima-orange) !important;
  background: rgba(212, 74, 4, 0.20) !important;
  color: #fff !important;
}

.hoveritem.opt-pulse-red {
  background: rgba(246, 24, 17, 0.22) !important;
  border: 1px solid rgba(246, 24, 17, 0.95) !important;
  box-shadow: 0 0 0 2px rgba(246, 24, 17, 0.22), 0 0 22px rgba(246, 24, 17, 0.35);
  animation: pulseRedGlow 0.75s ease-in-out infinite;
  color: #fff !important;
}

.flyout-row {
  position: relative;
}

.flyout-anchor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  cursor: default;
}

.flyout {
  position: absolute;
  top: -6px;
  left: calc(100% + 6px);
  min-width: 170px;
  padding: 6px;
  background: var(--panel, rgba(12, 12, 14, 0.96));
  border: 1px solid var(--line2, rgba(255, 255, 255, 0.14));
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.38);
  display: none;
  z-index: 65;
}

.flyout-anchor:hover + .flyout,
.flyout:hover {
  display: block;
}

.hovermenu .carat {
  opacity: 0.8;
  font-size: 12px;
}

body.role-serviceadvisor .hovermenu,
body.role-loancar .hovermenu {
  display: none !important;
}

body.role-serviceadvisor .hoverpill,
body.role-loancar .hoverpill {
  opacity: 0.8;
}

/* Compact rows and control groups */
tbody td {
  padding: 8px 8px !important;
}

.role-dispatcher .ctl-group {
  gap: 0.25rem;
  padding: 0.25rem 0;
}

.role-dispatcher .ctl-status,
.role-dispatcher .ctl-keys {
  min-height: 0;
}