@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap";
:root{--bg-base:#f8fafc;--bg-surface:#fff;--bg-elevated:#f1f5f9;--bg-glass:#ffffffd9;--border-subtle:#0f172a14;--border-glow:#4f46e533;--accent-primary:#4f46e5;--accent-secondary:#0ea5e9;--grad-primary:linear-gradient(135deg, #4f46e5 0%, #0ea5e9 100%);--grad-sunset:linear-gradient(135deg, #f43f5e 0%, #f97316 100%);--grad-emerald:linear-gradient(135deg, #10b981 0%, #3b82f6 100%);--text-main:#0f172a;--text-muted:#475569;--text-dim:#64748b;--status-clean-bg:#10b9811a;--status-clean-fg:#059669;--status-dirty-bg:#f43f5e1a;--status-dirty-fg:#e11d48;--status-ooo-bg:#f973161a;--status-ooo-fg:#ea580c;--status-insp-bg:#0ea5e91a;--status-insp-fg:#0284c7;--status-occ-bg:#8b5cf61a;--status-occ-fg:#7c3aed;--shadow-sm:0 2px 8px #0f172a0a;--shadow-lg:0 12px 32px #0f172a14;--shadow-glow:0 0 24px #4f46e533;--radius-sm:8px;--radius-md:16px;--radius-lg:24px;--radius-full:9999px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{background-color:var(--bg-base);color:var(--text-main);-webkit-font-smoothing:antialiased;background-image:radial-gradient(circle at 15%,#4f46e50a,#0000 25%),radial-gradient(circle at 85% 30%,#0ea5e90a,#0000 25%);background-attachment:fixed;min-height:100vh;font-family:Outfit,sans-serif}.app-layout{min-height:100vh}.sidebar{background:var(--bg-glass);-webkit-backdrop-filter:blur(20px);border-right:1px solid var(--border-subtle);z-index:100;flex-direction:column;grid-row:1/-1;width:220px;height:100vh;display:flex;position:fixed;top:0;left:0;box-shadow:4px 0 24px #0003}.sidebar-logo{align-items:center;gap:12px;height:70px;padding:24px;display:flex}.sidebar-logo .logo-icon{background:var(--grad-primary);width:36px;height:36px;box-shadow:var(--shadow-glow);border-radius:10px;justify-content:center;align-items:center;font-size:18px;display:flex}.sidebar-logo .logo-text{letter-spacing:-.5px;background:var(--grad-primary);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:18px;font-weight:800}.sidebar-nav{flex-direction:column;flex:1;gap:4px;padding:0 12px 20px;display:flex;overflow-y:auto}.nav-section-label{color:var(--text-dim);letter-spacing:1.5px;text-transform:uppercase;padding:16px 12px 8px;font-size:11px;font-weight:700}.nav-item{color:var(--text-muted);cursor:pointer;border-radius:var(--radius-md);align-items:center;gap:12px;padding:12px 16px;font-size:14px;font-weight:500;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden}.nav-item:before{content:"";background:var(--grad-primary);opacity:0;width:3px;transition:opacity .3s;position:absolute;top:0;bottom:0;left:0}.nav-item:hover{color:var(--text-main);background:#0f172a0a;transform:translate(4px)}.nav-item.active{color:var(--text-main);background:#4f46e51a}.nav-item.active:before{opacity:1}.nav-badge{background:var(--grad-sunset);color:#fff;border-radius:var(--radius-full);margin-left:auto;padding:2px 8px;font-size:11px;font-weight:700;box-shadow:0 2px 8px #f43f5e66}.topbar{background:var(--bg-glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--border-subtle);z-index:50;justify-content:space-between;align-items:center;height:60px;margin-left:220px;padding:0 24px;display:flex;position:sticky;top:0}.topbar-title{color:var(--text-main);letter-spacing:-.5px;font-size:20px;font-weight:600}.topbar-date{color:var(--text-muted);margin-top:2px;font-size:13px}.topbar-right{align-items:center;gap:16px;display:flex}.btn{background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-full);color:var(--text-main);cursor:pointer;align-items:center;gap:8px;padding:8px 16px;font-family:inherit;font-size:13px;font-weight:500;transition:all .3s;display:flex}.btn:hover{border-color:var(--border-glow);background:#0f172a0a;transform:translateY(-1px)}.btn.primary{background:var(--grad-primary);border:none;font-weight:600;box-shadow:0 4px 12px #4f46e54d}.btn.primary:hover{box-shadow:var(--shadow-glow);transform:translateY(-2px)}.main-content{width:calc(100% - 220px);margin-top:60px;margin-left:220px;padding:24px}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;width:100%;margin-bottom:24px;display:grid}.stat-card{background:var(--bg-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:24px;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.stat-card:before{content:"";background:var(--grad-primary);opacity:0;height:2px;transition:opacity .3s;position:absolute;top:0;left:0;right:0}.stat-card:hover{border-color:var(--border-glow);box-shadow:var(--shadow-lg);transform:translateY(-4px)}.stat-card:hover:before{opacity:1}.stat-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.stat-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;font-size:13px;font-weight:600}.stat-icon{background:#0f172a0a;border-radius:12px;justify-content:center;align-items:center;width:40px;height:40px;font-size:20px;display:flex}.stat-value{color:var(--text-main);letter-spacing:-1px;margin-bottom:8px;font-family:JetBrains Mono,monospace;font-size:36px;font-weight:800}.stat-sub{color:var(--text-muted);align-items:center;gap:6px;font-size:13px;display:flex}.stat-trend.up{color:var(--status-clean-fg)}.stat-trend.down{color:var(--status-dirty-fg)}.card{background:var(--bg-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:border-color .3s;overflow:hidden}.card:hover{border-color:var(--border-glow)}.card-header{border-bottom:1px solid var(--border-subtle);background:#0f172a05;justify-content:space-between;align-items:center;padding:20px 24px;display:flex}.card-title{letter-spacing:-.3px;font-size:16px;font-weight:700}.room-matrix{grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:12px;display:grid}.room-tile{background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);text-align:center;cursor:pointer;padding:16px 12px;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative}.room-tile:hover{box-shadow:var(--shadow-lg);border-color:var(--border-glow);transform:translateY(-4px)scale(1.02)}.room-num{margin-bottom:4px;font-family:JetBrains Mono,monospace;font-size:24px;font-weight:800}.room-type{color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;font-size:10px;font-weight:600}.status-pill{letter-spacing:.5px;text-transform:uppercase;border-radius:var(--radius-full);padding:4px 8px;font-size:10px;font-weight:800;display:inline-block}.status-CLEAN{background:var(--status-clean-bg);color:var(--status-clean-fg)}.status-DIRTY{background:var(--status-dirty-bg);color:var(--status-dirty-fg)}.status-OOO{background:var(--status-ooo-bg);color:var(--status-ooo-fg)}.status-INSPECTED{background:var(--status-insp-bg);color:var(--status-insp-fg)}.status-OCCUPIED{background:var(--status-occ-bg);color:var(--status-occ-fg)}.room-tile:after{content:"";border-radius:inherit;pointer-events:none;opacity:.1;transition:opacity .3s;position:absolute;inset:0}.room-tile.CLEAN:after{background:var(--status-clean-fg)}.room-tile.DIRTY:after{background:var(--status-dirty-fg)}.room-tile.OOO:after{background:var(--status-ooo-fg)}.room-tile.INSPECTED:after{background:var(--status-insp-fg)}.room-tile.OCCUPIED:after{background:var(--status-occ-fg)}.room-tile:hover:after{opacity:.2}.layout-grid{grid-template-columns:2fr 1fr;gap:24px;width:100%;margin-bottom:32px;display:grid}@media (max-width:1200px){.layout-grid{grid-template-columns:1fr}}.table-wrapper{overflow-x:auto}.modern-table{border-collapse:separate;border-spacing:0;width:100%}.modern-table th{color:var(--text-muted);text-align:left;text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid var(--border-subtle);background:#0f172a05;padding:16px 24px;font-size:12px;font-weight:600}.modern-table td{border-bottom:1px solid var(--border-subtle);padding:16px 24px;font-size:14px;transition:background .2s}.modern-table tr:hover td{background:#0f172a05}.modern-table tr:last-child td{border-bottom:none}.activity-list{padding:8px 0}.activity-item{border-bottom:1px solid var(--border-subtle);cursor:pointer;gap:16px;padding:16px 24px;transition:background .2s;display:flex}.activity-item:hover{background:#0f172a05}.activity-item:last-child{border-bottom:none}.act-icon{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-size:14px;display:flex}.act-content{flex:1}.act-title{margin-bottom:4px;font-size:14px;font-weight:600}.act-desc{color:var(--text-muted);font-size:13px}.act-time{color:var(--text-dim);font-family:JetBrains Mono,monospace;font-size:12px}.tape-chart{background:var(--bg-glass);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);margin-bottom:32px;overflow:auto hidden}.tc-header-row{display:flex}.tc-room-cell{border-right:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);background:#0f172a05;flex-direction:column;flex-shrink:0;justify-content:center;width:140px;padding:12px;display:flex}.tc-date-cell{text-align:center;border-right:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);min-width:60px;color:var(--text-muted);flex:1;padding:12px 8px;font-size:12px}.tc-date-cell.today{color:var(--accent-secondary);background:#06b6d40d;font-weight:700}.tc-row{display:flex}.tc-grid-cell{border-right:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);cursor:crosshair;flex:1;min-width:60px;height:52px;position:relative}.tc-grid-cell:hover{background:#0f172a08}.tc-block{color:#fff;white-space:nowrap;cursor:pointer;z-index:5;border-radius:6px;padding:4px 8px;font-size:11px;font-weight:600;transition:transform .2s;position:absolute;inset:6px 2px;overflow:hidden;box-shadow:0 2px 8px #0003}.tc-block:hover{z-index:10;transform:scale(1.02)}.res-confirmed{background:var(--grad-primary)}.res-checkedin{background:var(--grad-emerald)}.res-checkout{background:linear-gradient(135deg,#64748b,#475569)}.animate-fade-in{animation:.5s cubic-bezier(.4,0,.2,1) forwards fadeIn}.animate-slide-up{opacity:0;animation:.5s cubic-bezier(.4,0,.2,1) forwards slideUp}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.stagger-1{animation-delay:.1s}.stagger-2{animation-delay:.2s}.stagger-3{animation-delay:.3s}.flex-between{justify-content:space-between;align-items:center;display:flex}.flex-center{align-items:center;gap:8px;display:flex}.text-gradient{background:var(--grad-primary);-webkit-text-fill-color:transparent;-webkit-background-clip:text}@media print{body *{visibility:hidden}.print-container,.print-container *{visibility:visible}.print-container{background:#fff;width:210mm;min-height:297mm;margin:0;padding:20mm;position:absolute;top:0;left:0;color:#000!important;box-shadow:none!important}.print-hide{display:none!important}*{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}}.a4-preview{color:#000;background:#fff;border-radius:4px;width:210mm;min-height:297mm;margin:0 auto;padding:20mm;box-shadow:0 4px 20px #0000001a}@media (max-width:1024px){.sidebar{transition:transform .3s cubic-bezier(.4,0,.2,1);transform:translate(-100%)}.sidebar.open{transform:translate(0)}.topbar{width:100%;margin-left:0;padding:0 16px}.main-content{width:100%;margin-bottom:70px;margin-left:0;padding:16px}.stats-grid{grid-template-columns:repeat(2,1fr);gap:12px}}@media (max-width:640px){.stats-grid{grid-template-columns:1fr}.topbar-right .btn span:not(.icon-only){display:none}.topbar-title{font-size:16px}.room-matrix{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px}.mobile-nav{background:var(--bg-glass);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--border-subtle);z-index:1000;justify-content:space-around;align-items:center;height:64px;padding:0 10px;position:fixed;bottom:0;left:0;right:0;display:flex!important}.mobile-nav-item{color:var(--text-dim);cursor:pointer;flex-direction:column;flex:1;align-items:center;gap:4px;font-size:10px;font-weight:600;display:flex}.mobile-nav-item.active{color:var(--accent-primary)}.mobile-nav-icon{font-size:20px}}.mobile-nav{display:none}