/* ══════════════════════════════════════════════════════════════════
   LUXPANEL DESIGN SYSTEM — luxtravely.com platform
   luxpanel.css  |  Load BEFORE lux-components.css
   ------------------------------------------------------------------
   Single source of truth for the 2026 "LuxPanel" redesign:
   gold #B3A686 · ink #323232 · cream #F7F7F5 · espresso #26241F
   Montserrat (titles) + Inter (text)
   Reference mockup: luxpanel-redesign-kit/ · Rules: docs/DESIGN_RULES.md
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS ──────────────────────────────────────────── */
:root {
    /* Canvas & surfaces */
    --lp-bg:        #F7F7F5;   /* page background (cream) */
    --lp-bg2:       #F5F3EC;   /* inset background (inputs, bars) */
    --lp-card:      #FFFFFF;   /* card surface */
    --lp-card2:     #FAF8F3;   /* card alt: hovers, table heads */
    --lp-line:      #E6E1D5;   /* primary border */
    --lp-line2:     #EFEBE0;   /* soft border: row dividers */

    /* Ink */
    --lp-ink:       #323232;   /* headings, primary text */
    --lp-ink2:      #5C5850;   /* secondary text, labels */
    --lp-muted:     #6E685C;   /* muted text, captions */
    --lp-muted2:    #8A8477;   /* placeholders, disabled */

    /* Brand gold */
    --lp-gold:      #B3A686;   /* primary accent — backgrounds, buttons */
    --lp-gold-dark: #9B8E69;   /* charts, hovers, secondary accent */
    --lp-gold-ink:  #6F6535;   /* gold as TEXT on light surfaces (links) */
    --lp-gold-tint: #F3EFE5;   /* gold wash backgrounds */
    --lp-gold-line: #E0D6BC;   /* gold-tinted borders */
    --lp-gold-hover:#4A431F;   /* link hover ink */
    --lp-on-gold:   #2A2618;   /* text on gold buttons */
    --lp-scrollbar: #C9C2B2;   /* thin scrollbar thumbs */

    /* Sidebar (espresso) */
    --lp-sb:        #26241F;   /* sidebar background */
    --lp-sb-deep:   #1B1813;   /* sidebar footer / wells */
    --lp-sb-text:   #C8C2B4;   /* sidebar link text */
    --lp-sb-muted:  #847D6E;   /* sidebar section labels */
    --lp-sb-active: #E9D9A8;   /* sidebar active link text */
    --lp-sb-hover:  rgba(255,255,255,.07);
    --lp-sb-active-bg: rgba(179,166,134,.18);

    /* Status */
    --lp-ok:        #338C53;  --lp-ok-bg:   #E6F4EA;  --lp-ok-ink:  #2E6B44;
    --lp-info:      #3577BA;  --lp-info-bg: #E9F1FA;  --lp-info-ink:#2D5F94;
    --lp-warn:      #A4701D;  --lp-warn-bg: #F9EFDC;  --lp-warn-ink:#8F6428;
    --lp-err:       #BF473B;  --lp-err-bg:  #F9EAE6;  --lp-err-ink: #A8453D;

    /* Chart / dot accents (status dots, donut segments) */
    --lp-dot-green: #449A60;
    --lp-dot-blue:  #4484C6;
    --lp-dot-amber: #D49840;
    --lp-dot-red:   #CD5A4D;
    --lp-dot-gold:  #B3A686;
    --lp-dot-gray:  #9A948A;

    /* Elevation */
    --lp-shadow:      0 4px 16px rgba(50,50,50,.05);
    --lp-shadow-menu: 0 12px 32px rgba(50,50,50,.16);
    --lp-shadow-modal:0 24px 70px rgba(20,18,14,.35);

    /* Shape */
    --lp-r-card:  14px;
    --lp-r-btn:   10px;
    --lp-r-input: 10px;
    --lp-r-menu:  12px;
    --lp-r-pill:  999px;

    /* Type */
    --lp-font-title: 'Montserrat', 'Inter', system-ui, sans-serif;
    --lp-font-body:  'Inter', system-ui, sans-serif;
}

/* Dark theme tokens — LIVE since the dark-mode pass (2026-07-10): the topbar
   sun/moon toggle in base.html sets html[data-lux-theme="dark"] (persisted in
   localStorage 'luxpanel-theme', applied pre-paint by the boot script).
   Tailwind-utility pages follow too: base.html emits --twlp-* RGB triples for
   both themes and points the hue remap at them. Public marketing pages
   (base_home.html) do not read the attribute and stay light. */
[data-lux-theme="dark"] {
    color-scheme: dark;   /* native scrollbars, date pickers, selects */
    --lp-bg:#171512; --lp-bg2:#1C1A16; --lp-card:#1F1D19; --lp-card2:#26231E;
    --lp-line:#33302A; --lp-line2:#2A2722;
    --lp-ink:#EDEAE2; --lp-ink2:#C7C2B6; --lp-muted:#A19B8C; --lp-muted2:#7E786C;
    --lp-gold:#C3B592; --lp-gold-dark:#B3A686; --lp-gold-ink:#D6C9A5; --lp-gold-tint:#2E2A22; --lp-gold-line:#4A4436;
    --lp-gold-hover:#E3D9BD;
    --lp-sb:#141210; --lp-sb-deep:#0E0C0A;
    --lp-ok:#75C892; --lp-ok-bg:#1F2E23; --lp-ok-ink:#8CD3A4;
    --lp-info:#87B8E6; --lp-info-bg:#222B36; --lp-info-ink:#9CC4EB;
    --lp-warn:#E5AE5A; --lp-warn-bg:#332B1B; --lp-warn-ink:#EABC75;
    --lp-err:#E88C80; --lp-err-bg:#38221E; --lp-err-ink:#EFA093;
    --lp-scrollbar:#4A453B;
    --lp-shadow:none;
}

/* Theme-scoped visibility (e.g. the two topbar logo renders) */
html[data-lux-theme="dark"] .lp-light-only { display: none !important; }
html:not([data-lux-theme="dark"]) .lp-dark-only { display: none !important; }

/* ── 2. GLOBAL BASELINE ────────────────────────────────────────── */
body {
    background: var(--lp-bg);
    color: var(--lp-ink);
    font-family: var(--lp-font-body);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.lp-title {
    font-family: var(--lp-font-title);
    letter-spacing: -0.02em;
    color: var(--lp-ink);
}
a { color: var(--lp-gold-ink); }
a:hover { color: var(--lp-gold-hover, #4A431F); }

::selection { background: rgba(179,166,134,.35); }

/* warm thin scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--lp-scrollbar, #C9C2B2) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--lp-scrollbar, #C9C2B2); border-radius: 4px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ── 3. CARDS ──────────────────────────────────────────────────── */
.lp-card {
    background: var(--lp-card);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-r-card);
    box-shadow: var(--lp-shadow);
    overflow: hidden;
}
.lp-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--lp-line);
}
.lp-card-title {
    font-family: var(--lp-font-title);
    font-weight: 600;
    font-size: 14px;
    color: var(--lp-ink);
    margin: 0;
}
.lp-card-body { padding: 16px; }
.lp-card-footer {
    display: flex;
    gap: 20px;
    padding: 10px 16px;
    border-top: 1px solid var(--lp-line2);
    font-size: 11.5px;
    color: var(--lp-muted);
}
.lp-card-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--lp-gold-ink);
    text-decoration: none;
    cursor: pointer;
}
.lp-card-link:hover { text-decoration: underline; }

/* ── 4. KPI STRIP ──────────────────────────────────────────────── */
/* One joined card, N equal cells with hairline separators. */
.lp-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    background: var(--lp-card);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-r-card);
    box-shadow: var(--lp-shadow);
    overflow: hidden;
}
.lp-kpi {
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 11px;
    border-left: 1px solid var(--lp-line2);
    margin-left: -1px;
    min-width: 0;
}
.lp-kpi-icon {
    width: 38px; height: 38px; flex: 0 0 auto;
    display: grid; place-items: center;
    color: var(--lp-gold-ink);
}
.lp-kpi-icon svg, .lp-kpi-icon i { width: 30px; height: 30px; font-size: 26px; }
.lp-kpi-icon.ok    { color: var(--lp-ok); }
.lp-kpi-icon.info  { color: var(--lp-info); }
.lp-kpi-icon.warn  { color: var(--lp-warn-ink); }
.lp-kpi-icon.err   { color: var(--lp-err); }
.lp-kpi-icon.muted { color: var(--lp-ink2); }
.lp-kpi-value {
    font-family: var(--lp-font-title);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--lp-ink);
    display: flex; align-items: center; gap: 6px;
}
.lp-kpi-label {
    font-size: 11px;
    color: var(--lp-muted);
    margin-top: 2px;
    white-space: nowrap;
}
.lp-kpi-delta-up   { font-size: 10.5px; font-weight: 700; color: var(--lp-ok); }
.lp-kpi-delta-down { font-size: 10.5px; font-weight: 700; color: var(--lp-err); }
@keyframes lp-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.lp-live-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--lp-gold);
    animation: lp-pulse 2s infinite;
}

/* ── 5. BUTTONS ────────────────────────────────────────────────── */
.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    border-radius: var(--lp-r-btn);
    font-family: var(--lp-font-body);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, filter .15s ease;
    background: var(--lp-card);
    color: var(--lp-ink2);
    border: 1px solid var(--lp-line);
}
.lp-btn:hover { background: var(--lp-card2); color: var(--lp-ink2); }
.lp-btn:active { transform: translateY(1px); }
.lp-btn:focus-visible { outline: 2px solid var(--lp-gold); outline-offset: 2px; }
.lp-btn svg, .lp-btn i { width: 15px; height: 15px; font-size: 14px; }

.lp-btn-primary, .lp-btn.primary {
    background: var(--lp-gold);
    color: var(--lp-on-gold);
    border: 0;
    font-weight: 700;
}
.lp-btn-primary:hover, .lp-btn.primary:hover { background: var(--lp-gold); color: var(--lp-on-gold); filter: brightness(1.05); }

.lp-btn-danger, .lp-btn.danger {
    background: var(--lp-err);
    color: #fff;
    border: 0;
    font-weight: 700;
}
.lp-btn-danger:hover, .lp-btn.danger:hover { background: var(--lp-err); color: #fff; filter: brightness(1.07); }

.lp-btn-ghost, .lp-btn.ghost { background: none; border: 0; color: var(--lp-ink2); }
.lp-btn-ghost:hover, .lp-btn.ghost:hover { background: var(--lp-card2); }

.lp-btn-sm { height: 32px; padding: 0 12px; font-size: 12px; border-radius: 8px; }
.lp-btn-lg { height: 44px; padding: 0 22px; font-size: 14px; }

/* icon-only square (topbar-style) */
.lp-iconbtn {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 9px;
    border: 1px solid var(--lp-line);
    background: var(--lp-card);
    color: var(--lp-ink2);
    cursor: pointer;
    position: relative;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.lp-iconbtn:hover {
    background: rgba(179,166,134,.25);
    border-color: var(--lp-gold);
    color: var(--lp-gold-ink);
}

/* ── 6. TABLES ─────────────────────────────────────────────────── */
.lp-tablecard { overflow-x: auto; }
.lp-table { width: 100%; border-collapse: collapse; }
.lp-table thead th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--lp-muted);
    text-align: left;
    padding: 9px 12px;
    background: var(--lp-card2);
    white-space: nowrap;
}
.lp-table thead th:first-child { padding-left: 16px; }
.lp-table thead th:last-child  { padding-right: 16px; }
.lp-table tbody td {
    padding: 10px 12px;
    border-top: 1px solid var(--lp-line2);
    font-size: 12.5px;
    color: var(--lp-ink2);
}
.lp-table tbody td:first-child { padding-left: 16px; }
.lp-table tbody td:last-child  { padding-right: 16px; }
.lp-table tbody tr { transition: background-color .12s ease; }
.lp-table tbody tr:hover { background: var(--lp-card2); }
.lp-table .strong { font-weight: 700; color: var(--lp-ink); font-variant-numeric: tabular-nums; }
.lp-table .num { font-variant-numeric: tabular-nums; text-align: right; }

/* ── 7. STATUS: dots, pills, badges ────────────────────────────── */
.lp-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--lp-ink2);
    white-space: nowrap;
}
.lp-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.lp-dot.green, .lp-dot.completed, .lp-dot.paid, .lp-dot.active   { background: var(--lp-dot-green); }
.lp-dot.blue,  .lp-dot.confirmed, .lp-dot.assigned               { background: var(--lp-dot-blue); }
.lp-dot.amber, .lp-dot.pending, .lp-dot.waiting                  { background: var(--lp-dot-amber); }
.lp-dot.red,   .lp-dot.cancelled, .lp-dot.failed, .lp-dot.overdue{ background: var(--lp-dot-red); }
.lp-dot.gold,  .lp-dot.enroute, .lp-dot.progress                 { background: var(--lp-dot-gold); }
.lp-dot.gray,  .lp-dot.archived, .lp-dot.draft, .lp-dot.offline  { background: var(--lp-dot-gray); }

.lp-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--lp-r-pill);
    white-space: nowrap;
    background: var(--lp-card2);
    color: var(--lp-ink2);
}
.lp-pill.ok    { background: var(--lp-ok-bg);   color: var(--lp-ok-ink); }
.lp-pill.info  { background: var(--lp-info-bg); color: var(--lp-info-ink); }
.lp-pill.warn  { background: var(--lp-warn-bg); color: var(--lp-warn-ink); }
.lp-pill.err   { background: var(--lp-err-bg);  color: var(--lp-err-ink); }
.lp-pill.gold  { background: var(--lp-gold-tint); color: var(--lp-gold-ink); }
.lp-pill.solid { background: var(--lp-gold); color: var(--lp-sb); }

.lp-count {
    font-size: 10px;
    font-weight: 700;
    background: var(--lp-gold);
    color: var(--lp-sb);
    min-width: 17px;
    height: 17px;
    padding: 1px 7px;
    border-radius: var(--lp-r-pill);
    display: inline-grid;
    place-items: center;
    font-variant-numeric: tabular-nums;
}

/* ── 8. SECTION LABELS / EYEBROWS ──────────────────────────────── */
.lp-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--lp-muted);
}

/* ── 9. FORMS ──────────────────────────────────────────────────── */
.lp-input, .lp-select, .lp-textarea {
    width: 100%;
    font-family: var(--lp-font-body);
    font-size: 13px;
    color: var(--lp-ink);
    background: var(--lp-card);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-r-input);
    padding: 9px 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.lp-input::placeholder, .lp-textarea::placeholder { color: var(--lp-muted2); }
.lp-input:focus, .lp-select:focus, .lp-textarea:focus {
    outline: none;
    border-color: var(--lp-gold);
    box-shadow: 0 0 0 3px rgba(179,166,134,.22);
}
.lp-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--lp-ink2);
    margin-bottom: 5px;
}
.lp-help { font-size: 11.5px; color: var(--lp-muted); margin-top: 4px; }
.lp-error-text { font-size: 11.5px; color: var(--lp-err); margin-top: 4px; }

/* search field (topbar style) */
.lp-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 6px 0 14px;
    background: var(--lp-bg2);
    border: 1px solid var(--lp-line);
    border-radius: 10px;
    color: var(--lp-muted);
    font-size: 12.5px;
}
.lp-kbd {
    font-size: 10.5px;
    font-weight: 600;
    border: 1px solid var(--lp-line);
    border-radius: 5px;
    padding: 2px 6px;
    background: var(--lp-card);
    color: var(--lp-muted);
}

/* ── 10. MODALS (unified) ──────────────────────────────────────── */
.lp-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(20,18,14,.5);
    display: grid;
    place-items: center;
    padding: 20px;
    animation: lp-fade .18s ease;
}
@keyframes lp-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes lp-rise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: translateY(0) } }
.lp-modal {
    background: var(--lp-card);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-r-card);
    box-shadow: var(--lp-shadow-modal);
    width: min(560px, 100%);
    max-height: min(86vh, 900px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: lp-rise .22s cubic-bezier(.16,1,.3,1);
}
.lp-modal.lg { width: min(860px, 100%); }
.lp-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--lp-line);
    background: var(--lp-card2);
}
.lp-modal-title {
    font-family: var(--lp-font-title);
    font-weight: 600;
    font-size: 15px;
    color: var(--lp-ink);
    margin: 0;
}
.lp-modal-close {
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border: 0; border-radius: 8px;
    background: none;
    color: var(--lp-muted);
    cursor: pointer;
    font-size: 16px;
}
.lp-modal-close:hover { background: var(--lp-gold-tint); color: var(--lp-ink); }
.lp-modal-body { padding: 18px; overflow-y: auto; }
.lp-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--lp-line2);
    background: var(--lp-card2);
}

/* ── 11. DROPDOWN MENUS ────────────────────────────────────────── */
.lp-menu {
    background: var(--lp-card);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-r-menu);
    box-shadow: var(--lp-shadow-menu);
    overflow: hidden;
    z-index: 40;
}
.lp-menu-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--lp-gold-ink);
    padding: 12px 14px 8px;
}
.lp-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 14px;
    font-size: 12.5px;
    color: var(--lp-ink);
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
}
.lp-menu-item:hover { background: var(--lp-card2); color: var(--lp-ink); }

/* ── 12. PROGRESS / METER BARS ─────────────────────────────────── */
.lp-meter {
    height: 8px;
    background: var(--lp-bg2);
    border-radius: 6px;
    overflow: hidden;
}
.lp-meter > span {
    display: block;
    height: 100%;
    border-radius: 6px;
    background: var(--lp-gold-dark);
}
.lp-meter > span.ok   { background: var(--lp-dot-green); }
.lp-meter > span.warn { background: var(--lp-dot-amber); }
.lp-meter > span.err  { background: var(--lp-dot-red); }

/* ── 13. EMPTY STATES ──────────────────────────────────────────── */
.lp-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--lp-muted);
}
.lp-empty i, .lp-empty svg { font-size: 34px; width: 40px; height: 40px; color: var(--lp-gold); margin-bottom: 12px; }
.lp-empty-title { font-family: var(--lp-font-title); font-weight: 600; font-size: 15px; color: var(--lp-ink); margin-bottom: 4px; }

/* ── 14. PAGE ENTRANCE (staggered rise, as in mockup) ──────────── */
/* fill-mode MUST stay `backwards` (not `both`): a retained transform turns the
   animated element into the containing block for position:fixed descendants,
   breaking any modal/overlay markup nested inside it. */
@keyframes lpRise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: translateY(0) } }
.lp-stagger > * { animation: lpRise .6s cubic-bezier(.16,1,.3,1) backwards; }
.lp-stagger > *:nth-child(1) { animation-delay: .05s }
.lp-stagger > *:nth-child(2) { animation-delay: .11s }
.lp-stagger > *:nth-child(3) { animation-delay: .17s }
.lp-stagger > *:nth-child(4) { animation-delay: .23s }
.lp-stagger > *:nth-child(5) { animation-delay: .29s }
.lp-stagger > *:nth-child(6) { animation-delay: .35s }
.lp-stagger > *:nth-child(7) { animation-delay: .41s }
.lp-stagger > *:nth-child(8) { animation-delay: .47s }
@media (prefers-reduced-motion: reduce) {
    .lp-stagger > * { animation: none; }
}

/* ── 15. TAILWIND BRIDGE ───────────────────────────────────────────
   Flagship recipes from the previous system are force-mapped to the
   LuxPanel look so all existing templates re-skin without edits.
   (The Tailwind CDN palette itself is remapped in base.html config —
   this section only covers combinations config can't express.)
   ──────────────────────────────────────────────────────────────── */

/* Primary buttons: previously bg-yellow-600 + text-white.
   LuxPanel primary = gold surface + near-black ink. */
a[class*="bg-yellow-6"], button[class*="bg-yellow-6"],
input[type="submit"][class*="bg-yellow-6"], span[class*="bg-yellow-6"].rounded,
a[class*="bg-yellow-500"], button[class*="bg-yellow-500"],
a[class~="bg-lux-gold"], button[class~="bg-lux-gold"],
a[class~="bg-lux-gold-dark"], button[class~="bg-lux-gold-dark"],
input[type="submit"][class~="bg-lux-gold"] {
    background-color: var(--lp-gold) !important;
    color: var(--lp-on-gold) !important;
    border-color: var(--lp-gold) !important;
}
a[class*="bg-yellow-6"]:hover, button[class*="bg-yellow-6"]:hover,
a[class*="bg-yellow-500"]:hover, button[class*="bg-yellow-500"]:hover,
a[class~="bg-lux-gold"]:hover, button[class~="bg-lux-gold"]:hover,
a[class~="bg-lux-gold-dark"]:hover, button[class~="bg-lux-gold-dark"]:hover {
    background-color: var(--lp-gold) !important;
    color: var(--lp-on-gold) !important;
    filter: brightness(1.05);
}

/* Gold text utilities → readable gold-ink */
.text-yellow-600, .text-yellow-700, .text-yellow-800,
.hover\:text-yellow-600:hover, .hover\:text-yellow-700:hover,
.text-amber-600, .text-amber-700 {
    color: var(--lp-gold-ink) !important;
}
.text-yellow-500, .text-amber-500 { color: var(--lp-gold-dark) !important; }

/* Focus rings on inputs */
.focus\:ring-yellow-500:focus, .focus\:ring-yellow-600:focus,
.focus\:border-yellow-500:focus, .focus\:border-yellow-600:focus {
    --tw-ring-color: rgba(179,166,134,.45) !important;
    border-color: var(--lp-gold) !important;
}

/* Legacy input-lux (main.css) re-skin.
   Use background-COLOR, not the `background` shorthand: the shorthand resets
   background-image to none, and with !important it was wiping the native
   select chevron that main.css restores via `select.input-lux` — making every
   luxpanel <select class="input-lux"> look like a plain text box. */
.input-lux {
    background-color: var(--lp-card) !important;
    border-color: var(--lp-line) !important;
    border-radius: var(--lp-r-input) !important;
    color: var(--lp-ink) !important;
}
.input-lux:focus {
    border-color: var(--lp-gold) !important;
    box-shadow: 0 0 0 3px rgba(179,166,134,.22) !important;
}

/* Old table-row hover convention hover:bg-amber-50 stays warm via
   the Tailwind palette remap; thead grays are warmed here. */
thead.bg-gray-50 th, th.bg-gray-50 { background: var(--lp-card2) !important; }

/* Kill any surviving purple/indigo (banned since v1 of the rules) */
[class*="bg-purple-"], [class*="bg-indigo-"]  { background-color: var(--lp-gold-tint) !important; color: var(--lp-gold-ink) !important; }
[class*="text-purple-"], [class*="text-indigo-"] { color: var(--lp-gold-ink) !important; }

/* ══════════════════════════════════════════════════════════════════
   16. FLOW PAGES — heroes, steppers, form shells
   ------------------------------------------------------------------
   Shared chrome for the pages that are NOT lists/dashboards: guided
   forms (report an incident, open a ticket) and confirmation screens
   (application submitted). Before this section every such page shipped
   its own <style> block, so each one drifted — different heroes,
   different card radii, different button gradients, some capped at
   800px while the rest of the app is full-bleed.

   Everything below is token-only, so it themes (light/dark) for free
   and works identically inside the signed-in shell and on public
   pages (no sidebar). See docs/DESIGN_RULES.md §16.
   ══════════════════════════════════════════════════════════════════ */

/* ── 16.1 Page hero ────────────────────────────────────────────────
   A branded band that replaces per-page gradient heroes. The star
   mark is drawn as a CSS mask (not an <img> or a data-URI with a
   baked hex) so the watermark tints from --lp-gold in both themes. */
.lp-hero {
    position: relative;
    overflow: hidden;
    padding: 26px 24px;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-r-card);
    background:
        radial-gradient(120% 140% at 88% -30%, var(--lp-gold-tint) 0%, transparent 62%),
        linear-gradient(135deg, var(--lp-card) 0%, var(--lp-card2) 100%);
    box-shadow: var(--lp-shadow);
}
/* Star-mark watermark */
.lp-hero::after {
    content: '';
    position: absolute;
    top: -58px;
    right: -46px;
    width: 260px;
    height: 260px;
    background-color: var(--lp-gold);
    opacity: .10;
    -webkit-mask: url("../img/logo/luxtravely-mark.svg") center / contain no-repeat;
    mask: url("../img/logo/luxtravely-mark.svg") center / contain no-repeat;
    pointer-events: none;
}
/* Hairline accent along the top edge */
.lp-hero::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--lp-gold) 0%, var(--lp-gold-line) 45%, transparent 100%);
}
.lp-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.lp-hero-copy { flex: 1 1 340px; min-width: 0; }
.lp-hero .lp-eyebrow { display: block; color: var(--lp-gold-ink); }
.lp-hero-title {
    font-family: var(--lp-font-title);
    font-weight: 700;
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--lp-ink);
    margin: 6px 0 0;
}
.lp-hero-title em { font-style: normal; color: var(--lp-gold-ink); }
.lp-hero-sub {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--lp-muted);
    margin: 8px 0 0;
    max-width: 62ch;
}
.lp-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.lp-hero-aside { flex: 0 0 auto; margin-left: auto; }

/* Round status medallion (success check, form icon, …) */
.lp-hero-badge {
    width: 54px; height: 54px;
    flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: 50%;
    font-size: 22px;
    background: var(--lp-gold-tint);
    color: var(--lp-gold-ink);
    border: 1px solid var(--lp-gold-line);
}
.lp-hero-badge.ok  { background: var(--lp-ok-bg);  color: var(--lp-ok);  border-color: transparent; }
.lp-hero-badge.err { background: var(--lp-err-bg); color: var(--lp-err); border-color: transparent; }
.lp-hero-badge.solid { background: var(--lp-gold); color: var(--lp-on-gold); border-color: transparent; }

/* Success variant — a whisper of green over the brand wash, never a
   full green band (green is a status colour, not a brand colour). */
.lp-hero.ok {
    background:
        radial-gradient(120% 140% at 88% -30%, var(--lp-ok-bg) 0%, transparent 58%),
        linear-gradient(135deg, var(--lp-card) 0%, var(--lp-card2) 100%);
}

/* Espresso variant — public / signed-out pages that need presence. */
.lp-hero.espresso {
    background:
        radial-gradient(120% 150% at 85% -25%, rgba(179,166,134,.22) 0%, transparent 60%),
        linear-gradient(135deg, var(--lp-sb-deep) 0%, var(--lp-sb) 55%, var(--lp-sb-deep) 100%);
    border-color: var(--lp-sb-deep);
}
.lp-hero.espresso::after { opacity: .16; }
.lp-hero.espresso .lp-hero-title { color: var(--lp-sb-active); }
.lp-hero.espresso .lp-hero-title em { color: var(--lp-gold); }
.lp-hero.espresso .lp-hero-sub { color: var(--lp-sb-text); }
.lp-hero.espresso .lp-eyebrow { color: var(--lp-gold); }
.lp-hero.espresso .lp-hero-badge {
    background: rgba(179,166,134,.16);
    color: var(--lp-gold);
    border-color: rgba(179,166,134,.30);
}

@media (max-width: 640px) {
    .lp-hero { padding: 20px 16px; }
    .lp-hero-title { font-size: 21px; }
    .lp-hero-aside { margin-left: 0; width: 100%; }
}

/* ── 16.2 Vertical stepper ─────────────────────────────────────────
   "What happens next" / progress rails. Mark each row .done / .now /
   .next; the rail colours itself from the row state. */
.lp-steps { display: grid; }
.lp-step {
    position: relative;
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 14px;
    padding: 0 0 20px;
}
.lp-step:last-child { padding-bottom: 0; }
/* connector rail */
.lp-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 36px;
    bottom: 2px;
    width: 2px;
    border-radius: 2px;
    background: var(--lp-line);
}
.lp-step.done:not(:last-child)::before { background: var(--lp-ok); opacity: .35; }
.lp-step-ico {
    position: relative;
    z-index: 1;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 50%;
    font-size: 12.5px;
    background: var(--lp-bg2);
    color: var(--lp-muted2);
    border: 1px solid var(--lp-line);
}
.lp-step.done .lp-step-ico { background: var(--lp-ok-bg); color: var(--lp-ok); border-color: transparent; }
.lp-step.now  .lp-step-ico { background: var(--lp-gold); color: var(--lp-on-gold); border-color: transparent; box-shadow: 0 0 0 4px var(--lp-gold-tint); }
.lp-step-body { min-width: 0; padding-top: 6px; }
.lp-step-title {
    font-family: var(--lp-font-title);
    font-weight: 600;
    font-size: 13.5px;
    color: var(--lp-ink);
    margin: 0 0 3px;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.lp-step-text { font-size: 12.5px; line-height: 1.6; color: var(--lp-muted); margin: 0; }
.lp-step-text strong { color: var(--lp-ink2); font-weight: 600; }

/* ── 16.3 Main / aside shell ───────────────────────────────────────
   The layout every guided page shares: work on the left, context on
   the right, aside sticks while the form scrolls. Single column below
   1024px with the aside AFTER the form. */
.lp-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}
@media (min-width: 1024px) {
    .lp-shell { grid-template-columns: minmax(0, 2.15fr) minmax(300px, 1fr); gap: 22px; }
    .lp-shell-aside { position: sticky; top: 84px; }
}
.lp-shell-main  { display: grid; gap: 18px; min-width: 0; }
.lp-shell-aside { display: grid; gap: 16px; min-width: 0; }

/* ── 16.4 Callout note ─────────────────────────────────────────── */
.lp-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--lp-line);
    background: var(--lp-card2);
    color: var(--lp-ink2);
    font-size: 12.5px;
    line-height: 1.6;
}
.lp-note > i:first-child, .lp-note > .lp-note-ico { flex: 0 0 auto; font-size: 15px; margin-top: 1px; color: var(--lp-muted); }
.lp-note p { margin: 0; }
.lp-note strong { color: var(--lp-ink); font-weight: 700; }
.lp-note.gold { background: var(--lp-gold-tint); border-color: var(--lp-gold-line); color: var(--lp-ink2); }
.lp-note.gold > i:first-child { color: var(--lp-gold-ink); }
.lp-note.ok   { background: var(--lp-ok-bg);   border-color: transparent; color: var(--lp-ok-ink); }
.lp-note.ok   > i:first-child { color: var(--lp-ok); }
.lp-note.info { background: var(--lp-info-bg); border-color: transparent; color: var(--lp-info-ink); }
.lp-note.info > i:first-child { color: var(--lp-info); }
.lp-note.warn { background: var(--lp-warn-bg); border-color: transparent; color: var(--lp-warn-ink); }
.lp-note.warn > i:first-child { color: var(--lp-warn); }
.lp-note.err  { background: var(--lp-err-bg);  border-color: transparent; color: var(--lp-err-ink); }
.lp-note.err  > i:first-child { color: var(--lp-err); }
.lp-note a { font-weight: 600; text-decoration: underline; color: inherit; }

/* ── 16.5 Form fields ──────────────────────────────────────────── */
.lp-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lp-fields.one-col { grid-template-columns: minmax(0, 1fr); }
.lp-field { min-width: 0; }
.lp-field.span-2 { grid-column: 1 / -1; }
@media (max-width: 720px) {
    .lp-fields { grid-template-columns: minmax(0, 1fr); }
    .lp-field.span-2 { grid-column: auto; }
}
.lp-field > label,
.lp-field .lp-label { display: block; font-size: 12px; font-weight: 600; color: var(--lp-ink2); margin-bottom: 6px; }
.lp-field .req { color: var(--lp-err); margin-left: 2px; }
/* Django renders widgets with .input-lux; normalise sizing here so the
   fields line up with .lp-input without touching every form class. */
.lp-field .input-lux,
.lp-field input:not([type="checkbox"]):not([type="radio"]),
.lp-field select,
.lp-field textarea { width: 100%; }
.lp-field textarea { min-height: 108px; resize: vertical; }
.lp-field .errorlist { list-style: none; margin: 6px 0 0; padding: 0; }
.lp-field .errorlist li { font-size: 11.5px; color: var(--lp-err); }

/* Section heading inside a card body */
.lp-fieldset + .lp-fieldset { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--lp-line2); }
.lp-fieldset-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--lp-gold-ink);
    margin: 0 0 14px;
}

/* ── 16.6 Upload dropzone ──────────────────────────────────────── */
.lp-drop {
    position: relative;
    display: block;
    padding: 26px 18px;
    text-align: center;
    cursor: pointer;
    border: 1.5px dashed var(--lp-line);
    border-radius: 12px;
    background: var(--lp-card2);
    transition: border-color .18s ease, background-color .18s ease;
}
.lp-drop:hover, .lp-drop.is-over { border-color: var(--lp-gold); background: var(--lp-gold-tint); }
.lp-drop:focus-visible { outline: 2px solid var(--lp-gold); outline-offset: 2px; }
/* The real file input stays in the DOM (so the form posts it) but out of
   sight — the zone itself is the click target. */
.lp-drop > input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.lp-drop-ico { font-size: 24px; color: var(--lp-gold); margin-bottom: 8px; }
.lp-drop-text { font-size: 12.5px; color: var(--lp-ink2); margin: 0; }
.lp-drop-text b { color: var(--lp-gold-ink); }
.lp-drop-hint { font-size: 11px; color: var(--lp-muted2); margin: 4px 0 0; }
.lp-filelist { display: grid; gap: 6px; margin-top: 10px; }
.lp-fileitem {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    border-radius: 9px;
    background: var(--lp-bg2);
    font-size: 12px;
    color: var(--lp-ink2);
}
.lp-fileitem i { color: var(--lp-gold-ink); }
.lp-fileitem .sz { margin-left: auto; color: var(--lp-muted2); font-variant-numeric: tabular-nums; }

/* ── 16.7 Switch rows ──────────────────────────────────────────── */
.lp-switchrow {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 11px 14px;
    border: 1px solid var(--lp-line);
    border-radius: 11px;
    background: var(--lp-card2);
    transition: border-color .18s ease, background-color .18s ease;
}
.lp-switchrow + .lp-switchrow { margin-top: 8px; }
.lp-switchrow:hover { border-color: var(--lp-gold-line); background: var(--lp-gold-tint); }
.lp-switchrow-label { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--lp-ink2); }
.lp-switchrow-label i { width: 18px; text-align: center; color: var(--lp-muted2); }
.lp-switchrow.err  .lp-switchrow-label i { color: var(--lp-err); }
.lp-switchrow.warn .lp-switchrow-label i { color: var(--lp-warn); }
.lp-switchrow.ok   .lp-switchrow-label i { color: var(--lp-ok); }
.lp-switchrow.info .lp-switchrow-label i { color: var(--lp-info); }
.lp-switch { position: relative; width: 42px; height: 23px; flex: 0 0 auto; cursor: pointer; }
.lp-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.lp-switch .track {
    position: absolute; inset: 0;
    background: var(--lp-line);
    border-radius: 999px;
    transition: background-color .22s ease;
}
.lp-switch .track::before {
    content: '';
    position: absolute;
    width: 17px; height: 17px;
    left: 3px; top: 3px;
    background: var(--lp-card);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(20,18,14,.22);
    transition: transform .22s ease;
}
.lp-switch input:checked + .track { background: var(--lp-gold); }
.lp-switch input:checked + .track::before { transform: translateX(19px); }
.lp-switch input:focus-visible + .track { outline: 2px solid var(--lp-gold); outline-offset: 2px; }

/* ── 16.8 Form action bar ──────────────────────────────────────── */
.lp-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-r-card);
    background: var(--lp-card);
    box-shadow: var(--lp-shadow);
}
.lp-actions .spacer { margin-right: auto; font-size: 11.5px; color: var(--lp-muted); }
@media (max-width: 640px) {
    .lp-actions { flex-direction: column-reverse; align-items: stretch; }
    .lp-actions .lp-btn { width: 100%; }
    .lp-actions .spacer { margin: 0 0 4px; text-align: center; }
}

/* ── 16.9 Copy-to-clipboard chip (reference ids) ───────────────── */
.lp-copychip {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 9px 14px;
    border-radius: 10px;
    border: 1px dashed var(--lp-gold-line);
    background: var(--lp-card);
    color: var(--lp-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease;
}
.lp-copychip:hover { border-style: solid; border-color: var(--lp-gold); background: var(--lp-gold-tint); }
.lp-copychip i { font-size: 12px; color: var(--lp-muted2); }
.lp-copychip.copied i { color: var(--lp-ok); }

/* ── 16.10 Icon list (tips, contacts) ──────────────────────────── */
.lp-list { display: grid; gap: 11px; }
.lp-list-item { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; line-height: 1.6; color: var(--lp-muted); }
.lp-list-item > i:first-child { flex: 0 0 auto; margin-top: 3px; font-size: 12px; color: var(--lp-gold); }
.lp-list-item strong { color: var(--lp-ink); font-weight: 600; }
.lp-list-item a { font-weight: 600; }

/* Contact row: round gold chip + label/value */
.lp-contact { display: flex; align-items: center; gap: 12px; }
.lp-contact + .lp-contact { margin-top: 14px; }
.lp-contact-ico {
    width: 36px; height: 36px; flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--lp-gold-tint);
    color: var(--lp-gold-ink);
    font-size: 13px;
    border: 1px solid var(--lp-gold-line);
}
.lp-contact-label { font-size: 11px; color: var(--lp-muted); }
.lp-contact-value { font-size: 13px; font-weight: 700; color: var(--lp-ink); text-decoration: none; display: block; }
a.lp-contact-value:hover { color: var(--lp-gold-ink); }