@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    /* Primary - Deep Ocean Teal */
    --color-primary: #0e7490;
    --color-primary-light: #cffafe;
    --color-primary-dark: #164e63;

    /* Secondary - Warm Sand */
    --color-secondary: #d97706;
    --color-secondary-light: #fef3c7;

    /* Accent - Soft Coral */
    --color-accent: #e11d48;
    --color-accent-light: #ffe4e6;

    /* Success */
    --color-success: #059669;
    --color-success-light: #d1fae5;

    /* Neutrals */
    --color-surface: #ffffff;
    --color-background: #f0f4f8;
    --color-sidebar: #0c4a6e;
    --color-sidebar-text: #bae6fd;
    --color-sidebar-top: #0c4768;
    --color-sidebar-mid: #0b4160;
    --color-sidebar-bottom: #093750;
    --color-sidebar-border: rgba(186, 230, 253, 0.14);
    --color-sidebar-hover: rgba(255, 255, 255, 0.07);
    --color-sidebar-panel: rgba(255, 255, 255, 0.05);

    /* Text */
    --color-text-primary: #0f172a;
    --color-text-secondary: #475569;
    --color-text-muted: #475569;

    /* Borders */
    --color-border: #e2e8f0;
    --color-border-focus: #0e7490;
    --role-accent: #0e7490;
    --role-accent-soft: rgba(14, 116, 144, 0.14);
    --role-accent-strong: #164e63;

    /* Typography */
    --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'DM Sans', 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 7px;
    --radius-lg: 8px;
    --radius-xl: 12px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.08);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-text-primary);
}

html,
body {
    width: 100%;
}

body.dashboard-page {
    background: radial-gradient(circle at top right, rgba(14, 116, 144, 0.1), transparent 45%), var(--color-background);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-text-primary);
}

.app-shell {
    display: flex;
    min-height: 100vh;
    width: 100%;
    margin: 0;
    position: relative;
    overflow-x: hidden;
    --dashboard-sidebar-width: 260px;
    --dashboard-sidebar-collapsed-width: 72px;
    --dashboard-topbar-height: 76px;
}

.role-theme-super-admin {
    --role-accent: #4f7fd1;
    --role-accent-soft: rgba(79, 127, 209, 0.16);
    --role-accent-strong: #355ea8;
    --color-sidebar: #0a344d;
    --color-sidebar-text: #d8effd;
    --color-sidebar-top: #11415f;
    --color-sidebar-mid: #0a344d;
    --color-sidebar-bottom: #07283b;
    --color-sidebar-border: rgba(186, 230, 253, 0.15);
    --color-sidebar-hover: rgba(255, 255, 255, 0.075);
    --color-sidebar-panel: rgba(255, 255, 255, 0.055);
}

.role-theme-admin {
    --role-accent: #d9822b;
    --role-accent-soft: rgba(217, 130, 43, 0.16);
    --role-accent-strong: #ad5f17;
    --color-sidebar: #5a3616;
    --color-sidebar-text: #fff2e2;
    --color-sidebar-top: #71451e;
    --color-sidebar-mid: #5a3616;
    --color-sidebar-bottom: #45280e;
    --color-sidebar-border: rgba(254, 215, 170, 0.16);
    --color-sidebar-hover: rgba(255, 255, 255, 0.07);
    --color-sidebar-panel: rgba(255, 255, 255, 0.05);
}

.role-theme-manager {
    --role-accent: #7c63c9;
    --role-accent-soft: rgba(124, 99, 201, 0.16);
    --role-accent-strong: #6247b0;
    --color-sidebar: #3f3174;
    --color-sidebar-text: #efe7ff;
    --color-sidebar-top: #51408f;
    --color-sidebar-mid: #3f3174;
    --color-sidebar-bottom: #302457;
    --color-sidebar-border: rgba(221, 214, 254, 0.16);
    --color-sidebar-hover: rgba(255, 255, 255, 0.075);
    --color-sidebar-panel: rgba(255, 255, 255, 0.052);
}

.role-theme-employee {
    --role-accent: #2f9d6a;
    --role-accent-soft: rgba(47, 157, 106, 0.16);
    --role-accent-strong: #1f7a50;
    --color-sidebar: #1d5b45;
    --color-sidebar-text: #ddf8e8;
    --color-sidebar-top: #267258;
    --color-sidebar-mid: #1d5b45;
    --color-sidebar-bottom: #164535;
    --color-sidebar-border: rgba(187, 247, 208, 0.16);
    --color-sidebar-hover: rgba(255, 255, 255, 0.075);
    --color-sidebar-panel: rgba(255, 255, 255, 0.052);
}

.app-shell.sidebar-collapsed {
    --dashboard-sidebar-width: 64px;
}

/* Sidebar - Small screens (hidden by default, overlay when toggled) */
.sidebar {
    width: 190px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 16%),
        linear-gradient(180deg, var(--color-sidebar-top) 0%, var(--color-sidebar-mid) 38%, var(--color-sidebar-bottom) 100%);
    color: var(--color-sidebar-text);
    display: flex;
    flex-direction: column;
    border-right: 0;
    box-shadow: none;
    transition: left 0.28s ease, box-shadow 0.2s ease;
    position: fixed;
    top: 0;
    bottom: 0;
    left: -240px;
    height: 100vh;
    z-index: 1060;
    margin: 0;
    overflow: hidden;
}

.app-shell.sidebar-open .sidebar {
    left: 0;
}

/* Large screens (1280px+) - sidebar visible in normal flex layout */
@media (min-width: 1280px) {
    .sidebar {
        position: relative;
        left: 0 !important;
        flex: 0 0 240px;
        transition: none;
    }

    .app-shell.sidebar-open .sidebar {
        left: 0;
    }
}

.sidebar-brand {
    min-height: var(--dashboard-topbar-height);
    height: var(--dashboard-topbar-height);
    padding: 0.5rem 1rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.sidebar-brand-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

.sidebar-mobile-close {
    display: none;
    margin-left: auto;
    width: auto;
    height: auto;
    min-height: 0;
    padding: 0;
    color: var(--color-sidebar-text);
    background: transparent;
    border: 0;
    box-shadow: none;
    align-items: center;
    justify-content: center;
}

.sidebar-mobile-close i {
    font-size: 1.15rem;
    line-height: 1;
}

.sidebar-mobile-close:hover,
.sidebar-mobile-close:focus-visible {
    color: #ffffff;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.sidebar-brand::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--dashboard-topbar-height) - 2px);
    border-bottom: 1px solid color-mix(in srgb, var(--role-accent) 16%, rgba(14, 116, 144, 0.12) 84%);
}

.sidebar-title {
    color: #f0f9ff;
    font-family: var(--font-heading);
    font-size: 0.94rem;
    margin: 0;
    line-height: 1.15;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.sidebar-logo-frame {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.sidebar-logo-frame i {
    font-size: 1.05rem;
    color: #f0f9ff;
}

.sidebar-logo-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-subtitle {
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-sidebar-text) 72%, rgba(255, 255, 255, 0.28) 28%);
}

.sidebar-nav {
    padding: 0.8rem 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--role-accent) 55%, rgba(255, 255, 255, 0.22) 45%) rgba(0, 0, 0, 0.16);
}

.sidebar-nav::-webkit-scrollbar {
    width: 10px;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.14);
    border-radius: 999px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, color-mix(in srgb, var(--role-accent) 74%, #ffffff 26%), color-mix(in srgb, var(--role-accent-strong) 88%, #0f172a 12%));
    border-radius: 999px;
    border: 2px solid rgba(0, 0, 0, 0.14);
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, color-mix(in srgb, var(--role-accent) 58%, #ffffff 42%), var(--role-accent));
}

.sidebar-section-label {
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: color-mix(in srgb, var(--color-sidebar-text) 62%, rgba(255, 255, 255, 0.18) 38%);
    margin: 0.7rem 0.7rem 0.3rem;
}

.sidebar-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 34px;
    padding: 0.48rem 0.72rem;
    border-radius: 12px;
    color: rgba(240, 249, 255, 0.86);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.92rem;
    border: 1px solid transparent;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.sidebar-link-label {
    min-width: 0;
    flex: 1 1 auto;
    white-space: nowrap;
}

.sidebar-link i {
    width: 16px;
    text-align: center;
    font-size: 0.92rem;
    opacity: 0.92;
    color: color-mix(in srgb, var(--color-sidebar-text) 82%, #ffffff 18%);
}

.sidebar-link:hover,
.sidebar-link:focus-visible {
    background: var(--color-sidebar-hover);
    border-color: color-mix(in srgb, var(--color-sidebar-border) 86%, rgba(255, 255, 255, 0.08) 14%);
    color: #ffffff;
    text-decoration: none;
}

.sidebar-link:hover i,
.sidebar-link:focus-visible i {
    color: color-mix(in srgb, var(--role-accent) 68%, #ffffff 32%);
}

.sidebar-link.active {
    background: linear-gradient(180deg, color-mix(in srgb, var(--role-accent) 34%, rgba(255, 255, 255, 0.08) 66%) 0%, color-mix(in srgb, var(--role-accent-strong) 16%, rgba(255, 255, 255, 0.06) 84%) 100%);
    border-color: color-mix(in srgb, var(--role-accent) 58%, rgba(186, 230, 253, 0.12) 42%);
    color: #ffffff;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        0 8px 18px rgba(3, 15, 23, 0.14);
}

.sidebar-link.active::before {
    content: '';
    position: absolute;
    left: 0.38rem;
    top: 0.42rem;
    bottom: 0.42rem;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--role-accent) 82%, #ffffff 18%), var(--role-accent-strong));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.sidebar-link.active i {
    color: color-mix(in srgb, var(--role-accent) 74%, #ffffff 26%);
    opacity: 1;
}

.sidebar-notification-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    margin-left: auto;
    border-radius: 999px;
    background: #e11d48;
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(225, 29, 72, 0.22);
}


.sidebar-footer {
    padding: 0.8rem;
    border-top: 1px solid color-mix(in srgb, var(--color-sidebar-border) 86%, rgba(255, 255, 255, 0.03) 14%);
    flex-shrink: 0;
}

.mobile-sidebar-inline-action {
    appearance: none;
    display: none;
    width: 100%;
    text-align: left;
    background: transparent;
    cursor: pointer;
}

.sidebar-inline-meta {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 34px;
    padding: 0.48rem 0.72rem;
    color: color-mix(in srgb, var(--color-sidebar-text) 68%, rgba(255, 255, 255, 0.18) 32%);
    font-size: 0.84rem;
    font-weight: 500;
}

.sidebar-inline-meta i {
    width: 16px;
    text-align: center;
    font-size: 0.9rem;
    opacity: 0.8;
    color: color-mix(in srgb, var(--color-sidebar-text) 70%, rgba(255, 255, 255, 0.2) 30%);
}

.sidebar-inline-meta .sidebar-link-label {
    flex: 1 1 auto;
    white-space: nowrap;
}

.sidebar-inline-meta-value {
    color: #f0f9ff;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.mobile-sidebar-inline-meta {
    display: none;
}

.mobile-sidebar-inline-action.is-logout {
    color: #fca5a5;
}

.mobile-sidebar-inline-action.is-logout i {
    color: #fca5a5;
}

.app-shell.sidebar-hidden .sidebar-float-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    background: transparent;
    box-shadow: none;
    color: var(--color-text-secondary);
}

.app-shell.sidebar-hidden .sidebar-float-toggle:hover,
.app-shell.sidebar-hidden .sidebar-float-toggle:focus-visible {
    background: transparent;
    box-shadow: none;
    color: var(--role-accent);
}

.app-shell.sidebar-hidden .sidebar-float-toggle i {
    font-size: 1.3rem;
    line-height: 1;
}

.topbar-custom .sidebar-float-toggle,
.mobile-topbar .mobile-topbar-menu {
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.user-box {
    background: var(--color-sidebar-panel);
    border: 1px solid color-mix(in srgb, var(--color-sidebar-border) 82%, rgba(255, 255, 255, 0.04) 18%);
    border-radius: 14px;
    padding: 0.7rem 0.8rem;
}

.user-role {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.62rem;
    color: color-mix(in srgb, var(--color-sidebar-text) 70%, rgba(255, 255, 255, 0.16) 30%);
}

.role-accent-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.24rem 0.58rem;
    border-radius: 999px;
    background: var(--role-accent-soft);
    color: var(--role-accent-strong);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sidebar .role-accent-badge {
    background: rgba(255, 255, 255, 0.14);
    color: #f0f9ff;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.user-name {
    color: #f0f9ff;
    font-weight: 600;
    font-size: 0.9rem;
}

.sidebar-logout {
    background: color-mix(in srgb, var(--color-sidebar-panel) 86%, rgba(255, 255, 255, 0.02) 14%);
    border: 1px solid color-mix(in srgb, var(--color-sidebar-border) 82%, rgba(255, 255, 255, 0.06) 18%);
    color: #e0f2fe;
    min-height: 38px;
    font-size: 0.9rem;
}

.sidebar-logout:hover,
.sidebar-logout:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}


/* Main panel */
.main-panel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-x: hidden;
}

/* Compact and intermediate screens - ensure main panel fills available space */
@media (max-width: 1279.98px) {
    .main-panel {
        width: 100%;
        max-width: 100%;
    }
}

.topbar-custom {
    min-height: var(--dashboard-topbar-height);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border-bottom: 1px solid color-mix(in srgb, var(--role-accent) 16%, rgba(14, 116, 144, 0.12) 84%);
    border-radius: 0;
    box-shadow: none;
    padding: 0.5rem 0.8rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.55rem;
    position: sticky;
    top: 0;
    z-index: 1070;
}

.mobile-topbar,
.mobile-bottom-nav {
    display: none;
}

.mobile-topbar {
    position: sticky;
    top: 0;
    z-index: 1070;
    padding: 0.7rem 0.9rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 0;
    box-shadow: none;
}

.mobile-topbar-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.mobile-topbar-menu {
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    background: transparent;
    box-shadow: none;
    color: #334155;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.mobile-topbar-menu i {
    font-size: 1.35rem;
    line-height: 1;
}

.mobile-topbar-menu:hover,
.mobile-topbar-menu:focus-visible {
    color: var(--role-accent);
    background: transparent;
    box-shadow: none;
}

.mobile-topbar-brand {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    flex: 1 1 auto;
}

.mobile-topbar-brand-title {
    color: #0f172a;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.12;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-topbar-brand-meta {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-topbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;
}

.mobile-icon-btn {
    position: relative;
    width: auto;
    height: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #334155;
    background: transparent;
    box-shadow: none;
}

.mobile-icon-btn:hover,
.mobile-icon-btn:focus-visible {
    color: var(--role-accent);
    background: transparent;
    box-shadow: none;
}

.mobile-icon-btn i {
    font-size: 1.2rem;
    line-height: 1;
}

.mobile-topbar-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 0.28rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fb7185;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
}

.mobile-bottom-nav {
    position: sticky;
    bottom: 0;
    z-index: 1045;
    display: none;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
    padding: 0.45rem 0.4rem calc(0.45rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    backdrop-filter: blur(14px);
}

.mobile-bottom-nav-link {
    appearance: none;
    border: 0;
    background: transparent;
    color: #64748b;
    text-decoration: none;
    min-width: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.18rem;
    padding: 0.38rem 0.2rem;
    border-radius: 14px;
    font-size: 0.69rem;
    font-weight: 600;
    line-height: 1.1;
}

.mobile-bottom-nav-link i {
    font-size: 1.05rem;
    line-height: 1;
}

.mobile-bottom-nav-link span {
    white-space: nowrap;
}

.mobile-bottom-nav-link.active,
.mobile-bottom-nav-link:hover,
.mobile-bottom-nav-link:focus-visible {
    color: var(--role-accent);
    background: color-mix(in srgb, var(--role-accent) 14%, transparent 86%);
}

.topbar-main {
    min-width: 0;
    flex: 1 1 auto;
    border-radius: 0;
    box-shadow: none;
}

.topbar-title-wrap {
    min-width: 0;
    position: relative;
    padding-left: 10px;
    border-radius: 0;
}

.topbar-title-wrap::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 2px;
    border-radius: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--role-accent) 88%, #ffffff 12%), color-mix(in srgb, var(--role-accent-strong) 82%, #0f172a 18%));
}

.topbar-title {
    margin: 0;
    color: var(--color-text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: clamp(0.98rem, 1.25vw, 1.24rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
}

.topbar-text {
    color: var(--color-text-secondary);
    font-size: 0.68rem;
    margin-top: 2px;
    margin-bottom: 0;
    max-width: 42ch;
}

.topbar-divider {
    color: var(--color-text-muted);
    margin: 0 var(--space-xs);
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    margin-left: auto;
    flex-wrap: nowrap;
}

.topbar-action-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff 0%, #f5fbff 100%);
    border: 1px solid color-mix(in srgb, var(--role-accent) 14%, rgba(14, 116, 144, 0.14) 86%);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
}

.topbar-notification-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.topbar-notification-wrap:hover,
.topbar-notification-wrap:focus-within {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: translateY(-1px);
}

.topbar-profile-time-group {
    gap: 8px;
    padding: 4px 8px;
    background:
        radial-gradient(circle at top right, rgba(20, 184, 166, 0.12), transparent 42%),
        linear-gradient(180deg, #ffffff 0%, #f7fcff 100%);
    border-color: color-mix(in srgb, var(--role-accent) 18%, rgba(14, 116, 144, 0.12) 82%);
    box-shadow: 0 7px 16px color-mix(in srgb, var(--role-accent-soft) 24%, rgba(15, 23, 42, 0.04) 76%);
}

.topbar-action-group .dropdown {
    display: inline-flex;
}

.topbar-search {
    min-width: 240px;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    border: 1px solid var(--color-border);
    background: #f8fafc;
    border-radius: 999px;
    padding: var(--space-sm) 12px;
}

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

.topbar-search-input {
    border: 0;
    background: transparent;
    width: 100%;
    font-size: 13px;
    color: var(--color-text-primary);
    outline: 0;
}

.topbar-actions .icon-action-btn {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 0;
    background: transparent;
    color: var(--color-text-secondary);
    position: relative;
    transition: all 0.15s ease;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    line-height: 1;
    padding: 0;
}

.topbar-actions .icon-action-btn:hover,
.topbar-actions .icon-action-btn:focus-visible {
    background: transparent;
    color: var(--role-accent-strong);
    border-color: transparent;
    box-shadow: none;
}

.topbar-bell-btn {
    position: relative;
}

.notification-dot {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--color-accent);
    border: 1px solid #ffffff;
}

.topbar-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--color-accent);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 700;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 9px rgba(225, 29, 72, 0.18);
}

.topbar-action-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.topbar-actions .topbar-profile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(14, 116, 144, 0.2);
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
    color: var(--color-text-primary);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    appearance: none;
    -webkit-appearance: none;
    line-height: 1;
    cursor: pointer;
}

.topbar-actions .topbar-profile-btn:hover,
.topbar-actions .topbar-profile-btn:focus-visible {
    background: var(--color-primary-light);
    border-color: #bae6fd;
    color: var(--color-primary-dark);
}

.topbar-actions .topbar-profile-btn::after {
    display: none;
}

.topbar-avatar {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, color-mix(in srgb, var(--role-accent) 76%, #0e7490 24%), color-mix(in srgb, var(--role-accent-strong) 72%, #14b8a6 28%));
    color: #ffffff;
    font-weight: 700;
    flex: 0 0 auto;
    font-size: 10px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.topbar-avatar-large {
    width: 32px;
    height: 32px;
    font-size: 0.68rem;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.28),
        0 4px 10px color-mix(in srgb, var(--role-accent-soft) 58%, rgba(14, 116, 144, 0.08) 42%);
}

.topbar-profile-summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.topbar-profile-summary:hover,
.topbar-profile-summary:focus-visible {
    color: color-mix(in srgb, var(--role-accent-strong) 64%, var(--color-text-primary) 36%);
    text-decoration: none;
    outline: none;
}

.topbar-profile-copy {
    display: inline-flex;
    flex-direction: column;
    min-width: 0;
}

.topbar-profile-name {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.1;
}

.topbar-profile-role {
    margin-top: 2px;
    font-size: 0.52rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    font-weight: 700;
}

.topbar-profile-caret {
    color: var(--color-text-muted);
    font-size: 0.68rem;
    transition: transform 0.15s ease;
}

.topbar-profile-menu-toggle[aria-expanded="true"] .topbar-profile-caret {
    transform: rotate(180deg);
}

.topbar-profile-menu-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.topbar-profile-menu {
    min-width: 240px;
    width: 240px;
    padding: 0.45rem 0;
}

.topbar-profile-menu-section {
    padding: 0.35rem 0.55rem;
}

.topbar-profile-menu-section + .topbar-profile-menu-section {
    border-top: 1px solid var(--color-border);
}

.topbar-profile-account-section {
    padding-top: 0.5rem;
    padding-bottom: 0.65rem;
}

.topbar-profile-logout-section {
    padding-top: 0.45rem;
    padding-bottom: 0.4rem;
}

.topbar-profile-menu-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.topbar-profile-menu .topbar-menu-item {
    border-radius: 7px;
}

.topbar-profile-menu .topbar-menu-item.text-danger:hover,
.topbar-profile-menu .topbar-menu-item.text-danger:focus {
    background: rgba(225, 29, 72, 0.1);
    color: #be123c !important;
}

.topbar-actions .topbar-profile-btn:focus-visible,
.topbar-actions .icon-action-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.18), 0 10px 20px rgba(15, 23, 42, 0.08);
}

.sa-overview-strip .card {
    border-radius: var(--radius-md);
}

.sa-overview-tile {
    border: 1px solid var(--color-border);
    background: #ffffff;
}

.sa-overview-tile .card-body {
    padding: 14px 18px;
}

.sa-overview-tile h2 {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
}

.sa-tile-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 16px;
}

.topbar-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 280px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 8px;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.14);
    z-index: 4000;
    display: none;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.topbar-menu-panel.is-open,
.topbar-menu-panel.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.topbar-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px 9px;
    font-size: 0.84rem;
}

.topbar-menu-item,
.topbar-profile-menu-header {
    border-radius: 12px;
    padding: 10px 12px;
    white-space: normal;
}

.topbar-menu-item {
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    text-decoration: none !important;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.topbar-menu-item i {
    margin-right: 8px;
}

.topbar-menu-item:hover,
.topbar-menu-item:focus {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    text-decoration: none !important;
}

.topbar-notification-menu {
    min-width: 340px;
    width: 320px;
    padding: 0;
    overflow: hidden;
}

.topbar-notification-wrap .topbar-menu-panel {
    right: 0;
}

.topbar-profile-menu-wrap .topbar-menu-panel {
    right: 0;
}

.topbar-notification-menu .topbar-notification-item.is-critical .topbar-notification-icon,
.notifications-card.is-critical .notifications-card-icon {
    background: rgba(225, 29, 72, 0.12);
    color: #be123c;
}

.topbar-notification-menu .topbar-notification-item.is-warning .topbar-notification-icon,
.notifications-card.is-warning .notifications-card-icon {
    background: rgba(217, 119, 6, 0.12);
    color: #b45309;
}

.topbar-notification-menu .topbar-notification-item.is-success .topbar-notification-icon,
.notifications-card.is-success .notifications-card-icon {
    background: rgba(5, 150, 105, 0.12);
    color: #047857;
}

.topbar-notification-menu .topbar-notification-item.is-info .topbar-notification-icon,
.notifications-card.is-info .notifications-card-icon {
    background: rgba(14, 116, 144, 0.12);
    color: #0e7490;
}

.topbar-count {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #ffe8ec 0%, #ffdfe6 100%);
    color: var(--color-accent);
    font-size: 0.82rem;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(225, 29, 72, 0.08);
}

.topbar-notification-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    white-space: normal;
    padding: 11px 14px;
    border-radius: 0;
    border-bottom: 1px solid rgba(226, 232, 240, 0.82);
}

.topbar-notification-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: #f8fafc;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12);
}

.topbar-notification-item:last-child {
    border-bottom: 0;
}

.topbar-notification-item .fw-semibold {
    font-size: 0.76rem;
    line-height: 1.3;
    margin-bottom: 1px;
}

.topbar-notification-item .small {
    font-size: 0.68rem;
    line-height: 1.4;
}

.topbar-notification-menu .btn.btn-link.btn-sm,
.topbar-notification-menu .topbar-dropdown-header small,
.topbar-notification-menu .text-muted {
    font-size: 0.68rem;
}

.topbar-notification-menu [data-topbar-notifications-list] {
    max-height: min(52vh, 300px);
    overflow-y: auto;
}

.topbar-notification-menu .topbar-dropdown-header.border-bottom,
.topbar-notification-menu .topbar-dropdown-header.border-top {
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.96) 0%, rgba(241, 246, 250, 0.96) 100%);
}

.topbar-notification-menu .topbar-dropdown-header.border-top {
    padding-top: 10px;
    padding-bottom: 10px;
}

.content-area {
    padding: var(--space-xl);
    width: 100%;
    max-width: none;
    margin: 0;
    background: #f8fafc;
    animation: pageFadeIn 0.2s ease;
    display: flex;
    flex-direction: column;
    transition: opacity 0.2s ease, transform 0.2s ease;
    will-change: opacity, transform;
}

html.rrs-theme-dark .content-area {
    background: transparent;
}

html:not(.rrs-theme-dark) {
    --color-surface: #f2f5f7;
    --light-shell-bg: #e9eff3;
    --light-panel-top: #f3f6f8;
    --light-panel-bottom: #edf2f5;
    --light-panel-alt-top: #f1f4f6;
    --light-panel-alt-bottom: #e9eef2;
    --light-panel-soft: #eef3f6;
    --light-panel-soft-2: #e8eef2;
    --light-border: rgba(148, 163, 184, 0.22);
    --light-border-strong: rgba(148, 163, 184, 0.3);
}

html:not(.rrs-theme-dark) body.dashboard-page {
    background: radial-gradient(circle at top right, rgba(14, 116, 144, 0.08), transparent 42%), var(--light-shell-bg);
}

html:not(.rrs-theme-dark) .topbar-custom,
html:not(.rrs-theme-dark) .mobile-topbar {
    background: linear-gradient(180deg, var(--light-panel-alt-top) 0%, var(--light-panel-alt-bottom) 100%);
}

html:not(.rrs-theme-dark) .hero-card,
html:not(.rrs-theme-dark) .card,
html:not(.rrs-theme-dark) .dashboard-page .card,
html:not(.rrs-theme-dark) .offcanvas,
html:not(.rrs-theme-dark) .modal-content,
html:not(.rrs-theme-dark) .dropdown-menu,
html:not(.rrs-theme-dark) .nav-pills .nav-link,
html:not(.rrs-theme-dark) .topbar-action-group,
html:not(.rrs-theme-dark) .topbar-actions .topbar-profile-btn,
html:not(.rrs-theme-dark) .topbar-search-shell,
html:not(.rrs-theme-dark) .settings-logo-preview-card,
html:not(.rrs-theme-dark) .topbar-menu-panel {
    background: linear-gradient(180deg, var(--light-panel-top) 0%, var(--light-panel-bottom) 100%);
    border-color: var(--light-border);
}

html:not(.rrs-theme-dark) .card-header,
html:not(.rrs-theme-dark) .topbar-notification-icon {
    background: var(--light-panel-bottom);
}

html:not(.rrs-theme-dark) .stat-card,
html:not(.rrs-theme-dark) .sa-overview-strip .card,
html:not(.rrs-theme-dark) .dashboard-card-link {
    background: linear-gradient(180deg, #f3f6f8 0%, #edf2f5 100%);
}

html:not(.rrs-theme-dark) .dashboard-card-link:hover,
html:not(.rrs-theme-dark) .dashboard-card-link:focus-visible {
    background: linear-gradient(180deg, #eef3f6 0%, #e8eef2 100%);
}

html:not(.rrs-theme-dark) .dashboard-card-link-hint {
    background: #e7edf1;
    border-color: rgba(148, 163, 184, 0.22);
    color: rgba(71, 85, 105, 0.86);
}

html:not(.rrs-theme-dark) .table-responsive,
html:not(.rrs-theme-dark) .r-table-wrap {
    background: var(--light-panel-soft);
}

html:not(.rrs-theme-dark) .table thead th,
html:not(.rrs-theme-dark) .table-light > th,
html:not(.rrs-theme-dark) .table-light > td,
html:not(.rrs-theme-dark) .table-light th,
html:not(.rrs-theme-dark) .table-light td {
    background: #e9eef2;
}

html:not(.rrs-theme-dark) .table tbody td {
    background: #f1f5f7;
}

html:not(.rrs-theme-dark) .table-striped > tbody > tr:nth-of-type(odd) > * {
    background: #edf2f5;
}

html:not(.rrs-theme-dark) .table-hover tbody tr:hover,
html:not(.rrs-theme-dark) .table-hover tbody tr:hover > * {
    background: #e6edf2;
}

html:not(.rrs-theme-dark) .topbar-notification-menu {
    border-color: var(--light-border-strong);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.1);
}

html:not(.rrs-theme-dark) .topbar-notification-menu .topbar-dropdown-header.border-bottom,
html:not(.rrs-theme-dark) .topbar-notification-menu .topbar-dropdown-header.border-top,
html:not(.rrs-theme-dark) .topbar-profile-menu .topbar-profile-menu-section {
    background: linear-gradient(180deg, rgba(244, 247, 250, 0.98) 0%, rgba(237, 243, 247, 0.98) 100%);
}

html:not(.rrs-theme-dark) .topbar-notification-menu .topbar-notification-item {
    border-bottom-color: rgba(148, 163, 184, 0.16);
}

html:not(.rrs-theme-dark) .topbar-menu-item:hover,
html:not(.rrs-theme-dark) .topbar-menu-item:focus {
    background: color-mix(in srgb, var(--role-accent-soft) 72%, #ffffff 28%);
}

html:not(.rrs-theme-dark) .topbar-profile-time-group,
html:not(.rrs-theme-dark) .topbar-action-group {
    border-color: var(--light-border);
}

.content-area.is-shell-transition-out {
    opacity: 0;
    transform: translateY(10px);
}

.content-area.is-shell-transition-in {
    opacity: 0;
    transform: translateY(12px);
}

@media (min-width: 1280px) {
    .content-area {
        width: min(1360px, 100%);
        margin: 0 auto;
    }
}

.app-footer {
    width: 100%;
    margin-top: auto;
    padding: var(--space-lg) 0 var(--space-lg);
}

.app-footer-copy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.95rem 0;
    border-top: 1px solid color-mix(in srgb, var(--color-border, #d8e0ea) 78%, transparent 22%);
    color: var(--color-text-muted, #6b7280);
    font-size: 0.84rem;
    text-align: center;
}

.app-footer-separator {
    opacity: 0.65;
}

.settings-logo-preview-card {
    padding: 0.9rem;
    border: 1px solid rgba(14, 116, 144, 0.12);
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.settings-logo-preview-shell {
    width: 92px;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 24px;
    background: linear-gradient(180deg, #f4fbff 0%, #e7f3fb 100%);
    border: 1px solid rgba(14, 116, 144, 0.14);
}

.settings-logo-preview-shell-sm {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    flex-shrink: 0;
}

.settings-logo-preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.settings-logo-preview-icon {
    font-size: 1.4rem;
    color: color-mix(in srgb, var(--role-accent) 72%, #335670 28%);
}

/* Compact and intermediate screens - full width content */
@media (max-width: 1279.98px) {
    .content-area {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: var(--space-lg);
    }
}

/* Dashboard hero and cards */
.hero-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: #ffffff;
    color: var(--color-text-primary);
    position: relative;
    box-shadow: var(--shadow-sm);
}

.hero-card::after {
    display: none;
}

.hero-card .card-body {
    padding: var(--space-xl) !important;
    position: relative;
    z-index: 1;
}

.hero-card h1,
.hero-card h2,
.hero-card h3,
.hero-card p,
.hero-card small {
    color: inherit;
}

.card,
.dashboard-page .card {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.card.border-0,
.dashboard-page .card.border-0 {
    border: 1px solid var(--color-border) !important;
}

.card:hover,
.dashboard-page .card:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(203, 213, 225, 0.95);
}

.card-header {
    border-bottom: 1px solid var(--color-border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    background: #fbfcfe;
    padding: var(--space-md) var(--space-lg);
}

.card-header h5,
.card-header h6,
.card-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    font-family: var(--font-body);
}

.card-body {
    padding: var(--space-lg);
}

.offcanvas,
.modal-content,
.dropdown-menu {
    border: 1px solid rgba(14, 116, 144, 0.12);
    box-shadow: var(--shadow-lg);
}

.nav-pills .nav-link {
    font-weight: 600;
    color: var(--color-text-secondary);
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.26);
    padding: 0.58rem 0.95rem;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.04);
}

.nav-pills .nav-link:hover,
.nav-pills .nav-link:focus-visible {
    color: var(--color-primary-dark);
    background: #f8fcfe;
    border-color: rgba(14, 116, 144, 0.24);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background: linear-gradient(135deg, #0e7490, #118ab2);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 10px 18px rgba(14, 116, 144, 0.16);
}

.progress {
    height: 12px;
    background: #eaf2f7;
    border-radius: 999px;
    overflow: hidden;
}

.progress-bar {
    font-size: 11px;
    font-weight: 600;
}

.stat-card {
    border-left: 3px solid #cbd5e1;
}

.dashboard-card-link {
    display: block;
    min-height: 100%;
    padding: 1rem 1.1rem;
    color: inherit;
    text-decoration: none !important;
    border-radius: inherit;
    position: relative;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.dashboard-card-link:hover,
.dashboard-card-link:active,
.dashboard-card-link:visited,
.dashboard-card-link:focus-visible {
    color: inherit;
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.025);
}

.dashboard-card-link-inline {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.dashboard-card-link .kpi-label,
.dashboard-card-link .text-muted,
.dashboard-card-link small,
.dashboard-card-link .stat-value,
.dashboard-card-link h2,
.dashboard-card-link p,
.dashboard-card-link span,
.dashboard-card-link strong,
.dashboard-card-link i,
.dashboard-card-link div {
    position: relative;
    z-index: 1;
    color: inherit;
    text-decoration: none !important;
}

.dashboard-card-link *::before,
.dashboard-card-link *::after {
    text-decoration: none !important;
}

.dashboard-card-link small {
    display: block;
}

.dashboard-card-link-hint {
    position: absolute;
    top: 0.95rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(125, 211, 252, 0.14);
    font-size: 0;
    font-weight: 700;
    color: rgba(226, 232, 240, 0.88);
    opacity: 0.72;
    pointer-events: none;
    transform: translateY(0);
    transition: opacity 0.18s ease, transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.dashboard-card-link-hint::after {
    content: '\2197';
    font-size: 0.82rem;
    line-height: 1;
}

.dashboard-card-link:hover .dashboard-card-link-hint,
.dashboard-card-link:focus-visible .dashboard-card-link-hint {
    opacity: 1;
    transform: translateY(-1px);
    border-color: rgba(125, 211, 252, 0.26);
    background: rgba(255, 255, 255, 0.08);
}

.r-stat-grid .card,
.professional-user-stats .professional-stat-card,
.r-card-grid .card,
.sa-overview-strip .card {
    background: #33312d;
    border-color: #4c4943;
    box-shadow: none;
}

.r-stat-grid .card:hover,
.professional-user-stats .professional-stat-card:hover,
.r-card-grid .card:hover,
.sa-overview-strip .card:hover {
    box-shadow: none;
    border-color: #5a564f;
}

.r-stat-grid .card:has(.dashboard-card-link:hover),
.r-stat-grid .card:has(.dashboard-card-link:focus-visible),
.sa-overview-strip .card:has(.dashboard-card-link:hover),
.sa-overview-strip .card:has(.dashboard-card-link:focus-visible) {
    border-color: color-mix(in srgb, var(--role-accent) 30%, #5a564f 70%);
}

.dashboard-card-hovered {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12) !important;
}

.report-kpi-card {
    position: relative;
    overflow: hidden;
}

.report-kpi-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 999px;
    background: var(--report-kpi-accent, #94a3b8);
}

.report-kpi-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, var(--report-kpi-glow, rgba(148, 163, 184, 0.12)), transparent 34%);
    pointer-events: none;
    opacity: 0.95;
}

.report-kpi-card .dashboard-card-link {
    padding-left: 1.25rem;
}

.report-kpi-card .kpi-label i,
.report-kpi-card .stat-value {
    color: var(--report-kpi-accent-strong, #1e293b) !important;
}

.report-kpi-card .dashboard-card-link-hint {
    border-color: color-mix(in srgb, var(--report-kpi-accent, #94a3b8) 36%, rgba(148, 163, 184, 0.2) 64%);
    background: color-mix(in srgb, var(--report-kpi-accent-soft, rgba(148, 163, 184, 0.12)) 82%, rgba(255, 255, 255, 0.66) 18%);
    color: var(--report-kpi-accent-strong, #334155);
}

.report-kpi-revenue {
    --report-kpi-accent: #16a34a;
    --report-kpi-accent-strong: #166534;
    --report-kpi-accent-soft: rgba(34, 197, 94, 0.14);
    --report-kpi-glow: rgba(34, 197, 94, 0.13);
}

.report-kpi-bookings {
    --report-kpi-accent: #2563eb;
    --report-kpi-accent-strong: #1d4ed8;
    --report-kpi-accent-soft: rgba(59, 130, 246, 0.14);
    --report-kpi-glow: rgba(59, 130, 246, 0.12);
}

.report-kpi-occupancy {
    --report-kpi-accent: #0891b2;
    --report-kpi-accent-strong: #0f766e;
    --report-kpi-accent-soft: rgba(6, 182, 212, 0.14);
    --report-kpi-glow: rgba(6, 182, 212, 0.12);
}

.report-kpi-guests {
    --report-kpi-accent: #7c3aed;
    --report-kpi-accent-strong: #6d28d9;
    --report-kpi-accent-soft: rgba(139, 92, 246, 0.14);
    --report-kpi-glow: rgba(139, 92, 246, 0.12);
}

.report-kpi-leadtime {
    --report-kpi-accent: #ea580c;
    --report-kpi-accent-strong: #c2410c;
    --report-kpi-accent-soft: rgba(249, 115, 22, 0.14);
    --report-kpi-glow: rgba(249, 115, 22, 0.11);
}

.report-kpi-cancellation {
    --report-kpi-accent: #e11d48;
    --report-kpi-accent-strong: #be123c;
    --report-kpi-accent-soft: rgba(244, 63, 94, 0.14);
    --report-kpi-glow: rgba(244, 63, 94, 0.11);
}

.report-kpi-stay {
    --report-kpi-accent: #6366f1;
    --report-kpi-accent-strong: #4f46e5;
    --report-kpi-accent-soft: rgba(99, 102, 241, 0.14);
    --report-kpi-glow: rgba(99, 102, 241, 0.12);
}

.r-stat-grid .card .card-header,
.r-card-grid .card .card-header,
.sa-overview-strip .card .card-header {
    background: transparent;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.r-stat-grid .card h5,
.r-stat-grid .card h6,
.r-card-grid .card h5,
.r-card-grid .card h6,
.sa-overview-strip .card h5,
.sa-overview-strip .card h6,
.sa-overview-tile h2,
.professional-user-stats .stat-value,
.professional-user-stats .stat-neutral-value,
.r-stat-grid .stat-value,
.r-card-grid .stat-value {
    color: #f3f1eb !important;
}

.r-stat-grid .card .text-muted,
.r-stat-grid .card small,
.r-card-grid .card .text-muted,
.r-card-grid .card small,
.sa-overview-strip .card .text-muted,
.sa-overview-strip .card small,
.professional-user-stats .stat-label,
.professional-user-stats .stat-label i,
.professional-user-stats .stat-sub,
.professional-user-stats .trend-up,
.professional-user-stats .trend-down {
    color: #b8b3aa !important;
}

.r-stat-grid .card .badge,
.r-card-grid .card .badge,
.sa-overview-strip .card .badge {
    background: #25231f !important;
    color: #d7d2c9 !important;
    border: 1px solid #4c4943;
}

.r-stat-grid .card .sa-kpi-icon,
.professional-user-stats .professional-stat-card .sa-kpi-icon,
.sa-overview-strip .card .sa-kpi-icon {
    background: #25231f !important;
    border-color: #3d3a35;
    color: #c7c2b8 !important;
}

.r-stat-grid .card .sa-kpi-icon.text-primary {
    color: #6ea0e8 !important;
}

.r-stat-grid .card .sa-kpi-icon.text-success {
    color: #79b84f !important;
}

.r-stat-grid .card .sa-kpi-icon[style*="#92400e"],
.r-stat-grid .card .sa-kpi-icon[style*="#9f1239"] {
    color: #c7c2b8 !important;
}

.r-stat-grid .card .trend-up,
.r-stat-grid .card .trend-down,
.r-card-grid .card .trend-up,
.r-card-grid .card .trend-down {
    color: #b8b3aa !important;
}

.r-stat-grid .stat-card,
.professional-user-stats .professional-stat-card {
    border-left-color: #4c4943;
}

.stat-card .text-muted {
    font-size: 13px;
    color: var(--color-text-secondary) !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 600;
}

.stat-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.1;
}

.trend-up {
    color: var(--color-success);
    font-size: 12px;
    font-weight: 600;
}

.trend-down {
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 600;
}

.professional-user-stats .professional-stat-card {
    border-left: 3px solid #cbd5e1;
    border-radius: var(--radius-lg);
}

.professional-user-stats .professional-stat-card.stat-positive {
    border-left-color: #94a3b8;
}

.professional-user-stats .professional-stat-card.stat-alert {
    border-left-color: #94a3b8;
}

.professional-user-stats .stat-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-secondary);
    letter-spacing: 0;
    text-transform: none;
}

.professional-user-stats .stat-label i {
    font-size: 18px;
    color: var(--color-text-secondary);
    line-height: 1;
}

.professional-user-stats .stat-value {
    font-size: clamp(28px, 2.1vw, 32px);
    line-height: 1.1;
}

.professional-user-stats .stat-neutral-value {
    color: #1b2b3a;
}

.professional-user-stats .stat-sub,
.professional-user-stats .trend-up,
.professional-user-stats .trend-down {
    font-size: 12px;
    color: var(--color-text-secondary);
    font-weight: 400;
}

/* Super admin dashboard */
.superadmin-dashboard .card {
    border-radius: var(--radius-lg);
}

.hero-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.12);
    font-size: 12px;
    font-weight: 600;
}

.sa-wave {
    margin-top: var(--space-md);
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.25) 0%,
        rgba(255, 255, 255, 0.65) 45%,
        rgba(255, 255, 255, 0.2) 100%
    );
}

.kpi-warning {
    border-left-color: #cbd5e1;
}

.kpi-success {
    border-left-color: #cbd5e1;
}

.kpi-danger {
    border-left-color: #cbd5e1;
}

.sa-kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: #f8fafc !important;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary) !important;
}

.sa-chart-wrap {
    position: relative;
    min-height: 260px;
}

.sa-chart-wrap-small {
    min-height: 220px;
}

.activity-list li {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 14px;
}

.activity-list li:last-child {
    border-bottom: 0;
}

.activity-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    flex: 0 0 8px;
}

.reservation-row-checkout-today td {
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.08) 0%, rgba(245, 158, 11, 0.03) 100%);
}

.reservation-row-checkout-today td:first-child {
    box-shadow: inset 3px 0 0 #f59e0b;
}

.reservation-row-arrival-today td {
    background: linear-gradient(180deg, rgba(2, 132, 199, 0.08) 0%, rgba(2, 132, 199, 0.03) 100%);
}

.reservation-row-arrival-today td:first-child {
    box-shadow: inset 3px 0 0 #0284c7;
}

.reservation-date-flag {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.5rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid transparent;
}

.reservation-date-flag.is-checkout-today {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
    border-color: rgba(245, 158, 11, 0.28);
}

.reservation-date-flag.is-arrival-today {
    background: rgba(2, 132, 199, 0.12);
    color: #0369a1;
    border-color: rgba(2, 132, 199, 0.22);
}

.reservation-date-flag.is-in-house {
    background: rgba(14, 116, 144, 0.12);
    color: #155e75;
    border-color: rgba(14, 116, 144, 0.22);
}

.reservation-date-flag.is-payment-pending {
    background: rgba(220, 38, 38, 0.1);
    color: #b91c1c;
    border-color: rgba(220, 38, 38, 0.18);
}

.reservation-date-flag.is-neutral {
    background: rgba(100, 116, 139, 0.1);
    color: #475569;
    border-color: rgba(100, 116, 139, 0.18);
}

.reservation-date-flag.is-warning {
    background: rgba(217, 119, 6, 0.12);
    color: #b45309;
    border-color: rgba(217, 119, 6, 0.2);
}

.reservation-date-flag.is-info {
    background: rgba(8, 145, 178, 0.11);
    color: #0f766e;
    border-color: rgba(8, 145, 178, 0.18);
}

.checklist li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: 8px 0;
    color: var(--color-text-secondary);
}

.dashboard-window-gantt {
    display: grid;
    gap: 0.6rem;
}

.dashboard-window-gantt-head,
.dashboard-window-gantt-row {
    display: grid;
    grid-template-columns: minmax(112px, 0.95fr) minmax(0, 1.45fr);
    gap: 0.7rem;
    align-items: center;
}

.dashboard-window-gantt-head {
    color: var(--color-text-muted);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboard-window-gantt-scale {
    display: flex;
    justify-content: space-between;
    gap: 0.4rem;
}

.dashboard-window-gantt-label {
    display: grid;
    gap: 0.14rem;
    min-width: 0;
}

.dashboard-window-gantt-label strong {
    color: var(--color-text-primary);
    font-size: 0.82rem;
    line-height: 1.2;
}

.dashboard-window-gantt-label span {
    color: var(--color-text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.25;
}

.dashboard-window-gantt-track {
    position: relative;
    height: 26px;
    border-radius: 999px;
    background:
        repeating-linear-gradient(
            to right,
            rgba(148, 163, 184, 0.16) 0,
            rgba(148, 163, 184, 0.16) calc(10% - 1px),
            rgba(203, 213, 225, 0.5) calc(10% - 1px),
            rgba(203, 213, 225, 0.5) 10%
        );
    overflow: hidden;
}

.dashboard-window-gantt-bar {
    position: absolute;
    top: 3px;
    bottom: 3px;
    min-width: 10%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(14, 116, 144, 0.9) 0%, rgba(56, 189, 248, 0.9) 100%);
    box-shadow: 0 4px 10px rgba(14, 116, 144, 0.2);
    display: inline-flex;
    align-items: center;
    padding: 0 0.55rem;
}

.dashboard-window-gantt-bar span {
    color: #f8fafc;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.role-dashboard .card {
    border-radius: var(--radius-lg);
}

.dashboard-section-label {
    margin-bottom: 0.85rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

/* Final metric-card theme override */
.r-stat-grid .card,
.professional-user-stats .professional-stat-card,
.sa-overview-strip .card {
    background: linear-gradient(180deg, #f1f5f7 0%, #eaf0f3 100%) !important;
    border: 1px solid rgba(14, 116, 144, 0.16) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05) !important;
}

.r-stat-grid .card:hover,
.professional-user-stats .professional-stat-card:hover,
.sa-overview-strip .card:hover {
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08) !important;
    border-color: rgba(14, 116, 144, 0.24) !important;
}

.r-stat-grid .card .card-body,
.professional-user-stats .professional-stat-card .card-body,
.sa-overview-strip .card .card-body {
    background: transparent !important;
}

.r-stat-grid .card .card-header,
.sa-overview-strip .card .card-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(14, 116, 144, 0.08) !important;
}

.r-stat-grid .card .text-muted,
.r-stat-grid .card small,
.professional-user-stats .stat-label,
.professional-user-stats .stat-label i,
.professional-user-stats .stat-sub,
.professional-user-stats .trend-up,
.professional-user-stats .trend-down,
.sa-overview-strip .card .text-muted,
.sa-overview-strip .card small {
    color: #64748b !important;
}

.r-stat-grid .card .stat-value,
.professional-user-stats .stat-value,
.professional-user-stats .stat-neutral-value,
.sa-overview-strip .card h2 {
    color: #0f172a !important;
}

.r-stat-grid .stat-value-arrivals,
.professional-user-stats .stat-value-arrivals,
.sa-overview-strip .stat-value-arrivals,
.r-stat-grid .stat-card.stat-arrivals .stat-value,
.professional-user-stats .professional-stat-card.stat-arrivals .stat-value,
.sa-overview-strip .card.stat-arrivals h2 {
    color: #0284c7 !important;
}

.r-stat-grid .stat-value-departures,
.professional-user-stats .stat-value-departures,
.sa-overview-strip .stat-value-departures,
.r-stat-grid .stat-card.stat-departures .stat-value,
.professional-user-stats .professional-stat-card.stat-departures .stat-value,
.sa-overview-strip .card.stat-departures h2 {
    color: #16a34a !important;
}

.r-stat-grid .stat-value-occupancy,
.professional-user-stats .stat-value-occupancy,
.sa-overview-strip .stat-value-occupancy,
.r-stat-grid .stat-card.stat-occupancy .stat-value,
.professional-user-stats .professional-stat-card.stat-occupancy .stat-value,
.sa-overview-strip .card.stat-occupancy h2 {
    color: #0f766e !important;
}

.r-stat-grid .stat-value-pressure,
.professional-user-stats .stat-value-pressure,
.sa-overview-strip .stat-value-pressure,
.r-stat-grid .stat-card.stat-pressure .stat-value,
.professional-user-stats .professional-stat-card.stat-pressure .stat-value,
.sa-overview-strip .card.stat-pressure h2 {
    color: #b45309 !important;
}

.r-stat-grid .stat-card {
    border-left: 3px solid rgba(14, 116, 144, 0.35) !important;
}

.r-stat-grid .card .sa-kpi-icon,
.professional-user-stats .professional-stat-card .sa-kpi-icon,
.sa-overview-strip .card .sa-kpi-icon,
.sa-overview-strip .card .sa-tile-icon {
    display: none !important;
}

.professional-user-stats .professional-stat-card .stat-label i,
.r-stat-grid .card .text-muted i,
.sa-overview-strip .card .text-muted i {
    display: inline-block !important;
    margin-right: 0;
    margin-left: 0.5rem;
    font-size: 1.08em;
    vertical-align: -0.08em;
}

.kpi-label,
.professional-user-stats .stat-label {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
}

.r-stat-grid .card .d-flex.align-items-start.justify-content-between,
.professional-user-stats .professional-stat-card .card-body > div {
    display: block !important;
}

.r-stat-grid .card .sa-kpi-icon.text-primary,
.sa-overview-strip .card .sa-kpi-icon.text-primary {
    color: #2563eb !important;
}

.r-stat-grid .card .sa-kpi-icon.text-success,
.sa-overview-strip .card .sa-kpi-icon.text-success {
    color: #2f855a !important;
}

.r-stat-grid .card .badge,
.sa-overview-strip .card .badge {
    background: #f3fbfd !important;
    color: var(--color-primary-dark) !important;
    border: 1px solid rgba(14, 116, 144, 0.14) !important;
}

.professional-user-stats .card-body > div,
.professional-user-stats .professional-stat-card .card-body > div {
    display: block !important;
}

.role-info-list li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
}

.role-info-list li:last-child {
    border-bottom: 0;
}

.role-info-list strong {
    color: var(--color-text-primary);
    font-weight: 600;
}

/* Buttons */
.btn {
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    min-height: 42px;
    padding: 0.72rem 1.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    line-height: 1.2;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus,
textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.15);
}

.btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(14, 116, 144, 0.14);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    transform: translateY(-1px);
}

.btn-secondary {
    background: transparent;
    border: 1.5px solid var(--color-primary);
    color: var(--color-primary);
}

.btn-secondary:hover,
.btn-secondary:focus-visible,
.btn-outline-primary:hover,
.btn-outline-primary:focus-visible,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus-visible,
.btn-info:hover,
.btn-info:focus-visible,
.btn-outline-info:hover,
.btn-outline-info:focus-visible {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    border-color: var(--color-primary);
}

.btn-danger,
.btn-outline-danger:hover,
.btn-outline-danger:focus-visible {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #ffffff;
}

.btn-light {
    color: var(--color-text-primary);
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-info,
.btn-outline-success,
.btn-outline-danger {
    border-width: 1.5px;
    background: #ffffff;
}

.btn-outline-secondary {
    color: var(--color-text-secondary);
    border-color: #cbd5e1;
}

.btn-outline-success {
    color: var(--color-success);
    border-color: rgba(5, 150, 105, 0.3);
}

.btn-outline-danger {
    color: var(--color-accent);
    border-color: rgba(225, 29, 72, 0.25);
}

.btn-sm {
    font-size: 12px;
    min-height: 34px;
    padding: 0.48rem 0.82rem;
    border-radius: 9px;
}

.btn i,
.btn .bi {
    line-height: 1;
}

.btn-sm.btn-outline-primary,
.btn-sm.btn-outline-secondary,
.btn-sm.btn-outline-success,
.btn-sm.btn-outline-danger,
.btn-sm.btn-outline-info {
    padding-inline: 0.78rem;
}

/* Forms */
.form-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
}

.form-control,
.form-select,
textarea,
.input-group-text {
    min-height: 42px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-size: 14px;
    background: #ffffff;
}

.input-group-text {
    background: #f8fafc;
}

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

.is-invalid,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
    border-color: var(--color-accent);
}

.invalid-feedback {
    color: var(--color-accent);
    font-size: 12px;
}

/* Tables */
.table {
    --bs-table-bg: transparent;
    margin-bottom: 0;
    min-width: 100%;
    font-size: 0.84rem;
}

.table thead th {
    background: rgba(248, 250, 252, 0.82);
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--color-border);
    padding: 14px 16px;
    vertical-align: middle;
    white-space: normal;
    word-break: keep-all;
}

.content-area .table {
    table-layout: auto;
}

.content-area .table thead th {
    overflow-wrap: anywhere;
}

.content-area .table th.text-end,
.content-area .table td.text-end {
    text-align: right !important;
}

.content-area .table th.text-center,
.content-area .table td.text-center {
    text-align: center !important;
}

.content-area .table th:last-child,
.content-area .table td:last-child {
    width: 1%;
    min-width: 86px;
    white-space: nowrap;
}

.content-area .table td:last-child .table-action-dropdown,
.content-area .table th:last-child .table-action-dropdown {
    width: 100%;
    justify-content: flex-end;
}

.table tbody td {
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
    padding: 16px;
    vertical-align: middle;
    line-height: 1.5;
    white-space: normal;
    font-size: 0.84rem;
}

.table-hover tbody tr:hover {
    background: color-mix(in srgb, var(--role-accent-soft) 42%, #ffffff 58%);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background: rgba(248, 250, 252, 0.78);
}

.table-responsive,
.r-table-wrap {
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: thin;
    scrollbar-color: rgba(14, 116, 144, 0.35) rgba(226, 232, 240, 0.7);
    border-radius: 12px;
}

.table-responsive::-webkit-scrollbar,
.r-table-wrap::-webkit-scrollbar {
    height: 10px;
}

.table-responsive::-webkit-scrollbar-track,
.r-table-wrap::-webkit-scrollbar-track {
    background: rgba(226, 232, 240, 0.7);
    border-radius: 999px;
}

.table-responsive::-webkit-scrollbar-thumb,
.r-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(14, 116, 144, 0.35);
    border-radius: 999px;
}

.table-responsive::-webkit-scrollbar-thumb:hover,
.r-table-wrap::-webkit-scrollbar-thumb:hover {
    background: rgba(14, 116, 144, 0.55);
}

.table td .small,
.table td small,
.table td .text-muted {
    line-height: 1.6;
}

.table td .badge,
.table td .btn {
    vertical-align: middle;
}

.table .fw-bold,
.table .font-mono {
    font-family: var(--font-mono);
}

.table-action-dropdown {
    display: inline-flex;
    justify-content: flex-end;
}

.table-action-toggle {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: #ffffff;
    color: #475569;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.table-action-toggle:hover,
.table-action-toggle:focus-visible,
.table-action-toggle[aria-expanded="true"] {
    color: #155e75;
    background: rgba(14, 116, 144, 0.08);
    border-color: rgba(14, 116, 144, 0.22);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.table-action-menu {
    min-width: 172px;
    padding: 0.4rem;
    border-radius: 8px;
    max-height: min(260px, calc(100vh - 1rem));
    overflow-y: auto;
    z-index: 1100;
}

.table-action-menu form {
    margin: 0;
}

.table-action-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    border: 0;
    border-radius: 7px;
    background: transparent;
    font-size: 0.84rem;
}

.table-action-menu .dropdown-item i {
    width: 1rem;
    text-align: center;
}

.table-action-menu .dropdown-divider {
    margin: 0.35rem 0;
}

.users-directory-table th:nth-child(1),
.users-directory-table td:nth-child(1) {
    width: 72px;
}

.users-directory-table th:nth-child(4),
.users-directory-table td:nth-child(4),
.users-directory-table th:nth-child(5),
.users-directory-table td:nth-child(5),
.users-directory-table th:nth-child(6),
.users-directory-table td:nth-child(6) {
    width: 12%;
}

.reservation-workspace-table th:nth-child(1),
.reservation-workspace-table td:nth-child(1) {
    width: 10%;
}

.reservation-workspace-table th:nth-child(2),
.reservation-workspace-table td:nth-child(2) {
    width: 37%;
}

.reservation-workspace-table th:nth-child(3),
.reservation-workspace-table td:nth-child(3) {
    width: 24%;
}

.reservation-workspace-table th:nth-child(4),
.reservation-workspace-table td:nth-child(4) {
    width: 16%;
}

.reservation-workspace-table th:nth-child(5),
.reservation-workspace-table td:nth-child(5) {
    width: 72px;
    min-width: 72px;
}

.audit-table th:nth-child(1),
.audit-table td:nth-child(1) {
    width: 15%;
}

.audit-table th:nth-child(2),
.audit-table td:nth-child(2),
.audit-table th:nth-child(4),
.audit-table td:nth-child(4) {
    width: 16%;
}

.audit-table th:nth-child(5),
.audit-table td:nth-child(5),
.audit-table th:nth-child(7),
.audit-table td:nth-child(7) {
    width: 8%;
}

.users-page-header {
    border: 1px solid rgba(14, 116, 144, 0.12);
    background: linear-gradient(180deg, #ffffff 0%, #f6fbfd 100%);
}

.users-page-header h4 {
    font-size: 2rem;
    line-height: 1.1;
    color: var(--color-text-primary);
}

.users-directory-card {
    overflow: hidden;
}

.users-filter-panel {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.72) 0%, rgba(255, 255, 255, 0.96) 100%);
}

.users-directory-table {
    border-collapse: separate;
    border-spacing: 0;
}

.users-directory-table thead th {
    background: #f8fbfd;
}

.users-directory-table tbody tr {
    transition: background 0.18s ease;
}

.users-directory-table tbody tr:hover {
    background: rgba(240, 249, 255, 0.92);
}

.users-directory-id {
    display: inline-flex;
    min-width: 3ch;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    justify-content: flex-start;
}

.users-directory-account,
.users-directory-contact {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}

.users-directory-account strong,
.users-directory-contact span:first-child {
    color: var(--color-text-primary);
}

.users-directory-account span,
.users-directory-contact span {
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    line-height: 1.45;
}

.users-directory-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgba(14, 116, 144, 0.08);
    color: var(--color-primary-dark);
    font-size: 0.78rem;
    font-weight: 600;
}

.users-directory-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.users-directory-actions .btn,
.users-directory-actions form {
    margin: 0;
}

.roles-page-header {
    border: 1px solid rgba(14, 116, 144, 0.12);
    background: linear-gradient(180deg, #ffffff 0%, #f6fbfd 100%);
}

.roles-page-header h4 {
    font-size: 2rem;
    line-height: 1.1;
    color: var(--color-text-primary);
}

.roles-directory-card {
    overflow: hidden;
}

.roles-directory-table thead th,
.roles-matrix-table thead th,
.roles-guide-table thead th {
    background: #f8fbfd;
}

.roles-directory-role,
.roles-directory-permissions {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}

.roles-directory-role strong,
.roles-directory-permissions strong {
    color: var(--color-text-primary);
}

.roles-directory-role span,
.roles-directory-permissions span {
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    line-height: 1.45;
}

.roles-directory-hierarchy,
.roles-permissions-role-inheritance {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.45rem;
}

.roles-directory-hierarchy-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid rgba(14, 116, 144, 0.16);
    border-radius: 999px;
    background: rgba(14, 116, 144, 0.08);
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
}

.roles-directory-hierarchy-pill.is-root {
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.18);
}

.roles-directory-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.roles-permission-chip {
    background: rgba(15, 118, 110, 0.08);
    color: #115e59;
}

.roles-directory-actions-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    min-width: 0;
}

.roles-assignment-card {
    border: 1px solid rgba(14, 116, 144, 0.12);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
    padding: 1rem;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.roles-hierarchy-table thead th {
    background: #f8fbfd;
}

.roles-hierarchy-table tbody td {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.roles-hierarchy-role-cell {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.roles-hierarchy-role-cell strong {
    color: var(--color-text-primary);
}

.roles-hierarchy-children {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.roles-hierarchy-child-pill {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.14);
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    font-weight: 700;
}

.roles-hierarchy-empty {
    color: var(--color-text-tertiary);
    font-size: 0.84rem;
}

.roles-assignment-tags {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
}

.roles-assignment-list {
    display: grid;
    gap: 0.55rem;
}

.roles-assignment-list li {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.roles-assignment-list li:first-child {
    padding-top: 0;
    border-top: 0;
}

.roles-matrix-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.18rem;
    min-width: 0;
}

.roles-matrix-table {
    table-layout: fixed;
    min-width: max(760px, 100%);
}

.roles-matrix-table thead th {
    padding: 0.65rem 0.45rem;
    vertical-align: middle;
}

.roles-matrix-table tbody td {
    padding: 0.46rem 0.45rem;
    vertical-align: middle;
}

.roles-matrix-table th:first-child,
.roles-matrix-table td:first-child {
    width: 280px;
    min-width: 240px;
}

.roles-matrix-table th:not(:first-child),
.roles-matrix-table td:not(:first-child) {
    width: 82px;
    min-width: 72px;
}

.roles-matrix-role-name {
    display: block;
    max-width: 76px;
    overflow: hidden;
    color: var(--color-text-primary);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.roles-matrix-lock {
    color: var(--color-text-secondary);
    font-size: 0.72rem;
}

.roles-matrix-permission-head,
.roles-guide-page {
    display: flex;
    gap: 0.4rem;
}

.roles-matrix-permission-head {
    align-items: center;
    justify-content: space-between;
    min-width: 0;
}

.roles-matrix-permission-name {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.roles-matrix-permission-name strong,
.roles-matrix-permission-name span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.roles-matrix-permission-name strong {
    color: var(--color-text-primary);
    font-size: 0.82rem;
    line-height: 1.2;
}

.roles-matrix-permission-name span {
    color: var(--color-text-secondary);
    font-size: 0.72rem;
    line-height: 1.25;
}

.roles-matrix-count {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 1.55rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: rgba(14, 116, 144, 0.08);
    color: #0e7490;
    font-size: 0.7rem;
    font-weight: 800;
}

.roles-matrix-description {
    display: block;
    max-width: 100%;
    overflow: hidden;
    font-size: 0.7rem;
    line-height: 1.25;
    margin-top: 0.16rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.roles-matrix-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 1.85rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.roles-matrix-toggle .form-check-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    padding: 0;
}

.roles-matrix-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
    line-height: 1.1;
}

.roles-matrix-icon-allowed {
    display: none;
}

.roles-matrix-toggle .form-check-input:checked + .roles-matrix-toggle-icon .roles-matrix-icon-allowed {
    display: inline-block;
}

.roles-matrix-toggle .form-check-input:checked + .roles-matrix-toggle-icon .roles-matrix-icon-denied {
    display: none;
}

.roles-matrix-toggle.is-allowed {
    background: rgba(5, 150, 105, 0.1);
    border-color: rgba(5, 150, 105, 0.28);
    color: #065f46;
}

.roles-matrix-toggle.is-denied {
    background: rgba(148, 163, 184, 0.1);
    border-color: rgba(148, 163, 184, 0.2);
    color: #64748b;
}

.roles-matrix-toggle:has(.form-check-input:checked) {
    background: rgba(5, 150, 105, 0.1);
    border-color: rgba(5, 150, 105, 0.28);
    color: #065f46;
}

.roles-matrix-toggle:not(:has(.form-check-input:checked)) {
    background: rgba(148, 163, 184, 0.1);
    border-color: rgba(148, 163, 184, 0.2);
    color: #64748b;
}

.roles-matrix-toggle:not(.is-readonly):hover {
    transform: translateY(-1px);
}

.roles-matrix-toggle.is-readonly {
    opacity: 0.85;
    cursor: not-allowed;
}

.roles-matrix-permission code,
.roles-guide-table code {
    font-size: 0.8rem;
}

.roles-guide-badge {
    min-width: 70px;
}

.roles-permission-groups {
    column-count: 3;
    column-gap: 0.8rem;
}

.roles-permission-group-card {
    display: grid;
    gap: 0.65rem;
    break-inside: avoid;
    min-width: 0;
    margin: 0 0 0.8rem;
    padding: 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #f8fafc;
}

.roles-permission-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.roles-permission-group-header h6 {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 0.9rem;
}

.roles-permission-group-header span {
    color: var(--color-text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.roles-permission-group-list {
    display: grid;
    gap: 0.55rem;
}

.roles-permission-control-row {
    display: grid;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.65rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: var(--radius-sm);
    background: #ffffff;
}

.roles-permission-control-copy {
    min-width: 0;
}

.roles-permission-role-toggles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
}

.roles-permission-role-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    min-width: 0;
    min-height: 30px;
    padding: 0.25rem 0.45rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    background: rgba(148, 163, 184, 0.08);
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
}

.roles-permission-role-toggle span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.roles-permission-role-toggle .form-check-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    padding: 0;
}

.roles-permission-role-toggle .roles-matrix-icon-allowed {
    display: none;
}

.roles-permission-role-toggle .form-check-input:checked + .roles-permission-role-icon .roles-matrix-icon-allowed {
    display: inline-block;
}

.roles-permission-role-toggle .form-check-input:checked + .roles-permission-role-icon .roles-matrix-icon-denied {
    display: none;
}

.roles-permission-role-toggle.is-allowed {
    color: #065f46;
    background: rgba(5, 150, 105, 0.1);
    border-color: rgba(5, 150, 105, 0.26);
}

.roles-permission-role-toggle:has(.form-check-input:checked) {
    color: #065f46;
    background: rgba(5, 150, 105, 0.1);
    border-color: rgba(5, 150, 105, 0.26);
}

.roles-permission-role-toggle.is-readonly {
    cursor: not-allowed;
    opacity: 0.78;
}

.roles-permission-role-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.85rem;
}

.roles-permission-role-card {
    display: grid;
    gap: 0.8rem;
    min-width: 0;
    padding: 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #f8fafc;
}

.roles-permission-role-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.roles-permission-role-card-header h6 {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 0.98rem;
}

.roles-permission-role-card-header span {
    color: var(--color-text-secondary);
    font-size: 0.74rem;
    font-weight: 700;
}

.roles-permission-module-list {
    display: grid;
    gap: 0.65rem;
}

.roles-permission-module {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.roles-permission-module:first-child {
    padding-top: 0;
    border-top: 0;
}

.roles-permission-module-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.roles-permission-module-title strong {
    color: var(--color-text-primary);
    font-size: 0.78rem;
}

.roles-permission-module-title span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.45rem;
    height: 1.2rem;
    border-radius: 999px;
    color: #0e7490;
    background: rgba(14, 116, 144, 0.08);
    font-size: 0.68rem;
    font-weight: 800;
}

.roles-permission-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.roles-permission-chip-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 28px;
    padding: 0.24rem 0.5rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    background: #ffffff;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.1;
}

.roles-permission-action-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.roles-permission-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    width: 100%;
    color: var(--color-text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    opacity: 0.45;
}

.roles-permission-state-toggle {
    width: 30px;
    height: 22px;
    min-height: 22px;
    padding: 0;
    border-radius: 999px;
}

.roles-permission-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    line-height: 1;
}

.roles-permission-state::before {
    content: "-";
    font-size: 0.8rem;
    font-weight: 900;
}

.roles-permission-chip-toggle.is-allowed .roles-permission-state::before,
.roles-permission-chip-toggle:has(.form-check-input:checked) .roles-permission-state::before {
    content: "\2713";
    font-size: 0.75rem;
}

.roles-permission-chip-toggle .form-check-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    padding: 0;
}

.roles-permission-chip-toggle.is-allowed,
.roles-permission-chip-toggle:has(.form-check-input:checked) {
    color: #065f46;
    background: rgba(5, 150, 105, 0.1);
    border-color: transparent;
}

.roles-permission-chip-toggle.is-denied,
.roles-permission-chip-toggle:not(:has(.form-check-input:checked)) {
    color: #991b1b;
    background: rgba(239, 68, 68, 0.06);
    border-color: transparent;
}

.roles-permission-chip-toggle.is-readonly {
    cursor: not-allowed;
    opacity: 0.82;
}

.roles-permissions-console {
    display: grid;
    grid-template-columns: minmax(220px, 0.28fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.roles-permissions-sidebar,
.roles-permissions-role-panel {
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #ffffff;
}

.roles-permissions-sidebar {
    overflow: hidden;
}

.roles-permissions-sidebar-head {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.roles-permissions-sidebar-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.roles-sidebar-add-btn {
    flex: 0 0 auto;
}

.roles-permissions-sidebar-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.1rem;
    border: 0;
    background: transparent;
    color: var(--color-text-primary);
    text-align: left;
}

.roles-permissions-sidebar-toggle i {
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    transition: transform 0.2s ease;
}

.roles-permissions-sidebar-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.roles-permissions-sidebar-head strong,
.roles-permissions-role-title h5 {
    color: var(--color-text-primary);
}

.roles-permissions-sidebar-head span,
.roles-permissions-role-title span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(14, 116, 144, 0.08);
    color: #0e7490;
    font-size: 0.72rem;
    font-weight: 800;
}

.roles-permissions-sidebar-head span {
    min-width: 1.6rem;
    height: 1.35rem;
}

.roles-permissions-role-list {
    display: grid;
}

.roles-permissions-sidebar-actions {
    padding: 0.85rem 0.9rem;
    border-top: 1px solid var(--color-border);
    background: #ffffff;
}

.roles-permissions-sidebar-mini-map {
    padding: 0.8rem 0.85rem 0.9rem;
    border-top: 1px solid var(--color-border);
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.roles-permissions-sidebar-mini-map-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.roles-permissions-sidebar-mini-map-head strong {
    color: var(--color-text-primary);
    font-size: 0.78rem;
}

.roles-hierarchy-shell {
    display: grid;
    gap: 0;
    padding: 0.15rem 0.1rem 0.05rem;
}

.roles-hierarchy-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.roles-hierarchy-node-card {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 128px;
    max-width: 100%;
    padding: 0.4rem 0.7rem;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.035);
}

.roles-hierarchy-node-card.is-super {
    background: #f7f3ff;
    border-color: #e3d5ff;
    color: #6d28d9;
}

.roles-hierarchy-node-card.is-admin {
    background: #f2f7ff;
    border-color: #bfd8ff;
    color: #2563eb;
}

.roles-hierarchy-node-card.is-manager {
    background: #f2fcf5;
    border-color: #b9efc6;
    color: #15803d;
}

.roles-hierarchy-node-card.is-employee {
    background: #fff8f1;
    border-color: #ffd2a8;
    color: #ea580c;
}

.roles-hierarchy-node-card.is-default {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #334155;
}

.roles-hierarchy-node-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: currentColor;
    flex: 0 0 auto;
    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 12%, #ffffff 88%);
}

.roles-hierarchy-node-copy {
    display: grid;
    gap: 0.08rem;
}

.roles-hierarchy-node-copy small {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: color-mix(in srgb, currentColor 56%, #64748b 44%);
}

.roles-hierarchy-node-label {
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.2;
}

.roles-hierarchy-line {
    width: 2px;
    height: 18px;
    background: linear-gradient(180deg, rgba(148, 163, 184, 0.72) 0%, rgba(148, 163, 184, 0.24) 100%);
    margin: 0.18rem 0;
}

.roles-permissions-role-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.8rem 0.9rem;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-primary);
    text-align: left;
}

.roles-permissions-role-button:last-child {
    border-bottom: 0;
}

.roles-permissions-role-button span {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.roles-permissions-role-button strong,
.roles-permissions-role-button small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.roles-permissions-role-button small {
    color: var(--color-text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
}

.roles-permissions-role-button.is-active,
.roles-permissions-role-button:hover {
    background: rgba(14, 116, 144, 0.08);
    color: #0e7490;
}

.roles-permissions-detail {
    min-width: 0;
}

.roles-permissions-role-panel {
    display: none;
    padding: 1rem;
}

.roles-permissions-role-panel.is-active {
    display: grid;
    gap: 1rem;
}

.roles-permissions-role-hero {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.roles-permissions-role-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: var(--radius-md);
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 1.3rem;
}

.roles-permissions-role-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.roles-permissions-role-title h5 {
    margin: 0;
}

.roles-permissions-role-title span {
    padding: 0.16rem 0.45rem;
}

.roles-permissions-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
}

.roles-permissions-overview > div {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.8rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: var(--radius-sm);
    background: #f8fafc;
}

.roles-permissions-overview strong {
    color: #0e7490;
    font-size: 1.25rem;
    line-height: 1;
}

.roles-permissions-overview span {
    color: var(--color-text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
}

.roles-permissions-module-table {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.roles-permissions-module-header,
.roles-permissions-module-row {
    display: grid;
    grid-template-columns: minmax(145px, 0.9fr) repeat(5, minmax(72px, 0.36fr));
    gap: 0;
    align-items: center;
}

.roles-permissions-module-header {
    background: #f8fafc;
    color: var(--color-text-secondary);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.roles-permissions-module-header > span,
.roles-permissions-module-row > div {
    min-height: 54px;
    padding: 0.7rem 0.8rem;
    border-left: 1px solid rgba(148, 163, 184, 0.2);
}

.roles-permissions-module-header > span:first-child,
.roles-permissions-module-row > div:first-child {
    border-left: 0;
}

.roles-permissions-module-header span:not(:first-child) {
    text-align: center;
}

.roles-permissions-module-row {
    border-top: 1px solid var(--color-border);
}

.roles-permissions-module-name {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.roles-permissions-module-name strong,
.roles-permissions-module-name span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.roles-permissions-module-name strong {
    color: var(--color-text-primary);
    font-size: 0.82rem;
}

.roles-permissions-module-name span {
    color: var(--color-text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
}

.roles-directory-table tbody td {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

@media (max-width: 991.98px) {
    .btn {
        white-space: normal;
    }

    .table thead th {
        padding: 14px 12px;
    }

    .table tbody td {
        padding: 16px 12px;
    }

    .roles-permission-groups {
        column-count: 2;
    }

    .roles-permissions-console,
    .roles-permissions-module-header,
    .roles-permissions-module-row {
        grid-template-columns: 1fr;
    }

    .roles-permissions-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .roles-permission-groups {
        column-count: 1;
    }

    .roles-permissions-overview {
        grid-template-columns: 1fr;
    }
}

/* Status badges */
.badge {
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
}

.badge.bg-success {
    background: var(--color-success-light) !important;
    color: #065f46 !important;
}

.badge.bg-danger {
    background: var(--color-accent-light) !important;
    color: var(--color-accent) !important;
}

.badge.bg-warning,
.badge.text-bg-warning {
    background: var(--color-secondary-light) !important;
    color: #92400e !important;
}

.badge.bg-info,
.badge.bg-info-subtle,
.badge.text-bg-info {
    background: var(--color-primary-light) !important;
    color: var(--color-primary-dark) !important;
}

.badge.bg-primary,
.badge.text-bg-primary,
.badge.bg-secondary,
.badge.text-bg-secondary {
    background: #f1f5f9 !important;
    color: var(--color-text-secondary) !important;
}

/* Alerts as toast-like cards */
.rrs-toast-stack {
    top: 5rem;
    right: 1.25rem;
    z-index: 1090;
    width: min(360px, calc(100vw - 2rem));
    padding: 0;
}

.rrs-toast-stack .toast {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.14);
}

.rrs-toast .toast-header {
    min-height: 42px;
    padding: 0.58rem 0.75rem;
    border-bottom-color: rgba(148, 163, 184, 0.24);
}

.rrs-toast .toast-body {
    padding: 0.8rem 0.9rem;
    color: var(--color-text-primary);
    line-height: 1.45;
}

.rrs-toast .btn-close {
    margin-right: 0;
}

.alert {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    font-size: 14px;
}

.alert-success {
    background: var(--color-success-light);
    color: #065f46;
    border-color: rgba(5, 150, 105, 0.25);
}

.alert-danger {
    background: var(--color-accent-light);
    color: #9f1239;
    border-color: rgba(225, 29, 72, 0.22);
}

.alert-warning {
    background: var(--color-secondary-light);
    color: #92400e;
}

.alert-info {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    border-color: rgba(14, 116, 144, 0.25);
}

/* Modals */
.modal-content {
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
}

.modal {
    z-index: 1080;
}

.modal-backdrop {
    z-index: 1070;
}

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

.modal-title {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 400;
}

.rrs-confirm-modal .modal-content {
    overflow: hidden;
}

.rrs-confirm-modal .modal-title {
    font-size: 1rem;
    font-weight: 800;
}

.rrs-confirm-subtitle {
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    margin-top: 0.18rem;
}

.rrs-confirm-message {
    color: var(--color-text-primary);
    font-size: 0.95rem;
    line-height: 1.5;
}

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

.modal.fade .modal-dialog {
    transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}

.modal.fade .modal-dialog {
    transform: translateY(20px);
}

.modal.show .modal-dialog {
    transform: translateY(0);
}

/* Reservation drawer */
.reservation-form-drawer {
    padding: 1.5rem;
}

.reservation-form-drawer .modal-dialog.reservation-form-dialog {
    position: fixed;
    left: calc(var(--dashboard-sidebar-width, 240px) + ((100vw - var(--dashboard-sidebar-width, 240px)) / 2));
    top: calc(var(--dashboard-topbar-height, 88px) + ((100vh - var(--dashboard-topbar-height, 88px)) / 2));
    width: min(1160px, calc(100vw - var(--dashboard-sidebar-width, 240px) - 4rem)) !important;
    max-width: min(1160px, calc(100vw - var(--dashboard-sidebar-width, 240px) - 4rem)) !important;
    height: min(840px, calc(100vh - var(--dashboard-topbar-height, 88px) - 4rem));
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
}

.reservation-form-drawer .modal-dialog-scrollable .modal-content {
    max-height: 100%;
    height: 100%;
}

.reservation-form-drawer .modal-content {
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.reservation-form-drawer .modal-header {
    border-bottom: 1px solid var(--color-border);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    padding: 1.1rem 1.5rem;
}

.reservation-form-drawer .modal-title {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    margin: 0;
}

.reservation-form-drawer .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    background: var(--color-surface);
    padding: 1.5rem 1.75rem;
    overflow: auto;
    overscroll-behavior: contain;
}

.reservation-stepper-nav {
    display: flex;
    align-items: flex-start;
    gap: 0;
    overflow: visible;
    padding: 0 0 4px;
}

.reservation-stepper-node {
    display: grid;
    gap: 5px;
    justify-items: center;
    text-align: center;
    flex: 0 0 clamp(70px, 12vw, 112px);
    position: relative;
    z-index: 1;
    min-width: 0;
}

.reservation-stepper-node .step-badge {
    min-width: 24px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-surface);
    font-size: 0.75rem;
    transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}

.reservation-stepper-node .step-label {
    max-width: 100%;
    overflow: hidden;
    font-size: clamp(0.6rem, 1vw, 0.72rem);
    line-height: 1.2;
    color: var(--color-text-secondary);
    text-overflow: ellipsis;
    transition: color 0.22s ease;
    white-space: nowrap;
}

.reservation-stepper-node.is-active .step-label,
.reservation-stepper-node.is-complete .step-label {
    color: var(--color-text-primary);
    font-weight: 600;
}

.reservation-stepper-connector {
    flex: 1 1 auto;
    min-width: 0;
    height: 2px;
    margin: 11px -44px 0;
    border-radius: 999px;
    background: var(--gray-200);
    overflow: hidden;
    position: relative;
}

.reservation-stepper-connector::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--color-success) 0%, #22c55e 100%);
    transition: width 0.38s ease;
}

.reservation-stepper-connector.is-complete::before {
    width: 100%;
}

.reservation-pane-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    padding: 16px;
    box-shadow: var(--shadow-sm);
}

.reservation-step-form + #reservationForm,
#reservationForm .reservation-pane-card + .reservation-pane-card {
    margin-top: 1rem;
}

#reservationForm input[readonly],
#reservationForm textarea[readonly] {
    background-color: #eef1f4;
    border-color: #d7dde4;
    color: #6b7280;
    cursor: default;
    pointer-events: none;
}

.reservation-pane-header h6 {
    font-size: 1rem;
    margin: 0;
}

.reservation-step-feedback {
    min-height: 20px;
}

.reservation-step-feedback-status {
    min-height: 24px;
    font-size: 1rem;
    line-height: 1.5;
}

.reservation-amenities-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.reservation-amenity-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #f8fafc;
    font-size: 0.9rem;
    cursor: pointer;
}

.reservation-amenity-option input {
    margin: 0;
}

.reservation-confirmation-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.reservation-summary-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #f8fafc;
    padding: 12px;
}

.reservation-summary-card h6 {
    margin: 0 0 8px;
    font-size: 0.9rem;
}

.reservation-confirmation-pricing-card {
    grid-column: 1 / -1;
}

.pricing-inline-card {
    margin-top: 12px;
}

.reservation-pricing-lines {
    display: grid;
    gap: 6px;
    margin: 10px 0;
}

.reservation-pricing-lines > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--color-muted);
}

.reservation-pricing-lines > div:last-child {
    border-top: 1px solid var(--color-border);
    margin-top: 4px;
    padding-top: 8px;
    color: var(--color-text);
}

.reservation-pricing-section {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}

.reservation-pricing-section > strong {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.reservation-pricing-detail-list {
    display: grid;
    gap: 0.4rem;
}

.reservation-pricing-detail-list > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.2rem 0.75rem;
    align-items: start;
}

.reservation-pricing-detail-list span,
.reservation-pricing-detail-list small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reservation-pricing-detail-list small {
    grid-column: 1 / -1;
    color: var(--color-text-secondary);
}

.reservation-pricing-footer {
    display: grid;
    gap: 0.35rem;
    margin-top: 0.9rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--color-border);
}

.reservation-pricing-footer > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.reservation-pricing-footer span {
    color: var(--color-text-secondary);
}

.reservation-pricing-footer strong {
    color: var(--color-text-primary);
}

.reservation-pricing-footer .is-grand-total {
    margin-top: 0.15rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.98rem;
}

.reservation-pricing-footer .is-grand-total strong {
    font-size: 1.02rem;
}

.reservation-view-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.reservation-view-kicker {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #0f766e;
}

.reservation-view-title {
    font-family: var(--font-heading);
    font-size: 1.7rem;
    line-height: 1.1;
}

.reservation-view-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.reservation-view-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    border: 1px solid rgba(15, 118, 110, 0.18);
    border-radius: 18px;
    background: linear-gradient(135deg, #f8fffd 0%, #eef7ff 100%);
}

.reservation-view-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.reservation-view-reference {
    font-family: var(--font-mono);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-text-primary);
}

.reservation-view-subtext {
    margin-top: 10px;
    max-width: 460px;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

.reservation-view-meta {
    display: grid;
    gap: 10px;
    justify-items: end;
}

.reservation-view-overview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.reservation-view-overview-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: var(--shadow-sm);
}

.reservation-view-overview-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(14, 116, 144, 0.1);
    color: #0f766e;
    font-size: 1.05rem;
    flex: 0 0 auto;
}

.reservation-view-overview-label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.reservation-view-overview-card strong {
    display: block;
    font-size: 0.98rem;
    line-height: 1.35;
    color: var(--color-text-primary);
}

.reservation-view-overview-card small {
    display: block;
    margin-top: 4px;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.reservation-view-status {
    font-size: 0.82rem;
    padding: 0.45rem 0.7rem;
}

.reservation-status-action-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: end;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(14, 116, 144, 0.12);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.9) 0%, #ffffff 100%);
}

.reservation-policy-context-card {
    border: 1px solid rgba(14, 116, 144, 0.12);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.96) 0%, #ffffff 100%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.reservation-policy-context-kicker {
    margin-bottom: 0.3rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #64748b;
}

.reservation-policy-context-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(170px, 1fr));
    gap: 0.75rem 1rem;
    min-width: min(100%, 420px);
}

.reservation-policy-context-grid div {
    display: grid;
    gap: 0.12rem;
}

.reservation-policy-context-grid span {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.reservation-policy-context-grid strong {
    color: var(--color-text-primary);
    line-height: 1.35;
}

.reservation-policy-inline-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid rgba(14, 116, 144, 0.12);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.96) 0%, #ffffff 100%);
    color: var(--color-text-secondary);
    font-size: 0.83rem;
    line-height: 1.45;
}

.reservation-policy-inline-note strong {
    color: var(--color-text-primary);
}

.reservation-policy-inline-divider {
    color: #94a3b8;
}

.reservation-status-action-copy {
    display: grid;
    gap: 0.2rem;
}

.reservation-status-action-label {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #64748b;
}

.reservation-status-action-copy strong {
    font-size: 1rem;
    color: var(--color-text-primary);
}

.reservation-status-action-copy small {
    color: var(--color-text-secondary);
    line-height: 1.45;
}

.reservation-status-action-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    justify-content: flex-end;
}

.reservation-status-action-form .form-select {
    min-width: 180px;
}

.reservation-room-assignment-card {
    display: grid;
    gap: 1rem;
    padding: 1.1rem 1.15rem 1.15rem;
    border: 1px solid rgba(14, 116, 144, 0.12);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.96) 0%, #ffffff 100%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.reservation-room-assignment-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.95rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.reservation-room-assignment-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: flex-end;
}

.reservation-room-assignment-pill {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0.42rem 0.8rem;
    border-radius: 999px;
    background: rgba(17, 138, 178, 0.12);
    color: #0f5f7b;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

.reservation-room-assignment-pill.is-soft {
    background: rgba(226, 232, 240, 0.64);
    color: #334155;
}

.reservation-room-assignment-form {
    display: grid;
    gap: 1rem;
}

.reservation-room-list-shell {
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
}

.reservation-room-list-head,
.reservation-room-row {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(180px, 1.2fr) minmax(220px, 1.5fr) auto;
    gap: 1rem;
    align-items: center;
}

.reservation-room-list-head {
    padding: 0.8rem 1rem;
    background: rgba(248, 250, 252, 0.9);
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.reservation-room-list {
    max-height: 340px;
    overflow-y: auto;
}

.reservation-room-row {
    position: relative;
    padding: 0.95rem 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.reservation-room-row:last-child {
    border-bottom: 0;
}

.reservation-room-row:hover {
    background: rgba(248, 250, 252, 0.88);
}

.reservation-room-row input[type="radio"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.reservation-room-row.is-selected,
.reservation-room-row:has(input[type="radio"]:checked) {
    background: rgba(17, 138, 178, 0.08);
    box-shadow: inset 3px 0 0 #118ab2;
}

.reservation-room-row-main,
.reservation-room-row-cell {
    min-width: 0;
}

.reservation-room-row-code {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.reservation-room-row-cell {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.45;
}

.reservation-room-choice-status {
    display: inline-flex;
    align-items: center;
    align-self: start;
    padding: 0.4rem 0.72rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.reservation-room-choice-status.is-available,
.reservation-room-choice-status.is-active {
    background: rgba(34, 197, 94, 0.14);
    color: #15803d;
}

.reservation-room-choice-status.is-occupied {
    background: rgba(37, 99, 235, 0.14);
    color: #1d4ed8;
}

.reservation-room-choice-status.is-checked-out {
    background: rgba(6, 182, 212, 0.14);
    color: #0f766e;
}

.reservation-room-assignment-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-end;
    padding-top: 0.2rem;
}

.reservation-room-assignment-empty {
    padding: 1rem 1.05rem;
    border: 1px dashed var(--color-border);
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.9);
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.reservation-view-meta-item {
    text-align: right;
}

.reservation-view-meta-label {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.reservation-view-card {
    padding: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.reservation-view-card h6 {
    font-size: 1rem;
    margin-bottom: 14px;
}

.reservation-view-detail-list {
    display: grid;
    gap: 12px;
}

.reservation-view-detail-list div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}

.reservation-view-detail-list div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.reservation-view-detail-list span {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.reservation-view-detail-list strong {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
    text-align: right;
}

.reservation-view-detail-list-single div {
    display: block;
}

.reservation-view-detail-list-single strong {
    display: block;
    margin-top: 6px;
    text-align: left;
    line-height: 1.5;
}

@media (max-width: 767px) {
    .reservation-view-header,
    .reservation-view-hero {
        flex-direction: column;
    }

    .reservation-room-assignment-head,
    .reservation-room-assignment-summary,
    .reservation-room-assignment-actions {
        justify-content: flex-start;
    }

    .reservation-room-list-head {
        display: none;
    }

    .reservation-room-list {
        max-height: none;
    }

    .reservation-room-row {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 0.45rem;
    }

    .reservation-room-row-cell::before {
        display: block;
        margin-bottom: 0.15rem;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: #64748b;
    }

    .reservation-room-row-cell.is-default-bedding::before {
        content: "Default Bedding";
    }

    .reservation-room-row-cell.is-supported-bedding::before {
        content: "Supports";
    }

    .reservation-status-action-card {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .reservation-policy-context-grid {
        grid-template-columns: 1fr;
        min-width: 0;
        width: 100%;
    }

    .reservation-status-action-form {
        justify-content: stretch;
    }

    .reservation-status-action-form .form-select,
    .reservation-status-action-form .btn {
        width: 100%;
    }

    .reservation-view-overview {
        grid-template-columns: 1fr;
    }

    .reservation-view-meta,
    .reservation-view-meta-item {
        justify-items: start;
        text-align: left;
    }

    .reservation-view-detail-list div {
        display: block;
    }

    .reservation-view-detail-list strong {
        display: block;
        margin-top: 6px;
        text-align: left;
    }

    .reservation-view-reference {
        font-size: 1.55rem;
    }
}

.reservation-occupancy-guide .occupancy-inline-card,
.occupancy-inline-card {
    margin: 0;
}

.reservation-occupancy-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 10px;
    font-size: 0.82rem;
    margin-bottom: 8px;
}

.reservation-guarantee-fields.is-inactive {
    opacity: 0.65;
}

.reservation-confirm-check {
    padding: 12px;
    border-radius: var(--radius-sm);
    background: #f8fafc;
    border: 1px solid var(--color-border);
}

.offcanvas-backdrop.show {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: rgba(0, 0, 0, 0.24) !important;
}

.offcanvas-backdrop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Topbar clock */
.topbar-clock {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    min-width: 0;
    box-shadow: none;
}

.topbar-clock-compact {
    min-width: 0;
    align-items: flex-start;
}

.topbar-clock-compact .topbar-clock-time {
    font-size: 10px;
}

.topbar-clock-compact .topbar-clock-date {
    font-size: 11px;
}

.notifications-page-header {
    border: 1px solid rgba(14, 116, 144, 0.12);
    background: linear-gradient(180deg, #ffffff 0%, #f6fbfd 100%);
}

.notifications-card {
    display: flex;
    gap: 1rem;
    border: 1px solid rgba(14, 116, 144, 0.12);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
    padding: 1rem 1.1rem;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.notifications-card.is-unread {
    border-color: color-mix(in srgb, var(--role-accent) 24%, #cbd5e1 76%);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

.notifications-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 1rem;
}

.notifications-card-body {
    min-width: 0;
    flex: 1 1 auto;
}

.notifications-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.notifications-unread-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--role-accent);
    box-shadow: 0 0 0 4px var(--role-accent-soft);
}

.topbar-clock-time {
    font-family: var(--font-mono);
    font-size: 1.12rem;
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1;
    color: color-mix(in srgb, var(--role-accent-strong) 58%, #0f172a 42%);
}

.topbar-clock-date {
    margin-top: 4px;
    font-size: 0.92rem;
    color: color-mix(in srgb, var(--role-accent) 42%, #475569 58%);
}

.topbar-clock-panel {
    position: relative;
    padding-left: 8px;
}

.topbar-clock-panel::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 5px;
    width: 1px;
    background: rgba(148, 163, 184, 0.18);
}

.topbar-clock-meta {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.12rem;
    font-size: 0.54rem;
    color: color-mix(in srgb, var(--role-accent) 42%, #475569 58%);
    white-space: nowrap;
}

.topbar-clock-meta-item {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    white-space: nowrap;
    position: relative;
}

.topbar-clock-meta-item + .topbar-clock-meta-item {
    padding-left: 0.25rem;
}

.topbar-clock-meta-item + .topbar-clock-meta-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 0.72rem;
    transform: translateY(-50%);
    background: rgba(148, 163, 184, 0.3);
}

/* Calendar page */
.calendar-toolbar-form {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    gap: 0.7rem;
    align-items: end;
    min-width: min(100%, 920px);
}

.calendar-toolbar-field {
    display: grid;
    gap: 0.32rem;
}

.calendar-toolbar-field.is-wide {
    min-width: 180px;
}

.calendar-toolbar-field label {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.calendar-toolbar-actions {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
}

.calendar-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 252px;
    gap: 1.15rem;
    align-items: start;
}

.calendar-frame-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.calendar-frame-title {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.calendar-frame-title h5 {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.calendar-frame-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    text-decoration: none;
    color: var(--color-text-secondary);
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.98) 100%);
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.calendar-frame-nav-btn:hover,
.calendar-frame-nav-btn:focus-visible {
    color: var(--color-text-primary);
    text-decoration: none;
    border-color: rgba(14, 116, 144, 0.28);
    background: #ffffff;
    transform: translateY(-1px);
}

.calendar-main-panel {
    min-width: 0;
}

.calendar-side-island {
    min-width: 0;
}

.calendar-summary-island {
    position: sticky;
    top: calc(var(--dashboard-topbar-height) + 1rem);
}

.calendar-summary-island .card-body {
    padding: 0.9rem 0.85rem 0.95rem;
}

.calendar-summary-month-nav {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    gap: 0.45rem;
    align-items: center;
    margin-bottom: 0.8rem;
}

.calendar-month-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.98) 100%);
    color: var(--color-text-secondary);
    text-decoration: none;
}

.calendar-month-nav-btn:hover,
.calendar-month-nav-btn:focus-visible {
    color: var(--color-text-primary);
    text-decoration: none;
    border-color: rgba(14, 116, 144, 0.28);
    background: #ffffff;
}

.calendar-summary-month {
    display: grid;
    gap: 0.18rem;
    padding: 0.8rem 0.85rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.calendar-summary-month-label {
    color: var(--color-text-muted);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.calendar-summary-month strong {
    color: var(--color-text-primary);
    font-size: 0.98rem;
    line-height: 1.1;
}

.calendar-summary-stack {
    display: grid;
    gap: 0;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 1rem;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.98) 100%);
    margin-top: -0.1rem;
}

.calendar-summary-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.58rem;
    padding: 0.68rem 0.72rem;
    background: transparent;
    text-decoration: none;
}

.calendar-summary-item + .calendar-summary-item {
    border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.calendar-summary-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    flex: 0 0 0.55rem;
    background: #94a3b8;
}

.calendar-summary-item small {
    color: var(--color-text-secondary);
    font-size: 0.76rem;
    font-weight: 700;
    margin: 0;
}

.calendar-summary-item strong {
    color: var(--color-text-primary);
    font-size: 0.88rem;
    line-height: 1;
    margin: 0;
    justify-self: end;
}

.calendar-summary-item:hover,
.calendar-summary-item:focus-visible {
    text-decoration: none;
    background: rgba(248, 250, 252, 0.9);
}

.calendar-summary-item.is-active {
    background: rgba(14, 116, 144, 0.08);
}

.calendar-summary-item.is-pending .calendar-summary-dot {
    background: #f59e0b;
}

.calendar-summary-item.is-confirmed .calendar-summary-dot {
    background: #3b82f6;
}

.calendar-summary-item.is-checked-in .calendar-summary-dot {
    background: #22c55e;
}

.calendar-summary-item.is-checked-out .calendar-summary-dot {
    background: #94a3b8;
}

.calendar-summary-item.is-cancelled .calendar-summary-dot {
    background: #ef4444;
}

.calendar-page .calendar-grid-wrap {
    overflow-x: auto;
}

.calendar-grid-header,
.calendar-grid-body {
    display: grid;
    grid-template-columns: repeat(7, minmax(108px, 1fr));
}

.calendar-weekday {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    background: #f8fafc;
}

.calendar-weekday:last-child {
    border-right: 0;
}

.calendar-day {
    display: block;
    min-height: 116px;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: 6px;
    background: #ffffff;
    text-decoration: none;
    color: inherit;
    transition: background 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.calendar-day:nth-child(7n) {
    border-right: 0;
}

.calendar-day.is-outside-month {
    background: #f8fafc;
}

.calendar-day.is-today {
    background: #eff6ff;
}

.calendar-day.is-selected {
    box-shadow: inset 0 0 0 2px rgba(99, 102, 241, 0.35);
    background: linear-gradient(180deg, rgba(238, 242, 255, 0.96) 0%, rgba(255, 255, 255, 1) 100%);
}

.calendar-day:hover {
    text-decoration: none;
    background: #f8fbff;
}

.calendar-day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
}

.calendar-events {
    display: grid;
    gap: 3px;
}

.calendar-event {
    display: block;
    padding: 4px 7px;
    border-radius: 7px;
    font-size: 10px;
    line-height: 1.2;
    text-decoration: none;
    color: #0f172a;
    border: 1px solid transparent;
    background: #e2e8f0;
    font-weight: 600;
}

.calendar-event:hover {
    text-decoration: none;
    filter: brightness(0.97);
}

.calendar-event-name {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-event.status-pending {
    background: linear-gradient(180deg, #fff4cf 0%, #fde68a 100%);
    border-color: #f59e0b;
    color: #78350f;
}

.calendar-event.status-confirmed {
    background: linear-gradient(180deg, #e0eeff 0%, #bfdbfe 100%);
    border-color: #3b82f6;
    color: #1d4ed8;
}

.calendar-event.status-checked-in {
    background: linear-gradient(180deg, #ddfcea 0%, #bbf7d0 100%);
    border-color: #22c55e;
    color: #166534;
}

.calendar-event.status-checked-out {
    background: linear-gradient(180deg, #ebf1f7 0%, #dbe4ef 100%);
    border-color: #94a3b8;
    color: #334155;
}

.calendar-event.status-cancelled {
    background: linear-gradient(180deg, #ffe4e6 0%, #fecdd3 100%);
    border-color: #f43f5e;
    color: #9f1239;
}

.calendar-more {
    font-size: 10px;
    color: var(--color-text-secondary);
    padding: 2px 2px;
}

.calendar-preview-card {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.8rem;
    padding: 0.85rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
}

.calendar-preview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.calendar-preview-label {
    display: block;
    margin-bottom: 0.15rem;
    color: var(--color-text-muted);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.calendar-preview-head strong {
    display: block;
    color: var(--color-text-primary);
    font-size: 0.92rem;
    line-height: 1.2;
}

.calendar-preview-total {
    color: var(--color-text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
}

.calendar-preview-list {
    display: grid;
    gap: 0.45rem;
}

.calendar-preview-empty {
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    line-height: 1.45;
}

.calendar-preview-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    padding: 0.55rem 0.62rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(148, 163, 184, 0.14);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.82);
}

.calendar-preview-item:hover,
.calendar-preview-item:focus-visible {
    text-decoration: none;
    transform: translateY(-1px);
}

.calendar-preview-item-main,
.calendar-preview-item-meta {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.calendar-preview-item-main strong,
.calendar-preview-item-meta span {
    color: var(--color-text-primary);
    font-size: 0.78rem;
    line-height: 1.2;
}

.calendar-preview-item-main small,
.calendar-preview-item-meta small {
    color: var(--color-text-secondary);
    font-size: 0.67rem;
    line-height: 1.25;
}

.calendar-preview-item-meta {
    justify-items: end;
    text-align: right;
}

.calendar-preview-item.status-pending {
    border-color: rgba(245, 158, 11, 0.26);
}

.calendar-preview-item.status-confirmed {
    border-color: rgba(59, 130, 246, 0.26);
}

.calendar-preview-item.status-checked-in {
    border-color: rgba(34, 197, 94, 0.26);
}

.calendar-preview-item.status-checked-out {
    border-color: rgba(148, 163, 184, 0.24);
}

.calendar-preview-item.status-cancelled {
    border-color: rgba(244, 63, 94, 0.24);
}

.calendar-agenda-list {
    display: grid;
    gap: 0;
}

.calendar-agenda-day + .calendar-agenda-day {
    border-top: 1px solid rgba(148, 163, 184, 0.16);
}

.calendar-agenda-day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1rem 0.65rem;
}

.calendar-agenda-day-head div {
    display: grid;
    gap: 0.18rem;
}

.calendar-agenda-day-head strong {
    color: var(--color-text-primary);
    font-size: 0.96rem;
}

.calendar-agenda-events {
    display: grid;
    gap: 0.6rem;
    padding: 0 1rem 1rem;
}

.calendar-agenda-event {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0.75rem 0.85rem;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.14);
    text-decoration: none;
}

.calendar-agenda-event:hover,
.calendar-agenda-event:focus-visible {
    text-decoration: none;
    transform: translateY(-1px);
}

.calendar-agenda-event-main,
.calendar-agenda-event-meta {
    display: grid;
    gap: 0.12rem;
}

.calendar-agenda-event-main strong {
    color: var(--color-text-primary);
    font-size: 0.84rem;
}

.calendar-agenda-event-main span,
.calendar-agenda-event-meta span,
.calendar-agenda-event-meta small {
    color: var(--color-text-secondary);
    font-size: 0.72rem;
}

.calendar-agenda-event-meta {
    justify-items: end;
    text-align: right;
}

.calendar-agenda-event.status-pending {
    background: rgba(254, 243, 199, 0.58);
    border-color: rgba(245, 158, 11, 0.22);
}

.calendar-agenda-event.status-confirmed {
    background: rgba(219, 234, 254, 0.62);
    border-color: rgba(59, 130, 246, 0.22);
}

.calendar-agenda-event.status-checked-in {
    background: rgba(220, 252, 231, 0.62);
    border-color: rgba(34, 197, 94, 0.22);
}

.calendar-agenda-event.status-checked-out {
    background: rgba(226, 232, 240, 0.7);
    border-color: rgba(148, 163, 184, 0.2);
}

.calendar-agenda-event.status-cancelled {
    background: rgba(254, 226, 226, 0.66);
    border-color: rgba(244, 63, 94, 0.2);
}

.calendar-empty-state {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--color-text-secondary);
}

.calendar-empty-state i {
    font-size: 1.6rem;
    color: var(--color-text-muted);
}

@media (max-width: 1199.98px) {
    .calendar-toolbar-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .calendar-toolbar-actions {
        grid-column: 1 / -1;
    }

    .calendar-layout {
        grid-template-columns: 1fr;
    }

    .calendar-summary-island {
        position: static;
    }

    .calendar-summary-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .calendar-toolbar-form {
        grid-template-columns: 1fr;
    }

    .calendar-summary-stack {
        grid-template-columns: 1fr;
    }

    .calendar-preview-head,
    .calendar-agenda-day-head,
    .calendar-agenda-event,
    .calendar-preview-item {
        display: grid;
        grid-template-columns: 1fr;
    }

    .calendar-preview-item-meta,
    .calendar-agenda-event-meta {
        justify-items: start;
        text-align: left;
    }
}

/* Reservation pax guide */
.pax-guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.pax-guide-grid-drawer {
    grid-template-columns: 1fr;
}

.reservation-pax-offcanvas {
    --bs-offcanvas-width: min(520px, 100vw);
}

.reservation-pax-offcanvas .offcanvas-header {
    border-bottom: 1px solid rgba(14, 116, 144, 0.16);
    background: linear-gradient(135deg, #f0f9ff 0%, #ecfeff 100%);
}

.pax-matcher-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
    margin-bottom: 10px;
}

.pax-matcher-field {
    display: grid;
    gap: 4px;
    margin: 0;
}

.pax-matcher-field > span {
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.pax-matcher-field-wide {
    grid-column: 1 / -1;
}

.pax-matcher-action {
    min-height: 33px;
}

.pax-matcher-summary {
    border-radius: 10px;
    padding: 9px 11px;
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 10px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: #f8fafc;
    color: #334155;
}

.pax-matcher-summary.has-match {
    background: #ecfeff;
    border-color: rgba(8, 145, 178, 0.25);
    color: #155e75;
}

.pax-matcher-summary.has-no-match {
    background: #fff7ed;
    border-color: rgba(251, 146, 60, 0.3);
    color: #9a3412;
}

.pax-matcher-summary.is-loading {
    background: #eff6ff;
    border-color: rgba(96, 165, 250, 0.35);
    color: #1e40af;
}

.pax-guide-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #f8fafc;
    padding: 12px;
    display: flex;
    flex-direction: column;
    min-height: 170px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.pax-guide-item.is-best-match {
    border-color: rgba(8, 145, 178, 0.6);
    box-shadow: 0 10px 22px -16px rgba(8, 145, 178, 0.72);
    transform: translateY(-1px);
}

.pax-guide-item.is-match {
    border-color: rgba(56, 189, 248, 0.45);
}

.pax-guide-item.is-hidden-by-pax {
    display: none;
}

.pax-guide-match-rank {
    align-self: flex-start;
    border-radius: 999px;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 8px;
    margin-bottom: 8px;
}

.pax-guide-item h6 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}

.pax-guide-meta {
    color: var(--color-text-secondary);
    font-size: 12px;
}

.pax-guide-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 10px;
    font-size: 12px;
    color: var(--color-text-primary);
    min-height: 52px;
}

.pax-guide-item > small {
    margin-top: auto;
    min-height: 2.8em;
}

.pax-guide-bed-section-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

.pax-guide-bed-list {
    display: grid;
    gap: 8px;
    max-height: 150px;
    overflow-y: auto;
    padding-right: 4px;
}

.pax-guide-bed-item {
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.75);
    padding: 8px 9px;
}

.pax-guide-bed-item.is-best-match {
    border-color: rgba(34, 197, 94, 0.45);
    box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.2);
}

.pax-guide-bed-name {
    font-size: 12px;
    line-height: 1.3;
    color: var(--color-text-primary);
}

.pax-guide-bed-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    white-space: nowrap;
}

.pax-guide-bed-meta {
    font-size: 11px;
    color: #64748b;
    margin-top: 3px;
    line-height: 1.35;
}

.pax-guide-bed-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
}

.pax-guide-bed-flags span {
    border-radius: 999px;
    background: #e2e8f0;
    color: #334155;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
}

.reservation-enquiry-card {
    border-color: rgba(14, 116, 144, 0.14);
    background: linear-gradient(180deg, #ffffff 0%, #f7fbfd 100%);
    overflow: hidden;
    max-width: 100%;
}

.reservation-enquiry-card .card-body {
    padding: 0.8rem 0.9rem;
}

.reservation-enquiry-layout {
    display: grid;
    grid-template-columns: minmax(210px, 0.22fr) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    min-width: 0;
}

.reservation-enquiry-kicker {
    display: block;
    color: #0e7490;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.reservation-enquiry-copy h5 {
    color: var(--color-text-primary);
    font-size: 0.9rem;
    line-height: 1.2;
}

.reservation-enquiry-copy p {
    max-width: 18rem;
    line-height: 1.35;
}

.reservation-enquiry-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
    gap: 0.35rem;
    align-items: flex-end;
    min-width: 0;
}

.reservation-enquiry-field {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
    margin: 0;
}

.reservation-enquiry-field > span {
    overflow: hidden;
    color: var(--color-text-secondary);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.reservation-enquiry-field-wide {
    grid-column: span 2;
    min-width: 0;
}

.reservation-enquiry-form .form-control,
.reservation-enquiry-form .form-select,
.reservation-enquiry-form .btn {
    min-width: 0;
    min-height: 32px;
    padding-top: 0.28rem;
    padding-bottom: 0.28rem;
    font-size: 0.82rem;
}

.reservation-enquiry-form input[type="number"] {
    min-width: 0;
    padding-left: 0.55rem;
    padding-right: 0.35rem;
}

.reservation-enquiry-action {
    min-width: 0;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .pax-matcher-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pax-matcher-action {
        grid-column: 1 / -1;
    }
}

/* Reservation list toolbar */
.reservation-toolbar {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.reservation-kpi-card {
    display: grid;
    gap: 0.35rem;
    min-height: 120px;
    align-content: start;
    padding: 1.05rem 1.1rem;
}

.reservation-kpi-label {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #64748b;
}

.reservation-kpi-value {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 2.4vw, 2.2rem);
    line-height: 1;
    color: #0f172a;
}

.reservation-kpi-meta {
    font-size: 0.82rem;
    color: #64748b;
}

.reservation-toolbar-title h5 {
    font-size: 0.95rem;
}

.reservation-toolbar-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
}

.reservation-toolbar-actions {
    display: grid;
    gap: 8px;
}

.reservation-table-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.reservation-table-tabs .btn {
    min-height: 32px;
    padding: 0.3rem 0.55rem;
    font-size: 0.78rem;
}

.reservation-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: 0.35rem;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.12);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}

.reservation-filter-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 6px;
    align-items: center;
    min-width: 0;
}

.reservation-filter-form .form-control,
.reservation-filter-form .form-select {
    min-height: 32px;
    padding-top: 0.28rem;
    padding-bottom: 0.28rem;
    font-size: 0.82rem;
}

.reservation-filter-btn,
.reservation-create-btn {
    min-height: 32px;
    min-width: 0;
    padding-top: 0.28rem;
    padding-bottom: 0.28rem;
    white-space: nowrap;
}

.reservation-mobile-table-wrap {
    display: none;
}

.reservation-mobile-more {
    display: none;
}

.reservation-workspace-table thead th {
    padding: 0.65rem 0.7rem;
    font-size: 0.64rem;
    letter-spacing: 0.08em;
}

.reservation-workspace-table {
    table-layout: fixed;
    width: 100%;
    min-width: 0;
}

.content-area .reservation-workspace-table {
    table-layout: fixed;
}

.content-area .reservation-workspace-table thead th {
    overflow-wrap: normal;
    white-space: nowrap;
}

.reservation-workspace-table tbody td {
    padding: 0.65rem 0.7rem;
    font-size: 0.76rem;
    line-height: 1.35;
    vertical-align: top;
}

.content-area .reservation-workspace-table th:last-child,
.content-area .reservation-workspace-table td:last-child {
    width: 72px;
    min-width: 72px;
}

.reservation-workspace-table {
    min-width: 1120px;
    table-layout: fixed;
}

.reservation-workspace-table thead th {
    padding: 0.85rem 0.55rem;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

.reservation-workspace-table tbody td {
    padding: 0.9rem 0.55rem !important;
    color: #1e293b;
    font-size: 0.94rem;
    line-height: 1.45;
    vertical-align: top;
}

.reservation-workspace-table th:nth-child(1),
.reservation-workspace-table td:nth-child(1) {
    width: 9%;
}

.reservation-workspace-table th:nth-child(2),
.reservation-workspace-table td:nth-child(2) {
    width: 22%;
}

.reservation-workspace-table th:nth-child(3),
.reservation-workspace-table td:nth-child(3) {
    width: 18%;
}

.reservation-workspace-table th:nth-child(4),
.reservation-workspace-table td:nth-child(4) {
    width: 15%;
}

.reservation-workspace-table th:nth-child(5),
.reservation-workspace-table td:nth-child(5) {
    width: 15%;
}

.reservation-workspace-table th:nth-child(6),
.reservation-workspace-table td:nth-child(6) {
    width: 13%;
}

.reservation-workspace-table th:nth-child(7),
.reservation-workspace-table td:nth-child(7) {
    width: 72px;
}

.reservation-booking-cell {
    min-width: 0;
}

.reservation-booking-code {
    display: block;
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reservation-booking-subtext {
    display: block;
    margin-top: 0.18rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.reservation-guest-cell,
.reservation-contact-cell,
.reservation-stay-date-cell,
.reservation-length-cell,
.reservation-ops-cell {
    min-width: 0;
}

.reservation-primary-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.2rem;
    min-width: 0;
}

.reservation-primary-line strong {
    min-width: 0;
    overflow: hidden;
    color: #0f172a;
    font-size: 0.98rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reservation-note-line {
    margin-top: 0.28rem;
    overflow: hidden;
    color: var(--color-text-secondary);
    font-size: 0.69rem;
    font-weight: 600;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reservation-mobile-actions {
    display: none;
}

.reservation-mobile-view-btn {
    min-height: 32px;
    border-radius: 10px;
    font-weight: 600;
}

.reservation-mobile-date-grid {
    display: none;
}

.reservation-mobile-date-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.reservation-mobile-date-label {
    font-size: 0.61rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.reservation-mobile-date-value {
    color: #334155;
    font-size: 0.74rem;
    line-height: 1.3;
}

.reservation-secondary-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.16rem 0.48rem;
    max-width: 100%;
    margin-bottom: 0.14rem;
    overflow: hidden;
    color: #475569;
    line-height: 1.35;
    font-size: 0.88rem;
}

.reservation-secondary-line > span,
.reservation-secondary-line > strong {
    min-width: 0;
}

.reservation-secondary-line > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reservation-secondary-line:last-child {
    margin-bottom: 0;
}

.reservation-secondary-line strong {
    color: #334155;
    font-weight: 700;
}

.reservation-meta-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.14rem 0.45rem;
    border-radius: 999px;
    background: rgba(14, 116, 144, 0.08);
    border: 1px solid rgba(14, 116, 144, 0.14);
    color: #155e75;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.reservation-flag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.24rem;
    margin-top: 0.35rem;
    max-height: 3.3rem;
    overflow: hidden;
}

.reservation-ops-cell {
    min-width: 0;
}

.reservation-ops-list {
    display: grid;
    grid-template-columns: minmax(76px, 0.85fr) minmax(92px, 1fr);
    gap: 0.28rem 0.8rem;
    margin: 0;
}

.reservation-ops-list div {
    min-width: 0;
}

.reservation-ops-list dt {
    margin: 0 0 0.08rem;
    color: #64748b;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
}

.reservation-ops-list dd {
    margin: 0;
    overflow: hidden;
    color: #0f172a;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reservation-status-cell {
    min-width: 120px;
    white-space: nowrap;
}

.reservation-status-text {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    padding: 0.28rem 0.58rem;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    background: #eff6ff;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.3;
    text-transform: uppercase;
    white-space: nowrap;
}

.reservation-status-text::before {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: #94a3b8;
    flex: 0 0 0.42rem;
}

.reservation-status-text.is-confirmed::before {
    background: #16a34a;
}

.reservation-status-text.is-confirmed {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.reservation-status-text.is-checked-in::before {
    background: #0284c7;
}

.reservation-status-text.is-checked-in {
    border-color: #bae6fd;
    background: #f0f9ff;
    color: #075985;
}

.reservation-status-text.is-checked-out::before {
    background: #64748b;
}

.reservation-status-text.is-checked-out {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #334155;
}

.reservation-status-text.is-cancelled::before {
    background: #dc2626;
}

.reservation-status-text.is-cancelled {
    border-color: #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.reservation-status-text.is-pending::before {
    background: #f59e0b;
}

.reservation-status-text.is-pending {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

.reservation-actions-cell {
    width: 72px;
    min-width: 72px;
    padding-left: 0.45rem !important;
    padding-right: 0.45rem !important;
    white-space: nowrap;
}

.reservation-workspace-table.table-hover tbody tr:hover > *,
.reservation-workspace-table tbody tr:focus-within > * {
    background: rgba(14, 116, 144, 0.08) !important;
    box-shadow: inset 0 0 0 9999px rgba(14, 116, 144, 0.08) !important;
}

.reservation-action-group {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}

.reservation-action-form {
    display: inline-flex;
    margin: 0;
}

.reservation-action-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: #ffffff;
    color: #475569;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.reservation-action-btn:hover,
.reservation-action-btn:focus-visible {
    text-decoration: none;
    transform: translateY(-1px);
}

.reservation-action-btn.is-view {
    color: #475569;
    border-color: rgba(148, 163, 184, 0.24);
}

.reservation-action-btn.is-edit {
    color: #155e75;
    border-color: rgba(14, 116, 144, 0.2);
    background: rgba(14, 116, 144, 0.05);
}

.reservation-action-btn.is-delete {
    color: #b91c1c;
    border-color: rgba(220, 38, 38, 0.18);
    background: rgba(220, 38, 38, 0.04);
}

.reservation-action-btn i {
    font-size: 0.82rem;
    line-height: 1;
}

/* Availability page */
.availability-page-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: end;
    padding: 1.25rem 1.4rem;
    border: 1px solid rgba(14, 116, 144, 0.12);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at top right, rgba(14, 116, 144, 0.14), transparent 38%),
        linear-gradient(180deg, #ffffff 0%, #f7fcff 100%);
    box-shadow: var(--shadow-sm);
}

.availability-page-kicker {
    display: inline-block;
    margin-bottom: 0.45rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.availability-page-title {
    font-family: var(--font-heading);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 700;
}

.availability-page-text {
    max-width: 76ch;
    color: var(--color-text-secondary);
}

.availability-workspace-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.availability-workspace-card .card-body {
    padding: 0.9rem 1rem 1rem;
}

.availability-compact-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    align-items: center;
    padding: 0.6rem 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: var(--radius-md);
    background: #f8fafc;
    color: var(--color-text-secondary);
    font-size: 0.82rem;
}

.availability-compact-summary strong {
    color: var(--color-text-primary);
}

.availability-filter-toolbar {
    display: grid;
    grid-template-columns: minmax(180px, 1.1fr) minmax(220px, 1.2fr) minmax(130px, 0.6fr) minmax(105px, 0.45fr) auto;
    gap: 0.55rem;
    align-items: end;
}

.availability-filter-field {
    min-width: 0;
}

.availability-filter-field .form-label {
    margin-bottom: 0.25rem;
}

.availability-filter-actions {
    display: flex;
    gap: 0.4rem;
    align-items: end;
    align-self: end;
    white-space: nowrap;
}

.availability-filter-icon-btn {
    width: 46px;
    min-width: 46px;
    padding-left: 0;
    padding-right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.availability-filter-reset-btn {
    color: #475569;
}

.availability-filter-form .form-control,
.availability-filter-form .form-select,
.availability-filter-form .btn {
    box-sizing: border-box;
    height: 46px;
    min-height: 46px;
    line-height: 1.2;
}

.availability-matrix-header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: center;
    justify-content: space-between;
}

.availability-matrix-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
    margin-bottom: 1rem;
}

.availability-matrix-filter .availability-filter-field {
    flex: 1 1 180px;
}

.availability-matrix-filter .availability-filter-field-sm {
    flex-basis: 150px;
}

.availability-matrix-filter .availability-filter-field-xs {
    flex-basis: 110px;
}

.availability-matrix-filter .availability-filter-field-pax {
    flex: 0 1 92px;
}

.availability-matrix-filter .availability-filter-actions {
    flex: 0 0 auto;
}

.availability-matrix-summary,
.availability-matrix-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 1rem;
    align-items: center;
}

.availability-matrix-summary {
    margin-bottom: 0.85rem;
    color: var(--color-text-secondary);
    font-size: 0.82rem;
}

.availability-matrix-summary strong {
    color: var(--color-text-primary);
}

.availability-matrix-pax-note {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    background: rgba(245, 158, 11, 0.12);
    color: #92400e;
    font-size: 0.76rem;
    font-weight: 800;
}

.occupancy-planner-card {
    overflow: hidden;
}

.occupancy-planner-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
}

.occupancy-planner-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.occupancy-summary-pill {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0.38rem 0.72rem;
    border-radius: 999px;
    background: rgba(14, 116, 144, 0.12);
    color: #155e75;
    font-size: 0.78rem;
    font-weight: 700;
}

.occupancy-summary-pill.is-soft {
    background: rgba(148, 163, 184, 0.12);
    color: #334155;
}

.occupancy-planner-filter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
    align-items: end;
}

.occupancy-filter-field {
    min-width: 0;
}

.occupancy-filter-field-sm {
    max-width: 140px;
}

.occupancy-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: end;
    justify-content: flex-end;
}

.occupancy-planner-board-shell {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.25rem;
}

.occupancy-planner-board {
    min-width: calc(240px + (var(--planner-day-count, 14) * 72px));
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    overflow: hidden;
}

.occupancy-planner-topline,
.occupancy-planner-row {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    min-width: inherit;
}

.occupancy-planner-topline {
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    background: #f8fafc;
}

.occupancy-planner-roomhead {
    position: sticky;
    left: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    padding: 0.95rem 1rem;
    border-right: 1px solid rgba(148, 163, 184, 0.1);
    background: #f8fafc;
    color: #334155;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.occupancy-planner-dayshead {
    display: grid;
    grid-template-columns: repeat(var(--planner-day-count, 14), minmax(72px, 1fr));
}

.occupancy-planner-dayhead {
    display: grid;
    justify-items: center;
    gap: 0.08rem;
    padding: 0.75rem 0.25rem;
    border-right: 1px solid rgba(148, 163, 184, 0.08);
    color: #64748b;
}

.occupancy-planner-dayhead span,
.occupancy-planner-dayhead small {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.occupancy-planner-dayhead strong {
    color: #0f172a;
    font-size: 0.94rem;
    line-height: 1;
}

.occupancy-planner-dayhead.is-today {
    background: rgba(14, 116, 144, 0.08);
}

.occupancy-planner-row + .occupancy-planner-row {
    border-top: 1px solid rgba(148, 163, 184, 0.08);
}

.occupancy-planner-roommeta {
    position: sticky;
    left: 0;
    z-index: 2;
    display: grid;
    gap: 0.18rem;
    align-content: center;
    padding: 0.95rem 1rem;
    border-right: 1px solid rgba(148, 163, 184, 0.1);
    background: #ffffff;
}

.occupancy-planner-roomcode {
    color: #0f172a;
    font-size: 1rem;
    line-height: 1.15;
}

.occupancy-planner-roomtype {
    color: #334155;
    font-size: 0.82rem;
    font-weight: 700;
}

.occupancy-planner-roomsub {
    color: #64748b;
    font-size: 0.75rem;
}

.occupancy-planner-roomstatus {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: #e2e8f0;
    border: 1px solid #cbd5e1;
    color: #334155;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.occupancy-planner-roomstatus.is-available,
.occupancy-planner-roomstatus.is-active {
    background: #dcfce7;
    border-color: #86efac;
    color: #166534;
}

.occupancy-planner-roomstatus.is-occupied {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1d4ed8;
}

.occupancy-planner-roomstatus.is-checked-out {
    background: #ffedd5;
    border-color: #fdba74;
    color: #92400e;
}

.occupancy-planner-roomstatus.is-maintenance,
.occupancy-planner-roomstatus.is-inactive {
    background: #e5e7eb;
    border-color: #cbd5e1;
    color: #475569;
}

.occupancy-planner-timeline {
    position: relative;
    min-height: 92px;
    background-image: repeating-linear-gradient(
        to right,
        transparent 0,
        transparent calc(100% / var(--planner-day-count, 14) - 1px),
        rgba(148, 163, 184, 0.08) calc(100% / var(--planner-day-count, 14) - 1px),
        rgba(148, 163, 184, 0.08) calc(100% / var(--planner-day-count, 14))
    );
}

.occupancy-planner-gridline {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.occupancy-planner-bar {
    --planner-bar-bg: #f8fafc;
    --planner-bar-border: #cbd5e1;
    --planner-bar-accent: #94a3b8;
    --planner-bar-title: #0f172a;
    --planner-bar-text: #475569;
    position: absolute;
    top: 14px;
    height: 64px;
    border-radius: 14px;
    padding: 0.65rem 0.8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.18rem;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
    border: 1px solid var(--planner-bar-border);
    background: var(--planner-bar-bg);
    border-left: 4px solid var(--planner-bar-accent);
}

.occupancy-planner-bar strong,
.occupancy-planner-bar span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.occupancy-planner-bar strong {
    color: var(--planner-bar-title);
    font-size: 0.78rem;
    font-weight: 800;
}

.occupancy-planner-bar span {
    color: var(--planner-bar-text);
    font-size: 0.7rem;
    font-weight: 600;
}

.occupancy-planner-bar.is-confirmed {
    --planner-bar-bg: #ecfdf5;
    --planner-bar-border: #86efac;
    --planner-bar-accent: #16a34a;
    --planner-bar-title: #14532d;
    --planner-bar-text: #166534;
}

.occupancy-planner-bar.is-pending {
    --planner-bar-bg: #fffbeb;
    --planner-bar-border: #fcd34d;
    --planner-bar-accent: #d97706;
    --planner-bar-title: #78350f;
    --planner-bar-text: #92400e;
}

.occupancy-planner-bar.is-checked-in {
    --planner-bar-bg: #eff6ff;
    --planner-bar-border: #93c5fd;
    --planner-bar-accent: #2563eb;
    --planner-bar-title: #1e3a8a;
    --planner-bar-text: #1d4ed8;
}

.occupancy-planner-bar.is-checked-out {
    --planner-bar-bg: #f8fafc;
    --planner-bar-border: #cbd5e1;
    --planner-bar-accent: #64748b;
    --planner-bar-title: #334155;
    --planner-bar-text: #475569;
}

.occupancy-planner-bar:hover,
.occupancy-planner-bar:focus-visible {
    transform: translateY(-1px);
    text-decoration: none;
}

.occupancy-planner-empty {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.4rem;
    color: #475569;
}

.occupancy-planner-empty i {
    font-size: 1.5rem;
    color: #64748b;
}

.availability-matrix-legend {
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
}

.availability-matrix-dot {
    display: inline-block;
    width: 0.62rem;
    height: 0.62rem;
    margin-right: 0.3rem;
    border-radius: 999px;
    vertical-align: middle;
}

.availability-matrix-dot.is-open {
    background: #22c55e;
}

.availability-matrix-dot.is-low {
    background: #f59e0b;
}

.availability-matrix-dot.is-full {
    background: #ef4444;
}

.availability-matrix-wrap {
    width: 100%;
    max-width: 100%;
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #ffffff;
}

.availability-matrix-table {
    display: table;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    table-layout: fixed !important;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.68rem;
}

.availability-matrix-wrap.is-fit-range {
    overflow-x: hidden;
}

.availability-matrix-table.is-fit-range {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
}

.availability-matrix-room-col {
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
}

.availability-matrix-date-col {
    width: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
}

.availability-matrix-table th,
.availability-matrix-table td {
    border-right: 1px solid rgba(148, 163, 184, 0.28);
    border-bottom: 1px solid rgba(148, 163, 184, 0.28);
    text-align: center;
}

.availability-matrix-table thead th {
    background: #f8fafc;
    color: var(--color-text-primary);
    font-weight: 700;
}

.availability-matrix-month-row th {
    padding: 0.24rem 0.26rem;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.availability-matrix-date-row th {
    width: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    padding: 0.12rem 0.08rem;
    white-space: nowrap;
}

.availability-matrix-date-row th span,
.availability-matrix-date-row th strong {
    display: block;
    line-height: 1.15;
}

.availability-matrix-date-row th span {
    color: var(--color-text-secondary);
    font-size: 0.48rem;
}

.availability-matrix-date-row th strong {
    margin-top: 0.04rem;
    font-size: 0.62rem;
}

.availability-matrix-sticky {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    background: #f8fafc;
    text-align: left !important;
}

.availability-matrix-corner {
    z-index: 3;
}

.availability-matrix-room {
    padding: 0.24rem 0.32rem;
    background: #ffffff;
}

.availability-matrix-room strong,
.availability-matrix-room span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    overflow-wrap: anywhere;
}

.availability-matrix-room strong {
    color: var(--color-text-primary);
    font-family: var(--font-mono);
    font-size: 0.64rem;
}

.availability-matrix-room span {
    margin-top: 0.04rem;
    color: var(--color-text-secondary);
    font-size: 0.54rem;
    line-height: 1.2;
}

.availability-matrix-cell {
    position: relative;
    width: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    height: 20px;
    padding: 0;
    font-weight: 800;
    font-size: 0.62rem;
}

.availability-matrix-table th.availability-matrix-corner,
.availability-matrix-table th.availability-matrix-sticky,
.availability-matrix-table th.availability-matrix-room {
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
}

.availability-matrix-table .availability-matrix-date-row th:not(.availability-matrix-sticky),
.availability-matrix-table tbody td.availability-matrix-cell {
    width: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
}

.availability-matrix-cell a,
.availability-matrix-cell span {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: inherit;
    text-decoration: none;
}

.availability-matrix-cell a {
    position: absolute;
    inset: 0;
    flex-direction: column;
    gap: 0;
    line-height: 1;
    cursor: pointer;
}

.availability-matrix-cell strong {
    display: block;
    line-height: 1;
    font-size: 0.68rem;
}

.availability-matrix-cell a strong {
    font-size: 0.72rem;
}

.availability-matrix-cell.is-open {
    color: #166534;
    background: #dcfce7;
}

.availability-matrix-cell.is-low {
    color: #854d0e;
    background: #fef3c7;
}

.availability-matrix-cell.is-full {
    color: #991b1b;
    background: #fee2e2;
}

.availability-matrix-cell.is-empty {
    color: var(--color-text-secondary);
    background: #f1f5f9;
}

.availability-matrix-cell.is-open a:hover,
.availability-matrix-cell.is-low a:hover {
    color: #ffffff;
    background: #0e7490;
}

.availability-matrix-empty {
    padding: 1.25rem;
    color: var(--color-text-secondary);
    background: #ffffff;
}

.availability-matrix-status {
    margin-top: 0.9rem;
}

.inventory-control-header .card-body {
    padding: 1.35rem 1.5rem;
}

.inventory-control-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
}

.inventory-control-stats span {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    min-height: 2rem;
    padding: 0.32rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text-secondary);
    background: rgba(14, 116, 144, 0.06);
    font-size: 0.78rem;
    font-weight: 700;
}

.inventory-control-stats strong {
    color: var(--color-text-primary);
}

.inventory-matrix-wrap {
    width: 100%;
    max-width: 100%;
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #ffffff;
}

.inventory-matrix-wrap.is-fit-range {
    overflow-x: hidden;
}

.inventory-matrix-table {
    display: table;
    width: max-content;
    min-width: max-content;
    max-width: none;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.68rem;
}

.inventory-matrix-table.is-fit-range {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    table-layout: fixed;
}

.inventory-matrix-table th,
.inventory-matrix-table td {
    border-right: 1px solid rgba(148, 163, 184, 0.28);
    border-bottom: 1px solid rgba(148, 163, 184, 0.28);
    text-align: center;
}

.inventory-matrix-table thead th {
    background: #f8fafc;
    color: var(--color-text-primary);
    font-weight: 700;
}

.inventory-matrix-table .availability-matrix-date-row th {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    padding: 0.18rem 0.08rem;
    white-space: nowrap;
}

.inventory-matrix-table .availability-matrix-date-row th span,
.inventory-matrix-table .availability-matrix-date-row th strong {
    display: block;
    line-height: 1.1;
}

.inventory-matrix-table .availability-matrix-date-row th span {
    color: var(--color-text-secondary);
    font-size: 0.48rem;
}

.inventory-matrix-table .availability-matrix-date-row th strong {
    margin-top: 0.04rem;
    font-size: 0.62rem;
}

.inventory-matrix-table .availability-matrix-sticky {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    background: #f8fafc;
    text-align: left !important;
    box-shadow: 1px 0 0 rgba(148, 163, 184, 0.24);
}

.inventory-matrix-table .availability-matrix-corner {
    z-index: 3;
}

.inventory-matrix-table .availability-matrix-room {
    padding: 0.26rem 0.34rem;
    background: #ffffff;
}

.inventory-matrix-input-cell {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 40px;
    padding: 0.08rem;
    background: #f8fafc;
}

.inventory-matrix-input-cell.is-open {
    background: #dff7ea;
}

.inventory-matrix-input-cell.is-low {
    background: #fff1c7;
}

.inventory-matrix-input-cell.is-full {
    background: #fde2e2;
}

.inventory-matrix-input-cell input[type="number"] {
    width: 100%;
    min-width: 0;
    min-height: 100%;
    padding: 0.38rem 0.1rem 0.08rem;
    border: 1px solid rgba(148, 163, 184, 0.34);
    border-radius: 6px;
    color: var(--color-text-primary);
    background: #ffffff;
    font-size: 0.8rem;
    font-weight: 800;
    text-align: center;
}

.inventory-matrix-input-cell.is-open input[type="number"] {
    background: #f4fff8;
    border-color: rgba(34, 197, 94, 0.28);
}

.inventory-matrix-input-cell.is-low input[type="number"] {
    background: #fffaf0;
    border-color: rgba(245, 158, 11, 0.3);
}

.inventory-matrix-input-cell.is-full input[type="number"] {
    background: #fff7f7;
    border-color: rgba(239, 68, 68, 0.3);
}

.inventory-matrix-input-cell input[type="number"]:focus {
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 0.16rem rgba(14, 116, 144, 0.14);
    outline: 0;
}

.inventory-editor-bar {
    display: grid;
    grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
    gap: 0.9rem 1rem;
    align-items: start;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    background: linear-gradient(180deg, #fbfdff 0%, #f8fbff 100%);
}

.inventory-editor-summary {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.inventory-editor-kicker {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.inventory-editor-title-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.inventory-editor-title-row strong {
    font-size: 0.92rem;
    line-height: 1.1;
    color: var(--color-text-primary);
}

.inventory-editor-summary small {
    display: block;
    line-height: 1.3;
}

.inventory-row-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 88px;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.inventory-row-status.is-open {
    color: #166534;
    background: #dcfce7;
}

.inventory-row-status.is-low {
    color: #854d0e;
    background: #fef3c7;
}

.inventory-row-status.is-full {
    color: #991b1b;
    background: #fee2e2;
}

.inventory-editor-summary-note {
    color: var(--color-text-secondary) !important;
    font-size: 0.8rem;
}

.inventory-editor-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "reason reason"
        "bulk save";
    gap: 0.75rem 0.9rem;
    align-items: end;
    justify-content: stretch;
    min-width: 0;
}

.inventory-bulk-actions {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
    grid-area: bulk;
}

.inventory-select-label {
    display: inline-flex;
    align-items: center;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.inventory-bulk-controls {
    display: grid;
    grid-template-columns: minmax(96px, 110px) repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
    align-items: center;
}

.inventory-bulk-controls .btn {
    white-space: nowrap;
    min-width: 0;
}

.inventory-editor-reason {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
    grid-area: reason;
}

.inventory-editor-reason span {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.inventory-editor-reason .form-control {
    min-height: 2.4rem;
}

.inventory-editor-actions .btn {
    min-width: 128px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

#inventoryEditorSave {
    grid-area: save;
    align-self: end;
    justify-self: end;
}

.inventory-matrix-row {
    cursor: pointer;
}

.inventory-matrix-row.is-selected > th,
.inventory-matrix-row.is-selected > td {
    box-shadow: inset 0 1px 0 rgba(14, 116, 144, 0.14), inset 0 -1px 0 rgba(14, 116, 144, 0.14);
}

.inventory-matrix-row.is-selected > th.availability-matrix-room {
    background: #eef8ff;
}

.inventory-matrix-input-cell.is-cell-selected {
    box-shadow: inset 0 0 0 1.5px rgba(14, 116, 144, 0.55);
}

.inventory-row-check,
.inventory-cell-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.inventory-row-check {
    margin-bottom: 0.16rem;
}

.inventory-cell-check {
    position: absolute;
    top: 0.14rem;
    left: 0.14rem;
    z-index: 2;
    opacity: 0.78;
}

.inventory-row-check input,
.inventory-cell-check input {
    width: 0.78rem;
    height: 0.78rem;
    margin: 0;
    accent-color: #0e7490;
}

.inventory-matrix-input-cell {
    position: relative;
}

.inventory-row-check:hover,
.inventory-cell-check:hover {
    opacity: 1;
}

.inventory-room-inline-status {
    display: block;
    margin-top: 0.28rem;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

.inventory-matrix-table .availability-matrix-room strong,
.inventory-matrix-table .availability-matrix-room span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    overflow-wrap: anywhere;
}

.inventory-matrix-table .availability-matrix-room strong {
    color: var(--color-text-primary);
    font-family: var(--font-mono);
    font-size: 0.63rem;
}

.inventory-matrix-table .availability-matrix-room span:not(.inventory-room-inline-status) {
    margin-top: 0.08rem;
    color: var(--color-text-secondary);
    font-size: 0.52rem;
    line-height: 1.2;
}

.inventory-room-inline-status-is-open {
    color: #475569;
}

.inventory-room-inline-status-is-low {
    color: #854d0e;
}

.inventory-room-inline-status-is-full {
    color: #991b1b;
}

@media (max-width: 991px) {
    .inventory-editor-bar {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .inventory-editor-actions {
        grid-template-columns: 1fr;
        grid-template-areas:
            "reason"
            "bulk"
            "save";
        justify-content: stretch;
    }

    .inventory-bulk-actions {
        min-width: 0;
    }

    .inventory-bulk-controls {
        grid-template-columns: 1fr 1fr;
    }

    .inventory-bulk-controls .form-control,
    .inventory-bulk-controls .btn {
        width: 100%;
    }

    .inventory-editor-actions .btn {
        width: 100%;
    }
}

/* Inventory board refresh */
.inventory-board-hero .card-body {
    display: grid;
    gap: 1.25rem;
}

.inventory-board-hero-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.inventory-board-hero-divider {
    display: inline-block;
    margin: 0 0.45rem;
    color: var(--color-text-muted);
}

.inventory-board-view-chip,
.inventory-board-header-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 1rem;
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 14px;
    color: #1d4ed8;
    background: #f8fbff;
    font-size: 0.92rem;
    font-weight: 700;
}

.inventory-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.9rem;
}

.inventory-kpi-card {
    display: flex;
    align-items: center;
    gap: 0.95rem;
    min-width: 0;
    padding: 1.05rem 1rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 251, 255, 0.98) 100%);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}

.inventory-kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 999px;
    font-size: 1.5rem;
    flex: 0 0 auto;
}

.inventory-kpi-icon.is-range { color: #6d28d9; background: rgba(139, 92, 246, 0.1); }
.inventory-kpi-icon.is-types { color: #2563eb; background: rgba(59, 130, 246, 0.1); }
.inventory-kpi-icon.is-rooms { color: #16a34a; background: rgba(34, 197, 94, 0.1); }
.inventory-kpi-icon.is-occupancy { color: #ea580c; background: rgba(249, 115, 22, 0.1); }
.inventory-kpi-icon.is-alerts { color: #6d28d9; background: rgba(124, 58, 237, 0.1); }

.inventory-kpi-card > div {
    min-width: 0;
    display: grid;
    gap: 0.12rem;
}

.inventory-kpi-label {
    color: var(--color-text-secondary);
    font-size: 0.84rem;
    font-weight: 700;
}

.inventory-kpi-value {
    color: var(--color-text-primary);
    font-size: 1.5rem;
    line-height: 1.05;
}

.inventory-kpi-value-range {
    font-size: 1rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.inventory-kpi-card small {
    color: var(--color-text-secondary);
    font-size: 0.82rem;
}

.inventory-board-filter-card .card-body {
    padding: 1rem 1.15rem;
}

.inventory-board-shell .card-header {
    padding: 1rem 1.15rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.inventory-board-shell .card-header small {
    font-size: 0.9rem;
}

.inventory-matrix-month-row th:not(.inventory-matrix-summary-head):not(.availability-matrix-corner) {
    padding: 0;
    height: 0;
    border-bottom: 0;
    background: transparent;
    font-size: 0;
    line-height: 0;
}

.inventory-matrix-summary-head {
    min-width: 126px;
    width: 126px;
    padding: 0.82rem 0.7rem !important;
    text-align: left !important;
    background: #f8fafc !important;
    color: var(--color-text-primary) !important;
    vertical-align: bottom;
}

.inventory-matrix-summary-head span {
    display: block;
    margin-top: 0.18rem;
    color: var(--color-text-secondary);
    font-size: 0.7rem;
    font-weight: 600;
}

.inventory-matrix-table .availability-matrix-room {
    padding: 0.44rem 0.5rem;
    vertical-align: top;
}

.inventory-matrix-table .availability-matrix-room strong {
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.1;
}

.inventory-matrix-table .availability-matrix-room span:not(.inventory-room-inline-status) {
    margin-top: 0;
    color: var(--color-text-secondary);
    font-size: 0.68rem;
    line-height: 1.2;
}

.inventory-matrix-table .availability-matrix-date-row th {
    padding-top: 0.65rem;
    padding-bottom: 0.5rem;
    font-size: 0.74rem;
    line-height: 1.15;
}

.inventory-matrix-table .availability-matrix-date-row th strong {
    font-size: 1rem;
}

.inventory-room-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.35rem;
    align-items: start;
}

.inventory-room-card-body {
    min-width: 0;
    display: grid;
    gap: 0.14rem;
}

.inventory-room-inline-status {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    gap: 0.34rem;
    margin-top: 0.14rem;
    padding: 0.16rem 0.5rem;
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 800;
    border: 1px solid transparent;
}

.inventory-room-inline-status::before {
    content: "";
    width: 0.32rem;
    height: 0.32rem;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.9;
}

.inventory-room-inline-status-is-open {
    color: #166534;
    background: #dcfce7;
    border-color: rgba(34, 197, 94, 0.22);
}

.inventory-room-inline-status-is-low {
    color: #854d0e;
    background: #fef3c7;
    border-color: rgba(245, 158, 11, 0.24);
}

.inventory-room-inline-status-is-full {
    color: #991b1b;
    background: #fee2e2;
    border-color: rgba(239, 68, 68, 0.24);
}

.inventory-room-total {
    display: block;
    margin-top: 0.08rem;
    color: var(--color-text-secondary);
    font-size: 0.64rem;
    font-weight: 700;
}

.inventory-matrix-input-cell {
    height: 48px;
    padding: 0.18rem 0.18rem 0.18rem;
    vertical-align: middle;
}

.inventory-matrix-input-cell input[type="number"] {
    min-height: 1.85rem;
    margin-top: 0.52rem;
    padding: 0.02rem 0.12rem 0;
    border-radius: 10px;
    font-size: 0.76rem;
    font-weight: 700;
    text-align: center;
    box-shadow: none;
}

.inventory-editor-bar {
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    gap: 1rem 1.1rem;
    padding: 1.15rem 1.15rem;
}

.inventory-editor-title-row strong {
    font-size: 1.85rem;
}

.inventory-bulk-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
}

.inventory-bulk-controls > .form-control {
    flex: 0 0 140px;
}

.inventory-bulk-controls > .btn {
    flex: 0 1 auto;
}

.inventory-save-btn {
    min-height: 3rem;
    padding-inline: 1.2rem;
    border-radius: 12px;
    font-weight: 800;
}

.inventory-row-check {
    margin-bottom: 0;
    padding-top: 0.08rem;
}

.inventory-cell-check {
    top: 0.12rem;
    left: 0.12rem;
}

.inventory-matrix-summary-cell {
    min-width: 126px;
    width: 126px;
    padding: 0.42rem 0.48rem !important;
    text-align: left !important;
    background: #fbfdff;
    vertical-align: top;
}

.inventory-summary-stat + .inventory-summary-stat {
    margin-top: 0.32rem;
    padding-top: 0.3rem;
    border-top: 1px solid rgba(203, 213, 225, 0.7);
}

.inventory-matrix-summary-cell span {
    display: block;
    color: var(--color-text-secondary);
    font-size: 0.58rem;
    font-weight: 600;
}

.inventory-matrix-summary-cell strong {
    display: block;
    margin: 0.04rem 0 0.18rem;
    color: var(--color-text-primary);
    font-size: 0.8rem;
    line-height: 1;
}

.inventory-matrix-input-cell.is-open {
    background: rgba(240, 253, 244, 0.92) !important;
}

.inventory-matrix-input-cell.is-low {
    background: rgba(255, 251, 235, 0.94) !important;
}

.inventory-matrix-input-cell.is-full {
    background: rgba(254, 242, 242, 0.95) !important;
}

.inventory-matrix-input-cell.is-open {
    box-shadow: inset 0 2px 0 #22c55e;
}

.inventory-matrix-input-cell.is-low {
    box-shadow: inset 0 2px 0 #f59e0b;
}

.inventory-matrix-input-cell.is-full {
    box-shadow: inset 0 2px 0 #ef4444;
}

.inventory-matrix-input-cell.is-open input[type="number"] {
    background: #ffffff;
    border-color: rgba(34, 197, 94, 0.34);
}

.inventory-matrix-input-cell.is-low input[type="number"] {
    background: #fffcf5;
    border-color: rgba(245, 158, 11, 0.38);
}

.inventory-matrix-input-cell.is-full input[type="number"] {
    background: #fff7f7;
    border-color: rgba(239, 68, 68, 0.36);
}

.inventory-matrix-input-cell.is-cell-selected {
    box-shadow: inset 0 0 0 2px rgba(99, 102, 241, 0.45);
}

.inventory-board-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.15rem 1.4rem;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.84) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.inventory-board-footer-note {
    display: grid;
    gap: 0.65rem;
    max-width: 680px;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.inventory-legend-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.inventory-legend-list span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--color-text-secondary);
    font-size: 0.88rem;
    font-weight: 700;
}

.inventory-legend-dot-high { background: #22c55e !important; }
.inventory-legend-dot-low { background: #f59e0b !important; }
.inventory-legend-dot-full { background: #ef4444 !important; }

.inventory-board-footer-actions {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-left: auto;
}

.inventory-change-metrics {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    padding-right: 0.5rem;
}

.inventory-change-metrics span {
    display: grid;
    gap: 0.2rem;
    min-width: 112px;
    text-align: center;
}

.inventory-change-metrics small {
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
}

.inventory-change-metrics strong {
    color: var(--color-text-primary);
    font-size: 1.35rem;
    line-height: 1;
}

@media (max-width: 991px) {
    .inventory-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .inventory-board-hero-head,
    .inventory-board-footer,
    .inventory-board-footer-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .inventory-change-metrics {
        width: 100%;
        justify-content: space-between;
        padding-right: 0;
    }

    .inventory-bulk-controls {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .inventory-bulk-controls > .form-control,
    .inventory-bulk-controls > .btn {
        width: 100%;
        flex: initial;
    }
}

@media (max-width: 767px) {
    .inventory-kpi-grid {
        grid-template-columns: 1fr;
    }
}

.availability-status-low .availability-status-dot {
    background: #f59e0b;
}

.availability-calendar-shell {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: #ffffff;
    padding: 0;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.availability-validation-result {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #f8fafc;
    padding: 8px 10px;
}

html {
    scroll-behavior: smooth;
}

.availability-calendar-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 0.95rem 1rem;
    border-bottom: 1px solid var(--color-border);
}

.availability-calendar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.availability-calendar-shell .calendar-grid-wrap {
    overflow-x: visible;
}

.availability-calendar-shell .calendar-grid-header,
.availability-calendar-shell .calendar-grid-body {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.availability-calendar-grid-body .calendar-day {
    min-height: 132px;
}

.availability-calendar-grid-body .availability-calendar-day {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.7rem;
    overflow: hidden;
}

.availability-calendar-day-link {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    padding: 0.7rem;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.availability-calendar-day-link:hover {
    text-decoration: none;
}

.availability-calendar-day .calendar-day-head {
    flex: 0 0 auto;
    gap: 0.35rem;
    min-height: 1.6rem;
    margin-bottom: 0;
}

.availability-calendar-day .calendar-day-head .badge {
    max-width: 78px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.availability-calendar-state {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin-top: auto;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    align-self: flex-start;
    gap: 0.28rem;
    text-align: left;
}

.availability-calendar-state strong {
    font-size: 0.98rem;
    line-height: 1;
}

.availability-calendar-state span {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.availability-calendar-state.is-open {
    background: #dcfce7;
    color: #166534;
}

.availability-calendar-state.is-low {
    background: transparent;
    color: #92400e;
}

.availability-calendar-day-link.is-open:hover .availability-calendar-state,
.availability-calendar-day-link.is-low:hover .availability-calendar-state {
    filter: brightness(0.98);
}

.availability-calendar-state.is-full {
    background: #fee2e2;
    color: #991b1b;
}

.availability-calendar-state.is-empty {
    background: #e2e8f0;
    color: #475569;
}

.calendar-day.availability-calendar-day-available {
    background: #dcfce7;
    border-color: #86efac;
}

.calendar-day.availability-calendar-day-low {
    background: #fef3c7;
    border-color: #fcd34d;
}

.calendar-day.availability-calendar-day-blocked {
    background: #fff1f2;
    border-color: #fca5a5;
}

.calendar-day.availability-calendar-day-past,
.calendar-day.availability-calendar-day-empty {
    background: #f8fafc;
}

.availability-current-month {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-primary-dark);
}

.availability-month-nav {
    gap: 0.45rem;
}

.availability-month-nav.btn-group > .btn {
    border-radius: 999px !important;
}

.availability-month-nav-btn {
    border: 0;
    min-height: 36px;
    background: transparent;
    color: #155e75;
    font-weight: 700;
    box-shadow: none;
    transition: background-color 0.14s ease, color 0.14s ease, transform 0.14s ease;
}

.availability-month-nav-icon {
    width: 36px;
    padding-left: 0;
    padding-right: 0;
}

.availability-month-nav-current {
    min-width: 116px;
    padding-left: 0.95rem;
    padding-right: 0.95rem;
    background: rgba(14, 116, 144, 0.08);
    color: #0f4f5f;
}

.availability-month-nav-btn:hover,
.availability-month-nav-btn:focus-visible {
    background: rgba(14, 116, 144, 0.12);
    color: #0f4f5f;
    transform: translateY(-1px);
}

.availability-month-nav-btn:disabled {
    background: rgba(148, 163, 184, 0.08);
    color: var(--color-text-secondary);
    transform: none;
}

@media (max-width: 1199.98px) {
    .availability-filter-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .availability-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px), (max-height: 500px) and (orientation: landscape) {
    .availability-filter-toolbar {
        grid-template-columns: 1fr;
    }

    .availability-filter-actions,
    .availability-calendar-actions {
        width: 100%;
    }

    .availability-filter-actions .btn,
    .availability-calendar-actions > .btn,
    .availability-calendar-actions .btn-group {
        flex: 1 1 auto;
    }
}

.availability-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 1rem;
}

.availability-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: #ffffff;
    font-size: 0.88rem;
    color: var(--color-text-secondary);
}

.availability-status-chip strong {
    color: var(--color-text-primary);
}

.availability-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
}

.availability-status-available .availability-status-dot {
    background: var(--color-success);
}

.availability-status-blocked .availability-status-dot {
    background: var(--color-accent);
}

.availability-legend-card {
    margin: 1rem;
    padding: 0.95rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(14, 116, 144, 0.12);
    background: #f8fbff;
}

.availability-legend-title {
    margin-bottom: 0.65rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.availability-legend-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
    margin-bottom: 0.75rem;
}

.availability-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--color-text-secondary);
}

.availability-legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 4px;
}

.availability-legend-swatch-available {
    background: linear-gradient(180deg, #10b981 0%, #059669 100%);
}

.availability-legend-swatch-blocked {
    background: linear-gradient(180deg, #fb7185 0%, #e11d48 100%);
}

.availability-weekday-row,
.availability-day-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.35rem;
}

.availability-weekday-row {
    margin-bottom: 0.45rem;
}

.availability-weekday-cell {
    text-align: center;
    padding: 0.35rem 0.2rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.availability-day-cell {
    min-height: 112px;
}

.availability-day-cell-today .availability-day-card {
    outline: 3px solid rgba(14, 116, 144, 0.28);
    outline-offset: 2px;
}

.availability-day-card {
    height: 100%;
    border-radius: var(--radius-md);
    padding: 0.8rem 0.65rem;
    text-align: center;
    border: 1px solid transparent;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.availability-calendar-day-content {
    display: grid;
    gap: 0.25rem;
    margin-top: 0.5rem;
    text-align: left;
}

.availability-calendar-day .availability-calendar-day-content.availability-day-card {
    flex: 1 1 auto;
    align-content: start;
    width: 100%;
    min-height: 64px;
    height: auto;
    margin-top: 0;
    padding: 0.7rem 0.65rem;
    overflow: hidden;
    box-sizing: border-box;
}

.availability-calendar-day .calendar-event-name,
.availability-calendar-day .availability-day-meta {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.availability-calendar-day-content[data-booking-url] {
    cursor: pointer;
}

.availability-calendar-day:has([data-booking-url]) {
    cursor: pointer;
}

.availability-day-card-empty {
    color: #64748b;
}

.availability-day-card-available {
    color: #166534;
}

.availability-day-card-blocked {
    color: #7f1d1d;
}

.availability-day-card-past {
    color: #475569;
}

.availability-day-label {
    font-weight: 700;
    letter-spacing: 0.01em;
}

.availability-day-status {
    margin-top: 0.45rem;
    font-size: 0.88rem;
    font-weight: 800;
}

.availability-day-meta {
    display: block;
    font-size: 0.82rem;
    opacity: 0.92;
}

.availability-book-btn {
    min-width: 78px;
    font-weight: 700;
    color: var(--color-primary-dark);
}

.availability-empty-state {
    padding: 1rem;
    border: 1px dashed rgba(148, 163, 184, 0.5);
    border-radius: var(--radius-md);
    background: #f8fafc;
    text-align: center;
}

/* Audit logs page */
.audit-stat-card,
.audit-filter-card,
.audit-table-card {
    border-radius: var(--radius-lg);
}

.audit-stat-icon {
    font-size: 2rem;
    color: var(--color-primary);
    opacity: 0.95;
}

.audit-filter-form .form-control,
.audit-filter-form .form-select,
.audit-filter-form .btn {
    min-height: 38px;
}

.audit-table .badge {
    white-space: normal;
}

.audit-details summary {
    cursor: pointer;
}

.audit-pre {
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: #f8fafc;
    border: 1px solid var(--color-border);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    max-height: 220px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.audit-change-block {
    min-width: 0;
}

@media (max-width: 1199px) {
    .availability-page-header,
    .availability-overview-grid {
        grid-template-columns: 1fr;
    }

    .availability-filter-form {
        align-items: stretch;
    }
}

.reservation-filter-btn {
    white-space: nowrap;
}

.reservation-create-btn {
    justify-self: end;
    font-weight: 600;
}

@media (max-width: 991px) {
    .app-shell {
        --dashboard-sidebar-width: 0px;
        --dashboard-topbar-height: 80px;
    }

    .reservation-filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reservation-create-btn {
        justify-self: stretch;
        width: 100%;
    }

    .reservation-confirmation-grid,
    .reservation-amenities-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reservation-form-drawer {
        padding: 0.75rem;
    }

    .reservation-form-drawer .modal-dialog.reservation-form-dialog {
        left: 50%;
        top: 50%;
        width: min(100%, calc(100vw - 1.5rem)) !important;
        max-width: min(100%, calc(100vw - 1.5rem)) !important;
        height: min(100vh - 1.5rem, 860px);
    }
}

@media (max-width: 576px) {
    .reservation-filter-form {
        grid-template-columns: 1fr;
    }

    .availability-calendar-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .availability-legend-grid {
        grid-template-columns: 1fr;
    }

    .availability-day-cell {
        min-height: 92px;
    }

    .availability-day-card {
        padding: 0.65rem 0.35rem;
    }

    .availability-day-label,
    .availability-day-meta {
        font-size: 0.72rem;
    }

    .reservation-confirmation-grid,
    .reservation-amenities-grid,
    .reservation-occupancy-stats {
        grid-template-columns: 1fr;
    }

    .reservation-stepper-node {
        flex-basis: clamp(48px, 17vw, 86px);
    }

    .reservation-stepper-connector {
        margin-left: -30px;
        margin-right: -30px;
    }

    .reservation-form-drawer .modal-header,
    .reservation-form-drawer .modal-body {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (max-width: 767.98px), (max-height: 500px) and (orientation: landscape) {
    .app-shell {
        --dashboard-topbar-height: 74px;
    }
}

.app-shell.sidebar-hidden .sidebar {
    height: 100vh !important;
    min-height: 100vh !important;
    top: 0 !important;
    bottom: 0 !important;
}

/* Utility */
.h1,
h1 {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 700;
}

.h2,
h2 {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 400;
}

.h3,
h3,
.h4,
h4,
.h5,
h5 {
    font-family: var(--font-body);
    font-weight: 600;
}

.small,
small,
.text-muted {
    color: var(--color-text-muted) !important;
}

.sidebar-toggle,
.sidebar-close,
.sidebar-collapse {
    border-radius: var(--radius-md);
}

.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    z-index: 1029;
}

.app-shell.sidebar-open .sidebar-overlay {
    opacity: 1;
    visibility: visible;
    backdrop-filter: blur(2px);
    background: rgba(15, 23, 42, 0.18);
}

/* Hide overlay on large screens */
@media (min-width: 1280px) {
    .sidebar-overlay {
        display: none !important;
    }
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1279.98px) {
    .topbar-search {
        min-width: 200px;
    }

    .topbar-notification-menu {
        min-width: 300px;
    }

    .sidebar {
        position: fixed;
        left: -240px;
        top: 0;
        bottom: 0;
        transition: left 0.2s ease;
        box-shadow: var(--shadow-lg);
    }

    .app-shell.sidebar-open .sidebar {
        left: 0;
        width: 260px;
        height: 100vh;
        max-height: 100vh;
        min-height: 100vh;
        flex-direction: column;
        overflow: hidden;
        z-index: 1060;
    }

    .app-shell.sidebar-open .sidebar-nav {
        flex-direction: column;
        overflow-y: auto;
    }

    .topbar-custom {
        min-height: 58px;
        padding: 9px 0.8rem;
        flex-wrap: nowrap;
    }

    .topbar-main {
        min-width: 0;
    }

    .topbar-title-wrap {
        padding-left: 10px;
        flex: 1 1 auto;
        min-width: 0;
    }

    .topbar-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .topbar-text,
    .topbar-clock-panel {
        display: none !important;
    }

    .topbar-actions {
        width: auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.5rem;
        flex: 0 0 auto;
    }

    .topbar-notification-wrap {
        display: inline-flex;
    }

    .topbar-action-group {
        padding: 0;
        gap: 0;
        margin-left: 0;
    }

    .topbar-profile-time-group {
        width: auto;
        justify-content: flex-end;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
    }

    .topbar-profile-menu-wrap {
        display: inline-flex;
    }

    .content-area {
        padding: var(--space-lg);
    }

.app-footer {
    padding: var(--space-md) 0 var(--space-md);
}
}

@media (min-width: 768px) and (max-width: 1279.98px) {
    .app-shell.sidebar-hidden .sidebar {
        left: -260px !important;
        width: 260px;
        height: 100vh;
        max-height: 100vh;
        min-height: 100vh;
    }

    .app-shell.sidebar-hidden.sidebar-open .sidebar,
    .app-shell.sidebar-open .sidebar {
        left: 0 !important;
        box-shadow: none;
    }

    .app-shell .main-panel {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        transition: margin-left 0.28s ease, width 0.28s ease;
    }

    .app-shell.sidebar-hidden.sidebar-open .main-panel,
    .app-shell.sidebar-open .main-panel {
        width: calc(100% - 260px) !important;
        max-width: calc(100% - 260px) !important;
        margin-left: 260px !important;
    }

    .app-shell .sidebar-overlay,
    .app-shell.sidebar-open .sidebar-overlay,
    .app-shell.sidebar-hidden.sidebar-open .sidebar-overlay {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        backdrop-filter: none !important;
        background: transparent !important;
    }

    .app-shell.sidebar-hidden.sidebar-open .sidebar-float-toggle,
    .app-shell.sidebar-open .sidebar-float-toggle {
        display: none !important;
    }

    .app-shell.sidebar-open .sidebar-mobile-close {
        display: inline-flex !important;
    }
}

@media (max-width: 767.98px) {
    html,
    body,
    .app-shell,
    .main-panel,
    .content-area,
    .mobile-topbar,
    .mobile-bottom-nav,
    .topbar-custom,
    .sidebar {
        border-radius: 0 !important;
    }

    html,
    body {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

    body.dashboard-page {
        background: #ffffff;
    }

    .app-shell,
    .main-panel {
        width: 100vw !important;
        max-width: 100vw !important;
        min-height: 100dvh;
    }

    .app-shell .sidebar,
    .app-shell:not(.sidebar-hidden) .sidebar,
    .app-shell.sidebar-hidden .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: -100vw !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        height: 100vh;
        max-height: 100vh;
        min-height: 100vh;
        flex: none;
        z-index: 1060;
        border-right: 0;
        box-shadow: none;
    }

    .app-shell.sidebar-open .sidebar,
    .app-shell:not(.sidebar-hidden).sidebar-open .sidebar,
    .app-shell.sidebar-hidden.sidebar-open .sidebar {
        left: 0 !important;
    }

    .app-shell .main-panel,
    .app-shell:not(.sidebar-hidden) .main-panel,
    .app-shell.sidebar-hidden .main-panel,
    .app-shell .content-area,
    .app-shell.sidebar-hidden .content-area {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }

    .mobile-topbar {
        display: block;
        margin: 0;
        width: 100%;
    }

    .mobile-bottom-nav {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        margin: 0;
        width: 100%;
    }

    .topbar-custom {
        display: none;
    }

    .sidebar-mobile-close {
        display: inline-flex;
    }

    .sidebar-brand {
        padding: 1rem 1rem 0.85rem;
        min-height: auto;
    }

    .sidebar-brand::after {
        top: auto;
        bottom: 0;
    }

    .sidebar-title {
        font-size: 1.02rem;
    }

    .sidebar-subtitle {
        margin-top: 0.35rem;
        font-size: 0.68rem;
    }

    .sidebar-nav {
        padding: 0.9rem 0.95rem 1rem;
        gap: 0.26rem;
    }

    .sidebar-section-label {
        margin: 0.85rem 0.35rem 0.35rem;
    }

    .sidebar-link {
        min-height: 44px;
        padding: 0.72rem 0.9rem;
        font-size: 0.98rem;
        border-radius: 14px;
    }

    .sidebar-link i {
        width: 20px;
        font-size: 1rem;
    }

    .sidebar-footer {
        display: none;
    }

    .mobile-sidebar-inline-action {
        min-height: 44px;
    }

    .sidebar-nav .mobile-sidebar-inline-action {
        display: inline-flex;
    }

    .mobile-sidebar-inline-action.is-logout {
        margin-top: 0.2rem;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding-top: 0.95rem;
    }

    .mobile-sidebar-inline-meta {
        display: flex;
        margin-top: 0.2rem;
        padding-top: 0.85rem;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        min-height: 40px;
    }

    .main-panel {
        width: 100%;
        max-width: 100%;
        margin-left: 0 !important;
    }

    .topbar-title-wrap {
        padding-left: 8px;
    }

    .topbar-title {
        font-size: 0.98rem;
    }

    .topbar-search {
        flex: 1;
        min-width: 0;
    }

    .topbar-profile-name,
    .topbar-profile-role {
        display: none;
    }

    .topbar-avatar-large {
        width: 46px;
        height: 46px;
        font-size: 0.9rem;
    }

    .topbar-clock-time {
        font-size: 1.35rem;
    }

    .topbar-clock-date,
    .topbar-clock-meta {
        font-size: 0.68rem;
    }

    .topbar-menu-panel,
    .topbar-notification-menu {
        min-width: min(100vw - 2rem, 340px);
    }

    .content-area {
        padding: var(--space-md);
        padding-bottom: calc(var(--space-md) + 84px);
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    .app-footer {
        display: none;
    }

    .app-footer-copy {
        gap: 0.3rem;
        font-size: 0.78rem;
    }

    .app-footer-separator {
        display: none;
    }
}

@media (min-width: 769px) and (max-width: 1199px) {
    .topbar-avatar-large {
        width: 44px;
        height: 44px;
        font-size: 0.9rem;
    }

    .content-area {
        padding: var(--space-lg);
    }

    .app-footer {
        padding: var(--space-md) 0 var(--space-md);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* Sidebar state-driven layout behavior */
.app-shell:not(.sidebar-hidden) .sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0 !important;
    flex: none;
    width: var(--dashboard-sidebar-collapsed-width);
    height: 100%;
    z-index: 1040;
    overflow: hidden;
    transition: width 0.24s ease, box-shadow 0.2s ease;
}

.app-shell:not(.sidebar-hidden) .main-panel {
    width: 100%;
    max-width: 100%;
    margin-left: var(--dashboard-sidebar-collapsed-width);
}

@media (min-width: 1280px) {
    .app-shell:not(.sidebar-hidden) .sidebar:hover,
    .app-shell:not(.sidebar-hidden) .sidebar:focus-within {
        width: var(--dashboard-sidebar-width);
    }

.app-shell:not(.sidebar-hidden) .sidebar:hover,
    .app-shell:not(.sidebar-hidden) .sidebar:focus-within {
        box-shadow: none;
    }

    .app-shell:not(.sidebar-hidden) .sidebar:not(:hover):not(:focus-within) .sidebar-nav {
        padding-top: 0.35rem;
        padding-bottom: 0.7rem;
        gap: 0.22rem;
    }

    .app-shell:not(.sidebar-hidden) .sidebar:not(:hover):not(:focus-within) .sidebar-brand,
    .app-shell:not(.sidebar-hidden) .sidebar:not(:hover):not(:focus-within) .sidebar-footer {
        padding-left: 0.7rem;
        padding-right: 0.7rem;
    }

    .app-shell:not(.sidebar-hidden) .sidebar:not(:hover):not(:focus-within) .sidebar-brand {
        min-height: 60px;
        padding-top: 0.35rem;
        padding-bottom: 0.2rem;
        padding-left: 0;
        padding-right: 0;
        display: grid;
        justify-items: center;
        align-content: start;
    }

    .app-shell:not(.sidebar-hidden) .sidebar:not(:hover):not(:focus-within) .sidebar-brand-row {
        width: 100%;
        display: block;
        text-align: center;
    }

    .app-shell:not(.sidebar-hidden) .sidebar:not(:hover):not(:focus-within) .sidebar-brand::after {
        top: 65px;
    }

    .app-shell:not(.sidebar-hidden) .sidebar:not(:hover):not(:focus-within) .sidebar-title,
    .app-shell:not(.sidebar-hidden) .sidebar:not(:hover):not(:focus-within) .sidebar-link,
    .app-shell:not(.sidebar-hidden) .sidebar:not(:hover):not(:focus-within) .user-box {
        justify-content: center;
    }

    .app-shell:not(.sidebar-hidden) .sidebar:not(:hover):not(:focus-within) .sidebar-title {
        gap: 0;
        width: 100%;
        display: inline-flex;
        justify-content: center;
        margin: 0 auto;
    }

    .app-shell:not(.sidebar-hidden) .sidebar:not(:hover):not(:focus-within) .sidebar-logo-frame {
        width: 36px;
        height: 36px;
        border-radius: 12px;
        margin: 0 auto;
    }

    .app-shell:not(.sidebar-hidden) .sidebar:not(:hover):not(:focus-within) .sidebar-title-text,
    .app-shell:not(.sidebar-hidden) .sidebar:not(:hover):not(:focus-within) .sidebar-subtitle-text,
    .app-shell:not(.sidebar-hidden) .sidebar:not(:hover):not(:focus-within) .sidebar-section-label,
    .app-shell:not(.sidebar-hidden) .sidebar:not(:hover):not(:focus-within) .sidebar-link-label,
    .app-shell:not(.sidebar-hidden) .sidebar:not(:hover):not(:focus-within) .sidebar-user-name-text,
    .app-shell:not(.sidebar-hidden) .sidebar:not(:hover):not(:focus-within) .sidebar-user-role-badge {
        opacity: 0;
        pointer-events: none;
    }

    .app-shell:not(.sidebar-hidden) .sidebar:not(:hover):not(:focus-within) .sidebar-subtitle,
    .app-shell:not(.sidebar-hidden) .sidebar:not(:hover):not(:focus-within) .sidebar-section-label,
    .app-shell:not(.sidebar-hidden) .sidebar:not(:hover):not(:focus-within) .sidebar-link-label,
    .app-shell:not(.sidebar-hidden) .sidebar:not(:hover):not(:focus-within) .user-name {
        width: 0;
        min-width: 0;
        overflow: hidden;
    }

    .app-shell:not(.sidebar-hidden) .sidebar:not(:hover):not(:focus-within) .sidebar-subtitle {
        display: none;
    }

    .app-shell:not(.sidebar-hidden) .sidebar:not(:hover):not(:focus-within) .sidebar-title-text {
        display: none;
    }

    .app-shell:not(.sidebar-hidden) .sidebar:not(:hover):not(:focus-within) .sidebar-link {
        gap: 0;
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }

    .app-shell:not(.sidebar-hidden) .sidebar:not(:hover):not(:focus-within) .sidebar-section-label {
        display: none;
        margin: 0;
    }

    .app-shell:not(.sidebar-hidden) .sidebar:not(:hover):not(:focus-within) .sidebar-link.ms-3 {
        margin-left: 0 !important;
    }

    .app-shell:not(.sidebar-hidden) .sidebar:not(:hover):not(:focus-within) .sidebar-link i {
        width: 100%;
        font-size: 1rem;
    }

    .app-shell:not(.sidebar-hidden) .sidebar:not(:hover):not(:focus-within) .sidebar-notification-badge {
        position: absolute;
        top: 0.28rem;
        right: 0.32rem;
        margin-left: 0;
    }

    .app-shell:not(.sidebar-hidden) .sidebar:not(:hover):not(:focus-within) .user-box {
        padding: 0.7rem 0.55rem;
    }

    .app-shell:not(.sidebar-hidden) .sidebar:not(:hover):not(:focus-within) .sidebar-footer {
        display: none;
    }

    .app-shell:not(.sidebar-hidden) .sidebar:not(:hover):not(:focus-within) .user-role {
        display: none;
    }
}

.app-shell:not(.sidebar-hidden) .sidebar-float-toggle,
.app-shell:not(.sidebar-hidden) .sidebar-overlay {
    display: none !important;
}

.app-shell.sidebar-hidden .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: -100% !important;
    flex: none;
    z-index: 1060;
}

.app-shell.sidebar-hidden.sidebar-open .sidebar {
    left: 0 !important;
}

@media (max-width: 767.98px), (max-height: 500px) and (orientation: landscape) {
    .app-shell.sidebar-hidden .sidebar {
        left: -100vw;
        width: 100vw !important;
        max-width: 100vw;
        min-width: 100vw;
    }

    .app-shell.sidebar-hidden.sidebar-open .sidebar {
        left: 0;
    }
}

.app-shell.sidebar-hidden .main-panel,
.app-shell.sidebar-hidden .content-area {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
}

.app-shell.sidebar-hidden .sidebar-float-toggle {
    display: inline-flex !important;
}

.app-shell.sidebar-hidden .sidebar-overlay {
    display: block !important;
}

.app-shell.sidebar-hidden.sidebar-open .sidebar-overlay {
    opacity: 1;
    visibility: visible;
    backdrop-filter: blur(6px);
    background: rgba(0, 0, 0, 0.5);
}

@media (min-width: 1280px) {
    .app-shell .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: -240px !important;
        width: 240px;
        height: 100%;
        flex: none;
        z-index: 1060;
    }

    .app-shell.sidebar-open .sidebar {
        left: 0 !important;
        box-shadow: none;
    }

    .app-shell .main-panel {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        transition: margin-left 0.28s ease, width 0.28s ease;
    }

    .app-shell.sidebar-open .main-panel {
        width: calc(100% - 240px) !important;
        max-width: calc(100% - 240px) !important;
        margin-left: 240px !important;
    }

    .app-shell .content-area,
    .app-shell.sidebar-open .content-area {
        width: min(1360px, 100%) !important;
        max-width: none !important;
        margin: 0 auto !important;
    }

    .app-shell .sidebar-float-toggle {
        display: inline-flex !important;
    }

    .app-shell.sidebar-open .sidebar-float-toggle {
        display: none !important;
    }

    .app-shell.sidebar-open .sidebar-mobile-close {
        display: inline-flex !important;
    }

    .app-shell .sidebar-overlay {
        display: none !important;
    }

    .app-shell.sidebar-open .sidebar-overlay {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        backdrop-filter: none !important;
        background: transparent !important;
    }
}

.settings-account-hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid rgba(14, 116, 144, 0.12);
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.settings-sidebar-column {
    align-self: flex-start;
}

.settings-sidebar-card {
    height: auto;
    position: sticky;
    top: calc(var(--dashboard-topbar-height, 88px) + 1rem);
    overflow: hidden;
}

.settings-sidebar-profile {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 1rem 0.9rem;
    border-bottom: 1px solid var(--color-border);
}

.settings-sidebar-avatar {
    width: 44px;
    height: 44px;
    font-size: 0.84rem;
    flex: 0 0 auto;
}

.settings-sidebar-profile-copy {
    min-width: 0;
}

.settings-sidebar-profile-name {
    color: var(--color-text-primary);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-sidebar-profile-role {
    margin-top: 0.16rem;
    color: var(--color-text-muted);
    font-size: 0.82rem;
    line-height: 1.25;
}

.settings-sidebar-card .list-group {
    padding: 0.55rem;
}

.settings-nav-category {
    margin: 0.8rem 0.45rem 0.35rem;
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.settings-nav-category:first-child {
    margin-top: 0.15rem;
}

.settings-sidebar-card .list-group-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 38px;
    padding: 0.56rem 0.65rem;
    border: 0;
    border-radius: 7px;
    color: var(--color-text-secondary);
    background: transparent;
    font-family: var(--font-body);
    font-weight: 600;
}

.settings-sidebar-card .list-group-item i {
    width: 1rem;
    text-align: center;
    color: var(--color-text-muted);
}

.settings-sidebar-card .list-group-item:hover,
.settings-sidebar-card .list-group-item:focus {
    color: var(--color-text-primary);
    background: rgba(14, 116, 144, 0.08);
    transform: translateX(3px);
    box-shadow: inset 2px 0 0 rgba(14, 116, 144, 0.26);
}

.settings-sidebar-card .list-group-item:hover i,
.settings-sidebar-card .list-group-item:focus i {
    color: var(--role-accent-strong);
}

.settings-sidebar-card .list-group-item.active {
    color: var(--color-text-primary);
    background: color-mix(in srgb, var(--role-accent-soft) 74%, #ffffff 26%);
}

.settings-sidebar-card .list-group-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--role-accent);
}

.settings-sidebar-card .list-group-item.active i {
    color: var(--role-accent-strong);
}

.rates-workspace-sidebar-card {
    overflow: hidden;
}

.rates-nav-category {
    padding: 0.55rem 1.15rem 0.45rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    font-family: var(--font-body);
}

.rate-preview-card {
    border: 1px solid rgba(14, 116, 144, 0.1);
}

.rate-preview-breakdown {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
}

.rate-preview-header,
.rate-preview-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.15rem;
}

.rate-preview-header {
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(248, 250, 252, 0.7);
}

.rate-preview-row + .rate-preview-row {
    border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.rate-preview-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text-primary);
    font-family: var(--font-heading);
}

.rate-preview-meta {
    margin-top: 0.2rem;
    font-size: 0.86rem;
    color: var(--color-text-secondary);
}

.rate-preview-step {
    font-weight: 700;
    color: var(--color-text-primary);
}

.rate-preview-note {
    margin-top: 0.15rem;
    font-size: 0.88rem;
    color: var(--color-text-secondary);
}

.rate-preview-amount {
    font-weight: 700;
    color: var(--color-text-primary);
    white-space: nowrap;
}

.rate-preview-amount.is-positive {
    color: var(--color-success);
}

.rate-preview-amount.is-negative {
    color: var(--color-danger);
}

.rate-preview-total {
    font-size: 1.55rem;
    font-weight: 800;
    color: #0f172a;
    white-space: nowrap;
}

.rate-preview-total span {
    margin-left: 0.3rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.seasonal-change-indicator {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.seasonal-change-indicator.is-increase {
    background: rgba(5, 150, 105, 0.12);
    color: #0f8a58;
}

.seasonal-change-indicator.is-decrease {
    background: rgba(225, 29, 72, 0.11);
    color: #c2415f;
}

.seasonal-change-indicator.is-neutral {
    background: rgba(148, 163, 184, 0.14);
    color: var(--color-text-secondary);
}

.seasonal-rate-formula {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.seasonal-rate-formula-card {
    display: grid;
    gap: 0.28rem;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
}

.seasonal-rate-formula-label,
.seasonal-live-preview-title {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.seasonal-rate-formula-card strong {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--color-text-primary);
}

.seasonal-direction-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.seasonal-direction-option {
    position: relative;
    cursor: pointer;
}

.seasonal-direction-option input {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.seasonal-direction-option span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 12px;
    background: #ffffff;
    color: var(--color-text-secondary);
    font-weight: 700;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.seasonal-direction-option input:checked + span {
    border-color: color-mix(in srgb, var(--role-accent) 35%, rgba(148, 163, 184, 0.24) 65%);
    background: color-mix(in srgb, var(--role-accent-soft) 74%, #ffffff 26%);
    color: var(--color-text-primary);
    box-shadow: inset 3px 0 0 var(--role-accent);
}

.seasonal-live-preview {
    display: grid;
    gap: 0.8rem;
    padding: 1rem 1.05rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
}

.seasonal-live-preview-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    color: var(--color-text-secondary);
}

.seasonal-live-preview-row strong {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-heading);
    color: var(--color-text-primary);
}

.seasonal-live-preview-arrow {
    color: var(--color-text-muted);
}

.discount-form-shell {
    display: grid;
    gap: 1.1rem;
}

.discount-form-topline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.discount-form-subtitle {
    color: var(--color-text-secondary);
    font-size: 0.92rem;
}

.discount-type-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.22rem 0.7rem;
    border-radius: 999px;
    background: rgba(219, 39, 119, 0.1);
    color: #b45375;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

.discount-form-section {
    display: grid;
    gap: 0.9rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
}

.discount-form-section:first-of-type {
    padding-top: 0;
    border-top: 0;
}

.discount-section-title {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.discount-section-note {
    margin: -0.35rem 0 0;
    color: var(--color-text-secondary);
    font-size: 0.88rem;
}

.discount-segmented-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.discount-segment-option {
    position: relative;
    cursor: pointer;
}

.discount-segment-option input {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.discount-segment-option span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0.8rem 1rem;
    border-right: 1px solid rgba(148, 163, 184, 0.18);
    font-weight: 700;
    color: var(--color-text-secondary);
    background: transparent;
}

.discount-segment-option:last-child span {
    border-right: 0;
}

.discount-segment-option input:checked + span {
    background: rgba(14, 116, 144, 0.09);
    color: var(--color-text-primary);
    box-shadow: inset 0 0 0 1px rgba(14, 116, 144, 0.18);
}

.discount-type-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.discount-type-option,
.discount-condition-card,
.discount-room-option {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.discount-type-option input,
.discount-condition-card > input,
.discount-room-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.discount-type-option > span {
    display: grid;
    gap: 0.28rem;
    min-height: 100%;
    padding: 1rem 1rem 0.95rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
}

.discount-type-option strong {
    color: var(--color-text-primary);
    font-size: 0.98rem;
}

.discount-type-option small {
    color: var(--color-text-secondary);
    font-size: 0.84rem;
    line-height: 1.35;
}

.discount-type-option input:checked + span {
    border-color: rgba(14, 116, 144, 0.28);
    background: rgba(14, 116, 144, 0.08);
    box-shadow: 0 8px 18px rgba(14, 116, 144, 0.08);
}

.discount-inline-alert {
    display: none;
    padding: 0.8rem 0.95rem;
    border: 1px solid rgba(217, 119, 6, 0.18);
    border-radius: 12px;
    background: rgba(245, 158, 11, 0.08);
    color: #9a6700;
    font-size: 0.88rem;
}

.discount-inline-alert.is-visible {
    display: block;
}

.discount-inline-helper {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

.discount-value-field {
    position: relative;
}

.discount-value-field .form-control {
    padding-right: 4.25rem;
}

.discount-value-suffix {
    position: absolute;
    top: 50%;
    right: 0.9rem;
    transform: translateY(-50%);
    font-weight: 700;
    color: var(--color-text-secondary);
}

.discount-condition-grid,
.discount-room-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.discount-condition-card {
    display: grid;
    gap: 0.8rem;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.discount-condition-card.is-active {
    border-color: rgba(14, 116, 144, 0.28);
    background: rgba(14, 116, 144, 0.06);
}

.discount-condition-body {
    display: grid;
    gap: 0.18rem;
}

.discount-condition-body strong {
    color: var(--color-text-primary);
}

.discount-condition-body small {
    color: var(--color-text-secondary);
}

.discount-condition-fields {
    display: none;
    padding-top: 0.15rem;
}

.discount-condition-card.is-active .discount-condition-fields {
    display: block;
}

.discount-room-option {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    background: #fff;
    color: var(--color-text-primary);
    font-weight: 600;
}

.discount-room-option-wide {
    margin-bottom: 0.85rem;
}

.discount-room-selector {
    display: grid;
    gap: 0.85rem;
}

.discount-room-check-all {
    padding-bottom: 0.35rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.discount-room-checklist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1.15rem;
}

.discount-room-check {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 36px;
}

.discount-room-check .form-check-input,
.discount-room-check-all .form-check-input {
    margin-top: 0;
}

.discount-room-check .form-check-label,
.discount-room-check-all .form-check-label {
    color: var(--color-text-primary);
    font-weight: 600;
}

.discount-room-option input:checked + span {
    color: var(--role-accent-strong);
}

.discount-room-option:has(input:checked) {
    border-color: rgba(14, 116, 144, 0.28);
    background: rgba(14, 116, 144, 0.07);
}

.discount-options-list {
    display: grid;
    gap: 0.6rem;
}

.discount-option-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.15rem 0;
}

.discount-option-row strong {
    display: block;
    color: var(--color-text-primary);
}

.discount-option-row small {
    display: block;
    color: var(--color-text-secondary);
}

.discount-live-preview {
    display: grid;
    gap: 0.2rem;
    padding: 0.8rem 0.95rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
}

.discount-live-preview-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0;
}

.discount-live-preview-row + .discount-live-preview-row {
    border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.discount-live-preview-row strong {
    color: var(--color-text-primary);
}

.discount-live-preview-row small {
    display: block;
    color: var(--color-text-secondary);
    margin-top: 0.12rem;
}

.discount-live-preview-values {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
}

.discount-live-preview-excluded {
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

.discount-live-preview-price {
    font-family: var(--font-heading);
}

.discount-live-preview-row.is-excluded {
    opacity: 0.48;
}

@media (max-width: 767.98px) {
    .seasonal-rate-formula {
        grid-template-columns: 1fr;
    }

    .seasonal-live-preview-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .discount-form-topline,
    .discount-live-preview-row,
    .discount-option-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .discount-type-grid,
    .discount-condition-grid,
    .discount-room-grid,
    .discount-room-checklist {
        grid-template-columns: 1fr;
    }
}

.settings-account-avatar {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, color-mix(in srgb, var(--role-accent) 76%, #0e7490 24%), color-mix(in srgb, var(--role-accent-strong) 72%, #14b8a6 28%));
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

.settings-account-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.settings-account-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.settings-account-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 0.8rem;
    align-items: center;
    margin-top: 0.45rem;
}

.settings-account-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    color: var(--color-text-secondary);
    font-size: 0.84rem;
}

.settings-form-section {
    padding: 1rem 1.05rem;
    border: 1px solid rgba(14, 116, 144, 0.1);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.7) 0%, rgba(255, 255, 255, 0.96) 100%);
}

.settings-form-section-heading {
    margin-bottom: 0.85rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.settings-panel-description {
    color: var(--color-text-muted);
    font-size: 0.86rem;
    line-height: 1.45;
}

.settings-session-section {
    border-top: 1px solid var(--color-border);
    padding-top: 1rem;
}

.settings-session-section:first-child {
    border-top: 0;
    padding-top: 0;
}

.settings-session-title {
    margin: 0 0 0.55rem;
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.settings-session-description {
    margin-bottom: 1rem;
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    line-height: 1.55;
}

.settings-session-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1.15rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-surface) 86%, #f8fafc 14%);
}

.settings-session-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 1.8rem;
}

.settings-session-body {
    min-width: 0;
}

.settings-session-primary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.55rem;
    align-items: baseline;
    color: var(--color-text-primary);
    font-size: 1rem;
    font-weight: 700;
}

.settings-session-ip {
    color: var(--color-text-secondary);
    font-weight: 600;
}

.settings-session-status,
.settings-session-current {
    margin-top: 0.2rem;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.settings-session-dot {
    width: 0.55rem;
    height: 0.55rem;
    display: inline-block;
    margin-right: 0.4rem;
    border-radius: 999px;
    background: var(--color-success);
}

.settings-session-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.55rem 1rem;
    margin: 0.9rem 0 0;
}

.settings-session-details div {
    min-width: 0;
}

.settings-session-details dt {
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.settings-session-details dd {
    margin: 0.18rem 0 0;
    color: var(--color-text-secondary);
    font-size: 0.88rem;
}

.settings-session-actions {
    justify-self: end;
}

.settings-security-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.settings-security-card {
    padding: 1rem 1.05rem;
    border: 1px solid rgba(14, 116, 144, 0.12);
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.settings-security-card-title {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.55rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

@media (max-width: 767.98px) {
    .settings-account-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .settings-sidebar-column {
        align-self: stretch;
    }

    .settings-sidebar-card {
        position: static;
    }

    .settings-session-card {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .settings-session-icon,
    .settings-session-actions {
        justify-self: start;
    }
}

@media (max-width: 1199.98px) {
    .reservation-enquiry-layout {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .reservation-enquiry-form {
        grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    }
}

@media (max-width: 767.98px) {
    .reservation-enquiry-form {
        gap: 0.5rem;
    }

    .reservation-enquiry-field,
    .reservation-enquiry-field-wide {
        grid-column: auto;
        min-width: 0;
    }

    .reservation-enquiry-form .btn {
        width: 100%;
    }

    .rrs-toast-stack {
        top: 4.25rem;
        right: 0.75rem;
        left: 0.75rem;
        width: auto;
    }
}

/* Shared role-aware interactive consistency */
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--role-accent) 18%, transparent 82%);
}

.btn-primary {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--role-accent) 84%, #ffffff 16%),
        color-mix(in srgb, var(--role-accent-strong) 78%, #0f172a 22%));
    border-color: color-mix(in srgb, var(--role-accent-strong) 16%, rgba(148, 163, 184, 0.18) 84%);
    color: #ffffff;
    box-shadow: 0 10px 20px color-mix(in srgb, var(--role-accent) 18%, transparent 82%);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--role-accent) 74%, #ffffff 26%),
        color-mix(in srgb, var(--role-accent-strong) 88%, #0f172a 12%));
    border-color: color-mix(in srgb, var(--role-accent-strong) 22%, rgba(148, 163, 184, 0.16) 78%);
    transform: translateY(-1px);
}

.btn-secondary {
    background: transparent;
    border: 1.5px solid color-mix(in srgb, var(--role-accent) 68%, rgba(148, 163, 184, 0.22) 32%);
    color: var(--role-accent-strong);
}

.btn-secondary:hover,
.btn-secondary:focus-visible,
.btn-outline-primary:hover,
.btn-outline-primary:focus-visible,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus-visible,
.btn-info:hover,
.btn-info:focus-visible,
.btn-outline-info:hover,
.btn-outline-info:focus-visible {
    background: color-mix(in srgb, var(--role-accent-soft) 78%, #ffffff 22%);
    color: color-mix(in srgb, var(--role-accent-strong) 72%, #0f172a 28%);
    border-color: color-mix(in srgb, var(--role-accent) 56%, rgba(148, 163, 184, 0.2) 44%);
}

.btn-outline-primary {
    color: var(--role-accent-strong);
    border-color: color-mix(in srgb, var(--role-accent) 34%, #cbd5e1 66%);
}

.btn-outline-secondary {
    color: var(--color-text-secondary);
    border-color: color-mix(in srgb, var(--role-accent) 18%, #cbd5e1 82%);
}

.topbar-menu-item:hover,
.topbar-menu-item:focus,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background: color-mix(in srgb, var(--role-accent-soft) 78%, #ffffff 22%);
    color: color-mix(in srgb, var(--role-accent-strong) 68%, #0f172a 32%);
}

.nav-pills .nav-link:hover,
.nav-pills .nav-link:focus-visible {
    background: color-mix(in srgb, var(--role-accent-soft) 74%, #ffffff 26%);
    border-color: color-mix(in srgb, var(--role-accent) 24%, rgba(148, 163, 184, 0.22) 76%);
    color: color-mix(in srgb, var(--role-accent-strong) 66%, #0f172a 34%);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--role-accent) 78%, #ffffff 22%),
        color-mix(in srgb, var(--role-accent-strong) 74%, #0f172a 26%));
    box-shadow: 0 10px 18px color-mix(in srgb, var(--role-accent) 16%, transparent 84%);
}

.table-action-toggle:hover,
.table-action-toggle:focus-visible,
.table-action-toggle[aria-expanded="true"] {
    background: color-mix(in srgb, var(--role-accent-soft) 72%, #ffffff 28%);
    border-color: color-mix(in srgb, var(--role-accent) 28%, rgba(148, 163, 184, 0.22) 72%);
    color: color-mix(in srgb, var(--role-accent-strong) 68%, #0f172a 32%);
}

html:not(.rrs-theme-dark) .r-stat-grid .card,
html:not(.rrs-theme-dark) .professional-user-stats .professional-stat-card,
html:not(.rrs-theme-dark) .sa-overview-strip .card {
    background: linear-gradient(180deg, #eef3f6 0%, #e7edf1 100%) !important;
    border-color: rgba(148, 163, 184, 0.26) !important;
}

html:not(.rrs-theme-dark) .r-stat-grid .card:hover,
html:not(.rrs-theme-dark) .professional-user-stats .professional-stat-card:hover,
html:not(.rrs-theme-dark) .sa-overview-strip .card:hover {
    background: linear-gradient(180deg, #eaf0f3 0%, #e3eaf0 100%) !important;
    border-color: rgba(14, 116, 144, 0.2) !important;
}

html:not(.rrs-theme-dark) .r-stat-grid .stat-card.stat-arrivals,
html:not(.rrs-theme-dark) .professional-user-stats .professional-stat-card.stat-arrivals,
html:not(.rrs-theme-dark) .sa-overview-strip .card.stat-arrivals {
    border-left: 3px solid #0284c7 !important;
}

html:not(.rrs-theme-dark) .r-stat-grid .stat-card.stat-departures,
html:not(.rrs-theme-dark) .professional-user-stats .professional-stat-card.stat-departures,
html:not(.rrs-theme-dark) .sa-overview-strip .card.stat-departures {
    border-left: 3px solid #16a34a !important;
}

html:not(.rrs-theme-dark) .r-stat-grid .stat-card.stat-occupancy,
html:not(.rrs-theme-dark) .professional-user-stats .professional-stat-card.stat-occupancy,
html:not(.rrs-theme-dark) .sa-overview-strip .card.stat-occupancy {
    border-left: 3px solid #0f766e !important;
}

html:not(.rrs-theme-dark) .r-stat-grid .stat-card.stat-pressure,
html:not(.rrs-theme-dark) .professional-user-stats .professional-stat-card.stat-pressure,
html:not(.rrs-theme-dark) .sa-overview-strip .card.stat-pressure {
    border-left: 3px solid #b45309 !important;
}

html:not(.rrs-theme-dark) .r-stat-grid .stat-value-arrivals,
html:not(.rrs-theme-dark) .professional-user-stats .stat-value-arrivals,
html:not(.rrs-theme-dark) .sa-overview-strip .stat-value-arrivals {
    color: #0284c7 !important;
}

html:not(.rrs-theme-dark) .r-stat-grid .stat-value-departures,
html:not(.rrs-theme-dark) .professional-user-stats .stat-value-departures,
html:not(.rrs-theme-dark) .sa-overview-strip .stat-value-departures {
    color: #16a34a !important;
}

html:not(.rrs-theme-dark) .r-stat-grid .stat-value-occupancy,
html:not(.rrs-theme-dark) .professional-user-stats .stat-value-occupancy,
html:not(.rrs-theme-dark) .sa-overview-strip .stat-value-occupancy {
    color: #0f766e !important;
}

html:not(.rrs-theme-dark) .r-stat-grid .stat-value-pressure,
html:not(.rrs-theme-dark) .professional-user-stats .stat-value-pressure,
html:not(.rrs-theme-dark) .sa-overview-strip .stat-value-pressure {
    color: #b45309 !important;
}

html:not(.rrs-theme-dark) .card .table-responsive,
html:not(.rrs-theme-dark) .card .r-table-wrap {
    background: #e9eff3 !important;
    border: 1px solid rgba(148, 163, 184, 0.18);
}

html:not(.rrs-theme-dark) .card .table thead th,
html:not(.rrs-theme-dark) .card .table-light th,
html:not(.rrs-theme-dark) .card .table-light td {
    background: #e6edf1 !important;
}

html:not(.rrs-theme-dark) .card .table tbody td {
    background: #f0f4f7 !important;
}

html:not(.rrs-theme-dark) .card .table-hover tbody tr:hover,
html:not(.rrs-theme-dark) .card .table-hover tbody tr:hover > * {
    background: #e7edf2 !important;
}

html:not(.rrs-theme-dark) .content-area,
html:not(.rrs-theme-dark) .content-area p,
html:not(.rrs-theme-dark) .content-area li,
html:not(.rrs-theme-dark) .content-area dd,
html:not(.rrs-theme-dark) .content-area .small,
html:not(.rrs-theme-dark) .content-area small,
html:not(.rrs-theme-dark) .content-area .text-muted {
    color: var(--color-text-secondary);
}

html:not(.rrs-theme-dark) .content-area h1,
html:not(.rrs-theme-dark) .content-area h2,
html:not(.rrs-theme-dark) .content-area h3,
html:not(.rrs-theme-dark) .content-area h4,
html:not(.rrs-theme-dark) .content-area h5,
html:not(.rrs-theme-dark) .content-area h6,
html:not(.rrs-theme-dark) .content-area strong,
html:not(.rrs-theme-dark) .content-area .fw-semibold,
html:not(.rrs-theme-dark) .content-area .fw-bold {
    color: var(--color-text-primary);
}

html:not(.rrs-theme-dark) .hero-card,
html:not(.rrs-theme-dark) .card,
html:not(.rrs-theme-dark) .dashboard-page .card,
html:not(.rrs-theme-dark) .list-group-item,
html:not(.rrs-theme-dark) .offcanvas,
html:not(.rrs-theme-dark) .modal-content,
html:not(.rrs-theme-dark) .topbar-menu-panel,
html:not(.rrs-theme-dark) .settings-logo-preview-card,
html:not(.rrs-theme-dark) .settings-logo-preview-shell,
html:not(.rrs-theme-dark) .settings-logo-preview-shell-sm,
html:not(.rrs-theme-dark) .availability-workspace-card,
html:not(.rrs-theme-dark) .inventory-control-header,
html:not(.rrs-theme-dark) .reservation-view-card,
html:not(.rrs-theme-dark) .reservation-summary-card,
html:not(.rrs-theme-dark) .rates-workspace-sidebar-card,
html:not(.rrs-theme-dark) .rate-preview-card,
html:not(.rrs-theme-dark) .discount-condition-card,
html:not(.rrs-theme-dark) .settings-sidebar-card,
html:not(.rrs-theme-dark) .audit-stat-card,
html:not(.rrs-theme-dark) .audit-filter-card,
html:not(.rrs-theme-dark) .audit-table-card {
    background: linear-gradient(180deg, var(--light-panel-top) 0%, var(--light-panel-bottom) 100%) !important;
    border-color: var(--light-border) !important;
}

html:not(.rrs-theme-dark) .card-header,
html:not(.rrs-theme-dark) .modal-header,
html:not(.rrs-theme-dark) .modal-footer,
html:not(.rrs-theme-dark) .offcanvas-header,
html:not(.rrs-theme-dark) .offcanvas-footer,
html:not(.rrs-theme-dark) .topbar-dropdown-header.border-bottom,
html:not(.rrs-theme-dark) .topbar-dropdown-header.border-top {
    background: linear-gradient(180deg, var(--light-panel-alt-top) 0%, var(--light-panel-alt-bottom) 100%) !important;
    border-color: rgba(148, 163, 184, 0.16) !important;
}

html:not(.rrs-theme-dark) .topbar-action-group,
html:not(.rrs-theme-dark) .topbar-profile-time-group,
html:not(.rrs-theme-dark) .topbar-actions .topbar-profile-btn,
html:not(.rrs-theme-dark) .topbar-search,
html:not(.rrs-theme-dark) .topbar-menu-panel,
html:not(.rrs-theme-dark) .mobile-bottom-nav {
    background: linear-gradient(180deg, var(--light-panel-top) 0%, var(--light-panel-bottom) 100%) !important;
    border-color: var(--light-border) !important;
}

html:not(.rrs-theme-dark) .form-control,
html:not(.rrs-theme-dark) .form-select,
html:not(.rrs-theme-dark) .input-group-text,
html:not(.rrs-theme-dark) textarea,
html:not(.rrs-theme-dark) input[type="text"],
html:not(.rrs-theme-dark) input[type="email"],
html:not(.rrs-theme-dark) input[type="password"],
html:not(.rrs-theme-dark) input[type="number"],
html:not(.rrs-theme-dark) input[type="date"],
html:not(.rrs-theme-dark) input[type="search"],
html:not(.rrs-theme-dark) select {
    background: #f7fafc !important;
    border-color: rgba(148, 163, 184, 0.28) !important;
    color: var(--color-text-primary) !important;
}

html:not(.rrs-theme-dark) .form-control::placeholder,
html:not(.rrs-theme-dark) textarea::placeholder {
    color: #7b8794 !important;
}

html:not(.rrs-theme-dark) .table,
html:not(.rrs-theme-dark) .content-area .table,
html:not(.rrs-theme-dark) .reservation-workspace-table,
html:not(.rrs-theme-dark) .availability-matrix-table,
html:not(.rrs-theme-dark) .inventory-matrix-table {
    background: transparent !important;
    color: var(--color-text-primary);
}

html:not(.rrs-theme-dark) .table thead th,
html:not(.rrs-theme-dark) table thead th,
html:not(.rrs-theme-dark) .rm-data-table th,
html:not(.rrs-theme-dark) .reservation-workspace-table thead th,
html:not(.rrs-theme-dark) .availability-matrix-table thead th,
html:not(.rrs-theme-dark) .inventory-matrix-table thead th {
    background: #e7edf1 !important;
    color: #445468 !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
}

html:not(.rrs-theme-dark) .table td,
html:not(.rrs-theme-dark) table td,
html:not(.rrs-theme-dark) .rm-data-table td,
html:not(.rrs-theme-dark) .reservation-workspace-table tbody td,
html:not(.rrs-theme-dark) .availability-matrix-table tbody td,
html:not(.rrs-theme-dark) .inventory-matrix-table tbody td {
    background: #f1f5f7 !important;
    color: var(--color-text-primary) !important;
    border-color: rgba(148, 163, 184, 0.16) !important;
}

html:not(.rrs-theme-dark) .availability-matrix-table tbody td.availability-matrix-cell.is-open {
    color: #166534 !important;
    background: #dcfce7 !important;
}

html:not(.rrs-theme-dark) .availability-matrix-table tbody td.availability-matrix-cell.is-low {
    color: #854d0e !important;
    background: #fef3c7 !important;
}

html:not(.rrs-theme-dark) .inventory-matrix-table thead th {
    background: #eaf0f4 !important;
    color: #475569 !important;
    border-color: rgba(148, 163, 184, 0.14) !important;
}

html:not(.rrs-theme-dark) .inventory-matrix-table tbody td.inventory-matrix-input-cell,
html:not(.rrs-theme-dark) .inventory-matrix-table tbody th.availability-matrix-room,
html:not(.rrs-theme-dark) .inventory-matrix-table tbody td.inventory-matrix-summary-cell {
    background: #f8fbfd !important;
    border-color: rgba(203, 213, 225, 0.72) !important;
}

html:not(.rrs-theme-dark) .inventory-matrix-table tbody td.inventory-matrix-input-cell {
    position: relative;
    padding: 0.14rem 0.14rem 0.16rem !important;
    background: #f8fbfd !important;
    box-shadow: none !important;
    vertical-align: top;
    height: 58px;
    min-height: 58px;
}

html:not(.rrs-theme-dark) .inventory-matrix-table tbody td.inventory-matrix-input-cell::after {
    content: none;
}

html:not(.rrs-theme-dark) .inventory-matrix-table tbody td.inventory-matrix-input-cell input[type="number"] {
    margin-top: 0.42rem;
    min-height: 1.56rem;
    border-width: 1px !important;
    border-radius: 8px;
    background: #ffffff !important;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 800;
    box-shadow: none !important;
    padding-top: 0.02rem;
    padding-bottom: 0.02rem;
}

html:not(.rrs-theme-dark) .inventory-matrix-table tbody td.inventory-matrix-input-cell.is-open input[type="number"] {
    color: #166534 !important;
    background: rgba(240, 253, 244, 0.94) !important;
    border-color: rgba(134, 239, 172, 0.9) !important;
}

html:not(.rrs-theme-dark) .inventory-matrix-table tbody td.inventory-matrix-input-cell.is-low input[type="number"] {
    color: #92400e !important;
    background: rgba(255, 251, 235, 0.96) !important;
    border-color: rgba(252, 211, 77, 0.95) !important;
}

html:not(.rrs-theme-dark) .inventory-matrix-table tbody td.inventory-matrix-input-cell.is-full input[type="number"] {
    color: #991b1b !important;
    background: rgba(254, 242, 242, 0.96) !important;
    border-color: rgba(252, 165, 165, 0.95) !important;
}

html:not(.rrs-theme-dark) .inventory-matrix-table tbody td.inventory-matrix-input-cell.is-open,
html:not(.rrs-theme-dark) .inventory-matrix-table tbody td.inventory-matrix-input-cell.is-low,
html:not(.rrs-theme-dark) .inventory-matrix-table tbody td.inventory-matrix-input-cell.is-full {
    box-shadow: none !important;
}

html:not(.rrs-theme-dark) .inventory-matrix-table tbody td.inventory-matrix-input-cell.is-open {
    background: linear-gradient(180deg, rgba(240, 253, 244, 0.96) 0%, rgba(248, 251, 253, 1) 68%) !important;
}

html:not(.rrs-theme-dark) .inventory-matrix-table tbody td.inventory-matrix-input-cell.is-low {
    background: linear-gradient(180deg, rgba(255, 251, 235, 0.98) 0%, rgba(248, 251, 253, 1) 68%) !important;
}

html:not(.rrs-theme-dark) .inventory-matrix-table tbody td.inventory-matrix-input-cell.is-full {
    background: linear-gradient(180deg, rgba(254, 242, 242, 0.98) 0%, rgba(248, 251, 253, 1) 68%) !important;
}

html:not(.rrs-theme-dark) .inventory-matrix-table tbody td.inventory-matrix-input-cell .inventory-cell-check {
    top: 0.05rem;
    left: 0.05rem;
}

html:not(.rrs-theme-dark) .inventory-matrix-table tbody th.availability-matrix-room {
    background: linear-gradient(180deg, #f5faff 0%, #eff6fb 100%) !important;
}

html:not(.rrs-theme-dark) .inventory-matrix-table tbody tr + tr th.availability-matrix-room,
html:not(.rrs-theme-dark) .inventory-matrix-table tbody tr + tr td.inventory-matrix-input-cell,
html:not(.rrs-theme-dark) .inventory-matrix-table tbody tr + tr td.inventory-matrix-summary-cell {
    border-top-width: 2px !important;
}

html:not(.rrs-theme-dark) .inventory-matrix-table tbody td.inventory-matrix-summary-cell {
    background: linear-gradient(180deg, #fbfdff 0%, #f5f9fc 100%) !important;
}

html:not(.rrs-theme-dark) .availability-matrix-table tbody td.availability-matrix-cell.is-full {
    color: #991b1b !important;
    background: #fee2e2 !important;
}

html:not(.rrs-theme-dark) .availability-matrix-table tbody td.availability-matrix-cell.is-empty {
    color: var(--color-text-secondary) !important;
    background: #f1f5f9 !important;
}

html:not(.rrs-theme-dark) .availability-matrix-table tbody td.availability-matrix-cell.is-open a:hover,
html:not(.rrs-theme-dark) .availability-matrix-table tbody td.availability-matrix-cell.is-low a:hover {
    color: #ffffff !important;
    background: #0e7490 !important;
}

html:not(.rrs-theme-dark) .list-group-item,
html:not(.rrs-theme-dark) .settings-sidebar-card .list-group-item,
html:not(.rrs-theme-dark) .room-management-sidebar-card .list-group-item,
html:not(.rrs-theme-dark) .rates-workspace-sidebar-card .list-group-item {
    color: var(--color-text-secondary) !important;
    border-color: rgba(148, 163, 184, 0.16) !important;
}

html:not(.rrs-theme-dark) .btn-light,
html:not(.rrs-theme-dark) .btn-outline-secondary {
    background: #f7fafc !important;
    border-color: rgba(148, 163, 184, 0.3) !important;
    color: var(--color-text-secondary) !important;
}

html:not(.rrs-theme-dark) .table-action-toggle {
    background: #f7fafc !important;
    border-color: rgba(148, 163, 184, 0.28) !important;
    color: var(--color-text-secondary) !important;
}

[data-app-shell].app-shell,
[data-app-shell].app-shell .main-panel,
[data-app-shell].app-shell .topbar-custom,
[data-app-shell].app-shell .mobile-topbar,
[data-app-shell].app-shell .content-area {
    border-radius: 0 !important;
}

[data-app-shell].app-shell .main-panel {
    overflow: visible !important;
    box-shadow: none !important;
    background: transparent !important;
}

[data-app-shell].app-shell .topbar-custom,
[data-app-shell].app-shell .mobile-topbar {
    overflow: visible !important;
    isolation: isolate;
    z-index: 1040 !important;
}

[data-app-shell].app-shell .topbar-custom,
[data-app-shell].app-shell .mobile-topbar,
[data-app-shell].app-shell .topbar-actions,
[data-app-shell].app-shell .topbar-notification-wrap,
[data-app-shell].app-shell .topbar-profile-menu-wrap,
[data-app-shell].app-shell .topbar-action-group {
    position: relative;
    z-index: 1041;
}

[data-app-shell].app-shell .content-area {
    position: relative;
    z-index: auto !important;
}

@media (max-width: 575.98px) {
    .topbar-menu-panel,
    .topbar-notification-menu,
    .topbar-profile-menu {
        width: min(100vw - 1rem, 340px) !important;
        min-width: min(100vw - 1rem, 340px) !important;
        max-width: min(100vw - 1rem, 340px) !important;
    }
}