/* Lab Monitor - shared design system (light/dark theme, layout, components) */

:root,
[data-theme="light"] {
  --bg-page: #f6f7fb;
  --bg-elevated: #ffffff;
  --sidebar: #171a24;
  --sidebar-text: #8f96a8;
  --sidebar-text-hover: #ffffff;
  --topbar-bg: #ffffff;
  --accent: #7c3aed;
  --accent-hover: #6d28d9;
  --accent-2: #ec4899;
  --card: #ffffff;
  --border: #eaecf1;
  --text: #171a24;
  --muted: #767c8c;
  --green: #16a34a;
  --green-bg: #dcfce7;
  --red: #dc2626;
  --red-bg: #fee2e2;
  --amber-bg: #fef3c7;
  --amber-text: #92400e;
  --gray-dot: #9aa3b2;
  --shadow: 0 1px 3px rgba(23, 26, 36, 0.06);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] {
  --bg-page: #12141c;
  --bg-elevated: #1a1d29;
  --sidebar: #0d0f16;
  --sidebar-text: #9d94bd;
  --sidebar-text-hover: #ffffff;
  --topbar-bg: #1c1730;
  --accent: #a78bfa;
  --accent-hover: #8b5cf6;
  --accent-2: #f472b6;
  --card: #1a1d29;
  --border: #262a38;
  --text: #eef0f5;
  --muted: #8f96a8;
  --green: #22c55e;
  --green-bg: rgba(34, 197, 94, 0.15);
  --red: #f87171;
  --red-bg: rgba(248, 113, 113, 0.15);
  --amber-bg: rgba(251, 191, 36, 0.15);
  --amber-text: #fbbf24;
  --gray-dot: #4b5566;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.6);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

html {
  /* One zoom-out step (100% -> 90%), applied by default so it's not
     something every user has to do manually with Cmd/Ctrl + "-". */
  zoom: 0.9;
}

body {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  background: var(--bg-page);
  color: var(--text);
  transition: background 0.15s ease, color 0.15s ease;
}

a { color: inherit; }

/* ---------------- Layout shell ---------------- */

.app-shell {
  display: flex;
  /* the page-wide zoom:0.9 above shrinks rendered vh-based boxes along with
     everything else, so a plain 100vh would visually fall ~10% short of
     the real viewport - dividing by 0.9 compensates so it still renders as
     exactly 100vh on screen. */
  min-height: calc(100vh / 0.9);
}

.sidebar {
  width: 72px;
  background: var(--sidebar);
  color: var(--sidebar-text);
  padding: 18px 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: calc(100vh / 0.9);
  /* must stay "visible" on both axes (not "auto"/"scroll") - the
     Monitoring/Devices flyouts are positioned absolute + left:100% and need
     to escape past the sidebar's own right edge. Setting only one axis to
     auto forces the browser to compute the other as auto too, which was
     clipping the flyouts instead of letting them pop out to the right. The
     icon-only rail is short enough now (device lists are flyouts, not
     inline) that it doesn't need its own scrollbar. */
  overflow: visible;
  z-index: 20;
}

/* Icon-only rail: labels are hidden and available as a native tooltip
   (title="...") instead - keeps the sidebar narrow and gives the content
   area the extra width back. */
.nav-label { display: none; }

.sidebar .brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 0 18px;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 10px;
}

.sidebar .brand .brand-text { display: none; }

.sidebar .brand .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

.nav-group-title {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5f6b80;
  padding: 16px 20px 6px;
}

/* Sidebar device list (Website Monitoring, Keystroke Monitoring, etc.) -
   scrolls within its own fixed-height box once there are more devices
   than fit, instead of stretching the whole sidebar/page taller. */
.sidebar-device-scroll {
  max-height: 260px;
  overflow-y: auto;
}
.sidebar-device-scroll::-webkit-scrollbar { width: 5px; }
.sidebar-device-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 3px; }
.sidebar-device-scroll { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.15) transparent; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  font-size: 13.5px;
  color: var(--sidebar-text);
  text-decoration: none;
  cursor: pointer;
  border-left: 3px solid transparent;
}

/* Top-level rail icons only (not the flyout sub-items, which stay as a
   normal left-aligned text list) - centered, bigger, lightly colored. */
.nav-item:not(.nav-item-sub) {
  justify-content: center;
  padding: 13px 6px;
  color: #c4b5fd;
}

.nav-item svg { flex-shrink: 0; opacity: 0.85; }
.nav-item:not(.nav-item-sub) svg { width: 25px; height: 25px; opacity: 1; }

.nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--sidebar-text-hover);
}

.nav-item.active {
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.35), rgba(236, 72, 153, 0.12));
  color: #fff;
  border-left-color: var(--accent-2);
  font-weight: 600;
}

.nav-group { position: relative; }

.nav-group-summary {
  list-style: none;
  user-select: none;
}
.nav-group-summary::-webkit-details-marker { display: none; }
.nav-group-summary .nav-group-chevron { display: none; }

/* The sub-item list (Monitoring's pages, or a monitoring page's per-device
   list) pops out as a flyout to the right of the icon rail instead of
   pushing the sidebar itself wider - same pattern as VSCode/Slack's icon
   rail, keeps the rail's "just icons" width no matter what's expanded. */
.nav-group[open] > div {
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 230px;
  display: flex;
  flex-direction: column;
  background: var(--sidebar);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0 10px 10px 0;
  box-shadow: 8px 0 24px rgba(0, 0, 0, 0.35);
  padding: 6px 0;
  z-index: 40;
}

.nav-group-content { max-height: 70vh; overflow-y: auto; }

.nav-item-sub {
  padding-left: 32px;
  font-size: 13px;
}

.status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gray-dot);
  flex-shrink: 0;
}
.status-dot.online { background: var(--green); }

.sidebar-bottom {
  margin-top: auto;
  padding: 10px 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.whoami-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #7c879c;
  margin-bottom: 8px;
}

.role-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #cfd6e4;
}

.logout-link { color: var(--sidebar-text); font-size: 13px; text-decoration: none; }
.logout-link:hover { color: #fff; }

.content-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ---------------- Top navbar ---------------- */

.topbar {
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border);
  padding: 12px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 15;
}

.topbar .page-title {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

.topbar .page-subtitle {
  font-size: 12px;
  color: var(--muted);
  margin-top: 1px;
}

.topbar-search {
  flex: 1;
  max-width: 380px;
  position: relative;
}

.topbar-search input {
  width: 100%;
  padding: 8px 12px 8px 32px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 13px;
  background: var(--bg-page);
  color: var(--text);
}

.topbar-search .icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.5;
  pointer-events: none;
}

.topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.icon-btn {
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.icon-btn:hover { color: var(--text); border-color: var(--accent); }

.account-menu-wrap { position: relative; }

.account-menu-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 190px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  padding: 6px;
  z-index: 50;
}
.account-menu-dropdown.open { display: block; }

.account-menu-who {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.account-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  border-radius: 7px;
}
.account-menu-item svg { flex-shrink: 0; opacity: 0.8; }
.account-menu-item:hover { background: var(--bg-page); }
.account-menu-item.account-menu-logout:hover { color: var(--red); }

/* ---------------- Notification bell (topbar) ---------------- */

.notification-bell-btn { position: relative; }
.notification-dot {
  display: none;
  position: absolute;
  top: 6px; right: 6px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--red);
  border: 2px solid var(--bg-elevated);
}
.notification-dot.show { display: block; }

.notification-dropdown {
  min-width: 380px;
  max-width: 420px;
  padding: 0;
  max-height: 70vh;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.notification-dropdown.open { display: flex; }

.notification-dropdown-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.notification-dropdown-title { font-size: 14.5px; font-weight: 700; color: var(--text); }
.notification-dropdown-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.notification-close-btn {
  background: none; border: none; color: var(--muted); cursor: pointer;
  padding: 3px; border-radius: 6px; flex-shrink: 0;
}
.notification-close-btn:hover { background: var(--bg-page); color: var(--text); }

.notification-list { overflow-y: auto; padding: 6px; }
.notification-empty { padding: 20px 10px; text-align: center; font-size: 12.5px; color: var(--muted); }

.notification-group-title {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); padding: 10px 10px 6px;
}

/* Single flex row - avatar, name, icon+detail (truncates), time - same
   layout as the "Live browsing" / "Live app usage" dashboard panels, for
   a consistent look across the app. */
.notification-row {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; border-radius: 9px; font-size: 12.5px;
}
.notification-row:hover { background: var(--bg-page); }
.notification-row-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.notification-row-name { font-weight: 600; color: var(--text); white-space: nowrap; flex-shrink: 0; }
.notification-row-pill {
  display: inline-flex; align-items: center; gap: 5px; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px;
}
.notification-row-pill svg { flex-shrink: 0; }
.notification-row-pill-website { color: #0891b2; }
.notification-row-pill-usb { color: #f59e0b; }
.notification-row-pill-application { color: #ea580c; }
.notification-row-pill-file { color: #65a30d; }
.notification-row-pill-browser_block { color: #dc2626; }
.notification-row-time { font-size: 10.5px; color: var(--muted); flex-shrink: 0; }

.notification-viewall {
  display: block; text-align: center; padding: 11px; font-size: 12.5px; font-weight: 600;
  color: var(--accent); text-decoration: none; border-top: 1px solid var(--border); flex-shrink: 0;
}
.notification-viewall:hover { background: var(--bg-page); }

.hamburger-btn { display: none; }

.main {
  flex: 1;
  padding: 24px 28px 40px;
  max-width: 100%;
  width: 100%;
}

/* Login-style forms and Settings stay capped for readability - only the
   default (data-table/dashboard) pages fill whatever width is available,
   so zooming out (or a wider monitor) actually gives them more room
   instead of leaving the content stuck at a fixed size with dead space
   on both sides. */
.main.narrow { max-width: 620px; }
.main.medium { max-width: 900px; }

/* ---------------- Cards / stats ---------------- */

.page-heading { font-size: 19px; font-weight: 600; margin: 0 0 3px; }
.page-subtitle-block { font-size: 13px; color: var(--muted); margin: 0 0 20px; }

.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(23, 26, 36, 0.08); }

/* Pastel-tinted stat cards (icon-card variant) - colorful card background
   instead of a white card with just a colored icon, so a whole row of
   stats reads as colorful at a glance. */
.stat-icon-card.pastel-purple { background: #f3effc; border-color: #e6dcf9; }
.stat-icon-card.pastel-green { background: #eafaf0; border-color: #d3f3e0; }
.stat-icon-card.pastel-blue { background: #eaf3fd; border-color: #d5e7fb; }
.stat-icon-card.pastel-orange { background: #fdf3e8; border-color: #fbe4c6; }
.stat-icon-card.pastel-pink { background: #fdedf5; border-color: #fad3e8; }
.stat-icon-card.pastel-gray { background: #f4f5f8; border-color: #e6e8ee; }
[data-theme="dark"] .stat-icon-card.pastel-purple { background: rgba(124, 58, 237, 0.12); border-color: rgba(124, 58, 237, 0.25); }
[data-theme="dark"] .stat-icon-card.pastel-green { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.25); }
[data-theme="dark"] .stat-icon-card.pastel-blue { background: rgba(56, 189, 248, 0.12); border-color: rgba(56, 189, 248, 0.25); }
[data-theme="dark"] .stat-icon-card.pastel-orange { background: rgba(251, 146, 60, 0.12); border-color: rgba(251, 146, 60, 0.25); }
[data-theme="dark"] .stat-icon-card.pastel-pink { background: rgba(236, 72, 153, 0.12); border-color: rgba(236, 72, 153, 0.25); }
[data-theme="dark"] .stat-icon-card.pastel-gray { background: rgba(148, 163, 184, 0.1); border-color: rgba(148, 163, 184, 0.22); }
.stat-label { font-size: 11.5px; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.03em; }
.stat-value { font-size: 22px; font-weight: 700; }
.stat-value.green { color: var(--green); }
.stat-value.red { color: var(--red); }

.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  box-shadow: var(--shadow);
}

.charts-row {
  display: grid;
  grid-template-columns: 1.1fr 1.6fr;
  gap: 14px;
  margin-bottom: 20px;
}
@media (max-width: 900px) {
  .charts-row { grid-template-columns: 1fr; }
}

.chart-title { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.chart-wrap { position: relative; height: 200px; }

/* ---------------- Buttons ---------------- */

.btn {
  padding: 8px 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  font-weight: 500;
  transition: filter 0.15s ease, transform 0.1s ease;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(0.98); }
.btn.secondary { background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border); }
.btn.secondary:hover { border-color: var(--accent); }
.btn.danger { background: none; color: var(--red); padding: 6px 8px; }
.btn.danger:hover { text-decoration: underline; }
.btn.small { padding: 6px 11px; font-size: 12px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------------- Forms ---------------- */

label { font-size: 12px; color: var(--muted); display: block; margin-bottom: 5px; }
input[type=text], input[type=password], input[type=email], select {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  background: var(--bg-elevated);
  color: var(--text);
  width: 100%;
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 0; }

/* ---------------- Tables ---------------- */

table.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.data-table th, .data-table td {
  text-align: left;
  padding: 10px 14px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.data-table th {
  color: var(--muted);
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--bg-page);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: rgba(124, 58, 237, 0.05); }

/* ---------------- Badges ---------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.badge.green, .badge.active, .badge.online { background: var(--green-bg); color: var(--green); }
.badge.red, .badge.disabled, .badge.offline { background: var(--red-bg); color: var(--red); }
.badge.amber, .badge.superadmin { background: var(--amber-bg); color: var(--amber-text); }
.badge.blue, .badge.admin { background: rgba(124, 58, 237, 0.15); color: var(--accent); }
.badge.gray, .badge.viewer { background: rgba(148, 163, 184, 0.2); color: var(--muted); }

/* ---------------- Pagination ---------------- */

.pagination {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  margin-top: 20px;
}
.pagination a, .pagination span {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  text-decoration: none;
  color: var(--text);
  border: 1px solid var(--border);
}
.pagination a:hover { border-color: var(--accent); color: var(--accent); }
.pagination .current { background: var(--accent); color: #fff; border-color: var(--accent); }
.pagination .disabled { opacity: 0.4; pointer-events: none; }

/* ---------------- Toolbar (search/filters) ---------------- */

.toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.toolbar input[type=text], .toolbar select {
  padding: 8px 10px;
  width: auto;
}
.toolbar input[name=search_box], .toolbar input.search-input { min-width: 220px; }
.toolbar label.checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}

/* ---------------- Modal dialogs ---------------- */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 22, 0.6);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--card);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  width: 420px;
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 22px;
}
.modal-box h2 { font-size: 16px; margin: 0 0 4px; }
.modal-box .modal-subtitle { font-size: 13px; color: var(--muted); margin: 0 0 16px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* image zoom modal is a variant of modal-overlay, kept full-bleed */
.zoom-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(6, 9, 15, 0.92);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 30px;
}
.zoom-overlay.open { display: flex; }
.zoom-overlay img {
  max-width: 92vw;
  max-height: 78vh;
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
}
.zoom-caption {
  color: #fff;
  font-size: 14px;
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.zoom-caption a { color: #93c5fd; text-decoration: none; }
.zoom-close {
  position: absolute;
  top: 20px; right: 28px;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  background: none;
  border: none;
  line-height: 1;
}

/* ---------------- Toast notifications ---------------- */

.toast-stack {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.toast {
  min-width: 260px;
  max-width: 360px;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  color: var(--text);
  animation: toast-in 0.18s ease;
}
.toast.success { border-left-color: var(--green); }
.toast.error { border-left-color: var(--red); }
@keyframes toast-in {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ---------------- Misc ---------------- */

.empty-state {
  color: var(--muted);
  text-align: center;
  margin-top: 60px;
  font-size: 14px;
}

.inline-error { background: var(--red-bg); color: var(--red); padding: 8px 10px; border-radius: 6px; font-size: 13px; margin-bottom: 16px; }
.inline-success { background: var(--green-bg); color: var(--green); padding: 8px 10px; border-radius: 6px; font-size: 13px; margin-bottom: 16px; }

/* ---------------- NVR-style live-view tiles (full /live-view grid page,
   and the Dashboard's own mini "Live View" tab) ---------------- */

.lv-grid-wrap { flex: 1; min-width: 0; display: grid; gap: 12px; }
.lv-tile {
  background: #000; border-radius: 10px; overflow: hidden; position: relative;
  aspect-ratio: 16 / 9; display: flex; flex-direction: column;
}
.lv-tile-header {
  display: flex; align-items: center; gap: 6px; padding: 6px 10px;
  background: rgba(0, 0, 0, 0.55); position: absolute; top: 0; left: 0; right: 0; z-index: 2;
}
.lv-tile-name { font-size: 12px; color: #fff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.lv-tile-remove {
  background: transparent; border: none; color: #fff; opacity: 0.7; cursor: pointer; font-size: 16px; line-height: 1;
  padding: 0 2px;
}
.lv-tile-remove:hover { opacity: 1; }
.lv-tile-stage { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; }
.lv-tile-img { width: 100%; height: 100%; object-fit: contain; }
.lv-tile-placeholder { color: #94a3b8; font-size: 12px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 10px; }
.lv-tile-empty { display: flex; align-items: center; justify-content: center; background: var(--bg-page); border: 1px dashed var(--border); aspect-ratio: 16 / 9; }
.lv-tile-empty-label { color: var(--muted); font-size: 12px; text-align: center; line-height: 1.5; }
.lv-tile-hint { grid-column: 1 / -1; min-height: 320px; aspect-ratio: auto; }
.lv-tile-hint .lv-tile-empty-label { font-size: 13px; max-width: 380px; padding: 0 14px; }

/* ---------------- Responsive ---------------- */

@media (max-width: 980px) {
  .sidebar {
    position: fixed;
    left: -240px;
    transition: left 0.18s ease;
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { left: 0; }
  .hamburger-btn {
    display: flex;
  }
  .main { padding: 18px 16px 32px; }
  .topbar { padding: 10px 16px; }
  .topbar-search { display: none; }
}

/* ---------------- Print / "Download PDF" (browser print-to-PDF, no server-side rendering needed) ---------------- */

@media print {
  .sidebar, .topbar, .no-print, .settings-tabs { display: none !important; }
  .app-shell, .content-col, .main { display: block !important; padding: 0 !important; margin: 0 !important; }
  body { background: #fff !important; color: #000 !important; }
  .panel, .stat-card, .pill, .timeline-card { border: 1px solid #ccc !important; box-shadow: none !important; break-inside: avoid; }
  a { color: #000 !important; text-decoration: none !important; }
  .profile-banner { background: #eee !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* tabbed report pages: show every tab's content stacked, not just whichever was active on screen */
  .settings-tab-panel { display: block !important; margin-bottom: 28px; page-break-inside: avoid; }
}