/* ═══════════════════════════════════════════════════════════════════
   HotelizPMS — Main Stylesheet
   Fonts: Barlow Condensed (EN headers) + Cairo (AR)
   Theme: Dark / Light with CSS variables
═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&family=Barlow+Condensed:wght@400;500;600;700&display=swap');

/* ── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── CSS Variables — Metrivo palette: teal #3BBAD0 · navy #0D2347 · gold #C8A42E ── */
.theme-dark {
    --bg: #071525;
    --surface: #0d2040;
    --surface2: #112a52;
    --surface-2: #112a52;
    --surface3: #173565;
    --border: #1e4070;
    --text: #ddeef8;
    --text-muted: #6ea0bc;
    --text-inv: #071525;
    --hover: rgba(255,255,255,.06);
    --accent: #C8A42E;
    --accent-hover: #b09028;
    --primary: #3BBAD0;
    --primary-hover: #2da5bc;
    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #3BBAD0;
    --header-bg: linear-gradient(90deg, #050f1e 0%, #0d2040 50%, #050f1e 100%);
    --sidebar-bg: #08172c;
    --footer-bg: #050f1e;
    --shadow: 0 4px 24px rgba(0,0,0,.55);
    --shadow-sm: 0 2px 8px rgba(0,0,0,.4);
    --header-h: 56px;
    --sidebar-w: 260px;
    --footer-h: 38px;
}

.theme-light {
    --bg: #e8f5fa;
    --surface: #ffffff;
    --surface2: #f0f8fc;
    --surface-2: #f0f8fc;
    --surface3: #d8eef5;
    --border: #a8d5e5;
    --text: #0D2347;
    --text-muted: #3d7898;
    --text-inv: #ffffff;
    --hover: rgba(0,0,0,.04);
    --accent: #C8A42E;
    --accent-hover: #b09028;
    --primary: #1E8FA8;
    --primary-hover: #187e94;
    --success: #16a34a;
    --warning: #d97706;
    --danger: #dc2626;
    --info: #1E8FA8;
    --header-bg: linear-gradient(90deg, #0D2347 0%, #163870 50%, #0D2347 100%);
    --sidebar-bg: #ffffff;
    --footer-bg: #0D2347;
    --shadow: 0 4px 24px rgba(0,0,0,.1);
    --shadow-sm: 0 2px 8px rgba(0,0,0,.08);
    --header-h: 56px;
    --sidebar-w: 260px;
    --footer-h: 38px;
}

/* ── Base ────────────────────────────────────────────────────────── */
html, body {
    height: 100%;
}

body {
    font-family: 'Barlow Condensed', 'Cairo', sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    line-height: 1.5;
}

.rtl {
    direction: rtl;
}

    .rtl body, .rtl * {
        font-family: 'Cairo', 'Barlow Condensed', sans-serif;
    }

/* Restore Font Awesome icon font in RTL mode — Cairo doesn't contain FA glyphs */
.rtl .fa, .rtl .fas, .rtl .far, .rtl .fab, .rtl .fal, .rtl .fad,
.rtl .fa-solid, .rtl .fa-regular, .rtl .fa-light, .rtl .fa-brands, .rtl .fa-thin, .rtl .fa-duotone,
.rtl [class^="fa-"], .rtl [class*=" fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 5 Free", "Font Awesome 5 Brands", FontAwesome !important;
}

a {
    color: var(--primary);
    text-decoration: none;
}

    a:hover {
        opacity: .85;
    }

/* ── Shell ───────────────────────────────────────────────────────── */
.pms-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* ── Header ──────────────────────────────────────────────────────── */
.pms-header {
    height: var(--header-h);
    background: var(--header-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    gap: 12px;
    box-shadow: 0 2px 16px rgba(0,0,0,.6);
    z-index: 200;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sidebar-toggle {
    background: transparent;
    border: none;
    color: rgba(255,255,255,.7);
    font-size: 18px;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background .2s;
}

    .sidebar-toggle:hover {
        background: rgba(255,255,255,.1);
        color: #fff;
    }

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-logo {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.brand-name {
    font-size: 20px;
    font-weight: 400;
    color: rgba(255,255,255,.85);
    letter-spacing: .5px;
}

    .brand-name strong {
        color: var(--accent);
        font-weight: 700;
    }

.header-center {
    flex: 1;
    display: flex;
    justify-content: center;
}

.branch-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 6px;
    padding: 4px 12px;
    color: rgba(255,255,255,.8);
}

.branch-select {
    background: transparent;
    border: none;
    color: rgba(255,255,255,.9);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    outline: none;
    cursor: pointer;
}

    .branch-select option {
        background: #1a2035;
        color: #e2e8f8;
    }

.header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-clock {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,.6);
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
    min-width: 72px;
}

.icon-btn {
    background: transparent;
    border: none;
    color: rgba(255,255,255,.65);
    font-size: 16px;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background .2s, color .2s;
    position: relative;
}

    .icon-btn:hover {
        background: rgba(255,255,255,.1);
        color: #fff;
    }

.lang-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
}

.notification-btn .notif-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--danger);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* User menu */
.user-menu-wrapper {
    position: relative;
}

.user-avatar-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 8px;
    color: rgba(255,255,255,.85);
    padding: 4px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    transition: background .2s;
}

    .user-avatar-btn:hover {
        background: rgba(255,255,255,.1);
    }

.user-avatar {
    width: 28px;
    height: 28px;
    background: var(--accent);
    color: #000;
    border-radius: 50%;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-name {
    font-weight: 600;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    min-width: 200px;
    box-shadow: var(--shadow);
    z-index: 999;
    overflow: hidden;
}

.user-dropdown-header {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .user-dropdown-header strong {
        font-size: 14px;
    }

    .user-dropdown-header small {
        color: var(--text-muted);
        font-size: 11px;
    }

.user-dropdown hr {
    border-color: var(--border);
    margin: 0;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: none;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s;
}

    .dropdown-item:hover {
        background: var(--surface2);
    }

    .dropdown-item.danger {
        color: var(--danger);
    }

        .dropdown-item.danger:hover {
            background: rgba(239,68,68,.1);
        }

/* ── Body (sidebar + main) ──────────────────────────────────────── */
.pms-body {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* ── Sidebar ─────────────────────────────────────────────────────── */
.pms-sidebar {
    width: var(--sidebar-w);
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width .25s ease;
    flex-shrink: 0;
    z-index: 150;
}

    .pms-sidebar.collapsed {
        width: 0;
    }

.sidebar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface2);
    flex-shrink: 0;
}

    .sidebar-search i {
        color: var(--text-muted);
        font-size: 13px;
    }

    .sidebar-search input {
        flex: 1;
        background: transparent;
        border: none;
        outline: none;
        color: var(--text);
        font-family: inherit;
        font-size: 13px;
    }

        .sidebar-search input::placeholder {
            color: var(--text-muted);
        }

.nav-groups {
    list-style: none;
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.nav-group-header {
    width: 100%;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    cursor: pointer;
    transition: background .15s, color .15s;
}

    .nav-group-header:hover {
        background: var(--surface2);
        color: var(--text);
    }

    .nav-group-header.open {
        color: var(--accent);
    }

.nav-group-icon {
    font-size: 14px;
    width: 18px;
    text-align: center;
}

.nav-group-label {
    flex: 1;
    text-align: left;
}

.rtl .nav-group-label {
    text-align: right;
}

.nav-group-arrow {
    font-size: 11px;
    transition: transform .2s;
}

.nav-group-header.open .nav-group-arrow {
    transform: rotate(90deg);
}

.nav-items {
    list-style: none;
    padding: 0 0 4px;
    border-bottom: 1px solid var(--border);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 36px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    transition: background .15s, color .15s;
    border-left: 3px solid transparent;
}

.rtl .nav-item {
    border-left: none;
    border-right: 3px solid transparent;
    padding: 8px 36px 8px 14px;
}

.nav-item:hover {
    background: var(--surface2);
    color: var(--text);
}

.nav-item.active {
    background: rgba(59,130,246,.12);
    color: var(--primary);
    border-left-color: var(--primary);
    font-weight: 600;
}

.rtl .nav-item.active {
    border-right-color: var(--primary);
    border-left-color: transparent;
}

.nav-item-icon {
    font-size: 12px;
    width: 16px;
    text-align: center;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 140;
}

@media (max-width: 768px) {
    .sidebar-overlay {
        display: block;
    }

    .pms-sidebar {
        position: fixed;
        top: var(--header-h);
        left: 0;
        bottom: var(--footer-h);
        z-index: 150;
    }

    .rtl .pms-sidebar {
        left: auto;
        right: 0;
    }
}

/* ── Main Content ────────────────────────────────────────────────── */
.pms-main {
    flex: 1;
    overflow-y: auto;
    background: var(--bg);
    display: flex;
    flex-direction: column;
}

.pms-content {
    flex: 1;
    padding: 20px 24px;
    max-width: 1600px;
    width: 100%;
}

/* ── Footer ──────────────────────────────────────────────────────── */
.pms-footer {
    height: var(--footer-h);
    background: var(--footer-bg);
    border-top: 1px solid rgba(255,255,255,.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    font-size: 11px;
    color: rgba(255,255,255,.4);
    flex-shrink: 0;
}

    .pms-footer strong {
        color: var(--accent);
    }

.footer-version {
    font-size: 10px;
}

/* ── Page Header Bar ─────────────────────────────────────────────── */
.page-header-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 12px;
    flex-wrap: wrap;
}

.page-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    line-height: 1.2;
}

.page-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin: 4px 0 0;
}

.page-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Cards ───────────────────────────────────────────────────────── */
.pms-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}

    .pms-card .card-header {
        padding: 12px 16px;
        border-bottom: 1px solid var(--border);
        font-weight: 700;
        font-size: 14px;
        background: transparent;
        color: var(--text);
    }

    .pms-card .card-body {
        padding: 16px;
    }

/* ── KPI Grid ────────────────────────────────────────────────────── */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}

.kpi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--shadow-sm);
    transition: transform .15s, box-shadow .15s;
}

    .kpi-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow);
    }

.kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.kpi-primary .kpi-icon {
    background: rgba(59,130,246,.15);
    color: var(--primary);
}

.kpi-success .kpi-icon {
    background: rgba(34,197,94,.15);
    color: var(--success);
}

.kpi-warning .kpi-icon {
    background: rgba(245,158,11,.15);
    color: var(--warning);
}

.kpi-info .kpi-icon {
    background: rgba(6,182,212,.15);
    color: var(--info);
}

.kpi-danger .kpi-icon {
    background: rgba(239,68,68,.15);
    color: var(--danger);
}

.kpi-secondary .kpi-icon {
    background: rgba(107,114,153,.15);
    color: var(--text-muted);
}

.kpi-value {
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
}

.kpi-label {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: .5px;
    margin-top: 3px;
}

/* ── Shortcut tiles ──────────────────────────────────────────────── */
.section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 12px;
    letter-spacing: .5px;
}

.shortcut-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.shortcut-tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    transition: border-color .15s, background .15s, transform .15s;
}

    .shortcut-tile:hover {
        border-color: var(--primary);
        background: rgba(59,130,246,.08);
        color: var(--primary);
        transform: translateY(-2px);
    }

.shortcut-icon {
    font-size: 24px;
}

/* ── Table ───────────────────────────────────────────────────────── */
.pms-table {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0;
    font-size: 13px;
}

    .pms-table thead th {
        background: var(--surface2);
        color: var(--text-muted);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .5px;
        font-weight: 700;
        border-bottom: 2px solid var(--border);
        padding: 10px 14px;
        white-space: nowrap;
    }

    .pms-table tbody td {
        padding: 10px 14px;
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
    }

    .pms-table tbody tr:hover {
        background: var(--surface2);
    }

    .pms-table tbody tr:last-child td {
        border-bottom: none;
    }

.pms-table-sm thead th, .pms-table-sm tbody td {
    padding: 7px 12px;
}

/* icon-btn inside tables — override header style */
.pms-table .icon-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 13px;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

    .pms-table .icon-btn:hover {
        background: var(--hover);
        color: var(--text);
        border-color: var(--text-muted);
    }

    .pms-table .icon-btn.danger {
        color: var(--danger);
        border-color: rgba(239,68,68,.3);
    }

        .pms-table .icon-btn.danger:hover {
            background: rgba(239,68,68,.1);
            border-color: var(--danger);
        }

.table-responsive {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

/* ── Pagination ──────────────────────────────────────────────────── */
.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 4px;
    font-size: 13px;
}

.page-indicator {
    padding: 4px 12px;
    background: var(--surface2);
    border-radius: 4px;
    font-weight: 600;
}

/* ── Badges ──────────────────────────────────────────────────────── */
.badge-success {
    background: rgba(34,197,94,.15);
    color: var(--success);
    border: 1px solid var(--success);
}

.badge-danger {
    background: rgba(239,68,68,.15);
    color: var(--danger);
    border: 1px solid var(--danger);
}

.badge-warning {
    background: rgba(245,158,11,.15);
    color: var(--warning);
    border: 1px solid var(--warning);
}

.badge-secondary {
    background: var(--surface3);
    color: var(--text-muted);
}

.badge-branch {
    background: rgba(59,130,246,.12);
    color: var(--primary);
    border: 1px solid var(--primary);
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 20px;
}

/* ── Forms ───────────────────────────────────────────────────────── */
.form-control, .form-select {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    border-radius: 6px;
    padding: 8px 12px;
    transition: border-color .15s, box-shadow .15s;
}

    .form-control:focus, .form-select:focus {
        background: var(--surface2);
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(59,130,246,.2);
        color: var(--text);
        outline: none;
    }

    .form-control::placeholder {
        color: var(--text-muted);
    }

.form-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 5px;
}

.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface2);
    transition: border-color .15s;
}

    .checkbox-item:hover {
        border-color: var(--primary);
    }

    .checkbox-item input[type=checkbox] {
        accent-color: var(--primary);
    }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    padding: 7px 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all .2s;
    border: 1px solid transparent;
}

    .btn:disabled {
        opacity: .55;
        cursor: not-allowed;
    }

.btn-primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

    .btn-primary:hover {
        background: var(--primary-hover);
    }

.btn-success {
    background: var(--success);
    color: #fff;
}

.btn-danger {
    background: var(--danger);
    color: #fff;
}

.btn-secondary {
    background: var(--surface3);
    color: var(--text);
    border-color: var(--border);
}

    .btn-secondary:hover {
        background: var(--surface2);
    }

.btn-warning {
    background: var(--warning);
    color: #000;
}

.btn-outline-primary {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
}

    .btn-outline-primary:hover {
        background: rgba(59,130,246,.1);
    }

.btn-outline-danger {
    background: transparent;
    color: var(--danger);
    border-color: var(--danger);
}

    .btn-outline-danger:hover {
        background: rgba(239,68,68,.1);
    }

.btn-outline-secondary {
    background: transparent;
    color: var(--text-muted);
    border-color: var(--border);
}

    .btn-outline-secondary:hover {
        background: var(--surface2);
        color: var(--text);
    }

.btn-lg {
    padding: 10px 24px;
    font-size: 15px;
}

.btn-sm {
    padding: 4px 10px;
    font-size: 12px;
}

.btn-link {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--primary);
}

/* ── Toolbar ─────────────────────────────────────────────────────── */
.list-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.input-group {
    display: flex;
}

.input-group-text {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-right: none;
    color: var(--text-muted);
    padding: 6px 12px;
    border-radius: 6px 0 0 6px;
    font-size: 13px;
}

.input-group .form-control {
    border-radius: 0 6px 6px 0;
}

/* ── Modal ───────────────────────────────────────────────────────── */
.modal-content {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    box-shadow: var(--shadow);
}

.modal-header {
    border-bottom: 1px solid var(--border);
    padding: 16px 20px;
}

.modal-title {
    font-size: 16px;
    font-weight: 700;
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    border-top: 1px solid var(--border);
    padding: 14px 20px;
}

.btn-close {
    filter: invert(1) brightness(.7);
}

.theme-light .btn-close {
    filter: none;
}

.modal-backdrop {
    background: rgba(0,0,0,.6);
}

/* ── Role list sidebar ───────────────────────────────────────────── */
.role-list {
    list-style: none;
}

.role-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    transition: background .15s;
}

    .role-item:hover {
        background: var(--surface2);
    }

    .role-item.active {
        background: rgba(59,130,246,.1);
        color: var(--primary);
    }

.group-row {
    background: var(--surface2) !important;
}

    .group-row td {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .5px;
        color: var(--text-muted);
        padding: 7px 14px !important;
    }

/* ── Alerts ──────────────────────────────────────────────────────── */
.alert {
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
}

.alert-danger {
    background: rgba(239,68,68,.1);
    border: 1px solid rgba(239,68,68,.3);
    color: var(--danger);
}

.alert-success {
    background: rgba(34,197,94,.1);
    border: 1px solid rgba(34,197,94,.3);
    color: var(--success);
}

.alert-warning {
    background: rgba(245,158,11,.1);
    border: 1px solid rgba(245,158,11,.3);
    color: var(--warning);
}

/* ── Toast ───────────────────────────────────────────────────────── */
.toast-container {
    position: fixed;
    bottom: 52px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 280px;
}

.rtl .toast-container {
    right: auto;
    left: 20px;
}

.toast-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: var(--shadow);
    animation: slideIn .25s ease;
}

.toast-success {
    background: #052e16;
    border-left: 4px solid var(--success);
    color: #4ade80;
}

.toast-error {
    background: #2d0a0a;
    border-left: 4px solid var(--danger);
    color: #f87171;
}

.toast-warning {
    background: #2d1b00;
    border-left: 4px solid var(--warning);
    color: #fbbf24;
}

.toast-info {
    background: #0a1f2d;
    border-left: 4px solid var(--info);
    color: #38bdf8;
}

@keyframes slideIn {
    from {
        transform: translateX(60px);
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

/* ── Login ───────────────────────────────────────────────────────── */
.login-shell {
    min-height: 100vh;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

    .login-shell::before {
        content: '';
        position: absolute;
        width: 600px;
        height: 600px;
        background: radial-gradient(circle, rgba(59,186,208,.12) 0%, transparent 70%);
        top: -200px;
        right: -200px;
        pointer-events: none;
    }

    .login-shell::after {
        content: '';
        position: absolute;
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, rgba(200,164,46,.08) 0%, transparent 70%);
        bottom: -100px;
        left: -100px;
        pointer-events: none;
    }

.login-wrapper {
    width: 100%;
    max-width: 420px;
    padding: 20px;
}

.login-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 36px 32px;
    box-shadow: 0 16px 64px rgba(0,0,0,.4);
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.login-brand-logo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
    flex-shrink: 0;
}

.login-title {
    font-size: 28px;
    font-weight: 400;
    color: var(--text);
    margin: 0;
    line-height: 1;
}

    .login-title strong {
        color: var(--accent);
        font-weight: 700;
    }

.login-subtitle {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
    margin-top: 3px;
}

.login-btn {
    position: relative;
}

    .login-btn.loading {
        opacity: .8;
    }

.login-footer {
    text-align: center;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* ── Universal placeholder styling (covers inputs without .form-control) */
input::placeholder,
textarea::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.8;
    font-style: italic;
}

/* ── Loading ─────────────────────────────────────────────────────── */
.loading-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px;
    color: var(--text-muted);
    font-size: 14px;
}

.spinner-border {
    border-color: var(--primary);
    border-right-color: transparent;
}

/* ── Empty state ─────────────────────────────────────────────────── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    color: var(--text-muted);
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}

/* ── Not Found ───────────────────────────────────────────────────── */
.not-found-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    color: var(--text-muted);
    text-align: center;
}

/* ── Scrollbar ───────────────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--text-muted);
    }

/* ── Utilities ───────────────────────────────────────────────────── */
.d-flex {
    display: flex;
}

.align-items-center {
    align-items: center;
}

.justify-content-between {
    justify-content: space-between;
}

.flex-grow-1 {
    flex: 1;
}

.gap-1 {
    gap: 4px;
}

.gap-2 {
    gap: 8px;
}

.gap-3 {
    gap: 12px;
}

.me-1 {
    margin-right: 4px;
}

.me-2 {
    margin-right: 8px;
}

.ms-1 {
    margin-left: 4px;
}

.ms-2 {
    margin-left: 8px;
}

.mb-3 {
    margin-bottom: 12px;
}

.mb-4 {
    margin-bottom: 16px;
}

.mt-3 {
    margin-top: 12px;
}

.mt-4 {
    margin-top: 16px;
}

.p-0 {
    padding: 0;
}

.ps-4 {
    padding-left: 24px;
}

.text-center {
    text-align: center;
}

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

.text-danger {
    color: var(--danger);
}

.text-success {
    color: var(--success);
}

.py-4 {
    padding-top: 16px;
    padding-bottom: 16px;
}

.w-100 {
    width: 100%;
}

.h-100 {
    height: 100%;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -6px;
}

    .row.g-3 > * {
        padding: 6px;
    }

.col-12 {
    width: 100%;
}

.col-md-4 {
    width: 33.33%;
}

.col-md-6 {
    width: 50%;
}

.col-md-8 {
    width: 66.66%;
}

@media (max-width: 768px) {
    .col-md-4, .col-md-6, .col-md-8 {
        width: 100%;
    }
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
}

small {
    font-size: 11px;
}

strong {
    font-weight: 700;
}

hr {
    border-color: var(--border);
}

/* ═══════════════════════════════════════════════════════════════════════
   ADDITIONAL COMPONENTS  (appended)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Page Header ─────────────────────────────────────────────────────── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    margin-bottom: 0;
}

.page-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

    .page-header-left > .fa, .page-header-left > i {
        font-size: 22px;
        color: var(--accent-gold);
    }

.page-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}

.page-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.page-header-right {
    display: flex;
    gap: 8px;
}

/* ── Pages Admin Layout ──────────────────────────────────────────────── */
.pages-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    height: calc(100vh - 56px - 38px - 57px); /* full height minus header/footer/page-header */
    overflow: hidden;
}

.pages-groups-panel, .pages-list-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pages-groups-panel {
    border-right: 1px solid var(--border);
    background: var(--surface);
}

.pages-list-panel {
    background: var(--bg);
    overflow-y: auto;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: .4px;
    flex-shrink: 0;
}

.badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--primary);
    color: #fff;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}

.groups-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
}

.group-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s;
}

    .group-item:hover {
        background: var(--hover);
    }

    .group-item.active {
        background: rgba(37, 99, 168, .14);
    }

.group-item-info {
    flex: 1;
    min-width: 0;
}

.group-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.group-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}

.group-actions {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity .15s;
}

.group-item:hover .group-actions {
    opacity: 1;
}

.search-box-sm {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 10px;
}

    .search-box-sm i {
        color: var(--text-muted);
        font-size: 11px;
    }

    .search-box-sm input {
        background: none;
        border: none;
        outline: none;
        color: var(--text);
        font-size: 12px;
        width: 140px;
    }

.route-code {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 11px;
    color: var(--primary);
    font-family: monospace;
}

.empty-state-sm {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 16px;
    color: var(--text-muted);
    font-size: 12px;
}

    .empty-state-sm i {
        font-size: 24px;
        opacity: .4;
    }

/* ── Icon picker input ───────────────────────────────────────────────── */
.icon-picker-input {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .icon-picker-input .icon-preview {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: 6px;
        font-size: 14px;
        color: var(--accent-gold);
        flex-shrink: 0;
    }

    .icon-picker-input .form-control {
        flex: 1;
    }

/* ── Toggle label ────────────────────────────────────────────────────── */
.pms-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    user-select: none;
}

    .pms-toggle-label input[type=checkbox] {
        display: none;
    }

.pms-toggle-slider {
    width: 38px;
    height: 20px;
    border-radius: 10px;
    background: var(--border);
    position: relative;
    transition: background .2s;
    flex-shrink: 0;
}

    .pms-toggle-slider::after {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px;
        width: 14px;
        height: 14px;
        background: #fff;
        border-radius: 50%;
        transition: left .2s;
        box-shadow: 0 1px 3px rgba(0,0,0,.2);
    }

.pms-toggle-label input:checked + .pms-toggle-slider {
    background: var(--success);
}

    .pms-toggle-label input:checked + .pms-toggle-slider::after {
        left: 21px;
    }

/* ── Form card centered (change password) ───────────────────────────── */
.form-card-centered {
    display: flex;
    justify-content: center;
    padding: 32px 24px;
}

.form-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 28px 32px;
    width: 100%;
    max-width: 520px;
    box-shadow: var(--shadow-md, 0 4px 18px rgba(0,0,0,.12));
}

.form-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* ── Password strength ───────────────────────────────────────────────── */
.password-strength {
    display: flex;
    align-items: center;
    gap: 8px;
}

.strength-bars {
    display: flex;
    gap: 4px;
}

.strength-bar {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--border);
}

    .strength-bar.filled.s-1 {
        background: var(--danger);
    }

    .strength-bar.filled.s-2 {
        background: var(--warning, #d97706);
    }

    .strength-bar.filled.s-3 {
        background: #f0c040;
    }

    .strength-bar.filled.s-4 {
        background: var(--success);
    }

.strength-label {
    font-size: 11px;
    font-weight: 700;
}

    .strength-label.s-1 {
        color: var(--danger);
    }

    .strength-label.s-2 {
        color: var(--warning, #d97706);
    }

    .strength-label.s-3 {
        color: #f0c040;
    }

    .strength-label.s-4 {
        color: var(--success);
    }

.password-hints {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.hint-ok, .hint-fail {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 4px;
}

.hint-ok {
    color: var(--success);
    background: rgba(22,163,74,.1);
}

.hint-fail {
    color: var(--text-muted);
    background: var(--surface-2);
}

/* ── Success banner ──────────────────────────────────────────────────── */
.success-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: rgba(22,163,74,.1);
    border: 1px solid rgba(22,163,74,.3);
    border-radius: 10px;
    padding: 18px 20px;
}

    .success-banner .fa {
        font-size: 28px;
        color: var(--success);
        flex-shrink: 0;
        margin-top: 2px;
    }

    .success-banner strong {
        font-size: 14px;
        display: block;
        margin-bottom: 4px;
        color: var(--text);
    }

    .success-banner div {
        font-size: 12px;
        color: var(--text-muted);
    }

/* ── Form actions bar ───────────────────────────────────────────────── */
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* ── Form errors ─────────────────────────────────────────────────────── */
.form-errors {
    background: rgba(220,38,38,.08);
    border: 1px solid rgba(220,38,38,.25);
    border-radius: 8px;
    padding: 10px 14px;
    color: var(--danger);
    font-size: 12px;
    margin-top: 8px;
}

    .form-errors > div {
        padding: 2px 0;
    }

        .form-errors > div::before {
            content: '• ';
        }

/* ── Form hint ───────────────────────────────────────────────────────── */
.form-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 3px;
}

/* ── Loading placeholder ─────────────────────────────────────────────── */
.loading-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    color: var(--text-muted);
}

/* ── Status badges ───────────────────────────────────────────────────── */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
}

.status-active {
    background: rgba(22,163,74,.1);
    color: var(--success);
}

.status-inactive {
    background: rgba(220,38,38,.08);
    color: var(--danger);
}

/* ── Misc utilities ──────────────────────────────────────────────────── */
.pt-4 {
    padding-top: 16px;
}

.is-invalid {
    border-color: var(--danger) !important;
}

.invalid-feedback {
    color: var(--danger);
    font-size: 11px;
    margin-top: 3px;
}

code {
    font-family: 'Courier New', monospace;
}

[dir="rtl"] .pages-groups-panel {
    border-right: none;
    border-left: 1px solid var(--border);
}

[dir="rtl"] .group-actions {
    flex-direction: row-reverse;
}

[dir="rtl"] .page-header-left {
    flex-direction: row-reverse;
}

[dir="rtl"] .form-actions {
    flex-direction: row-reverse;
}

/* ── Danger button + small modal + danger modal header ───────────────── */
.pms-btn-danger {
    background: var(--danger);
    color: #fff;
    border: none;
}

    .pms-btn-danger:hover {
        background: #b91c1c;
    }

.pms-modal-sm {
    max-width: 420px !important;
}

.danger-header {
    background: rgba(220,38,38,.08) !important;
    border-bottom-color: rgba(220,38,38,.2) !important;
    color: var(--danger) !important;
}

    .danger-header .modal-close-btn {
        color: var(--danger) !important;
    }

/* ═══════════════════════════════════════════════════════════════════════
   MODAL SYSTEM
   ═══════════════════════════════════════════════════════════════════════ */
.pms-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    backdrop-filter: blur(2px);
}

.pms-modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
    display: flex;
    flex-direction: column;
}

.pms-modal-lg {
    max-width: 720px !important;
}

.pms-modal-xl {
    max-width: 90vw !important;
    width: 90vw;
}

.pms-modal-sm {
    max-width: 420px !important;
}

.pms-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: var(--surface-2, var(--surface));
    border-bottom: 1px solid var(--border);
    border-radius: 12px 12px 0 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    flex-shrink: 0;
}

.pms-modal-body {
    padding: 20px;
    flex: 1;
}

.pms-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    background: var(--surface-2, var(--surface));
    border-top: 1px solid var(--border);
    border-radius: 0 0 12px 12px;
    flex-shrink: 0;
}

.modal-close-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background .15s, color .15s;
    font-size: 14px;
}

    .modal-close-btn:hover {
        background: var(--hover);
        color: var(--text);
    }

/* form rows inside modals */
.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 14px;
}

    .form-group label {
        font-size: 12px;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: .4px;
    }

    .form-group .req {
        color: var(--danger);
        margin-left: 2px;
    }

.danger-header {
    background: rgba(220,38,38,.08) !important;
    border-bottom-color: rgba(220,38,38,.2) !important;
    color: var(--danger) !important;
}

    .danger-header .modal-close-btn {
        color: var(--danger) !important;
    }

/* input-with-toggle (password fields) */
.input-with-toggle {
    position: relative;
    display: flex;
    align-items: center;
}

    .input-with-toggle .form-control {
        padding-right: 40px;
        width: 100%;
    }

.toggle-eye {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13px;
    padding: 0;
}

    .toggle-eye:hover {
        color: var(--text);
    }

[dir="rtl"] .pms-modal-footer {
    flex-direction: row-reverse;
}

[dir="rtl"] .form-row-2 {
    direction: rtl;
}

/* ── Auto-route input ────────────────────────────────────────────────── */
.route-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

    .route-input-wrap .form-control {
        padding-right: 40px;
        width: 100%;
    }

        .route-input-wrap .form-control.route-auto {
            background: rgba(34,197,94,.07) !important;
            border-color: rgba(34,197,94,.4) !important;
            color: var(--success) !important;
            font-family: monospace;
            font-size: 12px !important;
        }

.route-lock-btn {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-muted);
    padding: 2px 4px;
    border-radius: 4px;
    transition: color .15s, background .15s;
}

    .route-lock-btn:hover {
        background: var(--hover);
        color: var(--text);
    }

    .route-lock-btn.locked {
        color: var(--success);
    }

/* ── DB Table input ──────────────────────────────────────────────────── */
.db-table-input {
    position: relative;
    display: flex;
    align-items: center;
}

    .db-table-input .form-control {
        padding-left: 34px;
        width: 100%;
    }

.db-table-icon {
    position: absolute;
    left: 10px;
    color: var(--primary);
    font-size: 13px;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   IMAGE UPLOAD WIDGET
   ═══════════════════════════════════════════════════════════════════════ */
.image-upload-widget {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.image-upload-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.image-preview-box {
    width: 100%;
    height: 140px;
    border: 2px dashed var(--border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    transition: border-color .2s, background .2s;
    background: var(--surface-2, var(--surface));
}

    .image-preview-box:hover {
        border-color: var(--primary);
        background: rgba(59,130,246,.04);
    }

    .image-preview-box.has-image {
        border-style: solid;
        border-color: var(--border);
    }

.image-preview-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

.image-preview-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    opacity: 0;
    transition: opacity .2s;
    color: #fff;
    font-size: 13px;
}

.image-preview-box:hover .image-preview-overlay {
    opacity: 1;
}

.image-preview-overlay i {
    font-size: 20px;
}

.image-upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
}

    .image-upload-placeholder i {
        font-size: 28px;
        opacity: .4;
    }

    .image-upload-placeholder span {
        font-size: 13px;
        font-weight: 500;
    }

    .image-upload-placeholder small {
        font-size: 11px;
        opacity: .6;
    }

.image-remove-btn {
    align-self: flex-start;
    background: rgba(220,38,38,.08);
    border: 1px solid rgba(220,38,38,.2);
    color: var(--danger);
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: background .15s;
}

    .image-remove-btn:hover {
        background: rgba(220,38,38,.15);
    }

.image-upload-error {
    font-size: 12px;
    color: var(--danger);
    background: rgba(220,38,38,.08);
    border-radius: 6px;
    padding: 5px 10px;
}

/* ═══════════════════════════════════════════════════════════════════════
   SERVICES 3-PANEL LAYOUT
   ═══════════════════════════════════════════════════════════════════════ */
.services-layout {
    display: grid;
    grid-template-columns: 260px 1fr 1fr;
    height: calc(100vh - 56px - 38px - 57px);
    overflow: hidden;
}

.services-tree-panel {
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface);
}

.services-taxes-panel {
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: var(--bg);
}

.services-details-panel {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: var(--bg);
}

.services-tree-body {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
}

/* ── Tree node ───────────────────────────────────────────────────────── */
.tree-node {
}

.tree-children {
    padding-left: 16px;
    border-left: 1px dashed var(--border);
    margin-left: 12px;
}

.tree-node-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .12s;
    min-height: 34px;
}

    .tree-node-row:hover {
        background: var(--hover);
    }

    .tree-node-row.selected {
        background: rgba(37,99,168,.14);
    }

.tree-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    flex-shrink: 0;
    font-size: 10px;
}

    .tree-toggle:hover {
        background: var(--hover);
        color: var(--text);
    }

.tree-toggle-spacer {
    width: 18px;
    flex-shrink: 0;
}

.tree-node-icon {
    font-size: 13px;
    color: var(--accent-gold);
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}

.tree-node-info {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.tree-node-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tree-node-code {
    font-size: 10px;
    color: var(--text-muted);
    font-family: monospace;
}

.tree-tax-badge {
    font-size: 10px;
    font-weight: 700;
    background: rgba(59,130,246,.12);
    color: var(--primary);
    border-radius: 4px;
    padding: 1px 5px;
    flex-shrink: 0;
}

/* ── Selected table row ──────────────────────────────────────────────── */
.row-selected td {
    background: rgba(59,130,246,.08) !important;
}

/* ── System Config tabs ──────────────────────────────────────────────── */
.config-form-body {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--header-h) - var(--footer-h) - 57px);
    overflow: hidden;
}

/* Tab bar */
.config-tabs {
    display: flex;
    gap: 6px;
    padding: 12px 20px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

    .config-tabs::-webkit-scrollbar {
        display: none;
    }

/* Individual tab — pill style */
.config-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--surface2);
    border: 1px solid var(--border);
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 20px;
    white-space: nowrap;
    transition: color .15s, background .15s, border-color .15s, box-shadow .15s;
    letter-spacing: .3px;
    position: relative;
}

    .config-tab i {
        font-size: 13px;
        opacity: .7;
        transition: opacity .15s;
    }

    .config-tab:hover {
        color: var(--text);
        background: var(--surface3);
        border-color: var(--primary);
    }

        .config-tab:hover i {
            opacity: 1;
        }

    /* Active tab */
    .config-tab.active {
        color: #fff;
        background: var(--primary);
        border-color: var(--primary);
        box-shadow: 0 3px 12px rgba(59,130,246,.35);
    }

        .config-tab.active i {
            opacity: 1;
            color: rgba(255,255,255,.9);
        }

/* Tab content area */
.config-tab-content {
    flex: 1;
    overflow-y: auto;
    padding: 28px 28px 40px;
    background: var(--bg);
}

/* Section title inside tab */
.config-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    border-bottom: 2px solid var(--border);
    padding-bottom: 10px;
    margin-bottom: 22px;
    letter-spacing: .3px;
}

    .config-section-title i {
        color: var(--primary);
        font-size: 15px;
    }

.form-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

[dir="rtl"] .services-tree-panel {
    border-right: none;
    border-left: 1px solid var(--border);
}

[dir="rtl"] .services-taxes-panel {
    border-right: none;
    border-left: 1px solid var(--border);
}

[dir="rtl"] .tree-children {
    padding-left: 0;
    padding-right: 16px;
    border-left: none;
    border-right: 1px dashed var(--border);
    margin-left: 0;
    margin-right: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════
   PMS GRID  —  D365-style data grid with filter/sort/paging
   ═══════════════════════════════════════════════════════════════════════ */

.pmsgrid-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

/* ── Toolbar ─────────────────────────────────────────────────────────── */
.pmsgrid-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.pmsgrid-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 5px 10px;
    min-width: 220px;
    transition: border-color .15s;
}

    .pmsgrid-search:focus-within {
        border-color: var(--primary);
    }

    .pmsgrid-search i {
        color: var(--text-muted);
        font-size: 12px;
        flex-shrink: 0;
    }

    .pmsgrid-search input {
        background: none;
        border: none;
        outline: none;
        color: var(--text);
        font-family: inherit;
        font-size: 13px;
        flex: 1;
    }

        .pmsgrid-search input::placeholder {
            color: var(--text-muted);
        }

.pmsgrid-clear-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 11px;
    padding: 0;
    transition: color .15s;
}

    .pmsgrid-clear-btn:hover {
        color: var(--danger);
    }

.pmsgrid-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pmsgrid-count {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
}

.pmsgrid-filter-clear {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(239,68,68,.08);
    border: 1px solid rgba(239,68,68,.25);
    color: var(--danger);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}

    .pmsgrid-filter-clear:hover {
        background: rgba(239,68,68,.15);
    }

.pmsgrid-filter-badge {
    background: var(--danger);
    color: #fff;
    border-radius: 10px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 700;
}

/* ── Table ───────────────────────────────────────────────────────────── */
.pmsgrid-table-wrap {
    overflow-x: auto;
    overflow-y: visible;
}

.pmsgrid-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--text);
}

/* ── Header row ──────────────────────────────────────────────────────── */
.pmsgrid-head-row .pmsgrid-th {
    background: var(--surface2);
    padding: 0;
    border-bottom: 2px solid var(--border);
    border-right: 1px solid var(--border);
    white-space: nowrap;
    user-select: none;
}

    .pmsgrid-head-row .pmsgrid-th:last-child {
        border-right: none;
    }

.pmsgrid-th-inner {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-muted);
}

.pmsgrid-th.sortable .pmsgrid-th-inner {
    cursor: pointer;
}

.pmsgrid-th.sortable:hover .pmsgrid-th-inner {
    color: var(--text);
    background: var(--hover);
}

.pmsgrid-th.sorted .pmsgrid-th-inner {
    color: var(--primary);
}

.pmsgrid-sort-icon {
    font-size: 10px;
    opacity: .5;
    margin-left: auto;
}

.pmsgrid-th.sorted .pmsgrid-sort-icon {
    opacity: 1;
    color: var(--primary);
}

.pmsgrid-th-actions {
    width: 80px;
    min-width: 80px;
}

/* ── Audit columns ───────────────────────────────────────────────────── */
.pmsgrid-audit-th {
    width: 130px;
    min-width: 120px;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    opacity: .75;
}
.pmsgrid-audit-cell {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.pmsgrid-audit-user {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--surface-2, rgba(0,0,0,.04));
    border-radius: 20px;
    padding: 2px 8px;
}

/* ── Filter row ──────────────────────────────────────────────────────── */
.pmsgrid-filter-row td {
    background: var(--surface);
    padding: 5px 6px;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
}

    .pmsgrid-filter-row td:last-child {
        border-right: none;
    }

.pmsgrid-filter-input-wrap {
    display: flex;
    align-items: center;
    gap: 3px;
    position: relative;
}

.pmsgrid-filter-op {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 4px 0 0 4px;
    padding: 4px 4px;
    font-size: 10px;
    font-family: inherit;
    cursor: pointer;
    min-width: 70px;
    flex-shrink: 0;
    outline: none;
}

    .pmsgrid-filter-op:focus {
        border-color: var(--primary);
    }

.pmsgrid-filter-input {
    flex: 1;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-left: none;
    color: var(--text);
    border-radius: 0 4px 4px 0;
    padding: 4px 24px 4px 8px;
    font-size: 12px;
    font-family: inherit;
    outline: none;
    width: 100%;
    transition: border-color .15s;
}

    .pmsgrid-filter-input:focus {
        border-color: var(--primary);
        background: var(--surface);
    }

    .pmsgrid-filter-input::placeholder {
        color: var(--text-muted);
        font-size: 11px;
    }

/* standalone filter input (no op dropdown) */
.pmsgrid-filter-cell .pmsgrid-filter-input:first-child {
    border-left: 1px solid var(--border);
    border-radius: 4px;
}

.pmsgrid-filter-x {
    position: absolute;
    right: 4px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 10px;
    padding: 2px;
    transition: color .15s;
}

    .pmsgrid-filter-x:hover {
        color: var(--danger);
    }

.pmsgrid-filter-select {
    width: 100%;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    font-family: inherit;
    outline: none;
}

    .pmsgrid-filter-select:focus {
        border-color: var(--primary);
    }

.pmsgrid-date-filter {
    display: flex;
    gap: 4px;
}

    .pmsgrid-date-filter .pmsgrid-filter-input {
        border-left: 1px solid var(--border);
        border-radius: 4px;
        padding: 4px 6px;
    }

/* ── Body rows ───────────────────────────────────────────────────────── */
.pmsgrid-row {
    transition: background .1s;
}

    .pmsgrid-row:hover {
        background: var(--hover);
    }

    .pmsgrid-row:last-child .pmsgrid-td {
        border-bottom: none;
    }

.pmsgrid-td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    vertical-align: middle;
}

    .pmsgrid-td:last-child {
        border-right: none;
    }

.pmsgrid-code {
    background: rgba(59,130,246,.08);
    color: var(--primary);
    border: 1px solid rgba(59,130,246,.2);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 11px;
    font-family: 'Courier New', monospace;
}

/* ── Action buttons ──────────────────────────────────────────────────── */
.pmsgrid-td-actions {
    width: 80px;
    white-space: nowrap;
}

.pmsgrid-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

.pmsgrid-action-btn {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 5px;
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--text-muted);
    transition: background .15s, color .15s, border-color .15s;
}

    .pmsgrid-action-btn.edit:hover {
        background: rgba(59,130,246,.1);
        color: var(--primary);
        border-color: var(--primary);
    }

    .pmsgrid-action-btn.delete:hover {
        background: rgba(239,68,68,.1);
        color: var(--danger);
        border-color: var(--danger);
    }

/* ── Empty state ─────────────────────────────────────────────────────── */
.pmsgrid-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
}

.pmsgrid-empty {
    display: table-cell;
}

    .pmsgrid-empty i {
        font-size: 32px;
        opacity: .25;
        display: block;
        margin-bottom: 10px;
    }

    .pmsgrid-empty span {
        font-size: 13px;
    }

/* ── Pager ───────────────────────────────────────────────────────────── */
.pmsgrid-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    background: var(--surface2);
    flex-wrap: wrap;
}

.pmsgrid-pager-info {
    font-size: 12px;
    color: var(--text-muted);
    min-width: 80px;
}

.pmsgrid-pager-btns {
    display: flex;
    gap: 3px;
    align-items: center;
}

.pmsgrid-page-btn {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 5px;
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s, border-color .15s;
    font-family: inherit;
}

    .pmsgrid-page-btn:hover:not(:disabled) {
        background: var(--hover);
        color: var(--text);
        border-color: var(--text-muted);
    }

    .pmsgrid-page-btn.active {
        background: var(--primary);
        border-color: var(--primary);
        color: #fff;
    }

    .pmsgrid-page-btn.dots {
        cursor: default;
        border-color: transparent;
        background: transparent;
    }

    .pmsgrid-page-btn:disabled {
        opacity: .35;
        cursor: not-allowed;
    }

.pmsgrid-page-size {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

    .pmsgrid-page-size select {
        background: var(--surface);
        border: 1px solid var(--border);
        color: var(--text);
        border-radius: 5px;
        padding: 3px 6px;
        font-size: 12px;
        font-family: inherit;
        outline: none;
        cursor: pointer;
    }

/* RTL */
[dir="rtl"] .pmsgrid-th-inner {
    flex-direction: row-reverse;
}

[dir="rtl"] .pmsgrid-sort-icon {
    margin-left: 0;
    margin-right: auto;
}

[dir="rtl"] .pmsgrid-actions {
    flex-direction: row-reverse;
}

[dir="rtl"] .pmsgrid-filter-op {
    border-radius: 0 4px 4px 0;
    border-left: none;
    border-right: 1px solid var(--border);
}

[dir="rtl"] .pmsgrid-filter-input {
    border-radius: 4px 0 0 4px;
    border-right: none;
    border-left: 1px solid var(--border);
}

/* ── PMS Button system ───────────────────────────────────────────────── */
.pms-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
}

    .pms-btn:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

.pms-btn-primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

    .pms-btn-primary:hover:not(:disabled) {
        background: var(--primary-hover);
        border-color: var(--primary-hover);
    }

.pms-btn-secondary {
    background: var(--surface2);
    color: var(--text);
    border-color: var(--border);
}

    .pms-btn-secondary:hover:not(:disabled) {
        background: var(--surface3);
    }

.pms-btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border-color: var(--border);
}

    .pms-btn-ghost:hover:not(:disabled) {
        background: var(--hover);
        color: var(--text);
    }

.pms-btn-success {
    background: var(--success);
    color: #fff;
}

    .pms-btn-success:hover:not(:disabled) {
        filter: brightness(0.9);
    }

/* ── Server grid loading state ───────────────────────────────────────── */
.pmsgrid-row-loading {
    opacity: .5;
    pointer-events: none;
}

.pmsgrid-loading-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 12px;
}

/* ── Country list textarea ───────────────────────────────────────────── */
.country-list-input {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    resize: vertical;
    line-height: 1.8;
}

.mt-3 {
    margin-top: 12px;
}

/* ── Membership badge images ─────────────────────────────────────────── */
.membership-badge {
    height: 28px;
    width: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
    transition: transform .15s;
}

    .membership-badge:hover {
        transform: scale(1.15);
    }

/* ── PmsServerGrid — Selection & Bulk Actions ────────────────────────── */
.pmsgrid-toolbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.pmsgrid-select-all-wrap {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 4px;
}

    .pmsgrid-select-all-wrap input[type="checkbox"],
    .pmsgrid-td-check input[type="checkbox"] {
        width: 16px;
        height: 16px;
        cursor: pointer;
        accent-color: var(--primary);
    }

.pmsgrid-bulk-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    animation: fadeIn .15s ease;
}

.pmsgrid-selected-count {
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
    background: rgba(59,130,246,.1);
    border: 1px solid rgba(59,130,246,.25);
    border-radius: 6px;
    padding: 3px 10px;
}

.pmsgrid-bulk-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    transition: background .15s, color .15s;
    font-family: inherit;
}

    .pmsgrid-bulk-btn:hover {
        background: var(--hover);
    }

    .pmsgrid-bulk-btn.danger {
        background: rgba(239,68,68,.08);
        border-color: rgba(239,68,68,.3);
        color: var(--danger);
    }

        .pmsgrid-bulk-btn.danger:hover {
            background: rgba(239,68,68,.15);
        }

    .pmsgrid-bulk-btn.ghost {
        color: var(--text-muted);
    }

/* ── Row selection ───────────────────────────────────────────────────── */
.pmsgrid-th-check, .pmsgrid-td-check {
    width: 40px;
    min-width: 40px;
    text-align: center;
}

.pmsgrid-row-selected {
    background: rgba(59,130,246,.06) !important;
}

    .pmsgrid-row-selected:hover {
        background: rgba(59,130,246,.1) !important;
    }

/* ── Double-click cursor ─────────────────────────────────────────────── */
.pmsgrid-row {
    cursor: pointer;
}

/* ── Number decimal display ──────────────────────────────────────────── */
.pmsgrid-number {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--text);
    letter-spacing: .5px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ── Subgrid styles ──────────────────────────────────────────────────── */
.subgrid-wrap {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 4px;
}

.subgrid-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

    .subgrid-table thead th {
        background: var(--surface2);
        padding: 6px 10px;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .4px;
        color: var(--text-muted);
        border-bottom: 1px solid var(--border);
    }

    .subgrid-table tbody tr:not(:last-child) td {
        border-bottom: 1px solid var(--border);
    }

    .subgrid-table td {
        padding: 5px 8px;
        vertical-align: middle;
    }

.subgrid-add-row td {
    background: var(--surface2);
}

.subgrid-input {
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 12px;
    font-family: inherit;
    color: var(--text);
    transition: border-color .15s, background .15s;
    outline: none;
}

    .subgrid-input:focus {
        border-color: var(--primary);
        background: var(--surface);
    }

    .subgrid-input::placeholder {
        color: var(--text-muted);
    }

.subgrid-add-btn, .subgrid-remove-btn {
    width: 26px;
    height: 26px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: background .15s;
}

.subgrid-add-btn {
    background: rgba(16,185,129,.1);
    color: #10b981;
}

    .subgrid-add-btn:hover {
        background: rgba(16,185,129,.2);
    }

.subgrid-remove-btn {
    background: rgba(239,68,68,.08);
    color: var(--danger);
}

    .subgrid-remove-btn:hover {
        background: rgba(239,68,68,.18);
    }

/* Chips (Views) */
.subgrid-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
    min-height: 40px;
    border-bottom: 1px solid var(--border);
}

.subgrid-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(59,130,246,.1);
    border: 1px solid rgba(59,130,246,.25);
    color: var(--primary);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
}

.subgrid-chip-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--primary);
    opacity: .6;
    font-size: 10px;
    padding: 0;
    line-height: 1;
}

    .subgrid-chip-remove:hover {
        opacity: 1;
    }

.subgrid-add-inline {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
}

/* ── Room Status badge ───────────────────────────────────────────────── */
.room-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

/* ── Room Modal — 90% width, 3-column, no scroll ────────────────────── */
.room-modal-fullheight {
    height: 90vh;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

    .room-modal-fullheight .pms-modal-header {
        flex-shrink: 0;
    }

    .room-modal-fullheight .pms-modal-footer {
        flex-shrink: 0;
    }

.room-modal-body {
    flex: 1;
    overflow: hidden !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
}

.room-modal-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    flex: 1;
    overflow: hidden;
    height: 100%;
}

.room-modal-col {
    border-right: 1px solid var(--border);
    padding: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

    .room-modal-col:last-child {
        border-right: none;
    }

.room-col-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--primary);
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 2px solid var(--primary);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.room-col-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 1;
    color: var(--text-muted);
    opacity: .4;
    min-height: 120px;
}

    .room-col-empty i {
        font-size: 32px;
    }

    .room-col-empty span {
        font-size: 12px;
        text-align: center;
    }

/* ── Tax Engine — Formula display ────────────────────────────────────── */
.formula-code {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

    .formula-code.gross {
        background: rgba(16,185,129,.1);
        color: #059669;
        border: 1px solid rgba(16,185,129,.25);
    }

    .formula-code.net {
        background: rgba(59,130,246,.1);
        color: var(--primary);
        border: 1px solid rgba(59,130,246,.25);
    }

.tax-equation-badge {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
}

.apply-on-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.apply-on-base {
    background: rgba(16,185,129,.1);
    color: #059669;
    border: 1px solid rgba(16,185,129,.3);
}

.apply-on-rt {
    background: rgba(249,115,22,.1);
    color: #ea580c;
    border: 1px solid rgba(249,115,22,.3);
}

.apply-on-prev {
    background: rgba(139,92,246,.1);
    color: #7c3aed;
    border: 1px solid rgba(139,92,246,.3);
}

.seq-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

/* Formula banner in details panel */
.formula-banner {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.formula-banner-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.formula-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-muted);
    min-width: 50px;
}

.formula-test {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    border-top: 1px solid var(--border);
    padding-top: 8px;
}

.formula-test-input {
    width: 130px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 4px 8px;
    font-size: 12px;
    font-family: inherit;
    color: var(--text);
    outline: none;
}

    .formula-test-input:focus {
        border-color: var(--primary);
    }

.formula-test-result {
    font-size: 12px;
    font-weight: 700;
    color: #059669;
    font-family: 'Courier New', monospace;
}

/* Formula preview in modal */
.formula-preview {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
}

    .formula-preview code {
        font-size: 13px;
    }

.info-box {
    background: rgba(59,130,246,.06);
    border: 1px solid rgba(59,130,246,.2);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 12px;
    color: var(--text);
    margin-bottom: 14px;
}

/* ── Tax type badge (F / %) ──────────────────────────────────────────── */
.tax-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    flex-shrink: 0;
}

    .tax-type-badge.pv {
        background: rgba(59,130,246,.12);
        color: var(--primary);
        border: 1px solid rgba(59,130,246,.3);
    }

    .tax-type-badge.fv {
        background: rgba(16,185,129,.12);
        color: #059669;
        border: 1px solid rgba(16,185,129,.3);
    }

/* ── Order up/down buttons ───────────────────────────────────────────── */
.order-btn {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text-muted);
    font-size: 9px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, color .12s, border-color .12s;
    font-family: inherit;
}

    .order-btn:hover:not(:disabled) {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
    }

    .order-btn:disabled {
        opacity: .3;
        cursor: not-allowed;
    }

/* ── Room Rate Modal ─────────────────────────────────────────────────── */
.rate-modal {
    display: flex;
    flex-direction: column;
    height: 90vh;
    max-height: 90vh;
}

.rate-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface2);
    flex-shrink: 0;
}

.rate-modal-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    min-width: 120px;
}

.rate-modal-header-fields {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    flex-wrap: wrap;
}

.rate-modal-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.rate-header-config-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 6px 12px;
    background: var(--surface2);
    border-top: 1px solid var(--border);
    font-size: 11px;
}

.rate-header-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .rate-header-group label {
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .4px;
        color: var(--text-muted);
    }

.rate-header-input {
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--surface);
    color: var(--text);
    font-size: 12px;
    font-family: inherit;
    outline: none;
}

    .rate-header-input:focus {
        border-color: var(--primary);
    }

/* ── Tab bar ─────────────────────────────────────────────────────────── */
.rate-tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
    overflow-x: auto;
}

.rate-tab {
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    transition: all .15s;
    white-space: nowrap;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 5px;
}

    .rate-tab:hover:not(:disabled) {
        color: var(--text);
        background: var(--hover);
    }

    .rate-tab.active {
        color: var(--primary);
        border-bottom-color: var(--primary);
        background: var(--surface2);
    }

    .rate-tab:disabled {
        opacity: .35;
        cursor: not-allowed;
    }

.rate-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    padding: 0 5px;
    background: var(--primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

/* ── Generate Missing button (right-side of tab bar) ────────────────── */
.rate-sync-btn {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--primary);
    background: transparent;
    border: 1.5px solid var(--primary);
    border-radius: 5px;
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
    align-self: center;
    margin-right: 6px;
}
.rate-sync-btn:hover:not(:disabled) {
    background: var(--primary);
    color: #fff;
}
.rate-sync-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ── Tab content ─────────────────────────────────────────────────────── */
.rate-tab-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.rate-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
}

/* ── Section hint ────────────────────────────────────────────────────── */
.rate-section-hint {
    background: rgba(59,130,246,.06);
    border: 1px solid rgba(59,130,246,.2);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
    margin-bottom: 12px;
    color: var(--text);
}

/* ── Tab hints ───────────────────────────────────────────────────────── */
.rate-tab-hints {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}
.rate-tab-hint-box {
    border-radius: 7px;
    padding: 10px 13px;
    font-size: 12px;
    line-height: 1.6;
}
.hint-tax {
    background: rgba(59,130,246,.05);
    border: 1px solid rgba(59,130,246,.22);
    color: var(--text);
}
.hint-impact {
    background: rgba(16,185,129,.05);
    border: 1px solid rgba(16,185,129,.22);
    color: var(--text);
}
.rate-tab-hint-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 6px;
    opacity: .75;
}
.hint-tax .rate-tab-hint-header  { color: #3b82f6; }
.hint-impact .rate-tab-hint-header { color: #10b981; }
.rate-tab-hint-body b { font-weight: 600; }
@media (max-width:700px) {
    .rate-tab-hints { grid-template-columns: 1fr; }
}

/* ── Day Use Without Room grid ──────────────────────────────────────── */
.wor-grid-scroll  { overflow-x: auto; margin-top: 12px; }
.wor-grid-table   { min-width: 900px; width: 100%; table-layout: auto; }
.wor-grid-table th { white-space: nowrap; font-size: 11px; text-align: center; padding: 6px 8px; }
.wor-th-nat       { min-width: 90px; }
.wor-th-price     { min-width: 90px; }
.wor-th-tax       { min-width: 70px; }
.wor-th-multi     { min-width: 160px; }
.wor-row td       { vertical-align: top; padding: 6px 6px; }
.wor-td-nat       { vertical-align: middle !important; }
.wor-nat-badge    {
    display: inline-block; padding: 3px 10px; border-radius: 12px;
    background: var(--primary); color: #fff; font-size: 11px; font-weight: 600;
}
.wor-td-multi     { padding: 6px 8px; }
.wor-check-list   { display: flex; flex-direction: column; gap: 4px; max-height: 160px; overflow-y: auto; }
.wor-check-item   {
    display: flex; align-items: center; gap: 6px; font-size: 11px;
    padding: 3px 5px; border-radius: 4px; cursor: pointer; user-select: none;
}
.wor-check-item:hover { background: var(--surface3); }
.wor-check-item input[type=checkbox] { accent-color: var(--primary); flex-shrink: 0; }
.wor-check-disabled { opacity: 0.4; cursor: not-allowed; }
.wor-check-disabled:hover { background: transparent; }
.wor-icon { color: var(--primary); width: 14px; text-align: center; flex-shrink: 0; }

/* ── Base prices grid ────────────────────────────────────────────────── */
.rate-base-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
    gap: 12px;
}

.rate-base-card {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.rate-base-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--surface3, var(--border));
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    font-weight: 700;
}

.rate-pax-section-label {
    padding: 4px 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-muted);
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.rate-price-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

    .rate-price-table thead th {
        padding: 4px 8px;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .3px;
        color: var(--text-muted);
        background: var(--surface);
        border-bottom: 1px solid var(--border);
    }

    .rate-price-table tbody tr:not(:last-child) td {
        border-bottom: 1px solid var(--border);
    }

    .rate-price-table td {
        padding: 4px 6px;
        vertical-align: middle;
    }

/* ── Price input ─────────────────────────────────────────────────────── */
.rate-price-input {
    width: 90px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 12px;
    font-family: 'Courier New',monospace;
    color: var(--text);
    outline: none;
    text-align: right;
    transition: border-color .12s, background .12s;
}

    .rate-price-input:focus {
        border-color: var(--primary);
        background: var(--surface);
    }

    .rate-price-input:hover {
        border-color: var(--border);
    }

.rate-tax-display {
    display: inline-block;
    min-width: 60px;
    text-align: right;
    font-size: 11px;
    color: var(--text-muted);
    font-family: 'Courier New',monospace;
    padding: 3px 6px;
    background: var(--surface2);
    border-radius: 4px;
}

/* ── Inline select ───────────────────────────────────────────────────── */
.rate-inline-select {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 3px 4px;
    font-size: 11px;
    font-family: inherit;
    color: var(--text);
    cursor: pointer;
    outline: none;
    transition: border-color .12s;
}

    .rate-inline-select:hover, .rate-inline-select:focus {
        border-color: var(--border);
        background: var(--surface);
    }

/* ── Section table ───────────────────────────────────────────────────── */
.rate-price-section-table .rate-section-group {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    padding: 4px;
}

    .rate-price-section-table .rate-section-group.included {
        background: rgba(16,185,129,.08);
        color: #059669;
        border-bottom: 2px solid #10b981;
    }

    .rate-price-section-table .rate-section-group.extra {
        background: rgba(249,115,22,.08);
        color: #ea580c;
        border-bottom: 2px solid #f97316;
    }

.rate-price-section-table .rate-section-subheader th {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
    padding: 3px 8px;
    background: var(--surface2);
}

/* ── Nationality badges ──────────────────────────────────────────────── */
.nationality-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
}

.nat-1 {
    background: rgba(16,185,129,.12);
    color: #059669;
    border: 1px solid rgba(16,185,129,.3);
}

.nat-2 {
    background: rgba(249,115,22,.12);
    color: #ea580c;
    border: 1px solid rgba(249,115,22,.3);
}

.nat-3 {
    background: rgba(139,92,246,.12);
    color: #7c3aed;
    border: 1px solid rgba(139,92,246,.3);
}

.nat-4 {
    background: rgba(59,130,246,.12);
    color: var(--primary);
    border: 1px solid rgba(59,130,246,.3);
}

.nat-5 {
    background: rgba(107,114,128,.12);
    color: #6b7280;
    border: 1px solid rgba(107,114,128,.3);
}

.rate-empty {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
    font-size: 13px;
}

/* ── Month & Weekday pickers ─────────────────────────────────────────── */
.month-picker, .weekday-picker {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 8px 0;
}

.month-btn, .weekday-btn {
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all .12s;
}

    .month-btn:hover, .weekday-btn:hover {
        border-color: var(--primary);
        color: var(--primary);
    }

    .month-btn.active, .weekday-btn.active {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
    }

/* ── Service Default Price panel ─────────────────────────────────────── */
.service-price-panel {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
    margin-top: 6px;
}

.service-price-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--primary);
    margin-bottom: 8px;
}

.price-inherited-badge {
    font-size: 10px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    background: rgba(249,115,22,.1);
    color: #ea580c;
    border: 1px solid rgba(249,115,22,.3);
    border-radius: 4px;
    padding: 2px 7px;
}

.price-version-badge {
    font-size: 10px;
    font-weight: 700;
    font-family: monospace;
    background: rgba(59,130,246,.1);
    color: var(--primary);
    border: 1px solid rgba(59,130,246,.3);
    border-radius: 4px;
    padding: 2px 6px;
    margin-left: auto;
}

.service-price-inputs {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.service-price-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

    .service-price-field label {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .4px;
        color: var(--text-muted);
    }

.price-field-input {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 5px 8px;
    font-size: 12px;
    font-family: 'Courier New', monospace;
    color: var(--text);
    text-align: right;
    outline: none;
    transition: border-color .12s;
}

    .price-field-input:focus {
        border-color: var(--primary);
    }

.service-price-field.readonly .price-field-input {
    background: var(--surface2);
    color: var(--text-muted);
    cursor: not-allowed;
}

.price-calc-info {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
    border-top: 1px solid var(--border);
    padding-top: 6px;
}

    .price-calc-info code {
        font-size: 11px;
    }

/* ── Source Type Accordion ───────────────────────────────────────────── */
.source-type-accordion {
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}

.source-type-header {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px 10px;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
}

.source-expand-btn {
    width: 22px;
    height: 22px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.source-type-name {
    font-size: 12px;
    font-weight: 600;
    min-width: 140px;
}

.source-rows {
    background: var(--surface);
    padding: 4px 0;
}

.source-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 6px 10px 6px 30px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}

    .source-row:last-child {
        border-bottom: none;
    }

.source-row-name {
    min-width: 140px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ── Group Panel ─────────────────────────────────────────────────────── */
.group-panel {
    padding: 12px;
}

.group-toggle-row {
    padding: 12px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 12px;
}

.group-pricing-row {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
}

.group-pricing-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--primary);
    margin-bottom: 10px;
}

.group-pricing-inputs {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
}

/* ── Picker Modal ────────────────────────────────────────────────────── */
.picker-list {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.picker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
    transition: background .1s;
}

    .picker-item:last-child {
        border-bottom: none;
    }

    .picker-item:hover {
        background: var(--hover);
    }

.picker-item-used {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Front Office ────────────────────────────────────────────────────── */
.res-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid;
}

.nat-badge-group {
    display: flex;
    align-items: center;
    gap: 5px;
}

.nat-group-pill {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
}

.vip-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(245,158,11,.12);
    color: #b45309;
    border: 1px solid rgba(245,158,11,.3);
    font-size: 10px;
    font-weight: 700;
}

.security-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(220,38,38,.12);
    color: #dc2626;
    border: 1px solid rgba(220,38,38,.3);
    font-size: 11px;
}

/* ── Guest Search Modal ─────────────────────────────────────────────── */
.guest-search-bar {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 4px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 12px;
}

.guest-search-icon {
    color: var(--text-muted);
    padding: 0 8px;
}

.guest-search-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
}

.guest-results {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 320px;
    overflow-y: auto;
}

.guest-result-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s;
}

    .guest-result-card:hover {
        background: var(--hover);
    }

.guest-result-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
}

.guest-result-info {
    flex: 1;
}

.guest-result-name {
    font-weight: 600;
    font-size: 14px;
}

.guest-result-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.guest-not-found {
    text-align: center;
    padding: 32px;
    color: var(--text-muted);
}

.guest-create-form {
    border-top: 1px solid var(--border);
    padding-top: 12px;
    margin-top: 12px;
}

.guest-avatar-sm {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Room Picker ────────────────────────────────────────────────────── */
.room-picker-filters {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    padding: 12px;
    background: var(--surface2);
    border-radius: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .filter-group label {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--text-muted);
    }

.multi-check-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.multi-check-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--surface);
}

    .multi-check-item:has(input:checked) {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
    }

/* ── PmsMultiLookup ─────────────────────────────────────────────────── */
.pms-ml-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 120px;
}

.pms-ml-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    white-space: nowrap;
}

    .pms-ml-trigger:hover,
    .pms-ml-trigger.active {
        border-color: var(--primary);
        background: var(--hover);
    }

.pms-ml-trigger-label { flex: 1; }

.pms-ml-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

.pms-ml-arrow {
    font-size: 10px;
    color: var(--text-muted);
    transition: transform .15s;
}
    .pms-ml-arrow.open { transform: rotate(180deg); }

.pms-ml-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
}

.pms-ml-popup {
    position: fixed;
    z-index: 9999;
    min-width: 200px;
    max-width: 280px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
    display: flex;
    flex-direction: column;
}

.pms-ml-search-box {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
}
    .pms-ml-search-box i { color: var(--text-muted); font-size: 11px; }
    .pms-ml-search-box input {
        flex: 1;
        border: none;
        background: transparent;
        color: var(--text);
        font-size: 12px;
        outline: none;
    }

.pms-ml-list {
    max-height: 200px;
    overflow-y: auto;
    padding: 4px 0;
}

.pms-ml-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: background .1s;
}
    .pms-ml-item:hover { background: var(--hover); }
    .pms-ml-item.selected { color: var(--primary); font-weight: 600; }
    .pms-ml-item input[type=checkbox] { accent-color: var(--primary); cursor: pointer; }
.pms-ml-item-icon { font-size: 11px; color: var(--text-muted); width: 14px; text-align: center; }
.pms-ml-code { font-size: 10px; padding: 1px 4px; border-radius: 3px; background: var(--surface); border: 1px solid var(--border); color: var(--primary); font-family: monospace; flex-shrink: 0; }
.pms-ml-chip-code { font-size: 10px; padding: 1px 4px; border-radius: 3px; background: rgba(0,0,0,.15); font-family: monospace; margin-right: 3px; }

.pms-ml-empty {
    padding: 10px 12px;
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}

.pms-ml-popup-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding: 6px 10px;
    border-top: 1px solid var(--border);
}

.pms-ml-clear {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
}
    .pms-ml-clear:hover { color: var(--danger); background: var(--hover); }

.pms-ml-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pms-ml-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary) 18%, transparent);
    color: var(--primary);
    font-size: 11px;
    font-weight: 600;
    border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
}

.pms-ml-chip-remove {
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 0;
    opacity: .7;
}
    .pms-ml-chip-remove:hover { opacity: 1; }

.room-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
    gap: 10px;
}

.room-card {
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    position: relative;
    transition: border-color .15s,background .15s;
}

    .room-card:hover {
        border-color: var(--primary);
        background: var(--hover);
    }

    .room-card.selected {
        border-color: var(--primary);
        background: rgba(59,130,246,.06);
    }

.room-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.room-card-no {
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
}

.room-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.room-card-type {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.room-card-floor {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.room-card-pax {
    font-size: 11px;
    margin-bottom: 6px;
}

.room-card-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.room-tag {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--surface2);
    border: 1px solid var(--border);
}

.room-card-selected-mark {
    position: absolute;
    top: 8px;
    right: 8px;
    color: var(--primary);
    font-size: 18px;
}

/* ── Reservation Status Tabs ────────────────────────────────────────── */
.res-status-tabs {
    display: flex;
    gap: 4px;
    padding: 10px 16px 0;
    border-bottom: 2px solid var(--border);
    flex-wrap: wrap;
    background: var(--surface2);
}

.res-status-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    border-radius: 6px 6px 0 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: color .15s, background .15s;
    position: relative;
    bottom: -2px;
    border-bottom: 2px solid transparent;
}

    .res-status-tab:hover {
        color: var(--text);
        background: var(--hover);
    }

    .res-status-tab.active {
        color: var(--tab-color, var(--primary));
        border-bottom-color: var(--tab-color, var(--primary));
        background: var(--surface);
    }

    .res-status-tab i { font-size: 11px; }

/* ── Reservation Read-only ──────────────────────────────────────────── */
fieldset.res-content-lock {
    border: none;
    padding: 0;
    margin: 0;
    min-width: 0;
    width: 100%;
    display: block;
}

fieldset.res-content-lock:disabled {
    opacity: .75;
    pointer-events: none;
}

.res-readonly-banner {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: color-mix(in srgb, #d97706 10%, var(--surface2));
    border-bottom: 1px solid color-mix(in srgb, #d97706 30%, transparent);
    color: var(--text);
    font-size: 12px;
    flex-shrink: 0;
}

/* ── Reservation Modal ──────────────────────────────────────────────── */
.res-modal {
    display: flex;
    flex-direction: column;
    height: 92vh;
    max-height: 92vh;
}

.res-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface2);
    flex-shrink: 0;
}

.res-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    flex: 1;
}

.res-modal-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.res-tab-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.res-section {
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
}

.res-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--surface2);
    cursor: pointer;
    user-select: none;
    font-size: 13px;
    font-weight: 700;
}

    .res-section-header:hover {
        background: var(--hover);
    }

.res-section-body {
    padding: 14px;
}

.form-row-3 {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
    margin-bottom: 10px;
}

/* ── Charges bar ────────────────────────────────────────────────────── */
.charges-summary-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    flex-wrap: wrap;
}

.total-amount {
    color: var(--primary);
    font-size: 15px;
}

/* ── Flight row ─────────────────────────────────────────────────────── */
.flight-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

    .flight-row .form-group {
        min-width: 130px;
        flex: 1;
    }

/* ── Folio ──────────────────────────────────────────────────────────── */
.folio-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}

.folio-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
}

.folio-no {
    font-size: 13px;
    font-weight: 700;
    font-family: monospace;
}

.folio-balance {
    font-size: 14px;
    font-weight: 700;
    font-family: monospace;
}

.balance-debit {
    color: #dc2626;
}

.balance-credit {
    color: #059669;
}

.folio-totals-row td {
    padding: 8px 12px;
    background: var(--surface2);
    border-top: 2px solid var(--border);
}

.voided-row {
    opacity: .4;
    text-decoration: line-through;
}

.add-transaction-bar {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 14px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

/* ── Reservation 3-column layout ─────────────────────────────────────── */
.pms-modal-fullscreen {
    width: 98vw !important;
    max-width: 98vw !important;
    height: 96vh;
    max-height: 96vh;
    display: flex;
    flex-direction: column;
}

.res-three-col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    padding: 10px;
    height: 100%;
    overflow: hidden;
}

.res-col {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    min-height: 0;
}

.res-col-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--surface2);
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.res-col-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Small form controls ─────────────────────────────────────────────── */
.form-group-sm {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

    .form-group-sm label {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--text-muted);
    }

.form-row-2-sm {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.form-row-3-sm {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
}

.pms-toggle-sm {
    transform: scale(0.8);
    transform-origin: left;
}

.readonly-field {
    padding: 4px 8px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 12px;
    min-height: 30px;
}

.readonly-badge {
    font-size: 9px;
    padding: 1px 5px;
    background: var(--primary);
    color: #fff;
    border-radius: 3px;
    margin-left: 4px;
    vertical-align: middle;
}

/* ── Inline room/guest cards ─────────────────────────────────────────── */
.room-card-inline {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px;
    background: var(--surface);
}

.room-card-inline-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 12px;
}

.guest-card-inline {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px;
    background: var(--surface);
}

.guest-card-inline-header {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

/* ── Image thumbnails ────────────────────────────────────────────────── */
.image-row {
    display: flex;
    gap: 6px;
    margin: 6px 0;
    flex-wrap: wrap;
}

.image-thumb {
    width: 52px;
    height: 40px;
    border: 1px dashed var(--border);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--text-muted);
    cursor: pointer;
    overflow: hidden;
    gap: 2px;
}

    .image-thumb:hover {
        border-color: var(--primary);
        color: var(--primary);
    }

    .image-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* ── Charges mini ────────────────────────────────────────────────────── */
.charges-mini {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

    .charges-mini .total-line {
        font-weight: 700;
        color: var(--primary);
        border-top: 1px solid var(--border);
        padding-top: 4px;
        margin-top: 2px;
    }

/* ── Room filter panels ──────────────────────────────────────────────── */
.room-filter-panels {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.room-filter-panel {
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.room-filter-panel-header {
    padding: 6px 10px;
    background: var(--surface2);
    font-size: 11px;
    font-weight: 700;
}

.filter-option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
}

    .filter-option:hover {
        background: var(--hover);
    }

    .filter-option.selected {
        background: rgba(59,130,246,.08);
        color: var(--primary);
    }

    .filter-option input {
        accent-color: var(--primary);
    }

/* ── Room card enriched display ──────────────────────────────────────── */
.room-card-section-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 5px 0 3px;
}

.amenity-count {
    display: inline-block;
    margin-left: 3px;
    font-size: 10px;
    font-weight: 700;
    color: var(--primary);
}

.room-card-prices {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
}

.price-main {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
}

.price-alts {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 3px;
    font-size: 10px;
    color: var(--text-muted);
}

    .price-alts span {
        background: var(--surface2);
        padding: 1px 6px;
        border-radius: 3px;
    }

/* ── Available Room Card (Picker) ────────────────────────────────────── */
.avail-room-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    overflow: hidden;
    cursor: pointer;
    transition: all .15s;
    position: relative;
}

    .avail-room-card:hover {
        border-color: var(--primary);
        box-shadow: 0 2px 8px rgba(0,0,0,.12);
    }

    .avail-room-card.selected {
        border-color: var(--primary);
        background: rgba(59,130,246,.04);
    }

    .avail-room-card.arc-under-cap {
        border-color: var(--warning);
        opacity: 0.92;
    }

    .avail-room-card.arc-under-cap:hover {
        border-color: var(--warning);
    }

.arc-undercap-badge {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--warning);
    background: rgba(245,158,11,.12);
    border: 1px solid rgba(245,158,11,.35);
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: auto;
    white-space: nowrap;
    cursor: default;
}

/* ── Pax drag & drop ────────────────────────────────────────────────── */
.rc-drag-handle {
    color: var(--text-muted);
    font-size: 11px;
    cursor: grab;
    padding: 0 4px;
    opacity: 0.5;
    transition: opacity .15s;
    flex-shrink: 0;
}
.rc-pax-row:hover .rc-drag-handle { opacity: 1; }
.rc-pax-row.rc-pax-dragging {
    opacity: 0.4;
    outline: 2px dashed var(--primary);
    outline-offset: -2px;
    border-radius: 6px;
}
.room-card-body.rc-drop-target {
    outline: 2px dashed var(--primary);
    outline-offset: -3px;
    border-radius: 8px;
    background: rgba(59,186,208,.06);
    transition: background .15s;
}

/* ── Empty room warning ─────────────────────────────────────────────── */
.rc-empty-warn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    color: var(--danger);
    background: rgba(239,68,68,.12);
    border: 1px solid rgba(239,68,68,.35);
    border-radius: 4px;
    padding: 1px 6px;
    white-space: nowrap;
}

/* Header */
.arc-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
}

.arc-roomno {
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
    min-width: 36px;
}

.arc-type {
    flex: 1;
    font-size: 11px;
    color: var(--text-muted);
}

.arc-status {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
}

.arc-check {
    color: var(--primary);
    font-size: 16px;
    margin-left: 4px;
}

/* Body split */
.arc-body {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 0;
}

.arc-left {
    padding: 8px 10px;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.arc-right {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.arc-info-row {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

    .arc-info-row i {
        width: 12px;
        color: var(--primary);
    }

.arc-section-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 2px;
}

/* Tags */
.arc-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--surface2);
    margin: 1px;
    white-space: nowrap;
}

    .arc-tag.arc-view {
        border-color: #2563eb40;
        background: #2563eb10;
        color: #2563eb;
    }

    .arc-tag code {
        font-size: 9px;
        font-weight: 700;
        opacity: .7;
    }

    .arc-tag b {
        color: var(--primary);
    }

/* Footer prices */
.arc-prices {
    padding: 7px 10px;
    border-top: 1px solid var(--border);
    background: var(--surface2);
}

.arc-price-main {
    font-size: 13px;
    color: var(--text);
    margin-bottom: 3px;
}

    .arc-price-main strong {
        font-size: 15px;
        font-weight: 800;
        color: var(--primary);
    }

.arc-price-alts {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

    .arc-price-alts span {
        font-size: 11px;
        color: var(--text-muted);
        display: flex;
        align-items: center;
        gap: 2px;
    }

.arc-cur {
    font-size: 9px;
    font-weight: 700;
    padding: 0 3px;
    background: var(--border);
    border-radius: 2px;
}

/* ── Nationality Widget ───────────────────────────────────────────────── */
.nat-widget {
    margin-top: 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    background: var(--surface2);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nat-widget-danger {
    border-color: #dc262660;
    background: #dc262608;
}

.nat-widget-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nat-flag-lg {
    width: 32px;
    height: 24px;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid var(--border);
}

.nat-country-name {
    font-size: 12px;
    font-weight: 700;
}

.nat-country-ar {
    font-size: 11px;
    color: var(--text-muted);
    direction: rtl;
}

.nat-widget-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.nat-pill {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid;
    font-weight: 600;
}

.nat-pill-danger {
    background: #dc262620 !important;
    color: #dc2626 !important;
    border-color: #dc262660 !important;
    animation: pulse-border .8s infinite;
}

@keyframes pulse-border {
    0%,100% {
        box-shadow: 0 0 0 0 #dc262640
    }

    50% {
        box-shadow: 0 0 0 3px #dc262615
    }
}

/* ── Nationality pill classes (replaces inline styles → faster style recalc) ── */
.nat-local {
    background: #05966920;
    color: #059669;
    border-color: #05966940 !important;
}

.nat-arab {
    background: #f59e0b20;
    color: #d97706;
    border-color: #f59e0b40 !important;
}

.nat-gcc {
    background: #7c3aed20;
    color: #7c3aed;
    border-color: #7c3aed40 !important;
}

.nat-eu {
    background: #2563eb20;
    color: #2563eb;
    border-color: #2563eb40 !important;
}

.nat-foreign {
    background: #6b728020;
    color: #6b7280;
    border-color: #6b728040 !important;
}

/* ── Performance: contain layout for heavy sections ─────────────────── */
.room-cards-grid {
    contain: layout style;
}
/* .res-col-body contain removed to allow dropdowns */
.avail-room-card {
    contain: layout style;
    will-change: border-color;
}

.pms-modal-fullscreen {
    contain: layout;
}

/* ── Reduce transition cost: only animate what changes ──────────────── */
.avail-room-card {
    transition: border-color .1s, box-shadow .1s;
}

.filter-option {
    transition: background .1s;
}

/* ── Arc icon-only pills (views & amenities compact) ─────────────────── */
.arc-icon-row {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 2px;
}

.arc-icon-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    cursor: default;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text-muted);
    font-size: 12px;
    transition: background .1s, color .1s, border-color .1s;
}

    .arc-icon-pill:hover {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
        z-index: 10;
    }

    /* Tooltip on hover */
    .arc-icon-pill::after {
        content: attr(title);
        position: absolute;
        bottom: calc(100% + 4px);
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
        background: #1e293b;
        color: #fff;
        font-size: 10px;
        padding: 3px 7px;
        border-radius: 4px;
        pointer-events: none;
        opacity: 0;
        transition: opacity .15s;
        z-index: 100;
        max-width: 160px;
        white-space: normal;
        text-align: center;
    }

    .arc-icon-pill:hover::after {
        opacity: 1;
    }

    /* Blue tint for views */
    .arc-icon-pill.arc-icon-view {
        border-color: #2563eb30;
        background: #2563eb08;
        color: #2563eb;
    }

        .arc-icon-pill.arc-icon-view:hover {
            background: #2563eb;
            color: #fff;
            border-color: #2563eb;
        }

/* Count badge on amenity pill */
.arc-icon-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 14px;
    height: 14px;
    background: var(--primary);
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    border: 1px solid var(--surface);
}

/* ── Available Room Card — 100×100 square ────────────────────────────── */
.room-cards-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.avail-room-card {
    width: 100px;
    height: 100px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color .1s, box-shadow .1s;
    contain: layout style;
}

    .avail-room-card:hover {
        border-color: var(--primary);
        box-shadow: 0 2px 8px rgba(0,0,0,.15);
    }

    .avail-room-card.selected {
        border-color: var(--primary);
        background: rgba(59,130,246,.06);
    }

/* Header: room number + status dot */
.arc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 7px 2px;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.arc-roomno {
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
}

.arc-status {
    display: flex;
    align-items: center;
    gap: 3px;
}

.arc-check {
    position: absolute;
    top: 3px;
    right: 3px;
    color: var(--primary);
    font-size: 13px;
}

.arc-type {
    display: none;
}
/* hidden at 100px */

/* Body: icon rows only */
.arc-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 3px 5px;
    gap: 2px;
    min-height: 0;
    overflow: hidden;
}

.arc-left {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    border: none;
    padding: 0;
}

    .arc-left .arc-info-row {
        font-size: 9px;
        color: var(--text-muted);
        white-space: nowrap;
    }

.arc-right {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 0;
}

/* Icon pills — smaller inside 100px card */
.arc-icon-pill {
    width: 20px;
    height: 20px;
    font-size: 10px;
    border-radius: 4px;
}

.arc-icon-count {
    font-size: 7px;
    min-width: 11px;
    height: 11px;
    top: -3px;
    right: -3px;
}

.arc-section-label {
    display: none;
}
/* no labels at this size */

/* Price footer */
.arc-prices {
    padding: 3px 5px;
    border-top: 1px solid var(--border);
    background: var(--surface2);
    flex-shrink: 0;
}

.arc-price-main {
    font-size: 10px;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.2;
}

    .arc-price-main strong {
        font-size: 11px;
    }

.arc-price-alts {
    display: none;
}
/* hidden at 100px — shown on hover via tooltip */

/* Tooltip on card hover showing full info */
.avail-room-card:hover .arc-price-alts {
    display: flex;
}

/* ── Room Card 160×180 — recommended size ────────────────────────────── */
.avail-room-card {
    width: 160px;
    height: 180px;
}

.arc-header {
    padding: 6px 8px 4px;
}

.arc-roomno {
    font-size: 15px;
}

.arc-type {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
}

.arc-body {
    padding: 4px 6px;
    gap: 3px;
}

.arc-left .arc-info-row {
    font-size: 10px;
}

.arc-icon-pill {
    width: 22px;
    height: 22px;
    font-size: 11px;
    border-radius: 5px;
}

.arc-icon-count {
    font-size: 8px;
    min-width: 12px;
    height: 12px;
    top: -3px;
    right: -3px;
}

.arc-section-label {
    display: block;
    font-size: 8px;
}

.arc-prices {
    padding: 4px 6px;
}

.arc-price-main {
    font-size: 11px;
}

    .arc-price-main strong {
        font-size: 12px;
    }

.arc-price-alts {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

    .arc-price-alts span {
        font-size: 9px;
    }

/* ── Room Card final layout 160×180 ─────────────────────────────────── */
.avail-room-card {
    width: 160px;
    height: 180px;
    border: 0.5px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color .1s, box-shadow .1s;
}

    .avail-room-card:hover {
        border-color: var(--primary);
        box-shadow: 0 2px 8px rgba(0,0,0,.12);
    }

    .avail-room-card.selected {
        border: 2px solid var(--primary);
        background: rgba(59,130,246,.04);
    }

.arc-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 6px;
    padding: 7px 8px;
    background: var(--surface2);
    border-bottom: 0.5px solid var(--border);
    flex-shrink: 0;
}

.arc-roomno {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}

.arc-type {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.3;
}

.arc-status {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    white-space: nowrap;
}

.arc-check {
    position: absolute;
    top: 5px;
    right: 5px;
    color: var(--primary);
    font-size: 14px;
}

.arc-body {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: 0.5px solid var(--border);
    min-height: 0;
}

.arc-left {
    padding: 6px;
    border-right: 0.5px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
}

    .arc-left .arc-info-row {
        font-size: 10px;
        color: var(--text-muted);
        display: flex;
        align-items: center;
        gap: 3px;
    }

.arc-center {
    padding: 5px;
    border-right: 0.5px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
}

.arc-right {
    padding: 5px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
}

.arc-section-label {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-muted);
    display: block;
}

.arc-icon-row {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 2px;
}

.arc-icon-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    cursor: default;
    font-size: 11px;
    transition: background .1s;
}

    .arc-icon-pill.arc-icon-view {
        background: #2563eb12;
        border: 0.5px solid #2563eb40;
        color: #2563eb;
    }

    .arc-icon-pill:not(.arc-icon-view) {
        background: var(--surface2);
        border: 0.5px solid var(--border);
        color: var(--text-muted);
    }

    .arc-icon-pill:hover {
        filter: brightness(0.9);
    }

.arc-icon-count {
    position: absolute;
    top: -3px;
    right: -3px;
    background: var(--primary);
    color: #fff;
    font-size: 7px;
    font-weight: 700;
    min-width: 11px;
    height: 11px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    border: 1px solid var(--surface);
}

.arc-prices {
    padding: 5px 8px;
    background: var(--surface2);
    flex-shrink: 0;
}

.arc-price-main {
    font-size: 12px;
    color: var(--text);
    line-height: 1.3;
}

    .arc-price-main strong {
        font-size: 13px;
        font-weight: 700;
        color: var(--primary);
    }

.arc-price-alts {
    display: flex;
    gap: 6px;
    font-size: 10px;
    color: var(--text-muted);
    flex-wrap: wrap;
    margin-top: 1px;
}

/* ── Arc body v2: info strip + full-width icon row ───────────────────── */
.arc-body-v2 {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-bottom: 0.5px solid var(--border);
    min-height: 0;
    overflow: hidden;
}

.arc-info-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-bottom: 0.5px solid var(--border);
    flex-shrink: 0;
    font-size: 10px;
    color: var(--text-muted);
}

    .arc-info-strip span {
        display: flex;
        align-items: center;
        gap: 3px;
    }

    .arc-info-strip i {
        font-size: 11px;
    }

.arc-icons-full {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 3px;
    padding: 5px 7px;
    overflow: hidden;
}

.arc-icons-sep {
    width: 0.5px;
    height: 16px;
    background: var(--border);
    align-self: center;
    margin: 0 2px;
    flex-shrink: 0;
}

/* ── Icon row: min 3 per line, fills row, wraps to next ─────────────── */
.arc-icons-full {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20px, 22px));
    grid-auto-rows: 22px;
    align-content: flex-start;
    gap: 3px;
    padding: 5px 7px;
    overflow: hidden;
}

/* separator between views and amenities sits inline */
.arc-icons-sep {
    width: 0.5px;
    height: 16px;
    background: var(--border);
    align-self: center;
    margin: 0 1px;
    grid-column: span 1;
}

/* ══ Room card — spec layout ══════════════════════════════════════════ */
.avail-room-card {
    width: 220px;
    height: auto;
    min-height: 160px;
    border: 0.5px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color .1s, box-shadow .1s;
}

    .avail-room-card:hover {
        border-color: var(--primary);
        box-shadow: 0 2px 8px rgba(0,0,0,.12);
    }

    .avail-room-card.selected {
        border: 2px solid var(--primary);
        background: rgba(59,130,246,.04);
    }

/* Header: 3 equal cols */
.arc-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.arc-roomno {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}

.arc-type {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.3;
    word-break: break-word;
}

.arc-status {
    font-size: 10px;
    display: flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

.arc-check {
    position: absolute;
    top: 4px;
    right: 4px;
    color: var(--primary);
    font-size: 14px;
    z-index: 1;
}

/* Body: 3 cols */
.arc-body3 {
    display: grid;
    grid-template-columns: 70px 1fr 1fr;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

/* Col 1: info */
.arc-b1 {
    padding: 6px 6px;
    border-right: 0.5px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
}

.arc-brow {
    font-size: 10px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

    .arc-brow i {
        width: 11px;
        font-size: 11px;
        color: var(--primary);
        flex-shrink: 0;
    }

/* Col 2: views — vertical list, icon + name */
.arc-b2 {
    padding: 5px 6px;
    border-right: 0.5px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
}

.arc-view-row {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--text-muted);
}

    .arc-view-row i {
        font-size: 12px;
        color: #2563eb;
        width: 13px;
        flex-shrink: 0;
    }

    .arc-view-row span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* Col 3: amenities — horizontal wrap, exactly 5 per row */
.arc-b3 {
    padding: 5px 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
}

    .arc-b3 .arc-icon-row {
        display: grid;
        grid-template-columns: repeat(3, 20px);
        gap: 3px;
    }

/* Icon pills */
.arc-icon-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    cursor: default;
    font-size: 11px;
    flex-shrink: 0;
    border: 0.5px solid var(--border);
    background: var(--surface2);
    color: var(--text-muted);
    transition: background .1s;
}

    .arc-icon-pill:hover {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
    }

.arc-icon-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--primary);
    color: #fff;
    font-size: 7px;
    font-weight: 700;
    min-width: 12px;
    height: 12px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    border: 1px solid var(--surface);
    z-index: 1;
}

/* Footer: prices */
.arc-prices {
    padding: 5px 8px;
    background: var(--surface2);
    flex-shrink: 0;
}

.arc-price-main {
    font-size: 11px;
    color: var(--text);
}

    .arc-price-main strong {
        font-size: 13px;
        font-weight: 700;
        color: var(--primary);
    }

.arc-price-alts {
    display: flex;
    gap: 6px;
    font-size: 10px;
    color: var(--text-muted);
    flex-wrap: wrap;
    margin-top: 2px;
}

.arc-cur {
    font-size: 9px;
    font-weight: 700;
    padding: 0 3px;
    background: var(--border);
    border-radius: 2px;
}

/* per-night label */
.arc-per-night {
    font-size: 9px;
    color: var(--text-muted);
    font-weight: 400;
    margin-left: 2px;
}

/* ── RoomRate Meal group header row ──────────────────────────────────── */
.rate-group-header-row td {
    background: var(--surface2);
    border-top: 2px solid var(--border);
}

/* ── Reservation basic info layout ───────────────────────────────────── */
.res-toggle-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 2px;
}

/* ── Meal plan selector ──────────────────────────────────────────────── */
.meal-type-block {
    margin-bottom: 6px;
    border: 0.5px solid var(--border);
    border-radius: 5px;
    overflow: hidden;
}

.meal-type-label {
    padding: 3px 7px;
    background: var(--surface2);
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
}

.meal-options {
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.meal-option {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    padding: 3px 5px;
    border-radius: 4px;
    cursor: pointer;
    border: 0.5px solid transparent;
}

    .meal-option:hover {
        background: var(--hover);
    }

    .meal-option.selected {
        background: rgba(59,130,246,.08);
        border-color: rgba(59,130,246,.3);
        color: var(--primary);
        font-weight: 600;
    }

    .meal-option input {
        accent-color: var(--primary);
        flex-shrink: 0;
    }

/* ── Meal sessions block ──────────────────────────────────────────────── */
.meal-sessions-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.meal-session {
    border: 0.5px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.meal-session-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--surface2);
    font-size: 11px;
    border-bottom: 0.5px solid var(--border);
}

.meal-dish-options {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 3px 6px;
}

.meal-dish-option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 5px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    border: 0.5px solid transparent;
}

    .meal-dish-option:hover {
        background: var(--hover);
    }

    .meal-dish-option.selected {
        background: rgba(59,130,246,.08);
        border-color: rgba(59,130,246,.3);
        color: var(--primary);
    }

    .meal-dish-option input {
        accent-color: var(--primary);
        flex-shrink: 0;
        cursor: pointer;
    }

.dish-info {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}

.dish-name {
    flex: 1;
}

/* -- Price breakdown button & modal --------------------------------- */
.price-breakdown-btn {
    background: none;
    border: none;
    padding: 0 4px;
    cursor: pointer;
    color: var(--primary);
    font-size: 11px;
    opacity: 0.7;
}

    .price-breakdown-btn:hover {
        opacity: 1;
    }

.breakdown-summary {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.breakdown-badge {
    flex: 1;
    min-width: 100px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--surface2);
    border: 0.5px solid var(--border);
    text-align: center;
}

.breakdown-badge-total {
    background: rgba(59,130,246,.08);
    border-color: var(--primary);
}

.breakdown-badge-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.breakdown-badge-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-top: 2px;
}

.breakdown-table tbody tr:hover {
    background: var(--hover);
}

.breakdown-adj-row td {
    background: rgba(245,158,11,.04);
}

.breakdown-total-row td {
    border-top: 2px solid var(--border);
    background: var(--surface2);
}

.breakdown-category-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
}

.bc-base {
    background: rgba(59,130,246,.1);
    color: #2563eb;
}

.bc-children {
    background: rgba(236,72,153,.1);
    color: #db2777;
}

.bc-view {
    background: rgba(16,185,129,.1);
    color: #059669;
}

.bc-amenity {
    background: rgba(245,158,11,.1);
    color: #d97706;
}

.bc-meal {
    background: rgba(139,92,246,.1);
    color: #7c3aed;
}

.bc-season {
    background: rgba(239,68,68,.1);
    color: #dc2626;
}

.bc-nat {
    background: rgba(20,184,166,.1);
    color: #0d9488;
}

.bc-source {
    background: rgba(107,114,128,.1);
    color: #6b7280;
}

.bc-other {
    background: var(--surface2);
    color: var(--text-muted);
}

.breakdown-currencies {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.breakdown-cur-label {
    font-size: 11px;
    color: var(--text-muted);
}

.breakdown-cur-pill {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    background: var(--surface2);
    border: 0.5px solid var(--border);
    border-radius: 4px;
}

/* -- Room card price action area ------------------------------------ */
.arc-price-actions {
    padding: 5px 7px;
    background: var(--surface2);
    border-top: 0.5px solid var(--border);
    flex-shrink: 0;
}

.arc-price-result {
    display: flex;
    align-items: baseline;
    gap: 3px;
    margin-bottom: 4px;
}

.arc-price-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
}

.arc-price-btns {
    display: flex;
    gap: 4px;
}

.arc-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 6px;
    border-radius: 5px;
    border: 0.5px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    font-size: 10px;
    color: var(--text-muted);
    transition: all .1s;
}

    .arc-action-btn:hover {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
    }

.arc-action-btn-detail {
    border-color: var(--primary);
    color: var(--primary);
}

    .arc-action-btn-detail:hover {
        background: var(--primary);
        color: #fff;
    }

/* -- Pax sub-grid --------------------------------------------------- */
.pax-subgrid-section {
    margin-top: 8px;
    border-top: 0.5px solid var(--border);
    padding-top: 6px;
}

.pax-subgrid-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 4px;
}

.pax-table {
    font-size: 11px;
}

    .pax-table th {
        font-size: 10px;
        padding: 3px 5px;
    }

    .pax-table td {
        padding: 3px 4px;
        vertical-align: middle;
    }

.pax-row-adult {
    background: transparent;
}

.pax-row-child {
    background: rgba(245,158,11,.04);
}

.pax-order-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 18px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
}

.pax-adult {
    background: rgba(59,130,246,.12);
    color: #2563eb;
}

.pax-child {
    background: rgba(245,158,11,.15);
    color: #d97706;
}

.pax-inline-input {
    font-size: 10px;
    padding: 2px 4px;
    height: 24px;
}

.pax-inline-select {
    font-size: 10px;
    padding: 1px 3px;
    height: 24px;
}

.pax-inline-date {
    font-size: 10px;
    padding: 1px 3px;
    height: 24px;
    min-width: 110px;
}

.pax-override-dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #f59e0b;
    vertical-align: super;
    margin-left: 2px;
}

/* -- Two-col layout (1/3 basic + 2/3 rooms+pax) -------------------- */
.res-two-col {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px;
    padding: 10px;
    height: 100%;
    overflow: hidden;
}

/* -- Room picker date/pax filter row -------------------------------- */
.room-picker-date-row {
    display: grid;
    grid-template-columns: 1fr 1fr 80px 80px;
    gap: 8px;
    padding: 0 0 10px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
}

/* -- Room-level pricing section in room card ------------------------ */
.room-pricing-section {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 0.5px solid var(--border);
}

.room-pricing-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.room-pricing-actions {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

.room-rate-price-display {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 2px 6px;
    background: var(--surface2);
    border-radius: 4px;
}

.room-rate-amount {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
}

.room-rate-label {
    font-size: 10px;
    color: var(--text-muted);
}

/* -- Pax guest lookup ----------------------------------------------- */
.pax-guest-linked {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pax-guest-name {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pax-guest-search {
    position: relative;
}

.pax-guest-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 200;
    min-width: 220px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    max-height: 180px;
    overflow-y: auto;
}

.pax-guest-option {
    padding: 6px 10px;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

    .pax-guest-option:hover {
        background: var(--hover);
    }

.pax-guest-add {
    border-top: 1px solid var(--border);
    color: var(--primary);
    font-weight: 600;
}

/* -- Pax board / meal sessions -------------------------------------- */
.pax-board-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pax-meal-sessions {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0 0 0;
    border-top: 0.5px dashed var(--border);
}

.pax-meal-session-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pax-session-label {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    min-width: 24px;
}

/* -- Room subgrid table --------------------------------------------- */
.room-subgrid-table {
    font-size: 10px;
    min-width: 800px;
}

    .room-subgrid-table th {
        font-size: 9px;
        padding: 4px 5px;
        white-space: nowrap;
    }

    .room-subgrid-table td {
        padding: 3px 4px;
        vertical-align: top;
    }

.room-subgrid-row {
    border-bottom: 1px solid var(--border);
}

.rs-room-name {
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
}

.rs-room-loc {
    font-size: 8px;
    color: var(--text-muted);
    margin-top: 1px;
}

.rs-num-input {
    width: 46px;
    padding: 1px 3px;
    height: 22px;
    font-size: 10px;
}

.rs-cur-select {
    width: 52px;
    padding: 1px 2px;
    height: 22px;
    font-size: 10px;
}

.rs-icons-row {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    font-size: 11px;
}

.rs-guests-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rs-guest-row {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    padding: 1px 3px;
    background: var(--surface2);
    border-radius: 3px;
}

.rs-master-badge {
    background: #7c3aed;
    color: #fff;
    border-radius: 3px;
    padding: 0 3px;
    font-size: 8px;
    font-weight: 700;
    flex-shrink: 0;
}

.rs-guest-no {
    font-weight: 700;
    color: var(--primary);
    flex-shrink: 0;
}

.rs-guest-name {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rs-guest-id {
    color: var(--text-muted);
    font-size: 8px;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rs-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 12px;
}

    .rs-icon-btn:hover {
        background: var(--hover);
    }

.rs-price-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rs-price-val {
    font-size: 11px;
    font-weight: 700;
    color: var(--primary);
}

.pax-subrow td {
    background: rgba(59,130,246,.02);
}

.table-selected {
    background: rgba(59,130,246,.06);
}

/* ═══ Room Cards ═══════════════════════════════════════════════════ */
.room-cards-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    overflow-y: auto;
}

.room-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: visible;
    background: var(--surface);
    transition: box-shadow .15s;
}

    .room-card:hover {
        box-shadow: 0 2px 8px rgba(0,0,0,.07);
    }

.room-card-tentative {
    border-color: #f59e0b;
    border-style: dashed;
}

/* Card header */
.room-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--surface2);
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid transparent;
    transition: background .1s;
    flex-wrap: wrap;
    border-radius: 10px 10px 0 0;
}

    .room-card-header:hover {
        background: var(--hover);
    }

.rc-roomno {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}

.rc-loc {
    font-size: 10px;
    color: var(--text-muted);
}

.rc-icons {
    display: flex;
    gap: 4px;
    font-size: 11px;
}

.rc-view-icon {
    color: var(--primary);
    opacity: .7;
}

.rc-pax-badge {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    background: rgba(59,130,246,.1);
    color: #2563eb;
    padding: 2px 7px;
    border-radius: 10px;
    font-weight: 600;
}

.rc-main-guest {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-muted);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rc-master-badge {
    background: #7c3aed;
    color: #fff;
    border-radius: 4px;
    padding: 0 4px;
    font-size: 9px;
    font-weight: 700;
    flex-shrink: 0;
}

.rc-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 3px 5px;
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 13px;
}

    .rc-action-btn:hover {
        background: var(--hover);
        color: var(--text);
    }

    .rc-action-btn.danger:hover {
        color: #dc2626;
    }

.rc-chevron {
    font-size: 10px;
    color: var(--text-muted);
    margin-left: 2px;
}

/* Card body */
.room-card-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: visible;
}

/* Pax count stepper row */
.rc-pax-count-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.rc-pax-count-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rc-pax-label {
    font-size: 11px;
    color: var(--text-muted);
    min-width: 50px;
}

.rc-pax-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.rc-step-btn {
    background: var(--surface2);
    border: none;
    cursor: pointer;
    width: 26px;
    height: 26px;
    font-size: 14px;
    color: var(--text);
    transition: background .1s;
}

    .rc-step-btn:hover:not(:disabled) {
        background: var(--hover);
    }

    .rc-step-btn:disabled {
        opacity: .3;
        cursor: not-allowed;
    }

.rc-step-val {
    width: 28px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    background: var(--surface);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    line-height: 26px;
}

.rc-pax-max {
    font-size: 10px;
    color: var(--text-muted);
}

.rc-extra-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    background: rgba(5,150,105,.1);
    color: #059669;
    padding: 2px 8px;
    border-radius: 10px;
}

.rc-extra-bonus {
    font-weight: 700;
}

/* Pax section */
.rc-pax-section {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: visible;
}

.rc-pax-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
}

.rc-pax-section-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.rc-pax-count-badge {
    background: var(--border);
    color: var(--text-muted);
    border-radius: 8px;
    padding: 0 5px;
    font-size: 10px;
}

.rc-add-pax-btn {
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 5px;
    background: var(--primary);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

    .rc-add-pax-btn:hover {
        opacity: .9;
    }

    .rc-add-pax-btn:disabled {
        opacity: .4;
        cursor: not-allowed;
    }

.rc-pax-rows {
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.rc-pax-empty {
    padding: 14px;
    text-align: center;
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
}

/* Pax row */
.rc-pax-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    overflow: visible;
}

    .rc-pax-row:last-child {
        border-bottom: none;
    }

.rc-pax-adult {
    background: rgba(59,130,246,.03);
}

.rc-pax-child {
    background: rgba(245,158,11,.03);
}

.rc-pax-badge-no {
    border-radius: 5px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
}

    .rc-pax-badge-no.adult {
        background: rgba(59,130,246,.15);
        color: #1d4ed8;
    }

    .rc-pax-badge-no.child {
        background: rgba(245,158,11,.15);
        color: #b45309;
    }

/* Guest display */
.rc-pax-guest {
    min-width: 130px;
    flex: 0 0 130px;
}

.rc-guest-linked {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.rc-linked-icon {
    color: #059669;
    font-size: 10px;
}

.rc-guest-linked-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rc-guest-id {
    font-size: 9px;
    color: var(--text-muted);
}

.rc-guest-unlinked {
    display: flex;
    align-items: center;
    gap: 4px;
}

.rc-guest-slot {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--surface2);
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px dashed var(--border);
}

.rc-guest-slot-label {
    font-size: 9px;
    color: var(--text-muted);
    font-style: italic;
}

/* Board + meals */
.rc-pax-board {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 120px;
}

.rc-board-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    background: rgba(124,58,237,.1);
    color: #7c3aed;
    border: 1px solid rgba(124,58,237,.2);
    border-radius: 6px;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 600;
    transition: background .1s;
    width: fit-content;
}

    .rc-board-chip:hover {
        background: rgba(124,58,237,.18);
    }

    .rc-board-chip.overridden {
        background: rgba(124,58,237,.2);
        border-color: rgba(124,58,237,.4);
    }

.rc-inherited-tag {
    font-size: 8px;
    background: rgba(0,0,0,.08);
    padding: 0 3px;
    border-radius: 3px;
    font-weight: 400;
    color: inherit;
    opacity: .7;
}

.rc-chip-edit {
    font-size: 8px;
    opacity: .5;
}

.rc-meal-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.rc-meal-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 2px 6px;
    font-size: 10px;
    transition: background .1s;
}

    .rc-meal-chip:hover {
        background: var(--hover);
    }

.rc-meal-type {
    font-weight: 700;
    color: var(--text-muted);
    min-width: 16px;
}

.rc-meal-name {
    color: var(--text);
}

/* Dates */
.rc-pax-dates {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 100px;
}

.rc-date-pair {
    display: flex;
    align-items: center;
    gap: 4px;
}

.rc-date-label {
    font-size: 9px;
    color: var(--text-muted);
    min-width: 20px;
    font-weight: 600;
    text-transform: uppercase;
}

.rc-date-input {
    border: none;
    background: transparent;
    font-size: 10px;
    color: var(--text);
    padding: 1px 2px;
    border-radius: 3px;
    cursor: pointer;
}

    .rc-date-input:focus {
        background: var(--surface2);
        outline: none;
    }

    .rc-date-input.overridden {
        color: #f59e0b;
        font-weight: 600;
    }

/* Nationality */
.rc-pax-nat {
    min-width: 50px;
}

.rc-nat-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 600;
}

    .rc-nat-chip:hover {
        background: var(--hover);
    }

    .rc-nat-chip.overridden {
        background: rgba(245,158,11,.1);
        border-color: rgba(245,158,11,.3);
        color: #b45309;
    }

/* Pax actions */
.rc-pax-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

.rc-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 3px 5px;
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 11px;
}

    .rc-icon-btn:hover {
        background: var(--hover);
    }

    .rc-icon-btn.danger:hover {
        color: #dc2626;
    }

.rc-notes-active {
    color: #f59e0b;
}

/* ── Day Use WOR Main Guest ────────────────────────────────────── */
.du-main-guest-search { position: relative; margin-bottom: 6px; }
.du-main-guest-dropdown {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 200;
    background: var(--card-bg, #fff); border: 1px solid #e2e8f0;
    border-radius: 0 0 8px 8px; box-shadow: 0 4px 12px rgba(0,0,0,.12);
    max-height: 200px; overflow-y: auto;
}
.du-main-guest-row {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; cursor: pointer; font-size: 11px;
    border-bottom: 1px solid #f1f5f9;
}
.du-main-guest-row:hover { background: #f8fafc; }
.du-guest-card {
    background: #f8fafc; border: 1.5px solid #bfdbfe;
    border-radius: 8px; padding: 10px 12px; margin-bottom: 6px;
}
.du-guest-card-name { font-weight: 700; font-size: 13px; color: #1e40af; }
.du-guest-card-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.du-guest-img-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 8px;
}
.du-guest-img-slot {
    border: 1px dashed #cbd5e1; border-radius: 6px;
    display: flex; flex-direction: column; align-items: center;
    padding: 4px; gap: 3px; min-height: 52px;
}
.du-guest-img-slot img { width: 100%; max-height: 40px; object-fit: cover; border-radius: 4px; cursor: pointer; }
.du-guest-img-label { font-size: 9px; color: var(--text-muted); }
.du-guest-img-btns { display: flex; gap: 3px; }
.du-guest-img-btn { font-size: 9px !important; padding: 1px 5px !important; }

/* ── WOR Price Box ──────────────────────────────────────────────── */
.du-price-box {
    background: #fffbeb; border: 1.5px solid #fcd34d;
    border-radius: 8px; padding: 10px 12px; margin: 4px 0 6px;
    font-size: 12px;
}
.du-price-header { font-weight: 700; color: #92400e; margin-bottom: 6px; }
.du-price-row {
    display: grid; grid-template-columns: 1fr auto auto;
    gap: 8px; align-items: center; padding: 2px 0; color: #78350f;
}
.du-price-total { font-weight: 600; min-width: 70px; text-align: right; }
.du-price-footer {
    display: flex; justify-content: space-between; font-weight: 800;
    font-size: 13px; color: #92400e; border-top: 1.5px solid #fcd34d;
    margin-top: 6px; padding-top: 5px;
}

/* ── Day Use Without Room pax panel ─────────────────────────────── */
.du-noroom-panel {
    padding: 10px 10px 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.du-noroom-counters {
    display: flex;
    gap: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 14px;
}
.du-noroom-counter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}
.du-noroom-counter-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 58px;
}
.du-noroom-guest-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}
.du-noroom-type-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}
.du-noroom-type-badge.adult {
    background: #dbeafe;
    color: #1d4ed8;
}
.du-noroom-type-badge.child {
    background: #fef9c3;
    color: #a16207;
}
.du-noroom-name-input {
    flex: 1;
    font-size: 11px !important;
    height: 26px !important;
    padding: 2px 7px !important;
}
.du-noroom-add-btns {
    display: flex;
    gap: 6px;
    padding-top: 4px;
}

/* Price footer */
.rc-price-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--surface2);
    border-top: 1px solid var(--border);
    border-radius: 0 0 10px 10px;
    flex-wrap: wrap;
}

.rc-manual-price {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rc-price-input {
    width: 100px;
    height: 28px;
    font-size: 11px;
}

.rc-cur-select {
    width: 70px;
    height: 28px;
    font-size: 11px;
}

.rc-calc-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.rc-price-amount {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary);
}

.rc-price-label {
    font-size: 10px;
    color: var(--text-muted);
}

.rc-footer-btn {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 5px;
    background: var(--surface);
    border: 1px solid var(--border);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text);
}

    .rc-footer-btn:hover {
        background: var(--hover);
    }

/* Picker modals */
.rc-picker-options {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rc-picker-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    width: 100%;
    color: var(--text);
    font-size: 12px;
    transition: background .1s;
}

    .rc-picker-option:hover {
        background: var(--hover);
    }

    .rc-picker-option.selected {
        background: rgba(59,130,246,.08);
    }

.rc-picker-code {
    font-weight: 700;
    min-width: 32px;
    color: var(--primary);
    font-size: 11px;
}

.rc-picker-name {
    flex: 1;
}

.rc-default-tag {
    font-size: 9px;
    background: rgba(5,150,105,.1);
    color: #059669;
    padding: 1px 4px;
    border-radius: 3px;
}

.rc-vip-tag {
    font-size: 9px;
    background: rgba(124,58,237,.1);
    color: #7c3aed;
    padding: 1px 4px;
    border-radius: 3px;
}

/* ═══ Inline pax guest search ══════════════════════════════════════ */
.rc-pax-guest {
    position: relative;
    min-width: 180px;
    flex: 0 0 180px;
    overflow: visible;
}

/* Linked guest card */
.rc-guest-linked-card {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 7px;
    background: rgba(5,150,105,.07);
    border: 1px solid rgba(5,150,105,.2);
    border-radius: 7px;
}

    .rc-guest-linked-card.master {
        background: rgba(124,58,237,.07);
        border-color: rgba(124,58,237,.25);
    }

    .rc-guest-linked-card.name-only {
        background: rgba(245,158,11,.06);
        border: 1px dashed rgba(245,158,11,.35);
    }

.rc-crown {
    font-size: 12px;
    flex-shrink: 0;
}

.rc-linked-icon {
    color: #059669;
    font-size: 11px;
    flex-shrink: 0;
}

.rc-guest-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.rc-guest-linked-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rc-guest-id-chip {
    font-size: 9px;
    color: var(--text-muted);
}

.rc-guest-nat-chip {
    font-size: 9px;
    background: var(--surface2);
    padding: 0 4px;
    border-radius: 3px;
    color: var(--text-muted);
}

.rc-unlink-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 10px;
    flex-shrink: 0;
    opacity: .6;
    margin-left: auto;
}

    .rc-unlink-btn:hover {
        background: rgba(220,38,38,.08);
        color: #dc2626;
        opacity: 1;
    }

/* Search input */
.rc-guest-search-wrap {
    position: relative;
    overflow: visible;
}

.rc-guest-search-input-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.rc-master-hint {
    font-size: 12px;
    flex-shrink: 0;
}

.rc-guest-input-wrap {
    position: relative;
    flex: 1;
}

.rc-search-icon {
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: var(--text-muted);
    pointer-events: none;
}

.rc-guest-input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 8px 4px 24px;
    font-size: 11px;
    background: var(--surface);
    color: var(--text);
    outline: none;
    transition: border-color .15s;
}

    .rc-guest-input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 2px rgba(99,102,241,.1);
    }

    .rc-guest-input.master-input:focus {
        border-color: #7c3aed;
        box-shadow: 0 0 0 2px rgba(124,58,237,.12);
    }

    .rc-guest-input::placeholder {
        color: var(--text-muted);
        font-style: italic;
    }

/* Dropdown */
.rc-guest-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 9999;
    min-width: 260px;
    max-width: 320px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    overflow: hidden;
}

.rc-dropdown-section-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    padding: 6px 10px 3px;
    background: var(--surface2);
}

.rc-dropdown-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    color: var(--text);
    transition: background .1s;
}

    .rc-dropdown-option:hover {
        background: var(--hover);
    }

.rc-drop-icon {
    font-size: 12px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.rc-drop-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.rc-drop-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rc-drop-meta {
    font-size: 10px;
    color: var(--text-muted);
}

.rc-drop-phone {
    font-size: 10px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.rc-add-name-opt {
    border-top: 1px solid var(--border);
}

/* -- Move guest button ------------------------------------------- */
.rc-move-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 10px;
    opacity: .6;
}

    .rc-move-btn:hover {
        background: rgba(59,130,246,.08);
        color: var(--primary);
        opacity: 1;
    }

.rc-picker-disabled {
    opacity: .4;
    cursor: not-allowed;
}

    .rc-picker-disabled:hover {
        background: none;
    }

/* -- Mobile with dial code --------------------------------------- */
.rc-mobile-input-wrap {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.rc-dial-prefix {
    background: var(--surface2);
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--primary);
    border-right: 1px solid var(--border);
    display: flex;
    align-items: center;
    white-space: nowrap;
    min-width: 42px;
    justify-content: center;
}

.rc-mobile-input {
    border: none !important;
    border-radius: 0 !important;
    flex: 1;
}

/* -- Image upload buttons ---------------------------------------- */
.rc-img-upload-btns {
    display: flex;
    gap: 6px;
    margin-bottom: 4px;
}

.rc-img-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    font-size: 11px;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    background: var(--surface2);
    color: var(--text);
    transition: background .1s;
}

    .rc-img-btn:hover {
        background: var(--hover);
    }

.rc-img-preview-wrap {
    position: relative;
    width: fit-content;
    margin-top: 4px;
}

.rc-img-preview {
    max-height: 90px;
    border-radius: 6px;
    border: 1px solid var(--border);
}

.rc-img-clear {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    background: #dc2626;
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* -- Create guest modal ------------------------------------------ */
.create-guest-required-hint {
    font-size: 10px;
    color: var(--text-muted);
    background: var(--surface2);
    padding: 5px 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    border-left: 3px solid var(--primary);
}

.rc-mobile-lock-hint {
    font-size: 10px;
    color: #f59e0b;
    margin-left: 6px;
    font-weight: 500;
}

.rc-mobile-locked {
    opacity: .5;
    cursor: not-allowed;
}

    .rc-mobile-locked input {
        cursor: not-allowed;
        background: var(--surface2);
    }

/* ═══ Folio & Payment Tab ══════════════════════════════════════════ */
.folio-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 12px;
}

.folio-section {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.folio-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--surface2);
    font-size: 12px;
    font-weight: 700;
    border-bottom: 1px solid var(--border);
}

/* Voucher header */
.voucher-header {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}

.voucher-meta-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
}

.voucher-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.voucher-meta-label {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}

.voucher-meta-value {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
}

/* Voucher table */
.voucher-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

    .voucher-table th {
        padding: 6px 10px;
        background: var(--surface2);
        font-size: 10px;
        font-weight: 700;
        border-bottom: 1px solid var(--border);
        text-transform: uppercase;
        letter-spacing: .03em;
        color: var(--text-muted);
    }

    .voucher-table td {
        padding: 6px 10px;
        border-bottom: 1px solid var(--border);
    }

    .voucher-table tbody tr:last-child td {
        border-bottom: none;
    }

.voucher-subtotal-row td {
    background: var(--surface2);
    font-weight: 700;
    border-top: 2px solid var(--border);
}

/* Currency summary row */
.voucher-currency-row {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    background: var(--surface2);
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
    align-items: center;
}

.voucher-currency-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    min-width: 80px;
}

    .voucher-currency-box.active {
        border-color: var(--primary);
        background: rgba(99,102,241,.05);
    }

.voucher-currency-label {
    font-size: 9px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
}

.voucher-currency-amount {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    font-family: monospace;
}

.voucher-balance-box {
    margin-left: auto;
    padding: 6px 16px;
    border: 2px solid #dc2626;
    border-radius: 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .voucher-balance-box.paid {
        border-color: #059669;
    }

        .voucher-balance-box.paid .voucher-currency-amount {
            color: #059669;
        }

    .voucher-balance-box.due .voucher-currency-amount {
        color: #dc2626;
    }

/* Balance inline badge */
.voucher-balance-inline {
    font-size: 11px;
}

    .voucher-balance-inline.due {
        color: #dc2626;
    }

    .voucher-balance-inline.paid {
        color: #059669;
    }

/* Add payment bar */
.add-payment-bar {
    padding: 12px 14px;
    background: var(--surface2);
    border-top: 1px solid var(--border);
}

.add-payment-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 8px;
}

.add-payment-fields {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* -- Group fields ------------------------------------------------ */
.group-fields-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}

.form-label-sm {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* -- Manual price currency badge --------------------------------- */
.rc-manual-cur-badge {
    background: var(--primary);
    color: #fff;
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

/* -- Reservation type badges ---------------------------------------- */
.res-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    flex-shrink: 0;
}

    .res-type-badge.day-use {
        background: #fef3c7;
        color: #d97706;
        border: 1px solid #fde68a;
    }

    .res-type-badge.house-use {
        background: #ede9fe;
        color: #7c3aed;
        border: 1px solid #ddd6fe;
    }

/* -- Receipt house-use line ----------------------------------------- */
.receipt-line.house-use {
    opacity: .7;
    font-style: italic;
}

/* ── In-House / Check-Out Layout ─────────────────────────────────── */
.ih-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 0;
    height: calc(100vh - var(--header-h) - 57px);
    overflow: hidden;
}

/* Left tree */
.ih-tree {
    border-right: 1px solid var(--border);
    overflow-y: auto;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ih-tree-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    padding: 6px 8px 4px;
}

.ih-empty {
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* Room node */
.ih-room-node {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 4px;
    transition: border-color .15s;
}

    .ih-room-node.selected {
        border-color: var(--primary);
    }

    .ih-room-node.checked-out {
        opacity: .55;
    }

.ih-room-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    cursor: pointer;
    background: var(--surface);
    transition: background .12s;
}

    .ih-room-row:hover {
        background: var(--hover);
    }

.ih-room-icon {
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.ih-room-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
}

.ih-room-no {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}

.ih-room-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
    max-width: 100px;
    overflow: hidden;
}

.ih-res-no {
    font-size: 10px;
    color: var(--text-muted);
    font-family: monospace;
}

.ih-nights {
    font-size: 10px;
    color: var(--text-muted);
}

/* Pax row */
.ih-pax-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px 5px 28px;
    border-top: 1px solid var(--border);
    cursor: pointer;
    background: var(--bg);
    transition: background .12s;
}

    .ih-pax-row:hover {
        background: var(--hover);
    }

    .ih-pax-row.selected {
        background: rgba(37,99,168,.1);
    }

.ih-pax-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ih-pax-icon {
    font-size: 11px;
    color: var(--text-muted);
}

.ih-pax-name {
    font-size: 12px;
    color: var(--text);
    flex: 1;
}

.ih-pax-status-badge {
    font-size: 10px;
    font-weight: 600;
}

.ih-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 9px;
    font-weight: 700;
}

    .ih-badge.group {
        background: rgba(37,99,168,.12);
        color: var(--primary);
    }

    .ih-badge.dayuse {
        background: #fef3c7;
        color: #d97706;
    }

/* Right detail */
.ih-detail {
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ih-detail-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

/* Sections */
.ih-section {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: visible;
    background: var(--surface);
}

.ih-section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    font-weight: 700;
    background: var(--bg);
}

.ih-res-no-badge {
    font-size: 10px;
    font-family: monospace;
    background: var(--hover);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--text-muted);
}

.ih-detail-grid {
    padding: 6px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ih-detail-row { display: flex; gap: 10px; font-size: 12px; }
.ih-detail-label { color: var(--text-muted); min-width: 90px; }
.ih-detail-value { color: var(--text); font-weight: 500; }

/* Horizontal info badges */
.ih-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--surface-2, #f1f5f9);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 2px 10px 2px 8px;
    margin: 2px 3px 2px 0;
    white-space: nowrap;
}
.ih-chip-label {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
    font-weight: 600;
    padding-right: 3px;
    border-right: 1px solid var(--border);
}
.ih-chip-val {
    font-size: 11px;
    font-weight: 700;
    color: var(--text);
}

.ih-actions {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    padding: 5px 10px;
    border-top: 1px solid var(--border);
    background: var(--bg);
}
.ih-actions .pms-btn {
    font-size: 10px !important;
    padding: 3px 8px !important;
    height: auto !important;
    line-height: 1.4 !important;
}
.ih-actions .pms-btn i { font-size: 10px !important; }

/* Folio */
.ih-folio-section {
    flex: 1;
}

.ih-folio {
    border-bottom: 1px solid var(--border);
    margin: 0 14px 8px;
    padding-bottom: 8px;
}

    .ih-folio:last-child {
        border-bottom: none;
    }

.ih-folio-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0 6px;
    font-size: 12px;
}

.ih-folio-no {
    font-weight: 700;
    font-family: monospace;
    font-size: 13px;
}

.ih-folio-type-badge {
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
}

    .ih-folio-type-badge.main {
        background: rgba(37,99,168,.12);
        color: var(--primary);
    }

    .ih-folio-type-badge.personal {
        background: rgba(16,185,129,.12);
        color: #10b981;
    }

    .ih-folio-type-badge.house {
        background: rgba(124,58,237,.12);
        color: #7c3aed;
    }

.ih-folio-actions {
    display: flex;
    gap: 6px;
    padding: 0 0 6px;
}

/* Transactions */
.ih-txn {
    padding: 2px 0;
}

    .ih-txn.voided {
        opacity: .5;
    }

.ih-txn-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    padding: 3px 0;
}

.ih-txn-date {
    width: 36px;
    color: var(--text-muted);
    font-size: 10px;
    flex-shrink: 0;
}

.ih-txn-title {
    flex: 1;
    color: var(--text);
}

.ih-txn-guest {
    font-size: 10px;
    color: var(--text-muted);
    margin-left: 6px;
}

.ih-txn-amount {
    font-weight: 600;
    font-size: 12px;
    font-family: monospace;
    flex-shrink: 0;
}

    .ih-txn-amount.debit {
        color: #ef4444;
    }

    .ih-txn-amount.credit {
        color: #10b981;
    }

.ih-void-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 4px;
    opacity: .5;
    transition: opacity .12s;
}

    .ih-void-btn:hover {
        opacity: 1;
        color: #ef4444;
    }

.ih-txn-details {
    font-size: 10px;
    color: var(--text-muted);
    padding: 2px 0 4px 44px;
    font-style: italic;
}

/* Items (blue) */
.ih-txn-item {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 2px 0 2px 44px;
    font-size: 11px;
    color: #3b82f6;
}

.ih-item-title {
    flex: 1;
}

.ih-item-qty {
    color: var(--text-muted);
}

.ih-item-net, .ih-item-tax, .ih-item-gross {
    font-family: monospace;
}

/* Item taxes (red) */
.ih-txn-item-tax {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 1px 0 1px 60px;
    font-size: 10px;
    color: #ef4444;
}

/* Voided collapse */
.ih-voided-label {
    font-size: 10px;
    color: var(--text-muted);
    padding: 4px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

    .ih-voided-label:hover {
        color: var(--text);
    }

/* ── Pax check-in UI ─────────────────────────────────────────────── */
.rc-pax-checkin-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: rgba(37,99,168,.06);
    border-radius: 6px;
    margin-bottom: 4px;
    border: 1px dashed rgba(37,99,168,.25);
}

.rc-pax-status-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.rc-pax-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── In-House Tree Fix ──────────────────────────── */
.ih-tree { overflow-y: auto; overflow-x: hidden; }
.ih-room-row { min-width: 0; overflow: hidden; }
.ih-room-no { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 110px; }
.ih-res-no { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 95px; font-size: 10px; }
.ih-pax-row { min-width: 0; overflow: hidden; }
.ih-pax-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; display: block; }

/* ── Folio Print A4 B&W ─────────────────────────── */


/* ── Print: InHouse Folio A4 B&W ── */
@media print {
  .pms-sidebar, .pms-header, .pms-footer, .sidebar-overlay,
  .page-header, .ih-tree, .ih-actions, .ih-folio-actions,
  .ih-section-header button, .ih-void-btn,
  .pms-btn, button { display: none !important; }

  .pms-shell, .pms-body, .pms-main, .pms-content,
  body, html {
    background: #fff !important; color: #000 !important;
    width: 100% !important; margin: 0 !important; padding: 0 !important;
  }
  .pms-body { display: block !important; }
  .pms-main { margin: 0 !important; }
  .ih-layout { display: block !important; height: auto !important; overflow: visible !important; }
  .ih-detail { overflow: visible !important; padding: 8px !important; }

  :root, .theme-dark, .theme-light {
    --bg: #fff !important; --surface: #fff !important; --surface2: #f5f5f5 !important;
    --border: #ccc !important; --text: #000 !important; --text-muted: #666 !important;
  }

  .ih-section { border: 1px solid #ccc !important; margin-bottom: 12px; page-break-inside: avoid; }
  .ih-section-header { border-bottom: 2px solid #000 !important; padding: 6px 12px !important; font-weight: 700; }
  .ih-detail-label { color: #666 !important; }
  .ih-detail-value { color: #000 !important; font-weight: 600; }

  .ih-folio { border: 1px solid #ddd !important; padding: 8px !important; margin: 4px 0 !important; page-break-inside: avoid; }
  .ih-folio-header { font-size: 11px; border-bottom: 1px solid #000; padding-bottom: 4px; margin-bottom: 4px; }
  .ih-folio-no { font-weight: 700; }
  .ih-txn { border-bottom: 1px solid #ddd; }
  .ih-txn-row { font-size: 10px; }

  *, *::before, *::after { color: #000 !important; }
}

/* ── jsTree In-House overrides ─────────────────────── */
.ih-tree { display: flex; flex-direction: column; overflow: hidden; }
.ih-tree #ihTree { flex: 1; overflow-y: auto; overflow-x: hidden; }

/* jsTree dark theme integration */
.theme-dark .jstree-default .jstree-anchor { color: var(--text); }
.theme-dark .jstree-default .jstree-hovered { background: var(--hover); color: var(--text); }
.theme-dark .jstree-default .jstree-clicked { background: var(--primary); color: #fff !important; border-radius: 4px; }
.theme-dark .jstree-default .jstree-wholerow-hovered { background: var(--hover); }
.theme-dark .jstree-default .jstree-wholerow-clicked { background: rgba(59,130,246,0.15); }
.theme-dark .jstree-default .jstree-icon.jstree-themeicon { color: var(--text-muted); }

/* Light theme */
.theme-light .jstree-default .jstree-clicked { background: #dbeafe; color: #1e40af !important; border-radius: 4px; }
.theme-light .jstree-default .jstree-wholerow-clicked { background: #eff6ff; }

/* Common */
.jstree-default .jstree-anchor { font-size: 12px; padding: 3px 6px; line-height: 1.5; }
.jstree-default .jstree-anchor .jstree-icon { font-size: 13px; margin-right: 4px; }
.jstree-default .jstree-node { margin-left: 12px; }
.jstree-default .jstree-search { font-weight: 700; font-style: normal; color: var(--primary) !important; }
.jstree-default .jstree-wholerow { height: 28px; }

/* Override jsTree bg images for dark mode */
.theme-dark .jstree-default .jstree-node,
.theme-dark .jstree-default .jstree-icon { background-image: none; }

/* Text colors for inline HTML in node text */
.jstree-anchor b { font-weight: 700; }
.jstree-anchor small { font-weight: 400; }

/* Search highlight */
.jstree-default .jstree-search { background: rgba(234, 179, 8, 0.15) !important; border-radius: 3px; }

/* ══════════════════════════════════════════════════════════════════════
   Pax Relation + Photo columns
   ══════════════════════════════════════════════════════════════════════ */

/* Relation dropdown */
.rc-pax-relation {
    display: flex;
    align-items: center;
}

.rc-relation-select {
    height: 26px;
    font-size: 11px;
    padding: 0 4px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    min-width: 110px;
    max-width: 130px;
}

    .rc-relation-select:focus {
        outline: none;
        border-color: var(--primary);
    }

/* Photo strip */
.rc-pax-photos {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.rc-photo-slot {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 5px;
    overflow: visible;
    flex-shrink: 0;
}

.rc-photo-thumb {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 5px;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: transform .15s;
}

    .rc-photo-thumb:hover {
        transform: scale(1.08);
    }

.rc-photo-empty {
    width: 36px;
    height: 36px;
    border: 1px dashed var(--border);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    color: var(--text-muted);
    font-size: 9px;
    cursor: default;
}

    .rc-photo-empty i {
        font-size: 13px;
        opacity: .5;
    }

    .rc-photo-empty span {
        font-size: 8px;
        line-height: 1;
        text-align: center;
    }

.rc-photo-edit-btn {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--primary);
    font-size: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    z-index: 1;
}

    .rc-photo-edit-btn:hover {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
    }

/* Pax photo upload modal options */
.pax-photo-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pax-photo-option-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    cursor: pointer;
    transition: background .15s, border-color .15s;
    font-size: 14px;
    color: var(--text);
}

    .pax-photo-option-btn:hover {
        background: var(--hover);
        border-color: var(--primary);
    }

    .pax-photo-option-btn i {
        font-size: 20px;
        color: var(--primary);
        width: 24px;
        text-align: center;
    }

/* Webcam preview */
.webcam-preview-wrap {
    width: 100%;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.webcam-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.webcam-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}