@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;600;700;800&family=Noto+Sans+JP:wght@300;400;500;600;700&family=Be+Vietnam+Pro:wght@300;400;500;600;700&family=Noto+Sans+Thai:wght@300;400;500;600;700&display=swap');

:root{
  --navy-900:#2b261f; --navy-800:#3a342b; --navy-700:#46402f;
  --blue:#4a5bb8; --blue-600:#3a4aa0; --blue-500:#5e6fcb; --blue-light:#ecedfa;
  --green:#3f9d6e; --green-600:#2f8458; --green-light:#e6f3ea;
  --orange:#e0843a; --orange-600:#c06a26; --orange-light:#fbeed9;
  --purple:#8261c4; --purple-600:#6a4fb0; --purple-light:#efe8f7;
  --red:#d05a4e; --red-600:#b34135; --red-light:#fbe9e6;
  --teal:#1f9486;

  --grad-blue:linear-gradient(135deg,#5e6fcb 0%,#4a5bb8 100%);
  --grad-green:linear-gradient(135deg,#52b07f 0%,#2f8458 100%);
  --grad-orange:linear-gradient(135deg,#f0a24e 0%,#c06a26 100%);
  --grad-purple:linear-gradient(135deg,#9d82d4 0%,#6a4fb0 100%);

  --white:#fdfbf6;
  --bg:#efe9df;
  --bg-soft:#e8e1d4;
  --surface:#fdfbf6;
  --text-primary:#2e2922;
  --text-secondary:#6b6356;
  --text-muted:#948b7d;
  --border:#e6ddcf;
  --border-light:#efe9dd;

  --accent:#4a5bb8; --accent-light:#ecedfa; --accent-hover:#3a4aa0; --accent-deep:#2c3578;
  --green-dark:#2f8458; --bg-warm:#f6f1e8; --bg-washi:#e8e1d4; --border-fine:#ddd2c0;

  --shadow-xs:0 1px 2px rgba(78,64,44,.05);
  --shadow-sm:0 2px 8px rgba(78,64,44,.07);
  --shadow-md:0 6px 18px rgba(78,64,44,.10);
  --shadow-lg:0 14px 40px rgba(78,64,44,.16);
  --radius:10px; --radius-lg:16px; --radius-sm:8px;
  --transition:all .2s ease;
  --sidebar-width:248px;
}

*{margin:0;padding:0;box-sizing:border-box;}

body{
  font-family:'Noto Sans TC','Noto Sans JP','Be Vietnam Pro','Noto Sans Thai',-apple-system,'Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--text-primary);
  font-size:14.5px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ════════════════════════════════════════════════
   LOGIN — two-column (restores 123.jpg layout, abc colors)
   ════════════════════════════════════════════════ */
.auth-page{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:32px 20px;
  background:linear-gradient(135deg,#ece5d8 0%,#f4efe6 50%,#e8e0d2 100%);
}
.auth-card{
  width:1040px; max-width:100%;
  display:grid; grid-template-columns:1.05fr 1fr;
  background:var(--white); border-radius:24px; overflow:hidden;
  box-shadow:0 30px 80px rgba(78,64,44,.18), 0 4px 14px rgba(78,64,44,.07);
  border:1px solid #ece3d4;
}

/* ── Left hero ── */
.auth-hero{
  position:relative; padding:44px 44px 40px; overflow:hidden;
  background:#3a342b;
  display:flex; flex-direction:column; justify-content:space-between;
}
.auth-hero-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:contrast(1.05) saturate(.8) sepia(.16) brightness(1.04);}
.auth-hero-tint{position:absolute; inset:0; background:linear-gradient(180deg,rgba(48,40,30,.10) 0%,rgba(40,33,24,.10) 45%,rgba(34,28,20,.62) 100%);}
.auth-hero-vignette{position:absolute; inset:0; box-shadow:inset 0 0 160px rgba(40,32,22,.45);}
.auth-brand{position:relative; display:flex; align-items:center; gap:12px;}
.auth-brand-logo{
  width:46px; height:46px; border-radius:13px; flex:none;
  background:rgba(255,255,255,.16); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center;
}
.auth-brand-logo svg{width:26px; height:26px;}
.auth-brand-name{font-size:18px; font-weight:700; color:#fff; line-height:1.15;}
.auth-brand-sub{font-size:12.5px; color:rgba(255,255,255,.7); letter-spacing:.3px;}
.auth-hero-foot{position:relative;}
.auth-hero-title{font-size:32px; font-weight:800; color:#fff; letter-spacing:.5px; line-height:1.3; margin:0;}
.auth-hero-desc{display:none;}
.auth-illust{display:none;}

/* ── Right form ── */
.auth-form{position:relative; padding:48px 52px 40px; display:flex; flex-direction:column;}
.auth-lang{position:absolute; top:22px; right:24px; display:flex; gap:6px;}
.auth-lang-select{display:flex; align-items:center; gap:10px; padding:9px 16px; border:1.5px solid var(--border); border-radius:999px; background:var(--white); transition:var(--transition);}
.auth-lang-select:hover{border-color:var(--blue);}
.auth-lang-select .globe{color:var(--text-muted); flex:none;}
.auth-lang-select select{border:none; background:transparent; font-family:inherit; font-size:13px; font-weight:600; color:var(--text-secondary); cursor:pointer; outline:none; appearance:none; padding:0 22px 0 0;}
.auth-lang-select .chevron{color:var(--text-muted); margin-left:-16px; pointer-events:none; flex:none;}
.auth-lang .lang-btn-dark{
  padding:5px 11px; border:1px solid var(--border); border-radius:8px;
  background:#fff; color:var(--text-secondary); cursor:pointer; font-size:11.5px;
  font-family:inherit; transition:var(--transition);
}
.auth-lang .lang-btn-dark:hover{background:var(--bg-soft);}
.auth-lang .lang-btn-dark.active{background:var(--blue); color:#fff; border-color:var(--blue);}

.auth-welcome{font-size:30px; font-weight:800; color:#2e2922; margin-bottom:8px; margin-top:8px;}
.auth-welcome-sub{font-size:14.5px; color:var(--text-secondary); margin-bottom:30px;}
.auth-label{display:block; font-size:13.5px; font-weight:600; color:#4a4337; margin-bottom:8px;}
.auth-input-wrap{
  position:relative; margin-bottom:20px;
  display:flex; align-items:center;
  background:#fff; border:1.5px solid var(--border); border-radius:12px;
  transition:var(--transition);
}
.auth-input-wrap:focus-within{border-color:var(--blue); box-shadow:0 0 0 4px rgba(74,91,184,.12);}
.auth-input-wrap .field-icon{width:20px; height:20px; margin-left:15px; color:#b7ac99; flex:none;}
.auth-input-wrap input{
  flex:1; border:none; outline:none; background:transparent;
  padding:14px 14px; font-size:15px; font-family:inherit; color:var(--text-primary);
}
.auth-input-wrap input::placeholder{color:var(--text-muted);}
.auth-eye{
  background:none; border:none; cursor:pointer; padding:0 15px; color:#b7ac99;
  display:flex; align-items:center;
}
.auth-eye:hover{color:var(--text-secondary);}
.auth-eye svg{width:20px; height:20px;}

.auth-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:26px;}
.auth-check{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--text-secondary); cursor:pointer; user-select:none;}
.auth-check input{width:17px; height:17px; accent-color:var(--blue); cursor:pointer;}
.auth-forgot{font-size:14px; color:var(--blue); text-decoration:none; font-weight:500;}
.auth-forgot:hover{text-decoration:underline;}

.auth-btn{
  width:100%; padding:15px; border:none; border-radius:12px;
  background:var(--grad-blue); color:#fff;
  font-size:16px; font-weight:700; font-family:inherit; cursor:pointer;
  letter-spacing:1px; transition:var(--transition);
  box-shadow:0 10px 22px rgba(74,91,184,.30);
}
.auth-btn:hover{transform:translateY(-1px); box-shadow:0 14px 30px rgba(74,91,184,.40);}
.auth-btn:active{transform:translateY(0);}

.auth-divider{display:flex; align-items:center; gap:14px; margin:24px 0;}
.auth-divider::before,.auth-divider::after{content:''; flex:1; height:1px; background:var(--border);}
.auth-divider span{font-size:13px; color:var(--text-muted);}

.auth-google{
  width:100%; padding:13px; border:1.5px solid var(--border); border-radius:12px;
  background:#fff; color:#4a4337; font-size:14.5px; font-weight:600; font-family:inherit;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px;
  transition:var(--transition);
}
.auth-google:hover{background:var(--bg-soft); border-color:#d8cdbb;}
.auth-google svg{width:20px; height:20px;}

.auth-demo{margin-top:22px; padding-top:18px; border-top:1px dashed var(--border);}
.auth-demo-label{font-size:11.5px; color:var(--text-muted); letter-spacing:1px; text-transform:uppercase; margin-bottom:10px; text-align:center;}
.auth-demo-row{display:flex; gap:10px;}
.login-acct-btn{
  flex:1; padding:9px 10px; background:#fff; border:1.5px solid var(--border);
  border-radius:10px; cursor:pointer; font-family:inherit; transition:var(--transition);
  display:flex; flex-direction:column; align-items:center; gap:3px;
}
.login-acct-btn:hover{border-color:#d2c6b2; background:var(--bg-soft);}
.login-acct-btn.active{border-color:var(--blue); background:var(--blue-light); box-shadow:0 0 0 3px rgba(74,91,184,.08);}
.login-acct-role{font-size:12.5px; font-weight:600; color:var(--text-secondary);}
.login-acct-btn.active .login-acct-role{color:var(--blue-600);}
.login-acct-cred{font-size:12px; color:var(--text-muted); font-family:'Courier New',monospace;}

.auth-copy{margin-top:auto; padding-top:24px; text-align:center; font-size:12px; color:var(--text-muted);}
.login-error{color:var(--red-600); font-size:13px; text-align:center; margin-top:12px; display:none;}

/* ════════════════════════════════════════════════
   APP LAYOUT
   ════════════════════════════════════════════════ */
.app-layout{display:flex; min-height:100vh;}

/* ── Sidebar (abc navy) ── */
.sidebar{
  width:var(--sidebar-width);
  background:linear-gradient(185deg,var(--navy-800) 0%,var(--navy-900) 100%);
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; bottom:0; z-index:100;
  transition:transform .3s ease;
}
.sidebar-header{padding:22px 22px 18px; display:flex; align-items:center; gap:12px;}
.sidebar-logo{
  width:40px; height:40px; border-radius:11px; flex:none;
  background:var(--grad-blue);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(74,91,184,.35);
}
.sidebar-logo svg{width:23px; height:23px;}
.sidebar-header h2{font-size:15.5px; font-weight:700; color:#fff; letter-spacing:.3px; line-height:1.2;}
.sidebar-header .sb-sub{font-size:11px; color:#a89e8b; letter-spacing:.4px;}

.sidebar-nav{flex:1; padding:8px 14px 14px; overflow-y:auto;}
.nav-group-label{
  font-size:11px; font-weight:700; color:#8a7f6c; letter-spacing:1.4px;
  text-transform:uppercase; padding:16px 12px 8px;
}
.nav-item{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; border-radius:11px;
  color:#cfc6b5; cursor:pointer; transition:var(--transition);
  font-size:14px; font-weight:500; margin-bottom:3px;
  border:none; background:none; width:100%; text-align:left;
  position:relative;
}
.nav-item:hover{background:rgba(255,255,255,.06); color:#fff;}
.nav-item.active{
  background:var(--grad-blue); color:#fff; font-weight:600;
  box-shadow:0 8px 18px rgba(74,91,184,.35);
}
.nav-item .nav-icon{font-size:18px; width:22px; text-align:center; flex:none;}

.sidebar-footer{padding:12px 14px 16px; border-top:1px solid rgba(255,255,255,.08);}
.sidebar-footer .nav-item{font-size:13.5px; padding:9px 14px;}
.sidebar-lang{display:flex; gap:5px; padding:4px 6px 10px;}
.sidebar-lang .lang-btn{
  flex:1; padding:5px 4px; border:1px solid rgba(255,255,255,.14);
  border-radius:8px; background:rgba(255,255,255,.05); cursor:pointer;
  font-size:11.5px; color:#cfc6b5; font-family:inherit; transition:var(--transition);
}
.sidebar-lang .lang-btn.active,.sidebar-lang .lang-btn:hover{
  background:var(--blue); color:#fff; border-color:var(--blue);
}

/* ── Main ── */
.main-content{flex:1; margin-left:var(--sidebar-width); min-height:100vh;}
.top-bar{
  background:var(--white); border-bottom:1px solid var(--border);
  padding:14px 30px; display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:50;
}
.top-bar-left{display:flex; align-items:center; gap:14px;}
.menu-toggle{display:none; background:none; border:none; font-size:22px; cursor:pointer; color:var(--text-secondary);}
.top-bar-title{font-size:19px; font-weight:700; color:var(--text-primary);}
.top-bar-right{display:flex; align-items:center; gap:18px;}
.datetime-display{font-size:13.5px; color:var(--text-secondary); font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:8px;}
.datetime-display .date-part{font-weight:500;}
.datetime-display .time-part{font-size:19px; font-weight:700; color:var(--text-primary);}
.user-info{display:flex; align-items:center; gap:10px; font-size:14px; font-weight:500;}
.user-avatar{
  width:38px; height:38px; border-radius:50%;
  background:var(--grad-blue); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:15px; box-shadow:0 4px 12px rgba(74,91,184,.3);
}

.page-content{padding:26px 30px;}
.greeting-text{font-size:16px; color:var(--text-secondary); margin-bottom:22px;}
.greeting-text strong{color:var(--text-primary); font-weight:700;}

/* ── Section title ── */
.section-title{
  font-size:17px; font-weight:700; margin-bottom:18px; color:var(--text-primary);
  display:flex; align-items:center; gap:9px;
}
.section-title::before{content:''; width:4px; height:18px; border-radius:3px; background:var(--grad-blue);}
.page-hidden{display:none !important;}

/* ════════════════════════════════════════════════
   STAT CARDS — colorful gradient (abc top row)
   ════════════════════════════════════════════════ */
.stats-row{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:18px; margin-bottom:26px;
}
.stat-card{
  position:relative; border-radius:var(--radius-lg); padding:22px 24px;
  background:var(--grad-blue); color:#fff; overflow:hidden;
  box-shadow:0 10px 26px rgba(74,91,184,.22);
  min-height:118px; display:flex; flex-direction:column; justify-content:center;
}
.stat-card::after{
  content:''; position:absolute; right:-26px; top:-26px;
  width:110px; height:110px; border-radius:50%;
  background:rgba(255,255,255,.13);
}
.stat-card .stat-icon{
  position:absolute; top:20px; right:22px; font-size:26px; opacity:.9; z-index:1;
}
.stat-card .stat-value{font-size:38px; font-weight:800; line-height:1; color:#fff; position:relative; z-index:1;}
.stat-card .stat-label{font-size:14px; color:rgba(255,255,255,.92); margin-top:10px; font-weight:500; position:relative; z-index:1;}
/* color variants (mapped from legacy classes used by JS) */
.stat-card.stat-blue{background:var(--grad-blue); box-shadow:0 10px 26px rgba(74,91,184,.22);}
.stat-card.stat-green{background:var(--grad-green); box-shadow:0 10px 26px rgba(63,157,110,.22);}
.stat-card.stat-red,.stat-card.stat-orange{background:var(--grad-orange); box-shadow:0 10px 26px rgba(224,132,58,.22);}
.stat-card.stat-purple{background:var(--grad-purple); box-shadow:0 10px 26px rgba(130,97,196,.22);}
/* soft (light) variant for secondary metric rows */
.stat-card.stat-soft{
  background:var(--white); color:var(--text-primary); border:1px solid var(--border-light);
  box-shadow:var(--shadow-sm);
}
.stat-card.stat-soft::after{display:none;}
.stat-card.stat-soft .stat-value{color:var(--text-primary);}
.stat-card.stat-soft .stat-label{color:var(--text-secondary);}
.stat-card.stat-soft .stat-icon{opacity:1;}

/* ════════════════════════════════════════════════
   PANELS / CHARTS
   ════════════════════════════════════════════════ */
.panel-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:26px;}
@media(max-width:1100px){.panel-grid{grid-template-columns:1fr;}}
.panel{
  background:var(--white); border-radius:var(--radius-lg); padding:22px 24px;
  border:1px solid var(--border-light); box-shadow:var(--shadow-sm);
}
.panel-title{font-size:15.5px; font-weight:700; color:var(--text-primary); margin-bottom:18px;}

/* Donut */
.donut-wrap{display:flex; align-items:center; gap:26px; flex-wrap:wrap;}
.donut{position:relative; width:172px; height:172px; flex:none;}
.donut svg{transform:rotate(-90deg);}
.donut-center{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
}
.donut-center .dc-num{font-size:30px; font-weight:800; color:var(--text-primary); line-height:1;}
.donut-center .dc-label{font-size:12px; color:var(--text-secondary); margin-top:3px;}
.legend{flex:1; min-width:160px; display:flex; flex-direction:column; gap:13px;}
.legend-item{display:flex; align-items:center; gap:10px; font-size:14px;}
.legend-dot{width:11px; height:11px; border-radius:50%; flex:none;}
.legend-name{color:var(--text-secondary); flex:1;}
.legend-val{font-weight:700; color:var(--text-primary);}

/* Horizontal bars */
.hbar-list{display:flex; flex-direction:column; gap:15px;}
.hbar-row{display:grid; grid-template-columns:120px 1fr 44px; align-items:center; gap:12px;}
.hbar-label{font-size:13.5px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.hbar-track{height:11px; background:var(--bg-soft); border-radius:6px; overflow:hidden;}
.hbar-fill{height:100%; border-radius:6px; transition:width .5s ease;}
.hbar-val{font-size:13.5px; font-weight:700; color:var(--text-primary); text-align:right;}

/* Vertical mini bars (trend) */
.vbars{display:flex; align-items:flex-end; gap:10px; height:150px; padding-top:10px;}
.vbar-col{flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end;}
.vbar{width:100%; max-width:38px; border-radius:7px 7px 0 0; background:var(--grad-blue); transition:height .5s ease; min-height:4px;}
.vbar-num{font-size:12px; font-weight:700; color:var(--text-primary);}
.vbar-label{font-size:11.5px; color:var(--text-muted);}

/* ════════════════════════════════════════════════
   ROOM CARDS
   ════════════════════════════════════════════════ */
.room-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:18px;}
.room-card{
  background:var(--white); border-radius:var(--radius-lg); padding:22px;
  box-shadow:var(--shadow-sm); border:1px solid var(--border-light);
  cursor:pointer; transition:var(--transition); position:relative; overflow:hidden;
}
.room-card:hover{box-shadow:var(--shadow-md); transform:translateY(-3px);}
.room-card::before{content:''; position:absolute; top:0; left:0; right:0; height:5px;}
.room-card.status-available::before{background:var(--grad-green);}
.room-card.status-occupied::before{background:var(--grad-orange);}
.room-card.status-released::before{background:var(--grad-blue);}
.room-card-header{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px;}
.room-card-title{font-size:20px; font-weight:700;}
.room-card-floor{font-size:12px; color:var(--text-secondary); background:var(--bg-soft); padding:3px 10px; border-radius:6px; margin-top:4px; display:inline-block;}
.room-status-badge{
  display:inline-flex; align-items:center; gap:4px; padding:5px 12px;
  border-radius:20px; font-size:12px; font-weight:700; letter-spacing:.3px;
}
.badge-available{background:var(--green-light); color:var(--green-600);}
.badge-occupied{background:var(--orange-light); color:var(--orange-600);}
.badge-released{background:var(--blue-light); color:var(--blue-600);}
.room-card-info{font-size:13.5px; color:var(--text-secondary); margin-bottom:6px; display:flex; align-items:center; gap:5px;}
.room-card-info strong{color:var(--text-primary); font-weight:600;}
.room-card-divider{border-top:1px solid var(--border-light); margin:12px 0;}
.room-card-footer{display:flex; justify-content:space-between; align-items:center;}
.occupancy-dot{width:9px; height:9px; border-radius:50%; display:inline-block;}
.occupancy-dot.occupied{background:var(--green); animation:pulse 2s infinite;}
.occupancy-dot.empty{background:var(--text-muted);}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}

/* ════════════════════════════════════════════════
   FORM ELEMENTS
   ════════════════════════════════════════════════ */
.form-group{margin-bottom:18px;}
.form-group label{display:block; font-size:13px; font-weight:600; color:#4a4337; margin-bottom:7px;}
.form-control{
  width:100%; padding:11px 14px; border:1.5px solid var(--border); border-radius:10px;
  font-size:14.5px; font-family:inherit; background:var(--white); color:var(--text-primary); transition:var(--transition);
}
.form-control:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(74,91,184,.12);}
.form-control::placeholder{color:var(--text-muted);}
select.form-control{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath fill='%2364748B' d='M5 7L1 3h8z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; padding-right:32px;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:11px 20px; border:none; border-radius:10px;
  font-size:14px; font-weight:600; font-family:inherit; cursor:pointer; transition:var(--transition);
  text-decoration:none; letter-spacing:.2px;
}
.btn-primary{background:var(--grad-blue); color:#fff; box-shadow:0 6px 16px rgba(74,91,184,.24);}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 9px 22px rgba(74,91,184,.32);}
.btn-secondary{background:var(--white); color:var(--text-primary); border:1.5px solid var(--border);}
.btn-secondary:hover{background:var(--bg-soft);}
.btn-sm{padding:6px 13px; font-size:12.5px;}
.btn-danger{background:var(--red); color:#fff;}
.btn-danger:hover{background:var(--red-600);}
.btn-success{background:var(--green); color:#fff;}
.btn-icon{width:32px; height:32px; padding:0; border-radius:9px; font-size:14px;}
.lang-btn{
  padding:5px 13px; border:1.5px solid var(--border); border-radius:8px;
  background:var(--white); cursor:pointer; font-size:11.5px; color:var(--text-secondary);
  font-family:inherit; transition:var(--transition);
}
.lang-btn.active,.lang-btn:hover{background:var(--blue); color:#fff; border-color:var(--blue);}

/* ════════════════════════════════════════════════
   TABLES
   ════════════════════════════════════════════════ */
.table-container{
  background:var(--white); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); border:1px solid var(--border-light); overflow:hidden;
}
.table-toolbar{padding:16px 20px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--border-light); flex-wrap:wrap;}
table{width:100%; border-collapse:collapse;}
thead th{
  background:var(--bg-warm); padding:13px 18px; text-align:left;
  font-size:12.5px; font-weight:700; color:var(--text-secondary);
  letter-spacing:.3px; border-bottom:1px solid var(--border);
  cursor:pointer; white-space:nowrap; user-select:none;
}
thead th:hover{background:var(--bg-soft);}
thead th .sort-arrow{margin-left:4px; font-size:10px;}
tbody td{padding:13px 18px; border-bottom:1px solid var(--border-light); font-size:14px; vertical-align:middle;}
tbody tr:hover{background:var(--bg-warm);}
tbody tr:last-child td{border-bottom:none;}

/* ════════════════════════════════════════════════
   MODAL
   ════════════════════════════════════════════════ */
.modal-overlay{
  position:fixed; inset:0; background:rgba(58,48,36,.45); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; z-index:1000;
  opacity:0; visibility:hidden; transition:all .2s ease;
}
.modal-overlay.active{opacity:1; visibility:visible;}
.modal{
  background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  width:540px; max-width:92vw; max-height:85vh; overflow-y:auto;
  transform:translateY(20px); transition:transform .2s ease;
}
.modal-overlay.active .modal{transform:translateY(0);}
.modal-header{padding:22px 26px; border-bottom:1px solid var(--border-light); display:flex; justify-content:space-between; align-items:center;}
.modal-header h3{font-size:18px; font-weight:700;}
.modal-close{background:none; border:none; font-size:22px; cursor:pointer; color:var(--text-muted); padding:4px;}
.modal-close:hover{color:var(--text-primary);}
.modal-body{padding:24px 26px;}
.modal-footer{padding:18px 26px; border-top:1px solid var(--border-light); display:flex; justify-content:flex-end; gap:10px;}

/* ════════════════════════════════════════════════
   CALENDAR
   ════════════════════════════════════════════════ */
.calendar{background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); border:1px solid var(--border-light); padding:22px;}
.calendar-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;}
.calendar-header h3{font-size:17px; font-weight:700;}
.calendar-nav{display:flex; gap:6px;}
.calendar-nav button{background:var(--bg-soft); border:1px solid var(--border); border-radius:9px; padding:6px 14px; cursor:pointer; font-size:13.5px; transition:var(--transition); font-family:inherit;}
.calendar-nav button:hover{background:var(--blue-light); border-color:var(--blue); color:var(--blue);}
.calendar-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px;}
.calendar-day-header{text-align:center; font-size:11.5px; font-weight:700; color:var(--text-muted); padding:8px 4px;}
.calendar-day{min-height:76px; padding:6px 8px; border:1px solid var(--border-light); border-radius:8px; cursor:pointer; transition:var(--transition); font-size:13px;}
.calendar-day:hover{background:var(--bg-soft);}
.calendar-day.today{border-color:var(--blue); background:var(--blue-light);}
.calendar-day.selected{border-color:var(--blue); background:var(--blue-light); box-shadow:0 0 0 2px rgba(74,91,184,.18);}
.calendar-day.other-month{opacity:.35;}
.calendar-day.disabled{opacity:.25; cursor:not-allowed;}
.calendar-day-num{font-weight:600; margin-bottom:3px;}
.calendar-event{background:var(--blue-light); color:var(--blue-600); padding:2px 6px; border-radius:5px; font-size:10.5px; margin-bottom:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* Time picker */
.time-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:16px 0;}
.time-slot{padding:12px; border:1.5px solid var(--border); border-radius:10px; text-align:center; cursor:pointer; transition:var(--transition); font-size:15px; font-weight:600;}
.time-slot:hover{border-color:var(--blue); background:var(--blue-light);}
.time-slot.selected{background:var(--grad-blue); color:#fff; border-color:transparent;}
.time-slot.disabled{opacity:.3; cursor:not-allowed;}

/* Chips */
.chip{display:inline-flex; align-items:center; gap:5px; padding:5px 12px; background:var(--blue-light); color:var(--blue-600); border-radius:20px; font-size:13px; margin:3px;}
.chip .chip-remove{cursor:pointer; color:var(--blue-600); font-size:15px; opacity:.6;}
.chip .chip-remove:hover{opacity:1;}

/* Occupancy chart (modal) */
.occupancy-chart{background:var(--white); border-radius:var(--radius); padding:20px; border:1px solid var(--border-light);}
.chart-bar-container{display:flex; align-items:flex-end; height:130px; gap:1px; border-bottom:2px solid var(--border); padding-bottom:4px; margin-bottom:6px;}
.chart-bar{flex:1; transition:var(--transition);}
.chart-bar.occupied{background:var(--grad-blue);}
.chart-bar.empty{background:var(--border-light);}
.chart-time-labels{display:flex; justify-content:space-between; font-size:10.5px; color:var(--text-muted);}

/* Toast */
.toast-container{position:fixed; top:22px; right:22px; z-index:2000;}
.toast{
  background:var(--white); border-radius:12px; box-shadow:var(--shadow-lg);
  padding:14px 22px; margin-bottom:10px; font-size:14px; display:flex; align-items:center; gap:10px;
  min-width:250px; animation:slideIn .3s ease; border-left:4px solid var(--green);
}
.toast.error{border-left-color:var(--red);}
@keyframes slideIn{from{transform:translateX(110%); opacity:0;}to{transform:translateX(0); opacity:1;}}

/* Toggle */
.toggle-switch{position:relative; width:46px; height:25px; display:inline-block;}
.toggle-switch input{opacity:0; width:0; height:0;}
.toggle-slider{position:absolute; cursor:pointer; inset:0; background:var(--border); border-radius:25px; transition:var(--transition);}
.toggle-slider::before{content:''; position:absolute; height:19px; width:19px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:var(--transition); box-shadow:0 1px 3px rgba(0,0,0,.2);}
.toggle-switch input:checked + .toggle-slider{background:var(--blue);}
.toggle-switch input:checked + .toggle-slider::before{transform:translateX(21px);}

/* Device status */
.traffic-light{width:14px; height:14px; border-radius:50%; display:inline-block;}
.traffic-light.green{background:var(--green);}
.traffic-light.red{background:var(--red);}
.device-control{display:flex; align-items:center; gap:8px;}
.device-status{font-size:13px; font-weight:600;}
.device-status.on{color:var(--green-600);}
.device-status.off{color:var(--text-muted);}

/* Filters */
.filter-row{display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; margin-bottom:18px;}
.filter-group{display:flex; flex-direction:column; gap:6px;}
.filter-group label{font-size:12.5px; font-weight:600; color:var(--text-secondary);}
.filter-group .form-control{width:auto; min-width:150px;}

/* Invitee search */
.invitee-search-wrapper{position:relative;}
.invitee-dropdown{position:absolute; top:100%; left:0; right:0; background:var(--white); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow-md); z-index:10; max-height:170px; overflow-y:auto;}
.invitee-dropdown-item{padding:10px 14px; cursor:pointer; font-size:14px; display:flex; justify-content:space-between;}
.invitee-dropdown-item:hover{background:var(--bg-soft);}

/* Scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#cfc4b0; border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted);}

/* Sidebar overlay (mobile) */
.sidebar-overlay{display:none; position:fixed; inset:0; background:rgba(40,33,24,.42); z-index:99;}

/* ════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════ */
@media(max-width:920px){
  .auth-card{grid-template-columns:1fr; max-width:460px;}
  .auth-hero{display:none;}
  .auth-form{padding:40px 32px 32px;}
}
@media(max-width:768px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);}
  .sidebar.open + .sidebar-overlay{display:block;}
  .main-content{margin-left:0;}
  .menu-toggle{display:block;}
  .room-cards{grid-template-columns:1fr;}
  .stats-row{grid-template-columns:repeat(2,1fr);}
  .panel-grid{grid-template-columns:1fr;}
  .top-bar{padding:12px 18px;}
  .page-content{padding:18px;}
  .datetime-display .date-part{display:none;}
  .calendar-day{min-height:52px;}
  .hbar-row{grid-template-columns:90px 1fr 40px;}
}

/* ── Line icons (replace emoji per spec §7) ── */
.nav-icon{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; flex:none;}
.nav-icon svg{width:19px; height:19px; stroke-width:2;}
.toast-ico{display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; flex:none;}
.toast-ico svg{width:18px; height:18px;}
.toast .toast-ico{color:var(--green-600);}
.toast.error .toast-ico{color:var(--red-600);}
/* language dropdown options inherit page font */
.auth-lang-select select option{color:var(--text-primary);}



/* ════════════════════════════════════════════════
   REFINEMENTS — login fits viewport (no scroll) + nav icon sizing
   ════════════════════════════════════════════════ */
.auth-page{min-height:100vh; padding:20px;}
.auth-card{align-items:stretch;}
.auth-hero{padding:34px 38px;}
.auth-form{padding:30px 48px 24px;}
.auth-lang{top:16px; right:20px;}
.auth-welcome{font-size:27px; margin-top:20px; margin-bottom:6px;}
.auth-welcome-sub{margin-bottom:18px;}
.auth-label{margin-bottom:6px;}
.auth-input-wrap{margin-bottom:13px;}
.auth-input-wrap input{padding:12px 14px;}
.auth-row{margin-bottom:14px;}
.auth-btn{padding:13px;}
.auth-demo{margin-top:14px; padding-top:13px;}
.login-acct-btn{padding:8px 10px;}
.auth-copy{padding-top:12px;}

/* Nav icons: never overflow / overlap, regardless of cache */
.nav-item .nav-icon{width:22px; height:22px; font-size:0; overflow:hidden; flex:none; display:inline-flex; align-items:center; justify-content:center;}
.nav-item .nav-icon svg{width:18px; height:18px; flex:none;}

@media(max-height:680px){
  .auth-welcome{margin-top:12px;}
  .auth-demo{margin-top:10px; padding-top:10px;}
  .auth-form{padding:24px 48px 20px;}
}

/* ════════════════════════════════════════════════
   RESPONSIVE PASS — login-first
   ════════════════════════════════════════════════ */

/* compact brand inside the form (only when hero photo is hidden) */
.auth-form-brand{display:none; align-items:center; gap:11px; margin-bottom:18px;}
.auth-form-brand .afb-logo{width:42px; height:42px; border-radius:12px; flex:none; background:var(--grad-blue); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(74,91,184,.30);}
.auth-form-brand .afb-name{font-size:16px; font-weight:700; color:var(--text-primary); line-height:1.15;}
.auth-form-brand .afb-sub{font-size:11.5px; color:var(--text-muted); letter-spacing:.3px;}

/* tables scroll horizontally instead of squashing on small screens */
.table-container{overflow-x:auto; -webkit-overflow-scrolling:touch;}

/* ── Tablet & below: collapse login to one column ── */
@media(max-width:960px){
  .auth-card{grid-template-columns:1fr; max-width:480px; align-items:stretch;}
  .auth-hero{display:none;}
  .auth-form{padding:34px 40px 28px;}
  .auth-form-brand{display:flex;}
  .auth-welcome{margin-top:6px; font-size:26px;}
  .auth-lang{top:30px; right:34px;}
}

/* ── Phones ── */
@media(max-width:560px){
  .auth-page{padding:0; align-items:stretch;}
  .auth-card{max-width:100%; min-height:100vh; border-radius:0; border:none; box-shadow:none;
    display:flex; flex-direction:column; justify-content:center;}
  .auth-form{padding:28px 22px 24px;}
  .auth-lang{position:static; display:flex; justify-content:flex-end; margin-bottom:8px;}
  .auth-form-brand{margin-bottom:14px;}
  .auth-welcome{font-size:24px; margin-top:2px;}
  .auth-welcome-sub{font-size:14px; margin-bottom:16px;}
  .auth-input-wrap input{font-size:16px;}     /* prevent iOS auto-zoom */
  .auth-demo-row{flex-direction:column;}
}

/* ── Short viewports (landscape phones): avoid clipping, allow scroll ── */
@media(max-height:600px){
  .auth-page{align-items:flex-start; padding:16px;}
  .auth-card{min-height:auto;}
  .auth-form{padding:24px 36px 20px;}
  .auth-form-brand{margin-bottom:12px;}
  .auth-welcome{margin-top:4px;}
  .auth-demo{margin-top:10px; padding-top:10px;}
}

/* ── App chrome on small screens ── */
@media(max-width:768px){
  .filter-group{flex:1 1 150px;}
  .filter-group .form-control{width:100%; min-width:0;}
  .filter-row > .btn{align-self:flex-end;}
  table{min-width:520px;}                       /* force horizontal scroll, no column squash */
  .table-toolbar{gap:8px;}
}
@media(max-width:480px){
  .stats-row{grid-template-columns:1fr;}
  .room-cards{grid-template-columns:1fr;}
  .page-content{padding:14px;}
  .top-bar{padding:10px 14px;}
  .top-bar-title{font-size:17px;}
  .user-info span{display:none;}                /* keep avatar only, save width */
  .datetime-display .time-part{font-size:16px;}
  .section-title{font-size:16px;}
  .modal{width:94vw;}
  .modal-header, .modal-body, .modal-footer{padding-left:18px; padding-right:18px;}
}