/* ============================================================
   JBREWS DMS — modern theme overlay.
   Loads AFTER chrome.css. Reuses existing class names so we don't
   have to touch every JSX file — just restyles them flat-modern.
   ============================================================ */

:root {
  /* Brand palette */
  --jb-navy:       #0E1430;
  --jb-navy-2:     #1A2350;
  --jb-navy-deep:  #070B1F;
  --jb-yellow:     #FFD24A;
  --jb-yellow-2:   #E5B82A;
  --jb-blue:       #1B66A8;
  --jb-blue-2:     #2A7CC2;
  --jb-blue-tint:  #E8F0FB;
  --jb-green:      #16A34A;
  --jb-green-tint: #E0F4E0;
  --jb-red:        #C03546;
  --jb-red-tint:   #FCE6E8;
  --jb-amber:      #B26A00;
  --jb-amber-tint: #FFF3D9;

  /* Surfaces */
  --jb-bg:         #F4F6FA;
  --jb-surface:    #FFFFFF;
  --jb-surface-2:  #F9FAFC;
  --jb-border:     #DDE2EA;
  --jb-border-strong: #BCC4D0;
  --jb-text:       #0F1A33;
  --jb-text-dim:   #58637A;
  --jb-text-muted: #8893A7;

  /* Type */
  --jb-font:       'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --jb-mono:       'JetBrains Mono', ui-monospace, 'SF Mono', 'Courier New', monospace; /* @kind font */

  /* Shape */
  --jb-r-sm:  4px;
  --jb-r:     6px;
  --jb-r-lg:  10px;

  /* Shadows */
  --jb-shadow-sm: 0 1px 2px rgba(15, 26, 51, 0.06);
  --jb-shadow:    0 4px 12px rgba(15, 26, 51, 0.08), 0 1px 2px rgba(15, 26, 51, 0.04);
  --jb-shadow-lg: 0 12px 32px rgba(15, 26, 51, 0.16), 0 2px 6px rgba(15, 26, 51, 0.08);

  --jb-focus: 0 0 0 3px rgba(27, 102, 168, 0.30);
}

/* Force modern font everywhere unless explicitly mono */
html, body, .k2b-host, .fipro-form, .k2b-menu-screen, .k2b-menu-btn,
.k2b-button, .tb-btn, .k2b-titlebar, .k2b-child-titlebar,
input, button, select, textarea, table, .k2b-signon-form {
  font-family: var(--jb-font) !important;
  letter-spacing: 0;
}
.fipro-readout, .fipro-label, .k2b-signon-form,
.k2b-signon-form .field, .k2b-active-field {
  font-family: var(--jb-mono) !important;
}

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

/* ── Titlebar ───────────────────────────────────────────────── */
.k2b-titlebar, .k2b-titlebar {
  background: var(--jb-surface) !important;
  color: var(--jb-text) !important;
  border-bottom: 1px solid var(--jb-border) !important;
  height: 44px;
  padding: 0 14px;
  font-weight: 600;
  font-size: 13px;
  display: flex; align-items: center; gap: 10px;
}
.k2b-child-titlebar, .k2b-child-titlebar {
  background: var(--jb-surface-2) !important;
  color: var(--jb-text) !important;
  border-bottom: 1px solid var(--jb-border) !important;
  height: 36px;
  padding: 0 12px;
  font-weight: 600;
  font-size: 12px;
}
.k2b-titlebar .tb-mark, .k2b-child-titlebar .tb-mark {
  width: 22px; height: 22px; border-radius: 4px;
  image-rendering: auto;
}
.k2b-titlebar .tb-title, .k2b-child-titlebar .tb-title {
  flex: 1; color: var(--jb-text);
  font-family: var(--jb-font) !important;
}
.k2b-titlebar .tb-buttons, .k2b-child-titlebar .tb-buttons {
  display: flex; gap: 4px;
}
.k2b-titlebar .tb-btn,
.k2b-child-titlebar .tb-btn, .k2b-titlebar .tb-btn, .k2b-child-titlebar .tb-btn {
  width: 28px; height: 28px; border-radius: var(--jb-r-sm);
  background: transparent !important;
  color: var(--jb-text-dim) !important;
  border: none !important;
  box-shadow: none !important;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1;
  cursor: pointer; transition: background .12s;
}
.k2b-titlebar .tb-btn:hover, .k2b-child-titlebar .tb-btn:hover {
  background: var(--jb-border) !important;
  color: var(--jb-text) !important;
}
.k2b-titlebar .tb-btn:last-child:hover, .k2b-child-titlebar .tb-btn:last-child:hover {
  background: var(--jb-red) !important; color: #FFF !important;
}

/* ── Buttons ────────────────────────────────────────────────── */
.k2b-button,
button.k2b-button, .k2b-button {
  background: var(--jb-surface) !important;
  color: var(--jb-text) !important;
  border: 1px solid var(--jb-border-strong) !important;
  border-radius: var(--jb-r-sm) !important;
  box-shadow: var(--jb-shadow-sm) !important;
  padding: 6px 12px !important;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, border-color .12s, box-shadow .12s, transform .04s;
  line-height: 1.3;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.k2b-button:hover { background: var(--jb-surface-2) !important; border-color: var(--jb-blue) !important; }
.k2b-button:active { transform: translateY(0.5px); box-shadow: none !important; }
.k2b-button:focus-visible { outline: none; box-shadow: var(--jb-focus) !important; }
.k2b-button.small { padding: 4px 10px !important; font-size: 11px; }
.k2b-button.wide  { padding: 8px 18px !important; min-width: 110px; }

/* Underlined accelerator letters: keep them legible, don't bold them */
.k2b-button u { text-decoration: none; border-bottom: 1px solid currentColor; }

/* Primary (yellow CTA) — promoted from any button with a yellow inline bg. */
.k2b-button[style*="FFE9B0"], .k2b-button[style*="FFD24A"],
.k2b-button[style*="jb-yellow"] {
  background: var(--jb-yellow) !important;
  border-color: var(--jb-yellow-2) !important;
  color: var(--jb-navy) !important;
  font-weight: 700;
}
.k2b-button[style*="FFE9B0"]:hover, .k2b-button[style*="FFD24A"]:hover,
.k2b-button[style*="jb-yellow"]:hover {
  background: var(--jb-yellow-2) !important;
}

/* Help/circle ? buttons */
.k2b-help-btn {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--jb-surface) !important;
  color: var(--jb-text-dim) !important;
  border: 1px solid var(--jb-border-strong) !important;
  box-shadow: var(--jb-shadow-sm) !important;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; cursor: pointer;
}
.k2b-help-btn:hover { background: var(--jb-blue-tint) !important; color: var(--jb-blue) !important; border-color: var(--jb-blue) !important; }

/* ── Windows / cards ────────────────────────────────────────── */
.k2b-window, .k2b-window {
  background: var(--jb-surface) !important;
  border: 1px solid var(--jb-border) !important;
  border-radius: var(--jb-r-lg);
  box-shadow: var(--jb-shadow);
  overflow: hidden;
  display: flex; flex-direction: column;
}

/* ── Inputs ─────────────────────────────────────────────────── */
input[type="text"], input[type="number"], input[type="email"], input:not([type]),
select, textarea {
  background: var(--jb-surface);
  color: var(--jb-text);
  border: 1px solid var(--jb-border-strong);
  border-radius: var(--jb-r-sm);
  padding: 6px 10px;
  font: 13px var(--jb-font);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--jb-blue);
  box-shadow: var(--jb-focus);
}
select { padding-right: 24px; }

/* ── Menu screens (Sales Menu / Worksheets) — modern tile grid ─ */
.k2b-menu-screen, .k2b-menu-screen {
  background: linear-gradient(160deg, var(--jb-navy) 0%, var(--jb-navy-deep) 100%) !important;
  color: #FFF;
  padding: 36px 32px !important;
  min-height: 100%;
  display: block !important;
}
.k2b-menu-title, .k2b-menu-title {
  color: #FFF !important;
  font-family: var(--jb-font) !important;
  font-size: 28px !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  text-transform: none !important;
}
.k2b-menu-stack {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 12px !important;
  max-width: 1100px;
  margin-top: 20px;
}
.k2b-menu-btn, .k2b-menu-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: #E8ECF5 !important;
  border-radius: var(--jb-r-lg) !important;
  padding: 18px 18px !important;
  font-family: var(--jb-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 60px;
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .04s;
  box-shadow: none !important;
}
.k2b-menu-btn:hover {
  background: rgba(255, 210, 74, 0.10) !important;
  border-color: var(--jb-yellow) !important;
  color: #FFF !important;
}
.k2b-menu-btn.focused {
  background: linear-gradient(135deg, var(--jb-yellow) 0%, var(--jb-yellow-2) 100%) !important;
  color: var(--jb-navy) !important;
  border-color: var(--jb-yellow-2) !important;
  outline: none !important;
}
.k2b-menu-btn.focused u { color: var(--jb-navy) !important; }
.k2b-menu-btn u { color: var(--jb-yellow) !important; border-bottom: none !important; }

/* ── Forms (fipro-*) — modernize the dense F&I forms ─────────── */
.fipro-form { background: var(--jb-surface) !important; color: var(--jb-text); padding: 14px 18px !important; }
.fipro-row  { padding: 4px 0; gap: 6px; }
.fipro-label { color: var(--jb-text-dim) !important; font-family: var(--jb-mono) !important; font-size: 12px; }
.fipro-field, .k2b-active-field {
  background: var(--jb-surface-2) !important;
  border: 1px solid var(--jb-border) !important;
  border-radius: var(--jb-r-sm);
  padding: 4px 8px;
  color: var(--jb-text) !important;
  box-shadow: none !important;
  font-family: var(--jb-mono) !important;
  font-size: 13px;
  min-height: 22px;
  display: inline-flex; align-items: center;
}
.fipro-field.hi { background: var(--jb-yellow) !important; color: var(--jb-navy) !important; border-color: var(--jb-yellow-2) !important; }
.fipro-divider-v { background: var(--jb-border) !important; width: 1px; }
.fipro-divider-h { background: var(--jb-border) !important; height: 1px; margin: 8px 0; }
.fipro-big {
  background: transparent;
  color: var(--jb-navy) !important;
  font-family: var(--jb-font) !important;
  font-weight: 700;
  font-style: normal !important;
  font-size: 42px;
}
.k2b-section-head {
  color: var(--jb-navy) !important;
  font-family: var(--jb-font) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 14px 0 6px !important;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--jb-border);
}

/* ── Tables — clean rows w/ hover ────────────────────────────── */
table { font-family: var(--jb-font); }
table thead tr { background: var(--jb-surface-2) !important; color: var(--jb-text) !important; }
table thead th { color: var(--jb-text-dim) !important; font-weight: 600; font-size: 11px;
                  text-transform: uppercase; letter-spacing: 0.04em; }

/* ── Upload tool blue menubar ────────────────────────────────── */
.k2b-upload-menubar {
  background: var(--jb-navy) !important;
  color: #FFF;
  padding: 0 4px;
}
.k2b-upload-menubar span {
  padding: 10px 14px !important;
  font-size: 12px;
  font-weight: 500;
  color: #E8ECF5 !important;
  cursor: pointer;
}
.k2b-upload-menubar span:hover { background: rgba(255,255,255,0.08) !important; }

/* ── Sign-on panel: re-skin to centered modern card ──────────── */
.k2b-signon-panel {
  background: var(--jb-surface) !important;
  border: 1px solid var(--jb-border) !important;
  border-radius: var(--jb-r-lg) !important;
  box-shadow: var(--jb-shadow-lg) !important;
  width: 460px !important;
  padding: 32px 36px !important;
  margin: 60px auto 0 !important;
}
.k2b-signon-banner {
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 0 18px !important;
  border-bottom: 1px solid var(--jb-border);
  margin-bottom: 22px !important;
}
.k2b-signon-banner img {
  width: 64px !important; height: 64px !important;
  border-radius: 14px !important;
  image-rendering: auto !important;
  box-shadow: var(--jb-shadow);
}
.k2b-signon-banner .k2b-wordmark {
  font-family: var(--jb-font) !important;
  text-align: center !important;
  color: var(--jb-text) !important;
}
.k2b-signon-banner .k2b-wordmark .l1 {
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  color: var(--jb-navy) !important;
}
.k2b-signon-banner .k2b-wordmark .l2 {
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 500;
  color: var(--jb-text-dim) !important;
  margin-top: 4px;
}

.k2b-signon-form .row { padding: 8px 0; }
.k2b-signon-form .label { color: var(--jb-text-dim) !important; font-family: var(--jb-mono) !important; }
.k2b-signon-form .field {
  background: var(--jb-surface-2) !important;
  border: 1px solid var(--jb-border-strong) !important;
  color: var(--jb-text) !important;
  border-radius: var(--jb-r-sm);
  padding: 4px 8px !important;
  font-family: var(--jb-mono) !important;
  cursor: pointer;
}
.k2b-signon-form .field.active {
  background: var(--jb-yellow) !important;
  color: var(--jb-navy) !important;
  border-color: var(--jb-yellow-2) !important;
}
.k2b-signon-form .copyright {
  color: var(--jb-text-muted) !important;
  font-size: 11px !important;
  margin-top: 16px !important;
  text-align: center;
  font-family: var(--jb-font) !important;
}
.k2b-signon-buttons {
  padding-top: 18px !important;
  flex-wrap: wrap !important;
  justify-content: stretch !important;
  gap: 8px !important;
}
.k2b-signon-buttons .k2b-button {
  flex: 1 1 calc(50% - 4px);
  min-width: 0 !important;
  padding: 10px 12px !important;
  font-size: 12px;
}

/* Dealer name color in signon */
.k2b-signon-form .dealer { color: var(--jb-blue) !important; }
.k2b-signon-form .meta   { color: var(--jb-green) !important; }
.k2b-signon-form .station { color: var(--jb-blue) !important; }

/* ── App shell layout sidebar (see app.jsx) ──────────────────── */
.jb-shell { display: grid; grid-template-columns: 220px 1fr; height: 100%; }
.jb-sidebar {
  background: var(--jb-navy);
  color: #E8ECF5;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--jb-navy-deep);
  overflow-y: auto;
}
.jb-sidebar .brand {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.jb-sidebar .brand img { width: 36px; height: 36px; border-radius: 8px; }
.jb-sidebar .brand .name { font-weight: 700; font-size: 16px; letter-spacing: 0.02em; }
.jb-sidebar .brand .sub  { font-size: 11px; color: #9AA3B8; }
.jb-sidebar .section-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: #6E7A95; padding: 14px 18px 6px;
}
.jb-sidebar .nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 18px;
  color: #C8D0E4; font-size: 13px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
}
.jb-sidebar .nav-item:hover { background: rgba(255,255,255,0.04); color: #FFF; }
.jb-sidebar .nav-item.active {
  background: rgba(255, 210, 74, 0.08);
  color: var(--jb-yellow);
  border-left-color: var(--jb-yellow);
}
.jb-sidebar .nav-item .ic { width: 18px; text-align: center; opacity: 0.8; }

.jb-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.jb-topbar {
  height: 56px;
  background: var(--jb-surface);
  border-bottom: 1px solid var(--jb-border);
  display: flex; align-items: center; gap: 10px;
  padding: 0 18px;
}
.jb-topbar .crumbs {
  flex: 1; display: flex; align-items: baseline; gap: 8px;
  font-size: 13px; color: var(--jb-text-dim);
}
.jb-topbar .crumbs .here { color: var(--jb-text); font-weight: 600; font-size: 15px; }
.jb-content { flex: 1; overflow: auto; background: var(--jb-bg); }

/* Saved/Toast colors mapped to jb tokens */

/* Remove pixelated cheetah artifacts when not used */
img[src*="k2b-cheetah"] { display: none !important; }

/* ── Module menu landing (MenuLanding.jsx) ───────────────────── */
.jb-menu-landing { padding: 28px 32px 40px; max-width: 1180px; margin: 0 auto; }
.jb-menu-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  margin-bottom: 22px;
}
.jb-menu-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.jb-menu-chip {
  font-size: 10px; font-weight: 700; letter-spacing: 0.10em;
  color: var(--jb-blue); background: var(--jb-blue-tint);
  border: 1px solid #CBE0F4; border-radius: 999px; padding: 3px 9px;
}
.jb-menu-legacy {
  font-family: var(--jb-mono); font-size: 11px; color: var(--jb-text-muted);
}
.jb-menu-legacy::before { content: "legacy: "; opacity: 0.7; }
.jb-menu-h1 {
  margin: 0; font-size: 27px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--jb-text);
}
.jb-menu-sub { margin: 6px 0 0; font-size: 13px; color: var(--jb-text-dim); max-width: 720px; }

.jb-menu-groups { display: flex; flex-direction: column; gap: 26px; }
.jb-menu-group-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--jb-text-muted); margin-bottom: 10px;
  padding-bottom: 6px; border-bottom: 1px solid var(--jb-border);
}
.jb-menu-grid { display: grid; gap: 12px; }

.jb-menu-card {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--jb-surface); border: 1px solid var(--jb-border);
  border-radius: var(--jb-r-lg); box-shadow: var(--jb-shadow-sm);
  padding: 14px 14px; cursor: pointer;
  transition: border-color .12s, box-shadow .12s, transform .05s, background .12s;
  font-family: var(--jb-font); min-height: 64px;
}
.jb-menu-card:hover {
  border-color: var(--jb-blue); box-shadow: var(--jb-shadow);
  transform: translateY(-1px);
}
.jb-menu-card:active { transform: translateY(0); box-shadow: var(--jb-shadow-sm); }
.jb-menu-card:focus-visible { outline: none; box-shadow: var(--jb-focus); }
.jb-menu-card:disabled { opacity: 0.5; cursor: default; transform: none; }

.jb-menu-card-ic {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #1A2350 0%, #0E1430 100%);
  color: var(--jb-yellow); font-size: 17px; font-weight: 700;
  font-family: var(--jb-font);
}
.jb-menu-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.jb-menu-card-label { font-size: 14px; font-weight: 600; color: var(--jb-text); }
.jb-menu-card-desc  { font-size: 11.5px; color: var(--jb-text-dim); line-height: 1.35; }
.jb-menu-card-arrow {
  flex: 0 0 auto; color: var(--jb-text-muted); font-size: 20px; font-weight: 400;
  transition: color .12s, transform .12s;
}
.jb-menu-card:hover .jb-menu-card-arrow { color: var(--jb-blue); transform: translateX(2px); }

/* ── A/R screens — shared bits (AR.jsx) ──────────────────────── */
.jb-ar-aged-0  { color: var(--jb-green); }
.jb-ar-aged-1  { color: var(--jb-amber); }
.jb-ar-aged-2  { color: #C0651A; }
.jb-ar-aged-3  { color: var(--jb-red); }