/* ===================== Reset & Base ===================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --primary:#1a73e8;
  --clean-available:#4CAF50;
  --clean-occupied:#1a73e8;
  --dirty-available:#FF9800;
  --dirty-occupied:#E65100;
  --maintenance:#D93025;
  --locked:#808080;
  --bg:#f5f5f5;
  --card-bg:#fff;
  --text:#333;
  --text-light:#666;
  --border:#e8e8e8;
  --shadow:0 2px 8px rgba(0,0,0,.08);
  --radius:10px;
}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;-webkit-tap-highlight-color:transparent;}
button{touch-action:manipulation;}

/* ===================== Header ===================== */
.header{position:sticky;top:0;z-index:100;background:var(--primary);color:#fff;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 8px rgba(0,0,0,.15);}
.header h1{font-size:18px;font-weight:600;}
.header-right{display:flex;align-items:center;gap:12px;font-size:13px;}
.online-badge{display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.2);padding:4px 10px;border-radius:12px;font-size:12px;}
.online-dot{width:8px;height:8px;border-radius:50%;background:#76ff03;animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.btn-logout{background:rgba(255,255,255,.2);border:none;color:#fff;padding:6px 14px;border-radius:6px;font-size:13px;cursor:pointer;}

/* ===================== Stats Bar ===================== */
.stats-bar{display:flex;gap:8px;padding:12px 12px 4px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.stat-card{flex:0 0 auto;min-width:80px;background:var(--card-bg);border-radius:var(--radius);padding:10px 14px;text-align:center;box-shadow:var(--shadow);}
.stat-card .num{font-size:24px;font-weight:700;}
.stat-card .lbl{font-size:11px;color:var(--text-light);margin-top:2px;}
.stat-card.total .num{color:var(--primary)}
.stat-card.occupied .num{color:var(--clean-occupied)}
.stat-card.available .num{color:var(--clean-available)}
.stat-card.dirty .num{color:var(--dirty-available)}
.stat-card.mt .num{color:var(--maintenance)}
.stat-card.rev .num{font-size:16px;color:#e65100;}

/* ===================== Quick Filters ===================== */
.quick-filters{display:flex;gap:8px;padding:8px 12px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.quick-filter{padding:6px 14px;border-radius:16px;font-size:12px;white-space:nowrap;border:1px solid var(--border);background:#fff;color:var(--text);cursor:pointer;flex-shrink:0;}
.quick-filter.active{background:var(--primary);color:#fff;border-color:var(--primary);}
.quick-filter.all{font-weight:600;}

/* ===================== Floor Sections ===================== */
.room-board{padding:0 12px 80px;}
.floor-section{margin-bottom:12px;}
.floor-header{font-size:13px;font-weight:600;color:var(--text-light);padding:8px 4px 6px;display:flex;align-items:center;gap:6px;}
.floor-header::before{content:'';display:inline-block;width:4px;height:14px;background:var(--primary);border-radius:2px;}
.room-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;}

/* ===================== Room Card ===================== */
.room-card{border-radius:var(--radius);padding:12px;color:#fff;cursor:pointer;position:relative;overflow:hidden;min-height:90px;box-shadow:0 1px 4px rgba(0,0,0,.15);transition:transform .15s;}
.room-card:active{transform:scale(.96);}
.room-card .room-num{font-size:20px;font-weight:700;}
.room-card .room-type{font-size:12px;opacity:.85;margin-top:2px;}
.room-card .guest-name{font-size:13px;margin-top:6px;font-weight:500;}
.room-card .guest-date{font-size:10px;opacity:.75;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.room-card .status-label{font-size:11px;margin-top:2px;opacity:.9;}
.room-card .clean-badge{position:absolute;top:8px;right:8px;font-size:10px;background:rgba(255,255,255,.3);padding:2px 6px;border-radius:8px;}
.room-card .feature-tags{display:flex;gap:3px;flex-wrap:wrap;margin-top:6px;}
.room-card .feature-tag{font-size:9px;background:rgba(255,255,255,.25);padding:1px 6px;border-radius:6px;}

/* Status colors */
.room-card.clean_available{background:var(--clean-available)}
.room-card.clean_occupied{background:var(--clean-occupied)}
.room-card.dirty_available{background:var(--dirty-available)}
.room-card.dirty_occupied{background:var(--dirty-occupied)}
.room-card.maintenance{background:var(--maintenance)}
.room-card.locked{background:var(--locked)}

/* ===================== Bottom Tab Bar ===================== */
.tab-bar{position:fixed;bottom:0;left:0;right:0;background:#fff;display:flex;border-top:1px solid var(--border);z-index:100;padding-bottom:env(safe-area-inset-bottom);}
.tab-item{flex:1;text-align:center;padding:8px 0 6px;font-size:11px;color:var(--text-light);cursor:pointer;}
.tab-item .tab-icon{font-size:20px;display:block;margin-bottom:2px;}
.tab-item.active{color:var(--primary);}

/* ===================== Modal / Drawer ===================== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;display:none;align-items:flex-end;justify-content:center;}
.modal-overlay.show{display:flex;}
.modal-sheet{width:100%;max-width:500px;max-height:80vh;background:#fff;border-radius:16px 16px 0 0;overflow-y:auto;animation:slideUp .25s ease;}
@keyframes slideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--border);position:sticky;top:0;background:#fff;z-index:1;}
.modal-header h2{font-size:17px;}
.btn-close{width:32px;height:32px;border:none;background:#f0f0f0;border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.modal-body{padding:16px;}

/* Status action buttons */
.status-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px;}
.status-btn{padding:12px 8px;border-radius:8px;border:none;color:#fff;font-size:13px;font-weight:500;cursor:pointer;text-align:center;}
.status-btn:active{opacity:.8;}
.status-btn.clean_available{background:var(--clean-available)}
.status-btn.clean_occupied{background:var(--clean-occupied)}
.status-btn.dirty_available{background:var(--dirty-available)}
.status-btn.dirty_occupied{background:var(--dirty-occupied)}
.status-btn.maintenance{background:var(--maintenance)}
.status-btn.locked{background:var(--locked)}

/* Clean status row */
.clean-actions{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;}
.clean-btn{padding:8px 14px;border-radius:20px;border:1px solid var(--border);background:#fff;font-size:12px;cursor:pointer;}
.clean-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}

/* Form elements in modal */
.modal-body .form-group{margin-bottom:14px;}
.modal-body .form-group label{display:block;font-size:13px;color:var(--text-light);margin-bottom:4px;}
.modal-body .form-group input,.modal-body .form-group select{width:100%;height:40px;border:1px solid var(--border);border-radius:8px;padding:0 10px;font-size:14px;}
.modal-body .form-group input:focus,.modal-body .form-group select:focus{border-color:var(--primary);outline:none;}
.guest-info-box{background:#f8f9fa;border-radius:10px;padding:12px 14px;margin-bottom:14px;}
.guest-info-box .form-group{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.guest-info-box .form-group:last-child{margin-bottom:0;}
.guest-info-box label{font-size:12px;color:var(--text-light);margin-bottom:0;}
.guest-info-box span{font-size:13px;font-weight:500;}
.btn-primary{width:100%;height:44px;background:var(--primary);color:#fff;border:none;border-radius:8px;font-size:15px;cursor:pointer;margin-top:8px;}
.btn-danger{width:100%;height:44px;background:var(--maintenance);color:#fff;border:none;border-radius:8px;font-size:15px;cursor:pointer;margin-top:8px;}

/* ===================== Panel Pages ===================== */
.panel-page{display:none;padding:12px 12px 80px;}
.panel-page.active{display:block;}

/* Management list */
.mgmt-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.mgmt-header h2{font-size:17px;}
.btn-add{background:var(--primary);color:#fff;border:none;padding:8px 16px;border-radius:8px;font-size:13px;cursor:pointer;}
.room-list-item{display:flex;align-items:center;justify-content:space-between;background:var(--card-bg);padding:12px;border-radius:8px;margin-bottom:8px;box-shadow:var(--shadow);}
.room-list-item .info{flex:1;}
.room-list-item .info .title{font-weight:600;font-size:15px;}
.room-list-item .info .sub{font-size:12px;color:var(--text-light);}
.room-list-item .actions{display:flex;gap:8px;}
.btn-edit,.btn-del{padding:6px 12px;border-radius:6px;border:none;font-size:12px;cursor:pointer;}
.btn-edit{background:#e3f2fd;color:var(--primary);}
.btn-del{background:#ffebee;color:var(--maintenance);}

/* Log list */
.log-item{background:var(--card-bg);padding:12px;border-radius:8px;margin-bottom:6px;box-shadow:var(--shadow);font-size:13px;}
.log-item .log-time{font-size:11px;color:var(--text-light);}
.log-item .log-action{font-weight:600;color:var(--primary);}
.log-item .log-room{color:var(--text-light);font-size:12px;}

/* Maintenance list */
.mt-item{background:var(--card-bg);padding:14px;border-radius:8px;margin-bottom:10px;box-shadow:var(--shadow);}
.mt-item .mt-header{display:flex;justify-content:space-between;align-items:center;}
.mt-item .mt-title{font-weight:600;font-size:15px;}
.mt-item .mt-room{font-size:12px;color:var(--text-light);}
.mt-item .mt-status{padding:4px 10px;border-radius:12px;font-size:11px;font-weight:500;}
.mt-item .mt-status.pending{background:#fff3e0;color:#e65100;}
.mt-item .mt-status.in_progress{background:#e3f2fd;color:var(--primary);}
.mt-item .mt-status.completed{background:#e8f5e9;color:#2e7d32;}
.mt-item .mt-desc{font-size:13px;color:var(--text-light);margin-top:4px;}
.mt-actions{display:flex;gap:8px;margin-top:10px;}
.mt-actions button{padding:6px 14px;border-radius:14px;border:1px solid var(--border);background:#fff;font-size:12px;cursor:pointer;}
.mt-actions button.primary{background:var(--primary);color:#fff;border-color:var(--primary);}

/* ===================== Toast ===================== */
.toast{position:fixed;top:60px;left:50%;transform:translateX(-50%);background:#333;color:#fff;padding:10px 24px;border-radius:20px;font-size:14px;z-index:300;opacity:0;transition:opacity .3s;pointer-events:none;}
.toast.show{opacity:1;}

/* ===================== Search ===================== */
.search-bar{padding:8px 12px;}
.search-bar input{width:100%;height:38px;border:1px solid var(--border);border-radius:20px;padding:0 16px;font-size:14px;background:#fff;}
.search-bar input:focus{border-color:var(--primary);outline:none;}

/* ===================== Feature Tags Editor ===================== */
.feature-editor{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
.feature-chip{padding:4px 10px;border-radius:12px;font-size:11px;border:1px solid var(--border);cursor:pointer;background:#fff;}
.feature-chip.selected{background:var(--primary);color:#fff;border-color:var(--primary);}

/* ===================== Cafe Monitor ===================== */
.cafe-stats{display:flex;gap:8px;padding:12px;overflow-x:auto;}
.cafe-stat-card{flex:0 0 auto;min-width:76px;background:var(--card-bg);border-radius:var(--radius);padding:8px 12px;text-align:center;box-shadow:var(--shadow);}
.cafe-stat-card .num{font-size:22px;font-weight:700;}
.cafe-stat-card .lbl{font-size:10px;color:var(--text-light);}
.cafe-stat-card.total .num{color:var(--primary);}
.cafe-stat-card.online .num{color:#4CAF50;}
.cafe-stat-card.using .num{color:#FF9800;}
.cafe-stat-card.sessions .num{color:#9C27B0;}

.cafe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;padding:12px 12px 80px;}

.cafe-card{background:var(--card-bg);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);cursor:pointer;border-left:4px solid #BDBDBD;transition:transform .15s;}
.cafe-card:active{transform:scale(.97);}
.cafe-card.online{border-left-color:#4CAF50;}
.cafe-card.in-use{border-left-color:#FF9800;}
.cafe-card.offline{border-left-color:#BDBDBD;opacity:.7;}
.cafe-card.locked{border-left-color:#D93025;}

.cafe-card-header{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.cafe-status-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.cafe-name{font-weight:600;font-size:15px;flex:1;}
.cafe-status-label{font-size:11px;padding:2px 8px;border-radius:10px;font-weight:500;}
.cafe-status-label.online{background:#e8f5e9;color:#2e7d32;}
.cafe-status-label.in-use{background:#fff3e0;color:#e65100;}
.cafe-status-label.offline{background:#f5f5f5;color:#666;}
.cafe-status-label.locked{background:#ffebee;color:#c62828;}

.cafe-card-body{font-size:12px;color:var(--text-light);}
.cafe-info-row{display:flex;justify-content:space-between;padding:2px 0;}
.cafe-info-row span{font-weight:500;color:var(--text);}
.cafe-usage{display:flex;gap:12px;margin-top:8px;padding-top:8px;border-top:1px solid var(--border);font-size:12px;}
.cafe-card-footer{margin-top:8px;padding-top:6px;border-top:1px solid var(--border);}

.cafe-usage-bars{margin-bottom:12px;}
.cafe-bar-item{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.cafe-bar-item>span:first-child{width:40px;font-size:12px;font-weight:500;}
.cafe-bar{flex:1;height:14px;background:#f0f0f0;border-radius:7px;overflow:hidden;}
.cafe-bar-fill{height:100%;border-radius:7px;transition:width .5s;}

.cafe-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font-size:13px;}
.cafe-detail-grid div span{color:var(--text-light);font-size:11px;display:block;}

.cafe-action-btn{padding:8px 14px;border-radius:8px;border:1px solid var(--border);background:#fff;font-size:13px;cursor:pointer;}
.cafe-action-btn:active{background:#f0f0f0;}

.cafe-sessions-list{max-height:400px;overflow-y:auto;}
.cafe-session-item{background:#f9f9f9;border-radius:8px;padding:10px;margin-bottom:6px;font-size:13px;display:grid;grid-template-columns:1fr 1fr;gap:4px;}
.cafe-session-item div span{color:var(--text-light);font-size:11px;}

/* ===================== Stats Panel ===================== */
.stats-period{display:flex;gap:8px;margin-bottom:16px;align-items:center;}
.stats-period .period-btn{padding:6px 16px;border-radius:16px;font-size:13px;border:1px solid var(--border);background:#fff;cursor:pointer;}
.stats-period .period-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
.stats-period .date-input{flex:1;height:36px;border:1px solid var(--border);border-radius:8px;padding:0 10px;font-size:14px;}

.stats-section{margin-bottom:24px;}
.stats-section h3{font-size:15px;font-weight:600;margin-bottom:12px;color:var(--text);}
.stats-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px;}
.stats-card{background:var(--card-bg);border-radius:var(--radius);padding:14px;text-align:center;box-shadow:var(--shadow);}
.stats-card .num{font-size:26px;font-weight:700;}
.stats-card .lbl{font-size:11px;color:var(--text-light);margin-top:4px;}
.stats-card.primary .num{color:var(--primary);}
.stats-card.success .num{color:#4CAF50;}
.stats-card.warning .num{color:#FF9800;}

/* Bar chart */
.bar-chart{display:flex;flex-direction:column;gap:8px;background:var(--card-bg);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);}
.bar-item{display:flex;align-items:center;gap:10px;}
.bar-item .bar-label{width:60px;font-size:12px;text-align:right;color:var(--text-light);flex-shrink:0;}
.bar-item .bar-track{flex:1;height:28px;background:#f0f0f0;border-radius:6px;overflow:hidden;position:relative;}
.bar-item .bar-fill{height:100%;border-radius:6px;transition:width .5s;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;font-size:12px;color:#fff;font-weight:500;min-width:0;}
.bar-item .bar-val{width:50px;font-size:12px;color:var(--text);flex-shrink:0;}

/* Pie chart */
.pie-row{display:flex;gap:20px;align-items:center;background:var(--card-bg);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);flex-wrap:wrap;}
.pie-circle{width:120px;height:120px;border-radius:50%;flex-shrink:0;}
.pie-legend{display:flex;flex-direction:column;gap:8px;min-width:100px;}
.pie-legend-item{display:flex;align-items:center;gap:8px;font-size:13px;}
.pie-legend-dot{width:12px;height:12px;border-radius:3px;flex-shrink:0;}
.pie-legend-item .val{font-weight:600;margin-left:auto;}

/* Stacked bar */
.stacked-bar{background:var(--card-bg);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);}
.stacked-track{height:36px;background:#f0f0f0;border-radius:8px;overflow:hidden;display:flex;margin-bottom:12px;}
.stacked-seg{height:100%;transition:width .5s;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;font-weight:500;}
.stacked-legend{display:flex;gap:20px;justify-content:center;font-size:13px;}
.stacked-legend span{display:flex;align-items:center;gap:6px;}
.stacked-legend .dot{width:10px;height:10px;border-radius:3px;}

/* Revenue details table */
.details-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.details-table{width:100%;border-collapse:collapse;font-size:13px;}
.details-table th,.details-table td{padding:8px 6px;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap;}
.details-table th{font-weight:600;color:var(--text-light);font-size:11px;position:sticky;top:0;background:#fff;}
.details-table tbody tr:hover{background:#f5f8ff;}
.details-table tbody tr:last-child td{border-bottom:none;}

/* Drill-down panels */
.detail-panel{margin-top:12px;}
.detail-chip{display:inline-block;font-size:12px;padding:3px 10px;border-radius:6px;margin:3px 3px 3px 0;}
.detail-chip.occupied{background:#e8f0fe;color:var(--primary);}
.detail-chip.vacant{background:#e8f5e9;color:#388E3C;}
.clickable{cursor:pointer;user-select:none;}
.clickable:hover{opacity:.85;}

/* ===================== Responsive ===================== */
@media(min-width:768px){
  .room-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));}
  .stats-bar{justify-content:center;}
  .modal-sheet{max-width:500px;border-radius:16px;margin-bottom:20px;}
  .modal-overlay{align-items:center;}
}