/* ==========================================================================
   app-shell.css — the reimagined chrome (DESIGN.md §F)
   Light left rail + top bar (desktop), bottom bar (mobile), trial pill,
   slide-over panels, capture sheet, compliance chips.

   Color grammar (§F2):
     --rx-money   : Commission green — RESERVED for money (savings, deductions)
     --rx-accent  : non-green — interactive/primary buttons (so money never
                    competes with buttons)
     amber        : needs review / soft compliance gap / trial warning
     red          : hard violations, expired, destructive
   ========================================================================== */

:root {
  --rx-money:   #064E3B;
  --rx-money-2: #059669;
  --rx-money-bg:#D1FAE5;
  --rx-accent:  #2563EB;
  --rx-accent-d:#1D4ED8;
  --rx-amber:   #B45309;
  --rx-amber-bg:#FEF3C7;
  --rx-red:     #B91C1C;
  --rx-red-bg:  #FEE2E2;
  --rx-rail-w:  248px;
  --rx-topbar-h:56px;
  --rx-ink:     #1F2937;
  --rx-muted:   #6B7280;
  --rx-line:    #E5E7EB;
  --rx-surface: #FFFFFF;
  --rx-canvas:  #F8FAFC;
}

/* Dark theme: the reimagined pages are built on these --rx-* tokens, so
   overriding them (alongside Tabler's own data-bs-theme="dark") gives a
   coherent dark mode without re-skinning every component. Money-green stays
   readable, accents brighten slightly for contrast on dark surfaces. */
html[data-bs-theme="dark"] {
  --rx-money:   #34D399;
  --rx-money-2: #34D399;
  --rx-money-bg:#064E3B;
  --rx-accent:  #3B82F6;
  --rx-accent-d:#60A5FA;
  --rx-amber:   #FBBF24;
  --rx-amber-bg:#3F2D0A;
  --rx-red:     #F87171;
  --rx-red-bg:  #3B1717;
  --rx-ink:     #E5E7EB;
  --rx-muted:   #9CA3AF;
  --rx-line:    #2B3648;
  --rx-surface: #161E2E;
  --rx-canvas:  #0F172A;
}
html[data-bs-theme="dark"] body.rx-app { background: var(--rx-canvas); color: var(--rx-ink); }

/* ---- layout scaffold ---------------------------------------------------- */
body.rx-app { background: var(--rx-canvas); margin: 0; }
.rx-shell { min-height: 100vh; }

.rx-rail {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--rx-rail-w);
  background: var(--rx-surface); border-right: 1px solid var(--rx-line);
  display: flex; flex-direction: column; z-index: 1030; padding: 14px 12px;
}
.rx-rail .rx-brand { font-weight: 700; font-size: 1.15rem; color: var(--rx-ink); padding: 6px 10px 16px; letter-spacing: -.02em; }
.rx-rail .rx-brand b { color: var(--rx-money); }
.rx-nav { display: flex; flex-direction: column; gap: 2px; }
.rx-nav a {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 9px;
  color: var(--rx-ink); text-decoration: none; font-weight: 500; font-size: .95rem;
}
.rx-nav a:hover { background: #F1F5F9; }
.rx-nav a.active { background: var(--rx-money-bg); color: var(--rx-money); }
.rx-nav a.active svg { color: var(--rx-money); }
.rx-nav svg { width: 20px; height: 20px; color: var(--rx-muted); flex: 0 0 20px; }
.rx-nav-sep { height: 1px; background: var(--rx-line); margin: 10px 6px; }
.rx-rail .rx-rail-foot { margin-top: auto; }

/* tier-gated nav items hidden until session.js sets body[data-tier] */
.tier-team { display: none; }
body[data-tier="team"] .tier-team,
body[data-tier="broker"] .tier-team { display: flex; }
.admin-only { display: none; }
body[data-admin] .admin-only { display: flex; }

/* Plus-tier badges: shown to basic users (aspiration), hidden once entitled. */
body[data-tier="plus"] .tier-plus-badge,
body[data-tier="team"] .tier-plus-badge,
body[data-tier="broker"] .tier-plus-badge { display: none; }

/* SAMPLE watermark for zero-data report previews. */
.rx-sample { position: relative; }
.rx-sample::after { content: "SAMPLE"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 4rem; font-weight: 800; color: rgba(15,23,42,.06); transform: rotate(-18deg); pointer-events: none; letter-spacing: .1em; }

.rx-main { margin-left: var(--rx-rail-w); display: flex; flex-direction: column; min-height: 100vh; }

.rx-topbar {
  position: sticky; top: 0; z-index: 1020; height: var(--rx-topbar-h);
  background: rgba(255,255,255,.9); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rx-line);
  display: flex; align-items: center; gap: 12px; padding: 0 20px;
}
.rx-topbar .rx-top-spacer { flex: 1; }

/* + Add — the visually dominant control (accent, not green) */
.rx-add-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px;
  background: var(--rx-accent); color: #fff; border: 0; border-radius: 9px;
  font-weight: 600; font-size: .95rem; cursor: pointer;
}
.rx-add-btn:hover { background: var(--rx-accent-d); }
.rx-add-btn svg { width: 18px; height: 18px; }

.rx-content { padding: 24px 20px 80px; width: 100%; max-width: 1040px; margin: 0 auto; }

/* ---- trial pill (3 temperatures) --------------------------------------- */
.trial-pill {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px;
  border-radius: 999px; font-size: .85rem; font-weight: 500; cursor: pointer; border: 1px solid transparent;
}
.trial-pill .trial-dot { width: 8px; height: 8px; border-radius: 50%; }
.trial-calm { background: #F1F5F9; color: var(--rx-muted); }
.trial-calm .trial-dot { background: #94A3B8; }
.trial-warm { background: var(--rx-amber-bg); color: var(--rx-amber); }
.trial-warm .trial-dot { background: var(--rx-amber); }
.trial-hot  { background: var(--rx-red-bg); color: var(--rx-red); }
.trial-hot  .trial-dot { background: var(--rx-red); }

/* ---- avatar menu -------------------------------------------------------- */
.rx-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--rx-money); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 600; cursor: pointer; border: 0; }

/* ---- money + chips ------------------------------------------------------ */
.rx-money-text { color: var(--rx-money); font-variant-numeric: tabular-nums; }
.rx-hero-amount { color: var(--rx-money); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.rx-chip { display: inline-flex; align-items: center; gap: 3px; font-size: .72rem; font-weight: 600;
  padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.rx-chip-amber { background: var(--rx-amber-bg); color: var(--rx-amber); }
.rx-chip-red   { background: var(--rx-red-bg);   color: var(--rx-red); }
.rx-chip-muted { background: #F1F5F9; color: var(--rx-muted); }
.rx-status { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 500; }
.rx-status-processing { color: var(--rx-muted); }
.rx-status-review { color: var(--rx-amber); }
.rx-status-confirmed { color: var(--rx-money-2); }

/* ---- slide-over panels (upgrade, help) --------------------------------- */
.slide-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 92vw;
  background: var(--rx-surface); box-shadow: -12px 0 40px rgba(0,0,0,.12);
  transform: translateX(100%); transition: transform .25s ease; z-index: 1060;
  display: flex; flex-direction: column;
}
.slide-panel.panel-open { transform: translateX(0); }
.slide-panel .panel-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--rx-line); }
.slide-panel .panel-head h3 { margin: 0; }
.slide-panel .panel-body { padding: 20px; overflow-y: auto; flex: 1; }
.panel-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.4); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 1055; }
body.panel-active .panel-backdrop { opacity: 1; pointer-events: auto; }

/* ---- capture sheet ------------------------------------------------------ */
.capture-modal .modal-dialog { max-width: 540px; }

/* Mobile: the capture sheet (and edit/bulk modals) become a full-width bottom
   sheet with a scrollable body, so the Save button clears the keyboard and the
   home indicator (DESIGN.md §F5 "full-height sheet (mobile)", §R-U5 safe-area). */
@media (max-width: 575.98px) {
  .capture-modal .modal-dialog,
  .modal-blur .modal-dialog-centered { margin: 0; max-width: 100%; position: fixed; inset: auto 0 0 0;
    min-height: auto; align-items: flex-end; }
  .capture-modal .modal-content,
  .modal-blur .modal-dialog-centered .modal-content { border-radius: 16px 16px 0 0; max-height: 92dvh; }
  .capture-modal .modal-body,
  .modal-blur .modal-dialog-centered .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}

/* Touch ergonomics: ensure the chrome controls clear 44px on coarse pointers. */
@media (pointer: coarse) {
  .rx-add-btn, .trial-pill { min-height: 44px; }
  .btn-close { min-width: 44px; min-height: 44px; }
}
.capture-modes { display: flex; gap: 6px; background: #F1F5F9; padding: 4px; border-radius: 10px; margin-bottom: 18px; }
.capture-modes button { flex: 1; border: 0; background: transparent; padding: 8px; border-radius: 8px; font-weight: 600; color: var(--rx-muted); cursor: pointer; min-height: 44px; }
.capture-modes button.active { background: #fff; color: var(--rx-ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

.capture-dropzone {
  border: 2px dashed #CBD5E1; border-radius: 14px; padding: 36px 18px; text-align: center;
  color: var(--rx-muted); cursor: pointer; transition: border-color .15s, background .15s;
}
.capture-dropzone:hover, .capture-dropzone.dragover { border-color: var(--rx-accent); background: #EFF6FF; }
.capture-dropzone .dz-icon { width: 40px; height: 40px; color: #94A3B8; margin-bottom: 8px; }
.capture-dropzone strong { color: var(--rx-ink); display: block; font-size: 1.05rem; }

.capture-disclosure { margin-top: 14px; }
.capture-disclosure summary { cursor: pointer; color: var(--rx-accent); font-weight: 600; font-size: .9rem; list-style: none; }
.capture-disclosure summary::-webkit-details-marker { display: none; }

.capture-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rx-line); font-size: .85rem; color: var(--rx-muted); }
.capture-foot code { background: #F1F5F9; padding: 2px 6px; border-radius: 5px; color: var(--rx-ink); }

.trip-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.trip-chip { border: 1px solid var(--rx-line); background: #fff; border-radius: 999px; padding: 6px 12px; font-size: .85rem; cursor: pointer; white-space: nowrap; min-height: 40px; display: inline-flex; align-items: center; }
.trip-chip:hover { border-color: var(--rx-accent); background: #EFF6FF; }

.mileage-preview { background: var(--rx-money-bg); color: var(--rx-money); border-radius: 10px; padding: 12px 14px; font-weight: 600; display: none; }
.mileage-preview.show { display: block; }

.hint-irs { display: flex; gap: 6px; align-items: flex-start; font-size: .8rem; color: var(--rx-muted); margin-top: 6px; }
.hint-irs svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 1px; }

/* ---- review cards ------------------------------------------------------- */
.review-card { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--rx-line); border-radius: 12px; background: #fff; align-items: center; }
.review-card + .review-card { margin-top: 10px; }
.review-card.amber { border-color: #FCD34D; background: #FFFBEB; }
.review-thumb { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; background: #F1F5F9; flex: 0 0 52px; }
.review-body { flex: 1; min-width: 0; }
.review-body .rc-title { font-weight: 600; color: var(--rx-ink); }
.review-body .rc-sub { font-size: .85rem; color: var(--rx-muted); }
.review-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.btn-confirm { background: var(--rx-money); color: #fff; border: 0; border-radius: 8px; padding: 7px 13px; font-weight: 600; cursor: pointer; min-height: 40px; }
.btn-confirm:hover { background: #053D2E; }
.btn-fix { background: #fff; border: 1px solid var(--rx-line); border-radius: 8px; padding: 7px 13px; font-weight: 600; cursor: pointer; color: var(--rx-ink); min-height: 40px; }

/* ---- empty state -------------------------------------------------------- */
.empty { text-align: center; padding: 44px 20px; }
.empty .empty-icon { font-size: 2.2rem; margin-bottom: 8px; }
.empty .empty-title { font-weight: 600; font-size: 1.1rem; color: var(--rx-ink); margin-bottom: 4px; }

/* ---- mobile bottom bar -------------------------------------------------- */
.rx-bottom { display: none; }
@media (max-width: 991.98px) {
  .rx-rail { display: none; }
  .rx-main { margin-left: 0; }
  .rx-content { padding: 16px 16px 88px; }
  .rx-bottom {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: calc(58px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--rx-surface); border-top: 1px solid var(--rx-line); z-index: 1040; align-items: stretch;
  }
  .rx-bottom > .dropdown { flex: 1; display: flex; }
  .rx-bottom > .dropdown > .rx-more { width: 100%; }
  .rx-bottom a, .rx-bottom button {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border: 0; background: transparent; color: var(--rx-muted); font-size: .7rem; text-decoration: none; cursor: pointer;
    min-height: 44px;
  }
  .rx-bottom a.active { color: var(--rx-money); }
  .rx-bottom svg { width: 23px; height: 23px; }
  .rx-bottom .rx-fab { color: #fff; }
  .rx-bottom .rx-fab .rx-fab-circle { width: 46px; height: 46px; border-radius: 50%; background: var(--rx-accent);
    display: flex; align-items: center; justify-content: center; margin-top: -14px; box-shadow: 0 4px 12px rgba(37,99,235,.4); }
  .rx-bottom .rx-fab .rx-fab-circle svg { width: 26px; height: 26px; }
  .slide-panel { width: 100%; }
  .rx-add-btn .rx-add-label { display: none; }
}

/* desktop: hide mobile-only, mobile: hide desktop-only */
@media (min-width: 992px) { .rx-mobile-only { display: none !important; } }

/* Support conversation: staff reply bubble (theme-aware, unlike Tabler's .bg-light) */
.rx-staff-bubble { background: var(--tblr-bg-surface-secondary); }