:root{
  --bg:#071021;
  --card:#0f1724;
  --muted:#9aa7b2;
  --accent:#06b6d4;
  --upstairs:#dc2626;
  --downstairs:#fb923c;
  --free:#1f2937;
  --text:#e6eef6;
  --green:#16a34a;
  --danger:#dc2626;
}
body{ font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial; margin:0; color:var(--text); background:var(--bg); }
.topbar{ display:flex; justify-content:space-between; align-items:center; padding:12px 16px; background:var(--card); position:sticky; top:0; z-index:20; }
.brand{ font-weight:700; }
.actions .btn{ margin-left:8px; padding:6px 10px; background:transparent; border:1px solid rgba(255,255,255,0.06); color:inherit; border-radius:6px; text-decoration:none; }
.container{ padding:16px; max-width:980px; margin:0 auto; }
.center-card{ background:rgba(255,255,255,0.03); padding:18px; border-radius:12px; text-align:center; }
.unit-row{ display:flex; gap:12px; justify-content:center; margin-bottom:12px; }
.unit-btn{ padding:16px 20px; border-radius:12px; border:none; font-size:1rem; cursor:pointer; color:#fff; min-width:120px; }
.unit-btn.upstairs{ background:var(--upstairs); }
.unit-btn.downstairs{ background:var(--downstairs); }
.unit-btn.admin{ background:#374151; }
.pin-area{ margin-top:12px; }
.hidden{ display:none; }
.pin-dots{ display:flex; gap:8px; justify-content:center; margin-bottom:12px; }
.pin-dots .dot{ width:18px; height:18px; border-radius:50%; background:rgba(255,255,255,0.06); }
.pin-dots .dot.filled{ background:var(--accent); }
.keypad{ display:grid; grid-template-columns:repeat(3,72px); gap:10px; justify-content:center; }
.keypad button{ padding:14px; border-radius:10px; border:none; background:#0b1520; color:#fff; font-size:1.1rem; cursor:pointer; min-width:64px; min-height:48px; }
.small{ margin-top:8px; padding:8px 12px; border-radius:8px; background:#222; color:#fff; border:none; }

.controls{ display:flex; gap:12px; margin-bottom:12px; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; }
.control-card{ background:#07121a; padding:12px; border-radius:12px; width:32%; min-width:200px; box-shadow:0 6px 18px rgba(0,0,0,0.6); }
.control-card .big-title{ font-size:1.1rem; font-weight:700; margin-bottom:6px; }
.control-card .small-desc{ font-size:0.9rem; color:var(--muted); margin-bottom:8px; }
.control-card .cta{ padding:10px 12px; border-radius:10px; border:none; cursor:pointer; font-weight:700; }
.control-card.use{ background: linear-gradient(180deg,#1e40af,#3b82f6); color:#fff; }
.control-card.free{ background: linear-gradient(180deg,#064e3b,#16a34a); color:#fff; }
.control-card.notify{ background:#0b1220; color:#fff; }
.control-card .cta.outline{ background:transparent; border:1px solid rgba(255,255,255,0.08); color:inherit; }

.status-row{ display:flex; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.big-status{ border-radius:12px; overflow:hidden; }
.status-card{ background:#071024; padding:12px; border-radius:10px; flex:1; min-width:160px; }
.status-label{ font-weight:800; font-size:1.1rem; padding:12px; color:#fff; text-align:center; }
.status-time{ text-align:center; padding:8px; color:#fff; font-size:1rem; }

.grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap:8px; margin-top:12px; overflow:auto; }
.grid .day{ background:#07111a; padding:8px; border-radius:10px; min-width:140px; }
.slot{ margin:8px 0; padding:8px; border-radius:10px; background:var(--free); display:flex; justify-content:space-between; align-items:center; color:var(--text); box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
.slot .time{ font-weight:600; }
.slot .meta{ font-size:0.9rem; opacity:0.95; }
.slot .actions{ display:flex; gap:6px; }

.slot.upstairs{ background: linear-gradient(90deg,var(--upstairs),#b91c1c); }
.slot.downstairs{ background: linear-gradient(90deg,var(--downstairs),#f97316); }
.slot.free{ background: linear-gradient(90deg,#0f1724,#1f2937); }

/* Modal */
.modal {
  position: fixed;
  left: 0; right: 0; top: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000; /* very high so it’s above everything */
}

.modal.hidden {
  display: none; /* fully remove from pointer events when hidden */
}

.modal-inner {
  background: #07111a;
  padding: 16px;
  border-radius: 10px;
  width: 90%;
  max-width: 420px;
  z-index: 10001; /* ensures buttons are clickable above the overlay */
}



.notif-item{ padding:8px; border-bottom:1px solid rgba(255,255,255,0.03); color:var(--muted); }

.toast{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,0.75); padding:10px 14px; border-radius:8px; color:#fff; z-index:300; }

@media (max-width:900px){ .grid{ grid-template-columns: repeat(2, 1fr); } .control-card{ width:48%; } }
@media (max-width:520px){ .grid{ grid-template-columns: repeat(1,1fr); } .unit-row{ flex-direction:column; } .keypad{ grid-template-columns:repeat(3,60px); } .control-card{ width:100%; } }