/* Admin workspace — shared multi-hub design language. */
/* Shared foundation adapted from multi-hub. */

/* ═══════════════════════════════════════════════
   1. DESIGN TOKENS
═══════════════════════════════════════════════ */
:root {
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

    /* Light palette */
    --clr-bg:           #f3f5fb;
    --clr-surface:      #ffffff;
    --clr-surface-2:    #f8fafd;
    --clr-border:       #e3e8f0;
    --clr-border-soft:  #edf0f7;
    --clr-text:         #0f172a;
    --clr-text-sub:     #475569;
    --clr-text-muted:   #94a3b8;
    --clr-accent:       #10b981;
    --clr-accent-dim:   rgba(16,185,129,.08);
    --clr-accent-hover: #059669;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(15,23,42,.04);
    --shadow-sm: 0 1px 4px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
    --shadow-md: 0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
    --shadow-lg: 0 8px 24px rgba(15,23,42,.10), 0 4px 8px rgba(15,23,42,.06);

    /* Radii */
    --radius-sm:  0.375rem;
    --radius-md:  0.625rem;
    --radius-lg:  0.875rem;
    --radius-pill:9999px;

    --ease: cubic-bezier(.4,0,.2,1);
    --dur-fast: 120ms;
    --dur-base: 180ms;
    --dur-slow: 280ms;
}

.dark {
    --clr-bg:           #080d19;
    --clr-surface:      #0f1928;
    --clr-surface-2:    #0b1220;
    --clr-border:       #1e2d42;
    --clr-border-soft:  #172032;
    --clr-text:         #f1f5f9;
    --clr-text-sub:     #94a3b8;
    --clr-text-muted:   #64748b;
    --clr-accent-dim:   rgba(16,185,129,.12);
    --clr-accent-hover: #34d399;
    --shadow-xs: 0 1px 3px rgba(0,0,0,.25);
    --shadow-sm: 0 2px 6px rgba(0,0,0,.30);
    --shadow-md: 0 4px 14px rgba(0,0,0,.35);
    --shadow-lg: 0 8px 28px rgba(0,0,0,.40);
}

/* ═══════════════════════════════════════════════
   2. GLOBAL RESET & TYPOGRAPHY
═══════════════════════════════════════════════ */
html, body, .fi-body {
    font-family: var(--font-sans) !important;
    font-size:   14px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    letter-spacing: -0.008em !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    background-color: var(--clr-bg) !important;
    color: var(--clr-text) !important;
}

.font-mono, code, kbd, pre {
    font-family: var(--font-mono) !important;
}

.fi-header-heading {
    font-family: var(--font-sans) !important;
    font-size: 1.175rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
}
.fi-header-subheading {
    font-size: 0.775rem !important;
    color: var(--clr-text-sub) !important;
}

/* ═══════════════════════════════════════════════
   3. PAGE LAYOUT
═══════════════════════════════════════════════ */
.fi-main-ctn {
    max-width: 100% !important;
    min-width: 0;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}
@media (min-width: 768px) {
    .fi-main-ctn { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
}
.fi-page { gap: 0.625rem !important; }
.fi-header { padding-bottom: 0.25rem !important; margin-bottom: 0 !important; }

/* ═══════════════════════════════════════════════
   4. TOPBAR
═══════════════════════════════════════════════ */
.fi-topbar {
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    background: rgba(255,255,255,.88) !important;
    border-bottom: 1px solid var(--clr-border) !important;
}
.dark .fi-topbar {
    background: rgba(8,13,25,.9) !important;
    border-bottom-color: var(--clr-border) !important;
}

/* ═══════════════════════════════════════════════
   5. SIDEBAR
═══════════════════════════════════════════════ */
.fi-sidebar {
    background: var(--clr-surface) !important;
    border-right: 1px solid var(--clr-border) !important;
}
.fi-sidebar-group-label {
    font-size: 0.625rem !important;
    font-weight: 700 !important;
    letter-spacing: .085em !important;
    text-transform: uppercase !important;
    color: var(--clr-text-muted) !important;
}
.fi-sidebar-item-label {
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: var(--clr-text-sub) !important;
    transition: color var(--dur-fast) var(--ease);
}
.fi-sidebar-item-button:hover .fi-sidebar-item-label { color: var(--clr-accent) !important; }
.fi-sidebar-item-button:hover { transform: translateX(2px); transition: transform var(--dur-fast) var(--ease); }
.fi-sidebar-item-active .fi-sidebar-item-label { color: var(--clr-accent) !important; font-weight: 600 !important; }

/* ═══════════════════════════════════════════════
   6. FILAMENT SECTIONS / PANELS
═══════════════════════════════════════════════ */
.fi-section, .fi-wi-stats-overview-stat {
    background: var(--clr-surface) !important;
    border: 1px solid var(--clr-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* ═══════════════════════════════════════════════
   7. FILAMENT TABLE
═══════════════════════════════════════════════ */
.fi-ta-table { border-radius: var(--radius-lg) !important; border: 1px solid var(--clr-border) !important; }
.fi-ta-header-cell {
    font-size: 0.65rem !important; font-weight: 700 !important;
    letter-spacing: .055em !important; text-transform: uppercase !important;
    padding-top: 0.6rem !important; padding-bottom: 0.6rem !important;
    color: var(--clr-text-muted) !important; background: var(--clr-surface-2) !important;
}
.fi-ta-cell { font-size: 0.8rem !important; padding-top: 0.45rem !important; padding-bottom: 0.45rem !important; }
.fi-ta-text-item-label { font-size: 0.8rem !important; }
.fi-ta-cell-description { font-size: 0.7rem !important; color: var(--clr-text-muted) !important; }
.fi-ta-row:hover td { background-color: var(--clr-accent-dim) !important; }

/* ═══════════════════════════════════════════════
   8. FILAMENT BUTTONS
═══════════════════════════════════════════════ */
.fi-btn {
    font-size: 0.775rem !important; font-weight: 600 !important;
    letter-spacing: -0.005em !important;
    padding-top: 0.375rem !important; padding-bottom: 0.375rem !important;
    border-radius: var(--radius-sm) !important;
}
.fi-btn-label { font-size: 0.775rem !important; }

/* ═══════════════════════════════════════════════
   9. FILAMENT FORM INPUTS
═══════════════════════════════════════════════ */
.fi-input, .fi-select-input, .fi-fo-field-wrp-label { font-size: 0.8rem !important; }
.fi-fo-field-wrp-label { font-size: 0.7rem !important; font-weight: 600 !important; }
.fi-input:focus, .fi-select-input:focus {
    border-color: var(--clr-accent) !important;
    box-shadow: 0 0 0 3px rgba(16,185,129,.18) !important;
    outline: none !important;
}
.fi-badge-label { font-size: 0.625rem !important; font-weight: 700 !important; }

/* ═══════════════════════════════════════════════
   10. STATS OVERVIEW
═══════════════════════════════════════════════ */
.fi-wi-stats-overview-stat-value { font-size: 1.3rem !important; font-weight: 800 !important; letter-spacing: -0.025em !important; }
.fi-wi-stats-overview-stat-label { font-size: 0.7rem !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .04em !important; }
.fi-wi-stats-overview-stat-description { font-size: 0.65rem !important; }

/* Modals */
.fi-modal-heading { font-size: 1rem !important; font-weight: 700 !important; letter-spacing: -0.02em !important; }
.fi-modal-description { font-size: 0.8rem !important; }



.occupancy-workspace { --oc-ink: #1d2b32; --oc-line: #e4e9e6; --oc-gold: #b5905d; }
.occupancy-intro { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 1.75rem; border-radius: 1.15rem; background: radial-gradient(circle at 90% 20%, rgba(211, 180, 125, .18), transparent 35%), linear-gradient(120deg, #172830, #233842); color: #fff; box-shadow: 0 14px 30px rgba(24, 39, 46, .12); }
.occupancy-eyebrow { display: block; color: #d8bb8e; font-size: .65rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; margin-bottom: .35rem; }
.occupancy-intro h2 { font-family: var(--ga-serif); font-size: clamp(1.4rem, 2vw, 2rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.2; }
.occupancy-intro p { color: #c6d2d3; font-size: .78rem; margin-top: .35rem; }
.occupancy-intro-date { flex: none; padding: .7rem .9rem; border: 1px solid rgba(255, 255, 255, .16); border-radius: .8rem; background: rgba(255, 255, 255, .07); }
.occupancy-intro-date span { display: block; color: #bbcbca; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.occupancy-intro-date strong { display: block; margin-top: .12rem; font-size: .85rem; color: #fff; white-space: nowrap; }
.occupancy-stats > div { min-width: 0; min-height: 7rem; border: 1px solid var(--oc-line) !important; border-radius: .9rem !important; box-shadow: 0 3px 14px rgba(25, 42, 45, .035) !important; background: #fff !important; padding: .9rem !important; }
.occupancy-stats > div:first-child { background: #21343b !important; border-color: #21343b !important; color: #fff; }
.occupancy-stats > div:first-child > div:first-child > span:first-child, .occupancy-stats > div:first-child > div:nth-child(2) > span:last-child { color: #b9ceca !important; }
.occupancy-stats > div:first-child > div:nth-child(2) > span:first-child { color: #fff !important; }
.occupancy-stats > div:first-child > div:last-child { background: rgba(255,255,255,.15) !important; }
.occupancy-stats > div .text-2xl { font-size: 1.55rem !important; letter-spacing: -.04em; }
.occupancy-toolbar { border-color: var(--oc-line) !important; border-radius: 1rem !important; box-shadow: 0 6px 24px rgba(25, 42, 45, .045) !important; }
.occupancy-view-switcher { max-width: 100%; overflow-x: auto; scrollbar-width: thin; gap: .15rem; flex-shrink: 0; }
.occupancy-view-switcher button { white-space: nowrap; border-radius: .55rem; }
.occupancy-period-nav { flex-wrap: wrap; }
.occupancy-toolbar input, .occupancy-toolbar select { min-height: 2.4rem; border-radius: .65rem !important; }
.occupancy-legend { border-radius: .8rem !important; padding: .65rem 1rem !important; }
.occupancy-month-shell, .occupancy-rack { border-color: var(--oc-line) !important; border-radius: 1rem !important; box-shadow: 0 6px 24px rgba(25, 42, 45, .045) !important; }
.occupancy-month-inner { min-width: 1040px; }
.occupancy-month-inner > div:first-child { background: #eef2ef !important; }
.occupancy-month-inner > div:first-child > div { border-color: #e1e7e3 !important; padding: .8rem .5rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; }
.occupancy-month-grid { border-color: #e6ebe8 !important; }
.occupancy-day { min-height: 9.25rem !important; padding: .6rem !important; border-color: #e6ebe8 !important; }
.occupancy-day:hover { background: #f7faf8 !important; }
.occupancy-day .occupancy-booking-chip { border-radius: .45rem; padding: .34rem .45rem; box-shadow: none !important; }
.occupancy-booking-chip:focus-visible, .occupancy-week-day button:focus-visible, .occupancy-rack button:focus-visible { outline: 2px solid var(--oc-gold); outline-offset: 2px; }
.occupancy-week-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: .9rem; }
.occupancy-week-day { min-width: 0; min-height: 15rem; padding: 1rem !important; border-color: var(--oc-line) !important; box-shadow: 0 4px 18px rgba(25, 42, 45, .04) !important; }
.occupancy-week-day:hover { box-shadow: 0 10px 24px rgba(25, 42, 45, .09) !important; }
.occupancy-week-day button { overflow: hidden; }
.occupancy-rack table { min-width: max-content; }
.occupancy-rack th { position: sticky; top: 0; z-index: 15; background: #eef2ef !important; }
.occupancy-rack th:first-child { z-index: 25; }
.occupancy-rack td { border-color: #e8edeb !important; }
.occupancy-rack tbody tr:nth-child(even) { background: #f9fbfa; }
.occupancy-rack tbody tr:hover { background: #f0f6f2 !important; }
.occupancy-rack tbody tr:nth-child(even) td:first-child { background: #f9fbfa !important; }
.occupancy-rack tbody tr:hover td:first-child { background: #f0f6f2 !important; }
.occupancy-rack td button { border-radius: .45rem; }
.occupancy-workspace [role="dialog"] > div:last-child > div { border-radius: 1rem !important; }
html.dark .occupancy-workspace { --oc-line: #2a3b44; }
html.dark .occupancy-stats > div { background: #192832 !important; }
html.dark .occupancy-stats > div:first-child { background: #304750 !important; border-color: #425a61 !important; }
html.dark .occupancy-month-inner > div:first-child, html.dark .occupancy-rack th { background: #233640 !important; }
html.dark .occupancy-month-grid, html.dark .occupancy-day, html.dark .occupancy-rack td { border-color: #2a3b44 !important; }
html.dark .occupancy-day:hover { background: #23343e !important; }
html.dark .occupancy-rack tbody tr:nth-child(even) { background: #1b2a34; }
html.dark .occupancy-rack tbody tr:hover { background: #263a44 !important; }
html.dark .occupancy-rack tbody tr:nth-child(even) td:first-child { background: #1b2a34 !important; }
html.dark .occupancy-rack tbody tr:hover td:first-child { background: #263a44 !important; }
@media (min-width: 640px) { .occupancy-week-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .occupancy-week-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1500px) { .occupancy-week-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 2000px) { .occupancy-week-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
@media (max-width: 760px) { .occupancy-intro { align-items: start; flex-direction: column; padding: 1.2rem; } .occupancy-period-nav > div { width: 100%; margin-left: 0 !important; } .occupancy-legend > div:last-child { display: none; } }


:root { --ga-gold: #059669; --ga-sans: var(--font-sans); --ga-serif: var(--font-sans); }
html, body, .fi-body { font-size: 14px !important; }
.fi-main { max-width: 100rem !important; width: 100%; min-width: 0; }
.fi-main-ctn { padding-inline: 1.5rem !important; }
.fi-page > section { gap: 1.5rem !important; padding-block: 1.5rem !important; }
.fi-topbar, .fi-sidebar-header { min-height: 5.25rem; border-bottom: 1px solid var(--clr-border); }
.fi-topbar { background: var(--clr-surface) !important; backdrop-filter: none !important; box-shadow: none; }
.fi-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem .85rem;
}
.fi-sidebar-nav { padding: 1.25rem .85rem; gap: 1.5rem; scrollbar-width: thin; }
.fi-sidebar-item-button { min-height: 2.75rem; border-radius: .5rem; transition: background .15s; }
.fi-sidebar-item-button:hover { transform: none; background: var(--clr-surface-2); }
.fi-sidebar-item-active .fi-sidebar-item-button { background: var(--clr-accent-dim); }
.fi-sidebar-item-active .fi-sidebar-item-icon { color: var(--clr-accent-hover); }
.fi-sidebar-group-label { color: var(--clr-text-sub) !important; font-size: .65rem !important; }
.fi-header-heading { font-size: 1.65rem !important; letter-spacing: -.04em !important; }
.fi-header-subheading { font-size: .85rem !important; }
.fi-section, .fi-ta-ctn, .fi-wi-stats-overview-stat, .fi-modal-window, .fi-simple-main { border: 1px solid var(--clr-border); border-radius: .875rem; background: var(--clr-surface); box-shadow: var(--shadow-xs) !important; }
.fi-section-header { border-bottom: 1px solid var(--clr-border-soft); padding: 1.1rem 1.25rem; }
.fi-section-header-heading { font-size: .9rem; }
.fi-ta-header { padding: 1.25rem; }
.fi-ta-table { border: 0 !important; }
.fi-ta-header-cell { padding-block: .85rem !important; color: var(--clr-text-sub) !important; }
.fi-ta-cell { padding-block: .85rem !important; }
.fi-ta-content { max-width: 100%; overflow-x: auto; }
.fi-wi-stats-overview-stat { padding: 1.25rem !important; }
.fi-wi-stats-overview-stat-value { font-size: 2rem !important; font-weight: 650 !important; line-height: 1.25; margin-block: .55rem; }
.fi-wi-stats-overview-stat-label { text-transform: none !important; letter-spacing: 0 !important; font-size: .82rem !important; }
.fi-wi-stats-overview-stat-description { font-size: .75rem !important; }
.fi-btn { min-height: 2.5rem; border-radius: .5rem !important; box-shadow: none !important; }
.fi-input-wrp { border-radius: .5rem; background: var(--clr-surface); box-shadow: 0 0 0 1px var(--clr-border); }
.fi-input, .fi-select-input { min-height: 2.5rem; }
.fi-modal-window { overflow: hidden; }
.fi-dropdown-panel { border: 1px solid var(--clr-border); background: var(--clr-surface); border-radius: .75rem; max-height: calc(100dvh - 6rem); overflow-y: auto; }
.fi-simple-layout { background: var(--clr-bg); }
.fi-simple-main { padding: 2.5rem !important; }
.fi-simple-header-heading { font-size: 1.5rem; letter-spacing: -.035em; }
.font-serif { font-family: var(--font-sans) !important; }
.fi-sidebar-header > div:first-child { display: flex; align-items: center; min-width: 0; flex: 1; width: 100%; }
.fi-sidebar-header a { display: flex; align-items: center; min-width: 0; width: 100%; text-decoration: none; }
.fi-sidebar-header .fi-logo { display: flex !important; align-items: center; height: auto !important; min-width: 0; width: 100%; }
.hotel-brand { display: flex; flex-direction: column; justify-content: center; min-width: 0; width: 100%; }
.hotel-brand-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 0.65rem 0.85rem;
    border-radius: 1rem;
    box-shadow: 0 2px 5px -1px rgba(15, 23, 42, 0.08), 0 1px 3px -1px rgba(15, 23, 42, 0.04);
}
.dark .hotel-brand-card {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}
.hotel-brand-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    min-width: 0;
    width: 100%;
}
.hotel-brand-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    line-height: 0;
}
.hotel-brand-chip img {
    display: block;
    object-fit: contain;
}
.hotel-brand-chip--mark {
    flex-shrink: 0;
}
.hotel-brand-chip--mark img {
    height: 2.25rem;
    width: auto;
}
.hotel-brand-chip--text {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}
.hotel-brand-chip--text img {
    height: 1.85rem;
    width: auto;
    max-width: 100%;
}
.hotel-brand-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.45rem;
    padding-top: 0.35rem;
    border-top: 1px solid #f1f5f9;
}
.dark .hotel-brand-footer {
    border-top-color: #334155;
}
.hotel-brand-by-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}
.dark .hotel-brand-by-tag {
    color: #94a3b8;
}
.hotel-brand-by-tag strong {
    color: #059669;
    font-weight: 800;
    letter-spacing: 0.1em;
}
.dark .hotel-brand-by-tag strong {
    color: #34d399;
}
.hotel-brand-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.4rem;
    border-radius: 9999px;
    background: #ecfdf5;
    color: #047857;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.dark .hotel-brand-pill {
    background: rgba(5, 150, 105, 0.2);
    color: #6ee7b7;
}
.hotel-brand-collapsed {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.875rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.dark .hotel-brand-collapsed {
    background: #1e293b;
    border-color: #334155;
}
.hotel-brand-collapsed img {
    height: 2.15rem;
    width: auto;
}
.hotel-topbar-context { color: var(--clr-text-sub); font-size: .8rem; }
.hotel-topbar-context span { color: var(--clr-text); font-weight: 650; }
.hotel-actions { display: flex; align-items: center; gap: .5rem; }
.hotel-action { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.4rem; padding: .5rem .8rem; border: 1px solid var(--clr-border); border-radius: .5rem; color: var(--clr-text-sub); background: var(--clr-surface); font-size: .75rem; font-weight: 600; }
.hotel-action:hover { background: var(--clr-surface-2); }
.hotel-action-primary { background: #047857; color: white; border-color: #047857; }
.hotel-action-primary:hover { background: #065f46; }
.hotel-action:focus-visible { outline: 2px solid #10b981; outline-offset: 3px; }
.hotel-sidebar-footer { margin: .75rem; padding: 1rem .65rem; border-top: 1px solid var(--clr-border); font-size: .75rem; color: var(--clr-text-sub); }
.hotel-sidebar-footer strong, .hotel-sidebar-footer small { display: block; }
.hotel-sidebar-footer strong { color: var(--clr-text); }
.hotel-sidebar-footer small { margin-top: .25rem; }
.hotel-overview { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: .875rem; }
.hotel-overview-eyebrow { color: var(--clr-accent-hover); font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.hotel-overview h2 { margin: .4rem 0; color: var(--clr-text); font-size: 1.65rem; font-weight: 650; letter-spacing: -.04em; }
.hotel-overview p { color: var(--clr-text-sub); font-size: .85rem; }
.hotel-overview-date { text-align: right; font-size: .8rem; color: var(--clr-text-sub); white-space: nowrap; }
.hotel-overview-date strong { display: block; color: var(--clr-text); margin-bottom: .35rem; }
.occupancy-intro { background: var(--clr-surface); color: var(--clr-text); border: 1px solid var(--clr-border); box-shadow: none; }
.occupancy-intro p, .occupancy-intro-date { color: var(--clr-text-sub); }
.occupancy-intro-date strong { color: var(--clr-text); }
@media (max-width: 900px) { .hotel-topbar-context { display: none; } }
@media (max-width: 640px) { .fi-main-ctn { padding-inline: .75rem !important; } .hotel-overview { align-items: start; flex-direction: column; padding: 1.1rem; } .hotel-overview-date { text-align: left; } .hotel-action-secondary { display: none; } .fi-simple-main { padding: 1.5rem !important; } }

/* Let every admin page use the available space, with a compact content gutter. */
.fi-main-ctn { min-width: 0; padding-inline: 0 !important; }
.fi-main { max-width: none !important; padding-inline: .75rem !important; }
.fi-page { gap: .75rem !important; min-width: 0; }
.fi-page > section { gap: .75rem !important; padding-block: .75rem !important; min-width: 0; }
.fi-page > section > div { min-width: 0; }
.fi-header { gap: .5rem; padding-block: .4rem !important; }
.fi-section-header, .fi-ta-header { padding: .75rem 1rem; }
.fi-wi-stats-overview-stat { padding: 1rem !important; }

/* The four view choices read as one control and stay usable at narrow widths. */
.occupancy-workspace { min-width: 0; }
.occupancy-intro { align-items: center; gap: .75rem; padding: .75rem 1rem; }
.occupancy-intro h2 { font-size: 1.1rem; }
.occupancy-intro p { margin-top: .15rem; }
.occupancy-intro-date { padding: .35rem .65rem; }
.occupancy-stats > div { min-height: 5.5rem; padding: .65rem .75rem !important; }
.occupancy-toolbar { padding: .75rem !important; }
.occupancy-view-switcher { width: max-content; max-width: 100%; overflow: visible; flex-shrink: 1; gap: .25rem; }
.occupancy-view-switcher button { justify-content: center; min-width: 0; min-height: 2.35rem; padding: .4rem .7rem; border-radius: .5rem; line-height: 1.15; }
.occupancy-view-switcher button[aria-pressed="true"] { background: var(--clr-surface) !important; color: var(--clr-accent-hover) !important; box-shadow: var(--shadow-xs); }
.occupancy-view-switcher button:focus-visible { outline: 2px solid var(--clr-accent); outline-offset: 2px; }
.occupancy-period-nav { min-width: 0; gap: .35rem; }
.occupancy-period-nav > div { min-width: 0; margin-left: .35rem; }
.occupancy-period-nav > div > span { overflow-wrap: anywhere; }
.occupancy-legend { padding: .45rem .75rem !important; }

/* The month uses the canvas; only narrow screens scroll the seven-day grid. */
.occupancy-month-shell, .occupancy-rack { max-width: 100%; border-radius: .65rem !important; box-shadow: var(--shadow-xs) !important; scrollbar-width: thin; }
.occupancy-month-inner { width: 100%; min-width: 770px; }
.occupancy-month-inner > div:first-child > div { padding: .5rem .3rem; }
.occupancy-day { min-width: 0; min-height: 7.25rem !important; padding: .4rem !important; }
.occupancy-day .occupancy-booking-chip { padding: .2rem .35rem; }

/* A seven-day week belongs on one desktop row. Cards can still grow vertically. */
.occupancy-week-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.occupancy-week-day { min-width: 0; min-height: 12rem; padding: .65rem !important; box-shadow: var(--shadow-xs) !important; }
.occupancy-week-day button { min-width: 0; }
.occupancy-week-day button span { min-width: 0; overflow-wrap: anywhere; }

/* The 14-day rack fits common desktop widths; the 30-day rack scrolls deliberately. */
.occupancy-rack table { table-layout: fixed; width: 100%; min-width: 0; }
.occupancy-rack-14 table { min-width: 970px; }
.occupancy-rack-30 table { min-width: 1850px; }
.occupancy-rack th:first-child, .occupancy-rack td:first-child { width: 12rem; min-width: 12rem; }
.occupancy-rack th:not(:first-child), .occupancy-rack td:not(:first-child) { width: auto; min-width: 0; }
.occupancy-rack th { padding: .4rem .2rem; }
.occupancy-rack td { padding: .25rem; height: 2.8rem; }
.occupancy-rack td:first-child { padding: .45rem .6rem; }
.occupancy-rack td:first-child > div { min-width: 0; }
.occupancy-rack td:first-child span { overflow: hidden; text-overflow: ellipsis; }

@media (min-width: 900px) { .occupancy-week-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .occupancy-week-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
@media (max-width: 900px) { .occupancy-view-switcher { width: 100%; } }
@media (max-width: 640px) {
    .fi-main { padding-inline: .5rem !important; }
    .fi-page > section { padding-block: .5rem !important; }
    .occupancy-intro { align-items: flex-start; padding: .65rem .75rem; }
    .occupancy-view-switcher button { padding: .45rem .25rem; font-size: .7rem; }
    .occupancy-view-switcher button svg { display: none; }
    .occupancy-week-grid { grid-template-columns: 1fr; }
}

/* Occupancy workspace: the Filament panel does not load the public Tailwind bundle. */
.occupancy-page > section > .fi-header { display: none; }
.occupancy-page > section { padding-top: .5rem !important; }
.occupancy-workspace {
    --oc-surface: #fff;
    --oc-canvas: #f8fafc;
    --oc-border: #e2e8f0;
    --oc-text: #0f172a;
    --oc-muted: #64748b;
    --oc-accent: #047857;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    color: var(--oc-text);
}
html.dark .occupancy-workspace {
    --oc-surface: #171d2b;
    --oc-canvas: #111827;
    --oc-border: #30394b;
    --oc-text: #e8edf5;
    --oc-muted: #a3adbd;
    --oc-accent: #34d399;
}
.occupancy-workspace > * { min-width: 0; }
.occupancy-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem 1rem;
    border: 1px solid var(--oc-border);
    border-radius: .75rem;
    background: var(--oc-surface);
    box-shadow: none;
    color: var(--oc-text);
}
.occupancy-eyebrow { color: var(--oc-accent); margin-bottom: .1rem; font-size: .66rem; letter-spacing: .1em; }
.occupancy-intro h2 { color: var(--oc-text); font-size: 1.35rem; line-height: 1.2; }
.occupancy-intro p { color: var(--oc-muted); font-size: .75rem; }
.occupancy-intro-date { padding: 0; border: 0; background: transparent; text-align: right; }
.occupancy-intro-date span { color: var(--oc-muted); }
.occupancy-intro-date strong { color: var(--oc-text); }
.occupancy-stats { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; }
.occupancy-stats > div,
html.dark .occupancy-stats > div,
.occupancy-stats > div:first-child,
html.dark .occupancy-stats > div:first-child {
    min-width: 0;
    min-height: 5rem;
    padding: .65rem .8rem !important;
    border: 1px solid var(--oc-border) !important;
    border-radius: .7rem !important;
    background: var(--oc-surface) !important;
    color: var(--oc-text) !important;
    box-shadow: none !important;
}
.occupancy-stats > div:first-child > div:first-child > span:first-child,
.occupancy-stats > div:first-child > div:nth-child(2) > span:last-child { color: var(--oc-muted) !important; }
.occupancy-stats > div:first-child > div:nth-child(2) > span:first-child { color: var(--oc-text) !important; }
.occupancy-stats > div .text-2xl { font-size: 1.4rem !important; }
.occupancy-toolbar {
    display: flex !important;
    flex-direction: column;
    gap: .75rem;
    padding: .75rem !important;
    border: 1px solid var(--oc-border) !important;
    border-radius: .75rem !important;
    background: var(--oc-surface) !important;
    box-shadow: none !important;
}
.occupancy-toolbar-top { display: flex !important; align-items: center; justify-content: space-between; gap: 1rem; min-width: 0; }
.occupancy-view-switcher {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    width: min(680px, 100%);
    flex: 0 1 680px;
    gap: .2rem;
    padding: .2rem !important;
    border: 1px solid var(--oc-border) !important;
    border-radius: .55rem !important;
    background: var(--oc-canvas) !important;
}
.occupancy-view-switcher button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-width: 0;
    min-height: 2.4rem;
    padding: .35rem .4rem;
    border-radius: .4rem;
    color: var(--oc-muted) !important;
    font-size: .75rem;
    font-weight: 650;
    white-space: nowrap;
}
.occupancy-view-switcher button svg { flex: none; width: .9rem; height: .9rem; color: currentColor !important; }
.occupancy-view-switcher button:hover { color: var(--oc-text) !important; }
.occupancy-view-switcher button[aria-pressed="true"] { color: var(--oc-accent) !important; background: var(--oc-surface) !important; box-shadow: 0 1px 4px rgba(15, 23, 42, .12); }
.occupancy-period-nav { display: flex !important; align-items: center; justify-content: flex-end; flex: 1 1 auto; flex-wrap: wrap; gap: .35rem; }
.occupancy-period-nav > button { display: grid; place-items: center; flex: none; min-width: 2.3rem; height: 2.3rem; padding: .4rem .6rem; border: 1px solid var(--oc-border); border-radius: .45rem; background: var(--oc-surface); color: var(--oc-text); }
.occupancy-period-nav > button:hover { border-color: var(--oc-accent); }
.occupancy-period-label { display: flex; align-items: center; gap: .5rem; min-width: 0; margin-left: .4rem; color: var(--oc-text); font-size: .85rem; white-space: nowrap; }
.occupancy-period-label input { width: 8.5rem; max-width: 100%; height: 2.3rem; padding: .3rem .5rem; border: 1px solid var(--oc-border); border-radius: .45rem; background: var(--oc-canvas); color: var(--oc-text); }
.occupancy-filter-row {
    display: grid !important;
    grid-template-columns: minmax(14rem, 2fr) minmax(10rem, 1fr) minmax(10rem, 1fr) auto;
    align-items: center;
    gap: .5rem;
    padding-top: .75rem;
    border-top: 1px solid var(--oc-border);
}
.occupancy-filter-row > div { position: relative; min-width: 0; }
.occupancy-filter-search > div { position: absolute; top: 0; bottom: 0; left: 0; display: flex; align-items: center; padding-left: .7rem; pointer-events: none; color: var(--oc-muted); }
.occupancy-filter-row input, .occupancy-filter-row select {
    display: block;
    width: 100%;
    height: 2.4rem;
    padding: .4rem .65rem;
    border: 1px solid var(--oc-border) !important;
    border-radius: .45rem !important;
    background: var(--oc-canvas) !important;
    color: var(--oc-text) !important;
    font-size: .75rem;
}
.occupancy-filter-search input { padding-left: 2.2rem; }
.occupancy-filter-row input::placeholder { color: var(--oc-muted); opacity: .85; }
.occupancy-filter-meta { display: flex; justify-content: flex-end; min-width: 9rem; color: var(--oc-muted); white-space: nowrap; }
.occupancy-filter-meta button { display: inline-flex; align-items: center; gap: .3rem; height: 2.4rem; padding: .4rem .7rem; border: 1px solid var(--oc-border); border-radius: .45rem; background: var(--oc-canvas); color: var(--oc-text); font-size: .75rem; }
.occupancy-legend {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .45rem .7rem !important;
    border: 1px solid var(--oc-border) !important;
    border-radius: .55rem !important;
    background: var(--oc-surface) !important;
    color: var(--oc-muted) !important;
}
.occupancy-legend > div { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem; }
.occupancy-legend > div > div { display: flex; align-items: center; gap: .3rem; }
.occupancy-legend span, .occupancy-legend strong { color: var(--oc-muted) !important; }
.occupancy-legend > div:first-child > div:nth-child(1) > span:first-child { background: #10b981; }
.occupancy-legend > div:first-child > div:nth-child(2) > span:first-child { background: #3b82f6; }
.occupancy-legend > div:first-child > div:nth-child(3) > span:first-child { background: #a855f7; }
.occupancy-legend > div:first-child > div:nth-child(4) > span:first-child { background: #f59e0b; }
.occupancy-legend > div:first-child > div > span:first-child { display: inline-block; flex: none; width: .5rem; height: .5rem; border-radius: 50%; }
.occupancy-month-shell, .occupancy-rack { overflow-x: auto; border: 1px solid var(--oc-border) !important; background: var(--oc-surface) !important; }
.occupancy-month-inner { min-width: 770px; width: 100%; }
.occupancy-month-inner > div:first-child { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--oc-canvas) !important; border-bottom: 1px solid var(--oc-border); color: var(--oc-muted); }
.occupancy-month-inner > div:first-child > div { border-color: var(--oc-border) !important; padding: .6rem .35rem; font-size: .67rem; letter-spacing: .09em; }
.occupancy-month-grid { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--oc-border); border: 0 !important; }
.occupancy-day, html.dark .occupancy-day { display: flex !important; flex-direction: column; justify-content: space-between; min-width: 0; min-height: 7.2rem !important; padding: .55rem !important; border: 0 !important; background: var(--oc-surface) !important; color: var(--oc-text); opacity: 1; }
.occupancy-day.is-outside, html.dark .occupancy-day.is-outside { background: var(--oc-canvas) !important; opacity: .45; }
.occupancy-day.is-today, html.dark .occupancy-day.is-today { box-shadow: inset 0 0 0 2px var(--oc-accent); }
.occupancy-day:hover, html.dark .occupancy-day:hover { background: var(--oc-canvas) !important; }
.occupancy-day > div:first-child > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: .3rem; }
.occupancy-day > div:first-child > div:first-child > div:first-child { display: flex; align-items: center; gap: .35rem; }
.occupancy-day > div:first-child > div:first-child > div:last-child { font-size: .65rem; }
.occupancy-day-footer { display: flex; align-items: center; justify-content: space-between; gap: .3rem; margin-top: .45rem; padding-top: .35rem; border-top: 1px solid var(--oc-border) !important; color: var(--oc-muted) !important; font-size: .65rem; }
.occupancy-day-footer span:last-child { color: var(--oc-text) !important; }
.occupancy-week-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.occupancy-week-day, html.dark .occupancy-week-day { display: flex !important; flex-direction: column; justify-content: space-between; min-width: 0; min-height: 13rem; padding: .75rem !important; border: 1px solid var(--oc-border) !important; border-radius: .65rem; background: var(--oc-surface) !important; color: var(--oc-text); }
.occupancy-week-day > div:first-child > div:first-child { display: flex; justify-content: space-between; align-items: center; gap: .3rem; border-bottom-color: var(--oc-border); }
.occupancy-week-day > div:first-child > div:nth-child(2) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; }
.occupancy-week-day button > div { display: flex; justify-content: space-between; gap: .3rem; }
.occupancy-rack table { border-collapse: separate; border-spacing: 0; }
.occupancy-rack th, html.dark .occupancy-rack th { border-color: var(--oc-border) !important; background: var(--oc-canvas) !important; color: var(--oc-muted); }
.occupancy-rack td { border-color: var(--oc-border) !important; }
.occupancy-rack td:first-child, html.dark .occupancy-rack td:first-child { background: var(--oc-surface) !important; }
.occupancy-rack tbody tr:hover td:first-child, html.dark .occupancy-rack tbody tr:hover td:first-child { background: var(--oc-canvas) !important; }
@media (min-width: 1000px) { .occupancy-week-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1550px) { .occupancy-week-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
@media (max-width: 1280px) {
    .occupancy-toolbar-top { flex-direction: column; align-items: stretch; }
    .occupancy-view-switcher { flex-basis: auto; width: 100%; }
    .occupancy-period-nav { justify-content: flex-start; }
}
@media (max-width: 900px) {
    .occupancy-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .occupancy-filter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .occupancy-filter-search { grid-column: 1 / -1; }
    .occupancy-filter-meta { justify-content: flex-start; }
}
@media (max-width: 640px) {
    .occupancy-intro { align-items: flex-start; flex-direction: column; }
    .occupancy-intro-date { text-align: left; }
    .occupancy-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .occupancy-view-switcher { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .occupancy-view-switcher button { white-space: normal; }
    .occupancy-view-switcher button svg { display: block; }
    .occupancy-filter-row { grid-template-columns: 1fr; }
    .occupancy-filter-search { grid-column: auto; }
    .occupancy-period-nav { justify-content: flex-start; }
    .occupancy-period-label { width: 100%; margin-left: 0; white-space: normal; }
    .occupancy-week-grid { grid-template-columns: 1fr; }
    .occupancy-legend > div:last-child { display: none; }
}
/* Walk-in booking workspace. These rules are loaded by Filament on every admin page. */
.walkin-page > section > .fi-header { display: none; }
.walkin-page > section { padding-top: .5rem !important; }
.walkin-workspace {
    --wi-surface: #fff;
    --wi-canvas: #f8fafc;
    --wi-border: #e2e8f0;
    --wi-text: #0f172a;
    --wi-muted: #64748b;
    --wi-accent: #047857;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    color: var(--wi-text);
}
html.dark .walkin-workspace {
    --wi-surface: #171d2b;
    --wi-canvas: #111827;
    --wi-border: #30394b;
    --wi-text: #e8edf5;
    --wi-muted: #a3adbd;
    --wi-accent: #34d399;
}
.walkin-workspace > * { min-width: 0; }
.walkin-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--wi-border);
    border-radius: .75rem;
    background: var(--wi-surface);
}
.walkin-eyebrow { display: block; color: var(--wi-accent); font-size: .65rem; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.walkin-hero h1 { margin: .15rem 0; color: var(--wi-text); font-size: 1.45rem; font-weight: 700; letter-spacing: -.035em; line-height: 1.2; }
.walkin-hero p { color: var(--wi-muted); font-size: .78rem; }
.walkin-hero-badge { flex: none; padding: .45rem .7rem; border: 1px solid var(--wi-border); border-radius: 999px; background: var(--wi-canvas); color: var(--wi-muted); font-size: .68rem; font-weight: 650; }
.walkin-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem); align-items: start; gap: .75rem; min-width: 0; }
.walkin-main { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.walkin-card, .walkin-summary-card { min-width: 0; border: 1px solid var(--wi-border); border-radius: .75rem; background: var(--wi-surface); box-shadow: 0 1px 2px rgba(15,23,42,.035); }
.walkin-card-header { display: flex; align-items: center; gap: .75rem; padding: .9rem 1rem; border-bottom: 1px solid var(--wi-border); }
.walkin-step { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: .55rem; background: rgba(16,185,129,.1); color: var(--wi-accent); font-size: .72rem; font-weight: 800; }
.walkin-card-header h2, .walkin-summary-header h2 { color: var(--wi-text); font-size: .95rem; font-weight: 700; letter-spacing: -.02em; }
.walkin-card-header p, .walkin-summary-header p { margin-top: .12rem; color: var(--wi-muted); font-size: .72rem; }
.walkin-card-body { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; }
.walkin-stay-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1.3fr)) repeat(3, minmax(5rem, .6fr)); gap: .75rem; }
.walkin-guest-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.walkin-field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.walkin-field-wide { grid-column: 1 / -1; }
.walkin-field label { color: var(--wi-text); font-size: .72rem; font-weight: 650; }
.walkin-field label span { color: #e11d48; }
.walkin-field input, .walkin-field select, .walkin-field textarea {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 2.5rem;
    padding: .55rem .7rem;
    border: 1px solid var(--wi-border);
    border-radius: .5rem;
    background: var(--wi-canvas);
    color: var(--wi-text);
    font-size: .8rem;
    outline: none;
}
.walkin-field textarea { min-height: 4.3rem; resize: vertical; }
.walkin-field :is(input, select, textarea):focus { border-color: var(--wi-accent); box-shadow: 0 0 0 3px rgba(16,185,129,.12); }
.walkin-field input::placeholder { color: var(--wi-muted); }
.walkin-room-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.walkin-room-option { display: flex; align-items: center; gap: .7rem; min-width: 0; min-height: 4rem; padding: .7rem .8rem; border: 1px solid var(--wi-border); border-radius: .55rem; background: var(--wi-canvas); cursor: pointer; transition: border-color .15s, background .15s; }
.walkin-room-option:hover { border-color: var(--wi-accent); }
.walkin-room-option.is-selected { border-color: var(--wi-accent); background: rgba(16,185,129,.07); box-shadow: inset 0 0 0 1px var(--wi-accent); }
.walkin-room-option input { flex: none; width: 1rem; height: 1rem; accent-color: #059669; }
.walkin-room-copy { display: block; flex: 1 1 auto; min-width: 0; }
.walkin-room-copy strong, .walkin-room-copy small, .walkin-room-price small { display: block; }
.walkin-room-copy strong { color: var(--wi-text); font-size: .8rem; font-weight: 700; line-height: 1.3; }
.walkin-room-copy small, .walkin-room-price small { margin-top: .12rem; color: var(--wi-muted); font-size: .69rem; font-weight: 500; }
.walkin-room-price { flex: none; color: var(--wi-text); font-size: .82rem; font-weight: 750; text-align: right; }
.walkin-rate-field { max-width: 30rem; }
.walkin-empty { padding: .8rem 1rem; border: 1px solid #fcd34d; border-radius: .55rem; background: #fffbeb; color: #92400e; font-size: .78rem; }
html.dark .walkin-empty { background: #342715; border-color: #785c27; color: #fcd34d; }
.walkin-error { color: #e11d48; font-size: .7rem; }
.walkin-payment-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
.walkin-paid-option { display: flex; align-items: center; gap: .7rem; min-height: 2.5rem; padding: .5rem .7rem; border: 1px solid var(--wi-border); border-radius: .5rem; background: var(--wi-canvas); cursor: pointer; }
.walkin-paid-option input { flex: none; width: 1rem; height: 1rem; accent-color: #059669; }
.walkin-paid-option strong, .walkin-paid-option small { display: block; }
.walkin-paid-option strong { color: var(--wi-text); font-size: .75rem; }
.walkin-paid-option small { margin-top: .1rem; color: var(--wi-muted); font-size: .68rem; }
.walkin-summary { min-width: 0; position: sticky; top: 5.2rem; }
.walkin-summary-card { overflow: hidden; }
.walkin-summary-header { padding: 1.1rem 1.1rem .9rem; border-bottom: 1px solid var(--wi-border); }
.walkin-summary-header h2 { margin-top: .3rem; font-size: 1.05rem; }
.walkin-summary-body { display: flex; flex-direction: column; gap: .85rem; padding: 1.1rem; }
.walkin-summary-row { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-size: .78rem; }
.walkin-summary-row span { color: var(--wi-muted); }
.walkin-summary-row strong { color: var(--wi-text); font-weight: 650; text-align: right; }
.walkin-total { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-top: .2rem; padding-top: 1rem; border-top: 1px solid var(--wi-border); }
.walkin-total span { color: var(--wi-text); font-size: .82rem; font-weight: 700; }
.walkin-total strong { color: var(--wi-accent); font-size: 1.45rem; font-weight: 750; letter-spacing: -.035em; white-space: nowrap; }
.walkin-submit { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 2.8rem; padding: .65rem .85rem; border: 1px solid #047857; border-radius: .5rem; background: #047857; color: white; font-size: .82rem; font-weight: 750; cursor: pointer; }
.walkin-submit:hover { background: #065f46; }
.walkin-submit:disabled { opacity: .6; cursor: wait; }
.walkin-submit:focus-visible, .walkin-room-option:focus-within, .walkin-paid-option:focus-within { outline: 2px solid var(--wi-accent); outline-offset: 2px; }
.walkin-summary-note { color: var(--wi-muted); font-size: .7rem; text-align: center; }
.walkin-summary-empty { padding: 1.5rem 1.1rem; color: var(--wi-muted); font-size: .78rem; line-height: 1.5; }
@media (max-width: 1200px) { .walkin-layout { grid-template-columns: minmax(0, 1fr) minmax(16rem, 19rem); } .walkin-stay-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 950px) { .walkin-layout { grid-template-columns: 1fr; } .walkin-summary { position: static; } .walkin-summary-card { display: grid; grid-template-columns: minmax(12rem, .7fr) minmax(0, 1.3fr); } .walkin-summary-header { border-bottom: 0; border-right: 1px solid var(--wi-border); } }
@media (max-width: 640px) { .walkin-hero { align-items: flex-start; flex-direction: column; } .walkin-room-grid, .walkin-guest-grid, .walkin-payment-row { grid-template-columns: 1fr; } .walkin-stay-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .walkin-summary-card { display: block; } .walkin-summary-header { border-right: 0; border-bottom: 1px solid var(--wi-border); } }
/* Hotel settings, including gateway setup, in both panel themes. */
.hotel-settings-page > section > .fi-header { display: none; }
.hotel-settings-page > section { padding-top: .5rem !important; }
.hotel-settings-workspace {
    --hs-surface: #fff;
    --hs-canvas: #f8fafc;
    --hs-border: #e2e8f0;
    --hs-text: #0f172a;
    --hs-muted: #64748b;
    --hs-accent: #047857;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    color: var(--hs-text);
    min-width: 0;
}
html.dark .hotel-settings-workspace {
    --hs-surface: #171d2b;
    --hs-canvas: #111827;
    --hs-border: #30394b;
    --hs-text: #e8edf5;
    --hs-muted: #a3adbd;
    --hs-accent: #34d399;
}
.hotel-settings-workspace > * { min-width: 0; }
.hotel-settings-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--hs-border);
    border-radius: .75rem;
    background: var(--hs-surface);
}
.hotel-settings-eyebrow { display: block; margin-bottom: .15rem; color: var(--hs-accent); font-size: .65rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.hotel-settings-hero h1 { color: var(--hs-text); font-size: 1.45rem; font-weight: 700; letter-spacing: -.035em; line-height: 1.2; }
.hotel-settings-hero p { margin-top: .2rem; color: var(--hs-muted); font-size: .78rem; }
.hotel-settings-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-height: 2.45rem;
    padding: .55rem .9rem;
    border: 1px solid #047857;
    border-radius: .5rem;
    background: #047857;
    color: white;
    font-size: .78rem;
    font-weight: 750;
    cursor: pointer;
}
.hotel-settings-save:hover { background: #065f46; }
.hotel-settings-save:disabled { opacity: .6; cursor: wait; }
.hotel-settings-save:focus-visible, .hotel-settings-tab:focus-visible { outline: 2px solid var(--hs-accent); outline-offset: 3px; }
.hotel-settings-tabs {
    display: flex;
    align-items: center;
    gap: .2rem;
    min-height: 3.35rem;
    padding: .3rem;
    overflow-x: auto;
    scrollbar-width: thin;
    border: 1px solid var(--hs-border);
    border-radius: .7rem;
    background: var(--hs-surface);
}
.hotel-settings-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 0 auto;
    min-height: 2.55rem;
    padding: .5rem .8rem;
    border-radius: .45rem;
    color: var(--hs-muted);
    font-size: .75rem;
    font-weight: 650;
    white-space: nowrap;
}
.hotel-settings-tab:hover { background: var(--hs-canvas); color: var(--hs-text); }
.hotel-settings-tab.is-active { background: rgba(16,185,129,.11); color: var(--hs-accent); }
.hotel-settings-form { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.hotel-settings-panel { min-width: 0; }
.settings-panel { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; min-width: 0; }
.settings-panel[x-data], .settings-panel:has(> div:only-child) { grid-template-columns: minmax(0, 1fr); }
.settings-panel > div,
.settings-panel[x-data] [x-show],
.settings-panel[x-data] > div:first-child,
.settings-panel[x-data] > div:last-child > [x-show] {
    min-width: 0;
    padding: 1rem !important;
    border: 1px solid var(--hs-border) !important;
    border-radius: .7rem !important;
    background: var(--hs-surface) !important;
    box-shadow: none !important;
}
.settings-panel > div { display: flex; flex-direction: column; gap: .9rem; }
.settings-panel[x-data] > div:nth-child(2), .settings-panel[x-data] > div:nth-child(3) { padding: 0 !important; border: 0 !important; background: transparent !important; }
.settings-panel [class*="space-y-"] > * + * { margin-top: .7rem; }
.settings-panel .grid:not(.hs-upload-grid):not(.hs-split-grid) { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.settings-panel .grid.hs-upload-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 1.25rem !important; }
.settings-panel .grid.hs-split-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1.5rem !important; }
@media (max-width: 1024px) { .settings-panel .grid.hs-upload-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 680px) { .settings-panel .grid.hs-upload-grid, .settings-panel .grid.hs-split-grid { grid-template-columns: minmax(0, 1fr) !important; } }
.settings-panel h3, .settings-panel h4, .settings-panel h5 { color: var(--hs-text) !important; font-family: var(--font-sans) !important; letter-spacing: -.015em !important; text-transform: none !important; }
.settings-panel h3 { display: flex; align-items: center; gap: .5rem; font-size: .92rem !important; font-weight: 700; }
.settings-panel h4 { font-size: .82rem !important; }
.settings-panel h5 { font-size: .82rem !important; }
.settings-panel h3 svg, .settings-panel h4 svg { color: var(--hs-accent) !important; }
.settings-panel p { color: var(--hs-muted) !important; }
.settings-panel label { color: var(--hs-text) !important; font-size: .72rem !important; font-weight: 650 !important; letter-spacing: 0 !important; text-transform: none !important; }
.settings-panel label > span { color: var(--hs-text); }
.settings-panel input[type="file"] { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; opacity: 0 !important; }
.settings-panel :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 2.45rem;
    padding: .5rem .7rem;
    border: 1px solid var(--hs-border) !important;
    border-radius: .5rem !important;
    background: var(--hs-canvas) !important;
    color: var(--hs-text) !important;
    font-size: .8rem !important;
    outline: none;
    box-shadow: none !important;
}
.settings-panel textarea { min-height: 5.5rem; resize: vertical; }
.settings-panel :is(input, select, textarea, button):focus-visible { outline: 2px solid var(--hs-accent) !important; outline-offset: 2px; }
.settings-panel :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus { border-color: var(--hs-accent) !important; box-shadow: 0 0 0 3px rgba(16,185,129,.12) !important; }
.settings-panel :is(input[type="checkbox"], input[type="radio"]) { accent-color: #059669; }
.settings-panel button { color: var(--hs-text); }
.settings-panel button:hover { color: var(--hs-accent); }
.settings-panel[x-data] > div:first-child { background: var(--hs-canvas) !important; }
.settings-panel[x-data] > div:first-child label { background: var(--hs-surface) !important; border-color: var(--hs-border) !important; }
.settings-panel[x-data] input.peer + div { position: relative; flex: none; width: 2.75rem; height: 1.5rem; border-radius: 999px; background: var(--hs-border) !important; }
.settings-panel[x-data] input.peer + div::after { position: absolute; top: .16rem; left: .16rem; width: 1.18rem; height: 1.18rem; border: 0; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgba(15,23,42,.22); content: ''; transition: transform .18s; }
.settings-panel[x-data] input.peer:checked + div { background: #047857 !important; }
.settings-panel[x-data] input.peer:checked + div::after { transform: translateX(1.24rem); }
.settings-panel[x-data] input.peer:focus-visible + div { outline: 2px solid var(--hs-accent); outline-offset: 2px; }
.settings-panel[x-data] [wire\:click^="setPaymentGateway"] {
    min-height: 10rem;
    padding: 1rem !important;
    border: 1px solid var(--hs-border) !important;
    border-radius: .7rem !important;
    background: var(--hs-surface) !important;
    box-shadow: none !important;
}
.settings-panel[x-data] [wire\:click^="setPaymentGateway"]:hover { border-color: var(--hs-accent) !important; }
.settings-panel[x-data] [wire\:click^="setPaymentGateway"][class~="border-amber-500"] { border-color: var(--hs-accent) !important; background: rgba(16,185,129,.07) !important; }
.settings-panel[x-data] [wire\:click^="setPaymentGateway"] span[class*="bg-amber-500"] { background: #047857 !important; color: #fff !important; }
.settings-panel[x-data] > div:last-child > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.settings-panel[x-data] > div:last-child > div:first-child > div:last-child { display: flex; gap: .2rem; padding: .2rem; border: 1px solid var(--hs-border); border-radius: .5rem; background: var(--hs-canvas); }
.settings-panel[x-data] > div:last-child > div:first-child button { min-height: 2.2rem; padding: .4rem .65rem; border-radius: .4rem; color: var(--hs-text); font-size: .72rem; }
.settings-panel[x-data] > div:last-child > [x-show] { margin-top: .75rem; }
.settings-panel [class*="bg-gradient"] { background-image: none !important; }
.hotel-settings-actions {
    position: sticky;
    bottom: .5rem;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem .9rem;
    border: 1px solid var(--hs-border);
    border-radius: .65rem;
    background: var(--hs-surface);
    box-shadow: 0 6px 24px rgba(15,23,42,.08);
}
.hotel-settings-actions p { color: var(--hs-muted); font-size: .74rem; }
@media (min-width: 768px) { .settings-panel .grid[class*="md:grid-cols-2"], .settings-panel .grid[class*="grid-cols-2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .settings-panel .grid[class*="xl:grid-cols-4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) { .hotel-settings-tab { flex: 0 0 auto; } .settings-panel { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .hotel-settings-hero { align-items: flex-start; flex-direction: column; } .hotel-settings-actions { align-items: stretch; flex-direction: column; } .hotel-settings-actions .hotel-settings-save { width: 100%; } .settings-panel .grid[class*="grid-cols-2"] { grid-template-columns: minmax(0, 1fr); } }

/* Elevated payment provider workspace. */
.payment-settings-panel { display: flex !important; flex-direction: column; gap: 1.5rem !important; }
.payment-settings-panel > .payment-environment-card {
    position: relative;
    display: block;
    overflow: hidden;
    padding: 1.35rem 1.5rem !important;
    border-radius: 1rem !important;
    background: linear-gradient(120deg, #fff 0%, #fffbeb 58%, #f8fafc 100%) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06) !important;
}
.payment-settings-panel > .payment-environment-card::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: .28rem;
    background: #f59e0b;
    content: '';
}
.payment-settings-panel > .payment-environment-card.is-live { background: linear-gradient(120deg, #fff 0%, #ecfdf5 58%, #f8fafc 100%) !important; }
.payment-settings-panel > .payment-environment-card.is-live::before { background: #10b981; }
html.dark .payment-settings-panel > .payment-environment-card { background: linear-gradient(120deg, #171d2b 0%, #292415 58%, #111827 100%) !important; }
html.dark .payment-settings-panel > .payment-environment-card.is-live { background: linear-gradient(120deg, #171d2b 0%, #0c2a22 58%, #111827 100%) !important; }
.payment-provider-section {
    padding: 1.5rem;
    border: 1px solid var(--hs-border);
    border-radius: 1rem;
    background: var(--hs-surface);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .055);
}
.payment-section-kicker {
    color: var(--hs-accent);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.payment-active-provider {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .48rem .75rem;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    background: #f0fdf4;
    color: #166534;
    font-size: .7rem;
    white-space: nowrap;
}
html.dark .payment-active-provider { border-color: rgba(52, 211, 153, .25); background: rgba(16, 185, 129, .1); color: #6ee7b7; }
.payment-active-provider-dot { width: .45rem; height: .45rem; border-radius: 999px; background: #10b981; box-shadow: 0 0 0 .22rem rgba(16, 185, 129, .13); }
.payment-gateway-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1rem !important; }
.payment-gateway-card {
    --provider: #64748b;
    --provider-soft: #f1f5f9;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 15rem;
    overflow: hidden;
    padding: 1.25rem !important;
    border: 1px solid var(--hs-border) !important;
    border-radius: .95rem !important;
    background: var(--hs-surface) !important;
    box-shadow: 0 5px 18px rgba(15, 23, 42, .045) !important;
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.payment-gateway-card::before {
    position: absolute;
    inset: 0 0 auto;
    height: .24rem;
    background: var(--provider);
    opacity: .72;
    content: '';
}
.payment-gateway-card::after {
    position: absolute;
    top: -4rem;
    right: -4rem;
    width: 10rem;
    height: 10rem;
    border-radius: 999px;
    background: var(--provider-soft);
    opacity: .55;
    content: '';
    pointer-events: none;
}
.payment-gateway-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--provider) 45%, var(--hs-border)) !important; box-shadow: 0 16px 34px rgba(15, 23, 42, .1) !important; }
.payment-gateway-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--provider) 25%, transparent) !important; outline-offset: 3px; }
.payment-gateway-card.is-active { border-color: var(--provider) !important; background: linear-gradient(145deg, var(--hs-surface) 62%, var(--provider-soft)) !important; box-shadow: 0 14px 32px color-mix(in srgb, var(--provider) 16%, transparent) !important; }
.payment-gateway-card--razorpay { --provider: #2563eb; --provider-soft: #eff6ff; }
.payment-gateway-card--stripe { --provider: #635bff; --provider-soft: #f1f0ff; }
.payment-gateway-card--offline { --provider: #059669; --provider-soft: #ecfdf5; }
.payment-gateway-card--sandbox { --provider: #9333ea; --provider-soft: #faf5ff; }
html.dark .payment-gateway-card { --provider-soft: rgba(255, 255, 255, .035); }
.payment-gateway-card > * { position: relative; z-index: 1; }
.payment-provider-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    border: 1px solid color-mix(in srgb, var(--provider) 24%, transparent);
    border-radius: .8rem;
    background: color-mix(in srgb, var(--provider) 10%, white);
    color: var(--provider);
    font-size: 1rem;
    font-weight: 850;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--provider) 10%, transparent);
}
html.dark .payment-provider-logo { background: color-mix(in srgb, var(--provider) 18%, #171d2b); }
.payment-gateway-card.is-active span[class*="bg-amber-500"] { background: var(--provider) !important; color: #fff !important; }

/* Payment credentials modal. */
.payment-setup-modal { --pm-border: #e2e8f0; --pm-muted: #64748b; --pm-text: #0f172a; color: var(--pm-text); }
html.dark .payment-setup-modal { --pm-border: #334155; --pm-muted: #94a3b8; --pm-text: #f8fafc; }
.payment-setup-hero {
    --modal-provider: #2563eb;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid color-mix(in srgb, var(--modal-provider) 20%, var(--pm-border));
    border-radius: 1rem;
    background: linear-gradient(120deg, color-mix(in srgb, var(--modal-provider) 10%, white), #fff 65%);
}
.payment-setup-hero.is-stripe { --modal-provider: #635bff; }
html.dark .payment-setup-hero { background: linear-gradient(120deg, color-mix(in srgb, var(--modal-provider) 16%, #171d2b), #171d2b 65%); }
.payment-setup-brandmark { display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; flex: none; border-radius: 1rem; background: var(--modal-provider); color: white; font-size: 1.25rem; font-weight: 850; box-shadow: 0 10px 22px color-mix(in srgb, var(--modal-provider) 26%, transparent); }
.payment-modal-kicker { color: var(--modal-provider); font-size: .62rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.payment-setup-hero h2 { margin-top: .2rem; color: var(--pm-text); font-size: 1.35rem; font-weight: 750; letter-spacing: -.025em; }
.payment-setup-hero p { margin-top: .15rem; color: var(--pm-muted); font-size: .75rem; line-height: 1.5; }
.payment-connected-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .48rem; border-radius: 999px; background: #dcfce7; color: #166534; font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.payment-connected-badge > span { width: .35rem; height: .35rem; border-radius: 50%; background: #22c55e; }
.payment-security-seal { display: flex; align-items: center; gap: .35rem; flex: none; padding: .45rem .6rem; border: 1px solid var(--pm-border); border-radius: .65rem; background: rgba(255, 255, 255, .72); color: var(--pm-muted); font-size: .66rem; font-weight: 700; }
html.dark .payment-security-seal { background: rgba(15, 23, 42, .4); }
.payment-security-seal svg { width: 1rem; height: 1rem; color: #059669; }
.payment-modal-steps { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: .65rem !important; margin-top: 1rem; }
.payment-modal-step { display: flex; align-items: center; gap: .65rem; padding: .7rem .8rem; border: 1px solid var(--pm-border); border-radius: .75rem; background: #f8fafc; }
html.dark .payment-modal-step { background: rgba(15, 23, 42, .45); }
.payment-modal-step > span { display: flex; align-items: center; justify-content: center; width: 1.65rem; height: 1.65rem; flex: none; border-radius: 50%; background: #047857; color: #fff; font-size: .68rem; font-weight: 800; }
.payment-modal-step strong, .payment-modal-step small { display: block; }
.payment-modal-step strong { color: var(--pm-text); font-size: .69rem; }
.payment-modal-step small { margin-top: .08rem; color: var(--pm-muted); font-size: .58rem; }
.payment-modal-body { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(15rem, .75fr); gap: 1rem; margin-top: 1rem; }
.payment-credential-section, .payment-activation-summary { padding: 1.05rem; border: 1px solid var(--pm-border); border-radius: .9rem; }
.payment-modal-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--pm-border); }
.payment-modal-section-heading span, .payment-summary-heading span { display: block; color: #047857; font-size: .59rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.payment-modal-section-heading h3 { margin-top: .15rem; color: var(--pm-text); font-size: .9rem; font-weight: 750; }
.payment-modal-section-heading p { max-width: 13rem; color: var(--pm-muted); font-size: .62rem; line-height: 1.45; text-align: right; }
.payment-credential-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; margin-top: .9rem; }
.payment-field-wide { grid-column: 1 / -1; }
.payment-field label { display: flex; align-items: center; justify-content: space-between; margin-bottom: .38rem; color: var(--pm-text); font-size: .68rem; font-weight: 700; }
.payment-field label em { padding: .12rem .35rem; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: .52rem; font-style: normal; text-transform: uppercase; }
.payment-field input { width: 100%; min-height: 2.65rem; padding: .6rem .72rem; border: 1px solid var(--pm-border); border-radius: .62rem; background: #f8fafc; color: var(--pm-text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; outline: none; transition: border-color .15s, box-shadow .15s, background .15s; }
html.dark .payment-field input { background: rgba(15, 23, 42, .5); }
.payment-field input:focus { border-color: #10b981; background: #fff; box-shadow: 0 0 0 3px rgba(16, 185, 129, .12); }
html.dark .payment-field input:focus { background: #111827; }
.payment-field > small { display: block; margin-top: .3rem; color: var(--pm-muted); font-size: .57rem; line-height: 1.35; }
.payment-field-error, .payment-confirmation-error { margin-top: .28rem; color: #dc2626; font-size: .62rem; }
.payment-activation-summary { background: #f8fafc; }
html.dark .payment-activation-summary { background: rgba(15, 23, 42, .42); }
.payment-summary-heading { padding-bottom: .7rem; border-bottom: 1px solid var(--pm-border); }
.payment-summary-heading strong { display: block; margin-top: .15rem; color: var(--pm-text); font-size: .86rem; }
.payment-summary-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .62rem 0; border-bottom: 1px solid var(--pm-border); font-size: .65rem; }
.payment-summary-row span { color: var(--pm-muted); }
.payment-summary-row strong { max-width: 9rem; overflow: hidden; color: var(--pm-text); text-overflow: ellipsis; white-space: nowrap; }
.payment-summary-row strong.is-sandbox { color: #b45309; }
.payment-summary-row strong.is-live { color: #047857; }
.payment-webhook-card { margin-top: .8rem; padding: .7rem; border: 1px solid var(--pm-border); border-radius: .68rem; background: var(--hs-surface, #fff); }
.payment-webhook-card > div { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.payment-webhook-card span { color: var(--pm-muted); font-size: .57rem; font-weight: 700; text-transform: uppercase; }
.payment-webhook-card button { padding: .22rem .42rem; border-radius: .4rem; background: #ecfdf5; color: #047857; font-size: .57rem; font-weight: 750; }
.payment-webhook-card code { display: block; margin-top: .5rem; overflow-wrap: anywhere; color: var(--pm-text); font-size: .56rem; line-height: 1.45; }
.payment-security-note { display: flex; align-items: flex-start; gap: .5rem; margin-top: .75rem; color: var(--pm-muted); font-size: .58rem; line-height: 1.45; }
.payment-security-note svg { width: .95rem; height: .95rem; flex: none; color: #059669; }
.payment-activation-confirmation { display: flex; align-items: flex-start; gap: .7rem; margin-top: 1rem; padding: .8rem .9rem; border: 1px solid var(--pm-border); border-radius: .75rem; cursor: pointer; transition: border-color .15s, background .15s; }
.payment-activation-confirmation:hover { border-color: #6ee7b7; background: #f0fdf4; }
html.dark .payment-activation-confirmation:hover { background: rgba(16, 185, 129, .07); }
.payment-activation-confirmation input { margin-top: .12rem; accent-color: #059669; }
.payment-activation-confirmation span { color: var(--pm-muted); font-size: .64rem; line-height: 1.45; }
.payment-activation-confirmation strong { display: block; margin-bottom: .1rem; color: var(--pm-text); font-size: .7rem; }
.payment-modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: .65rem; width: 100%; }

@media (max-width: 900px) {
    .payment-modal-body { grid-template-columns: minmax(0, 1fr); }
    .payment-gateway-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 640px) {
    .payment-provider-section { padding: 1rem; }
    .payment-setup-hero { align-items: flex-start; padding: 1rem; }
    .payment-security-seal { display: none; }
    .payment-modal-steps { grid-template-columns: minmax(0, 1fr) !important; }
    .payment-credential-grid { grid-template-columns: minmax(0, 1fr); }
    .payment-field-wide { grid-column: auto; }
    .payment-modal-section-heading { align-items: flex-start; flex-direction: column; }
    .payment-modal-section-heading p { max-width: none; text-align: left; }
}
/* Notification channels and delivery tester. */
.notification-settings-page > section > .fi-header { display: none; }
.notification-settings-page > section { padding-top: .5rem !important; }
.notification-settings-workspace {
    --ns-surface: #fff;
    --ns-canvas: #f8fafc;
    --ns-border: #e2e8f0;
    --ns-text: #0f172a;
    --ns-muted: #64748b;
    --ns-accent: #047857;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-width: 0;
    color: var(--ns-text);
}
html.dark .notification-settings-workspace {
    --ns-surface: #171d2b;
    --ns-canvas: #111827;
    --ns-border: #30394b;
    --ns-text: #e8edf5;
    --ns-muted: #a3adbd;
    --ns-accent: #34d399;
}
.notification-settings-workspace > * { min-width: 0; }
.notification-settings-hero { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border: 1px solid var(--ns-border); border-radius: .75rem; background: var(--ns-surface); }
.notification-settings-eyebrow { display: block; margin-bottom: .15rem; color: var(--ns-accent); font-size: .65rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.notification-settings-hero h1 { color: var(--ns-text); font-size: 1.45rem; font-weight: 700; letter-spacing: -.035em; line-height: 1.2; }
.notification-settings-hero p { margin-top: .2rem; color: var(--ns-muted); font-size: .78rem; }
.notification-settings-save, .notification-tab-tester button[wire\:click="sendTestMessage"] { display: inline-flex; align-items: center; justify-content: center; flex: none; min-height: 2.45rem; padding: .55rem .9rem; border: 1px solid #047857; border-radius: .5rem; background: #047857 !important; background-image: none !important; color: #fff !important; font-size: .78rem; font-weight: 750; box-shadow: none !important; cursor: pointer; }
.notification-settings-save:hover, .notification-tab-tester button[wire\:click="sendTestMessage"]:hover { background: #065f46 !important; }
.notification-settings-save:disabled, .notification-tab-tester button[wire\:click="sendTestMessage"]:disabled { opacity: .6; cursor: wait; }
.notification-settings-save:focus-visible, .notification-settings-tab:focus-visible { outline: 2px solid var(--ns-accent); outline-offset: 3px; }
.notification-mode { display: flex; align-items: center; gap: .8rem; padding: .75rem 1rem; border: 1px solid var(--ns-border); border-radius: .7rem; background: var(--ns-surface); }
.notification-mode-icon { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: .5rem; background: rgba(245,158,11,.12); color: #b45309; font-size: .7rem; font-weight: 800; }
.notification-mode.is-live .notification-mode-icon { background: rgba(16,185,129,.12); color: var(--ns-accent); }
.notification-mode-copy { flex: 1 1 auto; min-width: 0; }
.notification-mode-copy strong { color: var(--ns-text); font-size: .8rem; }
.notification-mode-copy p { margin-top: .12rem; color: var(--ns-muted); font-size: .72rem; }
.notification-mode-toggle { display: inline-flex; align-items: center; gap: .45rem; flex: none; padding: .4rem .6rem; border: 1px solid var(--ns-border); border-radius: .45rem; background: var(--ns-canvas); color: var(--ns-text); font-size: .73rem; font-weight: 650; cursor: pointer; }
.notification-mode-toggle input, .notification-tab input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: #059669; }
.notification-settings-tabs { display: flex; align-items: center; gap: .2rem; min-height: 3.35rem; padding: .3rem; overflow-x: auto; scrollbar-width: thin; border: 1px solid var(--ns-border); border-radius: .7rem; background: var(--ns-surface); }
.notification-settings-tab { display: inline-flex; align-items: center; justify-content: center; flex: 1 0 auto; min-height: 2.55rem; padding: .5rem .8rem; border-radius: .45rem; color: var(--ns-muted); font-size: .75rem; font-weight: 650; white-space: nowrap; }
.notification-settings-tab:hover { background: var(--ns-canvas); color: var(--ns-text); }
.notification-settings-tab.is-active { background: rgba(16,185,129,.11); color: var(--ns-accent); }
.notification-settings-panel { min-width: 0; }
.notification-tab { min-width: 0; }
.notification-tab-channels, .notification-tab-whatsapp, .notification-tab-sms > .grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.notification-tab-channels > div, .notification-tab-whatsapp > div, .notification-tab-sms > .grid > div, .notification-tab-tester { min-width: 0; padding: 1rem !important; border: 1px solid var(--ns-border) !important; border-radius: .7rem !important; background: var(--ns-surface) !important; box-shadow: none !important; }
.notification-tab-channels > div, .notification-tab-whatsapp > div, .notification-tab-sms > .grid > div { display: flex; flex-direction: column; gap: .9rem; }
.notification-tab :is(h3,h4) { color: var(--ns-text) !important; font-family: var(--font-sans) !important; letter-spacing: -.015em; }
.notification-tab h3 { font-size: .92rem !important; font-weight: 700; }
.notification-tab p { color: var(--ns-muted) !important; }
.notification-tab label { color: var(--ns-text) !important; font-size: .72rem !important; font-weight: 650 !important; letter-spacing: 0 !important; text-transform: none !important; }
.notification-tab label > span { color: var(--ns-text); }
.notification-tab :is(input:not([type="checkbox"]), select, textarea) { display: block; width: 100%; min-width: 0; min-height: 2.45rem; padding: .5rem .7rem; border: 1px solid var(--ns-border) !important; border-radius: .5rem !important; background: var(--ns-canvas) !important; color: var(--ns-text) !important; font-size: .8rem !important; outline: none; box-shadow: none !important; }
.notification-tab :is(input, select, textarea):focus { border-color: var(--ns-accent) !important; box-shadow: 0 0 0 3px rgba(16,185,129,.12) !important; }
.notification-tab :is(input, select, textarea, button):focus-visible { outline: 2px solid var(--ns-accent) !important; outline-offset: 2px; }
.notification-tab input::placeholder { color: var(--ns-muted); opacity: .75; }
.notification-tab code { display: block; overflow-wrap: anywhere; color: var(--ns-accent) !important; font-size: .75rem; }
.notification-tab [class*="bg-gray-50"], html.dark .notification-tab [class*="dark:bg-slate-950"] { background: var(--ns-canvas) !important; border-color: var(--ns-border) !important; }
.notification-tab-tester { display: grid !important; grid-template-columns: minmax(14rem, .75fr) minmax(0, 1.25fr); align-items: center; gap: 1.5rem; width: 100%; max-width: none !important; margin: 0 !important; }
.notification-tab-tester > div:first-child { text-align: left; }
.notification-tab-tester > div:first-child > div:first-child { margin: 0 0 .75rem; }
.notification-tab-tester > div:last-child { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.notification-tab-tester > div:last-child > div { min-width: 0; }
.notification-tab-tester button[wire\:click="sendTestMessage"] { display: flex; width: 100%; gap: .45rem; }
.notification-settings-actions { position: sticky; bottom: .5rem; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .9rem; border: 1px solid var(--ns-border); border-radius: .65rem; background: var(--ns-surface); box-shadow: 0 6px 24px rgba(15,23,42,.08); }
.notification-settings-actions p { color: var(--ns-muted); font-size: .74rem; }
@media (max-width: 900px) { .notification-settings-tab { flex: 0 0 auto; } .notification-tab-tester { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .notification-settings-hero { align-items: flex-start; flex-direction: column; } .notification-mode { align-items: flex-start; flex-wrap: wrap; } .notification-mode-toggle { margin-left: 2.8rem; } .notification-tab-channels, .notification-tab-whatsapp, .notification-tab-sms > .grid { grid-template-columns: minmax(0, 1fr); } .notification-settings-actions { align-items: stretch; flex-direction: column; } .notification-settings-actions .notification-settings-save { width: 100%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
/* Reports workspace. */
.reports-page > section > .fi-header { display: none; }
.reports-page > section { padding-top: .5rem !important; }
.reports-workspace {
    --rp-surface: #fff;
    --rp-canvas: #f8fafc;
    --rp-border: #e2e8f0;
    --rp-text: #0f172a;
    --rp-muted: #64748b;
    --rp-accent: #047857;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-width: 0;
    color: var(--rp-text);
}
html.dark .reports-workspace {
    --rp-surface: #171d2b;
    --rp-canvas: #111827;
    --rp-border: #30394b;
    --rp-text: #e8edf5;
    --rp-muted: #a3adbd;
    --rp-accent: #34d399;
}
.reports-workspace > * { min-width: 0; }
.reports-hero, .reports-period, .reports-metric, .reports-performance { border: 1px solid var(--rp-border); border-radius: .7rem; background: var(--rp-surface); }
.reports-hero { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1rem 1.25rem; }
.reports-eyebrow { display: block; margin-bottom: .15rem; color: var(--rp-accent); font-size: .65rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.reports-hero h1 { color: var(--rp-text); font-size: 1.45rem; font-weight: 700; letter-spacing: -.035em; line-height: 1.2; }
.reports-hero p, .reports-section-intro p, .reports-performance-heading p { margin-top: .2rem; color: var(--rp-muted); font-size: .78rem; }
.reports-export { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; flex: none; min-height: 2.45rem; padding: .55rem .9rem; border: 1px solid #047857; border-radius: .5rem; background: #047857; color: #fff; font-size: .78rem; font-weight: 750; cursor: pointer; }
.reports-export:hover { background: #065f46; }
.reports-export:disabled { opacity: .6; cursor: wait; }
.reports-export svg { width: 1rem; height: 1rem; }
.reports-export:focus-visible, .reports-field input:focus-visible { outline: 2px solid var(--rp-accent); outline-offset: 2px; }
.reports-period { display: flex; align-items: end; justify-content: space-between; gap: 1.25rem; padding: .9rem 1.25rem; }
.reports-section-intro h2, .reports-performance-heading h2 { color: var(--rp-text); font-size: .92rem; font-weight: 700; letter-spacing: -.015em; }
.reports-date-fields { display: flex; align-items: end; gap: .6rem; }
.reports-field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.reports-field label { color: var(--rp-muted); font-size: .68rem; font-weight: 700; }
.reports-field input { width: 10.5rem; max-width: 100%; min-height: 2.3rem; padding: .4rem .65rem; border: 1px solid var(--rp-border); border-radius: .45rem; background: var(--rp-canvas); color: var(--rp-text); font-size: .78rem; color-scheme: light; }
html.dark .reports-field input { color-scheme: dark; }
.reports-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.reports-metric { display: flex; flex-direction: column; align-items: flex-start; gap: .65rem; min-width: 0; min-height: 8.5rem; padding: 1rem 1.15rem; }
.reports-metric-primary { border-color: color-mix(in srgb, var(--rp-accent) 35%, var(--rp-border)); }
.reports-metric-label { color: var(--rp-muted); font-size: .72rem; font-weight: 650; }
.reports-metric strong { max-width: 100%; overflow-wrap: anywhere; color: var(--rp-text); font-size: clamp(1.3rem, 2vw, 1.8rem); font-weight: 750; letter-spacing: -.04em; line-height: 1.1; }
.reports-metric-primary strong { color: var(--rp-accent); }
.reports-metric-detail { margin-top: auto; color: var(--rp-muted); font-size: .7rem; }
.reports-performance { overflow: hidden; }
.reports-performance-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.15rem; border-bottom: 1px solid var(--rp-border); }
.reports-performance-count { flex: none; padding: .3rem .55rem; border-radius: .35rem; background: var(--rp-canvas); color: var(--rp-muted); font-size: .68rem; font-weight: 700; }
.reports-table-scroll { width: 100%; overflow-x: auto; }
.reports-table { width: 100%; min-width: 660px; border-collapse: collapse; text-align: left; font-size: .78rem; }
.reports-table th, .reports-table td { padding: .8rem 1.15rem; border-bottom: 1px solid var(--rp-border); }
.reports-table thead { background: var(--rp-canvas); }
.reports-table thead th { color: var(--rp-muted); font-size: .65rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.reports-table tbody th { color: var(--rp-text); font-weight: 700; }
.reports-table tbody td { color: var(--rp-muted); font-variant-numeric: tabular-nums; }
.reports-table tbody tr:last-child th, .reports-table tbody tr:last-child td { border-bottom: 0; }
.reports-table tbody tr:hover { background: var(--rp-canvas); }
.reports-table th:last-child, .reports-table td:last-child { text-align: right; }
.reports-table .reports-revenue { color: var(--rp-text); font-weight: 700; }
.reports-table .reports-empty { padding: 2rem 1rem; color: var(--rp-muted); text-align: center; }
@media (max-width: 1100px) { .reports-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .reports-hero, .reports-period { align-items: stretch; flex-direction: column; } .reports-export { width: 100%; } .reports-date-fields { width: 100%; } .reports-field { flex: 1 1 0; } .reports-field input { width: 100%; } }
@media (max-width: 520px) { .reports-metrics { grid-template-columns: minmax(0, 1fr); } .reports-metric { min-height: 7rem; } .reports-performance-heading { align-items: flex-start; flex-direction: column; } }

/* Admin authentication landing page. */
.fi-simple-layout:has(.admin-login-intro) {
    position: relative;
    overflow: hidden;
    padding: 1.5rem;
    background:
        radial-gradient(circle at 8% 12%, rgba(16, 185, 129, .16), transparent 28rem),
        radial-gradient(circle at 92% 88%, rgba(59, 130, 246, .09), transparent 26rem),
        #eef2f1 !important;
}
.fi-simple-layout:has(.admin-login-intro)::before {
    position: absolute;
    inset: 0;
    opacity: .32;
    background-image: linear-gradient(rgba(15, 23, 42, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, .04) 1px, transparent 1px);
    background-size: 2.5rem 2.5rem;
    content: '';
    pointer-events: none;
}
.fi-simple-layout:has(.admin-login-intro) .fi-simple-main-ctn { position: relative; z-index: 1; }
.fi-simple-layout:has(.admin-login-intro) .fi-simple-main {
    height: fit-content;
    min-height: 0;
    overflow: hidden;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 1.35rem;
    box-shadow: 0 30px 80px rgba(15, 23, 42, .16) !important;
}
.fi-simple-layout:has(.admin-login-intro) .fi-simple-page {
    height: fit-content;
    min-height: 0;
}
.fi-simple-layout:has(.admin-login-intro) .fi-simple-page > section {
    display: grid;
    grid-template-areas: 'intro .' 'intro header' 'intro form' 'intro .';
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1fr auto auto 1fr;
    gap: 0;
}
.fi-simple-layout:has(.admin-login-intro) .fi-simple-header {
    grid-area: header;
    padding: 0 3rem 1.35rem;
    text-align: left;
}
.fi-simple-layout:has(.admin-login-intro) .fi-simple-header .fi-logo { display: none; }
.fi-simple-layout:has(.admin-login-intro) .fi-simple-header-heading { color: var(--clr-text); font-size: 2rem; }
.fi-simple-layout:has(.admin-login-intro) .fi-simple-header-subheading { max-width: 26rem; color: var(--clr-text-sub); font-size: .82rem; line-height: 1.65; }
.fi-simple-layout:has(.admin-login-intro) .fi-simple-page > section > form {
    grid-area: form;
    padding: 0 3rem;
}
.fi-simple-layout:has(.admin-login-intro) .fi-simple-page > section > form .fi-btn { min-height: 2.9rem; }
.fi-simple-layout:has(.admin-login-intro) .fi-simple-page > section > form .fi-fo-field-wrp { gap: .45rem; }
.fi-simple-layout:has(.admin-login-intro) .fi-simple-page > section > form .fi-fo-field-wrp-label {
    color: var(--clr-text);
    font-size: .69rem !important;
    font-weight: 750 !important;
    letter-spacing: .015em;
}
.fi-simple-layout:has(.admin-login-intro) .fi-simple-page > section > form .fi-fo-field-wrp-label .text-danger-600 { color: #f43f5e; }
.admin-login-control {
    min-height: 3.35rem;
    overflow: visible !important;
    border: 1px solid #dce5e1;
    border-radius: .85rem !important;
    background: linear-gradient(180deg, #fff, #f7faf9) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 18px rgba(15, 23, 42, .035) !important;
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease, background .3s ease !important;
}
.admin-login-control:hover { border-color: #a9c8bc; transform: translateY(-1px); }
.admin-login-control:focus-within {
    border-color: #10b981 !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, .11), 0 12px 28px rgba(15, 118, 87, .09) !important;
    transform: translateY(-1px);
}
.admin-login-control.fi-invalid { border-color: #fb7185 !important; box-shadow: 0 0 0 4px rgba(244, 63, 94, .09) !important; }
.admin-login-control .fi-input-wrp-prefix {
    align-self: stretch;
    margin: .42rem 0 .42rem .42rem;
    padding: 0 .7rem !important;
    border: 0 !important;
    border-radius: .58rem;
    background: #ecfdf5;
    transition: background .3s ease, transform .3s ease;
}
.admin-login-control:focus-within .fi-input-wrp-prefix { background: #d1fae5; transform: scale(1.03); }
.admin-login-control .fi-input-wrp-prefix svg { width: 1.05rem; height: 1.05rem; color: #047857 !important; }
.admin-login-control .fi-input {
    min-height: 3.2rem;
    padding-inline: .85rem;
    color: #12201b;
    font-size: .8rem !important;
    font-weight: 550;
}
.admin-login-control .fi-input::placeholder { color: #94a3b8; font-weight: 450; }
.admin-login-control .fi-input-wrp-suffix { align-self: stretch; padding-right: .5rem !important; }
.admin-password-toggle {
    width: 2.4rem !important;
    height: 2.4rem !important;
    margin: auto 0 !important;
    border: 1px solid #d8e4df;
    border-radius: .65rem !important;
    background: #f2f7f5;
    color: #557068 !important;
    transition: color .5s ease, background .5s ease, border-color .5s ease, transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease !important;
}
.admin-password-toggle:hover {
    border-color: #86b7a5;
    background: #e6f6f0;
    color: #047857 !important;
    box-shadow: 0 6px 14px rgba(4, 120, 87, .12);
    transform: translateY(-1px) rotate(-3deg);
}
.admin-password-toggle svg { width: 1.05rem !important; height: 1.05rem !important; transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s ease !important; }
.admin-password-toggle[x-show="isPasswordRevealed"] svg { animation: admin-lock-open .5s cubic-bezier(.2,.8,.2,1); }
.admin-password-toggle[x-show="! isPasswordRevealed"] svg { animation: admin-lock-close .5s cubic-bezier(.2,.8,.2,1); }
@keyframes admin-lock-open { from { opacity: .25; transform: translateY(2px) rotate(-18deg) scale(.78); } to { opacity: 1; transform: translateY(0) rotate(0) scale(1); } }
@keyframes admin-lock-close { from { opacity: .25; transform: translateY(-2px) rotate(14deg) scale(.78); } to { opacity: 1; transform: translateY(0) rotate(0) scale(1); } }
.fi-simple-layout:has(.admin-login-intro) .fi-simple-page > section > form .fi-checkbox-input { border-color: #cbd8d3; border-radius: .3rem; transition: border-color .3s ease, background .3s ease, box-shadow .3s ease; }
.fi-simple-layout:has(.admin-login-intro) .fi-simple-page > section > form .fi-checkbox-input:checked { border-color: #059669; background-color: #059669; }
.fi-simple-layout:has(.admin-login-intro) .fi-simple-page > section > form .fi-fo-field-wrp-hint-label { color: #047857; font-size: .69rem; font-weight: 700; transition: color .3s ease; }
.fi-simple-layout:has(.admin-login-intro) .fi-simple-page > section > form .fi-fo-field-wrp-hint-label:hover { color: #065f46; }
.admin-login-submit {
    position: relative;
    isolation: isolate;
    min-height: 3.15rem !important;
    overflow: hidden;
    border: 1px solid #047857 !important;
    border-radius: .82rem !important;
    background: linear-gradient(110deg, #047857 0%, #059669 48%, #0d9f77 100%) !important;
    background-size: 200% 100% !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(4, 120, 87, .18) !important;
    transition: background-position .5s ease, border-color .5s ease, box-shadow .5s ease, transform .5s cubic-bezier(.2,.8,.2,1) !important;
}
.admin-login-submit::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent);
    content: '';
    transform: translateX(-100%);
    transition: opacity .5s ease, transform .5s ease;
}
.admin-login-submit:hover {
    border-color: #065f46 !important;
    background-position: 100% 0 !important;
    box-shadow: 0 15px 30px rgba(4, 120, 87, .25) !important;
    transform: translateY(-2px);
}
.admin-login-submit:hover::before { opacity: 1; transform: translateX(100%); }
.admin-login-submit .fi-btn-label { font-size: .76rem !important; letter-spacing: .01em; transition: transform .5s ease, letter-spacing .5s ease; }
.admin-login-submit .fi-btn-icon { width: 1.12rem; height: 1.12rem; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.admin-login-submit:hover .fi-btn-label { letter-spacing: .035em; transform: translateX(-.18rem); }
.admin-login-submit:hover .fi-btn-icon { transform: translateX(.28rem) scale(1.12); }
.admin-login-submit:active { transform: translateY(0) scale(.985); transition-duration: .12s !important; }
html.dark .admin-login-control { border-color: #31433d; background: linear-gradient(180deg, #15211d, #111b18) !important; }
html.dark .admin-login-control:focus-within { background: #16231f !important; }
html.dark .admin-login-control .fi-input { color: #ecfdf5; }
html.dark .admin-login-control .fi-input-wrp-prefix { background: rgba(16, 185, 129, .12); }
html.dark .admin-password-toggle { border-color: #365048; background: #182a24; color: #9bb8ae !important; }
@media (prefers-reduced-motion: reduce) {
    .admin-login-control, .admin-password-toggle, .admin-password-toggle svg, .admin-login-submit, .admin-login-submit::before, .admin-login-submit .fi-btn-label, .admin-login-submit .fi-btn-icon { animation: none !important; transition-duration: .01ms !important; }
}
.admin-login-intro {
    grid-area: intro;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 39rem;
    padding: 2.25rem;
    background: radial-gradient(circle at 82% 12%, rgba(52, 211, 153, .2), transparent 18rem), linear-gradient(145deg, #071812, #0b3025 62%, #0d4432);
    color: #fff;
}
.admin-login-intro__brand { display: flex; align-items: center; gap: .75rem; }
.admin-login-intro__brand .admin-login-intro__logo { display: inline-flex; align-items: center; justify-content: center; padding: .55rem .75rem; border: 1px solid rgba(255, 255, 255, .22); border-radius: .75rem; background: #fff; }
.admin-login-intro__brand .admin-login-intro__logo img { display: block; height: 1.95rem; width: auto; }
.admin-login-intro__brand strong, .admin-login-intro__brand span { display: block; }
.admin-login-intro__brand strong { font-size: .9rem; letter-spacing: -.02em; }
.admin-login-intro__brand div > span { margin-top: .1rem; color: #a7c9bc; font-size: .64rem; }
.admin-login-intro__content { margin-block: auto; padding-block: 3rem; }
.admin-login-intro__eyebrow { color: #6ee7b7; font-size: .65rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.admin-login-intro h1 { max-width: 28rem; margin-top: .8rem; font-size: clamp(2rem, 3.4vw, 3.2rem); font-weight: 700; letter-spacing: -.055em; line-height: 1.06; }
.admin-login-intro__content > p { max-width: 30rem; margin-top: 1rem; color: #bdd4cc; font-size: .85rem; line-height: 1.7; }
.admin-login-intro__features { display: grid; gap: .7rem; margin-top: 2rem; }
.admin-login-intro__features li { display: flex; align-items: center; gap: .75rem; padding: .7rem .8rem; border: 1px solid rgba(255, 255, 255, .1); border-radius: .7rem; background: rgba(255, 255, 255, .055); }
.admin-login-intro__features svg { width: 1.15rem; height: 1.15rem; flex: none; color: #6ee7b7; }
.admin-login-intro__features span, .admin-login-intro__features strong { display: block; }
.admin-login-intro__features span { color: #a7c9bc; font-size: .66rem; }
.admin-login-intro__features strong { margin-bottom: .12rem; color: #fff; font-size: .72rem; }
.admin-login-intro__footer { color: #82aa9b; font-size: .65rem; }
html.dark .fi-simple-layout:has(.admin-login-intro) { background: radial-gradient(circle at 8% 12%, rgba(16, 185, 129, .12), transparent 28rem), #050b12 !important; }
@media (max-width: 860px) {
    .fi-simple-layout:has(.admin-login-intro) { padding: 1rem; }
    .fi-simple-layout:has(.admin-login-intro) .fi-simple-page > section { grid-template-areas: 'intro' 'header' 'form'; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
    .admin-login-intro { height: auto; min-height: auto; padding: 1.5rem; }
    .admin-login-intro__content { padding-block: 2rem .5rem; }
    .admin-login-intro h1 { max-width: 34rem; font-size: 2rem; }
    .admin-login-intro__content > p, .admin-login-intro__features, .admin-login-intro__footer { display: none; }
    .fi-simple-layout:has(.admin-login-intro) .fi-simple-header { padding: 2rem 2rem 1rem; }
    .fi-simple-layout:has(.admin-login-intro) .fi-simple-page > section > form { padding: 0 2rem 2rem; }
}
@media (max-width: 480px) {
    .fi-simple-layout:has(.admin-login-intro) { padding: 0; }
    .fi-simple-layout:has(.admin-login-intro) .fi-simple-main { margin-block: 0; min-height: 100dvh; border: 0; border-radius: 0; }
    .admin-login-intro { border-radius: 0; }
    .fi-simple-layout:has(.admin-login-intro) .fi-simple-header { padding: 1.75rem 1.5rem .9rem; }
    .fi-simple-layout:has(.admin-login-intro) .fi-simple-page > section > form { padding: 0 1.5rem 1.75rem; }
}

/* Authenticated admin master UI — shared cards and form controls. */
.fi-layout {
    --master-canvas: #f5f8f7;
    --master-surface: rgba(255, 255, 255, .96);
    --master-surface-raised: #fff;
    --master-surface-soft: #f7faf9;
    --master-border: #dfe8e4;
    --master-border-strong: #cbdad4;
    --master-text: #13221d;
    --master-muted: #64756f;
    --master-accent: #07845f;
    --master-accent-soft: rgba(5, 150, 105, .09);
    --master-shadow: 0 1px 2px rgba(15, 23, 42, .03), 0 8px 24px rgba(15, 51, 39, .045);
    --master-shadow-hover: 0 2px 4px rgba(15, 23, 42, .04), 0 16px 34px rgba(15, 51, 39, .08);
    background:
        radial-gradient(circle at 12% 0%, rgba(16, 185, 129, .055), transparent 28rem),
        var(--master-canvas);
}
html.dark .fi-layout {
    --master-canvas: #09110f;
    --master-surface: rgba(17, 29, 25, .97);
    --master-surface-raised: #14231e;
    --master-surface-soft: #0e1a16;
    --master-border: #293c35;
    --master-border-strong: #385148;
    --master-text: #edf7f3;
    --master-muted: #95aaa2;
    --master-accent: #34d399;
    --master-accent-soft: rgba(52, 211, 153, .1);
    --master-shadow: 0 1px 2px rgba(0, 0, 0, .24), 0 10px 28px rgba(0, 0, 0, .2);
    --master-shadow-hover: 0 2px 4px rgba(0, 0, 0, .28), 0 18px 38px rgba(0, 0, 0, .3);
    background:
        radial-gradient(circle at 12% 0%, rgba(16, 185, 129, .07), transparent 30rem),
        var(--master-canvas);
}
.fi-layout .fi-main-ctn { background: transparent !important; }
.fi-layout .fi-header-heading, .fi-layout .fi-section-header-heading, .fi-layout .fi-wi-stats-overview-stat-value { color: var(--master-text) !important; }
.fi-layout .fi-header-subheading, .fi-layout .fi-section-header-description, .fi-layout .fi-wi-stats-overview-stat-description { color: var(--master-muted) !important; }

/* Cards, panels, widgets, repeaters, and table shells share one visual language. */
.fi-layout :is(.fi-section, .fi-ta-ctn, .fi-wi-stats-overview-stat, .fi-fo-repeater-item, .fi-fo-builder-item, .fi-in-entry-wrp, .fi-modal-window) {
    border: 1px solid var(--master-border) !important;
    border-radius: 1rem !important;
    background: var(--master-surface) !important;
    box-shadow: var(--master-shadow) !important;
}
.fi-layout :is(.fi-section, .fi-ta-ctn, .fi-wi-stats-overview-stat, .fi-fo-repeater-item, .fi-fo-builder-item) {
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.2,.8,.2,1), background .3s ease;
}
.fi-layout :is(.fi-section, .fi-ta-ctn):hover { border-color: var(--master-border-strong) !important; box-shadow: var(--master-shadow-hover) !important; }
.fi-layout .fi-wi-stats-overview-stat {
    position: relative;
    overflow: hidden;
    padding: 1.15rem !important;
}
.fi-layout .fi-wi-stats-overview-stat::before {
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--master-accent), rgba(16, 185, 129, .18));
    content: '';
}
.fi-layout .fi-wi-stats-overview-stat:hover { border-color: color-mix(in srgb, var(--master-accent) 28%, var(--master-border)) !important; box-shadow: var(--master-shadow-hover) !important; transform: translateY(-2px); }
.fi-layout .fi-wi-stats-overview-stat-icon { padding: .55rem; border-radius: .7rem; background: var(--master-accent-soft); }
.fi-layout .fi-wi-stats-overview-stat-value { font-size: 1.65rem !important; font-weight: 720 !important; letter-spacing: -.045em !important; }
.fi-layout .fi-section-header {
    padding: .9rem 1.05rem !important;
    border-bottom: 1px solid var(--master-border) !important;
    border-radius: 1rem 1rem 0 0;
    background: linear-gradient(180deg, var(--master-surface-raised), var(--master-surface-soft));
}
.fi-layout .fi-section-header-heading { font-size: .86rem !important; font-weight: 700 !important; letter-spacing: -.015em; }
.fi-layout .fi-section-header-icon { color: var(--master-accent) !important; }
.fi-layout .fi-section-content { color: var(--master-text); }
.fi-layout .hotel-overview {
    border-color: var(--master-border);
    border-radius: 1rem;
    background:
        radial-gradient(circle at 94% 15%, var(--master-accent-soft), transparent 18rem),
        var(--master-surface);
    box-shadow: var(--master-shadow);
}
.fi-layout .hotel-overview h2 { color: var(--master-text); }
.fi-layout .hotel-overview p, .fi-layout .hotel-overview-date { color: var(--master-muted); }
.fi-layout .hotel-overview-date strong { color: var(--master-text); }

/* Elegant field system for every Filament resource and settings form. */
.fi-layout .fi-fo-field-wrp { gap: .45rem; }
.fi-layout .fi-fo-field-wrp-label {
    color: var(--master-text) !important;
    font-size: .69rem !important;
    font-weight: 680 !important;
    letter-spacing: .012em;
}
.fi-layout .fi-fo-field-wrp-helper-text, .fi-layout .fi-fo-field-wrp-hint { color: var(--master-muted) !important; font-size: .66rem !important; }
.fi-layout .fi-input-wrp:not(.admin-login-control) {
    min-height: 2.75rem;
    overflow: hidden;
    border: 1px solid var(--master-border) !important;
    border-radius: .7rem !important;
    background: var(--master-surface-raised) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .025) !important;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease, background .25s ease !important;
}
.fi-layout .fi-input-wrp:not(.admin-login-control):hover { border-color: var(--master-border-strong) !important; background: var(--master-surface-soft) !important; }
.fi-layout .fi-input-wrp:not(.admin-login-control):focus-within {
    border-color: var(--master-accent) !important;
    background: var(--master-surface-raised) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--master-accent) 14%, transparent), 0 6px 16px rgba(5, 100, 73, .065) !important;
    transform: translateY(-1px);
}
.fi-layout .fi-input-wrp.fi-invalid:not(.admin-login-control) { border-color: #f43f5e !important; box-shadow: 0 0 0 3px rgba(244, 63, 94, .09) !important; }
/* Searchable selects render their option panel inside the field wrapper. */
.fi-layout .fi-input-wrp:has(.fi-fo-select),
.fi-layout .fi-input-wrp:has(.choices) {
    overflow: visible;
}
.fi-layout .fi-input-wrp:has(.choices):focus-within {
    transform: none;
}
.fi-layout .choices__list--dropdown,
.fi-layout .choices__list[aria-expanded] {
    z-index: 50;
    color: var(--master-text);
    background: var(--master-surface-raised);
    border: 1px solid var(--master-border);
    border-radius: .7rem;
    box-shadow: var(--master-shadow-hover);
}
.fi-layout .choices__list--dropdown .choices__input,
.fi-layout .choices__list[aria-expanded] .choices__input {
    color: var(--master-text);
    background: var(--master-surface-raised);
}
.fi-layout :is(.fi-input, .fi-select-input) {
    min-height: 2.65rem;
    color: var(--master-text) !important;
    font-size: .76rem !important;
    font-weight: 500;
    background: transparent !important;
    box-shadow: none !important;
}
.fi-layout textarea.fi-input { min-height: 6rem; padding-block: .65rem; line-height: 1.55; }
.fi-layout :is(.fi-input, .fi-select-input)::placeholder { color: color-mix(in srgb, var(--master-muted) 72%, transparent) !important; font-weight: 430; }
.fi-layout :is(.fi-input-wrp-prefix, .fi-input-wrp-suffix) { color: var(--master-muted); }
.fi-layout .fi-input-wrp-icon { color: var(--master-muted) !important; transition: color .25s ease, transform .25s ease; }
.fi-layout .fi-input-wrp:focus-within .fi-input-wrp-icon { color: var(--master-accent) !important; transform: scale(1.06); }
.fi-layout :is(.fi-fo-rich-editor, .fi-fo-markdown-editor, .fi-fo-key-value, .fi-fo-tags-input, .fi-fo-file-upload) {
    overflow: hidden;
    border: 1px solid var(--master-border) !important;
    border-radius: .8rem !important;
    background: var(--master-surface-raised) !important;
    box-shadow: none !important;
}
.fi-layout :is(.fi-fo-rich-editor, .fi-fo-markdown-editor, .fi-fo-key-value):focus-within { border-color: var(--master-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--master-accent) 14%, transparent) !important; }
.fi-layout .fi-checkbox-input, .fi-layout .fi-radio-input {
    border-color: var(--master-border-strong) !important;
    background-color: var(--master-surface-raised) !important;
    transition: border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.fi-layout .fi-checkbox-input:checked, .fi-layout .fi-radio-input:checked { border-color: var(--master-accent) !important; background-color: var(--master-accent) !important; }
.fi-layout .fi-checkbox-input:focus-visible, .fi-layout .fi-radio-input:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--master-accent) 18%, transparent) !important; }

/* Tables, tabs, menus, and actions complete the same system. */
.fi-layout .fi-ta-ctn { overflow: hidden; }
.fi-layout .fi-ta-header { border-bottom: 1px solid var(--master-border); background: var(--master-surface); }
.fi-layout .fi-ta-header-cell { color: var(--master-muted) !important; background: var(--master-surface-soft) !important; }
.fi-layout .fi-ta-row { border-color: var(--master-border) !important; transition: background .2s ease; }
.fi-layout .fi-ta-row:hover td { background: var(--master-accent-soft) !important; }
.fi-layout .fi-tabs {
    gap: .2rem;
    padding: .28rem;
    border: 1px solid var(--master-border);
    border-radius: .75rem;
    background: var(--master-surface-soft);
    box-shadow: none;
}
.fi-layout .fi-tabs-item { border-radius: .52rem; color: var(--master-muted); transition: color .25s ease, background .25s ease, box-shadow .25s ease; }
.fi-layout .fi-tabs-item-active { background: var(--master-surface-raised) !important; color: var(--master-accent) !important; box-shadow: 0 1px 4px rgba(15, 23, 42, .08); }
.fi-layout .fi-dropdown-panel {
    border-color: var(--master-border) !important;
    border-radius: .8rem;
    background: var(--master-surface-raised) !important;
    box-shadow: var(--master-shadow-hover) !important;
}
.fi-layout .fi-btn { border-radius: .62rem !important; transition: color .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease !important; }
.fi-layout .fi-btn:hover { transform: translateY(-1px); }
.fi-layout .fi-btn:active { transform: translateY(0) scale(.985); }
.fi-layout .fi-modal-window { border-radius: 1.05rem !important; }

@media (max-width: 640px) {
    .fi-layout .fi-wi-stats-overview-stat:hover, .fi-layout .fi-btn:hover, .fi-layout .fi-input-wrp:not(.admin-login-control):focus-within { transform: none; }
    .fi-layout :is(.fi-section, .fi-ta-ctn, .fi-wi-stats-overview-stat, .fi-fo-repeater-item, .fi-fo-builder-item) { border-radius: .82rem !important; }
}
@media (prefers-reduced-motion: reduce) {
    .fi-layout :is(.fi-section, .fi-ta-ctn, .fi-wi-stats-overview-stat, .fi-fo-repeater-item, .fi-fo-builder-item, .fi-input-wrp, .fi-btn, .fi-tabs-item) { transition-duration: .01ms !important; }
}

/* Master control login — distinct from the hotel operations portal. */
.fi-simple-layout:has(.master-login-intro) {
    background:
        radial-gradient(circle at 10% 10%, rgba(245, 158, 11, .13), transparent 28rem),
        radial-gradient(circle at 92% 88%, rgba(79, 70, 229, .1), transparent 26rem),
        #f3f4f8 !important;
}
.master-login-intro {
    background:
        radial-gradient(circle at 82% 12%, rgba(251, 191, 36, .2), transparent 18rem),
        linear-gradient(145deg, #111827, #1e293b 62%, #312e81);
}
.master-login-intro .admin-login-intro__brand .admin-login-intro__logo { border-color: rgba(251, 191, 36, .45); }
.master-login-intro .admin-login-intro__brand div > span, .master-login-intro .admin-login-intro__content > p { color: #bac3d4; }
.master-login-intro .admin-login-intro__eyebrow { color: #fbbf24; }
.master-login-intro .admin-login-intro__features li { border-color: rgba(251, 191, 36, .14); background: rgba(255, 255, 255, .055); }
.master-login-intro .admin-login-intro__features svg { color: #fbbf24; }
.master-login-intro .admin-login-intro__features span { color: #b8c2d5; }
.master-login-intro .admin-login-intro__footer { color: #94a3b8; }
.fi-simple-layout:has(.master-login-intro) .admin-login-control .fi-input-wrp-prefix { background: #fffbeb; }
.fi-simple-layout:has(.master-login-intro) .admin-login-control:focus-within .fi-input-wrp-prefix { background: #fef3c7; }
.fi-simple-layout:has(.master-login-intro) .admin-login-control .fi-input-wrp-prefix svg { color: #b45309 !important; }
.fi-simple-layout:has(.master-login-intro) .admin-login-control:focus-within {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, .12), 0 12px 28px rgba(146, 64, 14, .08) !important;
}
.fi-simple-layout:has(.master-login-intro) .admin-password-toggle:hover { border-color: #f3c768; background: #fffbeb; color: #b45309 !important; box-shadow: 0 6px 14px rgba(180, 83, 9, .12); }
.fi-simple-layout:has(.master-login-intro) .fi-fo-field-wrp-hint-label { color: #b45309 !important; }
.fi-simple-layout:has(.master-login-intro) .fi-checkbox-input:checked { border-color: #d97706; background-color: #d97706; }
.fi-simple-layout:has(.master-login-intro) .admin-login-submit {
    border-color: #d97706 !important;
    background: linear-gradient(110deg, #b45309 0%, #d97706 48%, #f59e0b 100%) !important;
    background-size: 200% 100% !important;
    box-shadow: 0 10px 22px rgba(180, 83, 9, .2) !important;
}
.fi-simple-layout:has(.master-login-intro) .admin-login-submit:hover { border-color: #92400e !important; box-shadow: 0 15px 30px rgba(180, 83, 9, .28) !important; }
html.dark .fi-simple-layout:has(.master-login-intro) { background: radial-gradient(circle at 10% 10%, rgba(245, 158, 11, .09), transparent 28rem), #070b14 !important; }
html.dark .fi-simple-layout:has(.master-login-intro) .admin-login-control .fi-input-wrp-prefix { background: rgba(245, 158, 11, .12); }
html.dark .fi-simple-layout:has(.master-login-intro) .admin-login-control .fi-input-wrp-prefix svg { color: #fbbf24 !important; }

/* Color picker popovers must paint above neighbouring fields. */
.fi-fo-color-picker-panel {
    z-index: 60;
}

/* ══════════════════════════════════════════════════════════════════
   CUSTOM HOTEL SETTINGS BRANDING & UPLOAD FORM BUILDER COMPONENTS
   ══════════════════════════════════════════════════════════════════ */
.hs-brand-assets-section {
    grid-column: 1 / -1 !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 6px 16px rgba(15, 23, 42, 0.02) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}
.dark .hs-brand-assets-section {
    background: #0f172a !important;
    border-color: #1e293b !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}
.hs-brand-section-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}
.dark .hs-brand-section-header {
    border-bottom-color: #1e293b !important;
}
.hs-brand-section-title {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    letter-spacing: -0.01em !important;
}
.dark .hs-brand-section-title {
    color: #f8fafc !important;
}
.hs-brand-section-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: rgba(217, 119, 6, 0.12) !important;
    color: #d97706 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
.hs-brand-section-subtitle {
    font-size: 12px !important;
    color: #64748b !important;
    margin-top: 2px !important;
    line-height: 1.4 !important;
}
.dark .hs-brand-section-subtitle {
    color: #94a3b8 !important;
}
.hs-badge-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    border-radius: 9999px !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
}
.dark .hs-badge-pill {
    background: #1e293b !important;
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}
.hs-upload-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
    width: 100% !important;
}
@media (max-width: 1024px) {
    .hs-upload-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 680px) {
    .hs-upload-grid {
        grid-template-columns: 1fr !important;
    }
}
.hs-split-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
    width: 100% !important;
    align-items: start !important;
}
@media (max-width: 840px) {
    .hs-split-grid {
        grid-template-columns: 1fr !important;
    }
}
.hs-upload-card {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}
.hs-upload-card:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05) !important;
}
.dark .hs-upload-card {
    background: #0b1120 !important;
    border-color: #1e293b !important;
}
.dark .hs-upload-card:hover {
    border-color: #334155 !important;
}
.hs-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
}
.hs-card-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    color: #334155 !important;
}
.dark .hs-card-label {
    color: #cbd5e1 !important;
}
.hs-remove-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.08) !important;
    border: 1px solid rgba(239, 68, 68, 0.18) !important;
    border-radius: 6px !important;
    padding: 2px 8px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}
.hs-remove-btn:hover {
    background: rgba(239, 68, 68, 0.16) !important;
    color: #dc2626 !important;
}
.hs-preview-box {
    width: 100% !important;
    height: 120px !important;
    border-radius: 10px !important;
    border: 1.5px dashed #cbd5e1 !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
    transition: border-color 0.15s ease !important;
}
.hs-preview-box.preview-tall {
    height: 180px !important;
}
.dark .hs-preview-box {
    background: #0f172a !important;
    border-color: #334155 !important;
}
.hs-preview-box.checkerboard {
    background-image: linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
                      linear-gradient(-45deg, #f1f5f9 25%, transparent 25%),
                      linear-gradient(45deg, transparent 75%, #f1f5f9 75%),
                      linear-gradient(-45deg, transparent 75%, #f1f5f9 75%) !important;
    background-size: 16px 16px !important;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0px !important;
}
.hs-preview-box.preview-dark {
    background: #070c18 !important;
    border-color: #1e293b !important;
    background-image: linear-gradient(45deg, #0f172a 25%, transparent 25%),
                      linear-gradient(-45deg, #0f172a 25%, transparent 25%),
                      linear-gradient(45deg, transparent 75%, #0f172a 75%),
                      linear-gradient(-45deg, transparent 75%, #0f172a 75%) !important;
    background-size: 16px 16px !important;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0px !important;
}
.hs-preview-box:hover {
    border-color: #d97706 !important;
}
.hs-preview-img {
    max-height: 95px !important;
    max-width: 90% !important;
    object-fit: contain !important;
}
.hs-preview-img-cover {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.hs-favicon-wrapper {
    width: 52px !important;
    height: 52px !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}
.dark .hs-favicon-wrapper {
    background: #1e293b !important;
    border-color: #334155 !important;
}
.hs-empty-state {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    color: #94a3b8 !important;
    text-align: center !important;
    padding: 12px !important;
}
.hs-empty-state svg {
    width: 28px !important;
    height: 28px !important;
    opacity: 0.65 !important;
}
.hs-empty-state span {
    font-size: 11px !important;
    font-weight: 500 !important;
}
.hs-active-badge {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 2px 7px !important;
    border-radius: 6px !important;
    background: #ecfdf5 !important;
    color: #059669 !important;
    border: 1px solid rgba(5, 150, 105, 0.25) !important;
    pointer-events: none !important;
    z-index: 2 !important;
}
.hs-active-badge.badge-dark {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #f59e0b !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}
.hs-loading-overlay {
    display: none;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(4px) !important;
    align-items: center;
    justify-content: center;
    gap: 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #d97706 !important;
    z-index: 20 !important;
}
.hs-loading-overlay[style*="display: none"],
[wire\:loading][style*="display: none"] {
    display: none !important;
}
.dark .hs-loading-overlay {
    background: rgba(15, 23, 42, 0.94) !important;
    color: #fbbf24 !important;
}
/* ==========================================================================
   Luxury Toggle Switch Component
   ========================================================================== */
.hs-luxury-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
}

.hs-luxury-toggle-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.hs-luxury-toggle-track {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    background: #cbd5e1;
    border: 1.5px solid #94a3b8;
    border-radius: 9999px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.dark .hs-luxury-toggle-track {
    background: #334155;
    border-color: #475569;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

.hs-luxury-toggle-thumb {
    position: absolute;
    top: 1.5px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #ffffff;
    border-radius: 9999px;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hs-luxury-toggle-thumb .hs-thumb-check {
    display: none;
    width: 11px;
    height: 11px;
    color: #059669;
}

.hs-luxury-toggle-thumb .hs-thumb-cross {
    display: block;
    width: 9px;
    height: 9px;
    color: #94a3b8;
}

/* Checked State */
.hs-luxury-toggle-input:checked + .hs-luxury-toggle-track,
.hs-luxury-toggle.is-checked .hs-luxury-toggle-track {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: #059669 !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25), 0 2px 5px rgba(5, 150, 105, 0.3) !important;
}

.dark .hs-luxury-toggle-input:checked + .hs-luxury-toggle-track,
.dark .hs-luxury-toggle.is-checked .hs-luxury-toggle-track {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    border-color: #10b981 !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.35), 0 2px 5px rgba(0, 0, 0, 0.4) !important;
}

.hs-luxury-toggle-input:checked + .hs-luxury-toggle-track .hs-luxury-toggle-thumb,
.hs-luxury-toggle.is-checked .hs-luxury-toggle-thumb {
    transform: translateX(20px) !important;
    background: #ffffff !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) !important;
}

.hs-luxury-toggle-input:checked + .hs-luxury-toggle-track .hs-thumb-check,
.hs-luxury-toggle.is-checked .hs-thumb-check {
    display: block !important;
}

.hs-luxury-toggle-input:checked + .hs-luxury-toggle-track .hs-thumb-cross,
.hs-luxury-toggle.is-checked .hs-thumb-cross {
    display: none !important;
}

/* Toggle Badge */
.hs-luxury-toggle-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 9px;
    border-radius: 9999px;
    transition: all 0.2s ease;
    background: rgba(148, 163, 184, 0.14);
    color: #64748b;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.dark .hs-luxury-toggle-badge {
    background: rgba(148, 163, 184, 0.2);
    color: #94a3b8;
    border-color: rgba(148, 163, 184, 0.3);
}

.hs-luxury-toggle-badge .hs-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: #94a3b8;
    transition: all 0.2s ease;
}

.hs-luxury-toggle-badge .hs-badge-text-active {
    display: none;
}
.hs-luxury-toggle-badge .hs-badge-text-inactive {
    display: inline;
}

/* Checked Badge */
.hs-luxury-toggle-input:checked ~ .hs-luxury-toggle-badge,
.hs-luxury-toggle.is-checked .hs-luxury-toggle-badge {
    background: rgba(16, 185, 129, 0.14) !important;
    color: #059669 !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
}

.dark .hs-luxury-toggle-input:checked ~ .hs-luxury-toggle-badge,
.dark .hs-luxury-toggle.is-checked .hs-luxury-toggle-badge {
    background: rgba(16, 185, 129, 0.22) !important;
    color: #34d399 !important;
    border-color: rgba(16, 185, 129, 0.45) !important;
}

.hs-luxury-toggle-input:checked ~ .hs-luxury-toggle-badge .hs-badge-dot,
.hs-luxury-toggle.is-checked .hs-badge-dot {
    background: #10b981 !important;
    box-shadow: 0 0 6px #10b981 !important;
}

.hs-luxury-toggle-input:checked ~ .hs-luxury-toggle-badge .hs-badge-text-active,
.hs-luxury-toggle.is-checked .hs-badge-text-active {
    display: inline !important;
}

.hs-luxury-toggle-input:checked ~ .hs-luxury-toggle-badge .hs-badge-text-inactive,
.hs-luxury-toggle.is-checked .hs-badge-text-inactive {
    display: none !important;
}

/* Compact / Mini Toggle variant for sub-items */
.hs-luxury-toggle-sm .hs-luxury-toggle-track {
    width: 36px;
    height: 20px;
}
.hs-luxury-toggle-sm .hs-luxury-toggle-thumb {
    width: 14px;
    height: 14px;
    top: 1.5px;
    left: 1.5px;
}
.hs-luxury-toggle-sm .hs-luxury-toggle-input:checked + .hs-luxury-toggle-track .hs-luxury-toggle-thumb,
.hs-luxury-toggle-sm.is-checked .hs-luxury-toggle-thumb {
    transform: translateX(16px) !important;
}
.hs-luxury-toggle-sm .hs-luxury-toggle-badge {
    font-size: 10px;
    padding: 2px 7px;
}

/* Existing legacy classes mapped for smooth transition */
.hs-toggle-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    user-select: none;
}
.hs-toggle-badge {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}
.hs-toggle-badge-active {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.28);
}
.dark .hs-toggle-badge-active {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.35);
}
.hs-toggle-badge-inactive {
    background: rgba(148, 163, 184, 0.12);
    color: #64748b;
    border: 1px solid rgba(148, 163, 184, 0.28);
}
.dark .hs-toggle-badge-inactive {
    background: rgba(148, 163, 184, 0.2);
    color: #94a3b8;
    border-color: rgba(148, 163, 184, 0.3);
}
.hs-social-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 14px;
    transition: all 0.2s ease;
}
.hs-social-card:hover {
    border-color: #cbd5e1;
}
.dark .hs-social-card {
    background: #0b1120;
    border-color: #1e293b;
}
.dark .hs-social-card:hover {
    border-color: #334155;
}
.hs-native-file-input {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.hs-upload-trigger-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    background: #fffbeb !important;
    color: #92400e !important;
    border: 1px solid #fcd34d !important;
    transition: all 0.15s ease !important;
    text-align: center !important;
    box-sizing: border-box !important;
}
.hs-upload-trigger-btn:hover {
    background: #fef3c7 !important;
    border-color: #f59e0b !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.15) !important;
}
.dark .hs-upload-trigger-btn {
    background: rgba(245, 158, 11, 0.1) !important;
    color: #fcd34d !important;
    border-color: rgba(245, 158, 11, 0.25) !important;
}
.dark .hs-upload-trigger-btn:hover {
    background: rgba(245, 158, 11, 0.18) !important;
    border-color: #f59e0b !important;
}
.hs-url-input-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 100% !important;
}
.hs-custom-url-input {
    display: block !important;
    width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 4px 10px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 7px !important;
    background: #ffffff !important;
    color: #1e293b !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: 11.5px !important;
    outline: none !important;
    box-shadow: none !important;
    transition: all 0.15s ease !important;
    box-sizing: border-box !important;
}
.hs-custom-url-input:focus {
    border-color: #d97706 !important;
    box-shadow: 0 0 0 2.5px rgba(217, 119, 6, 0.15) !important;
}
.dark .hs-custom-url-input {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}
.dark .hs-custom-url-input:focus {
    border-color: #fbbf24 !important;
    box-shadow: 0 0 0 2.5px rgba(251, 191, 36, 0.2) !important;
}
.hs-url-caption {
    font-size: 10.5px !important;
    color: #64748b !important;
    line-height: 1.35 !important;
}
.dark .hs-url-caption {
    color: #94a3b8 !important;
}