/* =====================================================================
   Lkota — design system (Milestone 8). Layered on top of Bootstrap 5.
   Premium, high-trust automotive SaaS look. Mobile-first.
   ===================================================================== */
:root {
  --lk-navy: #0f172a;        /* sidebar / header */
  --lk-navy-2: #1e293b;
  --lk-navy-3: #334155;
  --lk-ink: #0f172a;         /* primary text */
  --lk-muted: #64748b;
  --lk-line: #e2e8f0;
  --lk-bg: #f1f5f9;          /* app background */
  --lk-surface: #ffffff;
  --lk-accent: #2563eb;      /* electric blue */
  --lk-accent-2: #1d4ed8;
  --lk-teal: #0d9488;
  --lk-success: #16a34a;
  --lk-warning: #d97706;
  --lk-danger: #dc2626;
  --lk-radius: 16px;
  --lk-radius-sm: 11px;
  --lk-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
  --lk-shadow-lg: 0 12px 40px rgba(15,23,42,.12);
  --lk-sidebar-w: 264px;
}

* { -webkit-tap-highlight-color: transparent; }
body {
  background: var(--lk-bg);
  color: var(--lk-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--lk-accent); text-decoration: none; }
a:hover { color: var(--lk-accent-2); }
.text-muted { color: var(--lk-muted) !important; }

/* ---------- Cards ---------- */
.card, .lk-card {
  border: 1px solid var(--lk-line);
  border-radius: var(--lk-radius);
  box-shadow: var(--lk-shadow);
  background: var(--lk-surface);
}
.lk-card-hover { transition: transform .12s ease, box-shadow .12s ease; }
.lk-card-hover:hover { transform: translateY(-2px); box-shadow: var(--lk-shadow-lg); }

/* ---------- Buttons ---------- */
.btn { border-radius: var(--lk-radius-sm); font-weight: 600; min-height: 46px;
       display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.btn-sm { min-height: 36px; border-radius: 9px; }
.btn-lg { min-height: 52px; }
.btn-primary { background: var(--lk-accent); border-color: var(--lk-accent); }
.btn-primary:hover { background: var(--lk-accent-2); border-color: var(--lk-accent-2); }
.btn-success { background: var(--lk-success); border-color: var(--lk-success); }
.btn-outline-primary { color: var(--lk-accent); border-color: #c7d2fe; }
.btn-outline-primary:hover { background: var(--lk-accent); border-color: var(--lk-accent); }
.btn:focus-visible, .form-control:focus, .form-select:focus,
a:focus-visible, .nav-link:focus-visible {
  outline: 3px solid rgba(37,99,235,.35); outline-offset: 1px; box-shadow: none;
}

/* ---------- Forms ---------- */
.form-control, .form-select { border-radius: var(--lk-radius-sm); border-color: var(--lk-line);
  padding: .6rem .8rem; }
.form-control:focus, .form-select:focus { border-color: var(--lk-accent); }
.form-label { font-weight: 600; font-size: .85rem; color: #334155; }
.lk-form-section { border-top: 1px solid var(--lk-line); padding-top: 1rem; margin-top: 1rem; }

/* ---------- Badges (soft pill style) ---------- */
.badge { font-weight: 600; border-radius: 999px; padding: .38em .7em; letter-spacing: .2px; }
.badge.bg-success { background: #dcfce7 !important; color: #166534 !important; }
.badge.bg-info { background: #e0f2fe !important; color: #075985 !important; }
.badge.bg-warning { background: #fef3c7 !important; color: #92400e !important; }
.badge.bg-danger { background: #fee2e2 !important; color: #991b1b !important; }
.badge.bg-secondary { background: #eef2f7 !important; color: #475569 !important; }
.badge.bg-light { background: #f1f5f9 !important; color: #475569 !important; }
.badge.bg-dark { background: #0f172a !important; color: #fff !important; }

/* ---------- Layout shell ---------- */
.lk-shell { display: flex; min-height: 100vh; }
.lk-topbar {
  position: sticky; top: 0; z-index: 1040; height: 58px;
  background: var(--lk-surface); border-bottom: 1px solid var(--lk-line);
  display: flex; align-items: center; gap: .5rem; padding: 0 .9rem;
}
.lk-brand { font-weight: 800; letter-spacing: .3px; display: flex; align-items: center; gap: .5rem; }
.lk-brand .lk-logo { width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, var(--lk-accent), var(--lk-teal));
  color: #fff; display: grid; place-items: center; font-size: 1rem; }

/* Sidebar (dark) */
.lk-sidebar {
  width: var(--lk-sidebar-w); background: var(--lk-navy) !important; color: #cbd5e1;
  display: flex; flex-direction: column; padding: 0;
}
@media (min-width: 992px) {
  .lk-sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1045; }
}
.lk-sidebar .lk-brand { color: #fff; padding: 1rem 1.1rem; font-size: 1.15rem;
  border-bottom: 1px solid rgba(255,255,255,.07); }
.lk-sidebar .lk-nav { padding: .75rem .6rem; overflow-y: auto; flex: 1; }
.lk-nav-label { text-transform: uppercase; font-size: .68rem; letter-spacing: .8px;
  color: #64748b; padding: .9rem .7rem .3rem; font-weight: 700; }
.lk-sidebar .nav-link {
  color: #cbd5e1; border-radius: 10px; padding: .62rem .75rem; margin-bottom: 2px;
  font-weight: 500; display: flex; align-items: center; gap: .65rem; font-size: .92rem;
}
.lk-sidebar .nav-link i { font-size: 1.05rem; width: 1.2rem; text-align: center; opacity: .9; }
.lk-sidebar .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.lk-sidebar .nav-link.active { background: var(--lk-accent); color: #fff; box-shadow: 0 6px 16px rgba(37,99,235,.4); }
.lk-sidebar .nav-link.disabled { color: #475569; }
.lk-sidebar-foot { padding: .75rem; border-top: 1px solid rgba(255,255,255,.07); }
.lk-userchip { display: flex; align-items: center; gap: .6rem; color: #e2e8f0; }
.lk-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--lk-navy-3);
  color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }

.lk-main { flex: 1; min-width: 0; }
@media (min-width: 992px) {
  .lk-main { margin-left: var(--lk-sidebar-w); }
  .lk-topbar { display: none; }
}
.lk-content { padding: 1.1rem; max-width: 1140px; margin: 0 auto; }
@media (min-width: 992px) { .lk-content { padding: 1.6rem; } }

/* Page header */
.lk-page-head { display: flex; justify-content: space-between; align-items: flex-start;
  gap: .75rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.lk-page-title { font-size: 1.5rem; font-weight: 800; margin: 0; line-height: 1.1; }
.lk-page-sub { color: var(--lk-muted); font-size: .9rem; margin-top: .15rem; }

/* Chips */
.lk-chip { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600;
  font-size: .8rem; padding: .3rem .65rem; border-radius: 999px; background: #eef2f7; color: #475569; }
.lk-chip.ok { background: #dcfce7; color: #166534; }
.lk-chip.warn { background: #fef3c7; color: #92400e; }
.lk-chip.bad { background: #fee2e2; color: #991b1b; }

/* Stat cards */
.lk-stat-card { padding: 1rem 1.1rem; }
.lk-stat-card .lk-stat-icon { width: 38px; height: 38px; border-radius: 11px; display: grid;
  place-items: center; font-size: 1.1rem; margin-bottom: .55rem; background: #eff6ff; color: var(--lk-accent); }
.lk-stat-card .lk-stat-label { color: var(--lk-muted); font-size: .8rem; font-weight: 600; }
.lk-stat-card .lk-stat-value { font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.lk-stat-icon.green { background: #dcfce7; color: var(--lk-success); }
.lk-stat-icon.amber { background: #fef3c7; color: var(--lk-warning); }
.lk-stat-icon.teal { background: #ccfbf1; color: var(--lk-teal); }

/* Status stepper / timeline */
.lk-stepper { display: flex; flex-wrap: wrap; gap: .25rem; }
.lk-step { flex: 1 1 0; min-width: 92px; text-align: center; position: relative; padding-top: 6px; }
.lk-step .lk-dot { width: 30px; height: 30px; border-radius: 50%; margin: 0 auto .35rem;
  display: grid; place-items: center; font-weight: 700; font-size: .85rem;
  background: #e2e8f0; color: #64748b; border: 2px solid #e2e8f0; }
.lk-step .lk-step-label { font-size: .78rem; color: var(--lk-muted); font-weight: 600; }
.lk-step.done .lk-dot { background: var(--lk-success); border-color: var(--lk-success); color: #fff; }
.lk-step.current .lk-dot { background: var(--lk-accent); border-color: var(--lk-accent); color: #fff;
  box-shadow: 0 0 0 4px rgba(37,99,235,.18); }
.lk-step.current .lk-step-label { color: var(--lk-accent); }
.lk-step::before { content: ""; position: absolute; top: 21px; left: -50%; width: 100%; height: 2px;
  background: #e2e8f0; z-index: 0; }
.lk-step:first-child::before { display: none; }
.lk-step.done::before, .lk-step.current::before { background: var(--lk-success); }
.lk-step .lk-dot { position: relative; z-index: 1; }

/* Empty state */
.lk-empty { padding: 2.2rem 1rem; }
.lk-empty-icon { width: 60px; height: 60px; border-radius: 16px; margin: 0 auto .8rem;
  display: grid; place-items: center; font-size: 1.6rem; background: #eff6ff; color: var(--lk-accent); }
.lk-empty-title { font-weight: 700; font-size: 1.05rem; }
.lk-empty-text { color: var(--lk-muted); font-size: .9rem; max-width: 360px; margin: .25rem auto 0; }

/* Tables -> comfortable */
.table { --bs-table-bg: transparent; }
.table > thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .4px;
  color: var(--lk-muted); border-bottom-color: var(--lk-line); }
.table > tbody td { border-color: var(--lk-line); }
.lk-row-link { cursor: pointer; }
.lk-row-link:hover { background: #f8fafc; }

/* Alerts */
.alert { border: 0; border-radius: var(--lk-radius-sm); border-left: 4px solid transparent; }
.alert-success { background: #f0fdf4; color: #166534; border-left-color: var(--lk-success); }
.alert-info { background: #eff6ff; color: #1e40af; border-left-color: var(--lk-accent); }
.alert-warning { background: #fffbeb; color: #92400e; border-left-color: var(--lk-warning); }
.alert-danger { background: #fef2f2; color: #991b1b; border-left-color: var(--lk-danger); }

/* Milestone 18.6: mobile main navigation — moved from a fixed bottom bar to a
   sticky top bar just below the header, so it never collides with the iPhone /
   Safari bottom browser controls. Hidden on desktop (which uses the sidebar). */
.lk-mobilenav {
  position: sticky; top: 58px; z-index: 1039;
  background: var(--lk-surface); border-bottom: 1px solid var(--lk-line);
  display: flex; gap: .3rem; padding: .4rem .5rem;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  box-shadow: 0 4px 14px rgba(15,23,42,.05);
}
.lk-mobilenav::-webkit-scrollbar { display: none; }
.lk-mobilenav a {
  flex: 1 1 0; min-width: max-content;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: .3rem .5rem; border-radius: 10px; text-decoration: none;
  color: #475569; font-size: .68rem; font-weight: 600; white-space: nowrap;
}
.lk-mobilenav a i { font-size: 1.15rem; }
.lk-mobilenav a.active { color: var(--lk-accent); background: rgba(37,99,235,.10); }
.lk-mobilenav a.primary { color: #fff; background: var(--lk-accent); }
.lk-mobilenav a.primary.active { color: #fff; }
@media (min-width: 992px) { .lk-mobilenav { display: none; } }

/* Signature pad */
.lk-sigpad { width: 100%; height: 240px; border: 2px dashed #cbd5e1; border-radius: var(--lk-radius-sm);
  background:
    linear-gradient(#fff, #fff) padding-box,
    repeating-linear-gradient(45deg, #f8fafc, #f8fafc 6px, #fff 6px, #fff 12px);
  touch-action: none; }

/* Media thumbnails */
.lk-thumb { aspect-ratio: 4/3; border-radius: 11px; overflow: hidden; background: #f1f5f9;
  display: grid; place-items: center; border: 1px solid var(--lk-line); }
.lk-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Utilities */
.lk-soft { background: #f8fafc; border-radius: var(--lk-radius-sm); }
.lk-divider { height: 1px; background: var(--lk-line); margin: 1rem 0; }

/* ---------- Auth shell ---------- */
body.lk-auth { background: radial-gradient(1200px 520px at 50% -10%, #1e293b, #0f172a 62%); min-height: 100vh; }
.lk-auth-wrap { max-width: 440px; margin: 0 auto; padding: 2.4rem 1rem 3rem; }
.lk-auth .lk-brand { color: #fff; justify-content: center; font-size: 1.5rem; }
.lk-auth .lk-logo { width: 36px; height: 36px; font-size: 1.15rem; }
.lk-auth .card { box-shadow: 0 24px 70px rgba(0,0,0,.35); }
.lk-auth-foot { text-align: center; color: #94a3b8; font-size: .8rem; margin-top: 1rem; }
.passcode { letter-spacing: .55em; text-align: center; font-size: 1.35rem; }

/* ---- VIN live scanner (Milestone 9 UX) ---------------------------------- */
.lk-noscroll { overflow: hidden; }
.lk-scan-overlay {
  position: fixed; inset: 0; z-index: 1080; background: #0b1020;
  display: flex; flex-direction: column;
}
.lk-scan-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1rem; color: #fff;
}
.lk-scan-stage {
  position: relative; flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #000; overflow: hidden;
}
.lk-scan-frame {
  position: relative; display: inline-block; line-height: 0;
  max-width: 100%; max-height: 78vh;
}
.lk-scan-video, .lk-scan-canvas { display: block; max-width: 100%; max-height: 78vh; }
.lk-scan-canvas { background: #000; }
/* Narrow horizontal guide box — only the VIN strip should sit inside it. */
.lk-scan-guide {
  position: absolute; left: 7%; right: 7%; top: 42%; height: 16%;
  border: 2px solid #fff; border-radius: 10px;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.5);
}
.lk-scan-line {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  background: #4c8bf5; transform: translateY(-1px);
}
.lk-scan-hint {
  position: absolute; left: 0; right: 0; bottom: 6%; text-align: center;
  color: #fff; font-size: .9rem; padding: 0 1rem;
  text-shadow: 0 1px 4px rgba(0,0,0,.85);
}
.lk-scan-controls { padding: 1rem; background: #0b1020; display: flex; justify-content: center; }
.lk-scan-grp { display: flex; gap: .75rem; align-items: center; justify-content: center; }
.lk-scan-shutter {
  width: 64px; height: 64px; border-radius: 50%; border: 4px solid #fff;
  background: #4c8bf5; cursor: pointer;
}
.lk-scan-shutter:active { transform: scale(.94); }
.lk-scan-overlay .btn.active { background: #4c8bf5; color: #fff; border-color: #4c8bf5; }

/* ---- Superadmin KPI grid (Milestone 10) -------------------------------- */
.lk-kpi-grid { display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.lk-kpi { background: #fff; border: 1px solid var(--lk-border, #e5e7eb);
  border-radius: 14px; padding: .9rem 1rem; }
.lk-kpi-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  color: #6b7280; font-weight: 600; }
.lk-kpi-val { font-size: 1.7rem; font-weight: 700; line-height: 1.15; color: #0f172a; }
.lk-kpi-sub { font-size: .74rem; color: #94a3b8; margin-top: .15rem; }
.lk-action-card { background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 12px; padding: .85rem; }

/* Milestone 23.1: high-visibility, thumb-friendly auto-scan CTA. Filled teal->blue
   gradient with white text (WCAG-AA contrast); icon + text so it never relies on
   colour alone. */
.btn-lk-scan {
  display: block; width: 100%;
  background: linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%);
  color: #ffffff; border: none; font-weight: 700; font-size: 1.05rem;
  padding: .95rem 1rem; border-radius: .85rem;
  box-shadow: 0 4px 14px rgba(14, 165, 233, .35);
}
.btn-lk-scan:hover, .btn-lk-scan:focus { color: #ffffff; filter: brightness(1.06); box-shadow: 0 6px 18px rgba(14, 165, 233, .45); }
.btn-lk-scan:focus-visible { outline: 3px solid #0f172a; outline-offset: 2px; }
.btn-lk-scan:active { transform: translateY(1px); }

/* Milestone 23.3: required-field marker. Red asterisk beside the label text,
   readable on mobile; the accessible name comes from a .visually-hidden
   "required" span so it never relies on colour alone. */
.required-marker { color: #dc2626; font-weight: 700; margin-left: .15rem; }
.lk-required-note { font-size: .8rem; color: #64748b; }
.lk-required-note .required-marker { margin-left: 0; }

/* ---------------------------------------------------------------------------
   Milestone 23.5: seller-ID barcode scanner — short, mobile-friendly preview.
   The video is uniformly scaled to FIT a capped height with the WHOLE native
   frame still visible (no object-fit cropping), so the green guide box, which is
   positioned in % of the video, still maps 1:1 onto the native frame that
   seller_id_scan.js crops. That preserves the Milestone 18.5 invariant (crop from
   native pixels, never from CSS display size).
   Scoped to the seller-ID scanner only — the VIN scanner is untouched.
   --------------------------------------------------------------------------- */
.lk-cam-wrap { max-width: 100%; }
.lk-cam-video-wrap {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%; background: #000;
  border-radius: 10px; overflow: hidden;
  height: 50vh; max-height: 460px; min-height: 240px;
}
/* Shrink-to-fit stage: its box equals the rendered video, so the guide box
   percentages below are percentages of the video (and of the native frame). */
.lk-cam-stage { position: relative; height: 100%; max-width: 100%; }
.lk-cam-stage video { display: block; height: 100%; width: auto; max-width: 100%; }

/* Overlay box fractions MUST match BOX in seller_id_scan.js. */
.lk-cam-box {
  position: absolute; left: 6%; top: 37%; width: 88%; height: 26%;
  border: 2px solid #22c55e; border-radius: 8px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .40); pointer-events: none;
}
.lk-cam-hint {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  white-space: nowrap; color: #fff; font-size: .72rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
}
.lk-barcode-guide svg { width: 46%; max-width: 150px; height: auto; }

/* Shorter viewports: keep the Capture button above the fold. */
@media (max-height: 720px) {
  .lk-cam-video-wrap { height: 44vh; min-height: 220px; }
}
@media (max-height: 620px) {
  .lk-cam-video-wrap { height: 40vh; min-height: 200px; }
}

/* Milestone 26.38: open-source seller-ID scanner viewport (ported from the
   proven scanner evaluation project). The video uses object-fit: cover and the
   ROI overlay is centered with CSS; seller_id_scanner.js maps the on-screen
   ROI rectangle back into intrinsic camera pixels on every frame grab, so
   these styles and the crop can never drift apart. */
.lk-scan-view{position:relative;width:100%;aspect-ratio:3/4;background:#0b1220;
  border-radius:12px;overflow:hidden;max-height:60vh}
@media (min-width:700px){.lk-scan-view{aspect-ratio:16/10}}
.lk-scan-view video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lk-scan-roi{position:absolute;left:50%;top:50%;width:88%;aspect-ratio:3.4/1;
  max-height:34%;transform:translate(-50%,-50%);
  border:2px solid rgba(255,255,255,.95);border-radius:10px;
  box-shadow:0 0 0 100vmax rgba(0,0,0,.40);pointer-events:none}
.lk-scan-roi-label{position:absolute;left:50%;top:-1.9em;transform:translateX(-50%);
  white-space:nowrap;color:rgba(255,255,255,.9);font-size:.72rem;
  letter-spacing:.06em;text-transform:uppercase;
  text-shadow:0 1px 2px rgba(0,0,0,.9)}
.lk-scan-roi-line{position:absolute;left:6px;right:6px;top:10%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(74,222,128,.9),transparent);
  animation:lk-scan-sweep 1.6s ease-in-out infinite alternate}
@keyframes lk-scan-sweep{from{top:10%}to{top:88%}}
@media (prefers-reduced-motion: reduce){
  .lk-scan-roi-line{animation:none;top:50%}
}

/* Milestone 26.28: media auto-upload tiles.
   A tile is "saved" only when the server confirmed storage; every earlier
   state is explicitly labelled as not-yet-saved. */
.lk-upload-tiles{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}
.lk-upload-tile{flex:1 1 220px;min-width:200px;border:1px solid #e2e8f0;
  border-radius:10px;padding:.6rem .7rem;background:#fff}
.lk-upload-tile[data-state="saved"]{border-color:#22c55e}
.lk-upload-tile[data-state="failed"]{border-color:#ef4444}
.lk-upload-name{font-size:.8rem;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.lk-upload-bar{position:relative;height:6px;border-radius:4px;background:#e2e8f0;
  overflow:hidden;margin:.4rem 0}
.lk-upload-bar span{display:block;height:100%;width:0;background:#2563eb;
  transition:width .2s linear}
.lk-upload-bar.is-indeterminate span{width:40%;background:#2563eb;
  animation:lk-upload-slide 1.1s ease-in-out infinite}
@keyframes lk-upload-slide{0%{margin-left:-40%}100%{margin-left:100%}}
.lk-upload-state{font-size:.74rem;color:#64748b}
.lk-upload-tile[data-state="saved"] .lk-upload-state{color:#15803d;font-weight:600}
.lk-upload-tile[data-state="failed"] .lk-upload-state{color:#b91c1c}
.lk-upload-actions{display:flex;gap:.35rem;margin-top:.45rem}
.lk-upload-actions:empty{display:none}
.lk-upload-banner{margin-bottom:.75rem}

/* Milestone 26.31: shared support widget.
   Milestone 26.31.1: the floating action button is GONE. It used
   position:fixed, so it followed the viewport while scrolling, covered cards
   and controls, and sat near the Safari bottom chrome on iPhone. Support is
   now an ordinary navigation item (authenticated) and an inline link (public
   auth pages), both in normal document flow. Nothing below positions the
   Support entry point relative to the viewport. */

/* Sidebar/drawer nav entry rendered as a <button> so it opens the modal
   instead of navigating away mid-workflow. Neutralises the UA button styling
   so it is pixel-consistent with its <a class="nav-link"> siblings. */
.lk-sidebar .nav-link.lk-nav-btn {
  width: 100%; text-align: left; background: none; border: 0;
  font: inherit; cursor: pointer;
}
/* Inline "Need help? Contact Support" on the public auth pages. */
.lk-support-inline { color: #94a3b8; }
.lk-support-inline .btn-link { font-size: inherit; font-weight: 600;
  text-decoration: underline; vertical-align: baseline; }

/* Honeypot: removed from view and from the tab order, never display:none
   (which some bots skip). */
.lk-support-hp { position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; }
.lk-support-files { display: flex; flex-direction: column; gap: .4rem;
  margin-top: .5rem; }
.lk-support-file { display: grid; grid-template-columns: 1fr auto;
  grid-template-areas: "name action" "state action"; gap: .1rem .5rem;
  align-items: center; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: .5rem .6rem; background: #fff; }
.lk-support-file.is-invalid-file { border-color: #ef4444; background: #fef2f2; }
.lk-support-file-name { grid-area: name; font-size: .82rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-support-file-state { grid-area: state; font-size: .74rem; color: #64748b; }
.lk-support-file.is-invalid-file .lk-support-file-state { color: #b91c1c; }
.lk-support-file button { grid-area: action; }
.lk-support-progress { height: 6px; border-radius: 4px; background: #e2e8f0;
  overflow: hidden; margin-bottom: .6rem; }
.lk-support-progress span { display: block; height: 100%; width: 0;
  background: #2563eb; transition: width .2s linear; }
/* The support widget's own required marker and success panel. Deliberately
   NOT partials/required_marker.html and NOT Bootstrap's .alert-success:
   M23.3 counts that partial's screen-reader text on deal pages, and M26.23
   asserts "alert-success" is absent from the VIN reuse warnings. The widget
   renders on every authenticated page, so it must stay invisible to both. */
.lk-support-req { color: #dc2626; font-weight: 700; margin-left: .15rem; }
.lk-support-ok {
  border: 1px solid #badbcc; background: #d1e7dd; color: #0f5132;
  border-radius: .375rem; padding: 1rem; margin-bottom: 1rem;
}