/*
  DealerBot dashboard refresh
  Additive presentation layer: all routes, API contracts and interactions remain
  in the existing app. The file is loaded after the legacy stylesheet so the
  visual update remains easy to review or roll back independently.
*/

:root {
  --db-canvas: #f5f6f8;
  --db-surface: #ffffff;
  --db-surface-subtle: #f8fafc;
  --db-ink: #132b49;
  --db-muted: #60708a;
  --db-border: #d7dee7;
  --db-border-strong: #b9c6d5;
  --db-brand: #132f50;
  --db-accent: #ed643e;
  --db-accent-soft: #fff0ea;
  --db-success: #0e7255;
  --db-warning: #9d5b00;
  --db-danger: #b4233d;
  --db-radius-sm: 8px;
  --db-radius: 12px;
  --db-shadow: 0 1px 2px rgba(19, 43, 73, .04), 0 10px 30px rgba(19, 43, 73, .045);
}

html { background: var(--db-canvas); }
body {
  background: var(--db-canvas);
  color: var(--db-ink);
  font-family: Inter, Manrope, "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  text-rendering: optimizeLegibility;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 10px;
  left: 12px;
  padding: 10px 13px;
  border-radius: var(--db-radius-sm);
  background: #fff;
  color: var(--db-brand);
  font-weight: 800;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .16s ease;
}
.skip-link:focus { transform: translateY(0); outline: 3px solid rgba(237, 100, 62, .4); }

button, input, select, textarea { font-family: inherit; }
button {
  min-height: 42px;
  border-color: var(--db-border-strong);
  border-radius: var(--db-radius-sm);
  color: var(--db-brand);
  box-shadow: none;
}
button:hover { border-color: var(--db-brand); background: #eff4f8; }
button.primary {
  border-color: var(--db-accent);
  background: var(--db-accent);
  box-shadow: 0 5px 12px rgba(190, 64, 34, .16);
}
button.primary:hover { background: #ce522f; border-color: #ce522f; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 3px solid rgba(23, 108, 189, .3);
  outline-offset: 2px;
}
input, select, textarea {
  border-color: var(--db-border-strong);
  border-radius: var(--db-radius-sm);
  background: var(--db-surface);
}
input::placeholder, textarea::placeholder { color: #7c8ba0; opacity: 1; }

/* Calm, docked app shell. */
.app-topbar {
  width: 264px;
  gap: 18px;
  padding: 22px 14px 16px;
  background: #102d4d;
  box-shadow: none;
}
.brand { min-height: 48px; padding: 0 10px 13px; border-bottom: 1px solid rgba(219, 231, 242, .16); }
.brand img.brand-agency { width: auto; height: 28px; }
.app-topbar nav { gap: 15px; padding: 0; scrollbar-color: rgba(255,255,255,.38) transparent; }
.nav-group { gap: 2px; }
.nav-group > span { padding: 0 11px 7px; color: #9db1c7; font-size: 9px; letter-spacing: .14em; }
.app-topbar nav button {
  position: relative;
  min-height: 40px;
  padding: 9px 12px;
  border-radius: 7px;
  color: #d4e0eb;
  letter-spacing: .005em;
}
.app-topbar nav button:hover { border-color: rgba(255,255,255,.12); background: #183c60; }
.app-topbar nav button.active {
  background: #f6c940;
  color: #102d4d;
  box-shadow: 0 3px 0 rgba(4, 19, 34, .14);
}
.app-topbar nav button.active::before {
  position: absolute;
  left: -14px;
  width: 3px;
  height: 22px;
  border-radius: 0 3px 3px 0;
  background: #f6c940;
  content: "";
}
.app-topbar .logout { min-height: 40px; border-color: rgba(255,255,255,.3); border-radius: 7px; }

main { max-width: 1680px; padding: 32px clamp(24px, 4vw, 64px) 64px; }
header {
  min-height: 74px;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 19px;
}
h1 { font-size: clamp(30px, 3vw, 43px); line-height: 1.03; letter-spacing: -.052em; }
h2 { font-size: 22px; letter-spacing: -.033em; }
.eyebrow { color: #a8492f; letter-spacing: .115em; }
#save-state { align-self: center; padding: 7px 10px; border: 1px solid var(--db-border); border-radius: 999px; background: var(--db-surface); color: var(--db-muted); font-size: 12px; }

/* Metric strip and task workspaces. */
.metrics { margin-bottom: 22px; border-radius: var(--db-radius); box-shadow: var(--db-shadow); }
.metrics article { min-height: 105px; padding: 19px 20px; }
.metrics strong { font-size: 30px; }
.metrics article:first-child { background: var(--db-brand); }
.grid.two { gap: 20px; margin-bottom: 20px; }
.panel { border-color: var(--db-border); border-radius: var(--db-radius); box-shadow: var(--db-shadow); }
.panel-head, .flow-intro { padding-bottom: 16px; }
.panel-head h2, .flow-intro h2 { margin-bottom: 2px; }
.hint { max-width: 76ch; line-height: 1.55; }
.switch-row { padding: 14px 0; }
.switch-row strong { font-size: 14px; }
.status-list div { padding: 12px 0; }
.status-list dd { font-variant-numeric: tabular-nums; }
.service-grid { border-color: var(--db-border); }
.service-grid label { background: var(--db-surface-subtle); }
.service-grid label:hover { background: #f0f5f8; }

/* Shared scanning patterns for queues, records and administration. */
.release, .audit-row { min-height: 64px; }
.audit-row { padding: 14px 0; }
.badge, .flow-service-state, .launch-recipient em {
  border-radius: 999px;
  letter-spacing: .01em;
}
.activity-tabs { gap: 3px; margin-top: 18px; padding-bottom: 5px; }
.activity-tabs button { border: 1px solid transparent; border-radius: 7px; }
.activity-tabs button.active { border-color: #f0c5b7; background: var(--db-accent-soft); color: #9a3d26; }
.activity-tabs button.active span { background: #f6d6cb; color: #81311f; }
.request-filter-bar, .rank-filter-bar {
  gap: 12px;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-sm);
  background: var(--db-surface-subtle);
}
.registration-card { gap: 20px; padding: 20px 0; }
.registration-card:hover { background: linear-gradient(90deg, rgba(239,244,248,.76), transparent); }
.registration-actions textarea { border-color: var(--db-border); background: #fbfcfd; }

/* Master-detail account status: the list stays compact; detail owns the work area. */
.account-status-workspace { margin-top: 18px; border: 1px solid var(--db-border); border-radius: var(--db-radius); overflow: hidden; }
.account-dealer-list { background: #f6f8fa; }
.account-dealer-row { min-height: 86px; }
.account-dealer-row > button { min-height: 86px; padding-top: 12px; padding-bottom: 12px; }
.account-dealer-row.active { box-shadow: inset 4px 0 0 var(--db-accent); }
.account-detail { padding: 26px 30px; }
.account-detail .lock-invoice-details { border-radius: var(--db-radius-sm); }
.account-detail .lock-invoice-details > strong { background: #fff7e9; }
.account-selection-toolbar { border-radius: var(--db-radius-sm); background: var(--db-surface-subtle); }
.account-action-row button { min-height: 42px; }

/* Launch Centre is a directory-first operations view, not a card wall. */
.launch-panel { max-width: none; }
.launch-controls {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-sm);
  background: var(--db-surface-subtle);
}
.launch-stats { margin-top: 14px; border-radius: var(--db-radius-sm); }
.launch-summary { border-radius: var(--db-radius-sm); }
.launch-directory { border-radius: var(--db-radius-sm); }
.launch-directory-head { background: #f1f5f8; }
.launch-recipient { min-height: 74px; }
.launch-recipient:hover { background: #f1f6f9; }
.launch-recipient.selected { background: #ecf8f2; }
.launch-delivery .launch-error { max-width: 220px; }
.launch-send-bar { position: sticky; bottom: 0; z-index: 2; margin: 18px -28px -26px; padding: 16px 28px; border-top: 1px solid var(--db-border); background: #fff; }
.whatsapp-action { border-color: #117154; background: #117154; }

/* Flow Studio is an inspector, not a collection of cards. */
.flow-studio { border-radius: var(--db-radius); }
.flow-studio > .flow-intro { background: #fff; }
.flow-progress { background: #f7f9fb; }
.flow-workspace { background: #f7f9fb; }
.flow-nav { background: #f1f5f8; }
.flow-nav button { border-radius: var(--db-radius-sm); }
.flow-nav button.active { border-color: #f6c940; background: #fff7d9; box-shadow: inset 3px 0 0 #efc02f; }
.flow-editor { background: var(--db-surface); }
.flow-preview { background: #f3f6f8; }
.flow-schematic { border-radius: var(--db-radius-sm); }
.schematic-canvas { background-color: #f8fafc; background-image: radial-gradient(#dce3ea 1px, transparent 1px); background-size: 14px 14px; }
.schematic-node { border-radius: var(--db-radius-sm); }
.schematic-node.active { box-shadow: 0 0 0 3px rgba(237,100,62,.16); }

/* Refined feedback states. */
#toast { border-left: 0; border-radius: var(--db-radius-sm); box-shadow: 0 14px 36px rgba(16, 45, 77, .22); }
#toast.show::before { display: inline-block; margin-right: 8px; color: #f6c940; content: "•"; }
#toast.error { background: #82263a !important; }
#toast.error::before { color: #ffd0d9; }
#simulation-output, #rank-output { border-radius: var(--db-radius-sm); }

/* Login shares the same restrained staff-product language. */
.login-shell { width: min(1120px, calc(100% - 48px)); gap: clamp(32px, 6vw, 90px); }
.login-intro > img { width: min(360px, 100%); height: 76px; margin-bottom: 34px; }
.login-intro h1 { font-size: clamp(42px, 5vw, 64px); letter-spacing: -.065em; }
.card { border-color: var(--db-border); border-radius: 14px; box-shadow: var(--db-shadow); }
.card h2 { color: var(--db-brand); font-size: clamp(29px, 4vw, 38px); }
.card button { border-radius: var(--db-radius-sm); background: var(--db-brand); color: #fff; }
.card button:hover { background: var(--db-accent); }

@media (max-width: 1180px) {
  main { padding-inline: 30px; }
  .launch-send-bar { margin-inline: -28px; }
}

@media (max-width: 900px) {
  .app-topbar { padding: 10px 16px; background: #102d4d; }
  .brand { min-width: 142px; padding: 0; border: 0; }
  .brand img.brand-agency { width: auto; height: 18px; }
  .brand-divider { height: 18px; margin-inline: 4px; }
  .brand-product { font-size: 14px; line-height: 18px; }
  .app-topbar nav { gap: 5px; scrollbar-width: thin; }
  .app-topbar nav button { min-height: 38px; padding: 8px 10px; }
  .app-topbar nav button.active::before { display: none; }
  main { padding: 26px 22px 54px; }
  .launch-send-bar { margin: 18px -28px -26px; }
}

@media (max-width: 600px) {
  .skip-link { left: 8px; }
  .app-topbar { gap: 8px; padding: 9px 12px; }
  .brand { min-width: 121px; }
  .brand img.brand-agency { width: auto; height: 16px; }
  .brand-divider { height: 16px; margin-inline: 3px; }
  .brand-product { font-size: 12.5px; line-height: 16px; }
  main { padding: 21px 14px 48px; }
  header { min-height: auto; }
  h1 { font-size: 31px; }
  .panel { border-radius: 10px; }
  .metrics { border-radius: 10px; }
  .metrics article { min-height: 94px; }
  .panel-head > button, .actions > button { width: 100%; }
  .panel-head .actions { width: 100%; }
  .request-filter-bar, .rank-filter-bar, .launch-controls { padding: 12px; }
  .account-status-workspace { border-radius: 10px; }
  .account-detail { padding: 20px 17px; }
  .launch-send-bar { position: static; margin: 18px -17px -20px; padding: 15px 17px; }
  .launch-stats > div { min-height: 78px; padding: 10px; }
  .flow-preview { padding-inline: 16px; }
}

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