/* ==================================================================
   Hotel Management System — UI theme
   Built on top of Bootstrap 5. Mobile-first, modern, clean.
   ================================================================== */

:root {
    --hms-primary: #4f46e5;
    --hms-primary-dark: #4338ca;
    --hms-primary-soft: #eef2ff;
    --hms-sidebar-bg: #0f172a;
    --hms-sidebar-bg-2: #1e293b;
    --hms-sidebar-muted: #94a3b8;
    --hms-body-bg: #f1f5f9;
    --hms-card-border: #e5e7eb;
    --hms-radius: 14px;
    --hms-sidebar-width: 260px;
    --hms-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
    --hms-shadow-lg: 0 10px 30px rgba(15, 23, 42, .12);

    /* --- Phase 4 additions ------------------------------------------
       Named so the rest of the sheet can stop hardcoding the same six
       greys and four tints in thirty places. Values match what was
       already in use, so nothing shifts; they simply gained a name. */
    --hms-ink:        #0f172a;   /* headings, primary text          */
    --hms-ink-2:      #334155;   /* body text                       */
    --hms-muted:      #64748b;   /* labels, secondary               */
    --hms-muted-2:    #94a3b8;   /* hints, placeholders             */
    --hms-line:       #e5e7eb;   /* borders                         */
    --hms-line-soft:  #f1f5f9;   /* row separators                  */
    --hms-surface:    #ffffff;
    --hms-surface-2:  #f8fafc;   /* table heads, wells              */

    --hms-success: #059669;  --hms-success-soft: #ecfdf5;
    --hms-danger:  #e11d48;  --hms-danger-soft:  #fff1f2;
    --hms-warning: #d97706;  --hms-warning-soft: #fffbeb;
    --hms-info:    #2563eb;  --hms-info-soft:    #eff6ff;

    --hms-radius-sm: 10px;
    --hms-radius-lg: 18px;
    --hms-focus: 0 0 0 .2rem rgba(79, 70, 229, .18);

    /* Minimum comfortable hit area. 44px is the accessibility floor;
       the front desk works fast and often on a touchscreen, so controls
       are sized to be hit without aiming. */
    --hms-touch: 44px;
}

* { -webkit-tap-highlight-color: transparent; }

html { -webkit-text-size-adjust: 100%; }

body {
    background: var(--hms-body-bg);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--hms-ink-2);
    font-size: .95rem;
    line-height: 1.55;
}

h1, h2, h3, h4, h5, h6 { color: var(--hms-ink); font-weight: 700; letter-spacing: -.01em; }

/* Money and counts line up column-to-column everywhere, not only in
   cells that remembered to ask for it. */
.num, .stat-value, .bill-lines dd, .balance-box strong, td.text-end, th.text-end {
    font-variant-numeric: tabular-nums;
}

/* A visible focus ring is the only way a keyboard user can tell where
   they are; the default outline is removed by Bootstrap on some
   controls, so it is restored here for everything. */
:focus-visible {
    outline: 2px solid var(--hms-primary);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ---- Buttons & controls ---------------------------------------- */
.btn { border-radius: 10px; font-weight: 500; }
.btn-primary {
    --bs-btn-bg: var(--hms-primary);
    --bs-btn-border-color: var(--hms-primary);
    --bs-btn-hover-bg: var(--hms-primary-dark);
    --bs-btn-hover-border-color: var(--hms-primary-dark);
    --bs-btn-active-bg: var(--hms-primary-dark);
    --bs-btn-disabled-bg: var(--hms-primary);
}
.btn-outline-primary {
    --bs-btn-color: var(--hms-primary);
    --bs-btn-border-color: var(--hms-primary);
    --bs-btn-hover-bg: var(--hms-primary);
    --bs-btn-hover-border-color: var(--hms-primary);
}
.form-control, .form-select {
    border-radius: 10px;
    border-color: #e2e8f0;
    padding: .55rem .85rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--hms-primary);
    box-shadow: 0 0 0 .2rem rgba(79, 70, 229, .15);
}
.form-label { font-weight: 600; font-size: .82rem; color: #475569; margin-bottom: .35rem; }

/* ---- App shell ------------------------------------------------- */
.app-sidebar {
    width: var(--hms-sidebar-width);
    background: linear-gradient(180deg, var(--hms-sidebar-bg) 0%, var(--hms-sidebar-bg-2) 100%);
    color: #e2e8f0;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    padding: 1rem .85rem;
}
.app-brand {
    display: flex; align-items: center; gap: .65rem;
    padding: .5rem .6rem 1.1rem;
    color: #fff; text-decoration: none;
}
.app-brand .brand-logo {
    width: 40px; height: 40px; border-radius: 11px;
    background: linear-gradient(135deg, var(--hms-primary) 0%, #7c3aed 100%);
    display: grid; place-items: center; font-size: 1.25rem; color: #fff;
    box-shadow: 0 6px 16px rgba(79, 70, 229, .45);
}
.app-brand .brand-name { font-weight: 700; font-size: 1.05rem; line-height: 1.1; }
.app-brand .brand-sub { font-size: .7rem; color: var(--hms-sidebar-muted); }

.sidebar-heading {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
    color: #64748b; padding: 1rem .75rem .4rem; font-weight: 700;
}
.sidebar-nav { list-style: none; padding: 0; margin: 0; }
.sidebar-nav .nav-link {
    display: flex; align-items: center; gap: .75rem;
    color: #cbd5e1; padding: .62rem .75rem; border-radius: 10px;
    font-weight: 500; margin-bottom: 2px; transition: all .15s ease;
}
.sidebar-nav .nav-link i { font-size: 1.1rem; width: 22px; text-align: center; }
.sidebar-nav .nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.sidebar-nav .nav-link.active {
    background: var(--hms-primary); color: #fff;
    box-shadow: 0 6px 16px rgba(79, 70, 229, .4);
}
.sidebar-footer { margin-top: auto; padding-top: .75rem; border-top: 1px solid rgba(255,255,255,.08); }

.app-main { margin-left: var(--hms-sidebar-width); min-height: 100vh; display: flex; flex-direction: column; }

/* Arabic and Persian are RTL; English keeps the original LTR layout. */
[dir="rtl"] .app-sidebar { left: auto; right: 0; }
[dir="rtl"] .app-main { margin-left: 0; margin-right: var(--hms-sidebar-width); }
[dir="rtl"] .text-start { text-align: right !important; }
[dir="rtl"] .text-end { text-align: left !important; }

.app-topbar {
    background: #fff; border-bottom: 1px solid var(--hms-card-border);
    padding: .8rem 1.4rem; display: flex; align-items: center; gap: 1rem;
    position: sticky; top: 0; z-index: 1020;
}
.app-topbar .page-title { font-weight: 700; font-size: 1.15rem; margin: 0; }
.app-content { padding: 1.6rem 1.4rem; flex: 1; }

/* ---- Avatars & chips ------------------------------------------- */
.avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--hms-primary-soft); color: var(--hms-primary);
    display: grid; place-items: center; font-weight: 700; font-size: .82rem;
}
.avatar-sm { width: 32px; height: 32px; font-size: .72rem; }

/* ---- Cards ----------------------------------------------------- */
.card { border: 1px solid var(--hms-card-border); border-radius: var(--hms-radius); box-shadow: var(--hms-shadow); }
.card-header { background: #fff; border-bottom: 1px solid var(--hms-card-border); font-weight: 600; padding: 1rem 1.25rem; border-radius: var(--hms-radius) var(--hms-radius) 0 0 !important; }

/* ---- Stat cards ------------------------------------------------ */
.stat-card { position: relative; overflow: hidden; }
.stat-card .stat-value { font-size: 1.9rem; font-weight: 800; line-height: 1; }
.stat-card .stat-label { color: #64748b; font-size: .82rem; font-weight: 600; }
.stat-card .stat-icon {
    width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center; font-size: 1.5rem;
}
.tint-indigo { background: #eef2ff; color: #4f46e5; }
.tint-green  { background: #ecfdf5; color: #10b981; }
.tint-amber  { background: #fffbeb; color: #f59e0b; }
.tint-rose   { background: #fff1f2; color: #f43f5e; }
.tint-sky    { background: #eff6ff; color: #3b82f6; }
.tint-violet { background: #f5f3ff; color: #8b5cf6; }

/* ---- Tables ---------------------------------------------------- */
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table thead th {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
    color: #64748b; font-weight: 700; border-bottom: 1px solid var(--hms-card-border);
    padding: .8rem 1rem; white-space: nowrap;
}
.table tbody td { padding: .85rem 1rem; vertical-align: middle; border-bottom: 1px solid #f1f5f9; }
.table tbody tr:last-child td { border-bottom: 0; }
.table-hover tbody tr:hover { background: #f8fafc; }

/* ---- Badges ---------------------------------------------------- */
.badge-soft { padding: .35em .7em; border-radius: 8px; font-weight: 600; font-size: .72rem; }
.badge-available, .badge-active, .badge-checked_in { background: #ecfdf5; color: #059669; }
.badge-occupied, .badge-checked_out { background: #eff6ff; color: #2563eb; }
.badge-inactive { background: #f1f5f9; color: #64748b; }
.badge-admin { background: #f5f3ff; color: #7c3aed; }
.badge-receptionist { background: #ecfeff; color: #0891b2; }

/* ---- Empty state ----------------------------------------------- */
.empty-state { text-align: center; padding: 3.5rem 1rem; color: #94a3b8; }
.empty-state i { font-size: 3rem; opacity: .5; }

/* ---- Auth page ------------------------------------------------- */
.auth-wrap {
    min-height: 100vh; display: grid; place-items: center;
    background: linear-gradient(135deg, #0f172a 0%, #312e81 55%, #4f46e5 100%);
    padding: 1.5rem;
}
.auth-card {
    width: 100%; max-width: 410px; background: #fff;
    border-radius: 20px; box-shadow: var(--hms-shadow-lg); padding: 2.4rem 2.2rem;
}
.auth-logo {
    width: 58px; height: 58px; border-radius: 16px; margin: 0 auto 1rem;
    background: linear-gradient(135deg, var(--hms-primary) 0%, #7c3aed 100%);
    display: grid; place-items: center; font-size: 1.7rem; color: #fff;
    box-shadow: 0 10px 24px rgba(79, 70, 229, .5);
}

/* ---- Responsive ------------------------------------------------ */
@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); transition: transform .25s ease; }
    .app-sidebar.open { transform: translateX(0); }
    .app-main { margin-left: 0; }
    [dir="rtl"] .app-main { margin-right: 0; }
    [dir="rtl"] .app-sidebar { transform: translateX(100%); }
    [dir="rtl"] .app-sidebar.open { transform: translateX(0); }
    .sidebar-backdrop {
        position: fixed; inset: 0; background: rgba(15, 23, 42, .5);
        z-index: 1035; display: none;
    }
    .sidebar-backdrop.show { display: block; }
}
@media (min-width: 992px) {
    .sidebar-toggle { display: none !important; }
}

/* ---- Utilities ------------------------------------------------- */
.text-muted-2 { color: #94a3b8 !important; }
.cursor-pointer { cursor: pointer; }
.page-header { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
a { text-decoration: none; }

/* ==================================================================
   Phase 3 — reservation workflow, expenses, finance & reporting UI
   ================================================================== */

/* ---- Card headers become a two-slot bar (title + meta) ---------- */
.card-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }

/* ---- Larger, friendlier controls for the front desk ------------- */
.form-control-lg, .form-select-lg { border-radius: 12px; padding: .7rem 1rem; font-size: 1.02rem; }
.btn-lg { border-radius: 12px; padding: .62rem 1.25rem; font-size: 1rem; font-weight: 600; }
.table-modern thead th { background: #f8fafc; }
.table-modern tbody tr:hover { background: #f8fafc; }

/* ---- Stat card tones ------------------------------------------- */
.stat-card .stat-icon {
    position: absolute; top: 1rem; inset-inline-end: 1rem;
    width: 42px; height: 42px; border-radius: 11px;
    display: grid; place-items: center; font-size: 1.2rem; opacity: .9;
}
.stat-card .stat-value { font-size: 1.65rem; margin-top: .15rem; }
.stat-primary .stat-icon { background: #eef2ff; color: #4f46e5; }
.stat-success .stat-icon { background: #ecfdf5; color: #059669; }
.stat-danger  .stat-icon { background: #fff1f2; color: #e11d48; }
.stat-info    .stat-icon { background: #eff6ff; color: #2563eb; }
.stat-warning .stat-icon { background: #fffbeb; color: #d97706; }

.feature-icon {
    width: 64px; height: 64px; border-radius: 18px; margin: 0 auto;
    background: var(--hms-primary-soft); color: var(--hms-primary);
    display: grid; place-items: center; font-size: 1.9rem;
}

/* ---- Extra badge tones ----------------------------------------- */
.badge-apartment { background: #eef2ff; color: #4f46e5; }
.badge-general   { background: #f0fdfa; color: #0d9488; }
.badge-warning   { background: #fffbeb; color: #d97706; }
.badge-pending   { background: #fffbeb; color: #d97706; }
.badge-confirmed { background: #eef2ff; color: #4f46e5; }
.badge-cancelled { background: #fef2f2; color: #dc2626; }
/* Payment register: money in reads green, money handed back amber. */
.badge-payment   { background: #ecfdf5; color: #047857; }
.badge-refund    { background: #fffbeb; color: #b45309; }
/* Audit trail actions. */
.badge-created   { background: #eef2ff; color: #4f46e5; }
.badge-updated   { background: #eff6ff; color: #2563eb; }
.badge-deleted   { background: #fef2f2; color: #dc2626; }

/* ---- Audit trail list ------------------------------------------ */
.audit-list { list-style: none; margin: 0; padding: 0; }
.audit-list li {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
    padding: .5rem 0; border-top: 1px dashed var(--hms-card-border);
}
.audit-list li:first-child { border-top: 0; }
.audit-list .audit-text { flex: 1 1 12rem; color: #334155; font-size: .875rem; }
.audit-list .audit-meta { color: #94a3b8; font-size: .75rem; white-space: nowrap; }

/* ---- Guest preview panel on the check-in screen ---------------- */
.guest-preview {
    background: #f8fafc; border: 1px solid var(--hms-card-border);
    border-radius: 12px; padding: 1rem 1.15rem;
}
.preview-label {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
    color: #94a3b8; font-weight: 700; margin-bottom: .15rem;
}
.preview-value { font-weight: 600; color: #1e293b; }

/* ---- Bill panel ------------------------------------------------- */
.sticky-panel { position: sticky; top: 5.5rem; }
.bill-card { border-color: #dbeafe; }
.bill-lines { margin: 0; }
.bill-lines > div {
    display: flex; align-items: center; justify-content: space-between;
    padding: .45rem 0;
}
.bill-lines dt { font-weight: 500; color: #475569; margin: 0; }
.bill-lines dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.bill-lines .bill-total {
    border-top: 2px solid var(--hms-card-border); margin-top: .4rem; padding-top: .8rem;
}
.bill-lines .bill-total dt { font-size: 1.05rem; font-weight: 700; color: #0f172a; }
.bill-lines .bill-total dd { font-size: 1.45rem; font-weight: 800; color: var(--hms-primary); }

.balance-box {
    display: flex; align-items: center; justify-content: space-between;
    background: #fff1f2; color: #be123c;
    border-radius: 12px; padding: .9rem 1.15rem; font-weight: 600;
}
.balance-box strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.balance-box.is-settled { background: #ecfdf5; color: #047857; }

/* ---- Expense type chooser -------------------------------------- */
.choice-card {
    display: flex; flex-direction: column; gap: .2rem;
    border: 2px solid var(--hms-card-border); border-radius: 14px;
    padding: 1.1rem 1.15rem; cursor: pointer; height: 100%;
    transition: border-color .15s ease, background .15s ease;
}
.choice-card:hover { border-color: #c7d2fe; background: #f8fafc; }
.choice-card input { position: absolute; opacity: 0; pointer-events: none; }
.choice-card i { font-size: 1.5rem; color: var(--hms-primary); margin-bottom: .2rem; }
.choice-card .choice-title { font-weight: 700; color: #0f172a; }
.choice-card .choice-sub { font-size: .78rem; color: #94a3b8; }
.choice-card.is-selected {
    border-color: var(--hms-primary); background: var(--hms-primary-soft);
}

/* ---- TomSelect: match the Bootstrap control sizing -------------- */
.ts-wrapper { min-width: 0; }
.ts-control {
    border-radius: 12px !important; border-color: #e2e8f0 !important;
    padding: .62rem .9rem !important; min-height: 46px;
}
.ts-wrapper.focus .ts-control {
    border-color: var(--hms-primary) !important;
    box-shadow: 0 0 0 .2rem rgba(79, 70, 229, .15) !important;
}
.ts-dropdown { border-radius: 12px; box-shadow: var(--hms-shadow-lg); border-color: #e2e8f0; }
.ts-guest-name { font-weight: 600; }
.ts-guest-meta { font-size: .78rem; color: #94a3b8; }

/* The dial-code control stays narrow; its dropdown stays readable. */
.phone-group .ts-wrapper { flex: 0 0 auto; width: 150px; }
.phone-group .ts-control { border-start-end-radius: 0 !important; border-end-end-radius: 0 !important; }
.phone-group .form-control { border-start-start-radius: 0; border-end-start-radius: 0; }

/* ---- Date fields & the shared From/To range filter -------------- */
.date-group .form-control { border-start-start-radius: 0; border-end-start-radius: 0; }

.date-range { display: flex; flex-direction: column; gap: .35rem; }
.date-range .input-group { flex-wrap: nowrap; width: auto; }
.date-range .form-control { max-width: 145px; min-width: 120px; }
.date-range .input-group-text { color: #94a3b8; }
.date-range-presets { display: flex; flex-wrap: wrap; gap: .25rem; }
.date-range-presets .btn {
    border-radius: 8px; font-size: .74rem; padding: .15rem .5rem;
    color: #64748b; border: 1px solid var(--hms-card-border);
}
.date-range-presets .btn:hover { background: var(--hms-primary-soft); color: var(--hms-primary); }

/* ---- Solar Hijri date picker ----------------------------------- */
/* Positioned against the viewport, not the page. `fixed` is what lets
   the popup escape every scrolling/clipping ancestor — a .modal body, a
   .table-responsive wrapper, a sticky header — which `absolute` could
   not: inside a position:fixed modal, document coordinates put the
   popup somewhere off-screen. app.js places it under the field it
   belongs to and flips it above when space runs out. */
.hms-datepicker {
    position: fixed; z-index: 1075; width: 17.5rem; padding: .6rem;
    background: #fff; border: 1px solid var(--hms-card-border);
    border-radius: 12px; box-shadow: var(--hms-shadow-lg);
    font-size: .9rem; user-select: none;
    /* The grid reads right-to-left on Persian and Arabic pages, so the
       Saturday-first week lands in the correct visual order. */
    direction: rtl;
}
.hms-datepicker[hidden] { display: none; }
[dir="ltr"] .hms-datepicker { direction: ltr; }

/* The calendar icon is the obvious affordance for "open the calendar",
   so it must look and behave like a button. */
.date-group .input-group-text,
.hms-dp-toggle { cursor: pointer; }
.date-group .input-group-text:hover,
.hms-dp-toggle:hover { color: var(--hms-primary); }

/* ---- Mobile: the popup becomes a centred sheet ------------------
   On a phone the soft keyboard covers the bottom half of the screen,
   so anchoring under the field hides the calendar behind the keyboard.
   app.js blurs the input and switches to this sheet instead. */
.hms-dp-backdrop {
    position: fixed; inset: 0; z-index: 1074;
    background: rgba(15, 23, 42, .45);
}
.hms-dp-backdrop[hidden] { display: none; }

@media (max-width: 575.98px) {
    .hms-datepicker.is-sheet {
        /* !important: position() writes inline top/left for the anchored
           case, and the sheet must win over those. */
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%);
        width: min(20rem, calc(100vw - 2rem));
        padding: .85rem;
        font-size: 1rem;
    }
    .hms-datepicker.is-sheet .hms-dp-day,
    .hms-datepicker.is-sheet .hms-dp-cell {
        /* A comfortable touch target — 44px is the accessibility floor. */
        min-height: 2.75rem; font-size: .95rem;
    }
    .hms-datepicker.is-sheet .hms-dp-nav,
    .hms-datepicker.is-sheet .hms-dp-title { padding: .5rem .65rem; }
    .hms-datepicker.is-sheet .hms-dp-foot button { padding: .55rem; font-size: .85rem; }
}

.hms-dp-head { display: flex; align-items: center; gap: .25rem; margin-bottom: .4rem; }
.hms-dp-nav, .hms-dp-title {
    background: none; border: 0; border-radius: 8px; color: inherit;
    padding: .3rem .5rem; line-height: 1;
}
.hms-dp-nav { font-size: 1.15rem; }
.hms-dp-title { flex: 1; font-weight: 600; font-size: .88rem; }
.hms-dp-nav:hover, .hms-dp-title:hover { background: var(--hms-primary-soft); color: var(--hms-primary); }

/* Weekday header and day grid share one 7-column track. */
.hms-dp-week, .hms-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.hms-dp-week span {
    text-align: center; font-size: .7rem; color: #94a3b8;
    padding: .25rem 0; font-weight: 600;
}

.hms-dp-day {
    background: none; border: 1px solid transparent; border-radius: 8px;
    padding: .35rem 0; text-align: center; color: inherit; font-size: .84rem;
}

/* Drill-up levels: the weekday strip only makes sense over days, and
   months and years want fewer, wider columns than a 7-day week. */
.hms-datepicker[data-mode="months"] .hms-dp-week,
.hms-datepicker[data-mode="years"] .hms-dp-week { display: none; }
.hms-datepicker[data-mode="months"] .hms-dp-grid,
.hms-datepicker[data-mode="years"] .hms-dp-grid {
    grid-template-columns: repeat(3, 1fr); gap: 4px;
}
.hms-dp-cell {
    background: none; border: 1px solid transparent; border-radius: 8px;
    padding: .55rem .25rem; text-align: center; color: inherit; font-size: .8rem;
}
.hms-dp-cell:hover { background: var(--hms-primary-soft); color: var(--hms-primary); }
.hms-dp-cell.is-selected {
    background: var(--hms-primary); border-color: var(--hms-primary); color: #fff;
}
.hms-dp-day.is-empty { visibility: hidden; }
.hms-dp-day:hover:not(.is-disabled):not(.is-empty) {
    background: var(--hms-primary-soft); color: var(--hms-primary);
}
.hms-dp-day.is-today { border-color: var(--hms-primary); font-weight: 600; }
.hms-dp-day.is-selected {
    background: var(--hms-primary); border-color: var(--hms-primary); color: #fff;
}
.hms-dp-day.is-disabled { color: #cbd5e1; cursor: not-allowed; }

.hms-dp-foot {
    display: flex; gap: .4rem; margin-top: .5rem;
    padding-top: .5rem; border-top: 1px solid var(--hms-card-border);
}
.hms-dp-foot button {
    flex: 1; background: none; border: 1px solid var(--hms-card-border);
    border-radius: 8px; padding: .25rem; font-size: .75rem; color: #64748b;
}
.hms-dp-foot button:hover { background: var(--hms-primary-soft); color: var(--hms-primary); }

/* Dates are numeric and read left-to-right even on RTL pages. */
.date-group .form-control, input.js-date { direction: ltr; text-align: start; }

/* ================================================================
   Guest form — sectioned, professional, RTL-aware
   ================================================================ */
.guest-form .card-header span { display: flex; align-items: center; gap: .6rem; }
.section-badge {
    width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
    background: var(--hms-primary-soft); color: var(--hms-primary);
    display: grid; place-items: center; font-size: 1rem;
}
.guest-form-card { transition: box-shadow .15s ease; }
.guest-form-card:focus-within { box-shadow: 0 0 0 1px var(--hms-primary), var(--hms-shadow); }
.guest-form .form-label { margin-bottom: .4rem; }

/* Sticky save/cancel bar so the primary action is always reachable. */
.guest-form-actions {
    position: sticky; bottom: 0; z-index: 10;
    display: flex; align-items: center; justify-content: flex-end; gap: .6rem;
    background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px);
    border: 1px solid var(--hms-card-border); border-radius: var(--hms-radius);
    padding: .8rem 1rem; margin-top: .25rem; box-shadow: var(--hms-shadow);
}

/* The phone dial-code + number group must flip cleanly in RTL: the code
   sits on the start side and the two controls stay visually joined. */
[dir="rtl"] .phone-group .ts-control { border-start-end-radius: 12px !important; border-end-end-radius: 12px !important; border-start-start-radius: 0 !important; border-end-start-radius: 0 !important; }
[dir="rtl"] .phone-group .form-control { border-start-start-radius: 12px; border-end-start-radius: 12px; border-start-end-radius: 0; border-end-end-radius: 0; }

@media (max-width: 575.98px) {
    .guest-form-actions { flex-direction: column-reverse; }
    .guest-form-actions .btn { width: 100%; }
}

/* ---- Activity timeline ----------------------------------------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline-item { position: relative; padding-inline-start: 3rem; padding-bottom: 1.6rem; }
/* The connecting rail, stopping at the last entry. */
.timeline-item::before {
    content: ''; position: absolute; inset-inline-start: 1.03rem; top: 2.1rem; bottom: -.2rem;
    width: 2px; background: var(--hms-card-border);
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item:last-child::before { display: none; }

.timeline-marker {
    position: absolute; inset-inline-start: 0; top: .1rem;
    width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center; font-size: .92rem;
    border: 2px solid #fff; box-shadow: 0 0 0 1px var(--hms-card-border);
}
.timeline-primary   { background: #eef2ff; color: #4f46e5; }
.timeline-success   { background: #ecfdf5; color: #059669; }
.timeline-info      { background: #eff6ff; color: #2563eb; }
.timeline-warning   { background: #fffbeb; color: #d97706; }
.timeline-danger    { background: #fff1f2; color: #e11d48; }
.timeline-dark      { background: #f1f5f9; color: #334155; }
.timeline-secondary { background: #f8fafc; color: #94a3b8; }

.timeline-head {
    display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: space-between; gap: .35rem;
}
.timeline-title { font-weight: 700; color: #0f172a; }
.timeline-time { font-size: .76rem; color: #94a3b8; white-space: nowrap; }
.timeline-text { margin: .2rem 0 .4rem; color: #475569; font-size: .88rem; }
.timeline-user {
    display: flex; align-items: center; gap: .4rem;
    font-size: .78rem; color: #64748b;
}
.avatar-xs { width: 22px; height: 22px; font-size: .6rem; }

/* ================================================================
   Tables that contain action menus
   ================================================================
   Bootstrap's .table-responsive sets `overflow-x: auto`, which creates
   a clipping context: an absolutely-positioned dropdown inside it gets
   cut off at the container's edge and becomes unusable.

   Tables whose rows stack on mobile (.table-stack) never need to scroll
   sideways, so they use .table-wrap instead — no overflow, no clipping.
   Any table that genuinely must scroll keeps .table-responsive, and the
   dropdown JS switches those menus to Popper's `fixed` strategy so they
   escape the scroller.
   ---------------------------------------------------------------- */
.table-wrap {
    overflow: visible;      /* never clip an open action menu */
    width: 100%;
}
.table-wrap .table { width: 100%; }

/*
   Between the mobile stack (<768px) and comfortable desktop (>=992px)
   a wide table can still be too big for its card. Rather than let it
   push the whole page sideways, cells wrap and padding tightens so the
   table compresses to fit — the scroller stays gone.
*/
@media (min-width: 768px) and (max-width: 991.98px) {
    .table-wrap .table thead th,
    .table-wrap .table tbody td { white-space: normal; padding: .7rem .55rem; }
    .table-wrap .table { font-size: .86rem; }
    .checkin-table .col-money   { width: auto; }
    .checkin-table .col-dates   { width: auto; }
    .checkin-table .stay-dates  { flex-wrap: wrap; white-space: normal; }
}

/* Above the sticky topbar (1020) and sidebar (1040), below the modal
   backdrop (1050) so dialogs still cover everything. */
.dropdown-menu { z-index: 1045; }

/* A row with an open menu must not be overlapped by the next row. */
.table tbody tr:has(.dropdown-menu.show) { position: relative; z-index: 2; }

/* ---- Check-in register ----------------------------------------- */
.checkin-table thead th {
    padding-top: .95rem; padding-bottom: .95rem;
    border-bottom: 1px solid var(--hms-card-border);
}
.checkin-table tbody td { padding: 1rem; }
.checkin-table tbody tr { transition: background .12s ease; }
.checkin-table tbody tr:hover { background: #f8fafc; }

/* A quiet left accent replaces the old Status column. */
.checkin-table tbody tr.row-inhouse  { box-shadow: inset 3px 0 0 0 #10b981; }
.checkin-table tbody tr.row-departed { box-shadow: inset 3px 0 0 0 #cbd5e1; }
[dir="rtl"] .checkin-table tbody tr.row-inhouse  { box-shadow: inset -3px 0 0 0 #10b981; }
[dir="rtl"] .checkin-table tbody tr.row-departed { box-shadow: inset -3px 0 0 0 #cbd5e1; }

.checkin-table .col-money   { width: 130px; }
.checkin-table .col-actions { width: 62px; }
.checkin-table .col-dates   { width: 200px; }

.guest-name { font-weight: 600; color: #0f172a; }
.guest-name:hover { color: var(--hms-primary); }
.cell-sub { font-size: .78rem; color: #94a3b8; margin-top: .1rem; }

.room-chip {
    display: inline-block; font-weight: 700; color: #4f46e5;
    background: var(--hms-primary-soft); border-radius: 8px;
    padding: .1rem .5rem; font-size: .85rem;
}

.stay-dates { display: flex; align-items: center; gap: .4rem; white-space: nowrap; font-size: .88rem; }
.stay-arrow { color: #cbd5e1; font-size: .75rem; }
[dir="rtl"] .stay-arrow { transform: scaleX(-1); }

/* Money columns line up digit-for-digit. */
.num { font-variant-numeric: tabular-nums; font-weight: 600; }

/* The balance is the number staff scan for, so it is a pill. */
.balance-pill {
    display: inline-flex; align-items: center; gap: .3rem;
    border-radius: 999px; padding: .3rem .7rem;
    font-weight: 700; font-size: .84rem; font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.balance-pill.is-settled { background: #ecfdf5; color: #047857; }
.balance-pill.is-due     { background: #fff1f2; color: #be123c; }

.btn-actions {
    border: 1px solid var(--hms-card-border); background: #fff;
    border-radius: 10px; color: #64748b; padding: .35rem .6rem;
}
.btn-actions:hover { background: var(--hms-primary-soft); color: var(--hms-primary); border-color: #c7d2fe; }

.dropdown-menu { border-radius: 12px; border-color: var(--hms-card-border); padding: .4rem; min-width: 210px; }
.dropdown-item { border-radius: 8px; padding: .55rem .7rem; display: flex; align-items: center; gap: .6rem; }
.dropdown-item i { width: 18px; text-align: center; font-size: .95rem; }
.dropdown-item:active { background: var(--hms-primary); }

/* Mobile totals strip, shown when the table footer is hidden. */
.stack-totals { display: none; }

/* ---- Modals ---------------------------------------------------- */
.modal-content { border: 0; border-radius: var(--hms-radius); box-shadow: var(--hms-shadow-lg); }
.modal-header { border-bottom: 1px solid var(--hms-card-border); padding: 1.1rem 1.35rem; }
.modal-header .modal-title { display: flex; align-items: center; gap: .6rem; font-weight: 700; }
.modal-icon {
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    background: var(--hms-primary-soft); color: var(--hms-primary);
    display: grid; place-items: center; font-size: 1rem;
}
.modal-body { padding: 1.35rem; }
.modal-footer { border-top: 1px solid var(--hms-card-border); padding: 1rem 1.35rem; }
/* Anchor jumps must clear the sticky topbar. */
#timeline { scroll-margin-top: 5rem; }

/* ---- Table footer totals --------------------------------------- */
.table-totals th {
    background: #f8fafc; border-top: 2px solid var(--hms-card-border);
    font-weight: 700; color: #0f172a; padding: .9rem 1rem;
    font-size: .9rem; text-transform: none; letter-spacing: 0;
}

/* ---- Print / PDF layout ---------------------------------------- */
.print-body { background: #fff; padding: 1.5rem; }
.print-sheet { max-width: 1100px; margin: 0 auto; }
.print-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    border-bottom: 2px solid #0f172a; padding-bottom: .9rem; margin-bottom: 1.5rem;
}

@media print {
    .app-sidebar, .app-topbar, .sidebar-backdrop, .page-header, .d-print-none { display: none !important; }
    .app-main { margin: 0 !important; }
    .app-content, .print-body { padding: 0 !important; }
    body { background: #fff; font-size: 12px; }
    .card { box-shadow: none !important; border-color: #cbd5e1 !important; break-inside: avoid; }
    .stat-card .stat-icon { display: none !important; }
    a[href]:after { content: none !important; }
}

/* ================================================================
   Responsive / mobile-first
   ================================================================ */

/* Filter bars wrap instead of overflowing, and go full-width on phones. */
.filter-bar {
    display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
}

@media (max-width: 1199.98px) {
    .sticky-panel { position: static; }
}

/* ---- Tablet ---------------------------------------------------- */
@media (max-width: 991.98px) {
    .app-content { padding: 1.15rem 1rem; }
    .page-header { gap: .85rem; }
    /* Comfortable touch targets from tablet down. */
    .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .btn-sm { min-height: 38px; }
    .dropdown-item { padding-top: .55rem; padding-bottom: .55rem; }
    .form-control, .form-select, .ts-control { font-size: 16px; } /* stops iOS zoom-on-focus */
}

/* ---- Phone ----------------------------------------------------- */
@media (max-width: 767.98px) {
    /*
       Stacked tables: each row becomes a card and every cell shows the
       column name from its data-label, so wide tables stay readable
       without horizontal scrolling. Applied via .table-stack, so tables
       that are better left scrolling simply opt out.
    */
    .table-stack thead,
    .table-stack tfoot { display: none; }
    .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }

    .table-stack tr {
        border: 1px solid var(--hms-card-border);
        border-radius: var(--hms-radius);
        padding: .35rem .25rem;
        margin-bottom: .85rem;
        background: #fff;
        box-shadow: var(--hms-shadow);
    }
    .table-stack tbody tr:hover { background: #fff; }

    .table-stack td {
        display: flex; align-items: center; justify-content: space-between;
        gap: 1rem; text-align: end;
        padding: .5rem .85rem; border: 0;
        border-bottom: 1px solid #f1f5f9;
    }
    .table-stack td:last-child { border-bottom: 0; }

    /* The column name, taken from data-label on each cell. */
    .table-stack td::before {
        content: attr(data-label);
        font-size: .72rem; font-weight: 700; text-transform: uppercase;
        letter-spacing: .04em; color: #94a3b8;
        text-align: start; flex-shrink: 0;
    }
    /* Cells with no label (actions) get the full width. */
    .table-stack td[data-label='']::before { content: none; }
    .table-stack td[data-label=''] { justify-content: flex-end; }

    /* An empty-state / alert row must not be stacked. */
    .table-stack td[colspan]::before { content: none; }
    .table-stack td[colspan] { display: block; text-align: start; }
    .table-stack tr.no-stack { border: 0; box-shadow: none; padding: 0; background: transparent; }

    /* Stacked check-in cards: guest headline, then labelled details. */
    .checkin-table tbody tr { box-shadow: var(--hms-shadow) !important; }
    .checkin-table tbody tr.row-inhouse  { border-inline-start: 4px solid #10b981; }
    .checkin-table tbody tr.row-departed { border-inline-start: 4px solid #cbd5e1; }
    /* Keyed on a class, not on data-label: Locale::replaceHtml()
       translates data-label values, so an attribute selector here would
       stop matching as soon as the page is not in English. */
    .checkin-table td.cell-guest {
        background: #f8fafc; border-radius: calc(var(--hms-radius) - 4px);
        margin-bottom: .2rem;
    }
    .checkin-table td.cell-guest::before { content: none; }
    .checkin-table td.cell-guest { justify-content: flex-start; }
    .checkin-table .stay-dates { justify-content: flex-end; }

    /* Totals move out of the hidden <tfoot> into their own strip. */
    .stack-totals {
        display: flex; flex-wrap: wrap; gap: .5rem;
        padding: .9rem 1rem; margin: 0 .25rem .5rem;
        background: #f8fafc; border: 1px solid var(--hms-card-border);
        border-radius: var(--hms-radius);
    }
    .stack-totals > div {
        flex: 1 1 30%; display: flex; flex-direction: column; gap: .1rem;
    }
    .stack-totals span {
        font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
        color: #94a3b8; font-weight: 700;
    }
    .stack-totals strong { font-size: 1rem; font-variant-numeric: tabular-nums; }

    .app-content { padding: .9rem .75rem; }
    .page-header { flex-direction: column; align-items: stretch; }
    .page-header > * { width: 100%; }
    .page-header .btn-lg { width: 100%; }
    .filter-bar > * { flex: 1 1 100%; max-width: none !important; }

    .card-header { flex-wrap: wrap; gap: .35rem; padding: .85rem 1rem; }
    .card-body { padding: 1rem; }
    .card-body.p-4 { padding: 1.15rem !important; }

    .stat-card .stat-value { font-size: 1.4rem; }
    .stat-card .stat-icon { display: none; }

    /* Full-width, thumb-friendly primary actions. */
    .d-grid .btn, .modal-footer .btn { min-height: 48px; }
    .modal-footer { flex-wrap: nowrap; }
    .modal-footer .btn { flex: 1; }

    .timeline-item { padding-inline-start: 2.6rem; }
    .timeline-head { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 575.98px) {
    .phone-group .ts-wrapper { width: 110px; }
    .date-range, .date-range .input-group { width: 100%; }
    .date-range .form-control { max-width: none; }
    .date-range-presets { justify-content: space-between; }
    .date-range-presets .btn { flex: 1; }
    .bill-lines .bill-total dd { font-size: 1.25rem; }
    .balance-box strong { font-size: 1.15rem; }
    .app-topbar { padding: .7rem 1rem; }
    .app-topbar .page-title { font-size: 1rem; }
}

/* ==================================================================
   Phase 4 — UI refresh
   ------------------------------------------------------------------
   Bigger targets, clearer hierarchy, one visual language across every
   screen. Additive on purpose: the Phase 1–3 selectors above still do
   the structural work, and this section raises the finish.
   ================================================================== */

/* ---- Controls: bigger, calmer, easier to hit -------------------- */
.btn {
    border-radius: var(--hms-radius-sm);
    font-weight: 600;
    padding: .5rem 1rem;
    transition: transform .08s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-lg { padding: .7rem 1.4rem; font-size: 1rem; }
.btn-sm { padding: .35rem .7rem; font-size: .84rem; border-radius: 9px; }
.btn-primary { box-shadow: 0 4px 12px rgba(79, 70, 229, .22); }
.btn-primary:hover { box-shadow: 0 6px 18px rgba(79, 70, 229, .32); }
.btn-light {
    --bs-btn-bg: #fff; --bs-btn-border-color: var(--hms-line);
    --bs-btn-hover-bg: var(--hms-surface-2); --bs-btn-hover-border-color: #cbd5e1;
    --bs-btn-color: var(--hms-ink-2);
}

/* Square icon-only button — used for row actions. */
.btn-icon {
    width: 38px; height: 38px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--hms-radius-sm); font-size: 1rem;
}

/* A button mid-request: the label stays (so the button keeps its
   width) and a spinner replaces the icon. */
.btn.is-loading { pointer-events: none; opacity: .75; }
.btn.is-loading > i { display: none; }
.btn.is-loading::before {
    content: ''; width: 1em; height: 1em; margin-inline-end: .5em;
    border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%; display: inline-block;
    animation: hms-spin .6s linear infinite;
}
@keyframes hms-spin { to { transform: rotate(360deg); } }

.form-control, .form-select { padding: .62rem .9rem; }
.form-control:focus, .form-select:focus { box-shadow: var(--hms-focus); }
.form-control::placeholder { color: #b6c2d2; }
.form-label { font-size: .84rem; color: var(--hms-ink-2); }
.form-text { color: var(--hms-muted-2); font-size: .8rem; }
.input-group-text { background: #fff; border-color: #e2e8f0; color: var(--hms-muted-2); }

/* ---- App shell -------------------------------------------------- */
.app-topbar { padding: .9rem 1.6rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.app-topbar .page-title { font-size: 1.22rem; letter-spacing: -.02em; }
.app-content { padding: 1.75rem 1.6rem; }

.sidebar-nav .nav-link { padding: .7rem .8rem; font-size: .93rem; }
.sidebar-nav .nav-link.active { font-weight: 600; }

/* ---- Page header: title, subtitle, then the actions ------------- */
.page-head {
    display: flex; flex-wrap: wrap; align-items: flex-start;
    justify-content: space-between; gap: 1rem; margin-bottom: 1.35rem;
}
.page-head .page-head-text { min-width: 0; }
.page-head h1, .page-head .h1 {
    font-size: 1.5rem; margin: 0 0 .15rem; letter-spacing: -.02em;
}
.page-head .page-head-sub { color: var(--hms-muted); font-size: .9rem; margin: 0; }
.page-head .page-head-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* The filter row sits in its own card so it reads as a tool, not as
   part of the data. */
.toolbar {
    background: #fff; border: 1px solid var(--hms-line);
    border-radius: var(--hms-radius); box-shadow: var(--hms-shadow);
    padding: .9rem 1rem; margin-bottom: 1.15rem;
}
.toolbar form { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; }
.toolbar .form-control, .toolbar .form-select { min-height: 42px; }

/* ---- Cards ------------------------------------------------------ */
.card { border-radius: var(--hms-radius); }
.card-header { padding: 1rem 1.25rem; font-size: .97rem; color: var(--hms-ink); }
.card-header .card-title-icon { color: var(--hms-primary); }

/* Section heading inside a card body. */
.section-title {
    display: flex; align-items: center; gap: .5rem;
    font-size: .74rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--hms-muted-2); font-weight: 800; margin-bottom: .75rem;
}

/* ---- Stat tiles ------------------------------------------------- */
.stat-card { transition: transform .12s ease, box-shadow .12s ease; }
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--hms-shadow-lg); }
.stat-card .card-body { padding: 1.15rem 1.25rem; }
.stat-card .stat-label {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--hms-muted-2); font-weight: 700;
}
.stat-card .stat-value { font-size: 1.75rem; letter-spacing: -.02em; }
.stat-card .stat-sub { font-size: .8rem; color: var(--hms-muted); margin-top: .2rem; }

/* A tile that is also a link should say so. */
a.stat-card, .stat-card a.stretched-link { text-decoration: none; color: inherit; }

/* ---- Quick actions (dashboard) ---------------------------------- */
.quick-actions { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.quick-action {
    display: flex; align-items: center; gap: .85rem;
    background: #fff; border: 1px solid var(--hms-line);
    border-radius: var(--hms-radius); padding: 1rem 1.1rem;
    color: var(--hms-ink); font-weight: 600;
    box-shadow: var(--hms-shadow); transition: all .15s ease;
    min-height: 72px;
}
.quick-action:hover {
    border-color: #c7d2fe; background: var(--hms-primary-soft);
    color: var(--hms-primary); transform: translateY(-2px);
    box-shadow: var(--hms-shadow-lg);
}
.quick-action .qa-icon {
    width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
    display: grid; place-items: center; font-size: 1.25rem;
    background: var(--hms-primary-soft); color: var(--hms-primary);
}
.quick-action .qa-sub { display: block; font-size: .76rem; font-weight: 500; color: var(--hms-muted-2); }
.quick-action:hover .qa-sub { color: var(--hms-primary); }

/* ---- Tables ----------------------------------------------------- */
.table thead th {
    background: var(--hms-surface-2); font-size: .73rem;
    padding: .85rem 1rem; color: var(--hms-muted);
}
.table tbody td { padding: .9rem 1rem; }
.table-hover tbody tr { transition: background .12s ease; }

/* Zebra striping only where rows are dense enough to need it. */
.table-zebra tbody tr:nth-child(even) { background: #fcfdfe; }

/* ---- Badges ----------------------------------------------------- */
.badge-soft {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .35em .7em; border-radius: 999px; font-size: .74rem;
    line-height: 1.35; white-space: nowrap;
}
.badge-checked_in { background: var(--hms-success-soft); color: var(--hms-success); }
.badge-checked_out { background: var(--hms-info-soft); color: var(--hms-info); }

/* Status dot for compact contexts. */
.dot { width: .5rem; height: .5rem; border-radius: 50%; display: inline-block; }
.dot-success { background: #10b981; } .dot-danger { background: #f43f5e; }
.dot-warning { background: #f59e0b; } .dot-muted { background: #cbd5e1; }
.dot-info { background: #3b82f6; }

/* ---- Callouts: an inline note that is not an alert -------------- */
.callout {
    display: flex; align-items: flex-start; gap: .6rem;
    border-radius: 12px; padding: .75rem .9rem;
    font-size: .86rem; line-height: 1.5;
    border: 1px solid transparent;
}
.callout i { font-size: 1rem; flex-shrink: 0; margin-top: .1rem; }
.callout-info    { background: var(--hms-info-soft);    color: #1d4ed8; border-color: #dbeafe; }
.callout-warning { background: var(--hms-warning-soft); color: #b45309; border-color: #fde68a; }
.callout-danger  { background: var(--hms-danger-soft);  color: #be123c; border-color: #fecdd3; }
.callout-success { background: var(--hms-success-soft); color: #047857; border-color: #a7f3d0; }

/* ---- Context bar inside modals ---------------------------------- */
.context-bar {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: .5rem;
    background: var(--hms-surface-2); border: 1px solid var(--hms-line);
    border-radius: 12px; padding: .7rem .9rem; margin-bottom: 1.1rem;
}
.context-bar .context-meta { font-size: .86rem; color: var(--hms-muted); }

/* ---- Key/value list -------------------------------------------- */
.kv-list { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0; }
.kv-list dt {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--hms-muted-2); font-weight: 700; margin-bottom: .15rem;
}
.kv-list dd { margin: 0; font-weight: 600; color: var(--hms-ink); }

/* ---- Alerts & flash messages ------------------------------------ */
.alert {
    border-radius: 12px; border-width: 1px; padding: .9rem 1.1rem;
    display: flex; align-items: center; gap: .7rem;
}
.alert > i:first-child { font-size: 1.15rem; flex-shrink: 0; }
.alert-success { background: var(--hms-success-soft); border-color: #a7f3d0; color: #047857; }
.alert-danger  { background: var(--hms-danger-soft);  border-color: #fecdd3; color: #be123c; }
.alert-warning { background: var(--hms-warning-soft); border-color: #fde68a; color: #b45309; }
.alert .btn-close { margin-inline-start: auto; }

/* Flash messages float above the page so they are seen even when the
   user has already scrolled down to the table they just changed. */
.flash-stack {
    position: fixed; top: 4.75rem; inset-inline-end: 1.25rem;
    z-index: 1080; width: min(26rem, calc(100vw - 2.5rem));
    display: flex; flex-direction: column; gap: .6rem;
    pointer-events: none;
}
.flash-stack .alert {
    pointer-events: auto; box-shadow: var(--hms-shadow-lg);
    margin: 0; animation: hms-slide-in .25s ease;
}
@keyframes hms-slide-in {
    from { opacity: 0; transform: translateY(-.5rem); }
    to   { opacity: 1; transform: none; }
}

/* ---- Modals ----------------------------------------------------- */
.modal-content { border-radius: var(--hms-radius-lg); }
.modal-header { padding: 1.15rem 1.4rem; }
.modal-body { padding: 1.4rem; }
.modal-footer { padding: 1.05rem 1.4rem; gap: .6rem; }
.modal-icon.tone-success { background: var(--hms-success-soft); color: var(--hms-success); }
.modal-icon.tone-warning { background: var(--hms-warning-soft); color: var(--hms-warning); }
.modal-icon.tone-danger  { background: var(--hms-danger-soft);  color: var(--hms-danger); }
.modal-icon.tone-info    { background: var(--hms-info-soft);    color: var(--hms-info); }

/* ---- Empty states ----------------------------------------------- */
.empty-state { padding: 3rem 1.25rem; }
.empty-state i { font-size: 2.5rem; opacity: .35; display: block; margin-bottom: .75rem; }
.empty-state .empty-title {
    display: block; font-weight: 700; color: var(--hms-ink-2);
    font-size: 1rem; margin-bottom: .25rem;
}
.empty-state .empty-sub { display: block; font-size: .875rem; margin-bottom: 1rem; }
.empty-state .btn { margin-top: .25rem; }

/* ---- Availability board ----------------------------------------- */
.avail-grid { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.avail-card {
    background: #fff; border: 1px solid var(--hms-line);
    border-radius: var(--hms-radius); padding: 1rem 1.1rem;
    box-shadow: var(--hms-shadow); position: relative; overflow: hidden;
    transition: transform .12s ease, box-shadow .12s ease;
}
.avail-card:hover { transform: translateY(-2px); box-shadow: var(--hms-shadow-lg); }
/* A colour bar on the leading edge reads faster than a badge alone. */
.avail-card::before {
    content: ''; position: absolute; inset-block: 0; inset-inline-start: 0;
    width: 4px; background: var(--avail-tone, #cbd5e1);
}
.avail-card .avail-room { font-size: 1.2rem; font-weight: 800; color: var(--hms-ink); }
.avail-card .avail-meta { font-size: .78rem; color: var(--hms-muted-2); margin-top: .1rem; }
.avail-card .avail-rate { font-size: .82rem; color: var(--hms-muted); margin-top: .6rem; font-weight: 600; }
.avail-free     { --avail-tone: #10b981; }
.avail-busy     { --avail-tone: #f43f5e; }
.avail-booked   { --avail-tone: #f59e0b; }
.avail-cleaning { --avail-tone: #3b82f6; }
.avail-blocked  { --avail-tone: #64748b; }

.avail-legend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .82rem; color: var(--hms-muted); }
.avail-legend span { display: inline-flex; align-items: center; gap: .4rem; }

/* ---- Monthly room calendar --------------------------------------- */
.calendar-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .8rem; margin-bottom: .8rem;
}
.calendar-filter { min-width: 170px; }
.calendar-month-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; }
.calendar-month-nav strong { color: var(--hms-ink); min-width: 230px; text-align: center; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; color: var(--hms-muted); font-size: .82rem; }
.calendar-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.calendar-key { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.calendar-confirmed { background: #7cc957; color: #fff; }
.calendar-checked-in { background: #30a9e8; color: #fff; }
.calendar-pending { background: #f6ae3e; color: #fff; }
.calendar-checked-out { background: #aab2bd; color: #fff; }
.calendar-empty { background: #fff; border: 1px solid var(--hms-line); }
.monthly-calendar-wrap {
    overflow: auto; background: #fff; border: 1px solid var(--hms-line);
    border-radius: var(--hms-radius); box-shadow: var(--hms-shadow);
}
.monthly-calendar { min-width: 1420px; }
.monthly-row {
    display: grid; grid-template-columns: 86px 130px 112px minmax(1060px, 1fr);
    border-bottom: 1px solid var(--hms-line); min-height: 62px;
}
.monthly-row:last-child { border-bottom: 0; }
.monthly-head { min-height: 54px; position: sticky; top: 0; z-index: 4; background: #f8fafc; }
.calendar-room-col, .calendar-type-col, .calendar-status-col {
    display: flex; flex-direction: column; justify-content: center; padding: .65rem .75rem;
    border-inline-end: 1px solid var(--hms-line); color: var(--hms-ink);
}
.calendar-room-col small { color: var(--hms-muted-2); font-size: .7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-type-col { color: var(--hms-muted); font-size: .82rem; }
.calendar-status-col { align-items: flex-start; }
.calendar-days-head, .calendar-timeline {
    display: grid; grid-template-columns: repeat(var(--calendar-days), minmax(34px, 1fr));
}
.calendar-days-head > div {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border-inline-end: 1px solid var(--hms-line); color: var(--hms-muted); line-height: 1.05;
}
.calendar-days-head small { font-size: .63rem; text-transform: uppercase; }
.calendar-days-head strong { font-size: .78rem; margin-top: .2rem; }
.calendar-days-head .is-weekend { background: #fff8c8; }
.calendar-timeline {
    position: relative; min-height: 61px; align-items: center;
    background-image: repeating-linear-gradient(to right, transparent 0, transparent calc((100% / var(--calendar-days)) - 1px), var(--hms-line) calc((100% / var(--calendar-days)) - 1px), var(--hms-line) calc(100% / var(--calendar-days)));
}
.calendar-booking {
    grid-column: var(--calendar-start) / span var(--calendar-span); z-index: 1;
    display: flex; align-items: flex-start; justify-content: space-between; gap: .35rem;
    min-width: 0; margin: 10px 2px; padding: .42rem .5rem; border-radius: 3px;
    color: #fff; text-decoration: none; font-size: .74rem; line-height: 1.15;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.calendar-booking:hover { color: #fff; filter: brightness(.94); }
.calendar-booking span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.calendar-booking small { font-size: .65rem; opacity: .92; white-space: nowrap; }
.room-status { border-inline-start: 3px solid #10b981; padding-inline-start: .35rem; font-size: .76rem; font-weight: 700; }
.room-status-occupied { border-color: #ef4444; }
.room-status-cleaning { border-color: #3b82f6; }
.room-status-maintenance { border-color: #64748b; }

/* ---- Financial summary strip ------------------------------------ */
.money-strip {
    display: grid; gap: 1px; background: var(--hms-line);
    border: 1px solid var(--hms-line); border-radius: var(--hms-radius);
    overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.money-strip > div { background: #fff; padding: .95rem 1.1rem; }
.money-strip dt {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--hms-muted-2); font-weight: 700; margin-bottom: .2rem;
}
.money-strip dd { margin: 0; font-size: 1.2rem; font-weight: 800; color: var(--hms-ink); }
.money-strip .is-positive dd { color: var(--hms-success); }
.money-strip .is-negative dd { color: var(--hms-danger); }
.money-strip .is-neutral  dd { color: var(--hms-info); }

/* ---- Global AJAX progress bar ----------------------------------- */
#hmsProgress {
    position: fixed; top: 0; inset-inline-start: 0; height: 3px; width: 0;
    background: linear-gradient(90deg, var(--hms-primary), #7c3aed);
    z-index: 2000; transition: width .2s ease, opacity .3s ease; opacity: 0;
}
#hmsProgress.is-active { opacity: 1; }

/* ---- Table row action cluster ----------------------------------- */
.row-actions { display: inline-flex; gap: .3rem; align-items: center; justify-content: flex-end; }
.row-actions form { display: inline; }

/* ---- Sticky form action bar ------------------------------------- */
.form-actions {
    position: sticky; bottom: 0; z-index: 10;
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
    background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px);
    border: 1px solid var(--hms-line); border-radius: var(--hms-radius);
    padding: .85rem 1.1rem; margin-top: 1rem; box-shadow: var(--hms-shadow-lg);
}
.form-actions .spacer { flex: 1; }

/* ---- Danger zone ------------------------------------------------ */
.danger-zone { border-color: #fecdd3 !important; }
.danger-zone .card-header { background: var(--hms-danger-soft); color: #be123c; border-bottom-color: #fecdd3; }

/* ==================================================================
   Responsive refinements
   ================================================================== */
@media (max-width: 991.98px) {
    .app-content { padding: 1.25rem 1rem; }
    .btn { min-height: var(--hms-touch); }
    .btn-icon { width: var(--hms-touch); height: var(--hms-touch); }
    .toolbar { padding: .85rem; }
    .page-head h1, .page-head .h1 { font-size: 1.3rem; }
}

@media (max-width: 767.98px) {
    .flash-stack {
        top: auto; bottom: .75rem; inset-inline: .75rem;
        width: auto;
    }
    .page-head { flex-direction: column; align-items: stretch; }
    .page-head .page-head-actions { width: 100%; }
    .page-head .page-head-actions > * { flex: 1 1 auto; }
    .toolbar form > * { flex: 1 1 100%; max-width: none !important; }
    .quick-actions { grid-template-columns: 1fr 1fr; }
    .quick-action { flex-direction: column; align-items: flex-start; gap: .5rem; min-height: 0; }
    .money-strip { grid-template-columns: 1fr 1fr; }
    .avail-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
    .avail-card { padding: .8rem .85rem; }
    .form-actions { flex-direction: column-reverse; }
    .form-actions > * { width: 100%; }
    .form-actions .spacer { display: none; }
    .kv-list { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 400px) {
    .quick-actions, .avail-grid, .money-strip, .kv-list { grid-template-columns: 1fr; }
}

/* Users who prefer less motion get none of the lift-and-slide. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important; scroll-behavior: auto !important;
    }
    .stat-card:hover, .quick-action:hover, .avail-card:hover { transform: none; }
}