/* Demo App - full page root layout */
.demo-app{display:flex;width:100%;height:100vh;}
.demo-sidebar{width:256px;background:#fff;border-right:1px solid #e2e8f0;position:relative;overflow-y:auto;flex-shrink:0;display:flex;flex-direction:column;}
.demo-main{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.demo-header{height:56px;background:#fff;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;padding:0 24px;flex-shrink:0;}
.demo-header-back{font-size:13px;color:#64748b;cursor:pointer;display:flex;align-items:center;gap:6px;text-decoration:none;margin-left:12px;}
.demo-header-back:hover{color:#1e293b;}
.demo-content{flex:1;padding:24px 32px 60px;overflow-y:auto;}

.demo-sidebar-logo{padding:16px 20px;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;gap:8px;}
.demo-sidebar-logo-text{font-size:16px;font-weight:800;color:#5268db;}
.demo-sidebar-logo-sub{font-size:11px;color:#94a3b8;margin-left:auto;}
.demo-sidebar-back{padding:8px 12px;border-bottom:1px solid #e2e8f0;}
.demo-sidebar-back a{font-size:12px;color:#64748b;text-decoration:none;display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;cursor:pointer;}
.demo-sidebar-back a:hover{background:#f1f5f9;color:#1e293b;}
.demo-sidebar-nav{flex:1;padding:8px;overflow-y:auto;}
.demo-sidebar-footer{padding:12px 16px;border-top:1px solid #e2e8f0;font-size:11px;color:#94a3b8;text-align:center;}

.dm-group{margin-bottom:2px;}
.dm-parent{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:13px;font-weight:600;color:#334155;border-radius:8px;cursor:pointer;transition:all .15s;user-select:none;}
.dm-parent:hover{background:#f1f5f9;}
.dm-parent .dm-icon{width:20px;text-align:center;font-size:14px;}
.dm-parent .dm-arrow{margin-left:auto;font-size:10px;color:#94a3b8;transition:transform .2s;}
.dm-parent.open .dm-arrow{transform:rotate(90deg);}
.dm-children{display:none;padding:0 0 4px;}
.dm-parent.open+.dm-children{display:block;}
.dm-child{display:block;padding:6px 12px 6px 42px;font-size:13px;color:#64748b;border-radius:6px;cursor:pointer;transition:all .15s;}
.dm-child:hover{background:#f1f5f9;color:#1e293b;}
.dm-child.active{background:#eff2fc;color:#5268db;font-weight:600;}
.dm-single{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:13px;font-weight:600;color:#334155;border-radius:8px;cursor:pointer;transition:all .15s;}
.dm-single:hover{background:#f1f5f9;}
.dm-single.active{background:#eff2fc;color:#5268db;}
.dm-single .dm-icon{width:20px;text-align:center;font-size:14px;}

.dm-title{font-size:20px;font-weight:700;margin-bottom:20px;}
.dm-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px;margin-bottom:16px;}
.dm-card-title{font-size:15px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:8px;}
.dm-tabs{display:flex;border-bottom:2px solid #e2e8f0;margin-bottom:16px;}
.dm-tab{padding:10px 20px;font-size:13px;font-weight:500;color:#64748b;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s;}
.dm-tab:hover{color:#1e293b;}
.dm-tab.active{color:#5268db;font-weight:700;border-bottom-color:#5268db;}
.dm-table{width:100%;border-collapse:collapse;}
.dm-table th{text-align:left;padding:10px 12px;background:#f8fafc;font-size:12px;font-weight:600;color:#64748b;border-bottom:1px solid #e2e8f0;}
.dm-table td{padding:10px 12px;border-bottom:1px solid #f1f5f9;font-size:13px;color:#475569;}
.dm-table tr:hover td{background:#f8fafc;}
.dm-table tr{cursor:pointer;}
.dm-badge{display:inline-block;padding:2px 10px;border-radius:20px;font-size:11px;font-weight:600;}
.dm-b-blue{background:#dbeafe;color:#2563eb;}
.dm-b-green{background:#dcfce7;color:#16a34a;}
.dm-b-yellow{background:#fef3c7;color:#d97706;}
.dm-b-red{background:#fee2e2;color:#dc2626;}
.dm-b-gray{background:#f1f5f9;color:#94a3b8;}
.dm-b-purple{background:#ede9fe;color:#7c3aed;}
.dm-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.dm-select{padding:6px 12px;border:1px solid #e2e8f0;border-radius:8px;font-size:13px;background:#fff;color:#475569;outline:none;}
.dm-input{padding:6px 12px;border:1px solid #e2e8f0;border-radius:8px;font-size:13px;width:200px;outline:none;}
.dm-input:focus{border-color:#5268db;}
.dm-btn{padding:6px 16px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid transparent;transition:all .15s;}
.dm-btn-p{background:#5268db;color:#fff;}
.dm-btn-p:hover{background:#3d56d7;}
.dm-btn-s{background:#5268db;color:#fff;display:flex;align-items:center;gap:4px;}
.dm-btn-o{background:#fff;color:#5268db;border-color:#5268db;}
.dm-spacer{flex:1;}
.dm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;}
.dm-stat{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:16px;text-align:center;}
.dm-stat .num{font-size:24px;font-weight:800;color:#1e293b;}
.dm-stat .lbl{font-size:12px;color:#64748b;margin-top:2px;}
.dm-form{display:grid;grid-template-columns:140px 1fr;gap:0;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;}
.dm-fl{padding:10px 16px;background:#f8fafc;font-size:13px;font-weight:600;color:#475569;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;}
.dm-fv{padding:10px 16px;font-size:13px;color:#1e293b;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;gap:8px;}
.dm-form>:nth-last-child(-n+2){border-bottom:none;}

.dm-floor-map{display:flex;flex-direction:column;gap:3px;}
.dm-floor-row{display:flex;align-items:center;gap:3px;}
.dm-floor-lbl{width:48px;font-size:12px;font-weight:600;color:#64748b;text-align:right;padding-right:8px;flex-shrink:0;}
.dm-room{padding:8px 6px;border-radius:8px;font-size:11px;text-align:center;flex:1;min-width:60px;max-width:100px;cursor:pointer;transition:all .15s;}
.dm-room:hover{transform:scale(1.05);box-shadow:0 2px 8px rgba(0,0,0,.1);}
.dm-room .rn{font-weight:700;font-size:12px;}
.dm-room .rs{font-size:10px;opacity:.8;}
.dm-room.occ{background:#dbeafe;color:#2563eb;border:1px solid #bfdbfe;}
.dm-room.vac{background:#dcfce7;color:#16a34a;border:1px solid #bbf7d0;}
.dm-room.exp{background:#fef3c7;color:#d97706;border:1px solid #fde68a;}
.dm-room.upc{background:#ede9fe;color:#7c3aed;border:1px solid #ddd6fe;}
.dm-room.emp{visibility:hidden;}
.dm-legend{display:flex;gap:16px;margin-top:10px;font-size:11px;color:#64748b;}
.dm-legend span{display:flex;align-items:center;gap:4px;}
.dm-legend .dot{width:10px;height:10px;border-radius:4px;}

.dm-page{display:none;}
.dm-page.active{display:block;}
.dm-toast{position:fixed;bottom:24px;right:24px;background:#1e293b;color:#fff;padding:12px 24px;border-radius:10px;font-size:13px;z-index:99999;opacity:0;transition:opacity .3s;pointer-events:none;}
.dm-toast.show{opacity:1;}

/* Demo sidebar overlay for mobile */
.demo-sidebar-overlay {
  display: none; position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.4); opacity: 0; transition: opacity 0.3s;
}
.demo-sidebar-overlay.open { display: block; opacity: 1; }

/* Demo mobile hamburger */
.demo-menu-btn {
  display: none; background: none; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 6px 10px; cursor: pointer; font-size: 18px; line-height: 1;
  color: #475569;
}
.demo-menu-btn:hover { background: #f1f5f9; }

/* ── Tablet Breakpoint ── */
@media (max-width: 1024px) {
  .demo-sidebar { width: 200px; }
  .demo-content { padding: 20px 24px 60px; }
  .dm-stats { grid-template-columns: repeat(2, 1fr); }
}

@media(max-width:768px){
  .demo-app { flex-direction: column; }
  .demo-sidebar {
    position: fixed; left: -280px; top: 0; bottom: 0;
    width: 280px; z-index: 10001;
    transition: left 0.3s ease;
    border-right: none; box-shadow: 4px 0 20px rgba(0,0,0,0.15);
  }
  .demo-sidebar.mobile-open { left: 0; }
  .demo-menu-btn { display: block; }
  .demo-main { width: 100%; }
  .demo-content { padding: 16px; }
  .demo-header { padding: 0 16px; }
  .dm-stats { grid-template-columns: repeat(2,1fr); }
  .dm-title { font-size: 18px; }
  .dm-card { padding: 14px; }
  .dm-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .dm-tab { white-space: nowrap; padding: 8px 14px; font-size: 12px; flex-shrink: 0; }
  .dm-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dm-table th, .dm-table td { padding: 8px 8px; font-size: 12px; white-space: nowrap; }
  .dm-toolbar { gap: 8px; }
  .dm-input { width: 140px; }
  .dm-floor-lbl { width: 36px; font-size: 10px; padding-right: 4px; }
  .dm-room { min-width: 48px; padding: 6px 3px; font-size: 10px; }
  .dm-room .rn { font-size: 10px; }
  .dm-room .rs { font-size: 8px; }
  .dm-form { grid-template-columns: 80px 1fr; gap: 6px 10px; }
  .dm-fl { font-size: 12px; }
  .dm-fv { font-size: 12px; }
  .dm-legend { flex-wrap: wrap; gap: 8px; }
}
@media(max-width:480px){
  .dm-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .dm-stat { padding: 12px; }
  .dm-stat .num { font-size: 20px; }
  .dm-room { min-width: 40px; padding: 4px 2px; }
  .dm-room .rn { font-size: 9px; }
  .dm-room .rs { font-size: 7px; }
  .dm-floor-lbl { width: 30px; font-size: 9px; }
}