/* #theme-toggle {
    display: none;
} */

/* ── Prevent double scrollbar (ADMIN SHELL ONLY) ───────────
   The admin shell is a fixed-height app frame: h-screen +
   #main-content overflow-y-auto. The document itself must not
   scroll there, or the page shows two scrollbars.

   SCOPED ON PURPOSE. This used to be an unscoped  html, body
   rule, which also hit every other layout that links this file
   (guest, landing) and silently scroll-locked them — the signup
   page is taller than the viewport, so its reCAPTCHA and submit
   button became unreachable at every width. Those layouts each
   carried an !important counter-override to undo it.

   The lock now applies only where the shell actually exists:
   layouts/app.blade.php and layouts/public.blade.php put
   .rx-app-shell on <html>. A layout WITHOUT that class scrolls
   normally, so linking this stylesheet can no longer trap a page.
   Do not widen this selector.
   ───────────────────────────────────────────────────────── */
html.rx-app-shell,
html.rx-app-shell > body {
    overflow: hidden !important;
    height: 100% !important;
}

/* ══════════════════════════════════════════════════════════
   Dashboard middle row — 3-column responsive grid
   Replaces Tailwind JIT arbitrary class lg:grid-cols-[260px_1fr_280px]
   which requires a Vite rebuild to compile.
   ══════════════════════════════════════════════════════════ */
.rx-dashboard-mid-grid {
    grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
    .rx-dashboard-mid-grid {
        grid-template-columns: 260px 1fr 280px;
    }
}

/* ══════════════════════════════════════════════════════════
   Dashboard stat cards — hover lift effect
   ══════════════════════════════════════════════════════════ */
.rx-stat-card {
    transition: box-shadow 0.22s ease, transform 0.22s ease;
}
.rx-stat-card:hover {
    box-shadow: 0 8px 24px rgba(111, 66, 193, 0.12);
    transform: translateY(-2px);
}

/* ── Font consistency: match the frontend marketing site ───────────────────── */
body,
.font-sans {
    font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif !important;
}

/* ══════════════════════════════════════════════════════════
   Sidebar — Premium SaaS design
   ══════════════════════════════════════════════════════════ */

/* ── Shell ── */
aside#sidebar {
    background: linear-gradient(175deg, #fdfcff 0%, #f8f3ff 55%, #f2ebff 100%) !important;
    border-right: 1px solid #e5ddf8 !important;
    box-shadow: 4px 0 30px rgba(109,40,217,0.08), 1px 0 0 #e8e0f6 !important;
}
aside#sidebar > div {
    border-color: transparent !important;
    position: relative;
}

/* ── Ambient top glow ── */
aside#sidebar > div::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 200px;
    background: radial-gradient(ellipse at 50% -10%, rgba(168,85,247,0.10) 0%, transparent 65%);
    pointer-events: none; z-index: 0;
}

/* ── Scrollbar — 6px track, 3px visual thumb via border padding trick ── */
aside#sidebar ::-webkit-scrollbar { width: 6px !important; }
aside#sidebar ::-webkit-scrollbar-track {
    background: rgba(124,58,237,0.04) !important;
    border-radius: 99px !important;
    margin: 6px 0 !important;
}
aside#sidebar ::-webkit-scrollbar-thumb {
    background: rgba(124,58,237,0.28) !important;
    border-radius: 99px !important;
    border: 1.5px solid transparent !important;
    background-clip: padding-box !important;
    transition: background 0.20s ease !important;
}
aside#sidebar ::-webkit-scrollbar-thumb:hover {
    background: rgba(124,58,237,0.55) !important;
    background-clip: padding-box !important;
}

/* ── Main content scrollbar — matches sidebar ── */
#main-content::-webkit-scrollbar { width: 8px; }
#main-content::-webkit-scrollbar-track {
    background: rgba(124,58,237,0.04);
    border-radius: 99px;
    margin: 6px 0;
}
#main-content::-webkit-scrollbar-thumb {
    background: rgba(124,58,237,0.28);
    border-radius: 99px;
    border: 1.5px solid transparent;
    background-clip: padding-box;
    transition: background 0.20s ease;
}
#main-content::-webkit-scrollbar-thumb:hover {
    background: rgba(124,58,237,0.55);
    background-clip: padding-box;
}

/* ── Base item colour ── */
#sidebar a, #sidebar button {
    transition: background 0.20s ease, color 0.20s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.20s ease !important;
    color: #3d3456 !important;
    font-size: 13px !important;
}

/* ── Force active text/icon white (beats ID+element specificity) ── */
#sidebar a.rx-sidebar-active,
#sidebar button.rx-sidebar-active { color: #ffffff !important; }
#sidebar .rx-sidebar-active-icon { color: #ffffff !important; }

/* ── Icon badge ── */
#sidebar .rx-sb-icon {
    background: linear-gradient(135deg, #eee8fe 0%, #e6dcfc 100%) !important;
    color: #7c3aed !important;
    border: 1px solid rgba(124,58,237,0.14) !important;
    border-radius: 9px !important;
    width: 30px !important; height: 30px !important;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 1px 3px rgba(124,58,237,0.12) !important;
    transition: background 0.20s ease, color 0.20s ease, box-shadow 0.20s ease, transform 0.25s cubic-bezier(0.34,1.56,0.64,1) !important;
}
#sidebar .rx-sb-icon svg {
    width: 15px !important;
    height: 15px !important;
}

/* ── Hover (non-active) ── */
#sidebar a:not(.rx-sidebar-active):hover,
#sidebar button:not(.rx-sidebar-active):hover {
    background: rgba(124,58,237,0.07) !important;
    color: #5b21b6 !important;
    transform: translateX(3px) !important;
}
#sidebar a:not(.rx-sidebar-active):hover .rx-sb-icon,
#sidebar button:not(.rx-sidebar-active):hover .rx-sb-icon {
    background: linear-gradient(135deg, #e2d9fb 0%, #d8ccf9 100%) !important;
    color: #6d28d9 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), 0 3px 10px rgba(124,58,237,0.28) !important;
    transform: scale(1.12) rotate(-4deg) !important;
}

/* ── Active item: vivid gradient pill + glow ── */
.rx-sidebar-active {
    background: linear-gradient(135deg, #6d28d9 0%, #9333ea 60%, #a855f7 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 11px !important;
    box-shadow: 0 4px 22px rgba(109,40,217,0.40), inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
.rx-sidebar-active:hover {
    background: linear-gradient(135deg, #6d28d9 0%, #9333ea 60%, #a855f7 100%) !important;
    color: #ffffff !important;
    transform: none !important;
}

/* ── Active icon: white glass ── */
.rx-sidebar-active-icon {
    background: rgba(255,255,255,0.22) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.28) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), 0 2px 8px rgba(0,0,0,0.12) !important;
}

/* ── Branch pill ── */
.rx-sb-branch-pill {
    display: flex; align-items: center; gap: 7px;
    padding: 7px 11px;
    background: linear-gradient(135deg, rgba(124,58,237,0.08) 0%, rgba(168,85,247,0.04) 100%);
    border: 1px solid rgba(124,58,237,0.16);
    border-radius: 10px;
    font-size: 11.5px; font-weight: 600;
    color: #5b21b6;
    letter-spacing: 0.1px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    cursor: default; margin: 2px 0 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
}
.rx-sb-branch-pill svg { flex-shrink: 0; color: #7c3aed; }

/* ══════════════════════════════════════════════════════════
   Branch switcher
   ══════════════════════════════════════════════════════════ */

/* ── Trigger button ── */
.rxcb-trigger {
    display: flex; align-items: center; gap: 9px;
    width: 100%;
    padding: 9px 11px;
    background: linear-gradient(135deg, rgba(124,58,237,0.11) 0%, rgba(168,85,247,0.06) 100%);
    border: 1px solid rgba(124,58,237,0.20);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.72), 0 2px 8px rgba(124,58,237,0.10);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12.5px; font-weight: 600;
    color: #5b21b6;
    cursor: pointer; text-align: left;
    transition: background 0.20s ease, box-shadow 0.22s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
.rxcb-trigger:hover {
    background: linear-gradient(135deg, rgba(124,58,237,0.17) 0%, rgba(168,85,247,0.10) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.72), 0 4px 16px rgba(124,58,237,0.22);
    transform: translateY(-1px);
}
.rxcb-trigger[aria-expanded="true"] {
    background: linear-gradient(135deg, rgba(124,58,237,0.20) 0%, rgba(168,85,247,0.13) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 4px 20px rgba(124,58,237,0.26);
    transform: translateY(0);
}

/* ── Trigger icon wrap (gradient badge) ── */
.rxcb-icon-wrap {
    width: 26px; height: 26px; flex-shrink: 0;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(124,58,237,0.40), inset 0 1px 0 rgba(255,255,255,0.20);
    transition: box-shadow 0.20s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
.rxcb-trigger:hover .rxcb-icon-wrap {
    box-shadow: 0 4px 14px rgba(124,58,237,0.52), inset 0 1px 0 rgba(255,255,255,0.22);
    transform: scale(1.08) rotate(-5deg);
}

/* ── Branch name text ── */
.rxcb-label {
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Chevron ── */
.rxcb-chevron {
    width: 11px; height: 11px; flex-shrink: 0;
    color: rgba(124,58,237,0.45);
    transition: transform 0.24s cubic-bezier(0.34,1.56,0.64,1), color 0.18s ease;
}
.rxcb-trigger[aria-expanded="true"] .rxcb-chevron {
    transform: rotate(180deg);
    color: rgba(124,58,237,0.75);
}

/* ── Upgrade button (no branch module) ── */
.rxcb-upgrade-btn {
    display: flex; align-items: center; gap: 9px;
    width: 100%;
    padding: 9px 11px;
    background: linear-gradient(135deg, rgba(245,158,11,0.10) 0%, rgba(251,191,36,0.06) 100%);
    border: 1px solid rgba(245,158,11,0.28);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.72), 0 2px 8px rgba(245,158,11,0.10);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12.5px; font-weight: 600;
    color: #92400e;
    cursor: pointer; text-align: left;
    transition: background 0.20s ease, box-shadow 0.22s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
.rxcb-upgrade-btn:hover {
    background: linear-gradient(135deg, rgba(245,158,11,0.17) 0%, rgba(251,191,36,0.10) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.72), 0 4px 16px rgba(245,158,11,0.22);
    transform: translateY(-1px);
}
.rxcb-upgrade-btn .rxcb-icon-wrap {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    box-shadow: 0 2px 8px rgba(245,158,11,0.40), inset 0 1px 0 rgba(255,255,255,0.20);
}
.rxcb-upgrade-btn:hover .rxcb-icon-wrap {
    box-shadow: 0 4px 14px rgba(245,158,11,0.50), inset 0 1px 0 rgba(255,255,255,0.22);
}
.rxcb-rocket-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; flex-shrink: 0;
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    border-radius: 6px;
    color: #ffffff;
    box-shadow: 0 1px 4px rgba(245,158,11,0.40);
}

/* ── Dropdown panel ── */
@keyframes rxCbPanelIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.rxcb-panel {
    min-width: 188px;
    background: #fdfcff !important;
    border: 1px solid rgba(124,58,237,0.16) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 40px rgba(109,40,217,0.18), 0 3px 10px rgba(0,0,0,0.07) !important;
    padding: 6px !important;
    margin-top: 6px !important;
}
.rxcb-panel:not(.hidden) {
    animation: rxCbPanelIn 0.24s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* ── Dropdown header label ── */
.rxcb-panel-header {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 12px 6px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 9.5px; font-weight: 700;
    letter-spacing: 0.11em; text-transform: uppercase;
    color: #b39ddb;
    border-bottom: 1px solid rgba(124,58,237,0.08);
    margin-bottom: 4px;
    user-select: none;
}
.rxcb-panel-header::before {
    content: '';
    display: inline-block;
    width: 12px; height: 1.5px; flex-shrink: 0;
    background: linear-gradient(90deg, #9333ea, #c084fc);
    border-radius: 2px;
}

.rxcb-panel ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 2px;
}

/* ── Dropdown item ── */
.rxcb-item {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px !important;
    border-radius: 10px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12.5px; font-weight: 500;
    color: #3d3456 !important;
    text-decoration: none !important;
    transition: background 0.16s ease, color 0.16s ease, padding-left 0.20s cubic-bezier(0.34,1.56,0.64,1) !important;
    cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rxcb-item:hover {
    background: rgba(124,58,237,0.08) !important;
    color: #6d28d9 !important;
    padding-left: 16px !important;
}
.rxcb-item-active {
    background: rgba(109,40,217,0.07) !important;
    color: #6d28d9 !important;
    font-weight: 600 !important;
}
.rxcb-item-active:hover {
    padding-left: 12px !important;
}

/* ── Active branch dot indicator ── */
.rxcb-item-dot {
    width: 7px; height: 7px; flex-shrink: 0;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(124,58,237,0.22);
}

/* ── Section separator ── */
.rx-sb-sep {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(124,58,237,0.15) 30%, rgba(124,58,237,0.15) 70%, transparent);
    margin: 8px 2px;
}

/* ── Section label ── */
.rx-sb-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 9.5px; font-weight: 700;
    letter-spacing: 0.11em; text-transform: uppercase;
    color: #b39ddb;
    padding: 10px 8px 3px;
    user-select: none; pointer-events: none;
}
.rx-sb-label::before {
    content: '';
    display: inline-block;
    width: 14px; height: 1.5px; flex-shrink: 0;
    background: linear-gradient(90deg, #9333ea, #c084fc);
    border-radius: 2px;
}

/* ══════════════════════════════════════════════════════════
   Dropdown — smooth animation + timeline
   ══════════════════════════════════════════════════════════ */

@keyframes rxSbItemIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}

#sidebar ul[id^="dropdown-"] {
    display: block !important; overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.28s ease;
}
#sidebar ul[id^="dropdown-"].hidden {
    max-height: 0 !important; opacity: 0; pointer-events: none;
}
#sidebar ul[id^="dropdown-"]:not(.hidden) { max-height: 700px; opacity: 1; }

#sidebar ul[id^="dropdown-"]:not(.hidden) > li {
    animation: rxSbItemIn 0.22s ease both;
}
#sidebar ul[id^="dropdown-"]:not(.hidden) > li:nth-child(1)  { animation-delay: 0ms; }
#sidebar ul[id^="dropdown-"]:not(.hidden) > li:nth-child(2)  { animation-delay: 35ms; }
#sidebar ul[id^="dropdown-"]:not(.hidden) > li:nth-child(3)  { animation-delay: 70ms; }
#sidebar ul[id^="dropdown-"]:not(.hidden) > li:nth-child(4)  { animation-delay: 105ms; }
#sidebar ul[id^="dropdown-"]:not(.hidden) > li:nth-child(5)  { animation-delay: 140ms; }
#sidebar ul[id^="dropdown-"]:not(.hidden) > li:nth-child(n+6) { animation-delay: 170ms; }

/* ── Timeline connector ── */
#sidebar ul[id^="dropdown-"] { position: relative; padding-left: 0; margin-left: 0; }
#sidebar ul[id^="dropdown-"]::before {
    content: '';
    position: absolute;
    left: 24px; top: 6px; bottom: 6px; width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(124,58,237,0.22) 25%, rgba(124,58,237,0.22) 75%, transparent);
    border-radius: 2px; pointer-events: none;
}

/* ── Child li dot ── */
#sidebar ul[id^="dropdown-"] > li { position: relative; list-style: none; }
#sidebar ul[id^="dropdown-"] > li::before {
    content: '';
    position: absolute; left: 20.5px; top: 50%;
    transform: translateY(-50%);
    width: 5px; height: 5px; border-radius: 50%;
    background: #f0ebfe;
    border: 1.5px solid rgba(124,58,237,0.28);
    transition: all 0.18s ease; z-index: 1;
}

/* ── Child link ── */
#sidebar ul[id^="dropdown-"] > li > a {
    display: flex; align-items: center;
    padding: 5px 8px 5px 38px !important;
    font-size: 12.5px;
    color: #6b6280 !important;
    border-radius: 8px;
    transition: background 0.18s ease, color 0.18s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1), padding-left 0.18s ease !important;
    text-decoration: none; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}

/* ── Child hover ── */
#sidebar ul[id^="dropdown-"] > li > a:hover {
    background: rgba(124,58,237,0.07) !important;
    color: #6d28d9 !important;
    padding-left: 42px !important;
}
#sidebar ul[id^="dropdown-"] > li:hover::before {
    background: #a855f7; border-color: #9333ea;
    transform: translateY(-50%) scale(1.4);
    box-shadow: 0 0 0 2px rgba(168,85,247,0.22);
}

/* ── Child active ── */
#sidebar ul[id^="dropdown-"] > li > a.text-violet-700,
#sidebar ul[id^="dropdown-"] > li > a[class*="font-semibold"] {
    color: #6d28d9 !important; font-weight: 600 !important;
    background: rgba(109,40,217,0.07) !important;
}
#sidebar ul[id^="dropdown-"] > li:has(> a.text-violet-700)::before,
#sidebar ul[id^="dropdown-"] > li:has(> a[class*="font-semibold"])::before {
    background: linear-gradient(135deg, #6d28d9, #9333ea);
    border-color: #9333ea;
    box-shadow: 0 0 0 2px rgba(109,40,217,0.20);
    transform: translateY(-50%) scale(1.28);
}

/* ── AI Menu Upload locked tooltip ── */
.rx-ai-tooltip {
    width: 252px;
    background: linear-gradient(145deg, #140d28 0%, #1c0a38 60%, #150e2e 100%);
    border: 1px solid rgba(168,85,247,0.22);
    border-radius: 14px;
    padding: 14px 15px 13px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.50), 0 0 0 1px rgba(168,85,247,0.08), 0 4px 16px rgba(109,40,217,0.24);
    pointer-events: auto;
}
[x-cloak] { display: none !important; }

/* ── Arrow (points left toward sidebar) ── */
.rx-ai-tip-arrow {
    position: absolute;
    left: -6px; top: 52px;
    width: 0; height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid #1c0a38;
    filter: drop-shadow(-2px 0 2px rgba(0,0,0,0.20));
}

/* ── "Pro Feature" badge ── */
.rx-ai-tip-top { margin-bottom: 8px; }
.rx-ai-tip-badge {
    display: inline-flex; align-items: center; gap: 4px;
    background: linear-gradient(90deg, rgba(168,85,247,0.22), rgba(109,40,217,0.18));
    border: 1px solid rgba(168,85,247,0.30);
    border-radius: 20px;
    padding: 2px 8px;
    font-size: 9.5px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: #c084fc;
}

/* ── Title ── */
.rx-ai-tip-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12.5px; font-weight: 700;
    color: #f3e8ff;
    margin: 0 0 5px; line-height: 1.35;
}

/* ── Description ── */
.rx-ai-tip-desc {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11.5px; font-weight: 400;
    color: rgba(216,180,254,0.70);
    margin: 0 0 11px; line-height: 1.5;
}

/* ── CTA link ── */
.rx-ai-tip-cta {
    display: inline-flex; align-items: center; gap: 4px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11.5px; font-weight: 700;
    background: linear-gradient(90deg, #a855f7, #818cf8);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    text-decoration: none;
    transition: opacity 0.15s ease;
}
.rx-ai-tip-cta:hover { opacity: 0.80; }
.rx-ai-tip-cta span { -webkit-text-fill-color: transparent; }

/* ── Alpine enter / leave transitions ── */
.rx-tip-enter   { transition: opacity 0.20s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1); }
.rx-tip-enter-from { opacity: 0 !important; transform: translateX(-8px) scale(0.94) !important; }
.rx-tip-enter-to   { opacity: 1 !important; transform: translateX(0) scale(1) !important; }
.rx-tip-leave   { transition: opacity 0.15s ease, transform 0.15s ease; }

/* ── Locked child item (plan upgrade required) ── */
.rx-sb-locked-li { position: relative; list-style: none; }
.rx-sb-locked-li::before {
    content: '';
    position: absolute; left: 20.5px; top: 50%;
    transform: translateY(-50%);
    width: 5px; height: 5px; border-radius: 50%;
    background: #f3f4f6;
    border: 1.5px solid #d1d5db;
    z-index: 1;
}
.rx-sb-child-locked {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 8px 5px 38px;
    font-size: 12.5px; font-weight: 500;
    color: #9ca3af;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease, padding-left 0.20s cubic-bezier(0.34,1.56,0.64,1);
    cursor: pointer;
    white-space: nowrap; overflow: hidden;
}
.rx-sb-child-locked:hover {
    background: rgba(245,158,11,0.07);
    color: #92400e;
    padding-left: 42px;
}
.rx-sb-locked-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.rx-sb-lock-badge {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    width: 18px; height: 18px;
    background: rgba(245,158,11,0.12);
    color: #d97706;
    border: 1px solid rgba(245,158,11,0.28);
    border-radius: 5px;
    transition: background 0.16s ease, color 0.16s ease;
}
.rx-sb-child-locked:hover .rx-sb-lock-badge {
    background: rgba(245,158,11,0.20);
    color: #b45309;
}

/* ── Locked parent nav item (plan upgrade required) ── */
.rx-sb-locked-li-parent { position: relative; list-style: none; }
.rx-sb-parent-locked {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 10px;
    font-size: 13px; font-weight: 500;
    color: #9ca3af;
    border-radius: 12px;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
    cursor: pointer;
    width: 100%;
}
.rx-sb-parent-locked:hover {
    background: rgba(245,158,11,0.07) !important;
    color: #92400e !important;
    transform: translateX(3px) !important;
}
.rx-sb-parent-locked-icon {
    width: 30px; height: 30px; flex-shrink: 0;
    background: rgba(245,158,11,0.10);
    color: #d97706;
    border: 1px solid rgba(245,158,11,0.24);
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.18s ease, color 0.18s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
.rx-sb-parent-locked:hover .rx-sb-parent-locked-icon {
    background: rgba(245,158,11,0.18);
    color: #b45309;
    transform: scale(1.10) rotate(-4deg);
}
.rx-sb-parent-locked:hover .rx-sb-lock-badge {
    background: rgba(245,158,11,0.20);
    color: #b45309;
}

/* ── Chevron ── */
.rx-sb-chevron { transition: transform 0.22s ease, color 0.20s ease; color: rgba(124,58,237,0.32) !important; flex-shrink: 0; }
#sidebar button[aria-expanded="true"] .rx-sb-chevron { transform: rotate(180deg); }
#sidebar button.rx-sidebar-active .rx-sb-chevron { color: rgba(255,255,255,0.85) !important; }

/* ══════════════════════════════════════════════════════════
   List pages — header, toolbar, table (Customers / Staff / Delivery)
   ══════════════════════════════════════════════════════════ */

/* ── Page header strip ── */
.rx-list-header {
    background: linear-gradient(135deg, #ffffff 0%, #faf8ff 60%, #f5f0ff 100%);
    border-bottom: 1px solid rgba(111,66,193,0.10);
    padding: 16px 20px 14px;
}
.rx-list-title-row {
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.rx-list-icon {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, #6f42c1, #9b5cff);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(111,66,193,0.30);
}
.rx-list-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1f1235 !important;
    letter-spacing: 0.01em;
    line-height: 1.2;
    margin: 0 !important;
}
.rx-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.rx-list-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Search box with icon ── */
.rx-search-wrap {
    position: relative;
}
.rx-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px; height: 14px;
    color: #9ca3af;
    pointer-events: none;
    z-index: 1;
}
.rx-search-wrap input {
    padding-left: 32px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    height: 36px !important;
}

/* ── Outline action buttons (toolbar) ── */
.rx-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    font-size: 13px;
    font-weight: 500;
    color: #4b5563;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.18s ease;
    text-decoration: none !important;
    white-space: nowrap;
    line-height: 1.3;
    height: 36px;
}
.rx-btn-ghost:hover {
    background: rgba(111,66,193,0.06);
    border-color: rgba(111,66,193,0.28);
    color: #6f42c1;
}
.rx-btn-ghost svg { flex-shrink: 0; }

/* ── Table ── */
table.rx-table {
    border-collapse: collapse;
}
table.rx-table thead tr {
    background: rgba(111,66,193,0.045) !important;
    border-bottom: 2px solid rgba(111,66,193,0.12) !important;
}
table.rx-table thead th {
    padding: 10px 16px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: #6d28d9 !important;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    background: transparent !important;
    white-space: nowrap;
}
table.rx-table tbody tr {
    border-bottom: 1px solid rgba(0,0,0,0.045) !important;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
table.rx-table tbody tr:hover td {
    background: rgba(111,66,193,0.03) !important;
}
table.rx-table tbody tr:hover {
    box-shadow: inset 3px 0 0 #9b5cff;
}
table.rx-table td {
    padding: 10px 16px !important;
    font-size: 13.5px !important;
    vertical-align: middle;
}

/* ── Avatar initials ── */
.rx-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6f42c1, #9b5cff);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 6px rgba(111,66,193,0.28);
}
.rx-name-cell {
    display: flex;
    align-items: center;
    gap: 9px;
}

/* ── Table action buttons (icon-only) ── */
.rx-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.18s ease;
    flex-shrink: 0;
}
.rx-action-btn--edit {
    background: rgba(111,66,193,0.09);
    color: #6f42c1;
}
.rx-action-btn--edit:hover {
    background: rgba(111,66,193,0.18);
    box-shadow: 0 2px 8px rgba(111,66,193,0.22);
    transform: translateY(-1px);
}
.rx-action-btn--danger {
    background: rgba(239,68,68,0.08);
    color: #ef4444;
}
.rx-action-btn--danger:hover {
    background: rgba(239,68,68,0.18);
    box-shadow: 0 2px 8px rgba(239,68,68,0.22);
    transform: translateY(-1px);
}

/* ── Empty state ── */
.rx-empty-state td {
    padding: 48px 16px !important;
    text-align: center !important;
    color: #9ca3af !important;
    font-size: 13px !important;
}

/* ══════════════════════════════════════════════════════════
   COD Monitoring — stat cards, tabs, summary list
   ══════════════════════════════════════════════════════════ */

/* Stat card */
.rx-cod-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rx-cod-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.09);
}
.rx-cod-card-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(0,0,0,0.18);
}
.rx-cod-card-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 3px;
}
.rx-cod-card-value {
    font-size: 18px;
    font-weight: 800;
    color: #1f1235;
    line-height: 1.15;
}
.rx-cod-card-sub {
    font-size: 11.5px;
    color: #9ca3af;
    margin-top: 2px;
}

/* Tab navigation */
.rx-tabs-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: 1px solid rgba(111,66,193,0.12);
    margin-bottom: 16px;
    padding-bottom: 0;
}
.rx-tabs-nav {
    display: flex;
    gap: 2px;
}
.rx-tab-btn {
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    white-space: nowrap;
    border-radius: 6px 6px 0 0;
    margin-bottom: -1px;
}
.rx-tab-btn:hover {
    color: #6f42c1;
    background: rgba(111,66,193,0.05);
}
.rx-tab-btn.active {
    color: #6f42c1;
    font-weight: 700;
    border-bottom-color: #7c3aed;
    background: rgba(111,66,193,0.06);
}

/* Summary list rows */
.rx-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    transition: background 0.15s ease;
}
.rx-summary-row:last-child { border-bottom: none; }
.rx-summary-row:hover { background: rgba(111,66,193,0.03); }

/* ══════════════════════════════════════════════════════════
   Settings page — inner nav sidebar
   ══════════════════════════════════════════════════════════ */

/* Container: match main sidebar gradient */
#rx-settings-nav {
    background: linear-gradient(175deg, #ffffff 0%, #faf8ff 100%) !important;
    border-right-color: rgba(229,231,235,0.7) !important;
}

/* Header strip */
#rx-settings-nav > div:first-of-type {
    background: rgba(111,66,193,0.04) !important;
    border-bottom-color: rgba(111,66,193,0.10) !important;
}
#rx-settings-nav h1,
#rx-settings-nav button span {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1f1235 !important;
    letter-spacing: 0.01em;
}

/* List wrapper padding */
#settingsTabsList {
    padding: 6px 8px 10px !important;
}

/* Reset <li> tab margins */
#settingsTabsList li {
    margin: 0 0 1px !important;
}

/* Base link style — override the tab border-bottom look */
#settingsTabsList li a {
    display: flex !important;
    align-items: center;
    border-bottom: none !important;
    border-radius: 8px !important;
    padding: 6px 10px 6px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease !important;
}

/* Hover */
#settingsTabsList li a:hover {
    background: rgba(111,66,193,0.06) !important;
    color: #5b21b6 !important;
    border-color: transparent !important;
}

/* Active — same accent bar as main sidebar */
#settingsTabsList li a.active {
    background: rgba(111,66,193,0.09) !important;
    color: #4c1d95 !important;
    font-weight: 600 !important;
    box-shadow: inset 3px 0 0 #7c3aed !important;
    border-color: transparent !important;
}

/* Scrollbar */
#rx-settings-nav ::-webkit-scrollbar { width: 4px; }
#rx-settings-nav ::-webkit-scrollbar-track { background: rgba(111,66,193,0.04); border-radius: 8px; }
#rx-settings-nav ::-webkit-scrollbar-thumb { background: rgba(111,66,193,0.22); border-radius: 8px; }
#rx-settings-nav ::-webkit-scrollbar-thumb:hover { background: rgba(111,66,193,0.40); }

/* ══════════════════════════════════════════════════════════
   Navbar — premium UI (v2)
   ══════════════════════════════════════════════════════════ */

/* ── Notification buttons (orders / reservations / waiter) ── */
a.rx-nav-notif-btn {
    background: #ffffff !important;
    border: 1.5px solid rgba(111,66,193,0.18) !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
    transition: all 0.22s cubic-bezier(.34,1.56,.64,1) !important;
    padding: 5px 9px !important;
    text-decoration: none !important;
}
a.rx-nav-notif-btn:hover {
    background: rgba(111,66,193,0.05) !important;
    border-color: rgba(111,66,193,0.42) !important;
    box-shadow: 0 4px 14px rgba(111,66,193,0.14) !important;
    transform: translateY(-1.5px);
    color: #6f42c1 !important;
}
a.rx-nav-notif-btn svg {
    transition: color 0.2s ease;
}
a.rx-nav-notif-btn:hover svg {
    fill: #6f42c1 !important;
}

/* Count badge */
.rx-nav-badge {
    background: linear-gradient(135deg, #6f42c1, #9b5cff) !important;
    border-radius: 7px !important;
    box-shadow: 0 2px 7px rgba(111,66,193,0.30) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    min-width: 20px;
    padding: 2px 6px !important;
    letter-spacing: 0.1px;
}

/* ── POS button ── */
a.rx-nav-pos-btn {
    background: linear-gradient(135deg, #6f42c1 0%, #9b5cff 100%) !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 3px 12px rgba(111,66,193,0.32), inset 0 1px 0 rgba(255,255,255,0.18) !important;
    color: #fff !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em;
    transition: all 0.22s cubic-bezier(.34,1.56,.64,1) !important;
    padding: 6px 12px !important;
    text-decoration: none !important;
}
a.rx-nav-pos-btn:hover {
    background: linear-gradient(135deg, #5530a0 0%, #8040e0 100%) !important;
    box-shadow: 0 6px 20px rgba(111,66,193,0.50), inset 0 1px 0 rgba(255,255,255,0.18) !important;
    transform: translateY(-1.5px);
    color: #fff !important;
}
a.rx-nav-pos-btn svg { fill: #fff !important; color: #fff !important; }

/* ── Upgrade Plan button ── */
#rx-upgrade-plan-link {
    text-decoration: none;
}
#rx-upgrade-plan-link button {
    background: linear-gradient(135deg, #581c87 0%, #7c3aed 55%, #9333ea 100%) !important;
    border: none !important;
    border-radius: 50px !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 7px 18px !important;
    letter-spacing: 0.04em;
    box-shadow: 0 4px 18px rgba(111,66,193,0.42), inset 0 1px 0 rgba(255,255,255,0.14) !important;
    transition: all 0.25s cubic-bezier(.34,1.56,.64,1) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    position: relative;
    overflow: hidden;
}
#rx-upgrade-plan-link button::before {
    content: '';
    position: absolute;
    top: 0; left: -80%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
    animation: rxNavGlint 3.5s ease-in-out infinite;
    border-radius: inherit;
}
@keyframes rxNavGlint {
    0%   { left: -80%; opacity: 0; }
    15%  { opacity: 1; }
    40%  { left: 130%; opacity: 0; }
    100% { left: 130%; opacity: 0; }
}
#rx-upgrade-plan-link button:hover {
    box-shadow: 0 8px 28px rgba(111,66,193,0.58), inset 0 1px 0 rgba(255,255,255,0.18) !important;
    transform: translateY(-1.5px);
    filter: brightness(1.07);
}
#rx-upgrade-plan-link button span { color: #fff !important; }
#rx-upgrade-plan-link button svg { color: #fff !important; fill: #fff !important; }

/* ── Icon buttons (fullscreen, dark mode toggle) ── */
#theme-toggle,
button[onclick*="openFullscreen"] {
    border-radius: 10px !important;
    transition: background 0.2s ease, color 0.2s ease, transform 0.18s ease !important;
}
#theme-toggle:hover,
button[onclick*="openFullscreen"]:hover {
    background: rgba(111,66,193,0.09) !important;
    color: #6f42c1 !important;
    transform: scale(1.1);
}

/* ── Display/monitor dropdown button ── */
#user-menu-button-3 {
    border-radius: 10px !important;
    background: rgba(111,66,193,0.07) !important;
    border: 1.5px solid rgba(111,66,193,0.16) !important;
    color: #6f42c1 !important;
    width: 36px !important;
    height: 36px !important;
    transition: all 0.2s ease !important;
}
#user-menu-button-3:hover {
    background: rgba(111,66,193,0.14) !important;
    border-color: rgba(111,66,193,0.36) !important;
    transform: scale(1.08);
}

/* ══════════════════════════════════════════════════════════
   Admin Pricing Page — frontend-matching card design
   ══════════════════════════════════════════════════════════ */

#rx-admin-pricing-page {
    background: linear-gradient(180deg, #ffffff 0%, #f6f3fb 55%, #ede9f8 100%);
    min-height: 100%;
    position: relative;
}
#rx-admin-pricing-page::before {
    content: '';
    position: absolute;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(88,28,135,0.10) 0%, transparent 65%);
    top: -100px; right: -150px;
    pointer-events: none; z-index: 0;
}
#rx-admin-pricing-page::after {
    content: '';
    position: absolute;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(147,51,234,0.08) 0%, transparent 65%);
    bottom: 0; left: -100px;
    pointer-events: none; z-index: 0;
}

/* Page header */
.rx-pricing-page-head {
    padding: 48px 24px 8px;
    text-align: center;
    position: relative; z-index: 1;
}
.rx-pricing-page-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(88,28,135,0.07); border: 1px solid rgba(88,28,135,0.18);
    color: #581c87; border-radius: 50px; padding: 5px 16px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.07em;
    text-transform: uppercase; margin-bottom: 14px;
}
.rx-pricing-page-title {
    font-size: clamp(26px, 4vw, 38px); font-weight: 800; color: #0f172a;
    letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 8px;
}
.rx-pricing-page-title span {
    background: linear-gradient(90deg, #581c87, #7c3aed, #a855f7);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.rx-pricing-page-sub { font-size: 15px; color: #64748b; margin-bottom: 0; line-height: 1.6; }
.rx-billing-toggle-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 28px 16px 8px; position: relative; z-index: 1; }
.rx-billing-pill { display: inline-flex; background: rgba(255,255,255,0.85); border: 1.5px solid rgba(111,66,193,0.14); border-radius: 50px; padding: 4px; box-shadow: 0 2px 14px rgba(0,0,0,0.07); gap: 2px; backdrop-filter: blur(8px); }
.rx-billing-pill-btn { padding: 8px 22px !important; border-radius: 50px !important; font-size: 13px !important; font-weight: 600 !important; border: none !important; cursor: pointer; transition: all 0.28s cubic-bezier(.4,0,.2,1) !important; color: #64748b !important; background: transparent !important; box-shadow: none !important; letter-spacing: 0.01em; }
.rx-billing-pill-btn.rx-billing-active { background: linear-gradient(135deg, #6f42c1, #9b5cff) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(111,66,193,0.34) !important; }
.rx-billing-save-pill { display: inline-block; background: linear-gradient(90deg, #581c87, #9333ea); color: #fff; border-radius: 50px; padding: 1px 7px; font-size: 10px; font-weight: 700; margin-left: 5px; vertical-align: middle; letter-spacing: 0.02em; }
.rx-pricing-grid { padding: 32px 24px 56px; position: relative; z-index: 1; }
.rx-admin-pricing-card { background: #ffffff; border-radius: 24px; border: 1.5px solid rgba(0,0,0,0.07); box-shadow: 0 8px 40px rgba(0,0,0,0.06); position: relative; overflow: visible; transition: transform 0.32s ease, box-shadow 0.32s ease; display: flex; flex-direction: column; padding: 36px 28px 28px; margin-top: 16px; }
.rx-admin-pricing-card:hover { transform: translateY(-9px); box-shadow: 0 24px 64px rgba(0,0,0,0.10); }
.rx-admin-pricing-card.rx-admin-featured { border: 2px solid #7c3aed; box-shadow: 0 12px 48px rgba(111,66,193,0.15); }
.rx-admin-pricing-card.rx-admin-featured:hover { box-shadow: 0 28px 72px rgba(111,66,193,0.22); transform: translateY(-10px); }
.rx-admin-popular-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #4c1d95, #9333ea); color: #fff; padding: 5px 16px; border-radius: 50px; font-size: 10px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; box-shadow: 0 6px 22px rgba(147,51,234,0.42); }
.rx-admin-plan-name { font-size: 20px !important; font-weight: 800 !important; color: #1e1b4b !important; letter-spacing: -0.02em; margin-bottom: 2px !important; line-height: 1.2; }
.rx-admin-featured .rx-admin-plan-name { background: linear-gradient(90deg, #581c87, #9333ea); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.rx-admin-price-block { margin: 18px 0 0; line-height: 1; }
.rx-admin-price-big { font-size: 40px; font-weight: 800; color: #581c87; letter-spacing: -2px; line-height: 1; }
.rx-admin-featured .rx-admin-price-big { background: linear-gradient(135deg, #581c87, #9333ea); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.rx-admin-price-period { font-size: 14px; color: #94a3b8; font-weight: 400; letter-spacing: 0; margin-left: 2px; }
.rx-admin-price-meta { font-size: 12px; color: #94a3b8; margin-top: 6px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rx-admin-price-num-row { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.rx-admin-annual-info { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.rx-admin-price-strike { font-size: 12px; color: #94a3b8; text-decoration: line-through; text-decoration-color: #f87171; font-weight: 500; }
.rx-admin-yearly-total { font-size: 12px; font-weight: 600; color: #16a34a; }
.rx-admin-price-sep { height: 1px; background: linear-gradient(90deg, transparent, rgba(88,28,135,0.13), transparent); margin: 20px 0; }
.rx-admin-feat-title { font-size: 10px !important; font-weight: 700 !important; color: #94a3b8 !important; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 10px !important; }
.rx-admin-feat-list { list-style: none; padding: 0; margin: 0 0 22px 0; flex: 1; }
.rx-admin-feat-item { display: flex; align-items: flex-start; gap: 9px; padding: 4px 7px; border-radius: 8px; font-size: 13px; font-weight: 500; color: #4b5563; margin-bottom: 2px; transition: background 0.15s ease; line-height: 1.4; }
.rx-admin-feat-item:hover { background: rgba(88,28,135,0.05); color: #1e1b4b; }
.rx-admin-feat-check { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, #6f42c1, #9b5cff); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; box-shadow: 0 2px 6px rgba(111,66,193,0.28); }
.rx-admin-feat-cross { width: 18px; height: 18px; border-radius: 50%; background: #f1f5f9; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.rx-admin-feat-limit { font-size: 10px; font-weight: 700; color: #7c3aed; background: rgba(111,66,193,0.09); border-radius: 5px; padding: 1px 5px; margin-left: 2px; white-space: nowrap; flex-shrink: 0; }
.rx-admin-cta { display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; width: 100% !important; padding: 12px 20px !important; background: linear-gradient(135deg, #6f42c1, #9b5cff) !important; color: #fff !important; font-size: 14px !important; font-weight: 700 !important; border: none !important; border-radius: 14px !important; cursor: pointer !important; box-shadow: 0 4px 16px rgba(111,66,193,0.30) !important; transition: all 0.24s ease !important; letter-spacing: 0.02em; text-decoration: none !important; margin-top: auto; }
.rx-admin-cta:hover { background: linear-gradient(135deg, #5530a0, #8040e0) !important; box-shadow: 0 8px 26px rgba(111,66,193,0.48) !important; transform: translateY(-1px); color: #fff !important; }
.rx-admin-cta-disabled { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; padding: 12px 20px !important; background: #f1f5f9 !important; color: #94a3b8 !important; font-size: 14px !important; font-weight: 600 !important; border: none !important; border-radius: 14px !important; cursor: not-allowed !important; margin-top: auto; }

/* ── UNUSED rx-pkg-* classes removed — clean state ── */

/* unused placeholder to keep structure */
.rx-pkg-unused-placeholder { display: none; }


/* ── Visit Website navbar button ── */
.rx-visit-site-btn {
    display: inline-flex !important;
    align-items: center !important;
    flex-direction: row !important;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    background: linear-gradient(135deg, rgba(111,66,193,0.08) 0%, rgba(124,58,237,0.12) 100%);
    color: #6f42c1;
    border: 1px solid rgba(111,66,193,0.22);
    box-shadow: 0 1px 4px rgba(111,66,193,0.10);
    text-decoration: none !important;
    white-space: nowrap;
    vertical-align: middle;
    line-height: 1;
}
@media (max-width: 767px) {
    .rx-visit-site-btn {
        display: none !important;
    }
}
.rx-visit-site-btn:hover {
    background: linear-gradient(135deg, rgba(111,66,193,0.18) 0%, rgba(124,58,237,0.22) 100%);
    border-color: rgba(111,66,193,0.40);
    box-shadow: 0 2px 10px rgba(111,66,193,0.22);
    transform: translateY(-1px);
    color: #5530a0;
}
.dark .rx-visit-site-btn {
    background: rgba(111,66,193,0.15);
    color: #c4a8f5;
    border-color: rgba(111,66,193,0.30);
}
.dark .rx-visit-site-btn:hover {
    background: rgba(111,66,193,0.25);
    color: #d8c4fa;
    border-color: rgba(111,66,193,0.50);
    box-shadow: 0 2px 10px rgba(111,66,193,0.30);
}

/* ══════════════════════════════════════════
   Navbar Dropdown System  (Profile + Display)
   ══════════════════════════════════════════ */

/* ── Avatar trigger button ── */
.rx-nav-avatar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: 9999px;
}
.rx-nav-avatar-img {
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    border: 1px solid rgba(111,66,193,0.30);
    box-sizing: border-box;
    display: block;
    transition: box-shadow 0.2s ease;
}
.rx-nav-avatar-btn:hover .rx-nav-avatar-img {
    box-shadow: 0 0 0 3px rgba(111,66,193,0.15);
}

/* ── Icon trigger button (Display/Monitor) ── */
.rx-nav-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(111,66,193,0.07);
    border: 1px solid rgba(111,66,193,0.16);
    color: #6f42c1;
    cursor: pointer;
    transition: background 0.18s ease, box-shadow 0.18s ease;
}
.rx-nav-icon-btn:hover {
    background: rgba(111,66,193,0.14);
    box-shadow: 0 2px 8px rgba(111,66,193,0.18);
}
.dark .rx-nav-icon-btn {
    background: rgba(111,66,193,0.14);
    border-color: rgba(111,66,193,0.28);
    color: #c4a8f5;
}
.dark .rx-nav-icon-btn:hover {
    background: rgba(111,66,193,0.24);
}

/* ── Shared dropdown panel ── */
.rx-nav-dropdown {
    min-width: 240px;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    overflow: hidden;
    animation: rxDropIn 0.16s ease forwards;
}
.dark .rx-nav-dropdown {
    background: #1e2433;
    border-color: rgba(255,255,255,0.07);
    box-shadow: 0 8px 32px rgba(0,0,0,0.40);
}
@keyframes rxDropIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Profile header ── */
.rx-nav-dd-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 12px;
    background: linear-gradient(135deg, rgba(111,66,193,0.06) 0%, rgba(124,58,237,0.04) 100%);
    border-bottom: 1px solid rgba(111,66,193,0.10);
}
.dark .rx-nav-dd-header {
    background: rgba(111,66,193,0.10);
    border-bottom-color: rgba(111,66,193,0.18);
}
.rx-nav-dd-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.rx-nav-dd-avatar {
    width: 38px;
    height: 38px;
    border-radius: 9999px;
    border: 2px solid rgba(111,66,193,0.30);
    display: block;
}
.rx-nav-dd-status-dot {
    position: absolute;
    bottom: 1px; right: 1px;
    width: 9px; height: 9px;
    border-radius: 9999px;
    background: #22c55e;
    border: 2px solid #ffffff;
}
.dark .rx-nav-dd-status-dot { border-color: #1e2433; }
.rx-nav-dd-identity { min-width: 0; }
.rx-nav-dd-name {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dark .rx-nav-dd-name { color: #f3f4f6; }
.rx-nav-dd-email {
    font-size: 0.7rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}
.dark .rx-nav-dd-email { color: #9ca3af; }

/* ── Section label (display dropdown) ── */
.rx-nav-dd-section-label {
    padding: 10px 14px 6px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9ca3af;
}
.dark .rx-nav-dd-section-label { color: #6b7280; }

/* ── Dropdown body ── */
.rx-nav-dd-body {
    padding: 6px;
}

/* ── Menu item ── */
.rx-nav-dd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 9px;
    text-decoration: none !important;
    transition: background 0.15s ease;
    cursor: pointer;
}
.rx-nav-dd-item:hover {
    background: rgba(111,66,193,0.06);
}
.dark .rx-nav-dd-item:hover {
    background: rgba(111,66,193,0.12);
}
.rx-nav-dd-item--danger:hover {
    background: rgba(239,68,68,0.06) !important;
}
.dark .rx-nav-dd-item--danger:hover {
    background: rgba(239,68,68,0.12) !important;
}

/* ── Icon bubble ── */
.rx-nav-dd-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
}
.rx-nav-dd-icon svg {
    width: 15px;
    height: 15px;
}

/* ── Label ── */
.rx-nav-dd-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #374151;
    flex: 1;
}
.dark .rx-nav-dd-label { color: #e5e7eb; }

/* ── Label + sublabel wrap (display items) ── */
.rx-nav-dd-label-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.rx-nav-dd-sublabel {
    font-size: 0.68rem;
    color: #9ca3af;
    margin-top: 1px;
}
.dark .rx-nav-dd-sublabel { color: #6b7280; }

/* ── Chevron / external-link icon ── */
.rx-nav-dd-chevron, .rx-nav-dd-ext {
    width: 14px;
    height: 14px;
    color: #d1d5db;
    flex-shrink: 0;
    transition: color 0.15s;
}
.rx-nav-dd-item:hover .rx-nav-dd-chevron,
.rx-nav-dd-item:hover .rx-nav-dd-ext { color: #9ca3af; }

/* ── Divider ── */
.rx-nav-dd-divider {
    height: 1px;
    background: rgba(0,0,0,0.06);
    margin: 4px 6px;
}
.dark .rx-nav-dd-divider { background: rgba(255,255,255,0.06); }


/* ============================================================
   QR CODES PAGE — rx-qr-* component system
   ============================================================ */

/* Outer wrapper card */
.rx-qr-card {
    background: white;
    border-radius: 18px;
    box-shadow: 0 2px 14px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.04);
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
    width: 200px;
    margin: 0 auto;
}
.rx-qr-card:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: 0 18px 44px rgba(111,66,193,0.20);
}

/* Downloadable / printable inner area */
.rx-qr-card-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #f5f2ed;
    overflow: hidden;
}

/* Top beige section */
.rx-qr-top {
    height: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 18px;
    background: #f5f2ed;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.rx-qr-welcome {
    font-size: 10.5px;
    color: #777;
    margin: 0 0 4px;
    font-weight: 400;
    letter-spacing: 0.3px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.rx-qr-restaurant-name {
    font-size: 15px;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    line-height: 1.2;
    text-align: center;
    padding: 0 12px;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Gradient bottom zone */
.rx-qr-btm {
    background: linear-gradient(162deg, #7c3aed 0%, #5b21b6 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 0;
}

/* Mountain SVG wave at top of gradient zone */
.rx-qr-mtn {
    width: 100%;
    height: 50px;
    display: block;
    flex-shrink: 0;
}

/* Body content below QR frame (badge, CTA, powered by) */
.rx-qr-btm-body {
    padding-top: 118px;  /* 108px for QR overlap + 10px gap */
    padding-bottom: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    width: 100%;
}

/* QR image frame — absolutely centered, overlaps boundary */
.rx-qr-frame {
    position: absolute;
    top: 90px;           /* 90px from top of card-inner → 40px into gradient zone */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: 148px;
    height: 148px;
    background: white;
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.18), 0 0 0 2px rgba(255,255,255,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rx-qr-frame img {
    width: 130px;
    height: 130px;
    object-fit: contain;
    display: block;
}

/* Table code pill badge */
.rx-qr-table-badge {
    background: rgba(255,255,255,0.14);
    border: 1.5px solid rgba(255,255,255,0.42);
    color: white;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 5px 18px;
    border-radius: 9999px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

/* "EXPLORE OUR MENU" CTA text */
.rx-qr-cta-text {
    color: rgba(255,255,255,0.82);
    font-size: 7.5px;
    font-weight: 600;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Thin separator line */
.rx-qr-sep {
    width: 55%;
    height: 1px;
    background: rgba(255,255,255,0.18);
    flex-shrink: 0;
}

/* "Powered By" pill footer */
.rx-qr-powered {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: white;
    border-radius: 9999px;
    padding: 7px 14px 7px 12px;
}
.rx-qr-powered-label {
    font-size: 9px;
    color: #999;
    white-space: nowrap;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 500;
}
.rx-qr-powered-logo {
    height: 20px;
    width: auto;
    max-width: 22px;
    object-fit: contain;
}
.rx-qr-powered-name {
    font-size: 10px;
    font-weight: 700;
    color: #6f42c1;
    white-space: nowrap;
    font-family: 'Plus Jakarta Sans', sans-serif;
    letter-spacing: 0.2px;
}

/* Action bar below the card */
.rx-qr-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 11px;
    border-top: 1px solid rgba(0,0,0,0.06);
    background: white;
}
.rx-qr-url-link {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    overflow: hidden;
}
.rx-qr-url-icon {
    color: #6f42c1;
    flex-shrink: 0;
    width: 10px;
    height: 10px;
}
.rx-qr-url-text {
    font-size: 9px;
    color: #6f42c1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Small icon action buttons (download / print) */
.rx-qr-icon-btn {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(111,66,193,0.18);
    border-radius: 8px;
    background: rgba(111,66,193,0.05);
    color: #6f42c1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    padding: 0;
}
.rx-qr-icon-btn:hover {
    background: rgba(111,66,193,0.12);
    border-color: rgba(111,66,193,0.35);
    transform: translateY(-1px);
}
.rx-qr-icon-btn:active { transform: translateY(0); }
.rx-qr-icon-btn.rx-loading {
    opacity: 0.55;
    pointer-events: none;
}
.rx-qr-icon-btn.rx-loading svg {
    animation: rxQrSpin 0.75s linear infinite;
}
@keyframes rxQrSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Area section heading */
.rx-qr-area-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.rx-qr-area-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #1a1a2e;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.dark .rx-qr-area-title { color: #e5e7eb; }
.rx-qr-area-count {
    font-size: 11px;
    background: rgba(111,66,193,0.08);
    color: #6f42c1;
    border: 1px solid rgba(111,66,193,0.18);
    padding: 2px 10px;
    border-radius: 9999px;
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Toast notification */
.rx-qr-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    background: linear-gradient(135deg, #6f42c1, #9b5cff);
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 500;
    font-family: 'Plus Jakarta Sans', sans-serif;
    z-index: 9999;
    box-shadow: 0 6px 20px rgba(111,66,193,0.38);
    animation: rxQrToastIn 0.3s cubic-bezier(0.34,1.56,0.64,1) forwards;
    white-space: nowrap;
    pointer-events: none;
}
.rx-qr-toast--error {
    background: linear-gradient(135deg, #ef4444, #f87171);
    box-shadow: 0 6px 20px rgba(239,68,68,0.38);
}
@keyframes rxQrToastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(14px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ══════════════════════════════════════════════════════════════════════
   RX UNIVERSAL POPUP SYSTEM
   Backdrop · Panel · Accent Bar · Header · Icon · Body · Footer · Buttons
   ══════════════════════════════════════════════════════════════════════ */

/* ── Backdrop ── */
.rx-backdrop {
    background: rgba(15, 23, 42, 0.52) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* ── Modal Panel ── */
.rx-modal-panel {
    border-radius: 20px !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(111, 66, 193, 0.10) !important;
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    overflow: hidden !important;
    /* Flex column so body can scroll while header+footer stay pinned */
    display: flex !important;
    flex-direction: column !important;
    /* Cap at viewport minus top margin (5rem) + bottom margin (1.5rem) + outer padding (1.5rem) */
    max-height: calc(100vh - 8rem) !important;
}
.dark .rx-modal-panel {
    border-color: rgba(255, 255, 255, 0.07) !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.38), 0 8px 24px rgba(111, 66, 193, 0.14) !important;
}

/* ── Accent Bar (top color strip, placed as first child inside panel) ── */
.rx-modal-accent {
    height: 4px;
    width: 100%;
    display: block;
    background: linear-gradient(90deg, #6f42c1, #9b5cff);
    flex-shrink: 0;
}
.rx-modal-accent--success { background: linear-gradient(90deg, #059669, #34d399); }
.rx-modal-accent--danger  { background: linear-gradient(90deg, #dc2626, #ef4444); }
.rx-modal-accent--warning { background: linear-gradient(90deg, #d97706, #fbbf24); }
.rx-modal-accent--info    { background: linear-gradient(90deg, #2563eb, #60a5fa); }

/* ── Modal Header ── */
.rx-modal-header {
    padding: 20px 24px 0 24px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex-shrink: 0;
}

/* ── Icon Badge ── */
.rx-modal-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(111, 66, 193, 0.12), rgba(155, 92, 255, 0.12));
    color: #7c3aed;
}
.rx-modal-icon svg { width: 22px; height: 22px; }
.rx-modal-icon--success { background: linear-gradient(135deg, rgba(5, 150, 105, 0.12), rgba(52, 211, 153, 0.12)); color: #059669; }
.rx-modal-icon--danger  { background: linear-gradient(135deg, rgba(220, 38, 38, 0.12), rgba(239, 68, 68, 0.12));  color: #dc2626; }
.rx-modal-icon--warning { background: linear-gradient(135deg, rgba(217, 119, 6, 0.12), rgba(251, 191, 36, 0.12)); color: #d97706; }
.rx-modal-icon--info    { background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(96, 165, 250, 0.12));  color: #2563eb; }

/* ── Title ── */
.rx-modal-title {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin: 0;
    line-height: 1.3;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.dark .rx-modal-title { color: #f3f4f6; }

/* ── Body ── */
.rx-modal-body {
    padding: 12px 24px 20px 24px;
    font-size: 13.5px;
    color: #6b7280;
    line-height: 1.65;
    /* Grow to fill available space between pinned header/footer; scroll when content exceeds it */
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    min-height: 0 !important;
}
.dark .rx-modal-body { color: #9ca3af; }

/* ── Footer ── */
.rx-modal-footer {
    padding: 14px 24px 20px 24px !important;
    background: rgba(249, 250, 251, 0.85) !important;
    border-top: 1px solid rgba(243, 244, 246, 1) !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.dark .rx-modal-footer {
    background: rgba(31, 41, 55, 0.55) !important;
    border-top-color: rgba(55, 65, 81, 0.5) !important;
}

/* ── Universal Buttons ── */
.rx-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    border-radius: 50px;
    font-size: 13.5px;
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', sans-serif;
    border: none;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
    text-decoration: none !important;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}
.rx-btn:hover { transform: translateY(-1px); text-decoration: none !important; }
.rx-btn:active { transform: translateY(0); }
.rx-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.rx-btn--primary {
    background: linear-gradient(135deg, #6f42c1, #9b5cff);
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(111, 66, 193, 0.35);
}
.rx-btn--primary:hover { box-shadow: 0 6px 22px rgba(111, 66, 193, 0.50); }

.rx-btn--danger {
    background: linear-gradient(135deg, #dc2626, #ef4444);
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.30);
}
.rx-btn--danger:hover { box-shadow: 0 6px 22px rgba(220, 38, 38, 0.46); }

.rx-btn--success {
    background: linear-gradient(135deg, #059669, #34d399);
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(5, 150, 105, 0.30);
}
.rx-btn--success:hover { box-shadow: 0 6px 22px rgba(5, 150, 105, 0.46); }

.rx-btn--warning {
    background: linear-gradient(135deg, #d97706, #fbbf24);
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(217, 119, 6, 0.30);
}
.rx-btn--warning:hover { box-shadow: 0 6px 22px rgba(217, 119, 6, 0.46); }

.rx-btn--secondary {
    background: #fff;
    color: #6b7280 !important;
    border: 1.5px solid #e5e7eb !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.rx-btn--secondary:hover {
    background: rgba(111, 66, 193, 0.04);
    border-color: rgba(111, 66, 193, 0.28) !important;
    color: #6f42c1 !important;
    box-shadow: 0 2px 8px rgba(111, 66, 193, 0.10);
}
.dark .rx-btn--secondary {
    background: rgba(55, 65, 81, 0.6);
    border-color: rgba(75, 85, 99, 0.6) !important;
    color: #d1d5db !important;
}

/* ══════════════════════════════════════════════════════════════════════
   RX RIGHT DRAWER — Redesigned Header
   ══════════════════════════════════════════════════════════════════════ */
.rx-drawer-header {
    padding: 16px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background: #ffffff;
    border-bottom: 1px solid rgba(111, 66, 193, 0.10);
    position: relative;
}
.rx-drawer-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #6f42c1, #9b5cff, rgba(155, 92, 255, 0.25));
    pointer-events: none;
}
.dark .rx-drawer-header {
    background: #1f2937;
    border-bottom-color: rgba(111, 66, 193, 0.18);
}
.rx-drawer-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.rx-drawer-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(111, 66, 193, 0.10), rgba(155, 92, 255, 0.10));
    color: #7c3aed;
    flex-shrink: 0;
}
.rx-drawer-icon svg { width: 16px; height: 16px; }
.rx-drawer-title {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    font-family: 'Plus Jakarta Sans', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dark .rx-drawer-title { color: #f3f4f6; }
.rx-drawer-close {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(111, 66, 193, 0.14);
    background: rgba(111, 66, 193, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #9ca3af;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    flex-shrink: 0;
}
.rx-drawer-close:hover {
    background: rgba(111, 66, 193, 0.10);
    border-color: rgba(111, 66, 193, 0.30);
    color: #6f42c1;
}

/* ══════════════════════════════════════════════════════════════════════
   RX UNIVERSAL TOAST SYSTEM
   Replaces all ad-hoc toast implementations sitewide
   ══════════════════════════════════════════════════════════════════════ */
#rx-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: 360px;
    width: calc(100vw - 40px);
}
.rx-toast {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px 14px 18px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.13), 0 2px 8px rgba(0, 0, 0, 0.06);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    color: #374151;
    pointer-events: all;
    position: relative;
    overflow: hidden;
    animation: rxToastSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    border: 1px solid rgba(0, 0, 0, 0.06);
}
.rx-toast.rx-toast--exit {
    animation: rxToastSlideOut 0.22s ease-in forwards;
    pointer-events: none;
}
/* Left accent strip per type */
.rx-toast::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    border-radius: 14px 0 0 14px;
}
.rx-toast--success::before { background: linear-gradient(to bottom, #059669, #34d399); }
.rx-toast--error::before   { background: linear-gradient(to bottom, #dc2626, #ef4444); }
.rx-toast--warning::before { background: linear-gradient(to bottom, #d97706, #fbbf24); }
.rx-toast--info::before    { background: linear-gradient(to bottom, #2563eb, #60a5fa); }
.rx-toast--default::before { background: linear-gradient(to bottom, #6f42c1, #9b5cff); }

.rx-toast-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rx-toast-icon svg { width: 16px; height: 16px; }
.rx-toast--success .rx-toast-icon { background: rgba(5, 150, 105, 0.12);  color: #059669; }
.rx-toast--error   .rx-toast-icon { background: rgba(220, 38, 38, 0.12);  color: #dc2626; }
.rx-toast--warning .rx-toast-icon { background: rgba(217, 119, 6, 0.12);  color: #d97706; }
.rx-toast--info    .rx-toast-icon { background: rgba(37, 99, 235, 0.12);  color: #2563eb; }
.rx-toast--default .rx-toast-icon { background: rgba(111, 66, 193, 0.12); color: #7c3aed; }

.rx-toast-text { flex: 1; line-height: 1.4; }

.rx-toast-close {
    width: 22px; height: 22px;
    border-radius: 6px;
    border: none;
    background: rgba(0, 0, 0, 0.05);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #9ca3af;
    pointer-events: all;
    transition: background 0.15s ease, color 0.15s ease;
    padding: 0;
    line-height: 1;
}
.rx-toast-close:hover { background: rgba(0, 0, 0, 0.10); color: #374151; }

/* Animated progress bar */
.rx-toast-progress {
    position: absolute;
    bottom: 0; left: 0;
    height: 3px;
    border-radius: 0;
    animation: rxToastProgress var(--rx-toast-dur, 3500ms) linear forwards;
}
.rx-toast--success .rx-toast-progress { background: linear-gradient(90deg, #059669, #34d399); }
.rx-toast--error   .rx-toast-progress { background: linear-gradient(90deg, #dc2626, #ef4444); }
.rx-toast--warning .rx-toast-progress { background: linear-gradient(90deg, #d97706, #fbbf24); }
.rx-toast--info    .rx-toast-progress { background: linear-gradient(90deg, #2563eb, #60a5fa); }
.rx-toast--default .rx-toast-progress { background: linear-gradient(90deg, #6f42c1, #9b5cff); }

@keyframes rxToastSlideIn {
    from { opacity: 0; transform: translateX(60px) scale(0.95); }
    to   { opacity: 1; transform: translateX(0)    scale(1); }
}
@keyframes rxToastSlideOut {
    from { opacity: 1; transform: translateX(0)    scale(1);    max-height: 80px;  margin-bottom: 0;   }
    to   { opacity: 0; transform: translateX(60px) scale(0.92); max-height: 0;     margin-bottom: -10px; }
}
@keyframes rxToastProgress {
    from { width: 100%; }
    to   { width: 0%; }
}

/* ══════════════════════════════════════════════════════════════════════
   RX SWEETALERT2 THEME — brand-consistent Swal popups via rxSwal()
   ══════════════════════════════════════════════════════════════════════ */
.rx-swal-popup {
    border-radius: 20px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(111, 66, 193, 0.10) !important;
    overflow: hidden !important;
    padding: 0 0 24px !important;
    position: relative !important;
}
.rx-swal-popup::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(90deg, #6f42c1, #9b5cff);
    width: 100%;
    flex-shrink: 0;
}
.rx-swal-popup .swal2-icon {
    margin-top: 20px !important;
    margin-bottom: 4px !important;
    transform: scale(0.82);
}
.rx-swal-popup .swal2-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    padding: 8px 24px 0 !important;
}
.rx-swal-popup .swal2-html-container {
    font-size: 13.5px !important;
    color: #6b7280 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    line-height: 1.65 !important;
    margin: 10px 24px 0 !important;
    padding: 0 !important;
}
.rx-swal-popup .swal2-actions {
    margin-top: 22px !important;
    gap: 10px !important;
    padding: 0 24px !important;
    justify-content: flex-end !important;
    flex-wrap: wrap;
}
.rx-swal-btn {
    padding: 9px 22px !important;
    border-radius: 50px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
    border: none !important;
    outline: none !important;
    line-height: 1 !important;
}
.rx-swal-btn:hover    { transform: translateY(-1px) !important; }
.rx-swal-btn:focus    { outline: none !important; box-shadow: none !important; }
.rx-swal-btn--confirm {
    background: linear-gradient(135deg, #6f42c1, #9b5cff) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(111, 66, 193, 0.35) !important;
}
.rx-swal-btn--confirm:hover { box-shadow: 0 6px 22px rgba(111, 66, 193, 0.50) !important; }
.rx-swal-btn--cancel {
    background: #fff !important;
    color: #6b7280 !important;
    border: 1.5px solid #e5e7eb !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
}
.rx-swal-btn--cancel:hover {
    background: rgba(111, 66, 193, 0.04) !important;
    border-color: rgba(111, 66, 193, 0.28) !important;
    color: #6f42c1 !important;
}
.rx-swal-btn--danger-confirm {
    background: linear-gradient(135deg, #dc2626, #ef4444) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.30) !important;
}
.rx-swal-btn--danger-confirm:hover { box-shadow: 0 6px 22px rgba(220, 38, 38, 0.46) !important; }

/* ══════════════════════════════════════════════════════════════════════
   GLOBAL SWEETALERT2 BRAND OVERRIDES
   Applies to ALL Swal popups sitewide (waiter requests, alerts, toasts)
   without touching per-component button colors set via confirmButtonColor
   ══════════════════════════════════════════════════════════════════════ */

/* ── Centered popups (confirmation dialogs, alerts) ── */
.swal2-popup:not(.swal2-toast) {
    border-radius: 20px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(111, 66, 193, 0.10) !important;
    overflow: hidden !important;
    padding-top: 0 !important;
    position: relative !important;
}
/* Purple gradient accent bar at the top of every popup */
.swal2-popup:not(.swal2-toast)::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(90deg, #6f42c1, #9b5cff);
    position: absolute;
    top: 0; left: 0; right: 0;
    pointer-events: none;
    z-index: 1;
}

.swal2-popup:not(.swal2-toast) .swal2-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    padding-top: 20px !important;
}
.swal2-popup:not(.swal2-toast) .swal2-html-container {
    font-size: 14px !important;
    color: #6b7280 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    line-height: 1.65 !important;
}
.swal2-popup:not(.swal2-toast) .swal2-icon {
    margin-top: 20px !important;
    transform: scale(0.88);
}
.swal2-popup:not(.swal2-toast) .swal2-actions {
    gap: 10px !important;
    margin-top: 20px !important;
}

/* Shape + typography for all Swal buttons — preserves per-call background colors */
.swal2-styled {
    border-radius: 50px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    padding: 9px 22px !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
    line-height: 1 !important;
}
.swal2-styled:hover { transform: translateY(-1px) !important; }
.swal2-styled:focus { outline: none !important; box-shadow: none !important; }

/* ── Waiter-request popup — premium branded buttons ── */
.rx-swal-actions--waiter {
    gap: 14px !important;
    padding: 6px 20px 16px !important;
    justify-content: center !important;
}
.rx-waiter-confirm {
    background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 55%, #9b5cff 100%) !important;
    box-shadow: 0 4px 18px rgba(124, 58, 237, 0.45) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    letter-spacing: 0.02em !important;
    padding: 11px 26px !important;
    border-radius: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    transition: transform 0.16s ease, box-shadow 0.16s ease !important;
}
.rx-waiter-confirm:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.62) !important;
}
.rx-waiter-cancel {
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%) !important;
    box-shadow: 0 4px 16px rgba(31, 41, 55, 0.32) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    letter-spacing: 0.01em !important;
    padding: 11px 26px !important;
    border-radius: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    transition: transform 0.16s ease, box-shadow 0.16s ease !important;
}
.rx-waiter-cancel:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(31, 41, 55, 0.46) !important;
}

/* ── Toast popups (livewire-alert toast mode) ── */
.swal2-popup.swal2-toast {
    border-radius: 14px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.13), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    padding: 10px 16px !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}
.swal2-popup.swal2-toast .swal2-title {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.swal2-popup.swal2-toast .swal2-icon {
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
}
.swal2-popup.swal2-toast .swal2-icon .swal2-icon-content {
    font-size: 16px !important;
}
.swal2-popup.swal2-toast.swal2-icon-success {
    border-left: 4px solid #059669 !important;
}
.swal2-popup.swal2-toast.swal2-icon-error {
    border-left: 4px solid #dc2626 !important;
}
.swal2-popup.swal2-toast.swal2-icon-warning {
    border-left: 4px solid #d97706 !important;
}
.swal2-popup.swal2-toast.swal2-icon-info {
    border-left: 4px solid #2563eb !important;
}

/* ══════════════════════════════════════════════════════════
   STAFF PAGE — ROLE DROPDOWN
   ══════════════════════════════════════════════════════════ */

/* Trigger button — purple pill badge */
[id^="dropdownHoverButton"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 12px 5px 10px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 20px !important;
    background: rgba(108, 92, 231, 0.08) !important;
    border: 1.5px solid rgba(108, 92, 231, 0.25) !important;
    color: #6c5ce7 !important;
    box-shadow: none !important;
    letter-spacing: 0.01em !important;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s !important;
    cursor: pointer !important;
}
[id^="dropdownHoverButton"]:hover {
    background: rgba(108, 92, 231, 0.15) !important;
    border-color: #6c5ce7 !important;
    box-shadow: 0 2px 10px rgba(108, 92, 231, 0.18) !important;
}
[id^="dropdownHoverButton"] svg {
    color: #6c5ce7 !important;
    opacity: 0.7;
    width: 10px !important;
    height: 10px !important;
    flex-shrink: 0;
}

/* Dropdown panel */
[id^="dropdownHover"]:not([id^="dropdownHoverButton"]) {
    border-radius: 14px !important;
    border: 1px solid rgba(108, 92, 231, 0.15) !important;
    box-shadow: 0 8px 28px rgba(108, 92, 231, 0.14), 0 2px 8px rgba(0,0,0,0.07) !important;
    background: #fff !important;
    overflow: hidden !important;
    padding: 6px !important;
    min-width: 160px !important;
}

/* Dropdown items */
[id^="dropdownHover"]:not([id^="dropdownHoverButton"]) ul {
    padding: 0 !important;
}
[id^="dropdownHover"]:not([id^="dropdownHoverButton"]) li a {
    display: flex !important;
    align-items: center !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    border-radius: 9px !important;
    transition: background 0.13s, color 0.13s !important;
    text-decoration: none !important;
}
[id^="dropdownHover"]:not([id^="dropdownHoverButton"]) li a:hover {
    background: rgba(108, 92, 231, 0.09) !important;
    color: #6c5ce7 !important;
}

/* ══════════════════════════════════════════════════════════
   PHONE CODE DROPDOWN  (x-phone-code-dropdown component)
   ══════════════════════════════════════════════════════════ */
.rxpc-wrap {
    position: relative;
    flex-shrink: 0;
    width: 130px;
}

/* Trigger */
.rxpc-trigger {
    width: 100%;
    height: 38px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 9px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
    font-size: 13px;
}
.rxpc-trigger:hover,
.rxpc-trigger--open {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
    outline: none;
}
.rxpc-trigger-flag { font-size: 12px; font-weight: 600; line-height: 1; flex-shrink: 0; color: #374151; letter-spacing: .3px; }
.rxpc-trigger-code {
    font-size: 13px;
    font-weight: 700;
    color: #3b1d8a;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}
.rxpc-chevron {
    flex-shrink: 0;
    color: #7c3aed;
    opacity: 0.7;
    transition: transform 0.2s;
}
.rxpc-chevron--up { transform: rotate(180deg); }

/* Panel */
.rxpc-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 50;
    width: 280px;
    background: #fff;
    border: 1.5px solid rgba(108,92,231,0.15);
    border-radius: 16px;
    box-shadow: 0 12px 36px rgba(108,92,231,0.18), 0 2px 8px rgba(0,0,0,0.07);
    display: flex;
    flex-direction: column;
}
/* Transitions */
.rxpc-enter        { transition: opacity 0.15s ease, transform 0.15s ease; }
.rxpc-enter-start  { opacity: 0; transform: translateY(-6px); }
.rxpc-enter-end    { opacity: 1; transform: translateY(0); }
.rxpc-leave        { transition: opacity 0.1s ease, transform 0.1s ease; }
.rxpc-leave-start  { opacity: 1; transform: translateY(0); }
.rxpc-leave-end    { opacity: 0; transform: translateY(-4px); }

/* Search */
.rxpc-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 8px;
    border-bottom: 1px solid rgba(108,92,231,0.08);
    flex-shrink: 0;
}
.rxpc-search-icon { color: #a78bfa; flex-shrink: 0; }
.rxpc-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 13px;
    font-weight: 500;
    color: #1a1a2e;
    background: transparent;
    font-family: inherit;
}
.rxpc-search-input::placeholder { color: #b8b0d0; }
.rxpc-search-clear {
    background: none;
    border: none;
    cursor: pointer;
    color: #b8b0d0;
    display: flex;
    align-items: center;
    padding: 2px;
    border-radius: 4px;
    transition: color 0.1s;
}
.rxpc-search-clear:hover { color: #7c3aed; }

/* Scrollable list */
.rxpc-list {
    overflow-y: auto;
    max-height: 240px;
    padding: 6px;
    border-radius: 0 0 14px 14px;
}

/* Items */
.rxpc-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    border-radius: 9px;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s;
    text-align: left;
}
.rxpc-item:hover { background: rgba(108,92,231,0.07); }
.rxpc-item--active { background: rgba(108,92,231,0.1); }
.rxpc-item-flag { font-size: 16px; line-height: 1; flex-shrink: 0; }
.rxpc-item-name {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: #1a1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rxpc-item--active .rxpc-item-name { color: #5b21b6; font-weight: 600; }
.rxpc-item-code {
    font-size: 12px;
    font-weight: 700;
    color: #7c3aed;
    background: rgba(124,58,237,0.08);
    border-radius: 6px;
    padding: 2px 7px;
    white-space: nowrap;
    flex-shrink: 0;
}
.rxpc-item-check { color: #7c3aed; flex-shrink: 0; }
.rxpc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px;
    font-size: 12px;
    color: #b8b0d0;
    font-weight: 500;
}

/* ══════════════════════════════════════════════════════════
   PROFILE PAGE  —  /user/profile
   Prefix: rx-pf-

   Layout: a sticky identity rail (avatar, role, completeness,
   API-token shortcut) beside ONE column of equal-width setting
   cards. Every card shares the same width, the same 24px gutter
   and the same header/body/footer padding scale, so every label
   and every control lines up on the same vertical rules.

   Fixed here (all measured on the real page):
     • #current_password was 890px while the two fields under it
       were 435px — the password fields now share one 3-up row.
     • the photo dropzone stopped at an arbitrary 895px, matching
       no other column edge — it now runs to the card gutter.
     • the 0% completeness meter rendered as a stray grey rule.
     • the 2FA-policy status pill sat alone in the card body
       looking like a dead button — it is a toggle row now.
     • form controls were up to 890px wide, far past a readable
       measure; the rail reclaims that width for real content.
   ══════════════════════════════════════════════════════════ */
.rx-pf-page {
    min-height: 100%;
    background: #f6f5fb;
    padding: 24px 24px 56px;
}
.rx-pf-shell {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 288px minmax(0, 1fr);
    align-items: start;
    gap: 20px;
}
.rx-pf-rail {
    position: sticky;
    top: 24px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.rx-pf-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Identity card (rail) ─────────────────────────────────── */
.rx-pf-hero {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    padding: 26px 20px 24px;
    /* Light version of the theme gradient (#7c3aed → #a855f7). */
    background: linear-gradient(155deg, #f5f3ff 0%, #ede9fe 52%, #f3e8ff 100%);
    border: 1px solid #e4dcfb;
    box-shadow: 0 10px 26px rgba(124, 58, 237, 0.10);
}
.rx-pf-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 78% 6%, rgba(255, 255, 255, 0.75) 0%, transparent 60%),
        radial-gradient(ellipse at 0% 112%, rgba(196, 181, 253, 0.35) 0%, transparent 58%);
}
.rx-pf-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
}
.rx-pf-avatar {
    position: relative;
    flex: 0 0 auto;
    width: 88px;
    height: 88px;
}
.rx-pf-avatar-img,
.rx-pf-avatar-initials {
    display: block;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.22);
    background: linear-gradient(135deg, #7c3aed, #a855f7);
}
.rx-pf-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.5px;
}
.rx-pf-hero-info {
    min-width: 0;
    width: 100%;
}
.rx-pf-hero-name {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    color: #2e1065;
    letter-spacing: -0.3px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.rx-pf-hero-mail {
    margin: 4px 0 10px;
    font-size: 12.5px;
    line-height: 1.45;
    color: #6b5a8e;
    overflow-wrap: anywhere;
}
.rx-pf-role {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: 99px;
    background: rgba(124, 58, 237, 0.10);
    border: 1px solid rgba(124, 58, 237, 0.28);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #6d28d9;
}

/* ── Card ─────────────────────────────────────────────────── */
.rx-pf-card {
    background: #fff;
    border: 1px solid #ece9f6;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(79, 39, 145, 0.05);
    overflow: hidden;
}
.rx-pf-card--danger { border-color: #f4d6d4; }
.rx-pf-head { padding: 20px 24px 0; }
.rx-pf-head--row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.rx-pf-head-main { min-width: 0; }
.rx-pf-head-aside { flex: 0 0 auto; }
.rx-pf-title {
    margin: 0;
    font-size: 15.5px;
    font-weight: 700;
    color: #2e1a64;
    letter-spacing: -0.01em;
    line-height: 1.35;
}
.rx-pf-card--danger .rx-pf-title { color: #b42318; }
.rx-pf-desc {
    margin: 5px 0 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: #6b6486;
    max-width: 62ch;
}
.rx-pf-body { padding: 18px 24px 22px; }
.rx-pf-head + .rx-pf-body { padding-top: 16px; }
.rx-pf-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.65;
    color: #4a4463;
    max-width: 68ch;
}
.rx-pf-text + .rx-pf-text { margin-top: 8px; }
.rx-pf-text + .rx-pf-btnrow,
.rx-pf-rows + .rx-pf-btnrow,
.rx-pf-grid + .rx-pf-btnrow,
.rx-pf-text + .rx-pf-rows { margin-top: 18px; }
.rx-pf-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    padding: 13px 24px;
    background: #faf9fe;
    border-top: 1px solid #efedf9;
}

/* The rail cards are narrow, so they get a tighter gutter. */
.rx-pf-rail .rx-pf-head { padding: 18px 18px 0; }
.rx-pf-rail .rx-pf-body { padding: 14px 18px 18px; }
.rx-pf-rail .rx-pf-head + .rx-pf-body { padding-top: 14px; }
.rx-pf-rail .rx-pf-desc { font-size: 12px; }

/* ── Fields ───────────────────────────────────────────────── */
.rx-pf-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
    align-items: start;
}
/* Three equal fields on one row (current / new / confirm password).
   auto-fit, not a fixed 3, because the card width depends on the sidebar as
   much as on the viewport — a viewport media query gets this wrong. */
.rx-pf-grid--3 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.rx-pf-col-2 { grid-column: 1 / -1; }
.rx-pf-label {
    display: block;
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.005em;
    color: #3d3857;
}
.rx-pf-hint {
    margin: 6px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: #857ea1;
}
.rx-pf-body .rx-pf-input,
.rx-pf-body .rx-pf-select {
    display: block;
    width: 100%;
    height: 40px;
    padding: 0 12px;
    font-size: 13px;
    color: #221a3c;
    background-color: #fff;
    border: 1px solid #ded9ef;
    border-radius: 10px;
    box-shadow: none;
}
.rx-pf-body .rx-pf-select { padding-inline-end: 30px; }
.rx-pf-body .rx-pf-input:focus,
.rx-pf-body .rx-pf-select:focus {
    outline: none;
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.16);
}
.rx-pf-body .rx-pf-input::placeholder { color: #a9a2c0; }
.rx-pf-phone { display: flex; gap: 8px; align-items: stretch; }
.rx-pf-phone > *:first-child { flex: 0 0 auto; }
.rx-pf-phone > *:last-child { flex: 1 1 auto; min-width: 0; }
.rx-pf-phone .rxpc-trigger,
.rx-pf-phone button { height: 40px; border-radius: 10px; }
.rx-pf-error { margin-top: 6px; font-size: 12px; line-height: 1.4; color: #dc2626; }

/* ── Buttons ──────────────────────────────────────────────── */
.rx-pf-btnrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
/* <x-confirms-password> wraps its button in a bare <span> */
.rx-pf-btnrow > span { display: inline-flex; }
.rx-pf-card button[type=submit],
.rx-pf-btnrow button { min-height: 36px; padding-inline: 16px; }

/* ── Photo field ──────────────────────────────────────────── */
.rx-pf-photo {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.rx-pf-photo-preview {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #ece5fb;
    box-shadow: 0 4px 12px rgba(111, 66, 193, 0.16);
    background: #f3eefe;
    flex: 0 0 auto;
}
.rx-pf-photo-thumb {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
}
.rx-pf-photo-remove {
    white-space: nowrap;
    font-size: 11.5px;
}
/* Fill the rest of the row so the dropzone's right edge lands on the
   same gutter as every input above and below it. */
.rx-pf-photo-ctrl {
    flex: 1 1 240px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}
.rx-pf-photo-ctrl .rx-fu { width: 100%; }
.rx-pf-photo-ctrl .rx-fu-hint { margin-top: 6px; }

/* ── Toggle switch ────────────────────────────────────────── */
.rx-pf-switch {
    position: relative;
    flex: 0 0 auto;
    width: 42px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 99px;
    background: #d9d5e6;
    cursor: pointer;
    transition: background-color 0.18s ease;
}
/* 44px-tall invisible hit area — the pill itself stays 24px. */
.rx-pf-switch::before {
    content: '';
    position: absolute;
    inset: -10px -5px;
}
.rx-pf-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
    transition: transform 0.18s ease;
}
.rx-pf-switch[aria-checked=true] { background: #6f42c1; }
.rx-pf-switch[aria-checked=true]::after { transform: translateX(18px); }
.rx-pf-switch:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }
[dir=rtl] .rx-pf-switch::after { left: auto; right: 3px; }
[dir=rtl] .rx-pf-switch[aria-checked=true]::after { transform: translateX(-18px); }

/* ── Rows (notification prefs, sessions, login activity) ──── */
.rx-pf-rows { display: flex; flex-direction: column; }
.rx-pf-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 0;
    border-top: 1px solid #f2f0f9;
}
.rx-pf-row:first-child { border-top: none; padding-top: 2px; }
.rx-pf-row:last-child { padding-bottom: 2px; }
.rx-pf-row-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3eefe;
    color: #6f42c1;
}
.rx-pf-row-main { flex: 1 1 auto; min-width: 0; }
.rx-pf-row-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    font-weight: 600;
    color: #2c2545;
    line-height: 1.35;
}
.rx-pf-row-sub {
    margin-top: 2px;
    font-size: 11.5px;
    line-height: 1.45;
    color: #857ea1;
    overflow-wrap: anywhere;
}
.rx-pf-row-meta {
    flex: 0 0 auto;
    font-size: 11.5px;
    color: #857ea1;
    text-align: end;
    white-space: nowrap;
}
.rx-pf-empty {
    margin: 0;
    padding: 6px 0;
    font-size: 13px;
    color: #948daf;
}

/* ── Badges / status pills ────────────────────────────────── */
.rx-pf-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 99px;
    background: #dcfce7;
    color: #15803d;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}
.rx-pf-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.rx-pf-status--on { background: #dcfce7; color: #15803d; }
.rx-pf-status--off { background: #f1eff8; color: #6b6488; }

/* ── Profile completeness (rail) ──────────────────────────── */
.rx-pf-meter {
    position: relative;
    height: 8px;
    border-radius: 99px;
    background: #eeebf8;
    overflow: hidden;
}
.rx-pf-meter-fill {
    height: 100%;
    min-width: 8px;                 /* 0% used to render as a bare grey rule */
    border-radius: 99px;
    background: linear-gradient(90deg, #6f42c1, #a855f7);
    transition: width 0.3s ease;
}
.rx-pf-pct {
    flex: 0 0 auto;
    font-size: 19px;
    font-weight: 800;
    line-height: 1;
    color: #6f42c1;
}
.rx-pf-checks {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}
.rx-pf-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 12px;
    line-height: 1.4;
    color: #4a4368;
}
.rx-pf-check--done { color: #a49dbd; text-decoration: line-through; }
.rx-pf-check svg { flex: 0 0 auto; margin-top: 1px; }

/* ── Inline notice ────────────────────────────────────────── */
.rx-pf-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 16px;
    border-radius: 14px;
    border: 1px solid #fcd9a8;
    background: #fffaf0;
    color: #8a5a09;
    font-size: 13px;
    line-height: 1.55;
}
.rx-pf-notice svg { flex: 0 0 auto; margin-top: 1px; }
.rx-pf-notice button,
.rx-pf-notice a {
    color: #7a4f08;
    font-weight: 600;
    text-decoration: underline;
}

/* ── Two-factor ───────────────────────────────────────────── */
.rx-pf-qr {
    display: inline-block;
    margin-top: 14px;
    padding: 10px;
    background: #fff;
    border: 1px solid #eae5f8;
    border-radius: 14px;
}
.rx-pf-qr svg { display: block; width: 156px; height: 156px; }
.rx-pf-key {
    margin: 12px 0 0;
    font-size: 12.5px;
    color: #4a4463;
    overflow-wrap: anywhere;
}
.rx-pf-key code {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 6px;
    background: #f3eefe;
    color: #5b21b6;
    font-weight: 600;
}
.rx-pf-codes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 18px;
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #f7f5fd;
    border: 1px solid #eae5f8;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    color: #3b3161;
    overflow-wrap: anywhere;
}
.rx-pf-code-input { max-width: 200px; }
.rx-pf-strong {
    font-weight: 600;
    color: #2c2545;
}
.rx-pf-mt { margin-top: 14px; }
.rx-pf-mt-lg { margin-top: 18px; }
.rx-pf-hint--ok { color: #15803d; }

/* ── Link row (API tokens, rail) ──────────────────────────── */
.rx-pf-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid #e2ddf2;
    background: #fff;
    font-size: 12.5px;
    font-weight: 600;
    color: #5b21b6;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.rx-pf-link:hover { background: #f7f4fe; border-color: #cdc2ee; }

/* ── Tablet: the rail drops above the cards ────────────────
   1199 and not 1023: the admin sidebar eats ~230px, so at a 1024 viewport a
   288px rail left the cards only 444px wide. Measured, not guessed. */
@media (max-width: 1199px) {
    .rx-pf-shell {
        grid-template-columns: minmax(0, 1fr);
        max-width: 760px;
        gap: 16px;
    }
    .rx-pf-rail {
        position: static;
        top: auto;
    }
    .rx-pf-hero { padding: 22px 20px; }
    .rx-pf-hero-inner {
        flex-direction: row;
        align-items: center;
        text-align: start;
        gap: 18px;
    }
    .rx-pf-hero-mail { margin-bottom: 8px; }
    .rx-pf-rail .rx-pf-head { padding: 20px 24px 0; }
    .rx-pf-rail .rx-pf-body { padding: 16px 24px 20px; }
    .rx-pf-checks {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px 20px;
    }
}

/* ── Phone ────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .rx-pf-page { padding: 14px 14px 40px; }
    .rx-pf-shell { gap: 14px; }
    .rx-pf-rail,
    .rx-pf-main { gap: 14px; }
    .rx-pf-hero { padding: 18px 16px; border-radius: 16px; }
    .rx-pf-hero-inner { gap: 14px; }
    .rx-pf-avatar,
    .rx-pf-avatar-img,
    .rx-pf-avatar-initials { width: 62px; height: 62px; }
    .rx-pf-avatar-initials { font-size: 21px; }
    .rx-pf-hero-name { font-size: 18px; }
    .rx-pf-hero-mail { font-size: 12px; }
    .rx-pf-head { padding: 16px 16px 0; }
    .rx-pf-body { padding: 14px 16px 18px; }
    .rx-pf-head + .rx-pf-body { padding-top: 14px; }
    .rx-pf-rail .rx-pf-head { padding: 16px 16px 0; }
    .rx-pf-rail .rx-pf-body { padding: 14px 16px 18px; }
    .rx-pf-actions { padding: 12px 16px; }
    .rx-pf-grid,
    .rx-pf-grid--3 { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .rx-pf-codes { grid-template-columns: minmax(0, 1fr); }
    .rx-pf-checks { flex-direction: column; gap: 9px; }
    .rx-pf-row { gap: 10px; }
    .rx-pf-row-icon { width: 30px; height: 30px; border-radius: 9px; }
    .rx-pf-row-meta { font-size: 10.5px; white-space: normal; }
    .rx-pf-qr svg { width: 136px; height: 136px; }
    .rx-pf-head--row { gap: 12px; }
    .rx-pf-photo { gap: 14px; }
    .rx-pf-photo-ctrl { flex: 1 1 100%; }
}

/* ── Avatar / item image fallback helpers ─────────────────────────────────── */
.rx-avatar-img {
    object-fit: cover;
    object-position: center;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    /* Prevent the broken-image icon from flashing before onerror fires */
    background: #ede9fe;
}

/* Item / food images — rectangular with fixed aspect ratio */
.rx-item-img {
    object-fit: cover;
    object-position: center;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    background: #f5f3ff;
}

/* ══════════════════════════════════════════════════════════════════════════
   <x-file-upload> — shared purple file-upload control
   Used by every admin form that takes a file. Plain CSS on purpose: the
   Tailwind bundle is pre-built, so new utility classes would not compile.
   ══════════════════════════════════════════════════════════════════════════ */
.rx-fu { width: 100%; }

.rx-fu-label {
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: .375rem;
    text-align: start;
}
.dark .rx-fu-label { color: #d1d5db; }
.rx-fu-req { color: #ef4444; margin-inline-start: 2px; }

.rx-fu-shell { position: relative; }

/* ── The dropzone (a <label>, so the whole card opens the picker) ───────── */
.rx-fu-zone {
    display: block;
    position: relative;
    width: 100%;
    padding: 14px;
    border: 1.5px dashed rgba(111, 66, 193, .32);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(111, 66, 193, .045), rgba(155, 92, 255, .03));
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.rx-fu-zone:hover {
    border-color: rgba(111, 66, 193, .6);
    background: linear-gradient(180deg, rgba(111, 66, 193, .09), rgba(155, 92, 255, .05));
}
.rx-fu-zone.is-drag {
    border-color: #6f42c1;
    border-style: solid;
    background: rgba(111, 66, 193, .12);
    box-shadow: 0 0 0 4px rgba(111, 66, 193, .14);
}
.rx-fu-zone.has-file { border-style: solid; border-color: rgba(111, 66, 193, .35); }
.dark .rx-fu-zone {
    border-color: rgba(167, 139, 250, .35);
    background: linear-gradient(180deg, rgba(124, 58, 237, .16), rgba(124, 58, 237, .07));
}
.dark .rx-fu-zone:hover { border-color: rgba(167, 139, 250, .7); }

.rx-fu--compact .rx-fu-zone { padding: 10px; border-radius: 12px; }

/* Native control: visually hidden but focusable + labelled (never display:none) */
.rx-fu-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
}

.rx-fu-face {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

/* ── Thumbnail / placeholder ───────────────────────────────────────────── */
.rx-fu-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    background: #f3efff;
    border: 1px solid rgba(111, 66, 193, .18);
    display: flex;
    align-items: center;
    justify-content: center;
}
.rx-fu--compact .rx-fu-thumb { width: 48px; height: 48px; border-radius: 10px; }
.dark .rx-fu-thumb { background: rgba(124, 58, 237, .22); border-color: rgba(167, 139, 250, .3); }
.rx-fu-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rx-fu-thumb-icon { display: flex; align-items: center; justify-content: center; color: #8b5cf6; }
.rx-fu-thumb-icon svg { width: 26px; height: 26px; }
.rx-fu--compact .rx-fu-thumb-icon svg { width: 20px; height: 20px; }

/* ── Body: purple pill + helper lines ──────────────────────────────────── */
.rx-fu-body { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; flex: 1 1 auto; }

.rx-fu-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 9px;
    background: linear-gradient(135deg, #6f42c1, #9b5cff);
    color: #fff;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: .01em;
    box-shadow: 0 4px 12px rgba(111, 66, 193, .28);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
    white-space: nowrap;
}
.rx-fu--compact .rx-fu-btn { padding: 6px 13px; font-size: .75rem; }
.rx-fu-zone:hover .rx-fu-btn { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(111, 66, 193, .38); filter: brightness(1.04); }
.rx-fu-zone:active .rx-fu-btn { transform: translateY(0); box-shadow: 0 3px 9px rgba(111, 66, 193, .3); }
.rx-fu-btn-icon { width: 15px; height: 15px; flex: 0 0 auto; }

/* Keyboard focus lands on the hidden input — show the ring on the pill/zone */
.rx-fu-input:focus-visible ~ .rx-fu-face .rx-fu-btn {
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(111, 66, 193, .55);
}
.rx-fu-input:focus-visible ~ .rx-fu-face { outline: none; }
.dark .rx-fu-input:focus-visible ~ .rx-fu-face .rx-fu-btn {
    box-shadow: 0 0 0 3px #111827, 0 0 0 6px rgba(167, 139, 250, .7);
}

.rx-fu-drag { font-size: .72rem; color: #7c6ba3; line-height: 1.2; }
.dark .rx-fu-drag { color: #b9a9e0; }

.rx-fu-file {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    min-width: 0;
    font-size: .72rem;
}
.rx-fu-file-name {
    font-weight: 600;
    color: #4c3a76;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}
.dark .rx-fu-file-name { color: #ddd2f7; }
.rx-fu-file-size {
    flex: 0 0 auto;
    color: #6f42c1;
    background: rgba(111, 66, 193, .1);
    border-radius: 999px;
    padding: 1px 8px;
    font-weight: 600;
}
.dark .rx-fu-file-size { color: #c4b5fd; background: rgba(167, 139, 250, .18); }

/* ── Remove button (outside the <label> so it never opens the picker) ───── */
.rx-fu-remove {
    position: absolute;
    top: -8px;
    inset-inline-end: -8px;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 2px solid #fff;
    background: #ef4444;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .18);
    transition: background .16s ease, transform .16s ease;
    z-index: 3;
    padding: 0;
}
.rx-fu-remove:hover { background: #dc2626; transform: scale(1.08); }
.rx-fu-remove:focus-visible { outline: 3px solid rgba(239, 68, 68, .45); outline-offset: 1px; }
.rx-fu-remove svg { width: 13px; height: 13px; }
.dark .rx-fu-remove { border-color: #1f2937; }

/* ── Livewire upload progress ──────────────────────────────────────────── */
.rx-fu-progress {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 8px;
    height: 5px;
    border-radius: 999px;
    background: rgba(111, 66, 193, .16);
    overflow: hidden;
    z-index: 2;
}
.rx-fu-progress-bar {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #6f42c1, #9b5cff);
    transition: width .18s ease;
}

.rx-fu-hint {
    margin-top: 6px;
    font-size: .7rem;
    line-height: 1.35;
    color: #9ca3af;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    text-align: start;
}
.rx-fu-hint:empty { display: none; }
.dark .rx-fu-hint { color: #8b93a5; }
.rx-fu-max {
    flex: 0 0 auto;
    color: #6f42c1;
    background: rgba(111, 66, 193, .08);
    border-radius: 999px;
    padding: 1px 8px;
    font-weight: 600;
}
.dark .rx-fu-max { color: #c4b5fd; background: rgba(167, 139, 250, .16); }

.rx-fu-error { margin-top: 5px; font-size: .75rem; color: #dc2626; }
.dark .rx-fu-error { color: #f87171; }

.rx-fu-live { margin-top: 5px; font-size: .7rem; font-weight: 600; color: #6f42c1; }
.dark .rx-fu-live { color: #c4b5fd; }

@media (max-width: 420px) {
    .rx-fu-face { gap: 10px; }
    .rx-fu-thumb { width: 52px; height: 52px; }
    .rx-fu-file-name { max-width: 130px; }
}

/* ══════════════════════════════════════════════════════════════════════
   SHARED CANCEL BUTTON  —  .rx-btn-cancel
   One primitive behind <x-button-cancel> so every Cancel in the admin
   reads the same: label hard-centred (it used to sit in the left corner
   whenever the button was stretched with flex-1 / w-full) and white text
   on a solid slate-purple so it stays legible against white cards and
   modal footers alike. Paired with the purple Save button.
   ══════════════════════════════════════════════════════════════════════ */
.rx-btn-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;   /* ← the actual alignment fix */
    text-align: center;
    gap: 6px;
    min-height: 34px;
    padding: 8px 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #6c6484;       /* white-on-this = 5.5:1, passes WCAG AA */
    color: #ffffff !important;
    font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(24, 16, 48, 0.12);
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
.rx-btn-cancel:hover,
.rx-btn-cancel:focus {
    background: #574f70;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(87, 79, 112, 0.30);
    text-decoration: none;
}
.rx-btn-cancel:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(111, 66, 193, 0.35);
}
.rx-btn-cancel:active { transform: translateY(1px); }
.rx-btn-cancel:disabled,
.rx-btn-cancel[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }
/* stretched variants (flex-1 / w-full) keep the label dead-centre */
.rx-btn-cancel.flex-1,
.rx-btn-cancel.w-full { display: flex; }

/* ══════════════════════════════════════════════════════════════════════
   SELECT "ADD NEW" AFFORDANCE  —  .rx-select-add-btn
   The purple + that sits flush against a <x-select> and opens the
   "create a new …" modal (e.g. Item Category on the menu-item form).
   Replaces the old grey cog, which read as "settings" and mis-aligned
   with the select box.
   ══════════════════════════════════════════════════════════════════════ */
/* neutralise <x-select>'s default grey "append" chip when it holds the + button,
   and let the button stretch to exactly the height of the select next to it */
span:has(> .rx-select-add-btn) {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    align-items: stretch !important;
}
.rx-select-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    align-self: stretch;
    padding: 0;
    border: 1px solid #d8ccf5;
    border-left: 0;
    border-radius: 0 6px 6px 0;
    background: linear-gradient(135deg, #f3ecff 0%, #e9dcff 100%);
    color: #6f42c1;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
.rx-select-add-btn:hover {
    background: linear-gradient(135deg, #6f42c1 0%, #9b5cff 100%);
    color: #ffffff;
    border-color: #6f42c1;
}
.rx-select-add-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(111, 66, 193, 0.30);
    position: relative;
    z-index: 1;
}
.rx-select-add-btn:active { background: linear-gradient(135deg, #5b34a3 0%, #8348e6 100%); }
.rx-select-add-btn svg { width: 15px; height: 15px; pointer-events: none; }

/* ══════════════════════════════════════════════════════════════════════
   SIDEBAR — no replayed open/close animation while the state is being
   restored after a navigation. Without this the already-open group
   visibly re-collapses and re-opens on every page load.
   ══════════════════════════════════════════════════════════════════════ */
.rx-sb-restoring ul[id^="dropdown-"],
.rx-sb-restoring ul[id^="dropdown-"] > li,
.rx-sb-restoring ul[id^="dropdown-"] > li > a {
    transition: none !important;
    animation: none !important;
}

/* file-upload: status line shown while an upload is in flight (Save is disabled then) */
.rx-fu-status{margin:6px 0 0;font-size:12.5px;line-height:1.45;color:#6b7280}
.rx-fu-status--warn{color:#b45309;font-weight:600}

/* ══════════════════════════════════════════════════════════════════════
   RESERVATIONS — card action bar (RES-5 status pills, RES-6 icon buttons)
   ══════════════════════════════════════════════════════════════════════ */

/* --- icon buttons -------------------------------------------------------
   These sit under Alpine x-show. x-show strips the INLINE `display`
   property when it re-shows an element, so the display must come from a
   class (never `!important`, or x-show could no longer hide it).        */
.rxres-delwrap {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.rxres-confirm {
    display: flex;
    align-items: center;
    gap: 4px;
}
.rxres-iconbtn {
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.rxres-iconbtn > svg { display: block; flex-shrink: 0; }
.rxres-iconbtn--danger { background: rgba(239,68,68,0.07); color: #ef4444; }
.rxres-iconbtn--danger:hover { background: rgba(239,68,68,0.16); transform: scale(1.08); }
.rxres-iconbtn--danger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(239,68,68,0.30);
}
/* Seat guest (check-in). Same shape as the two buttons beside it; the blue is the
   one the Checked_In status pill already uses, so the action reads as "make this
   booking Checked In" without introducing a new colour. */
.rxres-iconbtn--seat { background: rgba(59,130,246,0.09); color: #2563eb; }
.rxres-iconbtn--seat:hover { background: rgba(59,130,246,0.20); transform: scale(1.08); }
.rxres-iconbtn--seat:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.30);
}
.rxres-iconbtn--seat[disabled] { opacity: .55; cursor: progress; }
.rxres-confirm-label {
    font-size: 10.5px;
    font-weight: 600;
    color: #ef4444;
    white-space: nowrap;
}
.rxres-confirm-yes,
.rxres-confirm-no {
    height: 24px;
    padding: 0 9px;
    font-size: 11px;
    font-weight: 700;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    transition: background .12s ease;
}
.rxres-confirm-yes { background: #ef4444; color: #fff; }
.rxres-confirm-yes:hover { background: #dc2626; }
.rxres-confirm-no { background: rgba(107,114,128,0.10); color: #374151; font-weight: 600; }
.rxres-confirm-no:hover { background: rgba(107,114,128,0.20); }
.rxres-confirm-yes:focus-visible,
.rxres-confirm-no:focus-visible { outline: 2px solid #6f42c1; outline-offset: 2px; }

/* --- status pill dropdown (replaces the bare <select>) ----------------- */
.rxst {
    position: relative;
    flex: 1;
    min-width: 0;
}
.rxst-trigger {
    width: 100%;
    min-height: 30px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 10px;
    border-radius: 50px;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: start;
    background: var(--rxst-bg, rgba(124,58,237,0.09));
    color: var(--rxst-fg, #6f42c1);
    border: 1px solid var(--rxst-bd, rgba(124,58,237,0.28));
    transition: box-shadow .15s ease, filter .15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.rxst-trigger:hover { filter: brightness(0.97); box-shadow: 0 2px 8px rgba(17,24,39,0.08); }
.rxst-trigger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(111,66,193,0.30);
}
.rxst-trigger--open { box-shadow: 0 0 0 3px rgba(111,66,193,0.18); }
.rxst-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rxst-dot, #a78bfa);
    flex-shrink: 0;
}
.rxst-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rxst-caret {
    flex-shrink: 0;
    opacity: 0.65;
    transition: transform .18s ease;
}
.rxst-caret--up { transform: rotate(180deg); }
.rxst-spin {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: rxst-spin .7s linear infinite;
}
@keyframes rxst-spin { to { transform: rotate(360deg); } }

/* Opens UPWARD on purpose: the panel then paints over this card's own body
   and can never be clipped or covered by the next card in the grid. */
.rxst-panel {
    position: absolute;
    bottom: calc(100% + 8px);
    inset-inline-start: 0;
    width: max(180px, 100%);
    max-height: 236px;
    overflow-y: auto;
    z-index: 40;
    padding: 6px;
    background: #fff;
    border: 1.5px solid rgba(111,66,193,0.16);
    border-radius: 14px;
    box-shadow: 0 14px 38px rgba(76,29,149,0.20), 0 2px 8px rgba(0,0,0,0.07);
}
.rxst-opt {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px;
    border: none;
    border-radius: 9px;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    text-align: start;
    transition: background .12s ease;
}
.rxst-opt:hover { background: rgba(111,66,193,0.07); }
.rxst-opt:focus-visible { outline: 2px solid #6f42c1; outline-offset: -2px; }
.rxst-opt--on { background: rgba(111,66,193,0.08); }
.rxst-opt-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 1;
    min-width: 0;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--rxst-bg);
    color: var(--rxst-fg);
    border: 1px solid var(--rxst-bd);
}
.rxst-check { color: #6f42c1; flex-shrink: 0; }

@media (max-width: 420px) {
    .rxst-trigger { font-size: 10px; letter-spacing: 0.02em; }
    .rxst-panel { width: max(170px, 100%); }
}
@media (prefers-reduced-motion: reduce) {
    .rxres-iconbtn, .rxst-trigger, .rxst-caret, .rxst-opt { transition: none; }
    .rxres-iconbtn--danger:hover,
    .rxres-iconbtn--seat:hover { transform: none; }
    .rxst-spin { animation-duration: 2s; }
}

/* Phone-code dropdown: keyboard-navigation highlight (arrow keys) */
.rxpc-item--hl {
    background: rgba(111,66,193,0.13);
    box-shadow: inset 0 0 0 1.5px rgba(111,66,193,0.35);
}

/* Reservation card header status pill (shares the --rxst-* custom properties) */
.rxres-statuspill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 50px;
    padding: 3px 10px;
    white-space: nowrap;
    background: var(--rxst-bg);
    color: var(--rxst-fg);
    border: 1px solid var(--rxst-bd);
}