/* ── RoomFlow OS v25 — Base reset, gradient background, loading, toasts ── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0 }
html { height: 100%; -webkit-text-size-adjust: 100% }

/* ── Gradient mesh background ── */
body {
    font-family: var(--fd);
    color: var(--text);
    height: 100%;
    overflow: hidden;
    padding-top: env(safe-area-inset-top);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'kern' 1, 'liga' 1, 'cv11' 1;
    font-optical-sizing: auto;
    background: var(--bg);
}

button, input, select, textarea { font-family: var(--fd) }
.hidden { display: none!important }
.mt-12 { margin-top: 12px }
.mt-16 { margin-top: 16px }

/* ── Loading overlay ── */
#loadingOverlay {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--bg);
    display: flex; align-items: center; justify-content: center;
}
.spinner {
    width: 38px; height: 38px;
    border: 2.5px solid rgba(255,255,255,0.25);
    border-top-color: var(--accent);
    border-radius: 50%; animation: spin .7s linear infinite;
}

/* ── Toasts ── */
#toastContainer {
    position: fixed; bottom: calc(88px + var(--sb)); left: 50%;
    transform: translateX(-50%); z-index: 8000;
    display: flex; flex-direction: column; gap: 6px;
    pointer-events: none; width: min(340px,90vw);
}
.toast {
    background: rgba(10,5,32,0.82);
    color: #fff;
    padding: 10px 18px; border-radius: var(--rs);
    font-size: .82rem; font-weight: 600; letter-spacing: .1px;
    animation: toastIn .2s cubic-bezier(.22,.68,0,1.2);
    box-shadow: var(--sh3); text-align: center;
    will-change: transform,opacity;
    border: 1px solid rgba(255,255,255,0.14);
}
.toast.error   { background: rgba(185,28,28,0.85); border-color: rgba(254,202,202,0.3) }
.toast.success { background: rgba(21,128,61,0.85); border-color: rgba(187,247,208,0.3) }

/* ── Typography refinements ── */
.room-number     { font-size: clamp(1.4rem,2.2vw,1.75rem); letter-spacing: -1px }
.sheet-room-num  { font-size: clamp(1.8rem,5vw,2.4rem); letter-spacing: -1.2px }
.header-logo     { font-size: 1.02rem; font-weight: 800; letter-spacing: -.7px }
.sb-label, .sb-section-label { font-size: .6rem; letter-spacing: 1.2px }
.stat-pill-count, .mob-stat-chip-count { font-variant-numeric: tabular-nums }
.floor-name, .mob-floor-name { font-size: .68rem; letter-spacing: .8px }
.room-status-label { font-size: .52rem; letter-spacing: 1.2px }
.audit-time, .hist-time { font-variant-numeric: tabular-nums }

/* ── App Switcher ── */
.app-switcher { position: relative; }
.app-switcher-btn {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s; color: var(--text-3);
    background: none; border: none; cursor: pointer; flex-shrink: 0;
}
.app-switcher-btn:hover { background: var(--surface2, rgba(0,0,0,.04)); }
.app-switcher-popover {
    position: absolute; top: calc(100% + 8px); right: 0;
    background: var(--surface); border: 1px solid var(--border2);
    border-radius: 16px; box-shadow: 0 16px 40px rgba(0,0,0,.14);
    padding: 12px; width: 224px; z-index: 999;
    animation: fadeUp .2s cubic-bezier(.16,1,.3,1) both;
}
.app-switcher-popover.hidden { display: none !important; }
.switcher-label {
    font-size: 10px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--text-3);
    padding: 0 4px; margin-bottom: 8px;
}
.switcher-apps { display: flex; flex-direction: column; gap: 2px; }
.switcher-app {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 12px;
    text-decoration: none; color: var(--text); transition: background .15s;
}
.switcher-app:hover { background: var(--surface2); }
.switcher-app.current { background: var(--accent-s, rgba(91,61,245,.09)); }
.switcher-app-icon {
    width: 30px; height: 30px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; flex-shrink: 0;
}
.switcher-app-name { font-size: 13px; font-weight: 700; }
.switcher-app-sub  { font-size: 11px; color: var(--text-3); }
.switcher-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); flex-shrink: 0; margin-left: auto;
}