/* ═══ CSS Variables ══════════════════════════════════════════════════════════ */
:root {
  --bg: #0a0d14; --surface: #111827; --surface2: #1a2234; --border: #1e2d45;
  --accent: #3b82f6; --success: #10b981; --warning: #f59e0b; --danger: #ef4444;
  --text: #e2e8f0; --text-muted: #94a3b8;
  --header-h: 56px; --tabnav-h: 40px; --mobile-nav-h: 62px;
}
:root[data-theme="light"] {
  --bg: #f1f5f9; --surface: #ffffff; --surface2: #f8fafc; --border: #e2e8f0;
  --accent: #2563eb; --success: #059669; --warning: #d97706; --danger: #dc2626;
  --text: #0f172a; --text-muted: #64748b;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--bg); color: var(--text);
  min-height: 100vh;
  transition: background 0.3s, color 0.3s;
  /* prevent overscroll bounce on iOS */
  overscroll-behavior: none;
}

/* ═══ Header ══════════════════════════════════════════════════════════════════ */
header {
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 0 1.25rem; height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 100;
  gap: 8px;
}
.logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo-icon {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), #8b5cf6);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: white;
}
.logo h1 { font-size: 0.88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo span { font-size: 0.68rem; color: var(--text-muted); display: block; white-space: nowrap; }
.header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.theme-btn {
  background: transparent; border: 1px solid var(--border); color: var(--text);
  border-radius: 50%; width: 32px; height: 32px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
  transition: all 0.2s; flex-shrink: 0;
}
.theme-btn:hover { border-color: var(--accent); color: var(--accent); }
.connection-badge { display: flex; align-items: center; gap: 5px; font-size: 0.75rem; color: var(--text-muted); }
.ws-status-text { display: none; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); animation: pulse-dot 2s infinite; flex-shrink: 0; }
.dot.connected { background: var(--success); }
@keyframes pulse-dot { 0%,100%{opacity:1}50%{opacity:0.4} }
.time-display { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── User Menu ── */
.user-menu { position: relative; }
.user-btn {
  display: flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); cursor: pointer; padding: 5px 10px;
  font-size: 0.78rem; font-family: inherit; transition: all 0.15s;
  min-height: 32px;
}
.user-btn:hover { border-color: var(--accent); }
.user-avatar { font-size: 1rem; line-height: 1; }
.user-name { font-weight: 500; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chevron { font-size: 0.65rem; color: var(--text-muted); }
.user-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  min-width: 200px; box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  z-index: 500; display: none; overflow: hidden;
  animation: dropIn 0.15s ease;
}
.user-dropdown.open { display: block; }
@keyframes dropIn { from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)} }
.user-dropdown-info { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.user-dropdown-avatar { font-size: 1.5rem; }
.user-dropdown-name { font-size: 0.85rem; font-weight: 600; }
.user-dropdown-role { font-size: 0.72rem; color: var(--text-muted); }
.user-dropdown-divider { height: 1px; background: var(--border); }
.user-dropdown-item {
  width: 100%; padding: 10px 14px; background: transparent; border: none;
  color: var(--text); cursor: pointer; font-size: 0.82rem; font-family: inherit;
  text-align: left; transition: background 0.15s; display: flex; align-items: center; gap: 8px;
  min-height: 44px;
}
.user-dropdown-item:hover { background: var(--surface2); }
.user-dropdown-item.danger { color: var(--danger); }
.user-dropdown-item.danger:hover { background: rgba(239,68,68,0.08); }

/* ═══ Tabs ════════════════════════════════════════════════════════════════════ */
.tabs-nav {
  display: flex; gap: 2px; padding: 0 1.25rem;
  background: var(--surface); border-bottom: 1px solid var(--border);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tabs-nav::-webkit-scrollbar { display: none; }
.tab-btn {
  padding: 9px 16px; background: transparent; border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted); cursor: pointer;
  font-size: 0.82rem; font-weight: 500; font-family: inherit;
  transition: all 0.15s; display: flex; align-items: center; gap: 6px;
  white-space: nowrap; flex-shrink: 0;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.active { display: flex; }

/* ── Panel height: full viewport minus header + tabs + bottom nav (mobile) ── */
.tab-panel { height: calc(100vh - var(--header-h) - var(--tabnav-h)); overflow: hidden; }

/* ═══ Monitor Tab ═════════════════════════════════════════════════════════════ */
.main-panel { padding: 1.25rem 1.5rem; overflow-y: auto; flex: 1; }
.side-panel {
  width: 300px; border-left: 1px solid var(--border);
  background: var(--surface); display: flex; flex-direction: column;
  height: 100%; overflow: hidden; flex-shrink: 0;
}
.side-section { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }

/* Stats bar */
.stats-bar { display: grid; grid-template-columns: repeat(4,1fr); gap: 0.75rem; margin-bottom: 1.25rem; }
.stat-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 0.85rem; position: relative; overflow: hidden; transition: border-color 0.2s;
}
.stat-card:hover { border-color: var(--accent); }
.stat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; }
.stat-card.blue::before  { background: var(--accent); }
.stat-card.green::before { background: var(--success); }
.stat-card.amber::before { background: var(--warning); }
.stat-card.red::before   { background: var(--danger); }
.stat-icon { font-size: 1.1rem; margin-bottom: 0.3rem; }
.stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.stat-label { font-size: 0.68rem; color: var(--text-muted); margin-top: 2px; }

/* Camera Grid */
.camera-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem; margin-bottom: 1.25rem; align-items: start;
}
.camera-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.2s;
}
.camera-card:hover { border-color: var(--accent); }

/* Camera card components */
.camera-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); background: var(--surface);
}
.camera-card-title { font-size: 0.78rem; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.cam-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; animation: pulse-dot 2s infinite; }
.cam-status-dot.online  { background: var(--success); }
.cam-status-dot.offline { background: var(--danger); animation: none; }
.view-btn {
  background: transparent; border: 1px solid var(--border); border-radius: 5px;
  color: var(--text-muted); cursor: pointer; padding: 4px 9px;
  font-size: 0.72rem; font-family: inherit; transition: all 0.15s;
  display: inline-flex; align-items: center; gap: 4px; min-height: 30px;
}
.view-btn:hover { border-color: var(--accent); color: var(--accent); }
.view-btn.hidden-cam { border-color: var(--warning); color: var(--warning); }
.camera-video-wrapper {
  position: relative; aspect-ratio: 16/9;
  background: var(--surface2); cursor: zoom-in; overflow: hidden;
}
.camera-video-wrapper.stream-paused { display: none; }
.camera-video-img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  opacity: 1; transition: opacity 0.2s; background: #000;
}
.camera-tables {
  padding: 0.6rem 0.75rem; display: flex; flex-wrap: wrap; gap: 5px;
  border-top: 1px solid var(--border); background: var(--surface2);
  flex-grow: 1; align-content: flex-start;
}
.camera-meta {
  position: absolute; top: 10px; left: 10px; right: 10px;
  display: flex; justify-content: space-between; align-items: center; pointer-events: none;
}
.camera-title {
  font-size: 0.78rem; font-weight: 600;
  background: rgba(10,13,20,0.75); backdrop-filter: blur(4px);
  padding: 3px 8px; border-radius: 5px; color: #fff;
}
.camera-badge { font-size: 0.62rem; font-weight: 700; padding: 3px 6px; border-radius: 4px; text-transform: uppercase; }
.camera-badge.online  { background: rgba(16,185,129,0.9); color: #fff; }
.camera-badge.offline { background: rgba(239,68,68,0.9); color: #fff; }

/* Canvas overlay */
.cam-overlay-canvas {
  position: absolute; top:0; left:0; width:100%; height:100%;
  pointer-events: none; z-index: 2;
}

/* Fullscreen */
.camera-video-wrapper:fullscreen { width:100vw; height:100vh; display:flex; align-items:center; justify-content:center; background:#000; cursor:zoom-out; }
.camera-video-wrapper:fullscreen .camera-video-img { max-width:100%; max-height:100%; object-fit:contain; }
.camera-video-wrapper:fullscreen .camera-meta { top:20px; left:20px; right:20px; z-index:9999; }
.fullscreen-overlay {
  display: none; position: absolute; bottom:0; left:0; right:0;
  background: rgba(10,13,20,0.72); backdrop-filter: blur(8px);
  padding: 10px 14px; z-index: 9999; flex-direction: column; gap: 6px; pointer-events: none;
}
.overlay-title { font-size:0.7rem; font-weight:600; color:rgba(226,232,240,0.7); text-transform:uppercase; letter-spacing:0.08em; }
.overlay-badges { display:flex; flex-wrap:wrap; gap:5px; }
.camera-video-wrapper:fullscreen .fullscreen-overlay { display:flex; }
.fs-nav { display:none; position:absolute; top:50%; transform:translateY(-50%); z-index:9999; pointer-events:auto; }
.fs-nav-prev { left:16px; } .fs-nav-next { right:16px; }
.camera-video-wrapper:fullscreen .fs-nav { display:flex; }
.fs-nav-btn {
  background: rgba(10,13,20,0.65); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.2); border-radius: 50%;
  color: #fff; width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; cursor: pointer; transition: all 0.15s; user-select: none;
}
.fs-nav-btn:hover { background: rgba(59,130,246,0.7); border-color: #3b82f6; }
.fs-nav-btn:active { transform: scale(0.92); }

/* Monitor toolbar */
.monitor-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.875rem; }
.monitor-toolbar-title { font-size:0.75rem; color:var(--text-muted); }

/* Table badges */
.table-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 5px; font-size: 0.75rem; font-weight: 600;
  border: 1px solid var(--border); background: rgba(148,163,184,0.05);
  color: var(--text-muted); transition: all 0.2s;
}
.table-badge.occupied       { background:rgba(16,185,129,0.12);  border-color:var(--success); color:var(--success); }
.table-badge.waiting_empty  { background:rgba(245,158,11,0.12);  border-color:var(--warning); color:var(--warning); animation:pulse-waiting 1.5s infinite; }
.table-badge.empty_confirmed{ background:rgba(239,68,68,0.12);   border-color:var(--danger);  color:var(--danger); }
@keyframes pulse-waiting { 0%,100%{opacity:1}50%{opacity:0.6} }
.badge-count { font-weight:700; font-size:0.68rem; background:rgba(0,0,0,0.15); padding:2px 5px; border-radius:3px; }
[data-theme="light"] .badge-count { background:rgba(255,255,255,0.4); }

/* ═══ Sidebar ═════════════════════════════════════════════════════════════════ */
.alarm-header { padding:0.9rem 1.1rem; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.alarm-header h2 { font-size:0.82rem; font-weight:600; }
.badge { font-size:0.68rem; padding:2px 7px; border-radius:20px; background:var(--accent); color:white; font-weight:600; }
.badge.danger { background:var(--danger); }
.alarm-list { flex:1; overflow-y:auto; min-height:0; }
.alarm-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:var(--text-muted); font-size:0.82rem; gap:8px; padding:2rem; }
.alarm-item { padding:0.8rem 1.1rem; border-bottom:1px solid var(--border); animation:slideIn 0.3s ease; }
.alarm-item:hover { background:var(--surface2); }
.alarm-type { font-size:0.72rem; font-weight:600; color:var(--danger); text-transform:uppercase; letter-spacing:0.05em; }
.alarm-table { font-size:0.88rem; font-weight:600; margin:3px 0; }
.alarm-time { font-size:0.68rem; color:var(--text-muted); }
.alarm-timeline { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.alarm-close { margin-top:6px; padding:4px 10px; background:transparent; border:1px solid var(--border); border-radius:5px; color:var(--text); cursor:pointer; font-size:0.68rem; transition:all 0.15s; min-height:30px; }
.alarm-close:hover { border-color:var(--accent); color:var(--accent); }
.event-log-header { padding:0.75rem 1.1rem; border-bottom:1px solid var(--border); font-size:0.72rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.08em; }
.event-log { flex:1; overflow-y:auto; min-height:0; }
.event-item { padding:0.55rem 1.1rem; border-bottom:1px solid var(--border); font-size:0.72rem; animation:slideIn 0.25s ease; }
.event-tag { display:inline-block; padding:2px 5px; border-radius:3px; font-weight:600; font-size:0.63rem; margin-bottom:2px; }
.event-tag.left     { background:rgba(239,68,68,0.15); color:var(--danger); }
.event-tag.occupied { background:rgba(16,185,129,0.15); color:var(--success); }
.event-msg { color:var(--text); }
.event-ts { color:var(--text-muted); margin-top:1px; }

/* ═══ Settings Tab ════════════════════════════════════════════════════════════ */
.settings-panel { flex:1; overflow-y:auto; padding:1.25rem 1.5rem; }
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; max-width:1100px; }
.settings-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.settings-card-header { padding:0.9rem 1.1rem; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:8px; }
.settings-card-header h3 { font-size:0.85rem; font-weight:600; }
.settings-card-body { padding:1.1rem; }
.form-group { margin-bottom:0.85rem; }
.form-group label { display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:4px; }
.form-group input, .form-group select {
  width:100%; padding:8px 10px;
  background:var(--bg); color:var(--text);
  border:1px solid var(--border); border-radius:6px;
  font-size:0.82rem; font-family:inherit; transition:border-color 0.15s;
  min-height:40px; -webkit-appearance:none;
}
.form-group input:focus, .form-group select:focus { outline:none; border-color:var(--accent); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; }

/* ── Buttons ── */
.btn { padding:7px 14px; border-radius:6px; border:none; cursor:pointer; font-size:0.8rem; font-weight:600; transition:all 0.15s; display:inline-flex; align-items:center; gap:5px; font-family:inherit; min-height:36px; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:#2563eb; }
.btn-success { background:var(--success); color:#fff; }
.btn-success:hover { background:#059669; }
.btn-danger  { background:var(--danger); color:#fff; }
.btn-danger:hover  { background:#dc2626; }
.btn-ghost { background:transparent; color:var(--text-muted); border:1px solid var(--border); }
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); }
.btn-sm { padding:4px 9px; font-size:0.73rem; min-height:30px; }
.btn:disabled { opacity:0.4; cursor:not-allowed; }
.btn-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:0.5rem; }

/* Data tables */
.data-table { width:100%; border-collapse:collapse; font-size:0.8rem; }
.data-table th { padding:8px 10px; text-align:left; font-size:0.7rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; border-bottom:1px solid var(--border); }
.data-table td { padding:8px 10px; border-bottom:1px solid var(--border); vertical-align:middle; }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:var(--surface2); }
.tbl-actions { display:flex; gap:4px; }
.status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; }
.status-dot.online  { background:var(--success); }
.status-dot.offline { background:var(--danger); }
.empty-state { text-align:center; padding:2rem; color:var(--text-muted); font-size:0.82rem; }

/* Toggle switch */
.toggle-wrap { display:flex; align-items:center; gap:8px; }
.toggle-switch { position:relative; width:44px; height:26px; flex-shrink:0; cursor:pointer; }
.toggle-switch input { opacity:0; width:0; height:0; position:absolute; }
.toggle-track { position:absolute; inset:0; border-radius:13px; background:#374151; transition:background 0.2s; }
.toggle-switch input:checked + .toggle-track { background:var(--success); }
.toggle-thumb { position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.3); transition:transform 0.2s; }
.toggle-switch input:checked ~ .toggle-thumb { transform:translateX(18px); }
.toggle-label { font-size:0.8rem; color:var(--text-muted); user-select:none; }

/* ═══ Modals ══════════════════════════════════════════════════════════════════ */
.modal-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:200; align-items:center; justify-content:center; padding:16px; }
.modal-backdrop.open { display:flex; }
.modal { background:var(--surface); border:1px solid var(--border); border-radius:12px; width:460px; max-width:100%; animation:modalIn 0.2s ease; max-height:90vh; display:flex; flex-direction:column; }
@keyframes modalIn { from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)} }
.modal-header { padding:1rem 1.25rem; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.modal-header h3 { font-size:0.9rem; font-weight:600; }
.modal-close { background:transparent; border:none; color:var(--text-muted); cursor:pointer; font-size:1.1rem; padding:2px 6px; border-radius:4px; min-width:30px; min-height:30px; }
.modal-close:hover { color:var(--text); background:var(--surface2); }
.modal-body { padding:1.1rem 1.25rem; overflow-y:auto; }
.modal-footer { padding:0.85rem 1.25rem; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px; flex-shrink:0; }

/* ROI Tool modal */
.roi-modal-backdrop { display:none; position:fixed; inset:0; background:#0a0d14; z-index:10000; flex-direction:column; }
.roi-modal-backdrop.open { display:flex; }
.roi-modal-header { background:#111827; border-bottom:1px solid #1e2d45; padding:0 1.25rem; height:48px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; }
.roi-modal-header span { font-size:0.88rem; font-weight:600; color:#e2e8f0; }
.roi-modal-close { background:transparent; border:1px solid #1e2d45; border-radius:6px; color:#94a3b8; cursor:pointer; padding:4px 12px; font-size:0.8rem; font-family:inherit; transition:all 0.15s; min-height:36px; }
.roi-modal-close:hover { border-color:#ef4444; color:#ef4444; }
.roi-modal-iframe { flex:1; width:100%; border:none; background:#0a0d14; }

/* Toast */
.toast-container { position:fixed; top:72px; right:12px; z-index:20000; display:flex; flex-direction:column; gap:6px; pointer-events:none; max-width:calc(100vw - 24px); }
.toast { background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--danger); border-radius:8px; padding:10px 14px; min-width:240px; animation:slideIn 0.3s ease; box-shadow:0 8px 24px rgba(0,0,0,0.4); pointer-events:auto; }
.toast-title { font-size:0.82rem; font-weight:600; color:var(--danger); }
.toast-body { font-size:0.77rem; color:var(--text); margin-top:3px; }
.toast.success-toast { border-left-color:var(--success); }
.toast.success-toast .toast-title { color:var(--success); }
@keyframes slideIn { from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)} }

/* ═══ Mobile Bottom Nav ═══════════════════════════════════════════════════════ */
.mobile-bottom-nav {
  display: none; /* hidden on desktop */
  position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--mobile-nav-h);
  background: var(--surface); border-top: 1px solid var(--border);
  z-index: 150;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mobile-nav-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; background: transparent; border: none; color: var(--text-muted);
  cursor: pointer; font-size: 0.65rem; font-family: inherit; font-weight: 500;
  padding: 8px 4px; transition: color 0.15s; min-height: 44px;
}
.mobile-nav-btn span:first-child { font-size: 1.2rem; line-height: 1; }
.mobile-nav-btn.active { color: var(--accent); }
.mobile-nav-btn:active { opacity: 0.7; }

/* ═══ RESPONSIVE — Tablet (≤ 960px) ══════════════════════════════════════════ */
@media (max-width: 960px) {
  .settings-grid { grid-template-columns: 1fr; }
  .stats-bar { grid-template-columns: repeat(2,1fr); gap: 0.6rem; }
  .side-panel { width: 260px; }
}

/* ═══ RESPONSIVE — Mobile (≤ 720px) ══════════════════════════════════════════ */
@media (max-width: 720px) {
  :root { --header-h: 52px; --tabnav-h: 0px; }

  /* Header — compact */
  header { padding: 0 12px; }
  .logo h1 { font-size: 0.82rem; }
  .logo span { display: none; }
  .time-display { display: none; }
  .ws-status-text { display: none !important; }
  .user-name { display: none; }
  .user-chevron { display: none; }
  .user-btn { padding: 5px 7px; }
  .connection-badge { gap: 4px; }

  /* Hide desktop tab nav — use mobile bottom nav instead */
  .tabs-nav { display: none; }
  .mobile-bottom-nav { display: flex; }

  /* Panel height: full viewport minus header and mobile nav */
  .tab-panel { height: calc(100vh - var(--header-h) - var(--mobile-nav-h)); }

  /* Monitor tab: stack vertically */
  .tab-panel.active { flex-direction: column; }
  .main-panel { padding: 0.75rem; overflow-y: auto; flex: 1; min-height: 0; }

  /* Side panel: horizontal scrollable compact strip */
  .side-panel {
    width: 100%; border-left: none; border-top: 1px solid var(--border);
    flex-direction: row; height: 180px; flex-shrink: 0;
    overflow: hidden;
  }
  .side-section { flex: 1; min-width: 0; border-bottom: none; }
  .side-section:first-child { border-right: 1px solid var(--border); }

  /* Stats: 2x2 grid */
  .stats-bar { grid-template-columns: repeat(2,1fr); gap: 0.5rem; margin-bottom: 0.75rem; }
  .stat-value { font-size: 1.4rem; }
  .stat-label { font-size: 0.62rem; }
  .stat-icon  { font-size: 1rem; }

  /* Camera grid: 1 column */
  .camera-grid { grid-template-columns: 1fr; gap: 0.75rem; }

  /* Settings panel */
  .settings-panel { padding: 0.75rem; }
  .settings-grid { grid-template-columns: 1fr; gap: 0.75rem; }
  .settings-card-header { flex-wrap: wrap; gap: 6px; }

  /* Data table — make it scrollable horizontally */
  .settings-card-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Toast position — bottom on mobile */
  .toast-container { top: auto; bottom: calc(var(--mobile-nav-h) + 8px); right: 8px; left: 8px; }
  .toast { min-width: 0; width: 100%; }

  /* Modal — full width */
  .modal { width: 100%; max-width: 100%; border-radius: 12px; }
  .modal-backdrop { padding: 12px; align-items: flex-end; }

  /* User dropdown — align right edge */
  .user-dropdown { right: 0; min-width: 180px; }

  /* Monitor toolbar */
  .monitor-toolbar { flex-direction: column; align-items: flex-start; gap: 6px; }

  /* Add bottom padding so content isn't hidden behind mobile nav */
  .main-panel { padding-bottom: 0.75rem; }
}

/* ═══ RESPONSIVE — Small mobile (≤ 400px) ════════════════════════════════════ */
@media (max-width: 400px) {
  .stats-bar { grid-template-columns: repeat(2,1fr); gap: 0.4rem; }
  .stat-card { padding: 0.65rem; }
  .stat-value { font-size: 1.25rem; }
  .camera-grid { gap: 0.6rem; }
  .main-panel { padding: 0.6rem; }
}