/* Generated by tools/build_assets.php. Do not edit directly. */

/* ===== assets/css/app.css ===== */
:root {
    --bg: #070d1b;
    --bg-soft: #0f172a;
    --surface: rgba(255,255,255,0.86);
    --surface-2: rgba(255,255,255,0.7);
    --card: rgba(255,255,255,0.9);
    --text: #10203a;
    --muted: #64748b;
    --line: rgba(15, 23, 42, 0.08);
    --primary: #4f46e5;
    --primary-2: #7c3aed;
    --cyan: #06b6d4;
    --success: #0e9f6e;
    --warning: #d97706;
    --danger: #dc2626;
    --radius: 24px;
    --shadow: 0 22px 70px rgba(15, 23, 42, 0.14);
    --shadow-soft: 0 10px 34px rgba(15, 23, 42, 0.08);
    --text-primary: #10203a;
}

* { box-sizing: border-box; }
html, body {
    margin: 0;
    padding: 0;
    font-family: 'Sarabun', sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at top left, rgba(79, 70, 229, .18), transparent 26%),
        radial-gradient(circle at 100% 0%, rgba(6, 182, 212, .14), transparent 20%),
        linear-gradient(180deg, #eef4ff 0%, #f8faff 34%, #f5f7fc 100%);
    min-height: 100%;
    line-height: 1.45;
}

body.nav-lock { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; font-family: 'Sarabun', sans-serif; }
textarea { min-height: 120px; resize: vertical; }
svg { display: block; width: 100%; height: 100%; }

.app-shell {
    min-height: 100vh;
    --sidebar-width: 312px;
    --topbar-height: 80px;
}

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

.topbar {
    position: sticky;
    top: 0;
    z-index: 80;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 16px 24px;
    min-height: var(--topbar-height);
    background: linear-gradient(135deg, rgba(7,13,27,.92), rgba(21,31,57,.88));
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(18px);
    box-shadow: 0 12px 36px rgba(2, 6, 23, 0.18);
}

.brand-wrap,
.brand,
.topbar-tools,
.user-chip,
.brand-mark,
.sidebar-head-actions,
.sidebar-state,
.nav-group-main,
.nav-group-text,
.top-link,
.hero-actions,
.meta,
.legend,
.legend-item,
.audio-tools,
.toolbar {
    display: flex;
    align-items: center;
}

.brand-wrap { gap: 14px; min-width: 0; }
.brand { gap: 14px; min-width: 0; }
.brand strong,
.brand small,
.nav-label,
.sidebar-title,
.sidebar-title-wrap small,
.nav-section-label,
.nav-group-text strong,
.nav-group-text small,
.sidebar-foot strong,
.sidebar-foot small,
.side-feature p,
.side-feature strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand strong { display: block; font-size: 1rem; }
.brand small { display: block; color: rgba(255,255,255,0.7); font-size: .83rem; }
.brand-mark {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    justify-content: center;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    box-shadow: 0 10px 28px rgba(124,58,237,.35);
    flex: 0 0 auto;
}

.topbar-tools { justify-content: flex-end; gap: 12px; flex-wrap: wrap; margin-left: auto; }
.top-link { gap: 8px; color: rgba(255,255,255,0.88); font-weight: 600; }
.top-link:hover { color: #fff; }
.topbar-action { min-height: 44px; }
.btn-icon { width: 18px; height: 18px; }
.user-chip {
    gap: 10px;
    padding: 6px 12px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 999px;
    background: rgba(255,255,255,.06);
}
.user-chip > div:last-child { min-width: 0; }
.avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    background: linear-gradient(135deg, rgba(79,70,229,.95), rgba(124,58,237,.95));
    color: #fff;
    flex: 0 0 auto;
    overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    border-radius: 999px;
    padding: 0 8px;
    background: #fff;
    color: var(--primary);
    font-size: .82rem;
    font-weight: 800;
}

.nav-overlay {
    position: fixed;
    inset: var(--topbar-height) 0 0 0;
    background: rgba(2, 6, 23, .54);
    opacity: 0;
    visibility: hidden;
    transition: .25s ease;
    z-index: 65;
}

.body-wrap {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    min-height: calc(100vh - var(--topbar-height));
    transition: grid-template-columns .28s ease;
}

.sidebar {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 20px 18px;
    background:
        radial-gradient(circle at top left, rgba(79,70,229,.22), transparent 24%),
        linear-gradient(180deg, rgba(15,23,42,.98), rgba(15,23,42,.94));
    color: #e2e8f0;
    border-right: 1px solid rgba(255,255,255,0.06);
    overflow-y: auto;
    transition: padding .25s ease, transform .25s ease;
}
.sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 18%, transparent 82%, rgba(255,255,255,.04));
    pointer-events: none;
}
.sidebar > * { position: relative; z-index: 1; }

.sidebar-head {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    padding: 16px;
    border-radius: 22px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(12px);
}
.sidebar-title-wrap {
    display: grid;
    gap: 4px;
    min-width: 0;
}
.sidebar-title-wrap small {
    color: rgba(226,232,240,.62);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .16em;
}
.sidebar-title { font-size: 1.02rem; color: #fff; }
.sidebar-head-actions { gap: 10px; }
.sidebar-state {
    gap: 8px;
    justify-content: center;
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    color: #dbeafe;
    background: rgba(79,70,229,.22);
    border: 1px solid rgba(129,140,248,.22);
    white-space: nowrap;
}
.online-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34,197,94,.14);
}

.side-nav {
    position: relative;
    top: 0;
    display: grid;
    gap: 12px;
    flex: 1 1 auto;
    align-content: start;
    min-height: 0;
    padding-bottom: 18px;
}
.nav-section-label {
    margin: 8px 8px 0;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(226,232,240,.52);
}

.nav-item,
.nav-group-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 18px;
    min-height: 58px;
    transition: .22s ease;
}
.nav-item {
    padding: 12px 14px;
    color: #d6e0ef;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,.03);
}
.nav-item:hover,
.nav-item.active,
.nav-group-toggle:hover,
.nav-group.is-open > .nav-group-toggle {
    color: #fff;
    background: linear-gradient(135deg, rgba(79,70,229,.22), rgba(124,58,237,.20));
    border-color: rgba(129,140,248,.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 22px rgba(2,6,23,.18);
}
.nav-item:hover,
.nav-item.active { transform: translateX(3px); }
.nav-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    background: rgba(255,255,255,.08);
    color: #e0e7ff;
}
.nav-item.active .nav-icon,
.nav-group.is-open > .nav-group-toggle .nav-group-icon {
    background: linear-gradient(135deg, rgba(79,70,229,.38), rgba(124,58,237,.32));
    color: #fff;
}
.nav-label {
    min-width: 0;
    flex: 1 1 auto;
}
.nav-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    color: #fff;
    font-size: .76rem;
    font-weight: 800;
}
.nav-group { display: grid; gap: 8px; }
.nav-group-toggle {
    justify-content: space-between;
    padding: 10px 12px;
    background: rgba(255,255,255,.03);
    color: #dbe6f6;
    border: 1px solid rgba(255,255,255,.04);
    cursor: pointer;
}
.nav-group-main { gap: 12px; min-width: 0; }
.nav-group-text {
    display: grid;
    gap: 3px;
    min-width: 0;
    text-align: left;
}
.nav-group-text strong { font-size: .97rem; color: #fff; }
.nav-group-text small { color: rgba(226,232,240,.6); font-size: .78rem; }
.nav-chevron {
    width: 18px;
    height: 18px;
    color: rgba(226,232,240,.72);
    transition: transform .24s ease;
    flex: 0 0 auto;
}
.nav-group.is-open .nav-chevron { transform: rotate(180deg); }
.nav-group-panel {
    max-height: 0;
    overflow: hidden;
    opacity: .55;
    transition: max-height .28s ease, opacity .2s ease;
}
.nav-group.is-open .nav-group-panel { opacity: 1; }
.nav-group-panel-inner {
    display: grid;
    gap: 8px;
    padding: 4px 0 2px 16px;
}
.nav-item.sub-item {
    min-height: 52px;
    padding: 10px 14px;
    border-radius: 16px;
    background: rgba(255,255,255,.025);
}
.nav-item.sub-item .nav-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    flex-basis: 38px;
    background: rgba(255,255,255,.06);
}

.side-feature {
    display: flex;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.07);
    color: #e2e8f0;
}
.side-feature { margin-top: 4px; }
.side-feature-icon,
.sidebar-foot-icon {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: #fff;
    background: linear-gradient(135deg, rgba(79,70,229,.94), rgba(6,182,212,.84));
    box-shadow: 0 14px 34px rgba(79,70,229,.22);
}
.side-feature strong,
.sidebar-foot strong { display: block; color: #fff; margin-bottom: 4px; }
.side-feature p,
.sidebar-foot small {
    color: rgba(226,232,240,.72);
    line-height: 1.6;
    white-space: normal;
}
.feature-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}
.feature-list li {
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.05);
    color: #d8e2f1;
}
.feature-list li::before {
    content: '•';
    color: #818cf8;
    margin-right: 8px;
}
.sidebar-foot {
    display: block;
    margin-top: auto;
    padding: 18px 8px 4px;
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(255,255,255,.08);
    border-radius: 0;
    color: #cbd5e1;
}

.app-shell.sidebar-collapsed .sidebar { padding-inline: 12px; }
.app-shell.sidebar-collapsed .sidebar-title-wrap,
.app-shell.sidebar-collapsed .sidebar-state,
.app-shell.sidebar-collapsed .nav-section-label,
.app-shell.sidebar-collapsed .nav-label,
.app-shell.sidebar-collapsed .nav-group-text,
.app-shell.sidebar-collapsed .nav-chevron,
.app-shell.sidebar-collapsed .side-feature,
.app-shell.sidebar-collapsed .feature-list,
.app-shell.sidebar-collapsed .sidebar-foot > div:last-child {
    width: 0;
    min-width: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    margin: 0;
}
.app-shell.sidebar-collapsed .sidebar-head { justify-content: center; padding-inline: 10px; }
.app-shell.sidebar-collapsed .sidebar-head-actions { gap: 0; }
.app-shell.sidebar-collapsed .collapse-btn { display: none; }
.app-shell.sidebar-collapsed .nav-item,
.app-shell.sidebar-collapsed .nav-group-toggle {
    justify-content: center;
    padding-inline: 10px;
}
.app-shell.sidebar-collapsed .nav-item:hover,
.app-shell.sidebar-collapsed .nav-item.active { transform: translateY(-1px); }
.app-shell.sidebar-collapsed .nav-group-toggle { display: none; }
.app-shell.sidebar-collapsed .nav-group-panel {
    max-height: none !important;
    overflow: visible;
    opacity: 1;
}
.app-shell.sidebar-collapsed .nav-group-panel-inner { padding-left: 0; }
.app-shell.sidebar-collapsed .nav-badge { display: none; }
.app-shell.sidebar-collapsed .sidebar-foot {
    justify-content: center;
    padding: 12px 10px 0;
    border-top: 0;
}
.app-shell.sidebar-collapsed .sidebar-credit-box {
    display: none;
}


.sidebar-credit-box {
    gap: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.sidebar-credit-text {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.sidebar-credit,
.sidebar-copy {
    margin: 0;
    line-height: 1.55;
    white-space: normal;
}

.sidebar-credit {
    font-size: 11px;
    color: #e2e8f0;
    font-weight: 400;
}

.sidebar-credit a {
    color: #c4b5fd;
    font-weight: 400;
    text-decoration: none;
}

.sidebar-credit a:hover {
    color: #ddd6fe;
    text-decoration: underline;
}

.sidebar-copy {
    font-size: 11px;
    color: rgba(226,232,240,.72);
    font-weight: 400;
}

.content { padding: 28px; min-width: 0; }
.hero {
    display: grid;
    grid-template-columns: 1.25fr .95fr;
    gap: 24px;
    align-items: stretch;
    margin-bottom: 24px;
}
.hero-card,
.panel,
.card,
.table-card,
.stat-card,
.form-card,
.empty-state {
    background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.88));
    border: 1px solid rgba(255,255,255,.58);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    backdrop-filter: blur(10px);
}
.hero-card {
    padding: 30px;
    overflow: hidden;
    position: relative;
}
.hero-card::after {
    content: '';
    position: absolute;
    inset: auto -60px -60px auto;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(124,58,237,.22), transparent 66%);
}
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: .86rem;
    background: rgba(79,70,229,.08);
    color: var(--primary);
    font-weight: 700;
}
.hero h1 { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.06; margin: 14px 0; }
.hero p { color: var(--muted); font-size: 1rem; line-height: 1.75; margin: 0 0 18px; }
.hero-actions { gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.hero h1 { text-wrap: balance; }
.hero-public-overview {
    grid-template-columns: minmax(0, 7fr) minmax(300px, 3fr);
    gap: 24px;
    align-items: start;
}
.hero-public-main,
.hero-public-side {
    min-width: 0;
}
.hero-public-main {
    display: grid;
    gap: 24px;
    align-content: start;
}
.hero-public-side {
    display: block;
}
.hero-public-side > .hero-card,
.hero-public-main > .hero-card,
.hero-public-main > .booking-calendar-card {
    min-width: 0;
    height: 100%;
}
.hero-public-main > .upcoming-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.monthly-snapshot-card {
    position: sticky;
    top: calc(var(--topbar-height) + 18px);
}
.booking-calendar-hero {
    padding: 26px;
}
.meeting-timeline-card {
    padding: 28px;
}
.hero-toolbar { align-items: flex-start; gap: 18px; }
.hero-compact-actions { justify-content: flex-end; margin-top: 0; }
.overview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 22px;
}
.overview-grid-compact {
    grid-template-columns: 1fr;
}
.monthly-snapshot-card .hero-toolbar {
    flex-direction: column;
    align-items: stretch;
}
.monthly-snapshot-card .hero-compact-actions {
    justify-content: flex-start;
}
.monthly-snapshot-card .overview-card {
    padding: 18px;
}
.monthly-snapshot-card .overview-label {
    min-height: auto;
}
.hero-public-overview .hero-toolbar > div:first-child,
.hero-public-overview .toolbar-tight > div:first-child {
    min-width: 0;
}
.hero-public-overview .hero-toolbar > div:first-child p,
.hero-public-overview .toolbar-tight > div:first-child p,
.hero-public-overview .section-help {
    max-width: 100%;
}
.hero-public-overview .hero-toolbar {
    justify-content: space-between;
}
.upcoming-card .upcoming-list {
    flex: 1 1 auto;
    align-content: start;
}
.overview-card {
    padding: 20px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(242,246,255,.92));
    border: 1px solid rgba(79,70,229,.10);
    box-shadow: 0 12px 28px rgba(15,23,42,.06);
}
.overview-label {
    color: var(--muted);
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.5;
    min-height: 2.7em;
}
.overview-value {
    margin-top: 10px;
    font-size: clamp(1.9rem, 3vw, 2.7rem);
    line-height: 1;
    font-weight: 800;
    color: var(--text-primary);
}
.overview-meta {
    margin-top: 10px;
    color: #60708b;
    font-size: .83rem;
    line-height: 1.55;
}
.toolbar-tight { align-items: flex-start; }
.section-help {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.65;
}
.btn-sm {
    min-height: 42px;
    padding: 10px 14px;
    font-size: .9rem;
}
.event-switcher { margin-top: 0; }
.login-note { font-size: .9rem; line-height: 1.7; }
.upcoming-list { display: grid; gap: 14px; }
.event-list-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(79,70,229,.12);
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,255,.94));
    box-shadow: 0 8px 24px rgba(15,23,42,.06);
    position: relative;
    overflow: hidden;
}
.event-list-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--event-accent, var(--primary));
}
.event-list-body { min-width: 0; padding-left: 4px; }
.event-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.event-list-time {
    color: #64748b;
    font-size: .84rem;
    font-weight: 600;
}
.event-list-card h3 {
    margin: 0 0 8px;
    font-size: 1.02rem;
    line-height: 1.45;
    color: #16284a;
}
.event-list-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    color: #52627d;
    font-size: .88rem;
}
.event-list-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.empty-state-soft {
    padding: 24px 18px;
    border-radius: 20px;
    background: #f8fbff;
    border: 1px dashed rgba(79,70,229,.22);
}

.booking-calendar-card {
    margin: 18px 0 22px;
    padding: 22px;
    border-radius: 24px;
    border: 1px solid rgba(79,70,229,.12);
    background: linear-gradient(180deg, rgba(246,248,255,.96), rgba(255,255,255,.94));
    box-shadow: 0 16px 36px rgba(15,23,42,.08);
    position: relative;
    overflow: visible;
}
.booking-calendar-card::before {
    content: '';
    position: absolute;
    inset: auto -48px -64px auto;
    width: 180px;
    height: 180px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(79,70,229,.13), transparent 70%);
    pointer-events: none;
}
.booking-calendar-header {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.booking-calendar-heading h3 {
    margin: 12px 0 8px;
    font-size: 1.35rem;
    line-height: 1.25;
    color: #15284a;
}
.booking-calendar-heading p {
    margin: 0;
    color: #62748f;
    line-height: 1.7;
    max-width: 760px;
}
.booking-calendar-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}
.calendar-nav-group,
.calendar-view-group {
    display: inline-flex;
    gap: 8px;
    padding: 6px;
    border-radius: 18px;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(148,163,184,.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.calendar-btn-white {
    background: #fff;
    color: #253555;
    border: 1px solid rgba(148,163,184,.18);
}
.calendar-view-btn {
    background: transparent;
    color: #4d607e;
    border: 0;
}
.calendar-view-btn.is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    box-shadow: 0 10px 22px rgba(79,70,229,.24);
}
.booking-calendar-frame {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) 320px;
    gap: 18px;
    align-items: start;
}
.booking-calendar-main { min-width: 0; }
.calendar-period-bar {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.calendar-period-title {
    font-size: 1.08rem;
    font-weight: 800;
    color: #13284e;
}
.calendar-period-subtitle {
    color: #6b7b95;
    font-size: .88rem;
}
.booking-calendar-board {
    background: rgba(255,255,255,.96);
    border-radius: 22px;
    border: 1px solid rgba(79,70,229,.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 12px 28px rgba(15,23,42,.05);
    overflow: hidden;
}
.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-bottom: 1px solid rgba(148,163,184,.14);
    background: linear-gradient(180deg, rgba(243,246,255,.95), rgba(250,251,255,.9));
}
.calendar-weekdays.is-single-day { grid-template-columns: 1fr; }
.calendar-weekday {
    padding: 12px 10px;
    font-size: .8rem;
    font-weight: 700;
    text-align: center;
    color: #5f7190;
    letter-spacing: .01em;
}
.calendar-grid { padding: 14px; }
.calendar-grid.calendar-grid-month,
.calendar-grid.calendar-grid-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 12px;
}
.calendar-grid.calendar-grid-day { display: block; }
.calendar-day {
    position: relative;
    min-height: 118px;
    border-radius: 18px;
    border: 1px solid rgba(148,163,184,.16);
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,248,255,.95));
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    text-align: left;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.calendar-day:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(15,23,42,.10);
    border-color: rgba(79,70,229,.22);
}
.calendar-day.is-muted {
    opacity: .56;
    background: linear-gradient(180deg, rgba(248,250,255,.84), rgba(250,252,255,.76));
}
.calendar-day.is-today {
    border-color: rgba(79,70,229,.36);
    box-shadow: inset 0 0 0 1px rgba(79,70,229,.20);
}
.calendar-day.is-selected {
    border-color: rgba(79,70,229,.46);
    background: linear-gradient(180deg, rgba(238,242,255,1), rgba(247,249,255,.98));
    box-shadow: 0 18px 30px rgba(79,70,229,.12);
}
.calendar-day.has-events::after {
    content: '';
    position: absolute;
    top: 14px;
    right: 14px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    box-shadow: 0 0 0 5px rgba(79,70,229,.08);
}
.calendar-day-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}
.calendar-day-number {
    font-size: 1rem;
    font-weight: 800;
    color: #13284d;
}
.calendar-day-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(79,70,229,.10);
    color: var(--primary);
    font-size: .76rem;
    font-weight: 800;
}
.calendar-day-meta {
    font-size: .74rem;
    color: #7b8aa2;
    line-height: 1.45;
}
.calendar-day-list {
    display: grid;
    gap: 7px;
    margin-top: auto;
}
.calendar-day-item {
    display: grid;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 14px;
    background: rgba(79,70,229,.05);
    border-left: 4px solid var(--event-accent, var(--primary));
    font-size: .76rem;
    color: #243452;
}
.calendar-day-item strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.calendar-day-item span {
    color: #617089;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.calendar-day-more {
    font-size: .76rem;
    color: var(--primary);
    font-weight: 700;
}
.calendar-week-card { min-height: 220px; }
.calendar-week-card .calendar-day-head { align-items: center; }
.calendar-week-card .calendar-day-list { margin-top: 4px; }
.calendar-day-focus {
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(148,163,184,.16);
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,248,255,.94));
    min-height: 360px;
}
.calendar-day-focus-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.calendar-day-focus-title {
    font-size: 1.02rem;
    font-weight: 800;
    color: #13284d;
}
.calendar-day-focus-subtitle {
    color: #70809a;
    font-size: .86rem;
}
.calendar-day-focus-list {
    display: grid;
    gap: 12px;
}
.booking-calendar-side {
    position: sticky;
    top: 96px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(79,70,229,.10);
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,249,255,.94));
    box-shadow: 0 12px 26px rgba(15,23,42,.06);
}
.calendar-side-head {
    display: grid;
    gap: 6px;
    margin-bottom: 10px;
}
.calendar-side-title {
    font-size: 1rem;
    font-weight: 800;
    color: #15284b;
}
.calendar-side-date {
    font-size: .92rem;
    color: #5f7090;
    font-weight: 700;
}
.calendar-side-meta {
    font-size: .84rem;
    color: #6c7b95;
    line-height: 1.7;
    margin-bottom: 14px;
}
.calendar-side-list,
.calendar-day-focus-list {
    display: grid;
    gap: 12px;
}
.calendar-detail-card {
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(148,163,184,.16);
    background: #fff;
    border-left: 4px solid var(--event-accent, var(--primary));
    box-shadow: 0 8px 18px rgba(15,23,42,.05);
}
.calendar-detail-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.calendar-detail-time {
    font-size: .78rem;
    color: #64748b;
    font-weight: 700;
}
.calendar-detail-card h4 {
    margin: 0 0 8px;
    font-size: .96rem;
    color: #1a2a47;
    line-height: 1.5;
}
.calendar-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    color: #60708b;
    font-size: .84rem;
    margin-bottom: 12px;
}
.calendar-detail-actions {
    display: flex;
    justify-content: flex-end;
}
.calendar-empty-state {
    padding: 18px;
    border-radius: 18px;
    border: 1px dashed rgba(79,70,229,.20);
    background: rgba(248,251,255,.88);
    color: #64748b;
    text-align: center;
    line-height: 1.7;
}
.calendar-hover-tooltip {
    position: fixed;
    z-index: 120;
    width: min(320px, calc(100vw - 24px));
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(15,23,42,.96);
    color: #fff;
    box-shadow: 0 18px 40px rgba(2,6,23,.28);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .14s ease, visibility .14s ease;
}
.calendar-hover-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
}
.calendar-tooltip-title {
    font-size: .9rem;
    font-weight: 800;
    margin-bottom: 8px;
}
.calendar-tooltip-list {
    display: grid;
    gap: 8px;
}
.calendar-tooltip-item {
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255,255,255,.08);
    border-left: 4px solid var(--event-accent, #fff);
}
.calendar-tooltip-item strong,
.calendar-tooltip-item span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.calendar-tooltip-item span {
    color: rgba(255,255,255,.74);
    font-size: .78rem;
}
.calendar-tooltip-more {
    margin-top: 6px;
    font-size: .78rem;
    color: rgba(255,255,255,.74);
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 14px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-2)); }
.btn-outline { color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.22); }
.content .btn-outline { color: var(--text); border-color: rgba(15,23,42,.12); background: #fff; }
.btn-muted { background: #eef3ff; color: #24365c; }
.btn-danger { color: #fff; background: linear-gradient(135deg, #ef4444, #dc2626); }
.grid-2, .grid-3, .grid-4, .stats-grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4, .stats-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
.stat-card { padding: 20px; box-shadow: var(--shadow-soft); }
.stat-card .label { color: var(--muted); font-size: .88rem; }
.stat-card .value { font-size: 2rem; font-weight: 800; margin-top: 8px; }
.card, .panel, .table-card, .form-card, .empty-state { padding: 22px; }
.card h2, .panel h2, .table-card h2, .form-card h2 { margin: 0 0 14px; font-size: 1.12rem; }
.meta { flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: .92rem; }
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    border-radius: 999px;
    padding: 0 12px;
    font-size: .84rem;
    font-weight: 700;
}
.badge-success { background: rgba(14,159,110,.12); color: var(--success); }
.badge-warning { background: rgba(217,119,6,.12); color: var(--warning); }
.badge-danger { background: rgba(220,38,38,.10); color: var(--danger); }
.badge-muted { background: rgba(100,116,139,.12); color: #475569; }
.alert {
    padding: 14px 16px;
    border-radius: 16px;
    margin-bottom: 18px;
    font-weight: 600;
    border: 1px solid transparent;
}
.alert-success { background: rgba(14,159,110,.12); color: var(--success); border-color: rgba(14,159,110,.16); }
.alert-warning { background: rgba(217,119,6,.12); color: var(--warning); border-color: rgba(217,119,6,.16); }
.alert-danger { background: rgba(220,38,38,.10); color: var(--danger); border-color: rgba(220,38,38,.14); }
.room-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.room-card { overflow: hidden; padding: 0; }
.room-media { aspect-ratio: 16/9; background: linear-gradient(135deg, rgba(79,70,229,.16), rgba(124,58,237,.14)); position: relative; }
.room-media img { width: 100%; height: 100%; object-fit: cover; }
.room-body { padding: 20px; }
.room-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.room-title h3 { margin: 0; font-size: 1.08rem; }
.room-color {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-top: 6px;
    border: 2px solid rgba(255,255,255,.85);
    box-shadow: 0 0 0 2px rgba(15,23,42,.08);
}
.feature-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.room-card { display: flex; flex-direction: column; height: 100%; }
.room-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.room-body > p { margin-bottom: 0; }
.room-card-footer {
    margin-top: auto;
    padding-top: 16px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.room-card-footer .hero-actions { margin-top: 0 !important; }
.room-view-stat {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
    font-size: .85rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
.room-view-stat svg { width: 18px; height: 18px; color: #7c3aed; flex: 0 0 18px; }
.room-view-stat span { display: inline-block; }
.tag {
    display: inline-flex;
    align-items: center;
    height: 28px;
    border-radius: 999px;
    padding: 0 12px;
    font-size: .82rem;
    color: #334155;
    background: #eef2ff;
}
.filter-bar { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 12px; margin-bottom: 18px; }
.input, .select, .textarea {
    width: 100%;
    border: 1px solid rgba(100,116,139,.18);
    border-radius: 14px;
    padding: 13px 14px;
    background: rgba(255,255,255,.95);
    color: var(--text);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.8);
}
.input:focus, .select:focus, .textarea:focus {
    outline: 3px solid rgba(79,70,229,.12);
    border-color: rgba(79,70,229,.4);
}
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
label { display: grid; gap: 8px; font-weight: 600; color: #25344d; }
.help { color: var(--muted); font-size: .85rem; font-weight: 500; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 780px; }
th, td { padding: 14px 14px; border-bottom: 1px solid rgba(148,163,184,.16); text-align: left; vertical-align: top; }
th { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: #64748b; }
tr:hover td { background: rgba(79,70,229,.03); }
.toolbar { justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.calendar-strip { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 12px; }
.day-column {
    background: rgba(255,255,255,.82);
    border: 1px solid var(--line);
    padding: 14px;
    border-radius: 20px;
    min-height: 260px;
}
.day-column h3 { margin: 0 0 10px; font-size: 1rem; }
.event-item {
    border-left: 4px solid var(--primary);
    padding: 10px 12px;
    border-radius: 12px;
    background: #f8faff;
    margin-bottom: 10px;
}
.event-item strong { display: block; margin-bottom: 4px; }
.legend { gap: 12px; flex-wrap: wrap; }
.legend-item { gap: 8px; color: #475569; }
.legend-item span { width: 12px; height: 12px; border-radius: 50%; }
.kpi-stack { display: grid; gap: 16px; }
.progress-list { display: grid; gap: 12px; }
.progress-row { display: grid; gap: 8px; }
.progress-head { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; }
.progress-bar { height: 12px; background: #e7ebf7; border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: inherit; background: linear-gradient(135deg, var(--primary), var(--primary-2)); }
.icon-btn {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
    cursor: pointer;
    transition: .2s ease;
    padding: 10px;
}
.icon-btn:hover { background: rgba(255,255,255,.14); }
.icon-btn-soft {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.08);
}
.empty-state { text-align: center; color: var(--muted); }
.auth-wrap { min-height: calc(100vh - 150px); display: grid; place-items: center; }
.auth-card { width: min(780px, 100%); display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.auth-side { padding: 34px; background: linear-gradient(135deg, rgba(79,70,229,.92), rgba(124,58,237,.9)); color: #fff; }
.auth-side h1 { margin-top: 10px; font-size: 2rem; }
.auth-side p { color: rgba(255,255,255,.85); line-height: 1.75; }
.auth-form { padding: 34px; background: rgba(255,255,255,.96); }
.list-clean { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }

.auth-card-wide { width: min(920px, 100%); }
.auth-provider-stack { display: grid; gap: 10px; }
.auth-divider {
    position: relative;
    margin: 20px 0 18px;
    text-align: center;
    color: var(--muted);
    font-size: .88rem;
    font-weight: 700;
}
.auth-divider::before {
    content: '';
    position: absolute;
    inset: 50% 0 auto 0;
    border-top: 1px solid rgba(148,163,184,.22);
}
.auth-divider span {
    position: relative;
    display: inline-block;
    padding: 0 12px;
    background: rgba(255,255,255,.96);
}
.btn-google {
    width: 100%;
    min-height: 52px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    color: #3c4043;
    background: #fff;
    border: 1px solid #dadce0;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(60,64,67,.08), 0 1px 3px rgba(60,64,67,.12);
    font-size: .96rem;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}
.btn-google:hover {
    color: #202124;
    background: #f8faff;
    border-color: #c7d2fe;
    box-shadow: 0 2px 5px rgba(60,64,67,.16), 0 1px 2px rgba(60,64,67,.10);
    transform: translateY(-1px);
}
.btn-google:active {
    background: #f1f3f4;
    box-shadow: 0 1px 2px rgba(60,64,67,.12);
    transform: translateY(0);
}
.btn-google:focus-visible {
    outline: 3px solid rgba(26,115,232,.20);
    outline-offset: 2px;
    border-color: #1a73e8;
}
.google-logo-wrap,
.google-btn-spacer {
    width: 24px;
    height: 24px;
}
.google-logo-wrap {
    display: grid;
    place-items: center;
}
.google-logo {
    width: 20px;
    height: 20px;
    display: block;
}
.google-btn-label {
    min-width: 0;
    text-align: center;
    white-space: normal;
}
.password-wrap {
    position: relative;
}
.password-wrap .input {
    padding-right: 84px;
}
.password-toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--primary);
    font-weight: 700;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 10px;
}
.password-toggle:hover {
    background: rgba(79,70,229,.08);
}
.quick-grid { display: grid; grid-template-columns: 1.4fr .9fr; gap: 18px; }
.mini-note {
    padding: 14px;
    border-radius: 16px;
    background: #f8fbff;
    border: 1px dashed rgba(79,70,229,.22);
	font-size: .85rem; font-weight: 400;
    color: #44536d;
}
.audio-tools { gap: 10px; flex-wrap: wrap; }

@media (max-width: 1360px) {
    .hero-public-overview {
        grid-template-columns: minmax(0, 1.85fr) minmax(280px, 1fr);
        gap: 20px;
    }

    .hero-card {
        padding: 26px;
    }

    .booking-calendar-frame {
        grid-template-columns: minmax(0, 1fr);
    }

    .booking-calendar-side {
        position: static;
    }
}

@media (max-width: 1180px) {
    .hero, .quick-grid, .grid-4, .stats-grid, .grid-3 { grid-template-columns: 1fr 1fr; }
    .hero-public-overview {
        grid-template-columns: 1fr;
    }
    .hero-public-main,
    .hero-public-side {
        display: grid;
        gap: 20px;
    }
    .monthly-snapshot-card {
        position: static;
    }
    .calendar-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .booking-calendar-frame { grid-template-columns: 1fr; }
    .booking-calendar-side { position: static; }
}

@media (max-width: 900px) {
    .body-wrap { grid-template-columns: 1fr; }
    .sidebar {
        position: fixed;
        inset: var(--topbar-height) auto 0 0;
        width: min(332px, 88vw);
        transform: translateX(-104%);
        transition: .25s ease;
        z-index: 70;
        height: calc(100vh - var(--topbar-height));
        box-shadow: 0 24px 60px rgba(15,23,42,.32);
        border-right: 1px solid rgba(255,255,255,.08);
    }
    .app-shell.nav-open .sidebar { transform: translateX(0); }
    .app-shell.nav-open .nav-overlay { opacity: 1; visibility: visible; }
    .app-shell.sidebar-collapsed .sidebar { padding: 20px 18px; }
    .app-shell.sidebar-collapsed .sidebar-title-wrap,
    .app-shell.sidebar-collapsed .sidebar-state,
    .app-shell.sidebar-collapsed .nav-section-label,
    .app-shell.sidebar-collapsed .nav-label,
    .app-shell.sidebar-collapsed .nav-group-text,
    .app-shell.sidebar-collapsed .nav-chevron,
    .app-shell.sidebar-collapsed .side-feature,
    .app-shell.sidebar-collapsed .feature-list,
    .app-shell.sidebar-collapsed .sidebar-foot > div:last-child {
        width: auto;
        opacity: 1;
        overflow: visible;
        pointer-events: auto;
    }
    .app-shell.sidebar-collapsed .collapse-btn { display: grid; }
    .app-shell.sidebar-collapsed .nav-group-toggle { display: flex; }
    .app-shell.sidebar-collapsed .nav-group-panel { overflow: hidden; }
    .app-shell.sidebar-collapsed .nav-group-panel-inner { padding-left: 16px; }
    .app-shell.sidebar-collapsed .nav-item,
    .app-shell.sidebar-collapsed .nav-group-toggle,
    .app-shell.sidebar-collapsed .sidebar-foot { justify-content: flex-start; padding-inline: 14px; }
    .app-shell.sidebar-collapsed .sidebar-credit-box { display: flex; }
    .app-shell.sidebar-collapsed .nav-item:hover,
    .app-shell.sidebar-collapsed .nav-item.active { transform: translateX(3px); }
    .app-shell.sidebar-collapsed .nav-badge { display: inline-flex; }
    .hero, .quick-grid, .grid-3, .grid-4, .stats-grid, .grid-2, .form-grid, .filter-bar, .auth-card, .hero-public-overview { grid-template-columns: 1fr; }
    .overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .overview-grid-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .event-list-card { grid-template-columns: 1fr; }
    .event-list-actions { justify-content: flex-start; }
    .hero-compact-actions, .event-switcher { width: 100%; justify-content: flex-start; }
    .content { padding: 18px; }
    .topbar { padding: 14px 16px; }
    .calendar-strip { grid-template-columns: 1fr; }
    .booking-calendar-header,
    .booking-calendar-controls,
    .calendar-period-bar { align-items: stretch; }
    .booking-calendar-controls { justify-content: flex-start; }
    .calendar-nav-group,
    .calendar-view-group { flex-wrap: wrap; }
    .calendar-grid.calendar-grid-month,
    .calendar-grid.calendar-grid-week { gap: 10px; }
    .calendar-day { min-height: 108px; }
}

@media (max-width: 680px) {
    .topbar { align-items: flex-start; }
    .brand-wrap { flex: 1 1 auto; }
    .topbar-tools { width: 100%; justify-content: flex-start; }
    .user-chip strong { font-size: .92rem; }
    .hero h1 { font-size: 2rem; }
    .hero-card { padding: 20px 18px; }
    .hero-public-overview .hero-toolbar,
    .hero-public-overview .toolbar-tight {
        gap: 14px;
    }
    .hero-public-overview .hero-actions,
    .hero-public-overview .event-switcher {
        width: 100%;
    }
    .hero-public-overview .hero-actions .btn,
    .hero-public-overview .event-switcher .btn {
        flex: 1 1 calc(50% - 8px);
        justify-content: center;
    }

.monthly-snapshot-card .hero-actions .btn {
    width: 100%;
    justify-content: center;
}
    .overview-grid { grid-template-columns: 1fr; gap: 14px; }
    .overview-grid-compact { grid-template-columns: 1fr; }
    .overview-card { padding: 18px; }
    .overview-label { min-height: auto; }
    .room-grid { grid-template-columns: 1fr; }
    .booking-calendar-card { padding: 18px; }
    .booking-calendar-heading h3 { font-size: 1.18rem; }
    .calendar-grid { padding: 10px; }
    .calendar-grid.calendar-grid-month,
    .calendar-grid.calendar-grid-week {
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 6px;
    }
    .calendar-grid.calendar-grid-month {
        grid-template-columns: repeat(7, minmax(110px, 1fr));
    }
    .calendar-grid.calendar-grid-week {
        grid-template-columns: repeat(7, minmax(150px, 1fr));
    }
    .calendar-weekdays { overflow-x: auto; }
    .calendar-weekdays:not(.is-single-day) { grid-template-columns: repeat(7, minmax(110px, 1fr)); }
    .calendar-day { min-height: 96px; }
    .calendar-hover-tooltip { display: none; }
}

code {
    padding: 2px 6px;
    border-radius: 8px;
    background: #eef2ff;
    color: #24365c;
    font-size: .9em;
}
.hidden { display: none !important; }
.preview-box { overflow: hidden; border-radius: 18px; border: 1px solid rgba(17,24,39,.08); background: #fff; }


.content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    line-height: 1.45;
}

@media (max-width: 768px) {
    .sidebar-credit,
    .sidebar-copy,
    .sidebar-credit a {
        font-size: 11px;
        font-weight: 400;
    }
}


.textarea {
    width: 100%;
    min-height: 110px;
    border: 1px solid rgba(148, 163, 184, .35);
    border-radius: 16px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, .92);
    color: var(--text-primary);
    resize: vertical;
    font: inherit;
}

.table-actions-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.inline-form {
    display: inline-flex;
}

.compact-stats {
    margin-bottom: 18px;
}

.compact-stats .stat-card {
    min-height: 116px;
}

.form-section-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-top: 4px;
}

.terms-box {
    margin-top: 6px;
    padding: 18px 20px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(79,70,229,.05), rgba(124,58,237,.03));
    border: 1px solid rgba(79,70,229,.12);
}

.terms-box strong {
    display: block;
    margin-bottom: 10px;
    font-size: 1rem;
}

.terms-list {
    margin: 0;
    padding-left: 18px;
    color: var(--muted);
    line-height: 1.7;
}

.terms-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.terms-check input {
    margin-top: 3px;
    flex: 0 0 auto;
}

button[disabled],
.btn[disabled] {
    opacity: .58;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(.12);
}

/* --- merged patch: overview cards + sidebar feature text --- */
.hero-public-overview .hero-card > .toolbar > div:first-child h1,
.hero-public-overview h1 {
    font-size: clamp(1.9rem, 2.5vw, 30px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 14px 0 12px;
    max-width: 100%;
    text-wrap: balance;
}

.side-feature strong,
.side-feature p,
.feature-list li {
    font-size: 11px;
    line-height: 1.7;
}

.side-feature strong {
    font-weight: 700;
}

.feature-list li {
    padding: 11px 13px;
}

.overview-grid {
    gap: 18px;
}

.overview-card {
    position: relative;
    overflow: hidden;
    padding: 22px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(244,247,255,.93));
    border: 1px solid rgba(129, 140, 248, .16);
    box-shadow: 0 14px 32px rgba(15, 23, 42, .07);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
    isolation: isolate;
}

.overview-card::before {
    content: '';
    position: absolute;
    inset: auto -36px -42px auto;
    width: 118px;
    height: 118px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(99,102,241,.14), transparent 70%);
    z-index: 0;
    opacity: .8;
    transition: transform .22s ease, opacity .22s ease;
}

.overview-card > * {
    position: relative;
    z-index: 1;
}

.overview-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}

.overview-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    flex: 0 0 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #14284c;
    background: linear-gradient(180deg, rgba(79,70,229,.08), rgba(124,58,237,.12));
    border: 1px solid rgba(79,70,229,.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 18px rgba(79,70,229,.08);
    transition: transform .22s ease, color .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
}

.overview-icon svg {
    width: 28px;
    height: 28px;
    display: block;
    flex: 0 0 28px;
}

.overview-label {
    min-height: 0;
    margin: 0;
    font-size: .95rem;
    line-height: 1.45;
    color: #5c6d89;
    font-weight: 700;
}

.overview-value {
    margin-top: 6px;
    font-size: clamp(2rem, 2.4vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.overview-meta {
    margin-top: 8px;
    font-size: .84rem;
    line-height: 1.6;
    color: #6c7b94;
}

.overview-card-rooms:hover,
.overview-card-booked:hover,
.overview-card-usage:hover,
.overview-card-attendees:hover,
.overview-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 42px rgba(15, 23, 42, .12);
    border-color: rgba(99, 102, 241, .28);
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(241,244,255,.98));
}

.overview-card:hover::before {
    opacity: 1;
    transform: scale(1.08);
}

.overview-card:hover .overview-icon {
    color: #fff;
    border-color: transparent;
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 16px 32px rgba(79,70,229,.24);
}

.overview-card-rooms:hover .overview-icon {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
}

.overview-card-booked:hover .overview-icon {
    background: linear-gradient(135deg, #4f46e5, #06b6d4);
}

.overview-card-usage:hover .overview-icon {
    background: linear-gradient(135deg, #7c3aed, #8b5cf6);
}

.overview-card-attendees:hover .overview-icon {
    background: linear-gradient(135deg, #4338ca, #0ea5e9);
}

@media (max-width: 680px) {
    .hero-public-overview h1 {
        font-size: 1.9rem;
        line-height: 1.18;
    }

    .overview-head {
        gap: 12px;
    }

    .overview-icon {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
        border-radius: 16px;
    }

    .overview-icon svg {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
    }
}

.room-upload-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.room-upload-card {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(148,163,184,.18);
    background: rgba(248,250,255,.86);
}
.room-upload-card strong { font-size: .95rem; color: #1e293b; }
.room-upload-preview {
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 16/10;
    background: #e9eefc;
    display: grid;
    place-items: center;
    color: var(--muted);
}
.room-upload-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.room-upload-preview.is-empty {
    border: 1px dashed rgba(148,163,184,.35);
    background: rgba(255,255,255,.72);
}
.check-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.room-detail-card { padding-bottom: 0; }
.room-gallery {
    padding: 20px 20px 0;
    display: grid;
    gap: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.1));
}
.room-gallery-stage {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, rgba(79,70,229,.14), rgba(124,58,237,.12));
}
.room-gallery-slide {
    position: absolute;
    inset: 0;
    padding: 0;
    border: 0;
    background: transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s ease, transform .45s ease;
    cursor: zoom-in;
}
.room-gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.room-gallery-slide.is-active {
    opacity: 1;
    visibility: visible;
}
.gallery-nav,
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(15,23,42,.62);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.65rem;
    cursor: pointer;
    z-index: 2;
    backdrop-filter: blur(10px);
}
.gallery-nav.prev,
.lightbox-nav.prev { left: 18px; }
.gallery-nav.next,
.lightbox-nav.next { right: 18px; }
.gallery-dots {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
}
.gallery-dot {
    width: 10px;
    height: 10px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.46);
    cursor: pointer;
    padding: 0;
}
.gallery-dot.is-active { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.14); }
.gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 10px;
}
.gallery-thumb {
    border: 2px solid transparent;
    background: transparent;
    padding: 0;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4/3;
    cursor: pointer;
    box-shadow: var(--shadow-soft);
}
.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gallery-thumb.is-active { border-color: rgba(79,70,229,.72); }
.gallery-hint {
    color: var(--muted);
    font-size: .84rem;
    padding-bottom: 8px;
}
.room-media-empty {
    min-height: 300px;
    display: grid;
    place-items: center;
    gap: 6px;
    text-align: center;
    color: var(--muted);
    padding: 24px;
}
.room-media-empty strong { color: #1e293b; font-size: 1.05rem; }

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) 80px;
    align-items: center;
    gap: 16px;
    padding: 36px;
    background: rgba(2, 6, 23, .88);
    backdrop-filter: blur(16px);
}
.lightbox[hidden] { display: none; }
.lightbox-figure {
    margin: 0;
    display: grid;
    gap: 12px;
    justify-items: center;
}
.lightbox-figure img {
    max-width: min(92vw, 1440px);
    max-height: 82vh;
    width: auto;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 24px 80px rgba(0,0,0,.38);
}
.lightbox-figure figcaption {
    color: rgba(255,255,255,.86);
    text-align: center;
}
.lightbox-close {
    position: absolute;
    top: 18px;
    right: 22px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(15,23,42,.7);
    color: #fff;
    font-size: 1.9rem;
    cursor: pointer;
}

@media (max-width: 900px) {
    .room-upload-grid { grid-template-columns: 1fr; }
    .room-gallery { padding: 14px 14px 0; }
    .gallery-nav { width: 40px; height: 40px; }
    .lightbox {
        grid-template-columns: 1fr;
        padding: 24px 14px;
    }
    .lightbox-nav {
        position: fixed;
        top: auto;
        bottom: 24px;
        transform: none;
    }
    .lightbox-nav.prev { left: 24px; }
    .lightbox-nav.next { right: 24px; }
}


.hero-home-single-column {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: stretch;
}
.hero-home-single-column .hero-card {
    min-width: 0;
    height: auto;
}
.snapshot-top-card {
    position: static;
}
.hero-toolbar-inline {
    justify-content: space-between;
    align-items: flex-start;
}
.snapshot-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 20px;
}
.snapshot-summary-grid .overview-label {
    min-height: auto;
}
.room-weekly-schedule .toolbar > div:first-child {
    min-width: 0;
}
.room-weekly-schedule .section-help {
    margin: 8px 0 0;
    max-width: 100%;
}
.room-calendar-strip .day-column {
    min-height: 220px;
}

@media (max-width: 1280px) {
    .snapshot-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    .hero-home-single-column {
        gap: 20px;
    }
    .hero-toolbar-inline {
        flex-direction: column;
        align-items: stretch;
    }
    .hero-toolbar-inline .hero-compact-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .snapshot-summary-grid {
        grid-template-columns: 1fr;
    }
}


/* --- 2026-05-18 security/responsive polish patch --- */
.inline-form { display: inline-flex; margin: 0; }
.inline-form .btn { width: auto; }
.table-actions,
.action-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

@media (max-width: 680px) {
    .toolbar,
    .toolbar-tight,
    .booking-calendar-header,
    .booking-calendar-controls,
    .event-list-card,
    .room-title {
        align-items: stretch;
    }
    .hero-actions,
    .event-switcher,
    .table-actions,
    .action-row {
        width: 100%;
    }
    .hero-actions .btn,
    .event-switcher .btn,
    .table-actions .btn,
    .action-row .btn,
    .inline-form,
    .inline-form .btn {
        width: 100%;
        justify-content: center;
    }
    .table-wrap table {
        min-width: 720px;
    }
    .filter-bar {
        grid-template-columns: 1fr;
    }
    .snapshot-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* --- hotfix 2026-05-19: compact Monthly Snapshot flashcards height 120px + keep meta visible --- */
.snapshot-summary-grid .overview-card {
    height: 120px;
    min-height: 120px;
    padding: 12px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.snapshot-summary-grid .overview-head {
    gap: 10px;
    margin-bottom: 0;
    min-height: 36px;
    align-items: flex-start;
}

.snapshot-summary-grid .overview-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 13px;
}

.snapshot-summary-grid .overview-icon svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}

.snapshot-summary-grid .overview-label {
    font-size: .83rem;
    line-height: 1.18;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.snapshot-summary-grid .overview-value {
    width: 100%;
    margin-top: 0;
    font-size: clamp(1.9rem, 2vw, 2.25rem);
    line-height: .90;
    text-align: right;
}

.snapshot-summary-grid .overview-meta {
    width: 100%;
    margin-top: auto;
    font-size: .72rem;
    line-height: 1.15;
    color: #6c7b94;
    text-align: right;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 640px) {
    .snapshot-summary-grid .overview-card {
        height: auto;
        min-height: 120px;
    }

    .snapshot-summary-grid .overview-meta {
        display: block;
    }
}


/* --- hotfix 2026-05-18: clickable snapshot cards scroll to target sections --- */
html {
    scroll-behavior: smooth;
}

.featured-rooms-panel,
#booking-calendar,
#meeting-timeline {
    scroll-margin-top: calc(var(--topbar-height, 72px) + 24px);
}

.snapshot-scroll-card {
    display: grid;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.snapshot-static-card {
    cursor: default;
}

.snapshot-scroll-card:visited,
.snapshot-scroll-card:hover,
.snapshot-scroll-card:focus {
    color: inherit;
    text-decoration: none;
}

.snapshot-scroll-card:focus-visible {
    outline: 3px solid rgba(79, 70, 229, .32);
    outline-offset: 4px;
}

/* --- hotfix 2026-05-18: booked snapshot card is informational only --- */
.snapshot-static-card:hover {
    transform: none;
    box-shadow: 0 14px 32px rgba(15, 23, 42, .07);
    border-color: rgba(129, 140, 248, .16);
    background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(244,247,255,.93));
}

.snapshot-static-card:hover::before {
    opacity: .8;
    transform: none;
}

.snapshot-static-card:hover .overview-icon {
    color: #14284c;
    background: linear-gradient(180deg, rgba(79,70,229,.08), rgba(124,58,237,.12));
    border-color: rgba(79,70,229,.10);
    transform: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 18px rgba(79,70,229,.08);
}


/* --- enhancement 2026-05-19: room view statistics dashboard --- */
.stats-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stat-card strong {
    display: block;
    margin-top: 8px;
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1;
    letter-spacing: -0.04em;
    color: #10213f;
}

.room-stat-thumb {
    width: 96px;
    height: 64px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid rgba(129, 140, 248, .18);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
    background: #f8fafc;
}

@media (max-width: 1100px) {
    .stats-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .stats-summary-grid {
        grid-template-columns: 1fr;
    }

    .room-stat-thumb {
        width: 82px;
        height: 56px;
    }
}

@media (max-width: 640px) {
    .room-card-footer {
        align-items: stretch;
    }

    .room-view-stat {
        width: 100%;
        justify-content: flex-end;
    }
}

/* --- hotfix 2026-05-19: force visible room visitor badge on room cards --- */
.room-card-footer {
    margin-top: auto;
    padding-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: nowrap;
}
.room-view-stat,
.room-view-stat-visible {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 7px 10px !important;
    border-radius: 999px !important;
    background: rgba(238,242,255,.96) !important;
    border: 1px solid rgba(99,102,241,.18) !important;
    color: #475569 !important;
    font-size: .82rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: 0 8px 18px rgba(79,70,229,.10) !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.room-view-stat svg,
.room-view-stat-visible svg {
    width: 17px !important;
    height: 17px !important;
    color: #7c3aed !important;
    flex: 0 0 17px !important;
}
@media (max-width: 640px) {
    .room-card-footer { flex-wrap: wrap; }
    .room-view-stat, .room-view-stat-visible { margin-left: auto; }
}


/* --- hotfix 2026-05-19: show visitor badge as image overlay for reliable visibility --- */
.room-media {
    overflow: hidden;
}
.room-view-stat-overlay,
.room-view-stat-visible.room-view-stat-overlay {
    position: absolute !important;
    right: 12px !important;
    bottom: 12px !important;
    z-index: 5 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 8px 11px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.94) !important;
    border: 1px solid rgba(99,102,241,.20) !important;
    color: #334155 !important;
    font-size: .82rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: 0 12px 26px rgba(15,23,42,.18) !important;
    backdrop-filter: blur(10px);
    opacity: 1 !important;
    visibility: visible !important;
}
.room-view-stat-overlay svg,
.room-view-stat-visible.room-view-stat-overlay svg {
    width: 17px !important;
    height: 17px !important;
    color: #7c3aed !important;
    flex: 0 0 17px !important;
}
.room-card-footer .room-view-stat,
.room-card-footer .room-view-stat-visible {
    display: none !important;
}
@media (max-width: 640px) {
    .room-view-stat-overlay,
    .room-view-stat-visible.room-view-stat-overlay {
        right: 10px !important;
        bottom: 10px !important;
        font-size: .78rem !important;
        padding: 7px 9px !important;
    }
}

/* --- hotfix 2026-05-19: responsive public topbar auth buttons for mobile/tablet --- */
.topbar {
    flex-wrap: wrap;
}

.brand-wrap {
    flex: 1 1 320px;
}

.brand {
    flex: 1 1 auto;
}

.topbar-tools {
    min-width: 0;
}

@media (max-width: 1024px) {
    .topbar {
        gap: 12px;
        padding: 14px 18px;
    }

    .brand-wrap {
        flex: 1 1 360px;
    }

    .topbar-tools {
        flex: 1 1 100%;
        width: 100%;
        margin-left: 0;
        justify-content: flex-end;
        gap: 10px;
    }

    .topbar-tools .btn,
    .topbar-tools .top-link {
        min-height: 44px;
    }
}

@media (max-width: 680px) {
    .app-shell {
        --topbar-height: 172px;
    }

    .topbar {
        align-items: flex-start;
        padding: 12px 14px 14px;
    }

    .brand-wrap {
        width: 100%;
        flex: 1 1 100%;
        gap: 12px;
    }

    .menu-toggle {
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
        border-radius: 16px;
    }

    .brand-mark {
        width: 48px;
        height: 48px;
        border-radius: 17px;
        flex: 0 0 48px;
    }

    .brand strong {
        font-size: .98rem;
        line-height: 1.2;
    }

    .brand small {
        max-width: 100%;
        font-size: .78rem;
        line-height: 1.25;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .topbar-tools {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 10px;
        align-items: stretch;
        justify-content: stretch;
    }

    .topbar-tools .top-link {
        grid-column: 1 / -1;
        min-height: 40px;
        justify-content: center;
        padding: 8px 12px;
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 14px;
        background: rgba(255,255,255,.06);
        color: rgba(255,255,255,.92);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .topbar-tools .btn {
        width: 100%;
        min-height: 50px;
        justify-content: center;
        padding: 11px 12px;
        border-radius: 16px;
        font-size: .98rem;
        line-height: 1.1;
        white-space: nowrap;
    }

    .topbar-tools .btn-outline {
        background: rgba(255,255,255,.07);
        border-color: rgba(255,255,255,.18);
    }

    .topbar-tools .btn-primary {
        box-shadow: 0 14px 30px rgba(124,58,237,.28);
    }

    .topbar-tools .btn-icon {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
    }

    .topbar-tools .user-chip {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
        justify-content: flex-start;
    }
}

@media (max-width: 380px) {
    .app-shell {
        --topbar-height: 226px;
    }

    .topbar-tools {
        grid-template-columns: 1fr;
    }

    .topbar-tools .top-link,
    .topbar-tools .btn,
    .topbar-tools .user-chip {
        grid-column: 1 / -1;
    }
}

/* --- hotfix 2026-05-19: restore footer visitor badge after mobile topbar patch --- */
.room-card-footer .room-view-stat,
.room-card-footer .room-view-stat-visible {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.room-card-footer {
    margin-top: auto !important;
    padding-top: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
}

.room-view-stat,
.room-view-stat-visible {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 7px 10px !important;
    border-radius: 999px !important;
    background: rgba(238,242,255,.96) !important;
    border: 1px solid rgba(99,102,241,.18) !important;
    color: #475569 !important;
    font-size: .82rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: 0 8px 18px rgba(79,70,229,.10) !important;
}

.room-view-stat svg,
.room-view-stat-visible svg {
    width: 17px !important;
    height: 17px !important;
    color: #7c3aed !important;
    flex: 0 0 17px !important;
}

@media (max-width: 640px) {
    .room-card-footer {
        flex-wrap: wrap !important;
        align-items: center !important;
    }

    .room-card-footer .room-view-stat,
    .room-card-footer .room-view-stat-visible {
        width: auto !important;
        margin-left: auto !important;
        justify-content: flex-end !important;
    }
}

/* Room listing UX refresh */
.room-filter-summary {
    margin: -4px 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(100,116,139,.14);
    border-radius: 18px;
    background: rgba(255,255,255,.82);
    color: #64748b;
    box-shadow: 0 10px 22px rgba(15,23,42,.05);
}

.room-filter-summary strong {
    color: #1e293b;
    font-size: 1.05rem;
}

.room-filter-summary.is-filtered {
    border-color: rgba(79,70,229,.22);
    background: rgba(238,242,255,.76);
}

.room-filter-empty {
    margin: 0 0 18px;
}

.room-card {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.room-card[hidden] {
    display: none !important;
}

.room-card:hover,
.room-card:focus-within {
    transform: translateY(-3px);
    box-shadow: 0 20px 38px rgba(15,23,42,.12);
    border-color: rgba(79,70,229,.18);
}

.room-media img {
    transition: transform .26s ease;
}

.room-card:hover .room-media img,
.room-card:focus-within .room-media img {
    transform: scale(1.025);
}

@media (max-width: 640px) {
    .room-filter-summary {
        align-items: stretch;
        flex-direction: column;
    }

    .room-filter-summary .btn {
        width: 100%;
    }
}

/* WAF status readability */
.waf-status-card .table-wrap {
    overflow-x: auto;
}

.waf-status-card th {
    white-space: nowrap;
}

.waf-status-card td {
    vertical-align: top;
}

.waf-path {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.waf-csp-value {
    display: block;
    max-height: 168px;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.65;
    padding: 10px 12px;
}
/* Chat Support / Helpdesk */
.chat-support-layout {
    grid-template-columns: minmax(280px, .95fr) minmax(0, 1.55fr);
    align-items: start;
}
.chat-admin-layout {
    grid-template-columns: minmax(320px, 1fr) minmax(0, 1.45fr);
}
.chat-thread-list,
.chat-main-panel {
    min-height: 520px;
}
.chat-thread-link {
    display: block;
    color: inherit;
    text-decoration: none;
    border: 1px solid rgba(148,163,184,.16);
    transition: .2s ease;
}
.chat-thread-link:hover,
.chat-thread-link.is-active {
    border-color: rgba(79,70,229,.35);
    background: #f8faff;
    transform: translateY(-1px);
}
.chat-message-list {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(248,250,252,.95), rgba(238,242,255,.72));
    border: 1px solid rgba(148,163,184,.16);
    margin-bottom: 16px;
    max-height: 540px;
    overflow-y: auto;
}
.chat-bubble {
    width: min(88%, 680px);
    padding: 14px 16px;
    border-radius: 18px;
    box-shadow: 0 10px 26px rgba(15,23,42,.06);
    border: 1px solid rgba(148,163,184,.16);
}
.chat-bubble.is-me {
    justify-self: end;
    background: linear-gradient(135deg, rgba(79,70,229,.95), rgba(124,58,237,.92));
    color: #fff;
}
.chat-bubble.is-admin {
    justify-self: start;
    background: #fff;
    color: var(--text);
}
.chat-bubble-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: .86rem;
    margin-bottom: 8px;
    opacity: .86;
}
.chat-bubble-body {
    white-space: normal;
    line-height: 1.65;
}
.chat-reply-form {
    padding-top: 4px;
}
@media (max-width: 980px) {
    .chat-support-layout,
    .chat-admin-layout {
        grid-template-columns: 1fr;
    }
    .chat-thread-list,
    .chat-main-panel {
        min-height: auto;
    }
    .chat-bubble {
        width: 100%;
    }
}

/* --- 2026-06-12 UI/UX stability patch --- */
:root {
    --font-size-body: clamp(14px, 0.25vw + 13px, 16px);
    --font-size-heading: clamp(1.45rem, 2.2vw, 2.45rem);
    --font-size-section: clamp(1.12rem, 1vw + .95rem, 1.55rem);
}

html { font-size: var(--font-size-body); scroll-behavior: smooth; }
body { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }

.brand-text { min-width: 0; }
.brand-mark-image {
    background: rgba(255,255,255,.95);
    padding: 6px;
    box-shadow: 0 10px 28px rgba(15,23,42,.18);
}
.brand-mark-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 12px;
}

.content h1 { font-size: var(--font-size-heading); line-height: 1.18; margin: 0 0 8px; }
.content h2 { font-size: var(--font-size-section); line-height: 1.28; }
.hero h1 { font-size: clamp(1.7rem, 2.8vw, 2.7rem); line-height: 1.14; }
.hero-card { min-width: 0; }
.card, .panel, .table-card, .form-card, .empty-state { min-width: 0; }

.topbar { min-height: var(--topbar-height); }
.topbar-tools .btn { white-space: normal; text-align: center; }

.table-wrap { border-radius: 18px; }
.table-wrap table { min-width: 760px; }

.form-section-title {
    padding: 6px 0 2px;
    font-size: .96rem;
    font-weight: 800;
    color: #1e293b;
}
.terms-box {
    padding: 18px;
    border-radius: 20px;
    background: #f8fbff;
    border: 1px solid rgba(79,70,229,.14);
}
.terms-list { margin: 10px 0 14px; padding-left: 22px; color: #475569; line-height: 1.7; }
.terms-check { display: flex; align-items: flex-start; gap: 10px; font-weight: 700; }
.terms-check input { margin-top: .25em; }

@media (max-width: 1024px) {
    .content { padding: 22px; }
    .hero-card, .panel, .card, .table-card, .form-card { border-radius: 20px; }
}

@media (max-width: 680px) {
    .app-shell { --topbar-height: 80px; }
    .topbar { gap: 10px; }
    .brand small { -webkit-line-clamp: 2; }
    .topbar-tools { grid-template-columns: 1fr; }
    .topbar-tools .top-link,
    .topbar-tools .btn,
    .topbar-tools .user-chip { grid-column: 1 / -1; }
    .content { padding: 14px; }
    .hero h1 { font-size: 1.65rem; }
    .hero-card, .panel, .card, .table-card, .form-card { padding: 18px; }
    .room-body { padding: 16px; }
    .room-title { gap: 8px; }
    .room-title h3 { font-size: 1rem; }
    .overview-value { font-size: clamp(1.65rem, 9vw, 2.2rem); }
    .filter-bar, .form-grid { gap: 12px; }
    .btn { width: 100%; min-height: 46px; }
    .hero-actions { width: 100%; }
    .hero-actions .btn, .hero-actions form { flex: 1 1 100%; }
}

@media (max-width: 380px) {
    .app-shell { --topbar-height: 80px; }
    .brand-mark { width: 42px; height: 42px; flex-basis: 42px; }
    .menu-toggle { width: 42px; height: 42px; flex-basis: 42px; }
}

/* --- Daily popup announcements: 2026-06-17 --- */
.daily-popup-lock {
    overflow: hidden;
}
.daily-popup-root {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, visibility .22s ease;
}
.daily-popup-root.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.daily-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .58);
    backdrop-filter: blur(8px);
}
.daily-popup-card {
    position: relative;
    width: min(680px, 100%);
    max-height: min(82vh, 760px);
    overflow-y: auto;
    border-radius: 30px;
    background:
        radial-gradient(circle at top left, rgba(79, 70, 229, .12), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
    border: 1px solid rgba(255,255,255,.78);
    box-shadow: 0 28px 90px rgba(15,23,42,.30);
    padding: clamp(22px, 4vw, 34px);
    transform: translateY(14px) scale(.98);
    transition: transform .22s ease;
}
.daily-popup-root.is-visible .daily-popup-card {
    transform: translateY(0) scale(1);
}
.daily-popup-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 999px;
    background: rgba(15,23,42,.07);
    color: #0f172a;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    transition: .2s ease;
}
.daily-popup-close:hover {
    background: rgba(79,70,229,.13);
    transform: rotate(8deg);
}
.daily-popup-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    margin-bottom: 12px;
    border-radius: 999px;
    background: rgba(79,70,229,.10);
    color: var(--primary, #4f46e5);
    font-size: .86rem;
    font-weight: 800;
}
.daily-popup-card h2,
.popup-preview-card h2 {
    margin: 0 0 12px;
    font-size: clamp(1.35rem, 2vw, 2rem);
    line-height: 1.25;
    color: #0f172a;
}
.daily-popup-body {
    color: #334155;
    line-height: 1.75;
    font-size: 1rem;
}
.daily-popup-body :first-child { margin-top: 0; }
.daily-popup-body :last-child { margin-bottom: 0; }
.daily-popup-body h2,
.daily-popup-body h3,
.daily-popup-body h4 {
    color: #172554;
    line-height: 1.28;
    margin: 1rem 0 .5rem;
}
.daily-popup-body ul,
.daily-popup-body ol {
    padding-left: 1.4rem;
}
.daily-popup-body a {
    color: var(--primary, #4f46e5);
    font-weight: 700;
}
.daily-popup-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}
.popup-admin-layout {
    grid-template-columns: minmax(360px, 1.1fr) minmax(300px, .9fr);
    align-items: start;
}
.popup-rich-editor label {
    display: block;
    font-weight: 800;
    margin-bottom: 8px;
}
.popup-rich-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 16px;
    background: rgba(248,250,252,.9);
    border: 1px solid rgba(148,163,184,.18);
}
.popup-rich-toolbar .btn-sm,
.table-actions .btn-sm {
    width: auto;
    min-height: 34px;
    padding: 7px 11px;
    font-size: .82rem;
}
.popup-preview-panel {
    position: sticky;
    top: calc(var(--topbar-height, 74px) + 18px);
}
.popup-preview-card {
    margin-top: 14px;
    padding: clamp(18px, 3vw, 28px);
    border-radius: 28px;
    background:
        radial-gradient(circle at top left, rgba(79, 70, 229, .12), transparent 35%),
        #fff;
    border: 1px solid rgba(148,163,184,.18);
    box-shadow: 0 18px 55px rgba(15,23,42,.10);
}
.table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.table-actions form {
    margin: 0;
}
@media (max-width: 980px) {
    .popup-admin-layout {
        grid-template-columns: 1fr;
    }
    .popup-preview-panel {
        position: static;
    }
}
@media (max-width: 680px) {
    .daily-popup-root {
        padding: 14px;
        align-items: end;
    }
    .daily-popup-card {
        border-radius: 24px 24px 18px 18px;
        max-height: 86vh;
        padding: 22px 18px;
    }
    .daily-popup-actions .btn {
        flex: 1 1 100%;
    }
    .popup-rich-toolbar .btn-sm,
    .table-actions .btn-sm {
        width: auto;
        flex: 1 1 auto;
    }
}

/* --- UX/UI refresh 2026-07-03: accessibility, mobile admin forms, responsive tables --- */
.skip-link {
    position: fixed;
    left: 16px;
    top: 12px;
    z-index: 2000;
    transform: translateY(-140%);
    padding: 10px 14px;
    border-radius: 999px;
    background: #fff;
    color: #1e293b;
    box-shadow: 0 12px 30px rgba(15,23,42,.22);
    font-weight: 800;
    transition: transform .18s ease;
}
.skip-link:focus { transform: translateY(0); outline: 3px solid rgba(79,70,229,.22); }
.content:focus { outline: none; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.nav-item:focus-visible,
.icon-btn:focus-visible,
.btn:focus-visible {
    outline: 3px solid rgba(79,70,229,.22);
    outline-offset: 3px;
}

.toolbar {
    align-items: flex-start;
    padding: 20px 22px;
    border-radius: 24px;
    background:
        radial-gradient(circle at top left, rgba(79,70,229,.10), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.76));
    border: 1px solid rgba(255,255,255,.72);
    box-shadow: 0 14px 38px rgba(15,23,42,.08);
}
.toolbar h1 { margin-bottom: 8px; }
.toolbar .help { max-width: 860px; line-height: 1.7; }
.toolbar .hero-actions { justify-content: flex-end; margin-top: 0; }

.ux-guide-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 18px;
}
.ux-guide-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    min-width: 0;
    padding: 16px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,255,.88));
    border: 1px solid rgba(79,70,229,.12);
    box-shadow: 0 10px 28px rgba(15,23,42,.06);
}
.ux-guide-step {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 13px;
    flex: 0 0 34px;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    font-weight: 900;
    box-shadow: 0 10px 20px rgba(79,70,229,.22);
}
.ux-guide-card strong { display: block; color: #17233c; margin-bottom: 4px; }
.ux-guide-card p { margin: 0; color: #64748b; line-height: 1.6; font-size: .9rem; }

.form-card.monthly-booking-form {
    border-radius: 28px;
    box-shadow: 0 20px 60px rgba(15,23,42,.12);
}
.monthly-booking-form .form-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: start;
}
.monthly-booking-form .form-grid > label,
.monthly-booking-form .form-grid > div:not(.full):not(.form-section-title) {
    grid-column: span 3;
}
.monthly-booking-form .form-grid > label.full,
.monthly-booking-form .form-grid > .full {
    grid-column: 1 / -1;
}
.monthly-booking-form label {
    min-width: 0;
    padding: 12px;
    border-radius: 18px;
    background: rgba(248,250,252,.68);
    border: 1px solid rgba(148,163,184,.12);
}
.monthly-booking-form label:focus-within {
    background: #fff;
    border-color: rgba(79,70,229,.28);
    box-shadow: 0 10px 28px rgba(79,70,229,.08);
}
.monthly-booking-form .form-section-title,
.form-section-title {
    margin: 12px 0 0;
    padding: 12px 14px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(79,70,229,.10), rgba(6,182,212,.08));
    border: 1px solid rgba(79,70,229,.12);
    color: #172554;
    letter-spacing: .01em;
}
.input, .select, .textarea {
    min-height: 48px;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.select { cursor: pointer; }
.input::placeholder, .textarea::placeholder { color: #94a3b8; }
.help { line-height: 1.6; }
.form-actions-sticky {
    padding-top: 8px;
    border-top: 1px solid rgba(148,163,184,.14);
}

.table-card h2 { display: flex; align-items: center; gap: 10px; }
.table-wrap {
    position: relative;
    border: 1px solid rgba(148,163,184,.14);
    background: rgba(255,255,255,.72);
}
.table-wrap::after {
    content: 'เลื่อนตารางซ้าย–ขวาเพื่อดูข้อมูลทั้งหมด';
    position: sticky;
    left: 0;
    display: none;
    padding: 10px 12px;
    color: #64748b;
    font-size: .82rem;
    background: linear-gradient(90deg, rgba(248,250,252,.98), rgba(248,250,252,.80));
    border-top: 1px solid rgba(148,163,184,.14);
}
.table-wrap table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(248,250,252,.98);
    backdrop-filter: blur(8px);
}
.table-wrap.is-responsive-table td strong { color: #172554; }

.ux-back-to-top {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 90;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    box-shadow: 0 16px 34px rgba(79,70,229,.28);
    cursor: pointer;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: .18s ease;
}
.ux-back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.ux-back-to-top svg { width: 22px; height: 22px; }

@media (max-width: 1180px) {
    .monthly-booking-form .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .monthly-booking-form .form-grid > label,
    .monthly-booking-form .form-grid > div:not(.full):not(.form-section-title) { grid-column: span 1; }
}

@media (max-width: 900px) {
    .toolbar { padding: 18px; }
    .toolbar .hero-actions { width: 100%; justify-content: flex-start; }
    .ux-guide-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
    body.is-authenticated .topbar {
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        padding: 10px 12px;
    }
    body.is-authenticated .brand-wrap {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
    }
    body.is-authenticated .brand { gap: 10px; }
    body.is-authenticated .brand small { display: none; }
    body.is-authenticated .brand strong {
        max-width: 42vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    body.is-authenticated .topbar-tools {
        display: flex;
        flex: 0 0 auto;
        width: auto;
        gap: 6px;
    }
    body.is-authenticated .topbar-tools .user-chip { display: none; }
    body.is-authenticated .topbar-tools .top-link {
        width: 42px;
        height: 42px;
        min-height: 42px;
        padding: 0;
        font-size: 0;
        border-radius: 14px;
        justify-content: center;
    }
    body.is-authenticated .topbar-tools .top-link .pill { font-size: .75rem; }
    body.is-authenticated .topbar-tools .btn.topbar-action {
        width: 42px;
        min-width: 42px;
        min-height: 42px;
        padding: 0;
        border-radius: 14px;
    }
    body.is-authenticated .topbar-tools .btn.topbar-action span:not(.btn-icon) { display: none; }

    .toolbar { border-radius: 20px; margin-bottom: 14px; }
    .toolbar .hero-actions .btn { flex: 1 1 100%; }
    .monthly-booking-form .form-grid { grid-template-columns: 1fr; }
    .monthly-booking-form .form-grid > label,
    .monthly-booking-form .form-grid > div:not(.full):not(.form-section-title) { grid-column: 1 / -1; }
    .monthly-booking-form label { padding: 10px; }
    .form-actions-sticky {
        position: sticky;
        bottom: 0;
        z-index: 15;
        margin: 16px -18px -18px;
        padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
        background: rgba(255,255,255,.94);
        backdrop-filter: blur(14px);
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -12px 30px rgba(15,23,42,.10);
    }

    .table-wrap:not(.is-responsive-table)::after { display: block; }
    .table-wrap.is-responsive-table {
        overflow: visible;
        border: 0;
        background: transparent;
    }
    .table-wrap.is-responsive-table table,
    .table-wrap.is-responsive-table thead,
    .table-wrap.is-responsive-table tbody,
    .table-wrap.is-responsive-table tr,
    .table-wrap.is-responsive-table th,
    .table-wrap.is-responsive-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }
    .table-wrap.is-responsive-table thead { display: none; }
    .table-wrap.is-responsive-table tbody { display: grid; gap: 12px; }
    .table-wrap.is-responsive-table tr {
        border-radius: 18px;
        background: #fff;
        border: 1px solid rgba(148,163,184,.16);
        box-shadow: 0 10px 26px rgba(15,23,42,.06);
        overflow: hidden;
    }
    .table-wrap.is-responsive-table td {
        display: grid;
        grid-template-columns: minmax(108px, 38%) minmax(0, 1fr);
        gap: 10px;
        align-items: start;
        padding: 12px 14px;
        border-bottom: 1px solid rgba(148,163,184,.12);
        background: transparent !important;
    }
    .table-wrap.is-responsive-table td:last-child { border-bottom: 0; }
    .table-wrap.is-responsive-table td::before {
        content: attr(data-label);
        color: #64748b;
        font-size: .78rem;
        font-weight: 800;
        letter-spacing: .02em;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* Booking admin: field-based search/filter controls */
.booking-search-panel {
    margin: 0 0 18px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(79,70,229,.12);
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,255,.92));
    box-shadow: 0 14px 34px rgba(15,23,42,.06);
}
.booking-search-form {
    display: grid;
    grid-template-columns: minmax(190px, .9fr) minmax(260px, 1.4fr) auto;
    gap: 14px;
    align-items: end;
}
.booking-search-form [hidden] { display: none !important; }
.booking-search-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.booking-search-summary {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(148,163,184,.16);
}

@media (max-width: 760px) {
    .booking-search-form {
        grid-template-columns: 1fr;
    }
    .booking-search-actions {
        justify-content: flex-start;
    }
    .booking-search-actions .btn {
        width: 100%;
    }
}

/* ===== assets/css/uxui-20260716.css ===== */
/* --- UX/UI system refinement 2026-07-16 --- */
:root {
    --topbar-height: 76px;
    --content-max-width: 1680px;
    --control-height: 48px;
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --focus-ring: 0 0 0 4px rgba(79, 70, 229, .14);
    --surface-border: rgba(148, 163, 184, .18);
    --surface-shadow: 0 12px 36px rgba(15, 23, 42, .08);
    --surface-shadow-hover: 0 18px 48px rgba(15, 23, 42, .12);
}

html {
    background: #f4f7fc;
    scrollbar-gutter: stable;
}

body {
    min-width: 320px;
    line-height: 1.55;
}

::selection {
    background: rgba(79, 70, 229, .18);
    color: #172554;
}

.topbar {
    min-height: var(--topbar-height);
    padding: 12px 20px;
    gap: 18px;
    background:
        radial-gradient(circle at 18% -40%, rgba(124, 58, 237, .32), transparent 36%),
        linear-gradient(135deg, rgba(7, 13, 27, .97), rgba(20, 31, 57, .95));
    border-bottom-color: rgba(255, 255, 255, .10);
}

.brand-mark {
    width: 48px;
    height: 48px;
    border-radius: 15px;
}

.brand-text {
    max-width: min(30vw, 360px);
}

.topbar-page-context {
    min-width: 0;
    margin-right: auto;
    padding-left: 18px;
    border-left: 1px solid rgba(255, 255, 255, .14);
}

.topbar-page-context small,
.topbar-page-context strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-page-context small {
    color: rgba(255, 255, 255, .58);
    font-size: .72rem;
    font-weight: 600;
}

.topbar-page-context strong {
    max-width: min(24vw, 320px);
    margin-top: 2px;
    color: #fff;
    font-size: .96rem;
}

.topbar-tools {
    flex-wrap: nowrap;
    gap: 8px;
    margin-left: 0;
}

.topbar-quick-link {
    position: relative;
    min-height: 44px;
    padding: 8px 11px;
    border: 1px solid transparent;
    border-radius: 14px;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.topbar-quick-link:hover {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .10);
    transform: translateY(-1px);
}

.topbar-quick-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}

.topbar-quick-text {
    white-space: nowrap;
}

.topbar-quick-link .pill {
    min-width: 21px;
    height: 21px;
    padding-inline: 6px;
    font-size: .72rem;
}

.user-chip {
    max-width: 260px;
    padding: 6px 10px 6px 6px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 16px;
    background: rgba(255, 255, 255, .06);
}

.user-chip > div:last-child {
    min-width: 0;
}

.user-chip strong,
.user-chip small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar {
    padding-bottom: 16px;
}

.sidebar-head {
    padding-bottom: 16px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.sidebar-state {
    color: rgba(226, 232, 240, .88);
}

.side-nav {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .20) transparent;
}

.nav-item,
.nav-group-toggle {
    min-height: 48px;
    border: 1px solid transparent;
}

.nav-item:hover,
.nav-group-toggle:hover {
    border-color: rgba(255, 255, 255, .08);
}

.nav-item.active {
    box-shadow: inset 3px 0 0 rgba(255, 255, 255, .72), 0 10px 24px rgba(2, 6, 23, .12);
}

.content {
    width: 100%;
    max-width: var(--content-max-width);
    margin-inline: auto;
    padding: 26px clamp(18px, 2vw, 32px) 48px;
}

.hero-card,
.panel,
.card,
.table-card,
.stat-card,
.form-card,
.empty-state {
    border-color: var(--surface-border);
    box-shadow: var(--surface-shadow);
    backdrop-filter: blur(8px);
}

.card,
.room-card,
.stat-card,
.overview-card,
.event-list-card,
.ux-guide-card {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.card:hover,
.room-card:hover,
.stat-card:hover,
.overview-card:hover,
.event-list-card:hover,
.ux-guide-card:hover {
    border-color: rgba(79, 70, 229, .18);
    box-shadow: var(--surface-shadow-hover);
}

.toolbar {
    gap: 18px;
    padding: 18px 20px;
    border-radius: var(--radius-lg);
    box-shadow: var(--surface-shadow);
}

.toolbar > :first-child {
    min-width: 0;
    flex: 1 1 420px;
}

.toolbar h1,
.toolbar h2,
.toolbar p {
    overflow-wrap: anywhere;
}

.table-card > .toolbar,
.panel > .toolbar,
.card > .toolbar {
    margin: 0 0 16px;
    padding: 0 0 14px;
    border: 0;
    border-bottom: 1px solid rgba(148, 163, 184, .16);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.stats-grid {
    gap: 16px;
}

.stat-card {
    position: relative;
    min-height: 120px;
    padding: 18px 20px;
    overflow: hidden;
}

.stat-card::after {
    content: '';
    position: absolute;
    right: -32px;
    bottom: -42px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(79, 70, 229, .12), transparent 68%);
    pointer-events: none;
}

.stat-card .label,
.stat-label {
    color: #64748b;
    font-size: .84rem;
    font-weight: 700;
}

.stat-card .value,
.stat-number {
    color: #172554;
    font-variant-numeric: tabular-nums;
}

.btn {
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: 13px;
    line-height: 1.25;
    white-space: normal;
    touch-action: manipulation;
    box-shadow: 0 6px 14px rgba(15, 23, 42, .06);
}

.btn:hover {
    box-shadow: 0 10px 22px rgba(15, 23, 42, .10);
}

.btn:active {
    transform: translateY(0) scale(.985);
}

.btn-primary {
    border-color: rgba(79, 70, 229, .16);
}

.btn-muted {
    border-color: rgba(99, 102, 241, .10);
    background: #eef2ff;
}

.content .btn-outline {
    border-color: rgba(100, 116, 139, .22);
    box-shadow: none;
}

.content .btn-outline:hover {
    border-color: rgba(79, 70, 229, .28);
    background: #f8faff;
}

.btn[aria-busy="true"],
.btn.is-loading {
    cursor: progress;
    pointer-events: none;
    opacity: .82;
}

.btn.is-loading::before {
    content: '';
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ux-spin .7s linear infinite;
}

@keyframes ux-spin {
    to { transform: rotate(360deg); }
}

label {
    min-width: 0;
    color: #26354f;
    font-weight: 700;
}

.input,
.select,
.textarea {
    min-height: var(--control-height);
    border-color: rgba(100, 116, 139, .24);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}

.input:hover,
.select:hover,
.textarea:hover {
    border-color: rgba(79, 70, 229, .30);
}

.input:focus,
.select:focus,
.textarea:focus {
    outline: none;
    border-color: rgba(79, 70, 229, .62);
    box-shadow: var(--focus-ring);
}

.input:disabled,
.select:disabled,
.textarea:disabled {
    color: #64748b;
    background: #f1f5f9;
    cursor: not-allowed;
}

input[type="checkbox"],
input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

input[type="file"].input {
    padding: 8px;
}

input[type="file"]::file-selector-button {
    min-height: 34px;
    margin-right: 10px;
    padding: 7px 12px;
    border: 0;
    border-radius: 10px;
    color: #3730a3;
    background: #eef2ff;
    font-weight: 700;
    cursor: pointer;
}

.form-grid {
    align-items: start;
}

.form-card form > .hero-actions:last-child,
.form-actions-sticky {
    padding-top: 16px;
    border-top: 1px solid rgba(148, 163, 184, .16);
}

.filter-bar {
    align-items: end;
}

.alert,
.mini-note,
.terms-box {
    overflow-wrap: anywhere;
}

.alert {
    box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
}

.table-wrap {
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, .35) transparent;
}

.table-wrap:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.table-wrap table {
    min-width: 680px;
    font-size: .94rem;
}

.table-wrap table.table-wide {
    min-width: 1040px;
}

.table-wrap table.table-compact {
    min-width: 560px;
}

th,
td {
    padding: 13px 14px;
}

th {
    color: #52627a;
    font-size: .78rem;
    letter-spacing: .055em;
    white-space: nowrap;
}

tbody tr:last-child td {
    border-bottom: 0;
}

tbody tr {
    transition: background .16s ease;
}

tbody tr:hover td {
    background: rgba(79, 70, 229, .035);
}

.table-empty-row td {
    padding: 28px 18px;
    text-align: center;
    color: #64748b;
}

.table-actions,
.action-row {
    row-gap: 8px;
}

.room-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}

.room-card {
    border-color: rgba(148, 163, 184, .18);
}

.room-media {
    overflow: hidden;
}

.room-media img {
    transition: transform .35s ease, filter .25s ease;
}

.room-card:hover .room-media img,
.room-card:focus-within .room-media img {
    transform: scale(1.035);
    filter: saturate(1.04);
}

.room-title h3,
.event-list-title,
.calendar-event-title {
    overflow-wrap: anywhere;
}

.auth-wrap {
    min-height: calc(100dvh - var(--topbar-height) - 52px);
    padding-block: 24px;
}

.auth-card {
    border-color: rgba(148, 163, 184, .18);
    box-shadow: 0 28px 80px rgba(15, 23, 42, .16);
}

.auth-side,
.auth-form {
    min-width: 0;
}

.auth-form .btn-google {
    min-height: 54px;
}

.ux-back-to-top {
    right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
}

@media (max-width: 1180px) {
    .topbar-page-context {
        display: none;
    }

    .brand-text {
        max-width: min(34vw, 330px);
    }
}

@media (max-width: 900px) {
    .content {
        padding-inline: 18px;
    }

    .grid-2,
    .quick-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid,
    .grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filter-bar {
        grid-template-columns: 1fr 1fr;
    }

    .filter-bar > :first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 680px) {
    :root {
        --topbar-height: 68px;
        --radius-lg: 20px;
    }

    body.is-authenticated .topbar,
    body.is-guest .topbar {
        min-height: var(--topbar-height);
        padding: 9px 10px;
        gap: 7px;
        flex-wrap: nowrap;
    }

    .brand-wrap {
        gap: 8px;
        flex: 1 1 auto;
    }

    .brand {
        gap: 8px;
    }

    .brand-mark {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        padding: 5px;
        border-radius: 13px;
    }

    .menu-toggle {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 13px;
    }

    .brand-text {
        max-width: 38vw;
    }

    .brand strong {
        max-width: none !important;
        font-size: .9rem;
    }

    .topbar-tools {
        display: flex;
        flex: 0 0 auto;
        width: auto;
        gap: 5px;
    }

    .topbar-quick-link {
        width: 42px !important;
        height: 42px;
        min-height: 42px;
        padding: 0;
        justify-content: center;
        border-radius: 13px;
        font-size: inherit !important;
    }

    .topbar-quick-text {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .topbar-quick-link .pill {
        position: absolute;
        top: -3px;
        right: -3px;
        min-width: 18px;
        height: 18px;
        padding-inline: 5px;
        border: 2px solid #111b31;
        font-size: .65rem !important;
    }

    body.is-authenticated .topbar-tools .btn.topbar-action,
    body.is-guest .topbar-tools .btn.topbar-action {
        width: 42px;
        min-width: 42px;
        min-height: 42px;
        padding: 0;
        border-radius: 13px;
    }

    body.is-authenticated .topbar-tools .btn.topbar-action > span:not(.btn-icon),
    body.is-guest .topbar-tools .btn.topbar-action > span:not(.btn-icon) {
        display: none;
    }

    body.is-guest .topbar-tools .top-link:not(.topbar-quick-link) {
        display: none;
    }

    .sidebar {
        width: min(88vw, 340px);
    }

    .content {
        padding: 14px 12px 36px;
    }

    .toolbar {
        padding: 16px;
        gap: 14px;
    }

    .toolbar > :first-child {
        flex-basis: 100%;
    }

    .toolbar .hero-actions,
    .filter-bar .hero-actions,
    .form-actions-sticky,
    .auth-form .auth-provider-stack {
        width: 100%;
    }

    .btn {
        width: auto;
    }

    .toolbar .hero-actions .btn,
    .filter-bar .hero-actions .btn,
    .form-actions-sticky .btn,
    .auth-form .btn,
    .booking-search-actions .btn {
        width: 100%;
    }

    .stats-grid,
    .grid-4,
    .grid-3,
    .filter-bar {
        grid-template-columns: 1fr;
    }

    .filter-bar > :first-child {
        grid-column: auto;
    }

    .stat-card {
        min-height: 104px;
    }

    .hero-card,
    .panel,
    .card,
    .table-card,
    .form-card,
    .empty-state {
        padding: 16px;
        border-radius: 18px;
    }

    .table-wrap.is-responsive-table tbody {
        gap: 10px;
    }

    .table-wrap.is-responsive-table tr {
        border-radius: 16px;
    }

    .table-wrap.is-responsive-table td {
        grid-template-columns: minmax(92px, 34%) minmax(0, 1fr);
        padding: 11px 12px;
    }

    .table-wrap.is-responsive-table tr.table-empty-row td {
        display: block;
        padding: 22px 14px;
        text-align: center;
    }

    .table-wrap.is-responsive-table tr.table-empty-row td::before {
        display: none;
    }

    .table-actions .btn,
    .action-row .btn,
    td .hero-actions .btn {
        width: 100%;
    }

    .room-grid {
        gap: 14px;
    }

    .room-card-footer {
        align-items: stretch;
    }

    .room-card-footer .hero-actions,
    .room-card-footer .hero-actions .btn {
        width: 100%;
    }

    .room-view-stat,
    .room-view-stat-visible {
        margin-left: 0;
    }

    .auth-wrap {
        min-height: auto;
        padding-block: 8px 24px;
    }

    .auth-card {
        grid-template-columns: 1fr;
    }

    .auth-side,
    .auth-form {
        padding: 22px 18px;
    }

    .daily-popup-card {
        padding-top: 58px;
    }
}

@media (max-width: 390px) {
    .brand-text {
        max-width: 31vw;
    }

    .topbar-quick-link {
        display: none;
    }
}

@media (prefers-contrast: more) {
    .card,
    .panel,
    .table-card,
    .form-card,
    .stat-card,
    .hero-card {
        border-color: rgba(15, 23, 42, .30);
    }

    .input,
    .select,
    .textarea {
        border-color: rgba(15, 23, 42, .45);
    }
}

@media print {
    .topbar,
    .sidebar,
    .nav-overlay,
    .ux-back-to-top,
    .hero-actions,
    .btn {
        display: none !important;
    }

    .body-wrap {
        display: block;
    }

    .content {
        max-width: none;
        padding: 0;
    }

    .card,
    .panel,
    .table-card,
    .form-card,
    .stat-card,
    .hero-card {
        box-shadow: none;
        border: 1px solid #cbd5e1;
        break-inside: avoid;
    }
}

/* ===== assets/css/home-p0-p2-20260717.css ===== */
/* MTHUB homepage information architecture and accessibility refinements — 2026-07-17 */

.home-dashboard-p0p2 {
    gap: 24px;
}

.home-dashboard-p0p2 .monthly-snapshot-card {
    position: static;
}

.section-kicker-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.section-title-compact {
    margin: 8px 0 0;
    color: #14284b;
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    line-height: 1.3;
}

.section-period-label,
.today-count-pill {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid rgba(79, 70, 229, .14);
    border-radius: 999px;
    background: rgba(238, 242, 255, .78);
    color: #4338ca;
    font-size: .84rem;
    font-weight: 700;
    white-space: nowrap;
}

.overview-value-unit {
    font-size: .48em;
    font-weight: 700;
    color: #52627d;
}

.home-dashboard-p0p2 .snapshot-summary-grid .overview-card {
    display: flex;
    height: auto;
    min-height: 150px;
}

.home-dashboard-p0p2 .overview-label {
    min-height: 2.8em;
}

.booking-calendar-heading h2 {
    margin: 12px 0 8px;
    color: #15284a;
    font-size: 1.35rem;
    line-height: 1.3;
}

.calendar-filter-bar {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 18px;
    padding: 14px;
    border: 1px solid rgba(79, 70, 229, .10);
    border-radius: 18px;
    background: rgba(255, 255, 255, .72);
}

.calendar-filter-fields {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.calendar-filter-field {
    display: grid;
    gap: 6px;
    min-width: 190px;
    color: #445471;
    font-size: .8rem;
    font-weight: 700;
}

.calendar-filter-field .input {
    min-height: 44px;
    padding: 9px 38px 9px 12px;
    background-color: #fff;
    font-size: .9rem;
}

.calendar-filter-reset {
    min-height: 44px;
}

.calendar-filter-reset:disabled {
    opacity: .48;
    cursor: not-allowed;
    transform: none;
}

.calendar-status-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 14px;
    flex-wrap: wrap;
    color: #596a86;
    font-size: .8rem;
    font-weight: 600;
}

.calendar-status-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 2px solid #fff;
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .12);
}

.legend-dot.is-pending {
    background: #d97706;
}

.legend-dot.is-approved {
    background: #059669;
}

.legend-dot.is-completed {
    background: #64748b;
}

.calendar-day:focus-visible,
.calendar-view-btn:focus-visible,
.calendar-filter-reset:focus-visible,
.calendar-nav-group .btn:focus-visible,
.home-room-card .btn:focus-visible,
.today-event-card .btn:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .42);
    outline-offset: 3px;
}

.calendar-day[aria-pressed="true"] {
    border-color: rgba(79, 70, 229, .52);
}

#booking-calendar,
#today-meetings,
#featured-rooms,
.calendar-side-list {
    scroll-margin-top: calc(var(--topbar-height) + 16px);
}

.compact-privacy-note {
    margin-bottom: 14px;
    padding: 11px 14px;
}

.today-meetings-card .toolbar {
    align-items: center;
}

.event-phase {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.2;
}

.event-phase.is-live {
    background: rgba(5, 150, 105, .13);
    color: #047857;
}

.event-phase.is-upcoming {
    background: rgba(37, 99, 235, .11);
    color: #1d4ed8;
}

.event-phase.is-ended {
    background: rgba(100, 116, 139, .12);
    color: #475569;
}

.event-phase.is-pending {
    background: rgba(217, 119, 6, .12);
    color: #a16207;
}

.today-event-card {
    min-height: 118px;
}

.home-room-section .toolbar {
    align-items: flex-end;
}

.home-room-grid {
    align-items: stretch;
}

.home-room-card {
    min-height: 100%;
}

.home-room-card .room-media {
    min-height: 190px;
}

.room-availability {
    position: absolute;
    left: 14px;
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: calc(100% - 28px);
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, .76);
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #0f172a;
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.25;
}

.room-availability.is-available {
    background: rgba(236, 253, 245, .94);
    color: #047857;
}

.room-availability.is-available-soon {
    background: rgba(239, 246, 255, .95);
    color: #1d4ed8;
}

.room-availability.is-busy {
    background: rgba(254, 242, 242, .95);
    color: #b91c1c;
}

.room-availability.is-restricted {
    background: rgba(255, 251, 235, .96);
    color: #92400e;
}

.room-availability-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 14%, transparent);
}

.home-room-card .room-body {
    gap: 12px;
}

.home-room-card .room-description {
    display: -webkit-box;
    min-height: 4.8em;
    margin: 0;
    overflow: hidden;
    color: #53627b;
    line-height: 1.6;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.room-status-detail {
    min-height: 2.9em;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 14px;
    background: #f8fafc;
    color: #53627b;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.45;
}

.home-room-card .feature-tags {
    min-height: 64px;
    align-content: flex-start;
    margin-top: 0;
}

.home-room-card .room-card-footer {
    padding-top: 4px;
}

.home-room-card .room-card-footer .hero-actions,
.home-room-card .room-card-footer .btn {
    width: 100%;
}

@media (hover: none), (pointer: coarse) {
    .calendar-hover-tooltip {
        display: none !important;
    }

    .calendar-day:hover {
        transform: none;
    }
}

@media (max-width: 980px) {
    .calendar-filter-bar,
    .calendar-filter-fields {
        align-items: stretch;
    }

    .calendar-filter-bar {
        display: grid;
    }

    .calendar-filter-fields {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .calendar-filter-reset {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .calendar-status-legend {
        justify-content: flex-start;
    }

    .booking-calendar-side {
        scroll-margin-top: calc(var(--topbar-height) + 16px);
    }
}

@media (max-width: 700px) {
    .section-kicker-row,
    .home-room-section .toolbar,
    .today-meetings-card .toolbar {
        align-items: stretch;
    }

    .section-period-label,
    .today-count-pill {
        align-self: flex-start;
    }

    .home-dashboard-p0p2 .snapshot-summary-grid .overview-card {
        min-height: 136px;
    }

    .calendar-filter-fields {
        grid-template-columns: 1fr;
    }

    .calendar-filter-field {
        min-width: 0;
    }

    .calendar-filter-reset {
        grid-column: auto;
        width: 100%;
    }

    .calendar-nav-group,
    .calendar-view-group {
        width: 100%;
    }

    .calendar-nav-group .btn,
    .calendar-view-group .btn {
        flex: 1 1 0;
        min-width: 0;
    }

    .calendar-day {
        min-height: 110px;
    }

    .today-event-card {
        grid-template-columns: 1fr;
    }

    .today-event-card .event-list-actions,
    .today-event-card .event-list-actions .btn {
        width: 100%;
    }

    .home-room-card .room-description,
    .home-room-card .feature-tags,
    .room-status-detail {
        min-height: 0;
    }
}

@media (max-width: 480px) {
    .calendar-status-legend {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .room-availability {
        right: 12px;
        left: 12px;
        justify-content: center;
        max-width: none;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .calendar-day,
    .home-room-card .room-media img {
        transition: none !important;
    }

    .booking-calendar-side {
        scroll-behavior: auto;
    }
}

@media (forced-colors: active) {
    .legend-dot,
    .room-availability-dot {
        forced-color-adjust: auto;
        border: 1px solid ButtonText;
    }

    .room-availability,
    .event-phase,
    .section-period-label,
    .today-count-pill {
        border: 1px solid ButtonText;
    }
}

/* Status dots complement the room-color border used by calendar items. */
.calendar-day-item,
.calendar-tooltip-item {
    position: relative;
    padding-right: 24px;
}

.calendar-day-item::after,
.calendar-tooltip-item::after {
    content: '';
    position: absolute;
    top: 9px;
    right: 9px;
    width: 8px;
    height: 8px;
    border: 2px solid #fff;
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .10);
    background: #64748b;
}

.calendar-day-item.status-pending::after,
.calendar-tooltip-item.status-pending::after {
    background: #d97706;
}

.calendar-day-item.status-approved::after,
.calendar-tooltip-item.status-approved::after {
    background: #059669;
}

.calendar-day-item.status-completed::after,
.calendar-tooltip-item.status-completed::after {
    background: #64748b;
}

/* --------------------------------------------------------------------------
 * Responsive horizontal-overflow hotfix — 2026-07-17 r2
 *
 * Root cause:
 * .booking-calendar-card::before was positioned 48px outside the card while
 * the card allowed visible overflow. That decorative layer enlarged the page's
 * scrollable width and produced a browser-level horizontal scrollbar.
 * -------------------------------------------------------------------------- */

html,
body {
    max-width: 100%;
}

/* `clip` removes accidental page-level horizontal overflow without creating a
 * new scrolling container, so sticky elements continue to behave normally.
 * Internal components such as .table-wrap keep their own overflow-x:auto. */
body {
    overflow-x: clip;
}

@supports not (overflow: clip) {
    body {
        overflow-x: hidden;
    }
}

.app-shell,
.body-wrap,
.content,
.hero-home-single-column,
.home-dashboard-p0p2,
.monthly-snapshot-card,
.booking-calendar-card,
.booking-calendar-header,
.booking-calendar-controls,
.calendar-filter-bar,
.booking-calendar-frame,
.booking-calendar-main,
.booking-calendar-board,
.home-room-section,
.today-meetings-card {
    min-width: 0;
    max-width: 100%;
}

/* Keep the decorative glow entirely inside the calendar card. */
.booking-calendar-card::before {
    right: 0;
    bottom: 0;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle at 100% 100%, rgba(79, 70, 229, .14), transparent 72%);
}

/* Flex children are allowed to shrink instead of widening the viewport. */
.booking-calendar-heading,
.calendar-filter-fields,
.calendar-status-legend,
.calendar-nav-group,
.calendar-view-group {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 1180px) {
    .booking-calendar-controls {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 700px) {
    .content {
        padding-inline: 14px;
    }

    .booking-calendar-card,
    .monthly-snapshot-card,
    .today-meetings-card,
    .home-room-section {
        width: 100%;
    }

    .calendar-nav-group,
    .calendar-view-group {
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
    }

    .calendar-nav-group .btn,
    .calendar-view-group .btn {
        flex: 1 0 auto;
    }
}

/* The generic .hero-card glow also used negative right/bottom offsets. The
 * calendar already has its own decoration, so suppress the duplicate layer. */
.booking-calendar-card::after {
    content: none;
    display: none;
}

/* ===== assets/css/modern-ui-20260721.css ===== */
/*
 * MTHUB Modern UI System — 2026-07-21
 * Final override layer for a consistent, responsive and accessible interface.
 * This file intentionally sits after the legacy/base styles so the rollout is
 * low risk and does not alter booking, authorization or database logic.
 */

:root {
    --ui-bg: #f3f6fb;
    --ui-bg-soft: #eef2ff;
    --ui-surface: #ffffff;
    --ui-surface-soft: #f8fafc;
    --ui-surface-tint: #f6f7ff;
    --ui-text: #172033;
    --ui-text-soft: #586781;
    --ui-border: rgba(100, 116, 139, .18);
    --ui-border-strong: rgba(79, 70, 229, .24);
    --ui-primary: #4f46e5;
    --ui-primary-dark: #3730a3;
    --ui-primary-soft: #eef2ff;
    --ui-success: #059669;
    --ui-warning: #d97706;
    --ui-danger: #dc2626;
    --ui-radius-sm: 12px;
    --ui-radius-md: 18px;
    --ui-radius-lg: 24px;
    --ui-shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
    --ui-shadow-sm: 0 8px 24px rgba(15, 23, 42, .06);
    --ui-shadow-md: 0 18px 48px rgba(15, 23, 42, .09);
    --ui-shadow-lg: 0 28px 70px rgba(15, 23, 42, .14);
    --ui-focus: 0 0 0 4px rgba(79, 70, 229, .16);
    --content-max-width: 1640px;
}

html {
    min-width: 320px;
    background: var(--ui-bg);
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    color: var(--ui-text);
    background:
        radial-gradient(circle at 8% 0%, rgba(79, 70, 229, .10), transparent 25rem),
        radial-gradient(circle at 94% 4%, rgba(14, 165, 233, .08), transparent 23rem),
        linear-gradient(180deg, #f8faff 0, var(--ui-bg) 420px, #f7f9fc 100%);
    font-size: 16px;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(79, 70, 229, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(79, 70, 229, .025) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: linear-gradient(to bottom, #000, transparent 56%);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 0;
    box-shadow: var(--ui-focus);
}

::selection {
    color: #1e1b4b;
    background: rgba(129, 140, 248, .30);
}

/* Application shell ------------------------------------------------------ */
.app-shell {
    --sidebar-width: 292px;
    min-width: 0;
}

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

.topbar {
    min-width: 0;
    padding:
        max(11px, env(safe-area-inset-top))
        max(18px, env(safe-area-inset-right))
        11px
        max(18px, env(safe-area-inset-left));
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    background:
        radial-gradient(circle at 16% -80%, rgba(99, 102, 241, .55), transparent 44%),
        linear-gradient(120deg, rgba(8, 15, 33, .97), rgba(25, 38, 69, .95));
    box-shadow: 0 10px 30px rgba(2, 6, 23, .20);
    backdrop-filter: blur(20px) saturate(130%);
    -webkit-backdrop-filter: blur(20px) saturate(130%);
}

.brand-wrap,
.brand,
.topbar-tools,
.topbar-page-context {
    min-width: 0;
}

.brand-mark {
    width: 46px;
    height: 46px;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 15px;
    background: rgba(255, 255, 255, .08);
    box-shadow: 0 10px 28px rgba(2, 6, 23, .22);
}

.brand-mark-image img {
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .18));
}

.brand strong {
    color: #fff;
    font-size: .98rem;
    font-weight: 800;
    letter-spacing: -.01em;
}

.brand small {
    color: rgba(226, 232, 240, .72);
}

.topbar-page-context {
    padding: 2px 0 2px 18px;
}

.topbar-page-context strong {
    font-weight: 700;
}

.topbar-quick-link,
.user-chip,
.topbar .btn-outline,
.menu-toggle {
    border-color: rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .065);
    box-shadow: none;
}

.topbar-quick-link:hover,
.topbar .btn-outline:hover,
.menu-toggle:hover {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .12);
}

.user-chip {
    max-width: 230px;
    min-height: 46px;
}

.user-chip strong {
    color: #fff;
    font-size: .88rem;
}

.user-chip small {
    color: rgba(226, 232, 240, .68);
    font-size: .74rem;
}

.body-wrap {
    min-width: 0;
}

.sidebar {
    min-width: 0;
    padding: 16px 14px max(16px, env(safe-area-inset-bottom));
    border-right: 1px solid rgba(148, 163, 184, .12);
    background:
        radial-gradient(circle at 18% 0%, rgba(79, 70, 229, .30), transparent 18rem),
        linear-gradient(180deg, #101a31 0%, #0c1428 54%, #0a1122 100%);
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, .30) transparent;
}

.sidebar-head {
    margin-bottom: 12px;
    padding: 13px 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .055);
    box-shadow: inset 0 1px rgba(255, 255, 255, .04);
}

.sidebar-state {
    padding-inline: 10px;
}

.side-nav {
    gap: 4px;
}

.nav-section-label {
    margin: 14px 10px 7px;
    color: rgba(203, 213, 225, .54);
    font-size: .68rem;
    letter-spacing: .12em;
}

.nav-item,
.nav-group-toggle {
    min-height: 46px;
    border-radius: 14px;
}

.nav-item:hover,
.nav-group-toggle:hover {
    background: rgba(255, 255, 255, .075);
}

.nav-item.active {
    color: #fff;
    border-color: rgba(165, 180, 252, .20);
    background: linear-gradient(135deg, rgba(79, 70, 229, .56), rgba(99, 102, 241, .30));
    box-shadow: 0 8px 22px rgba(49, 46, 129, .24), inset 0 1px rgba(255, 255, 255, .08);
}

.nav-icon {
    width: 20px;
    height: 20px;
}

.nav-label,
.nav-group-text strong {
    font-size: .88rem;
}

.nav-group-text small {
    font-size: .68rem;
}

.sidebar-foot {
    margin-top: auto;
    border-radius: 16px;
    background: rgba(255, 255, 255, .04);
}

.nav-overlay {
    background: rgba(2, 6, 23, .62);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.content {
    width: 100%;
    max-width: var(--content-max-width);
    margin-inline: auto;
    padding: clamp(18px, 2vw, 30px);
    padding-bottom: max(40px, calc(24px + env(safe-area-inset-bottom)));
}

/* Typography and page hierarchy ---------------------------------------- */
.content h1,
.content h2,
.content h3 {
    color: #18233a;
    letter-spacing: -.018em;
}

.content h1 {
    font-size: clamp(1.45rem, 2.1vw, 2rem);
    font-weight: 800;
}

.content h2 {
    font-size: clamp(1.12rem, 1.55vw, 1.42rem);
    font-weight: 800;
}

.content h3 {
    font-size: clamp(1rem, 1.2vw, 1.18rem);
    font-weight: 750;
}

.help,
.muted,
.meta,
small {
    color: var(--ui-text-soft);
}

.toolbar {
    gap: 18px;
    margin-bottom: 18px;
    padding: 20px 22px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background:
        linear-gradient(120deg, rgba(255, 255, 255, .98), rgba(247, 249, 255, .95));
    box-shadow: var(--ui-shadow-sm);
}

.toolbar h1,
.toolbar h2 {
    margin-bottom: 4px;
}

.toolbar .help {
    max-width: 92ch;
    margin: 0;
}

.hero-actions {
    gap: 9px;
}

/* Surfaces and cards ----------------------------------------------------- */
.card,
.panel,
.table-card,
.form-card,
.stat-card,
.overview-card,
.room-card,
.event-list-card,
.booking-search-panel,
.empty-state {
    border: 1px solid var(--ui-border);
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--ui-shadow-sm);
}

.card,
.panel,
.table-card,
.form-card,
.empty-state {
    border-radius: var(--ui-radius-lg);
}

.card:hover,
.panel:hover,
.table-card:hover,
.form-card:hover,
.stat-card:hover,
.overview-card:hover,
.room-card:hover,
.event-list-card:hover {
    border-color: var(--ui-border-strong);
}

.card,
.panel,
.table-card,
.form-card {
    overflow-wrap: anywhere;
}

.table-card > .toolbar,
.panel > .toolbar,
.card > .toolbar,
.form-card > .toolbar {
    padding-bottom: 14px;
}

.stats-grid,
.grid-2,
.grid-3,
.grid-4,
.room-grid {
    gap: clamp(14px, 1.4vw, 20px);
}

.stat-card,
.overview-card {
    min-width: 0;
    border-radius: 20px;
}

.stat-card {
    min-height: 116px;
    padding: 18px 20px;
}

.stat-card .value,
.stat-number,
.overview-value {
    font-weight: 800;
    letter-spacing: -.035em;
}

.stat-card::before,
.overview-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: inherit;
    background: linear-gradient(180deg, var(--ui-primary), #8b5cf6);
    opacity: .78;
}

.mini-note,
.alert {
    border-radius: 16px;
}

.mini-note {
    border-style: solid;
    border-color: rgba(99, 102, 241, .16);
    background: var(--ui-surface-tint);
}

/* Controls --------------------------------------------------------------- */
.btn,
.icon-btn,
.input,
.select,
.textarea {
    transition: border-color .16s ease, background-color .16s ease, color .16s ease,
                box-shadow .16s ease, transform .16s ease;
}

.btn {
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 13px;
    font-weight: 750;
    letter-spacing: -.005em;
    box-shadow: var(--ui-shadow-xs);
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--ui-primary), #6d5dfc);
    box-shadow: 0 9px 22px rgba(79, 70, 229, .20);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #4338ca, #5b4ce8);
    box-shadow: 0 12px 26px rgba(79, 70, 229, .26);
}

.btn-muted {
    color: #39496a;
    border-color: rgba(99, 102, 241, .12);
    background: #f1f3ff;
}

.btn-muted:hover {
    color: #3730a3;
    background: #e9edff;
}

.content .btn-outline {
    color: #34425d;
    border-color: rgba(100, 116, 139, .24);
    background: #fff;
}

label {
    gap: 7px;
    color: #34425d;
    font-size: .9rem;
    font-weight: 750;
}

.input,
.select,
.textarea {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 10px 13px;
    color: var(--ui-text);
    border: 1px solid rgba(100, 116, 139, .25);
    border-radius: 13px;
    background-color: #fff;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .025);
}

.input:hover,
.select:hover,
.textarea:hover {
    border-color: rgba(79, 70, 229, .34);
}

.input:focus,
.select:focus,
.textarea:focus {
    border-color: rgba(79, 70, 229, .68);
    box-shadow: var(--ui-focus);
}

.input:disabled,
.select:disabled,
.textarea:disabled {
    color: #94a3b8;
    cursor: not-allowed;
    background: #f1f5f9;
}

.form-grid,
.filter-bar {
    gap: 15px;
}

.booking-search-panel {
    padding: 18px 20px;
    border-radius: 20px;
    background: linear-gradient(180deg, #fff, #fafbff);
}

.booking-search-form {
    align-items: end;
}

.booking-search-summary {
    color: var(--ui-text-soft);
}

/* Tables ----------------------------------------------------------------- */
.table-card {
    overflow: hidden;
}

.table-wrap {
    position: relative;
    max-width: 100%;
    border: 1px solid rgba(148, 163, 184, .15);
    border-radius: 17px;
    background: #fff;
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, .35) transparent;
}

.table-wrap:focus-visible {
    box-shadow: var(--ui-focus);
}

.table-wrap table {
    margin: 0;
    font-size: .89rem;
}

.table-wrap thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 13px 14px;
    color: #43506a;
    border-bottom: 1px solid rgba(100, 116, 139, .18);
    background: #f4f6fb;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .015em;
    white-space: nowrap;
}

.table-wrap tbody td {
    padding: 14px;
    color: #34425d;
    border-bottom-color: rgba(148, 163, 184, .12);
    vertical-align: top;
}

.table-wrap tbody tr:nth-child(even) td {
    background: rgba(248, 250, 252, .55);
}

.table-wrap tbody tr:hover td {
    background: #f4f6ff;
}

.table-wrap a:not(.btn) {
    color: #4338ca;
    font-weight: 700;
}

/* Rooms and media -------------------------------------------------------- */
.room-card {
    overflow: hidden;
    border-radius: 22px;
}

.room-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ui-shadow-md);
}

.room-media {
    overflow: hidden;
    background: #e9eef8;
}

.room-media img {
    transition: transform .35s ease;
}

.room-card:hover .room-media img {
    transform: scale(1.025);
}

.room-body {
    padding: 18px;
}

.room-card-footer {
    gap: 10px;
}

.feature-tag,
.badge,
.pill,
.event-phase,
.room-availability {
    font-weight: 750;
}

/* Login / register ------------------------------------------------------- */
.auth-wrap {
    padding: clamp(16px, 3vw, 34px) 0;
}

.auth-card {
    border-radius: 26px;
    box-shadow: var(--ui-shadow-lg);
}

.auth-side {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 8%, rgba(255, 255, 255, .18), transparent 15rem),
        linear-gradient(145deg, #3730a3, #4f46e5 54%, #6d5dfc);
}

.auth-side::after {
    content: '';
    position: absolute;
    right: -70px;
    bottom: -80px;
    width: 220px;
    height: 220px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    box-shadow: 0 0 0 34px rgba(255, 255, 255, .035), 0 0 0 68px rgba(255, 255, 255, .025);
}

.auth-form {
    background: rgba(255, 255, 255, .985);
}

.btn-google {
    border-radius: 14px;
    box-shadow: 0 5px 16px rgba(15, 23, 42, .08);
}

/* Sticky actions and utility -------------------------------------------- */
.form-actions-sticky {
    border-top: 1px solid rgba(148, 163, 184, .16);
}

.ux-back-to-top {
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(30, 41, 59, .92);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .22);
    backdrop-filter: blur(10px);
}

/* Breakpoints ------------------------------------------------------------ */
@media (max-width: 1180px) {
    .app-shell {
        --sidebar-width: 270px;
    }

    .user-chip {
        max-width: 190px;
    }
}

@media (max-width: 900px) {
    .topbar {
        padding-inline: 14px;
    }

    .sidebar {
        width: min(360px, 90vw);
        padding-inline: 14px;
        box-shadow: 22px 0 60px rgba(2, 6, 23, .34);
    }

    .content {
        padding: 18px;
    }

    .toolbar {
        align-items: flex-start;
    }

    .toolbar .hero-actions {
        width: 100%;
    }

    .stats-grid,
    .grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    :root {
        --ui-radius-lg: 20px;
    }

    body::before {
        display: none;
    }

    .topbar {
        gap: 6px;
        padding:
            max(8px, env(safe-area-inset-top))
            max(9px, env(safe-area-inset-right))
            8px
            max(9px, env(safe-area-inset-left));
    }

    .menu-toggle,
    .brand-mark,
    .topbar-quick-link,
    body.is-authenticated .topbar-tools .btn.topbar-action,
    body.is-guest .topbar-tools .btn.topbar-action {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        flex-basis: 40px;
        border-radius: 12px;
    }

    .brand {
        gap: 7px;
    }

    .brand-mark {
        padding: 4px;
    }

    .brand-text {
        max-width: min(42vw, 210px);
    }

    .brand strong {
        font-size: .86rem;
    }

    .topbar-tools {
        gap: 4px;
    }

    .content {
        padding: 13px 11px 34px;
    }

    .toolbar,
    .card,
    .panel,
    .table-card,
    .form-card,
    .empty-state,
    .booking-search-panel {
        border-radius: 18px;
    }

    .toolbar {
        gap: 13px;
        margin-bottom: 14px;
        padding: 15px;
    }

    .toolbar .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .toolbar .hero-actions .btn,
    .booking-search-actions .btn,
    .form-actions-sticky .btn {
        width: 100%;
    }

    .card,
    .panel,
    .table-card,
    .form-card,
    .empty-state {
        padding: 15px;
    }

    .stats-grid,
    .grid-2,
    .grid-3,
    .grid-4,
    .filter-bar,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .stat-card {
        min-height: 102px;
        padding: 16px 17px;
    }

    .btn {
        min-height: 46px;
    }

    .input,
    .select,
    .textarea {
        min-height: 48px;
        font-size: 16px; /* Prevent iOS form zoom. */
    }

    .room-grid {
        gap: 13px;
    }

    .room-card {
        border-radius: 18px;
    }

    .room-body {
        padding: 15px;
    }

    .table-card {
        overflow: visible;
        background: transparent;
        border: 0;
        box-shadow: none;
        padding-inline: 0;
    }

    .table-card > .toolbar {
        padding-inline: 15px;
    }

    .table-wrap.is-responsive-table tbody {
        gap: 11px;
    }

    .table-wrap.is-responsive-table tr {
        border-radius: 17px;
        box-shadow: var(--ui-shadow-sm);
    }

    .table-wrap.is-responsive-table td {
        grid-template-columns: minmax(96px, 34%) minmax(0, 1fr);
        gap: 11px;
        padding: 11px 13px;
    }

    .table-wrap.is-responsive-table td::before {
        color: #64748b;
        font-size: .76rem;
    }

    .auth-card {
        border-radius: 20px;
    }

    .auth-side,
    .auth-form {
        padding: 21px 18px;
    }

    .form-actions-sticky {
        bottom: 0;
        margin-inline: -15px;
        padding: 12px 15px max(12px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 430px) {
    .brand-text {
        max-width: 35vw;
    }

    body.is-authenticated .topbar-quick-link:nth-of-type(2) {
        display: none;
    }

    .overview-grid,
    .overview-grid-compact,
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .table-wrap.is-responsive-table td {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

@media (hover: none), (pointer: coarse) {
    .card:hover,
    .panel:hover,
    .table-card:hover,
    .form-card:hover,
    .stat-card:hover,
    .overview-card:hover,
    .room-card:hover,
    .event-list-card:hover,
    .btn:hover {
        transform: none;
    }

    .room-card:hover .room-media img {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

@media (forced-colors: active) {
    .card,
    .panel,
    .table-card,
    .form-card,
    .stat-card,
    .overview-card,
    .room-card,
    .event-list-card,
    .input,
    .select,
    .textarea,
    .btn {
        border: 1px solid CanvasText;
    }
}

@media print {
    body {
        background: #fff;
    }

    body::before {
        display: none;
    }
}

/* Global privacy footer — 2026-07-23 */
.content-privacy-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin-top: auto;
    padding: 14px 4px calc(10px + env(safe-area-inset-bottom));
    color: #64748b;
    font-size: 11px;
    line-height: 1.5;
    text-align: right;
}

.content-privacy-footer a {
    color: inherit;
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
    text-underline-offset: 3px;
}

.content-privacy-footer a:hover,
.content-privacy-footer a:focus-visible {
    color: #0f67c6;
    text-decoration: underline;
}

.content-privacy-footer .privacy-separator {
    color: #94a3b8;
    user-select: none;
}

.privacy-policy-page {
    max-width: 980px;
    margin-inline: auto;
}

.privacy-policy-page .policy-intro {
    color: #475569;
    font-size: .96rem;
    line-height: 1.8;
}

.privacy-policy-page .policy-section {
    padding: 22px;
    margin-top: 16px;
}

.privacy-policy-page .policy-section h2 {
    margin: 0 0 10px;
    font-size: 1.08rem;
}

.privacy-policy-page .policy-section p,
.privacy-policy-page .policy-section li {
    color: #475569;
    line-height: 1.8;
}

.privacy-policy-page .policy-section ul {
    margin: 8px 0 0;
    padding-left: 22px;
}

@media (max-width: 640px) {
    .content-privacy-footer {
        justify-content: center;
        flex-wrap: wrap;
        padding-inline: 8px;
        text-align: center;
    }
}

@media print {
    .content-privacy-footer {
        display: none;
    }
}

/* ===== assets/css/modern-ui-20260724.css ===== */
/*
 * MTHUB Modern Responsive UI
 * Release: 2026-07-24
 * Purpose: final compatibility layer over legacy CSS without changing business logic.
 */

:root {
    --primary: #4338ca;
    --primary-2: #6366f1;
    --primary-strong: #312e81;
    --accent: #0891b2;
    --success: #047857;
    --warning: #b45309;
    --danger: #b91c1c;
    --text: #172033;
    --text-primary: #172033;
    --muted: #64748b;
    --surface: rgba(255, 255, 255, .94);
    --surface-2: rgba(248, 250, 252, .92);
    --line: rgba(100, 116, 139, .18);
    --border: rgba(100, 116, 139, .22);
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --radius-xl: 30px;
    --radius: var(--radius-lg);
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-sm: 0 8px 24px rgba(15, 23, 42, .07);
    --shadow-md: 0 18px 48px rgba(15, 23, 42, .10);
    --shadow: var(--shadow-md);
    --shadow-soft: var(--shadow-sm);
    --content-max: 1640px;
    --tap-size: 44px;
}

html {
    min-width: 320px;
    overflow-x: clip;
    scroll-padding-top: calc(var(--topbar-height, 72px) + 18px);
}

body {
    min-width: 320px;
    overflow-x: clip;
    background:
        radial-gradient(circle at 12% -8%, rgba(99, 102, 241, .14), transparent 28rem),
        radial-gradient(circle at 94% 10%, rgba(8, 145, 178, .10), transparent 24rem),
        linear-gradient(180deg, #eef3fb 0%, #f8fafc 32%, #f4f7fb 100%);
    color: var(--text);
    font-size: 15px;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

::selection {
    color: #fff;
    background: rgba(67, 56, 202, .86);
}

img,
video,
canvas,
svg {
    max-width: 100%;
}

button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

button,
[role="button"],
.btn,
.nav-item,
.mobile-tabbar-item {
    touch-action: manipulation;
}

.app-shell {
    --sidebar-width: 292px;
    --topbar-height: 72px;
}

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

/* Top application bar --------------------------------------------------- */
.topbar {
    min-height: var(--topbar-height);
    padding: 11px clamp(14px, 2vw, 26px);
    gap: 18px;
    background:
        radial-gradient(circle at 20% -40%, rgba(129, 140, 248, .30), transparent 22rem),
        linear-gradient(120deg, rgba(15, 23, 42, .97), rgba(30, 41, 59, .95) 62%, rgba(30, 58, 138, .92));
    border-bottom-color: rgba(255, 255, 255, .10);
    box-shadow: 0 10px 32px rgba(15, 23, 42, .18);
}

.brand-wrap {
    flex: 0 1 auto;
    min-width: 0;
}

.brand {
    min-width: 0;
    gap: 12px;
    border-radius: 16px;
}

.brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(30, 64, 175, .24);
}

.brand-mark-image {
    padding: 5px;
    background: rgba(255, 255, 255, .98);
}

.brand-mark-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.brand-text {
    min-width: 0;
    max-width: min(34vw, 360px);
}

.brand strong {
    font-size: .98rem;
    line-height: 1.25;
}

.brand small {
    margin-top: 3px;
    font-size: .74rem;
    line-height: 1.3;
}

.topbar-page-context {
    min-width: 0;
    margin-inline: auto;
    padding-inline: 20px;
    text-align: center;
}

.topbar-page-context small,
.topbar-page-context strong {
    display: block;
}

.topbar-page-context small {
    color: rgba(226, 232, 240, .62);
    font-size: .68rem;
    letter-spacing: .08em;
}

.topbar-page-context strong {
    max-width: 32vw;
    overflow: hidden;
    color: #fff;
    font-size: .9rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-tools {
    flex: 0 1 auto;
    flex-wrap: nowrap;
    gap: 8px;
}

.topbar-quick-link {
    min-width: var(--tap-size);
    min-height: var(--tap-size);
    justify-content: center;
    padding: 8px 11px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 14px;
    background: rgba(255, 255, 255, .055);
}

.topbar-quick-link:hover,
.topbar-quick-link:focus-visible {
    background: rgba(255, 255, 255, .11);
}

.user-chip {
    max-width: 240px;
    min-height: var(--tap-size);
    padding: 5px 11px 5px 6px;
}

.user-chip strong,
.user-chip small {
    display: block;
    overflow: hidden;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-chip strong {
    font-size: .86rem;
}

.user-chip small {
    margin-top: 2px;
    color: rgba(226, 232, 240, .68);
    font-size: .7rem;
}

.avatar {
    width: 34px;
    height: 34px;
}

.topbar-action {
    min-height: var(--tap-size);
    white-space: nowrap;
}

.menu-toggle,
.collapse-btn,
.icon-btn {
    min-width: var(--tap-size);
    min-height: var(--tap-size);
}

/* Sidebar --------------------------------------------------------------- */
.sidebar {
    padding: 16px 14px;
    background:
        radial-gradient(circle at 8% 0%, rgba(99, 102, 241, .22), transparent 18rem),
        linear-gradient(180deg, #111827 0%, #0f172a 58%, #111827 100%);
}

.sidebar-head {
    margin-bottom: 12px;
    padding: 13px;
    border-radius: 18px;
}

.sidebar-state {
    height: 30px;
    padding-inline: 9px;
}

.side-nav {
    gap: 8px;
}

.nav-section-label {
    margin-top: 12px;
    font-size: .68rem;
}

.nav-item,
.nav-group-toggle {
    min-height: 50px;
    border-radius: 15px;
}

.nav-item {
    padding: 9px 11px;
}

.nav-group-toggle {
    padding: 8px 10px;
}

.nav-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    border-radius: 12px;
}

.nav-icon svg {
    width: 20px;
    height: 20px;
}

.nav-label,
.nav-group-text strong {
    font-size: .9rem;
}

.nav-group-text small {
    font-size: .69rem;
}

.nav-item.sub-item {
    min-height: 46px;
    padding: 7px 10px;
}

.nav-item.sub-item .nav-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
}

.sidebar-foot {
    margin-top: 12px;
    padding: 12px;
    border-radius: 16px;
}

/* Main content and reusable surfaces ----------------------------------- */
.body-wrap,
.content,
.hero,
.grid-2,
.grid-3,
.grid-4,
.stats-grid,
.room-grid,
.form-grid,
.filter-bar,
.table-card,
.table-wrap {
    min-width: 0;
}

.content {
    width: 100%;
    max-width: var(--content-max);
    min-height: calc(100dvh - var(--topbar-height));
    margin-inline: auto;
    padding: clamp(16px, 2.1vw, 32px);
}

.content > :first-child {
    margin-top: 0;
}

.content h1,
.content h2,
.content h3 {
    color: #172033;
    text-wrap: balance;
}

.content h1 {
    font-size: clamp(1.55rem, 2vw, 2.15rem);
    letter-spacing: -.025em;
}

.content h2 {
    font-size: clamp(1.12rem, 1.35vw, 1.42rem);
}

.content h3 {
    font-size: clamp(1rem, 1.15vw, 1.18rem);
}

.help,
.section-help,
.overview-meta,
.room-body > p,
.policy-intro {
    color: var(--muted);
}

.hero-card,
.panel,
.card,
.table-card,
.stat-card,
.form-card,
.empty-state,
.toolbar {
    border: 1px solid rgba(148, 163, 184, .16);
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(12px);
}

.hero-card,
.panel,
.card,
.table-card,
.form-card,
.empty-state {
    border-radius: var(--radius-lg);
}

.hero-card,
.card,
.panel,
.table-card,
.form-card,
.empty-state {
    padding: clamp(18px, 2vw, 26px);
}

.card,
.panel,
.table-card,
.form-card,
.stat-card,
.overview-card,
.room-card,
.event-list-card {
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.card:hover,
.panel:hover,
.table-card:hover,
.form-card:hover,
.stat-card:hover,
.overview-card:hover,
.room-card:hover,
.event-list-card:hover {
    border-color: rgba(99, 102, 241, .22);
    box-shadow: var(--shadow-md);
}

.toolbar {
    gap: 18px;
    margin-bottom: 20px;
    padding: clamp(17px, 2vw, 23px);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 0% 0%, rgba(99, 102, 241, .10), transparent 22rem),
        rgba(255, 255, 255, .92);
}

.toolbar > div:first-child {
    min-width: 0;
    flex: 1 1 420px;
}

.toolbar h1,
.toolbar h2,
.toolbar p {
    margin-top: 0;
}

.toolbar h1,
.toolbar h2 {
    margin-bottom: 5px;
}

.toolbar .hero-actions {
    flex: 0 1 auto;
}

.eyebrow {
    min-height: 30px;
    padding: 5px 11px;
    color: var(--primary);
    background: rgba(67, 56, 202, .08);
    font-size: .74rem;
    letter-spacing: .04em;
}

/* Buttons --------------------------------------------------------------- */
.btn {
    min-height: var(--tap-size);
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 13px;
    line-height: 1.3;
    box-shadow: var(--shadow-xs);
}

.btn-primary {
    background: linear-gradient(135deg, #4338ca, #5b5fe9 58%, #4f46e5);
    box-shadow: 0 9px 20px rgba(67, 56, 202, .18);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    box-shadow: 0 12px 26px rgba(67, 56, 202, .28);
}

.btn-muted {
    color: #334155;
    background: #eef2ff;
    border-color: rgba(99, 102, 241, .12);
}

.content .btn-outline {
    color: #334155;
    background: #fff;
    border-color: rgba(100, 116, 139, .24);
}

.btn-danger {
    box-shadow: 0 8px 18px rgba(185, 28, 28, .16);
}

.btn-sm {
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 11px;
    font-size: .84rem;
}

.btn[disabled],
.btn[aria-disabled="true"],
button:disabled {
    cursor: not-allowed;
    opacity: .62;
    transform: none !important;
}

/* Forms ----------------------------------------------------------------- */
label {
    color: #334155;
}

.input,
.select,
.textarea,
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"] {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    color: #172033;
    background: rgba(255, 255, 255, .98);
    border: 1px solid rgba(100, 116, 139, .28);
    border-radius: 13px;
    box-shadow: inset 0 1px 1px rgba(15, 23, 42, .025);
}

.input:hover,
.select:hover,
.textarea:hover {
    border-color: rgba(67, 56, 202, .34);
}

.input:focus,
.select:focus,
.textarea:focus {
    border-color: rgba(67, 56, 202, .68);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, .11);
}

input[type="checkbox"],
input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

.form-grid,
.filter-bar {
    gap: 14px;
}

.form-card label,
.form-grid > label {
    min-width: 0;
}

.form-section-title {
    border-radius: 15px;
}

.filter-field {
    display: grid;
    min-width: 0;
    gap: 6px;
}

.filter-field > span {
    color: #475569;
    font-size: .78rem;
    font-weight: 700;
}

.filter-bar {
    align-items: end;
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .90);
    box-shadow: var(--shadow-sm);
}

.form-actions-sticky {
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(14px);
}

/* Summary and statistic cards ------------------------------------------ */
.stats-grid,
.overview-grid {
    gap: 14px;
}

.stat-card,
.overview-card {
    position: relative;
    overflow: hidden;
    min-height: 132px;
    padding: 19px;
    border-radius: 20px;
    background:
        radial-gradient(circle at 100% 0%, rgba(99, 102, 241, .10), transparent 10rem),
        #fff;
}

.stat-card::after,
.overview-card::after {
    content: '';
    position: absolute;
    inset: auto -24px -36px auto;
    width: 100px;
    height: 100px;
    border-radius: 999px;
    background: rgba(99, 102, 241, .045);
    pointer-events: none;
}

.stat-card .label,
.overview-label {
    min-height: auto;
    color: #64748b;
    font-size: .82rem;
    font-weight: 650;
}

.stat-card .value,
.overview-value {
    margin-top: 8px;
    color: #172033;
    font-size: clamp(1.72rem, 2.6vw, 2.35rem);
    letter-spacing: -.04em;
}

.overview-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
}

.badge,
.tag {
    max-width: 100%;
    white-space: normal;
}

/* Room cards ------------------------------------------------------------ */
.room-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
    gap: clamp(14px, 1.7vw, 22px);
}

.room-card {
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.room-media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(99, 102, 241, .14), rgba(8, 145, 178, .10)),
        #eef2ff;
}

.room-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 58%, rgba(15, 23, 42, .10));
    pointer-events: none;
}

.room-media img {
    transition: transform .35s ease;
}

.room-card:hover .room-media img {
    transform: scale(1.025);
}

.room-body {
    gap: 10px;
    padding: 19px;
}

.room-title h3 {
    line-height: 1.4;
}

.room-body > p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    line-height: 1.65;
}

.room-card-footer {
    align-items: center;
}

.room-view-stat {
    color: #64748b;
}

/* Tables ---------------------------------------------------------------- */
.table-card {
    overflow: hidden;
}

.table-wrap {
    width: 100%;
    max-width: 100%;
    overflow: auto;
    overscroll-behavior-inline: contain;
    border-radius: var(--radius-md);
    scrollbar-width: thin;
    scrollbar-color: rgba(99, 102, 241, .32) transparent;
}

.table-wrap::-webkit-scrollbar,
.calendar-grid::-webkit-scrollbar,
.calendar-weekdays::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.table-wrap::-webkit-scrollbar-thumb,
.calendar-grid::-webkit-scrollbar-thumb,
.calendar-weekdays::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: rgba(99, 102, 241, .32);
    background-clip: padding-box;
}

.table-wrap.is-scrollable {
    box-shadow: inset -20px 0 20px -24px rgba(15, 23, 42, .48);
}

.table-wrap.is-scrollable.is-scrolled-end {
    box-shadow: inset 20px 0 20px -24px rgba(15, 23, 42, .48);
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

th,
td {
    padding: 13px 14px;
    vertical-align: top;
}

th {
    color: #475569;
    font-size: .78rem;
    letter-spacing: .02em;
    white-space: nowrap;
}

td {
    color: #334155;
    border-top-color: rgba(148, 163, 184, .13);
}

tbody tr {
    transition: background .16s ease;
}

tbody tr:hover {
    background: rgba(238, 242, 255, .62);
}

.table-actions,
.table-actions-stack {
    gap: 7px;
}

/* Calendar and event presentation -------------------------------------- */
.booking-calendar-card,
.booking-calendar-hero {
    overflow: hidden;
}

.booking-calendar-header {
    gap: 18px;
}

.booking-calendar-heading p {
    max-width: 760px;
}

.calendar-nav-group,
.calendar-view-group {
    gap: 7px;
}

.calendar-day {
    border-color: rgba(148, 163, 184, .16);
    background: rgba(255, 255, 255, .90);
}

.calendar-day:hover,
.calendar-day:focus-within {
    border-color: rgba(99, 102, 241, .34);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .08);
}

.event-list-card {
    border-radius: 18px;
    box-shadow: var(--shadow-xs);
}

/* Alerts and empty states ---------------------------------------------- */
.alert {
    border-radius: 14px;
    box-shadow: var(--shadow-xs);
}

.empty-state {
    color: #64748b;
}

.mini-note {
    border-radius: 14px;
    background: #f8fafc;
    border-color: rgba(99, 102, 241, .19);
}

/* Authentication ------------------------------------------------------- */
.auth-wrap {
    padding-block: clamp(12px, 3vw, 36px);
}

.auth-card {
    overflow: hidden;
    border-radius: var(--radius-xl);
    box-shadow: 0 24px 70px rgba(15, 23, 42, .16);
}

.auth-side,
.auth-form {
    padding: clamp(24px, 4vw, 44px);
}

.btn-google {
    min-height: 50px;
    border-radius: 13px;
}

/* Privacy footer -------------------------------------------------------- */
.content-privacy-footer {
    margin-top: auto;
    padding-top: 22px;
    padding-bottom: 6px;
}

/* Mobile quick navigation ---------------------------------------------- */
.mobile-tabbar {
    display: none;
}

/* Accessibility --------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid rgba(79, 70, 229, .28);
    outline-offset: 3px;
}

.skip-link {
    z-index: 3000;
}

/* Responsive ------------------------------------------------------------ */
@media (max-width: 1280px) {
    .app-shell {
        --sidebar-width: 268px;
    }

    .topbar-page-context {
        display: none;
    }

    .user-chip {
        max-width: 190px;
    }
}

@media (max-width: 1024px) {
    .stats-grid,
    .grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filter-bar > .btn {
        width: 100%;
    }
}

@media (max-width: 900px) {
    .content {
        max-width: none;
        padding: 18px;
    }

    .sidebar {
        width: min(350px, 90vw);
        padding: 14px;
    }

    .topbar {
        gap: 10px;
    }

    .brand-text {
        max-width: 38vw;
    }

    .toolbar {
        align-items: stretch;
    }

    .toolbar .hero-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .toolbar .hero-actions .btn {
        flex: 0 1 auto;
    }

    .grid-2,
    .grid-3,
    .hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    :root {
        --radius-lg: 20px;
        --radius-xl: 24px;
    }

    body {
        font-size: 14px;
    }

    .topbar {
        min-height: 64px;
        padding: 9px 10px;
    }

    .brand-mark {
        width: 40px;
        height: 40px;
    }

    .brand-text {
        max-width: 42vw;
    }

    .brand small {
        display: none;
    }

    .topbar-tools {
        width: auto;
        margin-left: auto;
    }

    .topbar-quick-link {
        padding: 7px;
    }

    .topbar-quick-text,
    .user-chip > div:last-child,
    .topbar-action > span:not(.btn-icon) {
        display: none;
    }

    .user-chip {
        width: 44px;
        height: 44px;
        padding: 4px;
        justify-content: center;
        border-radius: 14px;
    }

    .avatar {
        width: 34px;
        height: 34px;
    }

    .topbar-action {
        width: 44px;
        padding: 0;
    }

    .content {
        padding: 14px 13px calc(92px + env(safe-area-inset-bottom));
    }

    .hero-card,
    .card,
    .panel,
    .table-card,
    .form-card,
    .empty-state,
    .toolbar {
        padding: 17px;
    }

    .toolbar {
        gap: 13px;
        margin-bottom: 14px;
    }

    .toolbar .hero-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .toolbar .hero-actions .btn {
        width: 100%;
        min-width: 0;
        padding-inline: 10px;
    }

    .hero-actions {
        gap: 9px;
    }

    .hero-actions > .btn {
        flex: 1 1 min(100%, 180px);
    }

    .stats-grid,
    .grid-4,
    .overview-grid,
    .filter-bar {
        grid-template-columns: 1fr;
    }

    .stat-card,
    .overview-card {
        min-height: 112px;
        padding: 16px;
    }

    .room-grid {
        grid-template-columns: 1fr;
    }

    .room-body {
        padding: 17px;
    }

    .room-card-footer,
    .room-card-footer .hero-actions,
    .room-card-footer .btn {
        width: 100%;
    }

    .room-card-footer .btn {
        justify-content: center;
    }

    .room-view-stat {
        justify-content: flex-start;
    }

    .table-card {
        overflow: visible;
    }

    .table-wrap.is-responsive-table {
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .table-wrap.is-responsive-table table,
    .table-wrap.is-responsive-table tbody,
    .table-wrap.is-responsive-table tr,
    .table-wrap.is-responsive-table td {
        width: 100%;
    }

    .table-wrap.is-responsive-table tbody tr:not(.table-empty-row) {
        margin-bottom: 12px;
        padding: 7px;
        border: 1px solid rgba(148, 163, 184, .18);
        border-radius: 16px;
        background: #fff;
        box-shadow: var(--shadow-xs);
    }

    .table-wrap.is-responsive-table td {
        min-width: 0;
        overflow-wrap: anywhere;
        border-top-color: rgba(148, 163, 184, .12);
    }

    .table-wrap.is-responsive-table td:first-child {
        border-top: 0;
    }

    .table-actions,
    .table-actions-stack {
        width: 100%;
    }

    .table-actions .btn,
    .table-actions-stack .btn {
        flex: 1 1 120px;
    }

    .booking-calendar-card {
        padding: 15px;
    }

    .calendar-grid.calendar-grid-month,
    .calendar-weekdays:not(.is-single-day) {
        grid-template-columns: repeat(7, minmax(92px, 1fr));
    }

    .calendar-grid.calendar-grid-week {
        grid-template-columns: repeat(7, minmax(132px, 1fr));
    }

    .content-privacy-footer {
        padding-bottom: 0;
    }

    .mobile-tabbar {
        position: fixed;
        z-index: 120;
        right: 10px;
        bottom: max(8px, env(safe-area-inset-bottom));
        left: 10px;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        gap: 4px;
        min-height: 64px;
        padding: 6px;
        border: 1px solid rgba(255, 255, 255, .72);
        border-radius: 20px;
        background: rgba(15, 23, 42, .94);
        box-shadow: 0 16px 44px rgba(15, 23, 42, .26);
        backdrop-filter: blur(18px);
    }

    .mobile-tabbar-item {
        display: flex;
        min-width: 0;
        min-height: 52px;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 3px;
        padding: 5px 3px;
        border-radius: 14px;
        color: rgba(226, 232, 240, .76);
        font-size: .67rem;
        font-weight: 650;
        line-height: 1.15;
        text-align: center;
    }

    .mobile-tabbar-item:hover,
    .mobile-tabbar-item:focus-visible,
    .mobile-tabbar-item.is-active {
        color: #fff;
        background: linear-gradient(135deg, rgba(99, 102, 241, .88), rgba(67, 56, 202, .92));
    }

    .mobile-tabbar-icon {
        width: 21px;
        height: 21px;
    }

    .ux-back-to-top {
        right: 16px;
        bottom: calc(82px + env(safe-area-inset-bottom));
        width: 42px;
        height: 42px;
    }

    .daily-popup-root {
        padding-bottom: calc(76px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 430px) {
    .brand-text {
        max-width: 34vw;
    }

    .topbar-quick-link:nth-of-type(2) {
        display: none;
    }

    .toolbar .hero-actions {
        grid-template-columns: 1fr;
    }

    .btn {
        padding-inline: 13px;
    }

    .mobile-tabbar-item {
        font-size: .62rem;
    }
}

@media (hover: none), (pointer: coarse) {
    .card:hover,
    .panel:hover,
    .table-card:hover,
    .form-card:hover,
    .stat-card:hover,
    .overview-card:hover,
    .room-card:hover,
    .event-list-card:hover,
    .btn:hover {
        transform: none;
    }

    .room-card:hover .room-media img {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (forced-colors: active) {
    .topbar,
    .sidebar,
    .mobile-tabbar {
        border: 1px solid CanvasText;
    }

    .mobile-tabbar-item.is-active {
        outline: 2px solid Highlight;
    }
}

@media print {
    body {
        color: #000;
        background: #fff;
    }

    .topbar,
    .sidebar,
    .nav-overlay,
    .mobile-tabbar,
    .ux-back-to-top,
    .content-privacy-footer,
    .hero-actions,
    .table-actions {
        display: none !important;
    }

    .body-wrap {
        display: block;
    }

    .content {
        max-width: none;
        padding: 0;
    }

    .card,
    .panel,
    .table-card,
    .form-card,
    .stat-card,
    .toolbar {
        break-inside: avoid;
        border: 1px solid #bbb;
        box-shadow: none;
    }
}

/* ===== assets/css/refactor-20260727.css ===== */
/* OPS MeetingHub refactor layer — 2026-07-27
 * Keep this file small and focused. It normalizes cross-page behavior after the
 * historical stylesheets, while the build task preserves their cascade order.
 */
:root {
    --app-font: "Noto Sans Thai", "Leelawadee UI", Tahoma, Arial, sans-serif;
    --focus-ring: 0 0 0 4px rgba(37, 99, 235, .28);
    --touch-target: 44px;
}

html { scroll-behavior: smooth; }
html,
body,
button,
input,
select,
textarea { font-family: var(--app-font); }

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid #1d4ed8;
    outline-offset: 3px;
    box-shadow: var(--focus-ring);
}

:where(.btn, .icon-btn, .top-link, .nav-item, .mobile-tabbar-item, input:not([type="hidden"]), select) {
    min-height: var(--touch-target);
}

.topbar-logout-form,
.inline-form { margin: 0; }

.flash-stack:empty { display: none; }
.flash-stack {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.toolbar-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.result-summary {
    margin: 0 0 12px;
    color: var(--muted, #64748b);
    font-size: .95rem;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 22px 0 4px;
}

.pagination-link,
.pagination-current,
.pagination-ellipsis {
    display: inline-flex;
    min-width: var(--touch-target);
    min-height: var(--touch-target);
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    padding: 8px 12px;
}

.pagination-link {
    border: 1px solid rgba(15, 23, 42, .14);
    background: #fff;
    color: #1e3a8a;
    font-weight: 700;
}

.pagination-link:hover { background: #eff6ff; }
.pagination-link.is-current,
.pagination-current {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
    font-weight: 800;
    pointer-events: none;
}
.pagination-ellipsis { color: #64748b; }

.notification-list {
    display: grid;
    gap: 12px;
}
.notification-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
}
.notification-item.is-unread {
    border-inline-start: 4px solid #2563eb;
}
.notification-meta {
    color: var(--muted, #64748b);
    font-size: .88rem;
}

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

[data-confirm-message] { touch-action: manipulation; }

/* Avoid content jumping under the sticky header when skip links or anchors run. */
:target { scroll-margin-top: 96px; }

@media (max-width: 720px) {
    .toolbar-search { grid-template-columns: 1fr; }
    .toolbar-search .btn { width: 100%; }
    .notification-item { grid-template-columns: 1fr; }
    .table-actions > * { flex: 1 1 100%; }
    .table-actions .btn { justify-content: center; width: 100%; }
    .pagination { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (forced-colors: active) {
    :where(.btn, .pagination-link, .pagination-current) { border: 1px solid ButtonText; }
}

.pagination-summary {
    flex: 1 1 100%;
    text-align: center;
    color: var(--muted, #64748b);
    font-size: .9rem;
}
.pagination-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

/* Reusable spacing/alignment utilities replace repeated inline declarations. */
.section-gap { margin-bottom: 1.125rem; }
.actions-end { margin-top: 0; justify-content: flex-end; }

.inline-install-form { display: inline-block; margin-left: 0.625rem; }
.section-top-gap { margin-top: 1.5rem; }

/* ===== assets/css/accessibility-ux-20260727.css ===== */
/*
 * MeetingHub Accessibility & Mobile-first UX hardening
 * Added 2026-07-27. Keep this file last in tools/build_assets.php.
 */

:root {
    --a11y-focus: #1d4ed8;
    --a11y-focus-ring: #ffffff;
    --a11y-danger: #b42318;
    --a11y-danger-bg: #fff4f2;
    --a11y-danger-border: #fda29b;
    --a11y-success: #067647;
    --a11y-success-bg: #ecfdf3;
    --a11y-touch-target: 44px;
}

/* Preserve readable text after later mobile cascade layers. */
html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--topbar-height, 76px) + 16px);
}

body,
button,
input,
select,
textarea {
    font-size: 1rem;
}

body {
    line-height: 1.6;
}

/* Strong, consistent keyboard focus that remains visible on light and dark UI. */
body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--a11y-focus-ring);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--a11y-focus);
}

:where(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--a11y-danger);
    box-shadow: 0 0 0 3px rgba(180, 35, 24, .14);
}

:where(.input, .select, .textarea) {
    min-height: 48px;
    font-size: 1rem;
    line-height: 1.45;
}

.textarea {
    min-height: 132px;
    resize: vertical;
}

/* Form structure and feedback. */
.form-intro {
    margin: 0 0 20px;
    color: var(--muted, #475467);
}

.required-indicator {
    color: var(--a11y-danger);
    font-weight: 800;
    margin-inline-start: 3px;
}

.form-section {
    grid-column: 1 / -1;
    min-width: 0;
    margin: 0;
    padding: 20px;
    border: 1px solid var(--line, #d0d5dd);
    border-radius: 18px;
    background: #ffffff;
}

.form-section + .form-section {
    margin-top: 4px;
}

.form-section-legend {
    max-width: 100%;
    padding: 0 8px;
    color: var(--ink, #101828);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.35;
}

.form-section-description {
    margin: -4px 0 16px;
    color: var(--muted, #475467);
    font-size: .9375rem;
}

.form-section .form-grid {
    margin: 0;
}

.field-help,
.field-error,
.inline-status {
    display: block;
    margin-top: 7px;
    font-size: .875rem;
    line-height: 1.45;
}

.field-help {
    color: var(--muted, #475467);
}

.field-error {
    color: var(--a11y-danger);
    font-weight: 700;
}

.inline-status {
    min-height: 1.35em;
    color: var(--muted, #475467);
}

.inline-status.is-success {
    color: var(--a11y-success);
}

.inline-status.is-error {
    color: var(--a11y-danger);
    font-weight: 700;
}

.error-summary {
    margin: 0 0 20px;
    padding: 16px 18px;
    border: 1px solid var(--a11y-danger-border);
    border-left: 5px solid var(--a11y-danger);
    border-radius: 14px;
    background: var(--a11y-danger-bg);
    color: #7a271a;
}

.error-summary:focus {
    outline: 3px solid var(--a11y-focus);
    outline-offset: 3px;
}

.error-summary h2,
.error-summary h3 {
    margin: 0 0 8px;
    color: #7a271a;
    font-size: 1rem;
}

.error-summary ul {
    margin: 0;
    padding-inline-start: 22px;
}

.filter-field {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.filter-field > span:first-child,
.control-label {
    color: var(--ink, #101828);
    font-weight: 700;
    line-height: 1.35;
}

/* Make checkbox/radio rows easier to scan and tap. */
.choice-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.choice-card,
.feature-tags label.tag,
.terms-check {
    min-height: var(--a11y-touch-target);
}

.feature-tags label.tag,
.terms-check {
    cursor: pointer;
}

.feature-tags input[type="checkbox"],
.terms-check input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    accent-color: var(--primary, #1d4ed8);
}

/* Calendar view buttons are a pressed-button group, not tabs. */
.calendar-view-group {
    gap: 4px;
}

.calendar-view-btn[aria-pressed="true"] {
    font-weight: 800;
}

/* Carousel: 44 px controls while retaining a compact visual dot. */
.room-gallery {
    position: relative;
}

.room-gallery-stage {
    isolation: isolate;
}

.room-gallery-slide[aria-hidden="true"] {
    pointer-events: none;
}

.gallery-dots {
    min-height: var(--a11y-touch-target);
    align-items: center;
    gap: 0;
}

.gallery-dot {
    position: relative;
    width: var(--a11y-touch-target);
    height: var(--a11y-touch-target);
    min-width: var(--a11y-touch-target);
    min-height: var(--a11y-touch-target);
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
}

.gallery-dot::before {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 10px;
    height: 10px;
    border: 2px solid rgba(255, 255, 255, .92);
    border-radius: 999px;
    background: rgba(15, 23, 42, .48);
    transform: translate(-50%, -50%);
    content: "";
}

.gallery-dot.is-active::before,
.gallery-dot[aria-pressed="true"]::before {
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(15, 23, 42, .34);
}

.gallery-dot.is-active,
.gallery-dot[aria-pressed="true"] {
    background: transparent;
    box-shadow: none;
}

.gallery-thumb {
    min-width: 56px;
    min-height: 44px;
}

.gallery-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px 0;
}

.gallery-position {
    color: var(--muted, #475467);
    font-size: .875rem;
    font-weight: 700;
}

.gallery-auto-toggle {
    min-height: var(--a11y-touch-target);
    padding: 8px 12px;
    border: 1px solid var(--line, #d0d5dd);
    border-radius: 999px;
    background: #ffffff;
    color: var(--ink, #101828);
    font-size: .875rem;
    font-weight: 750;
    cursor: pointer;
}

.gallery-auto-toggle:hover {
    background: var(--soft, #f2f4f7);
}

.gallery-hint {
    margin-top: 4px;
}

/* Modal dialog positioning and robust mobile behavior. */
.lightbox,
.daily-popup-root {
    overscroll-behavior: contain;
}

.lightbox[aria-hidden="true"],
.daily-popup-root[aria-hidden="true"] {
    pointer-events: none;
}

.lightbox-figure {
    max-height: calc(100dvh - 96px);
}

.lightbox-figure img {
    max-height: calc(100dvh - 154px);
}

.lightbox-close,
.lightbox-nav,
.daily-popup-close {
    min-width: var(--a11y-touch-target);
    min-height: var(--a11y-touch-target);
}

/* Only add a table tab stop when JavaScript confirms horizontal overflow. */
.table-wrap:not(.is-scrollable) {
    outline: none;
}

.table-wrap.is-scrollable::after {
    content: "เลื่อนแนวนอนเพื่อดูข้อมูลเพิ่มเติม";
    display: block;
    position: sticky;
    left: 0;
    width: max-content;
    margin: 8px 0 2px;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--soft, #f2f4f7);
    color: var(--muted, #475467);
    font-size: .75rem;
    font-weight: 700;
}

/* Mobile-first: one-column content, readable labels and reachable actions. */
@media (max-width: 680px) {
    body,
    button,
    input,
    select,
    textarea {
        font-size: 1rem;
    }

    .content {
        min-width: 0;
    }

    .form-card,
    .panel,
    .card {
        border-radius: 16px;
    }

    .form-section {
        padding: 16px;
        border-radius: 15px;
    }

    .form-grid,
    .form-section .form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .form-grid > *,
    .form-section .form-grid > * {
        grid-column: 1 / -1;
        min-width: 0;
    }

    .hero-actions > .btn,
    .daily-popup-actions > .btn {
        min-height: 48px;
    }

    .mobile-tabbar-item {
        min-height: 56px;
        font-size: .8125rem;
        line-height: 1.2;
    }

    .gallery-toolbar {
        align-items: stretch;
        flex-direction: column;
        padding-inline: 12px;
    }

    .gallery-auto-toggle {
        width: 100%;
    }

    .gallery-dots {
        max-width: calc(100% - 104px);
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .lightbox {
        padding: 12px;
    }

    .lightbox-nav.prev {
        left: 8px;
    }

    .lightbox-nav.next {
        right: 8px;
    }

    .daily-popup-card {
        max-height: calc(100dvh - 28px);
        overflow-y: auto;
    }
}

@media (min-width: 681px) {
    .choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .room-gallery-slide,
    .lightbox,
    .daily-popup-card,
    .nav-group-panel {
        scroll-behavior: auto;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (forced-colors: active) {
    body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
        outline: 3px solid Highlight;
        box-shadow: none;
    }

    .gallery-dot::before {
        border-color: ButtonText;
        background: ButtonFace;
    }

    .gallery-dot[aria-pressed="true"]::before {
        background: Highlight;
    }
}

body.modal-lock {
    overflow: hidden;
    touch-action: none;
}

.lightbox {
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
}

.lightbox-dialog {
    position: relative;
    display: grid;
    width: min(100%, 1600px);
    min-height: min(86dvh, 960px);
    place-items: center;
}

@media (max-width: 900px) {
    .lightbox-dialog {
        width: 100%;
        min-height: calc(100dvh - 24px);
    }
}

.booking-form-sections {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}

.booking-form-sections .form-section .form-grid {
    grid-template-columns: minmax(170px, .42fr) minmax(0, 1fr);
    align-items: start;
    column-gap: 18px;
    row-gap: 12px;
}

.booking-form-sections .form-section .form-grid > label:not(.full) {
    grid-column: 1;
    align-self: center;
    margin: 0;
}

.booking-form-sections .form-section .form-grid > :where(input, select, textarea, div):not(.full) {
    grid-column: 2;
    width: 100%;
}

.booking-form-sections .form-section .form-grid > .field-help:not(.full) {
    grid-column: 2;
    margin-top: -7px;
}

.choice-group {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.choice-group > legend {
    margin-bottom: 10px;
    padding: 0;
}

.choice-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}

@media (max-width: 760px) {
    .booking-form-sections .form-section .form-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .booking-form-sections .form-section .form-grid > *,
    .booking-form-sections .form-section .form-grid > label:not(.full),
    .booking-form-sections .form-section .form-grid > :where(input, select, textarea, div):not(.full),
    .booking-form-sections .form-section .form-grid > .field-help:not(.full) {
        grid-column: 1 / -1;
    }

    .booking-form-sections .form-section .form-grid > label:not(.full) {
        margin-top: 8px;
    }
}