/* =========================================================
   Resort Manager – shared theme tokens
   :root defaults = light (always defined, even outside [data-theme])
   [data-theme="dark"] overrides for portal dark mode
   ========================================================= */
:root {
    --rm-bg: #f1f5f9;
    --rm-surface: #ffffff;
    --rm-surface-alt: #f8fafc;
    --rm-surface-2: #f1f5f9;
    --rm-border: #e2e8f0;
    --rm-divide: #e2e8f0;
    --rm-text: #0f172a;
    --rm-text-muted: #475569;
    --rm-text-faint: #94a3b8;
    --rm-header-bg: rgba(255, 255, 255, 0.92);
    --rm-scheme: light;
    --rm-stage-reservation: #4338ca;
    --rm-stage-checkin: #0369a1;
    --rm-stage-checkout: #1d4ed8;
    --rm-stage-adjustment: #b45309;
    --rm-stage-default: #334155;
    --rm-overlay: rgba(15, 23, 42, 0.65);
    --rm-input-bg: #ffffff;
    --rm-danger-bg: #fff1f2;
    --rm-danger-text: #be123c;
    --rm-ok-bg: #ecfdf5;
    --rm-ok-text: #047857;
    --rm-warn-bg: #fffbeb;
    --rm-warn-text: #b45309;
}

/* =========================================================
   Resort Manager - Unified Portal Theme
   One shared light/dark theme system for every portal screen
   (Login, Executive Hub, Reservation Desk, Front Desk).
   The active mode is controlled from Resort Manager > Settings
   and applied via a data-theme attribute on the page wrapper.
   ========================================================= */

[data-theme="light"] {
    --rm-bg: #f1f5f9;
    --rm-surface: #ffffff;
    --rm-surface-alt: #f8fafc;
    --rm-surface-2: #f1f5f9;
    --rm-border: #e2e8f0;
    --rm-divide: #e2e8f0;
    --rm-text: #0f172a;
    --rm-text-muted: #475569;
    --rm-text-faint: #94a3b8;
    --rm-header-bg: rgba(255, 255, 255, 0.85);
    --rm-scheme: light;
    --rm-stage-reservation: #4338ca;
    --rm-stage-checkin: #0369a1;
    --rm-stage-checkout: #1d4ed8;
    --rm-stage-adjustment: #b45309;
    --rm-stage-default: #334155;
    --rm-overlay: rgba(15, 23, 42, 0.65);
    --rm-input-bg: #ffffff;
    --rm-danger-bg: #fff1f2;
    --rm-danger-text: #be123c;
    --rm-ok-bg: #ecfdf5;
    --rm-ok-text: #047857;
    --rm-warn-bg: #fffbeb;
    --rm-warn-text: #b45309;

}

[data-theme="dark"] {
    --rm-bg: #0f172a;
    --rm-surface: #1e293b;
    --rm-surface-alt: #0f172a;
    --rm-surface-2: #020617;
    --rm-border: #334155;
    --rm-divide: #334155;
    --rm-text: #f8fafc;
    --rm-text-muted: #cbd5e1;
    --rm-text-faint: #94a3b8;
    --rm-header-bg: rgba(15, 23, 42, 0.92);
    --rm-scheme: dark;
    --rm-stage-reservation: #a5b4fc;
    --rm-stage-checkin: #7dd3fc;
    --rm-stage-checkout: #93c5fd;
    --rm-stage-adjustment: #fcd34d;
    --rm-stage-default: #cbd5e1;
    --rm-overlay: rgba(2, 6, 23, 0.78);
    --rm-input-bg: #0f172a;
    --rm-danger-bg: rgba(244, 63, 94, 0.18);
    --rm-danger-text: #fda4af;
    --rm-ok-bg: rgba(16, 185, 129, 0.18);
    --rm-ok-text: #6ee7b7;
    --rm-warn-bg: rgba(245, 158, 11, 0.18);
    --rm-warn-text: #fcd34d;
}

[data-theme] {
    background-color: var(--rm-bg);
    color: var(--rm-text);
    color-scheme: var(--rm-scheme);
    transition: background-color .15s ease, color .15s ease;
}

.rm-bg { background-color: var(--rm-bg); }
.rm-surface { background-color: var(--rm-surface); }
.rm-surface-alt { background-color: var(--rm-surface-alt); }
.rm-surface-2 { background-color: var(--rm-surface-2); }

.rm-border { border-color: var(--rm-border); }
.rm-divide > :not([hidden]) ~ :not([hidden]) { border-color: var(--rm-divide); }

.rm-text { color: var(--rm-text); }
.rm-text-muted { color: var(--rm-text-muted); }
.rm-text-faint { color: var(--rm-text-faint); }
.rm-text-hover:hover { color: var(--rm-text); }

/* Payments Ledger stage labels (Day Book "Cash Received Today" table).
   Theme-aware so the label stays readable in both Light and Dark mode
   instead of the previous fixed text-*-700 shade, which had unreadably
   low contrast against the Dark theme's surface color. Falls back to
   the inherited color (no visible change) inside the always-light,
   theme-independent PDF export snapshot, which never carries a
   data-theme attribute. */
.rm-stage-reservation { color: var(--rm-stage-reservation); }
.rm-stage-checkin { color: var(--rm-stage-checkin); }
.rm-stage-checkout { color: var(--rm-stage-checkout); }
.rm-stage-adjustment { color: var(--rm-stage-adjustment); }
.rm-stage-default { color: var(--rm-stage-default); }

.rm-header { background-color: var(--rm-header-bg); }
.rm-row-hover:hover { background-color: var(--rm-surface-alt); }

/* Inputs, selects & textareas inside the portal should follow the
   active surface tier instead of hard-coded light/dark colors. */
[data-theme] input:not([type="checkbox"]):not([type="radio"]),
[data-theme] select,
[data-theme] textarea {
    background-color: var(--rm-surface-alt);
    color: var(--rm-text);
    border-color: var(--rm-border);
}

[data-theme] input::placeholder,
[data-theme] textarea::placeholder {
    color: var(--rm-text-faint);
}

/* =========================================================
   Mobile / Tablet / Desktop consistency helpers
   ========================================================= */

/* Hide scrollbar on horizontally-scrolling tab bars & chip rows,
   while keeping them swipeable/scrollable on touch devices. */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Prevent iOS Safari from auto-zooming when a form field is
   focused (it does this whenever a font-size is under 16px). */
@media (max-width: 640px) {
    [data-theme] input,
    [data-theme] select,
    [data-theme] textarea {
        font-size: 16px;
    }
}

/* Tables inside a scroll wrapper shouldn't get so squeezed that
   text collides - this sets a sane floor so overflow-x-auto (not
   overflow-hidden) is what kicks in on narrow screens. */
[data-theme] table { min-width: 480px; }

/* Any element explicitly marked full-bleed on mobile stretches to
   the viewport edge below the tablet breakpoint. */
@media (max-width: 640px) {
    .rm-app { padding-left: 0.75rem; padding-right: 0.75rem; }
}

/* Amount / money input fields: left-aligned while the user is
   actively typing (so digits enter naturally left-to-right), and
   right-aligned once the field loses focus (so the figures line up
   like a ledger). Applied via .rm-amount-input on every currency
   field across Reservation Desk, Front Desk and Admin Portal. */
.rm-amount-input { text-align: right; }
.rm-amount-input:focus { text-align: left; }

/* Discount amount field (Reservation Desk new-booking form and the Edit
   Booking modal): disabled state must read clearly as "off" on every
   screen size, not just via opacity, since a light theme + a low-opacity
   number can still look editable on small mobile screens. */
.rm-amount-input:disabled {
    cursor: not-allowed;
    background-image: repeating-linear-gradient(45deg, rgba(148, 163, 184, 0.08), rgba(148, 163, 184, 0.08) 4px, transparent 4px, transparent 8px);
}

/* =========================================================
   Portal Accent Color Themes
   Four selectable brand accents (Settings > Portal Accent
   Theme Color). The chosen value is rendered as a
   data-accent="emerald|indigo|blue|amber" attribute on the
   document root (see rm_get_theme_color()) and every
   .rm-accent-* helper below reads the matching CSS variable,
   so switching the setting re-colors every primary button,
   active tab, focus ring, checkbox and brand icon in one go -
   without touching the Booking Voucher / Tax Invoice, which
   intentionally never read these variables (see the fixed
   data-theme="light" wrapper around those printables).
   ========================================================= */

[data-accent="emerald"] {
    --rm-accent-50: #ecfdf5;  --rm-accent-100: #d1fae5; --rm-accent-200: #a7f3d0;
    --rm-accent-300: #6ee7b7; --rm-accent-400: #34d399; --rm-accent-500: #10b981;
    --rm-accent-600: #059669; --rm-accent-700: #047857; --rm-accent-800: #065f46;
    --rm-accent-900: #064e3b; --rm-accent-950: #022c22;
}
[data-accent="indigo"] {
    --rm-accent-50: #eef2ff;  --rm-accent-100: #e0e7ff; --rm-accent-200: #c7d2fe;
    --rm-accent-300: #a5b4fc; --rm-accent-400: #818cf8; --rm-accent-500: #6366f1;
    --rm-accent-600: #4f46e5; --rm-accent-700: #4338ca; --rm-accent-800: #3730a3;
    --rm-accent-900: #312e81; --rm-accent-950: #1e1b4b;
}
[data-accent="blue"] {
    --rm-accent-50: #eff6ff;  --rm-accent-100: #dbeafe; --rm-accent-200: #bfdbfe;
    --rm-accent-300: #93c5fd; --rm-accent-400: #60a5fa; --rm-accent-500: #3b82f6;
    --rm-accent-600: #2563eb; --rm-accent-700: #1d4ed8; --rm-accent-800: #1e40af;
    --rm-accent-900: #1e3a8a; --rm-accent-950: #172554;
}
[data-accent="amber"] {
    --rm-accent-50: #fffbeb;  --rm-accent-100: #fef3c7; --rm-accent-200: #fde68a;
    --rm-accent-300: #fcd34d; --rm-accent-400: #fbbf24; --rm-accent-500: #f59e0b;
    --rm-accent-600: #d97706; --rm-accent-700: #b45309; --rm-accent-800: #92400e;
    --rm-accent-900: #78350f; --rm-accent-950: #451a03;
}

/* Text selection follows the accent too - but only inside an
   accent-scoped subtree, so the fixed-light printable voucher/
   invoice (which never carries data-accent) keeps the browser
   default instead of inheriting it. */
[data-accent] ::selection { background-color: var(--rm-accent-500); color: #fff; }

/* Solid primary buttons ("Confirm & Issue Voucher", "Login",
   "Export CSV", etc). Default hover darkens one step. */
.rm-accent-btn { background-color: var(--rm-accent-600); color: #fff; }
.rm-accent-btn:hover { background-color: var(--rm-accent-700); }
/* Softer hover for a couple of screens that lighten instead of
   darken on hover (Scan QR / Check-in / Book Now buttons). */
.rm-accent-btn-soft { background-color: var(--rm-accent-600); color: #fff; }
.rm-accent-btn-soft:hover { background-color: var(--rm-accent-500); }

/* Colored drop-shadow under a primary CTA, approximating
   Tailwind's shadow-*/30 accent-tinted shadow utilities. */
.rm-accent-shadow { box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--rm-accent-600) 30%, transparent), 0 4px 6px -4px color-mix(in srgb, var(--rm-accent-600) 30%, transparent); }

/* Active tab / active nav-link indicator. */
.rm-accent-tab-active { border-color: var(--rm-accent-600); color: var(--rm-accent-700); }

/* Focus ring for inputs/selects (mirrors Tailwind's
   focus:ring-2 focus:ring-{accent}-500, plus an optional
   matching focus border). */
.rm-accent-focus:focus { outline: none; box-shadow: 0 0 0 2px var(--rm-accent-500); }
.rm-accent-focus-border:focus { outline: none; border-color: var(--rm-accent-500); box-shadow: 0 0 0 2px var(--rm-accent-500); }

/* Native checkbox tick color (meal-plan, discount-enable,
   lock-booking, remember-me checkboxes). */
.rm-accent-checkbox { accent-color: var(--rm-accent-600); }

/* Brand mark: header logo tile and each portal's page-title icon. */
.rm-accent-icon-box { background-color: var(--rm-accent-100); color: var(--rm-accent-700); }
.rm-accent-icon { color: var(--rm-accent-600); }

/* Soft accent background/border, e.g. translucent badges on
   the public booking page hero. */
.rm-accent-bg-soft { background-color: color-mix(in srgb, var(--rm-accent-500) 20%, transparent); }
.rm-accent-text-soft { color: var(--rm-accent-300); }
.rm-accent-border-soft { border-color: color-mix(in srgb, var(--rm-accent-500) 30%, transparent); }

/* Secondary "Close / Cancel / Back" modal buttons. Previously
   hardcoded to bg-slate-200 (+ sometimes text-slate-700), which
   stayed a light-gray patch even in dark mode instead of
   adapting like every other surface in the portal. */
.rm-btn-secondary { background-color: var(--rm-surface-2); color: var(--rm-text-muted); }
.rm-btn-secondary:hover { filter: brightness(1.08); }

/* Neutral status pill (e.g. room status other than "Available",
   where no color meaning needs preserving across themes -
   unlike the green "Available" pill, which stays fixed green). */
.rm-badge-neutral { background-color: var(--rm-surface-2); color: var(--rm-text-muted); }

/* Extra shades used on the public booking page (home-theme.php),
   where the accent shows up as section eyebrow labels, a
   translucent "call us" badge over the hero image, amenity
   icon tiles and a solid price tag - none of these are buttons,
   so they get their own lightweight helpers instead of reusing
   .rm-accent-btn. */
.rm-accent-label { color: var(--rm-accent-600); }
.rm-accent-label-bright { color: var(--rm-accent-400); }
.rm-accent-text-bright { color: var(--rm-accent-400); }
.rm-accent-icon-soft { color: var(--rm-accent-500); }
.rm-accent-hover-text:hover { color: var(--rm-accent-400); }
.rm-accent-bg-strong-soft { background-color: color-mix(in srgb, var(--rm-accent-950) 60%, transparent); }
.rm-accent-solid { background-color: var(--rm-accent-600); color: #fff; }
.rm-accent-chip { background-color: var(--rm-accent-50); color: var(--rm-accent-700); }

/* =========================================================
   Booking Voucher & Tax Invoice - fixed print theme
   These printables are wrapped in data-theme="light" (see
   #printable_voucher / #printable_invoice / #lk_printable_*)
   regardless of the portal's active mode or accent color, so
   the nested [data-theme="light"] rule above already re-sets
   --rm-bg/--rm-text/etc for that subtree. This block is the
   belt-and-suspenders half: it forces color/background to
   print exactly as shown even if a browser's print settings
   would otherwise drop backgrounds, and it stops any
   accidental accent/dark inheritance from ever reaching them.
   ========================================================= */
[id^="printable_"], [id^="lk_printable_"] {
    color-scheme: light;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
@media print {
    [id^="printable_"], [id^="lk_printable_"] {
        background-color: #ffffff !important;
        color: #0f172a !important;
    }
}

/* =========================================================
   Responsive / Touch-Friendly Polish (Mobile, Tablet, Laptop, Desktop)
   Belt-and-suspenders layer on top of the Tailwind utility
   classes already used in the templates. Nothing here changes
   markup structure, business logic, GST/accounting math, or the
   fixed-light printable Voucher / Tax Invoice theme above.
   ========================================================= */

/* Comfortable tap targets on touch screens. Only raises height
   where a control is currently shorter than the accepted 40px
   touch-target floor - doesn't affect desktop mouse users since
   it's scoped to narrow / coarse-pointer viewports. */
@media (max-width: 768px) {
    .rm-app button,
    .rm-app select,
    .rm-app a.rm-accent-btn,
    .rm-app a.rm-accent-btn-soft,
    .rm-app a.rm-btn-secondary,
    [data-theme] button:not(.rm-no-min-h),
    [data-theme] select:not(.rm-no-min-h) {
        min-height: 40px;
    }
}

/* Smooth momentum scrolling for every horizontally-scrollable table
   wrapper on touch devices (iOS in particular, which defaults to a
   stuttery scroll without this). */
.overflow-x-auto { -webkit-overflow-scrolling: touch; }

/* Sticky first column (e.g. the Room name column on the Day Book /
   monthly availability grid) needs an opaque background so scrolled
   content doesn't show through underneath it. */
.sticky.left-0 { box-shadow: 2px 0 4px -2px rgba(15, 23, 42, .18); }

/* Key/value summary rows (Voucher, Tax Invoice, Ledger, Day Book
   totals) use `flex justify-between` with a label span and a value
   span. On very narrow phones a long guest name or room list must
   wrap onto a second line rather than forcing the whole row - and
   by extension the modal/card around it - into horizontal overflow. */
[data-theme] .flex.justify-between {
    flex-wrap: wrap;
    row-gap: 2px;
}
[data-theme] .flex.justify-between > span:last-child {
    text-align: right;
    overflow-wrap: anywhere;
}

/* Modal dialogs: keep the panel from ever exceeding the viewport
   height on short/landscape phones, with its own internal scroll,
   rather than relying solely on the backdrop's scroll position. */
@media (max-width: 640px) {
    .fixed.inset-0 > .rm-surface.rounded-2xl {
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }
}

/* Cards/tiles laid out with Tailwind's grid utilities collapse to a
   single column below the small breakpoint by default already via
   the templates' own sm:/md: prefixes; this is a narrow-phone floor
   so nothing (icon buttons, badges, QR boxes) drops under ~44px. */
@media (max-width: 380px) {
    .rm-app .grid-cols-2 { gap: 0.5rem; }
}

/* =========================================================
   Shared UI polish tokens (Agency Portal visual language)
   Used across Agency, Admin Hub, Reservation Desk, Front Desk.
   Semantic status colours stay fixed for meaning; surfaces and
   muted text follow the active theme.
   ========================================================= */

.rm-card {
    background-color: var(--rm-surface-alt);
    border: 1px solid var(--rm-border);
    border-radius: 1rem;
}

.rm-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rm-text-muted);
}

.rm-input {
    width: 100%;
    margin-top: 0.25rem;
    border-radius: 0.75rem;
    border: 1px solid var(--rm-border);
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    background-color: var(--rm-surface-alt);
    color: var(--rm-text);
}

.rm-modal-backdrop {
    background-color: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
}

.rm-empty {
    text-align: center;
    padding: 1.5rem 1rem;
    font-size: 0.875rem;
    color: var(--rm-text-faint);
}

/* Status pills – fixed semantic colours for scanability */
.rm-badge-booked { background-color: #dbeafe; color: #1d4ed8; }
.rm-badge-checkedin { background-color: #d1fae5; color: #047857; }
.rm-badge-checkedout { background-color: var(--rm-surface-2); color: var(--rm-text-muted); }
.rm-badge-cancelled { background-color: #ffe4e6; color: #be123c; }

[data-theme="dark"] .rm-badge-booked { background-color: rgba(59, 130, 246, 0.2); color: #93c5fd; }
[data-theme="dark"] .rm-badge-checkedin { background-color: rgba(16, 185, 129, 0.2); color: #6ee7b7; }
[data-theme="dark"] .rm-badge-cancelled { background-color: rgba(244, 63, 94, 0.2); color: #fda4af; }

/* Global bottom nav — compact, premium, responsive */
.rm-bottom-nav {
    background-color: color-mix(in srgb, var(--rm-surface) 96%, transparent);
    border-top: 1px solid var(--rm-border);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 -1px 10px rgba(0,0,0,0.04);
}
.rm-bottom-nav > div {
    padding-top: 0.28rem !important;
    padding-bottom: 0.28rem !important;
}
.rm-bottom-nav .rm-nav-btn {
    padding-top: 0.2rem !important;
    padding-bottom: 0.2rem !important;
    padding-left: 0.4rem !important;
    padding-right: 0.4rem !important;
    min-width: 2.55rem;
    gap: 0.1rem !important;
    border-radius: 0.55rem;
}
.rm-bottom-nav .rm-nav-btn i {
    font-size: 0.78rem !important;
    line-height: 1;
}
.rm-bottom-nav .rm-nav-btn span {
    font-size: 7px !important;
    line-height: 1.05 !important;
    font-weight: 700;
    letter-spacing: 0.01em;
}
/* Slightly roomier on wider screens */
@media (min-width: 480px) {
    .rm-bottom-nav .rm-nav-btn {
        min-width: 2.75rem;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    .rm-bottom-nav .rm-nav-btn i { font-size: 0.82rem !important; }
    .rm-bottom-nav .rm-nav-btn span { font-size: 7.5px !important; }
}
@media (min-width: 768px) {
    .rm-bottom-nav > div {
        padding-top: 0.32rem !important;
        padding-bottom: 0.32rem !important;
    }
    .rm-bottom-nav .rm-nav-btn {
        min-width: 3rem;
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
        padding-left: 0.55rem !important;
        padding-right: 0.55rem !important;
        gap: 0.15rem !important;
    }
    .rm-bottom-nav .rm-nav-btn i { font-size: 0.88rem !important; }
    .rm-bottom-nav .rm-nav-btn span { font-size: 8px !important; }
}
@media (min-width: 1024px) {
    .rm-bottom-nav .rm-nav-btn {
        min-width: 3.2rem;
        padding-left: 0.65rem !important;
        padding-right: 0.65rem !important;
    }
    .rm-bottom-nav .rm-nav-btn i { font-size: 0.92rem !important; }
    .rm-bottom-nav .rm-nav-btn span { font-size: 8.5px !important; }
}

.rm-nav-btn {
    color: var(--rm-text-muted);
    transition: all 0.2s ease;
    border-radius: 0.55rem;
    border: 1px solid transparent;
}
/* Strong selected state — compact premium */
.rm-nav-btn.rm-nav-active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
    background-color: #4f46e5 !important;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.35);
    border-color: transparent;
}
[data-accent="emerald"] .rm-nav-btn.rm-nav-active {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    background-color: #059669 !important;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.35);
}
[data-accent="blue"] .rm-nav-btn.rm-nav-active {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    background-color: #2563eb !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.45);
}
[data-accent="amber"] .rm-nav-btn.rm-nav-active,
[data-accent="orange"] .rm-nav-btn.rm-nav-active {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    background-color: #d97706 !important;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.45);
}
.rm-nav-btn:hover:not(.rm-nav-active):not([disabled]) {
    background-color: color-mix(in srgb, #6366f1 12%, transparent);
    color: #4f46e5;
}

/* Action chips on booking cards */
.rm-act-neutral {
    background-color: var(--rm-surface);
    border: 1px solid var(--rm-border);
    color: var(--rm-text);
}
.rm-act-neutral:hover { background-color: var(--rm-surface-alt); }

.rm-act-wa { background-color: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.rm-act-wa:hover { background-color: #d1fae5; }
.rm-act-pdf { background-color: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe; }
.rm-act-pdf:hover { background-color: #e0e7ff; }
.rm-act-cancel { background-color: #fff1f2; color: #be123c; border: 1px solid #fecdd3; }
.rm-act-cancel:hover { background-color: #ffe4e6; }

[data-theme="dark"] .rm-act-wa { background-color: rgba(16, 185, 129, 0.15); color: #6ee7b7; border-color: rgba(16, 185, 129, 0.35); }
[data-theme="dark"] .rm-act-pdf { background-color: rgba(99, 102, 241, 0.15); color: #a5b4fc; border-color: rgba(99, 102, 241, 0.35); }
[data-theme="dark"] .rm-act-cancel { background-color: rgba(244, 63, 94, 0.15); color: #fda4af; border-color: rgba(244, 63, 94, 0.35); }

/* Agency Portal – richer cards & polish */
#rm-agency-portal .ag-stat-card {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    padding: 0.85rem 0.6rem;
    text-align: center;
    box-shadow: 0 4px 14px rgba(0,0,0,0.05);
    border: 1px solid var(--rm-border);
}
#rm-agency-portal .ag-stat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.12;
    pointer-events: none;
}
#rm-agency-portal .ag-stat-upcoming { background: linear-gradient(145deg, #ecfdf5, #d1fae5); }
#rm-agency-portal .ag-stat-upcoming::before { background: radial-gradient(circle at 80% 20%, #10b981, transparent 60%); }
#rm-agency-portal .ag-stat-active { background: linear-gradient(145deg, #eef2ff, #e0e7ff); }
#rm-agency-portal .ag-stat-active::before { background: radial-gradient(circle at 80% 20%, #6366f1, transparent 60%); }
#rm-agency-portal .ag-stat-total { background: linear-gradient(145deg, #f8fafc, #e2e8f0); }
#rm-agency-portal .ag-stat-total::before { background: radial-gradient(circle at 80% 20%, #64748b, transparent 60%); }

[data-theme="dark"] #rm-agency-portal .ag-stat-upcoming { background: linear-gradient(145deg, rgba(16,185,129,0.15), rgba(16,185,129,0.05)); }
[data-theme="dark"] #rm-agency-portal .ag-stat-active { background: linear-gradient(145deg, rgba(99,102,241,0.18), rgba(99,102,241,0.06)); }
[data-theme="dark"] #rm-agency-portal .ag-stat-total { background: linear-gradient(145deg, rgba(100,116,139,0.2), rgba(100,116,139,0.06)); }

/* Shared booking cards (Agency Portal + Reservation Desk) */
.rm-booking-card,
#rm-agency-portal .ag-booking-card {
    position: relative;
    border-radius: 1.1rem;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.rm-booking-card:active,
#rm-agency-portal .ag-booking-card:active {
    transform: scale(0.985);
}
.rm-booking-card .rm-status-bar,
#rm-agency-portal .ag-booking-card .ag-status-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}
.rm-bar-booked,
#rm-agency-portal .ag-bar-booked { background: linear-gradient(180deg, #3b82f6, #1d4ed8); }
.rm-bar-checkedin,
#rm-agency-portal .ag-bar-checkedin { background: linear-gradient(180deg, #10b981, #047857); }
.rm-bar-checkedout,
#rm-agency-portal .ag-bar-checkedout { background: linear-gradient(180deg, #94a3b8, #64748b); }
.rm-bar-cancelled,
#rm-agency-portal .ag-bar-cancelled { background: linear-gradient(180deg, #f43f5e, #be123c); }

.rm-booking-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 640px) {
    .rm-booking-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .rm-booking-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

.rm-act-approve {
    background-color: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}
.rm-act-approve:hover { background-color: #d1fae5; }
.rm-act-reject {
    background-color: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
}
.rm-act-reject:hover { background-color: #ffedd5; }
[data-theme="dark"] .rm-act-approve {
    background-color: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.35);
}
[data-theme="dark"] .rm-act-reject {
    background-color: rgba(249, 115, 22, 0.15);
    color: #fdba74;
    border-color: rgba(249, 115, 22, 0.35);
}

#rm-agency-portal .ag-filter-btn {
    transition: all 0.2s ease;
}
#rm-agency-portal .ag-filter-btn.rm-accent-btn {
    box-shadow: 0 4px 12px color-mix(in srgb, var(--rm-accent-600) 35%, transparent);
}

/* Safe area for fixed bottom nav on notched phones */
.safe-pb { padding-bottom: env(safe-area-inset-bottom, 0); }


/* ---- Solid modal panel (never transparent) ---- */
.rm-modal-panel {
    background-color: var(--rm-surface, #ffffff) !important;
    color: var(--rm-text, #0f172a);
    border-color: var(--rm-border, #e2e8f0);
}
.rm-modal-overlay {
    background-color: var(--rm-overlay, rgba(15, 23, 42, 0.65)) !important;
}
.rm-input {
    background-color: var(--rm-input-bg, var(--rm-surface-2, #f1f5f9)) !important;
    color: var(--rm-text, #0f172a) !important;
    border-color: var(--rm-border, #e2e8f0) !important;
}
.rm-ok-soft {
    background-color: var(--rm-ok-bg) !important;
    color: var(--rm-ok-text) !important;
    border-color: transparent;
}
.rm-danger-soft {
    background-color: var(--rm-danger-bg) !important;
    color: var(--rm-danger-text) !important;
}
.rm-warn-soft {
    background-color: var(--rm-warn-bg) !important;
    color: var(--rm-warn-text) !important;
}
/* Room availability cards – theme safe (no raw emerald-50 / rose-50) */
.rm-room-card-available {
    border-color: #34d399 !important;
    background-color: var(--rm-ok-bg) !important;
    color: var(--rm-ok-text);
}
.rm-room-card-booked {
    border-color: #fb7185 !important;
    background-color: var(--rm-danger-bg) !important;
    color: var(--rm-danger-text);
    opacity: 1;
}
/* Ensure surfaces stay opaque even if a parent has opacity */
.rm-surface,
.rm-surface-alt,
.rm-surface-2,
.rm-modal-panel {
    opacity: 1;
}
/* Form controls inside themed portals */
[data-theme] input[type="text"],
[data-theme] input[type="number"],
[data-theme] input[type="date"],
[data-theme] input[type="email"],
[data-theme] input[type="password"],
[data-theme] input[type="tel"],
[data-theme] input[type="search"],
[data-theme] input[type="month"],
[data-theme] select,
[data-theme] textarea {
    background-color: var(--rm-input-bg, var(--rm-surface-2));
    color: var(--rm-text);
    border-color: var(--rm-border);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--rm-text-faint);
}


/* ---- Compact premium content shell (mobile-app feel) ---- */
.rm-content-shell {
    width: 100%;
    box-sizing: border-box;
}
@media (max-width: 640px) {
    .rm-content-shell {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        padding-top: 0.55rem !important;
        padding-bottom: 0.55rem !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .rm-app {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
@media (min-width: 768px) {
    .rm-content-shell {
        max-width: 100%;
        width: 100%;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}
@media (min-width: 1024px) {
    .rm-content-shell {
        max-width: 88rem;
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }
}
@media (min-width: 1280px) {
    .rm-content-shell {
        max-width: 96rem;
    }
}
@media (min-width: 1536px) {
    .rm-content-shell {
        max-width: 104rem;
    }
}


/* Final production polish — content shell & header */
.rm-app {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.rm-app > header.sticky {
    margin-top: 0 !important;
}
.rm-hub-nav-select {
    height: 22px !important;
    max-height: 22px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
}
.rm-content-shell {
    box-sizing: border-box;
}
@media (max-width: 640px) {
    .rm-content-shell {
        padding-left: 0.6rem !important;
        padding-right: 0.6rem !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}
@media (min-width: 768px) {
    .rm-content-shell {
        max-width: min(100%, 64rem);
        margin-left: auto;
        margin-right: auto;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}
@media (min-width: 1024px) {
    .rm-content-shell {
        max-width: min(100%, 80rem);
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }
}
@media (min-width: 1280px) {
    .rm-content-shell {
        max-width: min(100%, 90rem);
    }
}
@media (min-width: 1536px) {
    .rm-content-shell {
        max-width: min(100%, 96rem);
    }
}

/* UI-only: action button click/loading feedback (rm-btn-loading.js) */
.rm-is-loading {
  opacity: 0.88;
  cursor: progress !important;
  pointer-events: none;
}
.rm-is-loading .rm-btn-spinner {
  display: inline-block;
  margin-right: 0.25rem;
}
@keyframes rm-btn-pulse {
  0%, 100% { opacity: 0.88; }
  50% { opacity: 1; }
}
.rm-is-loading {
  animation: rm-btn-pulse 1.1s ease-in-out infinite;
}