/* =========================================================
   UNIQUE GUEST HOUSES — Glassmorphism theme (Glittering White Day + Deep Dark Night)
   ========================================================= */
:root{
  --red-50:#fef2f2; --red-100:#fee2e2; --red-200:#fecaca; --red-300:#fca5a5;
  --red-400:#f87171; --red-500:#ef4444; --red-600:#dc2626; --red-700:#b91c1c; --red-800:#991b1b;
  --rose-500:#f43f5e; --rose-600:#e11d48;
  --emerald-500:#10b981; --emerald-600:#059669; --emerald-50:#ecfdf5; --emerald-100:#d1fae5;
  --amber-500:#f59e0b; --amber-600:#d97706; --amber-50:#fffbeb; --amber-100:#fef3c7;
  --ink:#1e293b; --muted:#64748b; --muted-2:#94a3b8;
  --glass-bg:rgba(255,255,255,.65); --glass-bg-strong:rgba(255,255,255,.85);
  --glass-border:rgba(255,255,255,.9);
  --glass-red:rgba(148,163,184,.10);
  --radius:20px; --radius-sm:12px;
  --shadow:0 8px 32px rgba(31,38,135,.07), 0 1px 2px rgba(255,255,255,.5) inset;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink);
  min-height:100vh;
  background:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.9) 0%, transparent 40%),
    radial-gradient(circle at 80% 10%, rgba(226,232,240,.7) 0%, transparent 45%),
    radial-gradient(circle at 40% 80%, rgba(241,245,249,.8) 0%, transparent 50%),
    radial-gradient(circle at 90% 85%, rgba(255,255,255,.8) 0%, transparent 40%),
    radial-gradient(circle at 20% 50%, rgba(203,213,225,.3) 0%, transparent 35%),
    #f8fafc;
  background-attachment:fixed;
}
h1,h2,h3,h4,.display{font-family:'Outfit',sans-serif;}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:inherit;}
button{font-family:inherit;}
svg{display:block;}
.icon{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}

/* ---------- glass helpers ---------- */
.glass{
  background:var(--glass-bg);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.glass-strong{background:var(--glass-bg-strong);}

/* ---------- auth pages (login/register) ---------- */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;}
.auth-card{width:100%; max-width:440px; padding:38px 34px; text-align:center;}
.auth-mark{
  width:64px; height:64px; border-radius:18px; margin:0 auto 18px;
  background:linear-gradient(155deg, var(--red-500), var(--red-700));
  display:flex; align-items:center; justify-content:center; color:#fff; font-family:'Outfit',sans-serif; font-weight:700; font-size:28px;
  box-shadow:0 10px 24px rgba(220,38,38,.35);
}
.auth-card h1{font-size:22px; margin:0 0 4px; font-weight:700;}
.auth-card .sub{font-size:13px; color:var(--muted); margin:0 0 26px;}
.auth-form{display:flex; flex-direction:column; gap:14px; text-align:left;}
.auth-form .field label{font-size:12px; font-weight:600; color:var(--muted-2); margin-bottom:5px; display:block;}
.auth-form input, .auth-form select{
  width:100%; padding:12px 14px; border-radius:var(--radius-sm); border:1px solid rgba(148,163,184,.25);
  background:rgba(255,255,255,.8); font-size:14px; color:var(--ink);
}
.auth-form input:focus, .auth-form select:focus{outline:none; border-color:var(--red-500); background:#fff; box-shadow:0 0 0 3px rgba(220,38,38,.12);}
.auth-error{background:rgba(220,38,38,.1); border:1px solid rgba(220,38,38,.25); color:var(--red-700); font-size:12.5px; font-weight:600; padding:11px 14px; border-radius:var(--radius-sm); text-align:left;}
.auth-foot{margin-top:20px; font-size:13px; color:var(--muted);}
.auth-foot a{color:var(--red-600); font-weight:700; text-decoration:none;}
.auth-foot a:hover{text-decoration:underline;}
.role-toggle{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.role-pill{padding:10px; border-radius:var(--radius-sm); border:1px solid rgba(148,163,184,.25); background:rgba(255,255,255,.6); text-align:center; font-size:12.5px; font-weight:700; color:var(--muted); cursor:pointer;}
.role-pill.selected{background:var(--red-600); color:#fff; border-color:var(--red-600);}

/* ---------- app shell ---------- */
.app-shell{display:flex; min-height:100vh;}
.sidebar{
  width:250px; flex-shrink:0; margin:16px 0 16px 16px; padding:22px 16px;
  display:flex; flex-direction:column; position:sticky; top:16px; height:calc(100vh - 32px);
}
.sb-brand{display:flex; align-items:center; gap:10px; padding:0 6px 20px; border-bottom:1px solid rgba(148,163,184,.2); margin-bottom:16px;}
.sb-mark{width:38px; height:38px; border-radius:11px; background:linear-gradient(155deg, var(--red-500), var(--red-700)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-family:'Outfit',sans-serif; font-size:17px; flex-shrink:0;}
.sb-brand .name{font-family:'Outfit',sans-serif; font-weight:700; font-size:14.5px; line-height:1.15;}
.sb-brand .role{font-size:10px; color:var(--red-600); text-transform:uppercase; letter-spacing:.06em; font-weight:700; margin-top:2px;}

.sb-nav{display:flex; flex-direction:column; gap:3px; flex:1;}
.sb-link{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:var(--radius-sm);
  font-size:13.5px; font-weight:600; color:var(--muted); text-decoration:none;
}
.sb-link:hover{background:rgba(148,163,184,.12); color:var(--ink);}
.sb-link.active{background:linear-gradient(135deg, var(--red-600), var(--red-700)); color:#fff; box-shadow:0 6px 16px rgba(220,38,38,.3);}
.sb-link .icon{opacity:.85;}
.sb-link.active .icon{opacity:1;}
.sb-house-badge{margin-top:auto; padding:12px; border-radius:var(--radius-sm); background:rgba(148,163,184,.08); border:1px solid rgba(148,163,184,.2);}
.sb-house-badge .k{font-size:9.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:700;}
.sb-house-badge .v{font-size:13px; font-weight:700; color:var(--ink); margin-top:2px;}
.sb-logout{display:flex; align-items:center; gap:10px; padding:10px 12px; margin-top:8px; border-radius:var(--radius-sm); font-size:13px; font-weight:600; color:var(--muted); text-decoration:none; border:1px solid rgba(148,163,184,.2);}
.sb-logout:hover{background:rgba(220,38,38,.06); color:var(--red-700);}

.main{flex:1; min-width:0; padding:24px 28px 60px;}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap;}
.topbar h1{font-size:22px; margin:0 0 3px; font-weight:700;}
.topbar .desc{font-size:12.5px; color:var(--muted); margin:0;}
.topbar-actions{display:flex; align-items:center; gap:10px;}

select.house-select{
  padding:10px 34px 10px 14px; border-radius:var(--radius-sm); border:1px solid rgba(148,163,184,.25);
  background:rgba(255,255,255,.75) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8"><path d="M1 1l5 5 5-5" stroke="%2364748b" stroke-width="1.6" fill="none" stroke-linecap="round"/></svg>') no-repeat right 14px center;
  appearance:none; font-size:13px; font-weight:600; color:var(--ink); cursor:pointer;
}

.btn{display:inline-flex; align-items:center; gap:7px; padding:11px 18px; border-radius:var(--radius-sm); border:none; font-weight:700; font-size:13px; cursor:pointer; white-space:nowrap; text-decoration:none;}
.btn-primary{background:linear-gradient(135deg, var(--red-500), var(--red-700)); color:#fff; box-shadow:0 8px 20px rgba(220,38,38,.28);}
.btn-primary:hover{filter:brightness(1.05);}
.btn-ghost{background:rgba(255,255,255,.55); color:var(--red-700); border:1px solid rgba(220,38,38,.18);}
.btn-ghost:hover{background:rgba(255,255,255,.8);}
.btn-outline{background:transparent; color:var(--muted); border:1px solid rgba(138,107,111,.25);}
.btn-outline:hover{background:rgba(255,255,255,.4);}
.btn-danger{background:rgba(220,38,38,.12); color:var(--red-700); border:1px solid rgba(220,38,38,.22);}
.btn-danger:hover{background:rgba(220,38,38,.2);}
.btn-sm{padding:7px 12px; font-size:11.5px; border-radius:9px;}
.btn-block{width:100%; justify-content:center;}
.btn:disabled{opacity:.45; cursor:not-allowed;}

/* ---------- flash / toast ---------- */
.flash{padding:14px 18px; border-radius:var(--radius-sm); font-size:13px; font-weight:600; margin-bottom:18px; display:flex; align-items:center; gap:10px;}
.flash.success{background:rgba(16,185,129,.12); color:var(--emerald-600); border:1px solid rgba(16,185,129,.22);}
.flash.error{background:rgba(220,38,38,.1); color:var(--red-700); border:1px solid rgba(220,38,38,.2);}
.flash.info{background:rgba(148,163,184,.1); color:var(--ink); border:1px solid rgba(148,163,184,.2);}

/* ---------- stat cards ---------- */
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px;}
.stat-card{padding:20px; position:relative; overflow:hidden;}
.stat-card .label{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-weight:700;}
.stat-card .value{font-family:'Outfit',sans-serif; font-size:25px; font-weight:700; margin-top:8px; color:var(--ink);}
.stat-card .foot{font-size:11.5px; color:var(--emerald-600); margin-top:6px; font-weight:600;}
.stat-card .foot.neutral{color:var(--muted); font-weight:500;}
.stat-ring{position:absolute; right:-16px; top:-16px; width:64px; height:64px; border-radius:50%; background:var(--glass-red);}

/* ---------- panels ---------- */
.panel{margin-bottom:20px;}
.panel-head{padding:18px 22px; border-bottom:1px solid rgba(148,163,184,.15); display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.panel-head h2{font-size:16px; margin:0; font-weight:700;}
.panel-head p{font-size:12px; color:var(--muted); margin:3px 0 0;}
.panel-body{padding:22px;}

/* ---------- room grid ---------- */
.legend{display:flex; gap:16px; flex-wrap:wrap; padding:14px 22px 0;}
.legend-item{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted); font-weight:600;}
.legend-dot{width:8px; height:8px; border-radius:50%;}
.room-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:14px; padding-top:6px;}
.room-tag{position:relative; padding:15px 8px 12px; text-align:center; cursor:pointer; border-radius:14px; transition:transform .12s ease;
  background:rgba(255,255,255,.6); border:1px solid rgba(148,163,184,.25);}
.room-tag:hover{transform:translateY(-3px);}
.room-tag .num{font-family:'Outfit',sans-serif; font-size:20px; font-weight:700; color:var(--ink);}
.room-tag .type{font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-top:1px;}
.room-tag .badge{display:inline-block; margin-top:8px; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:3px 8px; border-radius:100px;}
.room-tag.available{border-color:rgba(16,185,129,.3);}
.room-tag.available .badge{background:var(--emerald-100); color:var(--emerald-600);}
.room-tag.occupied{border-color:rgba(220,38,38,.3); background:rgba(220,38,38,.06);}
.room-tag.occupied .badge{background:rgba(220,38,38,.14); color:var(--red-700);}
.room-tag.maintenance{border-color:rgba(245,158,11,.35); background:rgba(245,158,11,.08);}
.room-tag.maintenance .badge{background:var(--amber-100); color:var(--amber-600);}
.room-tag .guest{font-size:10px; color:var(--muted); margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* ---------- forms ---------- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.form-grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.field{display:flex; flex-direction:column; gap:6px;}
.field.span-2{grid-column:span 2;}
.field.span-3{grid-column:span 3;}
.field label{font-size:12px; font-weight:700; color:var(--muted-2);}
.field .hint{font-size:10.5px; color:var(--muted); font-weight:400;}
.field input, .field select, .field textarea{
  padding:11px 13px; border-radius:var(--radius-sm); border:1px solid rgba(148,163,184,.25); background:rgba(255,255,255,.7);
  font-family:'Inter',sans-serif; font-size:13.5px; color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--red-500); background:#fff; box-shadow:0 0 0 3px rgba(220,38,38,.1);}
.field textarea{resize:vertical; min-height:64px;}
.field input:disabled, .field select:disabled{background:rgba(148,163,184,.1); color:var(--muted);}
.rate-preview{display:flex; justify-content:space-between; align-items:center; background:rgba(148,163,184,.1); border-radius:var(--radius-sm); padding:12px 15px; font-size:13px;}
.rate-preview .amt{font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:16px; color:var(--ink);}
.form-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:22px; padding-top:18px; border-top:1px solid rgba(148,163,184,.15);}

/* ---------- table ---------- */
.table-toolbar{display:flex; gap:10px; padding:18px 22px 0; flex-wrap:wrap;}
.table-toolbar input, .table-toolbar select{padding:10px 13px; border-radius:var(--radius-sm); border:1px solid rgba(148,163,184,.25); background:rgba(255,255,255,.65); font-size:12.5px; font-family:'Inter',sans-serif;}
.table-toolbar input{flex:1; min-width:180px;}
.table-scroll{overflow-x:auto;}
table{width:100%; border-collapse:collapse; font-size:13px;}
thead th{text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); padding:0 14px 10px; border-bottom:1px solid rgba(148,163,184,.2); font-weight:700; white-space:nowrap;}
tbody td{padding:12px 14px; border-bottom:1px solid rgba(148,163,184,.12); color:var(--ink); vertical-align:top;}
tbody tr:hover{background:rgba(148,163,184,.06);}
.pill{font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:100px; text-transform:uppercase; display:inline-block;}
.pill.active{background:rgba(220,38,38,.12); color:var(--red-700);}
.pill.checkedout{background:rgba(148,163,184,.15); color:var(--muted);}
.pill.maintenance{background:var(--amber-100); color:var(--amber-600);}
.pill.available{background:var(--emerald-100); color:var(--emerald-600);}
.row-actions{display:flex; gap:6px; flex-wrap:wrap;}

/* ---------- charts ---------- */
.chart-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:4px;}
.chart-box{padding:18px 20px 10px;}
.chart-box h3{font-size:14px; margin:0 0 2px; font-weight:700;}
.chart-box p{font-size:11.5px; color:var(--muted); margin:0 0 12px;}
.chart-canvas-wrap{position:relative; height:260px; width:100%;}
.chart-canvas-wrap.short{height:180px;}
canvas{max-width:100%;}

/* ---------- modal ---------- */
.modal-overlay{position:fixed; inset:0; background:rgba(15,23,42,.45); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:300; padding:20px;}
.modal-overlay.hidden{display:none;}
.modal{width:100%; max-width:460px; padding:24px; max-height:88vh; overflow-y:auto;}
.modal h3{margin:0 0 4px; font-size:17px;}
.modal .sub{font-size:12px; color:var(--muted); margin:0 0 18px;}
.modal-actions{display:flex; gap:10px; margin-top:20px;}
.modal-actions .btn{flex:1; justify-content:center;}

.empty-state{text-align:center; padding:44px 20px; color:var(--muted);}
.empty-state .t{font-weight:700; color:var(--ink); font-size:14px; margin-bottom:3px;}

html.dark{
  --ink:#f1f5f9; --muted:#94a3b8; --muted-2:#cbd5e1;
  --glass-bg:rgba(15,23,42,.65); --glass-bg-strong:rgba(15,23,42,.85);
  --glass-border:rgba(255,255,255,.1);
  --glass-red:rgba(220,38,38,.22);
  --shadow:0 8px 32px rgba(0,0,0,.5), 0 1px 2px rgba(255,255,255,.05) inset;
}
html.dark body{
  background:
    radial-gradient(circle at 15% 15%, rgba(30,41,59,.8), transparent 45%),
    radial-gradient(circle at 85% 20%, rgba(15,23,42,.9), transparent 50%),
    radial-gradient(circle at 50% 85%, rgba(30,41,59,.7), transparent 50%),
    #090d16;
}
html.dark .field input, html.dark .field select, html.dark .field textarea,
html.dark .table-toolbar input, html.dark .table-toolbar select,
html.dark .auth-form input, html.dark .auth-form select{
  background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); color:var(--ink);
}
html.dark .field input:focus, html.dark .field select:focus, html.dark .field textarea:focus,
html.dark .auth-form input:focus, html.dark .auth-form select:focus{
  background:rgba(255,255,255,.09);
}
html.dark .field input:disabled, html.dark .field select:disabled{background:rgba(255,255,255,.03);}
html.dark select.house-select{background-color:rgba(255,255,255,.06); color:#f1f5f9;}
html.dark .btn-ghost{background:rgba(255,255,255,.06); color:#fca5a5;}
html.dark .btn-outline{color:var(--muted); border-color:rgba(255,255,255,.14);}
html.dark .room-tag{background:rgba(255,255,255,.04);}
html.dark .room-tag.occupied{background:rgba(220,38,38,.12);}
html.dark .room-tag.maintenance{background:rgba(245,158,11,.10);}
html.dark thead th{color:var(--muted);}
html.dark tbody td{color:var(--ink); border-bottom-color:rgba(255,255,255,.06);}
html.dark tbody tr:hover{background:rgba(255,255,255,.03);}
html.dark .sb-link{color:var(--muted);}
html.dark .modal-overlay{background:rgba(0,0,0,.7);}
html.dark .stat-card .value{color:var(--ink);}

.theme-toggle{
  display:inline-flex; align-items:center; gap:7px; padding:10px 14px; border-radius:var(--radius-sm);
  background:rgba(255,255,255,.65); border:1px solid rgba(148,163,184,.25); color:var(--ink);
  font-size:12.5px; font-weight:700; cursor:pointer;
}
html.dark .theme-toggle{background:rgba(255,255,255,.06); color:#f1f5f9; border-color:rgba(255,255,255,.12);}
.date-badge{
  display:inline-flex; align-items:center; gap:7px; padding:10px 14px; border-radius:var(--radius-sm);
  background:rgba(255,255,255,.65); border:1px solid rgba(148,163,184,.25); color:var(--ink);
  font-size:12.5px; font-weight:700;
}
html.dark .date-badge{background:rgba(255,255,255,.06); color:#f1f5f9; border-color:rgba(255,255,255,.12);}
.lang-toggle-btn{
  display:inline-flex; align-items:center; gap:6px; padding:10px 14px; border-radius:var(--radius-sm);
  background:rgba(255,255,255,.65); border:1px solid rgba(148,163,184,.25); color:var(--ink);
  font-size:12.5px; font-weight:700; text-decoration:none;
}
html.dark .lang-toggle-btn{background:rgba(255,255,255,.06); color:#f1f5f9; border-color:rgba(255,255,255,.12);}

@media(max-width:980px){
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .form-grid, .form-grid3, .chart-grid{grid-template-columns:1fr;}
  .field.span-2, .field.span-3{grid-column:span 1;}
}
@media(max-width:760px){
  .sidebar{position:fixed; left:-260px; z-index:400; transition:left .2s ease; margin:0; height:100vh; top:0; border-radius:0;}
  .sidebar.open{left:0;}
  .main{padding:16px; padding-top:64px;}
  .topbar{gap:10px;}
  .topbar h1{font-size:18px;}
  .topbar .desc{font-size:11px;}
  .topbar-actions{width:100%; justify-content:flex-start; gap:8px; flex-wrap:wrap;}
  .theme-toggle, .lang-toggle-btn, .date-badge, select.house-select{padding:8px 11px; font-size:11px;}

  .stat-grid{grid-template-columns:1fr 1fr; gap:10px;}
  .stat-card{padding:14px;}
  .stat-card .label{font-size:10px;}
  .stat-card .value{font-size:19px;}
  .stat-card .value small{font-size:11px;}
  .stat-card .foot{font-size:10px;}
  .stat-ring{width:44px; height:44px; right:-12px; top:-12px;}
}
@media(max-width:480px){
  .stat-grid{grid-template-columns:1fr; gap:10px;}
  .stat-card{padding:16px;}
  .stat-card .value{font-size:22px;}
}