/**
 * Portal Sidebar Styles - Hover-to-Preview Version
 * Collapsed by default, expands on hover to show labels
 */

:root {
  --sidebar-width: 180px;
  --sidebar-width-collapsed: 52px;
  --sidebar-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --subtopbar-height: 36px;
  --topbar-height: 48px;
}

/* ============================================================================
   SIDEBAR CONTAINER
   ============================================================================ */

.portal-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width-collapsed);
  height: 100vh;
  background: var(--sidebar-bg);
  border: none !important;
  border-right: none !important;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);
  z-index: 1003;
  display: flex;
  flex-direction: column;
  transition: width var(--sidebar-transition), background 0.2s ease, box-shadow 0.2s ease;
  overflow: visible;
}

/* Dark mode sidebar shadow */
html.dark .portal-sidebar {
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.2);
}

/* Prevent sidebar content from overflowing horizontally */
.portal-sidebar > * {
  max-width: 100%;
}

/* Expanded State (Click Toggle) */
body[data-sidebar-expanded="true"] .portal-sidebar {
  width: var(--sidebar-width);
}

/* ============================================================================
   HEADER & LOGO - Compact
   ============================================================================ */

.portal-sidebar-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 6px;
  min-height: 76px;
  flex-shrink: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0;
  border-radius: 0;
}

.portal-sidebar-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--sidebar-text);
  transition: all var(--sidebar-transition);
}

.portal-sidebar-logo img {
  flex-shrink: 0;
  transition: all var(--sidebar-transition);
}

/* Light mode: subtle shadow */
.portal-sidebar-logo img {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.08));
}

.portal-sidebar-logo img:hover {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.12));
}

/* Dark mode: subtle glow */
html.dark .portal-sidebar-logo img {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4))
          drop-shadow(0 0 12px rgba(255, 255, 255, 0.2));
}

html.dark .portal-sidebar-logo img:hover {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5))
          drop-shadow(0 0 16px rgba(255, 255, 255, 0.3));
}

/* ============================================================================
   FACILITY SELECTOR - Compact
   ============================================================================ */

.portal-sidebar-facility {
  padding: 2px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  /* visible (not hidden): the trigger button clips its OWN content, so this
     wrapper no longer needs to clip — and clipping here squared off the
     button's rounded hover shadow. */
  overflow: visible;
  max-width: 100%;
}

body[data-sidebar-expanded="true"] .portal-sidebar-facility {
  justify-content: flex-start;
  padding: 4px 6px;
}

/* Ensure facility selector button stays within sidebar bounds. overflow:visible
   so the trigger's rounded hover shadow isn't clipped into a square (the button
   itself clips its content). */
.portal-sidebar-facility > div {
  max-width: 100%;
  overflow: visible;
}

.portal-sidebar-facility button {
  max-width: 100%;
  overflow: hidden;
}

/* ============================================================================
   NAVIGATION - Compact
   ============================================================================ */

.portal-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 4px;
  min-height: 0;
}

/* Minimal scrollbar */
.portal-sidebar-nav::-webkit-scrollbar {
  width: 3px;
}

.portal-sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

.portal-sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}

.portal-sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================================================
   NAV ITEMS - Compact Chiclet Style
   ============================================================================ */

.portal-sidebar-nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 10px 6px;
  margin: 2px 0;
  border-radius: 8px;
  color: var(--sidebar-text);
  text-decoration: none;
  transition: background 0.15s ease, box-shadow 0.2s ease, border-color 0.15s ease, color 0.15s ease;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  /* Inactive = a flat white "chiclet" with just a hairline resting shadow. The
     selected item floats above these via a deeper drop shadow (no scaling). */
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Hover — a touch more shadow so the chiclet feels responsive (no resize). */
.portal-sidebar-nav-item:hover {
  background: var(--card);
  border-color: var(--border);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.12);
}

/* Active — the SELECTED chiclet floats above the flat inactive ones purely via a
   deeper, softer drop shadow (NO scaling) + the solid brand fill. Green left-edge
   accent (iDogCam only, via --brand-green; Camsolu resolves to transparent). */
.portal-sidebar-nav-item.active {
  position: relative;
  z-index: 2;
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: 0 10px 22px -6px rgba(0, 0, 0, 0.34), 0 3px 8px rgba(0, 0, 0, 0.16);
  border-color: transparent;
}
.portal-sidebar-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--brand-green, transparent);
}

/* Nav Icon - Compact */
.portal-sidebar-nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.portal-sidebar-nav-icon svg {
  width: 18px;
  height: 18px;
  color: currentColor;
}

/* Nav Text - Hidden when collapsed */
.portal-sidebar-nav-text {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition: opacity 0.15s ease, max-width 0.2s ease;
}

/* Expanded State */
body[data-sidebar-expanded="true"] .portal-sidebar-nav-item {
  justify-content: flex-start;
  gap: 10px;
  padding: 8px 10px;
}

body[data-sidebar-expanded="true"] .portal-sidebar-nav-text {
  opacity: 1;
  max-width: 120px;
}

/* ============================================================================
   EXPANDABLE GROUP (drawer) — e.g. Admin Tools → Clip Lab / Broadcast System.
   The children sub-list only renders when the rail is expanded, so it is always
   left-aligned with visible labels and indented under a hierarchy line.
   ============================================================================ */
.portal-sidebar-nav-chevron {
  flex-shrink: 0;
  margin-left: auto;
  opacity: 0.6;
  transition: transform 0.15s ease;
}
.portal-sidebar-subnav {
  display: flex;
  flex-direction: column;
  margin: 1px 0 5px 17px;
  padding-left: 8px;
  border-left: 1px solid var(--border);
}
.portal-sidebar-subnav .portal-sidebar-nav-item {
  justify-content: flex-start;
  gap: 9px;
  padding: 7px 9px;
  margin: 1px 0;
  font-size: 11.5px;
}
.portal-sidebar-subnav .portal-sidebar-nav-icon { width: 18px; height: 18px; }
.portal-sidebar-subnav .portal-sidebar-nav-icon svg { width: 15px; height: 15px; }
.portal-sidebar-subnav .portal-sidebar-nav-text {
  opacity: 1;
  max-width: 150px;
}

/* ============================================================================
   FOOTER - Compact
   ============================================================================ */

.portal-sidebar-footer {
  padding: 8px;
  flex-shrink: 0;
}

/* ============================================================================
   CONTINUE SETUP CTA BUTTON - Compact
   ============================================================================ */

.portal-sidebar-setup-cta {
  padding: 8px 4px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
}

body[data-sidebar-expanded="true"] .portal-sidebar-setup-cta {
  justify-content: stretch;
}

.portal-sidebar-setup-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 10px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
  color: white;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35);
  animation: setup-pulse 3s ease-in-out infinite;
}

@keyframes setup-pulse {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35);
  }
  50% {
    box-shadow: 0 3px 12px rgba(59, 130, 246, 0.45);
  }
}

@media (prefers-reduced-motion: reduce) {
  .portal-sidebar-setup-button {
    animation: none;
  }
}

.portal-sidebar-setup-button:hover {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.45);
  animation: none;
}

.portal-sidebar-setup-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.portal-sidebar-setup-text {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition: opacity 0.15s ease, max-width 0.2s ease;
}

/* Expanded State */
body[data-sidebar-expanded="true"] .portal-sidebar-setup-button {
  width: 100%;
  height: auto;
  justify-content: flex-start;
  gap: 8px;
  padding: 10px 12px;
}

body[data-sidebar-expanded="true"] .portal-sidebar-setup-text {
  opacity: 1;
  max-width: 100px;
}

/* Dark mode */
html.dark .portal-sidebar-setup-button {
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.4);
}

@keyframes setup-pulse-dark {
  0%, 100% {
    box-shadow: 0 2px 10px rgba(59, 130, 246, 0.4);
  }
  50% {
    box-shadow: 0 3px 16px rgba(59, 130, 246, 0.5);
  }
}

html.dark .portal-sidebar-setup-button {
  animation: setup-pulse-dark 3s ease-in-out infinite;
}

html.dark .portal-sidebar-setup-button:hover {
  box-shadow: 0 4px 18px rgba(59, 130, 246, 0.5);
  animation: none;
}

/* iDogCam Brand — dark-blue primary CTA */
html[data-brand="idogcam"] .portal-sidebar-setup-button {
  background: linear-gradient(135deg, #15588C 0%, #2E6E9D 100%);
  box-shadow: 0 2px 8px rgba(21, 88, 140, 0.35);
}

html[data-brand="idogcam"] .portal-sidebar-setup-button:hover {
  background: linear-gradient(135deg, #0E3A60 0%, #15588C 100%);
  box-shadow: 0 4px 14px rgba(21, 88, 140, 0.45);
}

/* Mobile: CTA stays visible — the sidebar is a full drawer there */

/* ============================================================================
   GETTING STARTED DRAWER - Compact Design
   ============================================================================ */

.getting-started-drawer {
  margin: 4px;
  border-radius: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.getting-started-drawer.open {
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

/* Header - Compact */
.getting-started-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.getting-started-header:hover {
  background: rgba(59, 130, 246, 0.08);
}

.getting-started-header-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.getting-started-header-right {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--sidebar-text);
  opacity: 0.7;
}

.getting-started-header-right svg {
  width: 12px;
  height: 12px;
}

/* Progress Ring - Compact 20px */
.getting-started-progress-ring {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.getting-started-progress-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.getting-started-progress-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.15);
  stroke-width: 2.5;
}

.getting-started-progress-fill {
  fill: none;
  stroke: #3b82f6;
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke-dasharray 0.5s ease;
}

.getting-started-progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-weight: 600;
  color: var(--sidebar-text);
}

/* Title - Compact */
.getting-started-title {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.getting-started-title-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--sidebar-text);
  line-height: 1.2;
}

.getting-started-subtitle {
  font-size: 12px;
  color: var(--sidebar-text);
  opacity: 0.5;
  line-height: 1.2;
}

/* Dismiss button - Compact */
.getting-started-dismiss {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--sidebar-text);
  opacity: 0.4;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.getting-started-dismiss:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}

.getting-started-dismiss svg {
  width: 10px;
  height: 10px;
}

/* Content - Compact */
.getting-started-content {
  padding: 0 4px 4px;
}

.getting-started-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Checklist Item - Single line, compact */
.getting-started-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.15s ease;
  background: transparent;
}

.getting-started-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.getting-started-item.completed {
  opacity: 0.5;
}

.getting-started-item.completed:hover {
  opacity: 0.7;
}

/* Link wrapper inside item */
.getting-started-item-link {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

/* Check circle - Compact 14px */
.getting-started-item-check {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: var(--sidebar-text);
  transition: all 0.2s ease;
  cursor: pointer;
  padding: 0;
  background: transparent;
}

.getting-started-item-check.checked {
  background: #22c55e;
  border-color: #22c55e;
  color: white;
}

/* Item icon - Compact 12px */
.getting-started-item-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #60a5fa;
}

/* Item title - Compact 10px */
.getting-started-item-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--sidebar-text);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Completed state message - Compact */
.getting-started-complete {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px;
  text-align: center;
  color: #22c55e;
}

.getting-started-complete svg {
  width: 14px;
  height: 14px;
}

.getting-started-complete span {
  font-size: 12px;
  font-weight: 500;
  color: var(--sidebar-text);
}

.getting-started-complete-dismiss {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: var(--sidebar-text);
  cursor: pointer;
  transition: all 0.2s ease;
}

.getting-started-complete-dismiss:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Collapsed hint - Compact */
.getting-started-collapsed-hint {
  padding: 4px;
  display: flex;
  justify-content: center;
  color: #60a5fa;
}

.getting-started-collapsed-hint svg {
  width: 14px;
  height: 14px;
}

/* Restore button (when dismissed) - Compact */
.getting-started-restore {
  padding: 4px;
}

.getting-started-restore-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px dashed rgba(59, 130, 246, 0.25);
  background: transparent;
  color: #60a5fa;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.getting-started-restore-btn:hover {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.4);
}

.getting-started-restore-btn svg {
  width: 12px;
  height: 12px;
}

/* Dark mode adjustments — keep a solid card surface so it stays distinct from the sidebar */
html.dark .getting-started-drawer {
  background: var(--card);
  border-color: var(--border);
}

html.dark .getting-started-drawer.open {
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.15);
}

html.dark .getting-started-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* iDogCam brand */
html[data-brand="idogcam"] .getting-started-drawer {
  background: var(--card);
  border-color: var(--border);
}

html[data-brand="idogcam"] .getting-started-progress-fill {
  stroke: var(--primary);
}

html[data-brand="idogcam"] .getting-started-item-icon {
  color: var(--primary);
}

html[data-brand="idogcam"] .getting-started-restore-btn {
  color: var(--primary);
  border-color: var(--border);
}

/* Mobile: drawer keeps the getting-started checklist visible */

/* ============================================================================
   TOPBAR - Compact
   ============================================================================ */

.portal-topbar {
  position: fixed;
  top: 0;
  right: 0;
  left: var(--sidebar-width-collapsed);
  height: var(--topbar-height);
  z-index: 1002;
  transition: left var(--sidebar-transition);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

html.dark .portal-topbar {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

body[data-sidebar-expanded="true"] .portal-topbar {
  left: var(--sidebar-width);
}

/* TopBar Navigation Items - Compact Chiclet Style (token-driven, brand/theme aware).
   Active = solid --primary + green left-edge accent (green only for iDogCam, via the
   --brand-green fallback; Camsolu resolves to transparent). */
.topbar-nav-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.15s ease, box-shadow 0.18s ease, border-color 0.15s ease, color 0.15s ease;
  color: var(--topbar-text);
  /* Inactive = a flat white chiclet. */
  background: var(--card);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--border);
}

.topbar-nav-item:hover {
  color: var(--primary);
  background: var(--card);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
  border-color: var(--primary);
  transform: translateY(-1px);
}

/* Active — the SELECTED tab floats above the flat inactive chiclets via a deeper
   shadow + a small upward lift (NO scaling). */
.topbar-nav-item.active {
  position: relative;
  overflow: hidden;
  z-index: 3;
  color: var(--primary-foreground);
  background: var(--primary);
  box-shadow: 0 10px 22px -6px rgba(0, 0, 0, 0.30), 0 3px 8px rgba(0, 0, 0, 0.16);
  border-color: transparent;
  transform: translateY(-2px);
}
.topbar-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--brand-green, transparent);
}

.topbar-nav-item svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* ============================================================================
   SUB-TOPBAR (Module Navigation) - Compact
   ============================================================================ */

.portal-subtopbar {
  position: fixed;
  top: var(--topbar-height);
  right: 0;
  left: var(--sidebar-width-collapsed);
  height: var(--subtopbar-height);
  background: var(--subtopbar-bg);
  border-bottom: 1px solid var(--subtopbar-border);
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  gap: 3px;
  overflow-x: auto;
  overflow-y: hidden;
  transition: left var(--sidebar-transition), background 0.2s ease, border-color 0.2s ease;
  -webkit-overflow-scrolling: touch;
}

body[data-sidebar-expanded="true"] .portal-subtopbar {
  left: var(--sidebar-width);
}

.portal-subtopbar::-webkit-scrollbar {
  height: 0;
  display: none;
}

/* Sub-nav items — true chiclet buttons (clearly distinct from the bar they sit on).
   Inactive: card surface + border. Active: filled brand primary + green left edge. */
.portal-subtopbar-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 8px;
  color: var(--subtopbar-text);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.15s ease, box-shadow 0.18s ease, border-color 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.portal-subtopbar-item:hover {
  color: var(--subtopbar-text-active);
  background: var(--card);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
  border-color: var(--primary);
  transform: translateY(-1px);
}

.portal-subtopbar-item.active {
  position: relative;
  overflow: hidden;
  z-index: 3;
  color: var(--primary-foreground);
  background: var(--primary);
  border-color: transparent;
  box-shadow: 0 10px 20px -6px rgba(0, 0, 0, 0.30), 0 3px 8px rgba(0, 0, 0, 0.16);
  transform: translateY(-2px);
}

/* Green left-edge accent (iDogCam); transparent for Camsolu */
.portal-subtopbar-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--brand-green, transparent);
}

.portal-subtopbar-item svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* Back button - Compact */
.portal-subtopbar-back {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 6px 10px;
  border-radius: 5px;
  color: var(--primary);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.portal-subtopbar-back:hover {
  color: var(--subtopbar-text-active);
  background: var(--subtopbar-item-hover-bg);
}

.portal-subtopbar-back svg {
  width: 13px;
  height: 13px;
}

/* Divider - Compact */
.portal-subtopbar-divider {
  width: 1px;
  height: 16px;
  background: var(--subtopbar-border);
  margin: 0 6px;
  flex-shrink: 0;
}

/* ============================================================================
   MAIN CONTENT AREA
   ============================================================================ */

.portal-main {
  margin-left: var(--sidebar-width-collapsed);
  padding-top: var(--topbar-height);
  min-height: 100vh;
  background: var(--background, #0f172a);
  transition: margin-left var(--sidebar-transition), padding-top var(--sidebar-transition);
}

/* When SubTopBar is visible, add extra padding */
.portal-main:has(.portal-subtopbar) {
  padding-top: calc(var(--topbar-height) + var(--subtopbar-height));
}

body[data-sidebar-expanded="true"] .portal-main {
  margin-left: var(--sidebar-width);
}

/* Legacy support for main tag */
body main {
  margin-left: var(--sidebar-width-collapsed);
  transition: margin-left var(--sidebar-transition);
}

body[data-sidebar-expanded="true"] main {
  margin-left: var(--sidebar-width);
}

/* ============================================================================
   FULL-BLEED CONTENT (Camera Pages)
   ============================================================================ */

.portal-content-fullbleed {
  margin: 0;
  width: 100%;
  overflow: hidden;
  background: var(--brand-dark, #0f172a);
}

/* ============================================================================
   CRM CONTENT
   ============================================================================ */

.portal-crm-content {
  left: var(--sidebar-width-collapsed);
  transition: left var(--sidebar-transition);
  background: #f8fafc;
}

body[data-sidebar-expanded="true"] .portal-crm-content {
  left: var(--sidebar-width);
}

/* ============================================================================
   MOBILE & TABLET (≤1024px) — Sidebar becomes a slide-in drawer
   Opened via the TopBar hamburger; full expanded nav with labels, facility
   selector, and getting-started checklist. Closes on backdrop tap, nav click,
   Escape, or route change.
   ============================================================================ */

:root {
  --topbar-mobile-nav-height: 44px;
}

/* Hamburger + drawer close button: hidden on desktop */
.portal-topbar-hamburger,
.portal-sidebar-mobile-close {
  display: none;
}

@media (max-width: 1024px) {
  /* ---- Drawer (React portal sidebar only) ----
     The legacy standalone PHP sidebar (#portal-sidebar-panel, rendered by
     shared/components/portal-sidebar.js) has no hamburger to open a drawer,
     so it is excluded here and keeps its old bottom-bar behavior below. */
  .portal-sidebar:where(:not(#portal-sidebar-panel)) {
    width: 280px;
    max-width: 84vw;
    left: -300px; /* animate `left` (not transform) so fixed-position flyouts inside keep viewport coords */
    height: 100%;
    height: 100dvh;
    z-index: 1040;
    box-shadow: none;
    transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease;
  }

  /* The desktop expand toggle must never resize the drawer */
  body[data-sidebar-expanded="true"] .portal-sidebar:where(:not(#portal-sidebar-panel)) {
    width: 280px;
  }

  /* The drawer scrolls as a whole — the nav sizes to its content instead of
     squeezing into a hidden inner scroll area above the getting-started card */
  .portal-sidebar:where(:not(#portal-sidebar-panel)) {
    overflow-y: auto;
    overflow-x: hidden;
  }

  .portal-sidebar:where(:not(#portal-sidebar-panel)) .portal-sidebar-nav {
    flex: 0 0 auto;
    overflow-y: visible;
  }

  .portal-sidebar.mobile-open {
    left: 0;
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.3);
  }

  .portal-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1039;
    animation: portal-backdrop-in 0.2s ease;
  }

  @keyframes portal-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* Drawer always renders expanded: labels visible, items left-aligned */
  .portal-sidebar:where(:not(#portal-sidebar-panel)) .portal-sidebar-nav-item {
    justify-content: flex-start;
    gap: 12px;
    padding: 12px 14px;
    font-size: 13px;
  }

  .portal-sidebar:where(:not(#portal-sidebar-panel)) .portal-sidebar-nav-text {
    opacity: 1;
    max-width: none;
  }

  .portal-sidebar-facility {
    justify-content: flex-start;
    padding: 6px 8px;
  }

  .portal-sidebar:where(:not(#portal-sidebar-panel)) .portal-sidebar-nav {
    padding: 8px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }

  .portal-sidebar-mobile-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--sidebar-text);
    cursor: pointer;
    transition: background 0.15s ease;
  }

  .portal-sidebar-mobile-close:hover,
  .portal-sidebar-mobile-close:active {
    background: var(--sidebar-item-hover);
  }

  /* ---- Layout: content takes the full width ----
     (plain `main` only when the legacy PHP sidebar isn't on the page — those
     pages keep their desktop rail between 769–1024px) */
  body:not(:has(#portal-sidebar-panel)) main,
  body .portal-main {
    margin-left: 0 !important;
  }

  .portal-topbar {
    left: 0 !important;
  }

  .portal-subtopbar {
    left: 0 !important;
    padding: 0 8px;
  }

  .portal-subtopbar::-webkit-scrollbar {
    display: none;
  }

  .portal-crm-content {
    left: 0 !important;
  }

  /* ---- TopBar ---- */
  .portal-topbar-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-right: 6px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--topbar-text);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease;
  }

  .portal-topbar-hamburger:hover,
  .portal-topbar-hamburger:active {
    background: var(--sidebar-item-hover, rgba(0, 0, 0, 0.06));
  }

  /* Title truncates instead of colliding with the nav/avatar */
  .portal-topbar-title {
    min-width: 0;
    overflow: hidden;
  }

  .portal-topbar-title h1 {
    font-size: 16px !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Module tabs move out of the bar into their own scrollable row below it
     (desktop absolutely centers them inside the 48px bar, which overlaps the
     title and avatar on small screens) */
  .topbar-module-nav {
    position: absolute !important;
    left: 0 !important;
    right: 0;
    top: var(--topbar-height);
    transform: none !important;
    height: var(--topbar-mobile-nav-height);
    padding: 0 12px;
    justify-content: flex-start;
    background: var(--topbar-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .topbar-module-nav::-webkit-scrollbar {
    display: none;
  }

  .topbar-module-nav .topbar-nav-item {
    flex-shrink: 0;
  }

  /* Push page content down to clear the extra nav row */
  body[data-has-module-nav="true"] .portal-main {
    padding-top: calc(var(--topbar-height) + var(--topbar-mobile-nav-height));
  }

  body[data-has-module-nav="true"] .portal-subtopbar {
    top: calc(var(--topbar-height) + var(--topbar-mobile-nav-height));
  }
}

/* ============================================================================
   LEGACY STANDALONE PHP SIDEBAR (#portal-sidebar-panel) — old bottom-bar
   behavior preserved on phones. Rendered by shared/components/portal-sidebar.js
   on legacy PHP pages; it has no hamburger, so it cannot use the drawer.
   ============================================================================ */

@media (max-width: 768px) {
  #portal-sidebar-panel {
    position: fixed;
    bottom: 0;
    top: auto;
    left: 0;
    right: 0;
    width: 100%;
    height: 56px;
    flex-direction: row;
    background: var(--sidebar-bg, #1c3060);
    border-right: none;
    border-top: none;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
    z-index: 1000;
  }

  #portal-sidebar-panel .portal-sidebar-header,
  #portal-sidebar-panel .portal-sidebar-facility,
  #portal-sidebar-panel .portal-sidebar-footer {
    display: none;
  }

  #portal-sidebar-panel .portal-sidebar-nav {
    display: flex;
    flex-direction: row;
    padding: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 2px;
  }

  #portal-sidebar-panel .portal-sidebar-nav-item {
    flex-direction: column;
    gap: 2px;
    padding: 6px 10px;
    min-width: 48px;
    margin: 0;
  }

  #portal-sidebar-panel .portal-sidebar-nav-text {
    font-size: 12px;
    opacity: 1;
    max-width: none;
    width: auto;
    text-align: center;
  }

  body:has(#portal-sidebar-panel) main {
    margin-left: 0 !important;
    padding-bottom: 56px;
  }
}

/* ============================================================================
   SETTINGS CONTENT
   ============================================================================ */

.settings-content-wrapper {
  height: 100%;
  overflow-y: auto;
  background: var(--background, #0f172a);
  padding: 16px;
}

/* Dark Theme Form Elements for Settings */
.settings-content-wrapper .bg-white {
  background: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.settings-content-wrapper .text-gray-900 {
  color: white !important;
}

.settings-content-wrapper .text-gray-700 {
  color: rgba(255, 255, 255, 0.7) !important;
}

.settings-content-wrapper .text-gray-600 {
  color: rgba(255, 255, 255, 0.6) !important;
}

.settings-content-wrapper .text-gray-500 {
  color: rgba(255, 255, 255, 0.5) !important;
}

.settings-content-wrapper .text-gray-400 {
  color: rgba(255, 255, 255, 0.4) !important;
}

.settings-content-wrapper .border-gray-200 {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.settings-content-wrapper .border-gray-300 {
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.settings-content-wrapper input[type="text"],
.settings-content-wrapper input[type="password"],
.settings-content-wrapper input[type="email"],
.settings-content-wrapper input[type="number"],
.settings-content-wrapper select,
.settings-content-wrapper textarea {
  background: #0f172a !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: white !important;
}

.settings-content-wrapper input[type="text"]::placeholder,
.settings-content-wrapper input[type="password"]::placeholder,
.settings-content-wrapper input[type="email"]::placeholder,
.settings-content-wrapper textarea::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}

.settings-content-wrapper input[type="text"]:focus,
.settings-content-wrapper input[type="password"]:focus,
.settings-content-wrapper input[type="email"]:focus,
.settings-content-wrapper input[type="number"]:focus,
.settings-content-wrapper select:focus,
.settings-content-wrapper textarea:focus {
  border-color: #60a5fa !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
}

.settings-content-wrapper input[type="checkbox"] {
  accent-color: #60a5fa;
}

.settings-content-wrapper input[type="range"] {
  accent-color: #60a5fa;
}

/* Mobile Responsive - Settings */
@media (max-width: 768px) {
  .settings-content-wrapper {
    padding: 12px;
  }
}