/**
 * Dashboard Module Styles
 * v1.0 - 10/16/25 - Initial implementation for Phase 2
 *
 * Architecture:
 * - BEM naming convention
 * - Fire TV compatible (no webkit-mask, viewport units with transforms, complex filters)
 * - Zero !important declarations
 * - CSS variables for dynamic values
 * - Simple transitions only (opacity, border-color, width)
 *
 * Blocks:
 * - .dashboard - Main container
 * - .dashboard-sidebar - Left sidebar
 * - .dashboard-menu - Menu within sidebar
 * - .dashboard-grid - 2×3 widget grid
 */

/* =============================================================================
   DASHBOARD CONTAINER
   ============================================================================= */

.dashboard {
  display: flex;
  flex-direction: column; /* Stack nav bars and content vertically */
  height: 100vh;
  width: 100vw;
  background-color: var(--grid-gap-color);
  color: var(--text-primary);
  overflow: hidden;
}

.dashboard--hidden {
  display: none;
}

/* Content wrapper - holds nav bars and content row vertically */
.dashboard-content-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1; /* Takes remaining space */
  min-height: 0; /* Allow shrinking */
  overflow: hidden;
}

/* Content row - holds sidebar and grid horizontally */
.dashboard-content-row {
  display: flex;
  flex-direction: row;
  flex: 1; /* Takes remaining space after nav bars */
  min-height: 0; /* Allow shrinking */
  overflow: hidden;
}

.dashboard--widget-focused {
  /* State when a widget is focused (centered/overlay) */
}

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

/* Sidebar wrapper - maintains space for collapsed sidebar in flex layout */
.dashboard-sidebar-wrapper {
  width: 60px;
  height: 100%; /* Fill content wrapper height, not viewport */
  position: relative;
  flex-shrink: 0;
  z-index: 10; /* Sidebar's stacking context - below selected cells (100) and overlay (150) */
}

/* Sidebar - overlays grid when expanded */
.dashboard-sidebar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 100%; /* Fill wrapper height, not viewport */
  background-color: var(--bg-primary);
  border-right: 1px solid var(--bg-tertiary);
  transition: width 0.3s ease, background 0.3s ease;
  overflow: visible; /* Allow hamburger menu to overflow */
  display: flex;
  flex-direction: column;
  /* z-index managed by wrapper */
}

.dashboard-sidebar--expanded {
  width: 200px;
  /* Semi-transparent gradient on right side when expanded (legacy style) */
  background: linear-gradient(
    to right,
    var(--bg-primary) 0%,
    var(--bg-primary) 40%,
    var(--bg-primary-semi-transparent) 100%
  );
  /* z-index managed by wrapper */
}

/* =============================================================================
   LOGO
   ============================================================================= */

.dashie-logo {
  width: 100px;
  height: auto;
  margin: 8px auto 20px auto;
  opacity: 0;
  object-fit: contain;
  transition: opacity var(--transition-normal);
  display: block;
}

.dashboard-sidebar--expanded .dashie-logo {
  opacity: 1;
}

/* =============================================================================
   VIEW SWITCHER
   ============================================================================= */

.dashboard-view-switcher-container {
  padding: 8px 4px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center view switcher vertically */
}

.view-switcher {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* View items use dashboard-menu__item class for unified navigation
   Additional modifiers:
   - --view: Identifies as a view item (vs system item)
   - --active: Currently displayed view (subtle accent indicator)
   - --selected: D-pad selection highlight (from parent class)
*/

/* View switcher icons are 20% larger than system menu icons */
.dashboard-menu__item--view .dashboard-menu__icon {
  width: 24px;
  height: 24px;
}

/* Active view indicator - subtle left accent (different from D-pad selection) */
.dashboard-menu__item--view.dashboard-menu__item--active {
  border-left-color: var(--accent-primary);
  color: var(--text-primary);
}

/* When view item is selected (D-pad highlight) - shading only, no extra border */
.dashboard-menu__item--view.dashboard-menu__item--selected {
  background-color: var(--bg-selected-fill);
  font-weight: 600;
}

/* When view item is active but NOT selected - just show subtle accent */
.dashboard-menu__item--view.dashboard-menu__item--active:not(.dashboard-menu__item--selected) {
  background-color: transparent;
  font-weight: 500;
}

/* =============================================================================
   MENU
   ============================================================================= */

.dashboard-menu {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin-top: auto; /* Push to bottom of sidebar */
  /* Note: dashboard-menu is legacy - control strip replaces it */
}

.dashboard-menu__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 4px 8px;
  background: transparent;
  border: none;
  border-left: 6px solid transparent; /* Thick left border for selection indicator */
  border-radius: 0;
  margin: 0;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  text-align: left;
  white-space: nowrap;
  height: 28px;
  line-height: 1.2;
}

.dashboard-menu__item--selected {
  /* D-pad selection: shading only, no border (border is for active view indicator) */
  background-color: var(--bg-selected-fill);
  font-weight: 600;
}

.dashboard-menu__icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
  /* Icon color controlled by theme variable */
  filter: var(--sidebar-icon-filter);
  transition: transform 0.2s ease, filter 0.3s ease, margin-left 0.3s ease;
  /* When collapsed, shift icon left to compensate for border and center it */
  /* Sidebar collapsed width: 60px, icon: 20px, should be at 20px from left */
  /* Currently at: 6px (border) + 8px (padding) = 14px */
  /* Need to shift right by 6px to center: (60-20)/2 = 20px target */
  margin-left: 6px;
}

/* When expanded, remove the margin offset */
.dashboard-sidebar--expanded .dashboard-menu__icon {
  margin-left: 0;
}

.dashboard-menu__label {
  font-size: 14px;
  margin-left: 12px;
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}

.dashboard-sidebar--expanded .dashboard-menu__label {
  opacity: 1;
}

/* =============================================================================
   CONTROL STRIP (Bottom of sidebar)
   Uses dashboard-menu__item style for unified D-pad navigation
   ============================================================================= */

.sidebar-control-strip {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin-top: auto; /* Push to bottom of sidebar */
  background: transparent;
}

/* Control strip uses dashboard-menu__item class directly - no custom styles needed */
/* Items inherit from .dashboard-menu__item and .dashboard-menu__item--system */

/* =============================================================================
   MIC BUTTON STATE STYLES
   ============================================================================= */

/* SVG icons - use standard icon color (no green/red) */
/* Note: Inline SVGs use currentColor, so we only need color, not filter */
/* Filter causes purple/pink distortion on inline SVGs */
.dashboard-menu__mic-icon {
  filter: none; /* No filter for inline SVG - it uses currentColor */
  color: var(--text-primary); /* Standard text color - black/dark in light mode, white in dark mode */
}

/* Ensure mic icon is dark in light themes */
[data-theme="light"] .dashboard-menu__mic-icon,
[data-theme="default-light"] .dashboard-menu__mic-icon,
[data-theme="autumn-light"] .dashboard-menu__mic-icon,
[data-theme="forest-light"] .dashboard-menu__mic-icon {
  color: #1a1a1a; /* Near black for light themes */
}

/* Mic muted state - same color, just show strikethrough */
.dashboard-menu__item--mic[data-mic-state="muted"] .dashboard-menu__mic-icon {
  color: var(--text-primary); /* Keep standard color when muted */
}

/* Hide strikethrough line by default */
.mic-strike-line {
  display: none;
}

/* Show strikethrough when muted */
.dashboard-menu__item--mic[data-mic-state="muted"] .mic-strike-line {
  display: block;
}

/* Audio muted state - dim the icon */
.dashboard-menu__item--system[data-audio-muted="true"] .dashboard-menu__icon {
  opacity: 0.5;
}

/* =============================================================================
   WAKE WORD PILL (Shows confidence bar at bottom of sidebar)
   ============================================================================= */

/* Control strip needs relative positioning for absolute pill */
.sidebar-control-strip {
  position: relative;
  padding-bottom: 28px; /* Make room for wake word pill at bottom */
}

.wake-word-pill {
  display: none; /* Hidden by default */
  position: absolute;
  bottom: 4px; /* Position at the very bottom of control strip */
  left: 8px;
  right: 8px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 3px 6px;
  background: rgba(128, 128, 128, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 10px;
  font-size: 8px; /* Reduced from 10px */
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Show pill when mic is in show-pill state */
.dashboard-menu__item--mic[data-mic-state="show-pill"] ~ .wake-word-pill {
  display: flex;
}

.wake-word-bar-container {
  position: relative;
  width: 40px;
  height: 6px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  overflow: visible;
}

.wake-word-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(
    to right,
    #FF6B1A 0%,      /* Orange at low confidence */
    #34C759 100%     /* Green at high confidence */
  );
  border-radius: 3px;
  transition: width 0.15s ease-out;
}

.wake-word-threshold {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: #FFFFFF;
  border-radius: 1px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.wake-word-label {
  font-weight: 600;
  min-width: 28px;
  text-align: right;
}

/* Detection flash on wake word pill */
.wake-word-pill.detected {
  animation: pill-detection-flash 0.8s ease-out;
}

.wake-word-pill.detected .wake-word-label {
  color: #34C759;
}

@keyframes pill-detection-flash {
  0% {
    background: rgba(52, 199, 89, 0.4);
    box-shadow: 0 2px 12px rgba(52, 199, 89, 0.5);
  }
  100% {
    background: rgba(128, 128, 128, 0.15);
    box-shadow: none;
  }
}

/* =============================================================================
   HAMBURGER POPOUT MENU
   ============================================================================= */

.hamburger-popout-menu {
  position: absolute;
  bottom: 80px; /* Shifted up from bottom to make room for wake word bar */
  left: 70px; /* Default: position to the right of collapsed sidebar (60px) */
  display: none; /* Hidden by default */
  flex-direction: column;
  background: var(--bg-primary);
  border: 1px solid var(--bg-tertiary);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  padding: 4px 0;
  z-index: 600; /* Above sidebar and mic indicator */
  min-width: 140px;
}

/* When sidebar is expanded, move menu further right */
.dashboard-sidebar--expanded .hamburger-popout-menu {
  left: 210px; /* Position to the right of expanded sidebar (200px) */
}

.hamburger-popout-menu[data-visible="true"] {
  display: flex;
}

.hamburger-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  text-align: left;
  transition: background-color 0.15s ease;
}

.hamburger-menu-item:hover {
  background-color: var(--bg-hover);
}

/* D-pad selection highlight */
.hamburger-menu-item--selected {
  background-color: var(--bg-selected-fill);
}

.hamburger-menu-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: var(--sidebar-icon-filter);
}

.hamburger-menu-label {
  font-weight: 500;
}

/* =============================================================================
   SIDEBAR VERSION LABEL
   Shows version number at bottom of sidebar, only visible when expanded
   ============================================================================= */

.sidebar-version {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.dashboard-sidebar--expanded .sidebar-version {
  opacity: 0.6;
}

/* =============================================================================
   GRID
   ============================================================================= */

/* Grid column wrapper no longer needed - buttons are absolutely positioned */

.dashboard-grid {
  flex: 1;
  display: grid;
  /* Grid template will be set dynamically by JavaScript per-page */
  /* Fallback: 3 rows × 2 columns, equal sizing (if JS doesn't set) */
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: var(--grid-gap);
  padding: var(--grid-gap);
  height: 100%; /* Fill content wrapper, not viewport */
  max-height: 100%;
  overflow: visible; /* Allow cells to overflow and appear above sidebar */
  box-sizing: border-box;
  /* NO position/z-index - prevents creating stacking context that would trap focused widgets */
  /* This matches legacy #grid behavior and allows focused widgets to render at proper z-index */

  /* Dashboard-level zoom - applied via CSS zoom property for native browser-like scaling */
  /* This scales the entire grid uniformly including all widgets */
  zoom: var(--dashboard-zoom, 1);
  /* Transform origin for zoom effect */
  transform-origin: top left;
}

.dashboard-grid__cell {
  background-color: var(--bg-secondary);
  border: none; /* No border - focus states use box-shadow instead */
  border-radius: var(--border-radius);
  padding: 16px;
  transition: box-shadow 0.2s ease, transform 0.2s ease, z-index 0s;
  overflow: hidden;
  position: relative;
  z-index: 1; /* Base z-index for cells */
  /* Ensure cells don't overflow their grid area */
  min-height: 0;
  min-width: 0;
}

/* Support for cells that span multiple rows/columns */
/* NOTE: Spans are now applied via inline styles in dom-builder.js */
/* These classes are kept for backward compatibility but are no longer used */
.dashboard-grid__cell--rowspan-2 {
  grid-row: span 2;
}

.dashboard-grid__cell--colspan-2 {
  grid-column: span 2;
}

/* =============================================================================
   ENHANCED FOCUS MODE - SELECTED STATE (Grid Navigation)
   ============================================================================= */

.dashboard-grid__cell--focused {
  /* State 1: Selected (navigating grid with arrow keys) */
  border-radius: var(--border-radius);
  box-shadow: var(--glow-selected),
              inset 0 0 0 var(--border-width-selected) var(--color-selected-silver);
  transform: scale(1.05); /* 105% scale for enhanced mode */
  transition: all var(--transition-fast);
  z-index: var(--z-widget-selected); /* 100 - Above sidebar (10) but below overlay (150) */
  overflow: visible; /* Allow border to be fully visible when focused */
}

/* =============================================================================
   ENHANCED FOCUS MODE - FOCUSED STATE (Widget Centered with Overlay)
   ============================================================================= */

.dashboard-grid__cell--widget-focused {
  /* State 2: Focused (ENTER pressed, widget centered, overlay visible) */
  /* Don't use position: fixed - keep in normal flow and translate from current position */
  position: relative;
  z-index: calc(var(--z-widget-focused) + 1) !important; /* 201 - Above overlay (150), matches legacy .centered class */

  /* Silver border and glow */
  border-radius: var(--border-radius);
  box-shadow: var(--glow-selected),
              inset 0 0 0 var(--border-width-selected) var(--color-selected-silver);

  /* Transform will be set via inline style with calculated translate values */
  /* Example: transform: translate(100px, 50px) scale(1.05) */

  /* Ensure smooth transition */
  transition: transform 0.4s cubic-bezier(0.4, 0.0, 0.2, 1),
              box-shadow var(--transition-fast),
              border-radius var(--transition-fast);
}

/* =============================================================================
   ENHANCED FOCUS MODE - ACTIVE STATE (Controlling Widget)
   ============================================================================= */

.dashboard-grid__cell--widget-active {
  /* State 3: Active (RIGHT pressed from focused, controlling widget, menu dimmed) */
  position: relative;
  z-index: calc(var(--z-widget-focused) + 1) !important; /* 201 - Above overlay (150), matches legacy */

  /* Silver border and glow - same as focused state (consistent with focus menu styling) */
  border-radius: var(--border-radius);
  box-shadow: var(--glow-selected),
              inset 0 0 0 var(--border-width-selected) var(--color-selected-silver);

  /* Transform includes 108% scale (set via inline style) */
  /* Example: transform: translate(100px, 50px) scale(1.08) */

  /* Smooth transition */
  transition: transform 0.3s ease,
              box-shadow 0.3s ease,
              border-radius var(--transition-fast);
}

.dashboard-grid__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 18px;
  color: var(--text-muted);
  text-align: center;
}

/* =============================================================================
   FOCUS OVERLAY
   ============================================================================= */

/* Darken background when widget is focused (50% opacity for enhanced mode) */
/* Use separate div element like legacy code - not pseudo-element */
.focus-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: var(--z-focus-overlay); /* 150 - Below focused widget (200) but above everything else */
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-medium), background var(--transition-medium);
}

.focus-overlay.visible {
  opacity: 1;
  pointer-events: auto; /* Clickable when visible - allows defocus when clicking overlay */
  cursor: pointer;
}

/* Fullscreen mode - make overlay opaque */
.focus-overlay.fullscreen {
  background: rgba(0, 0, 0, 0.98);
}

/* Light theme fullscreen */
:root.light-theme .focus-overlay.fullscreen,
.light-theme .focus-overlay.fullscreen {
  background: rgba(255, 255, 255, 0.98);
}

/* Widget in fullscreen mode - expand to fill viewport */
.widget-fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  /* Dimensions need to account for inverse zoom - see below */
  width: 100vw !important;
  height: 100vh !important;
  transform: none !important; /* Remove any centering transforms */
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: calc(var(--z-widget-focused) + 1) !important; /* Above overlay */

  /* Apply inverse zoom to counteract dashboard zoom and restore 1:1 scale */
  /* The widget cell inherits zoom from .dashboard-grid, so we need to counter it */
  /* --dashboard-inverse-zoom is set via JS when fullscreen is activated */
  zoom: var(--dashboard-inverse-zoom, 1);
}

/* Fullscreen widget iframe - fill entire cell */
.widget-fullscreen iframe {
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Prevent clicks on unfocused widgets when overlay is visible */
.dashboard--widget-focused .dashboard-grid__cell:not(.dashboard-grid__cell--widget-focused):not(.dashboard-grid__cell--widget-active) {
  pointer-events: none;
}

/* Prevent clicks on sidebar when overlay is visible */
.dashboard--widget-focused .dashboard-sidebar {
  pointer-events: none;
}

/* =============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================= */

/* Mobile/Tablet - Stack vertically */
/* DISABLED: This breakpoint was causing layout issues when console is open
   TODO: Re-enable when we have proper mobile/tablet support
@media (max-width: 768px) {
  .dashboard {
    flex-direction: column;
  }

  .dashboard-sidebar {
    width: 100%;
    height: 60px;
  }

  .dashboard-sidebar--expanded {
    height: auto;
  }

  .dashboard-menu {
    flex-direction: row;
    overflow-x: auto;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, 1fr);
  }
}
*/

/* =============================================================================
   CSS VARIABLES - Enhanced Focus Mode
   ============================================================================= */

/* Dashboard uses legacy theme variables directly from css/core/variables.css
   Theme-specific colors (bg-primary, text-primary, etc.) automatically update
   when body.theme-dark or body.theme-light class is applied */

:root {
  /* Enhanced Focus Mode Colors - use theme colors that adapt per theme */
  --color-selected-silver: var(--accent-selection);
  --color-active-border: var(--accent-primary); /* Theme-aware primary accent */

  /* Border widths for enhanced focus mode */
  --border-width-selected: 6px;
  --border-width-active: 6px;
}

/* =============================================================================
   MICROPHONE STATUS INDICATOR (Wake Word Feedback)
   ============================================================================= */

/* Microphone status overlay - bottom left corner (over sidebar) */
.mic-status-indicator {
  position: fixed;
  bottom: 4px;
  left: 8px;
  display: flex;
  flex-direction: column; /* Vertical layout: mic icon on top, bar+text below */
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 8px;
  font-weight: 500;
  color: var(--text-primary);
  /* Gradient background: 15% opacity for better visibility */
  background: linear-gradient(
    to bottom,
    rgba(128, 128, 128, 0.15) 0%,
    rgba(128, 128, 128, 0.08) 50%,
    rgba(128, 128, 128, 0.15) 100%
  );
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 500; /* Above sidebar and widgets */
  pointer-events: none; /* Don't interfere with clicks */
  transition: opacity 0.3s ease;
}

/* Bottom row: bar + percentage text side by side */
.mic-status-indicator .mic-bottom-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3px;
}

.mic-status-indicator.hidden {
  display: none;
}

/* Microphone icon */
.mic-status-icon {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

/* Green microphone when available */
.mic-status-icon.available {
  fill: #34C759; /* iOS green */
}

/* Red microphone when unavailable */
.mic-status-icon.unavailable {
  fill: #FF3B30; /* iOS red */
}

/* Wake word text - hidden in sidebar layout (no room) */
.mic-status-wakeword {
  display: none; /* Hidden - no room in sidebar layout */
}

/* Confidence text (smaller, in parentheses) - legacy fallback */
.mic-status-confidence {
  display: none; /* Hidden - no room in sidebar layout */
}

/* =============================================================================
   CONFIDENCE BAR (Wake Word Visualization)
   ============================================================================= */

.mic-confidence-bar-container {
  position: relative;
  width: 29px; /* Bar width - 30% longer */
  height: 4px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 2px;
  overflow: visible; /* Allow threshold marker to extend slightly */
  display: none; /* Hidden by default */
}

.mic-status-indicator.has-heartbeat .mic-confidence-bar-container {
  display: block; /* Show when heartbeat data is available */
}

/* Show bottom row (bar + label) when heartbeat data is available */
.mic-bottom-row {
  display: none; /* Hidden by default */
}

.mic-status-indicator.has-heartbeat .mic-bottom-row {
  display: flex; /* Show when heartbeat data is available */
}

/* Confidence fill bar */
.mic-confidence-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(
    to right,
    #FF6B1A 0%,      /* Orange at low confidence */
    #34C759 100%     /* Green at high confidence */
  );
  border-radius: 2px;
  transition: width 0.15s ease-out;
  min-width: 0;
}

/* Threshold marker line */
.mic-confidence-threshold {
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 1px;
  background: #FFFFFF;
  border-radius: 1px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  z-index: 2;
  /* Position set dynamically via inline style (e.g., left: 55%) */
}

/* Confidence percentage label - shown to the right of bar */
.mic-confidence-label {
  font-size: 8px;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 22px; /* Ensure consistent width for "100%" */
  text-align: left;
}

/* Detection flash effect - shows peak confidence when wake word detected */
.mic-status-indicator.detected {
  animation: detection-flash 0.8s ease-out;
}

.mic-status-indicator.detected .mic-confidence-label {
  color: #34C759; /* Green for successful detection */
  font-weight: 700;
}

@keyframes detection-flash {
  0% {
    background: rgba(52, 199, 89, 0.4); /* Green flash */
    box-shadow: 0 2px 12px rgba(52, 199, 89, 0.5);
  }
  100% {
    background: linear-gradient(
      to right,
      rgba(128, 128, 128, 0.15) 0%,
      rgba(128, 128, 128, 0.08) 50%,
      rgba(128, 128, 128, 0.15) 100%
    );
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }
}

/* =============================================================================
   ACCESSIBILITY
   ============================================================================= */

/* Ensure focus is visible for keyboard navigation only (not mouse/touch) */
.dashboard-menu__item:focus,
.dashboard-grid__cell:focus {
  outline: none;
}

.dashboard-menu__item:focus-visible,
.dashboard-grid__cell:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .dashboard-sidebar,
  .dashboard-menu__item,
  .dashboard-grid__cell,
  .dashboard-menu__label {
    transition: none;
  }
}

/* =============================================================================
   WIDGET IFRAMES (Phase 3.5)
   ============================================================================= */

/* Widget iframe container */
.widget-iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: var(--border-radius);
  background: transparent;
  display: block;
  overflow: hidden;
}

/* Remove default iframe scrollbars */
.widget-iframe::-webkit-scrollbar {
  display: none;
}

/* Ensure iframe content fills container while respecting cell borders */
.dashboard-grid__cell iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  /* Add pointer-events to allow iframe interaction */
  pointer-events: auto;
}

/* When cell is focused, ensure iframe doesn't cover the inset border */
.dashboard-grid__cell--focused iframe,
.dashboard-grid__cell--widget-focused iframe,
.dashboard-grid__cell--widget-active iframe {
  /* Inset the iframe to make room for the border */
  top: var(--border-width-selected);
  left: var(--border-width-selected);
  width: calc(100% - calc(var(--border-width-selected) * 2));
  height: calc(100% - calc(var(--border-width-selected) * 2));
}

/* =============================================================================
   PAGE NAVIGATION ARROWS (Touch Controls)
   ============================================================================= */

.page-nav-arrows {
  /* Container not needed - arrows insert directly into dashboard flow */
  display: contents; /* Pass-through container */
}

.page-nav-arrow {
  width: 42px; /* Circular button width (30% smaller: 60px * 0.7 = 42px) */
  height: 42px; /* Circular button height (30% smaller: 60px * 0.7 = 42px) */
  border: none;
  border-radius: 50%; /* Make it circular */
  background: var(--bg-tertiary); /* Base background matching old bar */
  color: var(--text-secondary); /* Themed chevron color */
  font-size: 22px; /* Reduced proportionally (32px * 0.7 ≈ 22px) */
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  padding: 0;
  position: fixed; /* Fixed positioning to overlay sidebar */
  left: 0; /* Align to left edge (over sidebar) */
  z-index: 300; /* Above sidebar (10) and widgets (200) */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Floating shadow effect */
}

/* Semi-transparent overlay for the button effect */
.page-nav-arrow::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-active);
  opacity: 0.25;
  pointer-events: none; /* Don't block clicks */
  transition: opacity 0.2s ease;
  border-radius: 50%; /* Match button shape */
}

.page-nav-arrow:hover {
  transform: scale(1.1); /* Slight grow on hover */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); /* Stronger shadow on hover */
}

.page-nav-arrow:hover::after {
  opacity: 0.35; /* Increase overlay opacity on hover */
}

.page-nav-arrow:active {
  transform: scale(1.05); /* Slight press effect */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Reduce shadow when pressed */
}

.page-nav-arrow:active::after {
  opacity: 0.4; /* Increase overlay opacity when clicked */
}

/* SVG icon styling (matching calendar widget style) */
.page-nav-arrow svg {
  width: 22px; /* Reduced proportionally (32px * 0.7 ≈ 22px) */
  height: 22px; /* Reduced proportionally (32px * 0.7 ≈ 22px) */
  position: relative; /* Above the ::after overlay */
  z-index: 1; /* Above the semi-transparent overlay */
  pointer-events: none; /* Let clicks pass through to button */
}

/* Position based on direction - centered on collapsed sidebar */
.page-nav-arrow--up {
  top: 20px; /* Position near top, above menu items */
  left: 9px; /* Center on 60px sidebar: (60px - 42px) / 2 = 9px */
}

.page-nav-arrow--down {
  bottom: 20px; /* Position near bottom, below menu items */
  left: 9px; /* Center on 60px sidebar: (60px - 42px) / 2 = 9px */
}

/* ===================================================================
   GALLERY OVERLAY - Full-screen photo browsing
   =================================================================== */

.gallery-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000; /* Above everything including focus overlay */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
}

/* Theme-aware overlay backgrounds */
.gallery-overlay {
  background: rgba(0, 0, 0, 0.85); /* Dark mode default */
}

.gallery-overlay[data-theme="light"] {
  background: rgba(255, 255, 255, 0.92); /* Light mode */
}

.gallery-overlay.hidden {
  display: none;
  opacity: 0;
  pointer-events: none;
}

/* Gallery Album Title - Bottom right with accent background */
.gallery-album-title {
  position: absolute;
  bottom: 24px;
  right: 24px;
  font-size: 16px;
  font-weight: 600;
  color: white;
  z-index: 2100;
  padding: 10px 20px;
  background: var(--accent-color, #4A9EFF);
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(74, 158, 255, 0.4);
}

/* Light theme gallery album title - same style, accent works in both */
.gallery-overlay[data-theme="light"] .gallery-album-title {
  color: white;
  background: var(--accent-color, #4A9EFF);
  box-shadow: 0 4px 12px rgba(74, 158, 255, 0.3);
}

/* Gallery Close Button */
.gallery-close-btn {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 2100;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.15);
}

.gallery-close-btn svg {
  width: 24px;
  height: 24px;
}

.gallery-close-btn:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: scale(1.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

.gallery-close-btn:active {
  transform: scale(1.0);
  background: rgba(0, 0, 0, 0.9);
}

/* Light theme gallery close button */
.gallery-overlay[data-theme="light"] .gallery-close-btn {
  background: rgba(255, 255, 255, 0.85);
  color: #333;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.gallery-overlay[data-theme="light"] .gallery-close-btn:hover {
  background: rgba(255, 255, 255, 0.95);
}

.gallery-container {
  width: 92%;
  max-width: 1400px;
  height: 88%;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Photo grid */
.gallery-grid {
  flex: 1;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  padding: 24px;
  overflow: hidden;
}

.gallery-grid-cell {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  background: var(--bg-secondary, #2a2a2a);
  border: 3px solid transparent;
}

.gallery-grid-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Focused cell (D-pad navigation) */
.gallery-grid-cell.focused {
  transform: scale(1.08);
  border-color: var(--accent-color, #4A9EFF);
  box-shadow: 0 6px 24px rgba(74, 158, 255, 0.5);
  z-index: 10;
}

/* Hover state */
.gallery-grid-cell:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* Loading state for thumbnails */
.gallery-grid-cell.loading {
  background: linear-gradient(
    90deg,
    var(--bg-secondary, #2a2a2a) 0%,
    var(--bg-tertiary, #3a3a3a) 50%,
    var(--bg-secondary, #2a2a2a) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Pagination controls - compact style on the left */
.gallery-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 0;
  background: transparent;
}

.gallery-page-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary, #ffffff);
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.gallery-page-btn svg {
  width: 20px;
  height: 20px;
}

.gallery-page-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.gallery-page-btn:active {
  transform: scale(0.95);
}

.gallery-page-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

.gallery-page-btn.focused {
  background: var(--accent-color, #4A9EFF);
  box-shadow: 0 4px 12px rgba(74, 158, 255, 0.4);
  transform: scale(1.05);
}

.gallery-page-info {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  min-width: 100px;
  justify-content: center;
}

/* Light theme pagination */
.gallery-overlay[data-theme="light"] .gallery-page-btn {
  background: rgba(0, 0, 0, 0.08);
  color: #333;
}

.gallery-overlay[data-theme="light"] .gallery-page-btn:hover {
  background: rgba(0, 0, 0, 0.15);
}

.gallery-overlay[data-theme="light"] .gallery-page-info {
  color: rgba(0, 0, 0, 0.7);
}

.gallery-page-separator {
  opacity: 0.6;
  font-weight: 400;
  font-size: 14px;
}

/* =============================================================================
   LONG PRESS INDICATOR
   ============================================================================= */

.long-press-indicator {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
}

.long-press-indicator svg {
  width: 60px;
  height: 60px;
  transform: rotate(-90deg); /* Start circle from top */
}

.long-press-indicator .indicator-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 3;
}

.long-press-indicator .indicator-progress {
  fill: none;
  stroke: var(--accent-primary, #00aaff);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 157; /* 2 * PI * r (r=25) */
  stroke-dashoffset: 157; /* Start fully hidden */
  transition: stroke-dashoffset 0.5s linear;
}

.long-press-indicator.animating .indicator-progress {
  stroke-dashoffset: 0; /* Animate to fully visible */
}

/* =============================================================================
   VOLUME SLIDER POPUP (Tablet only)
   ============================================================================= */

.volume-slider-popup {
  position: fixed;
  z-index: 10000;
  background: var(--bg-secondary);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  padding: 16px 20px;
  opacity: 0;
  transform: translateY(-50%) scale(0.95);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.3s ease;
}

.volume-slider-popup--visible {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.volume-slider-container {
  display: flex;
  flex-direction: column;
  min-width: 220px;
}

.volume-slider-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.volume-slider-track-column {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
}

.volume-slider-track {
  position: relative;
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: visible;
}

.volume-slider-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--accent-primary, #ff9500);
  border-radius: 4px;
  transition: width 0.1s ease;
  pointer-events: none;
}

.volume-slider-input {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 32px;
  margin: 0;
  transform: translateY(-50%);
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

/* Webkit slider thumb */
.volume-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  background: var(--accent-primary, #ff9500);
  border: 3px solid var(--card-bg, #ffffff);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.volume-slider-input::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.volume-slider-input::-webkit-slider-thumb:active {
  transform: scale(0.95);
}

/* Firefox slider thumb */
.volume-slider-input::-moz-range-thumb {
  width: 24px;
  height: 24px;
  background: var(--accent-primary, #ff9500);
  border: 3px solid var(--card-bg, #ffffff);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

/* Disabled state (when muted) */
.volume-slider-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.volume-slider-input:disabled::-webkit-slider-thumb {
  background: var(--text-secondary, #999);
  cursor: not-allowed;
}

.volume-slider-input:disabled::-moz-range-thumb {
  background: var(--text-secondary, #999);
  cursor: not-allowed;
}

/* Mute button */
.volume-slider-mute-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.volume-slider-mute-btn:hover {
  background: var(--hover-bg, rgba(0, 0, 0, 0.05));
}

.volume-slider-mute-btn:active {
  background: var(--active-bg, rgba(0, 0, 0, 0.1));
}

.volume-slider-mute-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  transition: opacity 0.15s ease, filter 0.3s ease;
  filter: var(--sidebar-icon-filter);
}

/* Muted state styling */
.volume-slider-mute-btn[data-muted="true"] .volume-slider-mute-icon {
  opacity: 0.6;
}

/* Controls row (- number +) */
.volume-slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.volume-slider-level {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #333);
  min-width: 18px;
  text-align: center;
}

.volume-slider-step-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: var(--accent-primary);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: white;
  transition: background 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
}

.volume-slider-step-btn:hover {
  opacity: 0.85;
}

.volume-slider-step-btn:active {
  transform: scale(0.95);
}

.volume-slider-step-btn svg {
  width: 14px;
  height: 14px;
}

/* =============================================================================
   BRIGHTNESS SLIDER POPUP (Tablets)
   ============================================================================= */

.brightness-slider-popup {
  position: fixed;
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: translateY(-50%) scale(0.95);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.3s ease;
}

.brightness-slider-popup--visible {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.brightness-slider-container {
  display: flex;
  flex-direction: column;
  min-width: 260px;
}

.brightness-slider-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brightness-slider-track-column {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
}

.brightness-slider-track {
  position: relative;
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: visible;
}

.brightness-slider-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--accent-primary, #ff9500);
  border-radius: 4px;
  transition: width 0.1s ease;
  pointer-events: none;
}

.brightness-slider-input {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 24px;
  margin: 0;
  transform: translateY(-50%);
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.brightness-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  background: var(--accent-primary, #ff9500);
  border: 3px solid var(--card-bg, #ffffff);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.1s ease;
}

.brightness-slider-input::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.brightness-slider-input::-webkit-slider-thumb:active {
  transform: scale(0.95);
}

/* Firefox slider thumb */
.brightness-slider-input::-moz-range-thumb {
  width: 24px;
  height: 24px;
  background: var(--accent-primary, #ff9500);
  border: 3px solid var(--card-bg, #ffffff);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

/* Theme toggle button */
.brightness-slider-theme-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
  gap: 4px;
}

.brightness-slider-theme-btn:hover {
  opacity: 0.85;
}

.brightness-slider-theme-btn:active {
  opacity: 0.7;
}

.brightness-slider-theme-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: var(--sidebar-icon-filter);
  transition: filter 0.3s ease;
}

.brightness-slider-theme-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}

.brightness-slider-theme-label {
  font-size: 10px;
  color: var(--text-secondary, #666);
}

.brightness-slider-theme-mode {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #333);
}

/* Controls row (- number +) */
.brightness-slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.brightness-slider-level {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #333);
  min-width: 18px;
  text-align: center;
}

.brightness-slider-step-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: var(--accent-primary);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: white;
  transition: background 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
}

.brightness-slider-step-btn:hover {
  opacity: 0.85;
}

.brightness-slider-step-btn:active {
  transform: scale(0.95);
}

.brightness-slider-step-btn svg {
  width: 14px;
  height: 14px;
}

/* Disabled state when permission not granted */
.brightness-slider--disabled .brightness-slider-track-column {
  opacity: 0.4;
  pointer-events: none;
}

.brightness-slider--disabled .brightness-slider-input:disabled {
  cursor: not-allowed;
}

.brightness-slider--disabled .brightness-slider-step-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Permission message */
.brightness-slider-permission-msg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  margin-bottom: 12px;
  background: var(--bg-tertiary);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.brightness-slider-grant-btn {
  padding: 6px 12px;
  background: var(--accent-primary, #ff9500);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

.brightness-slider-grant-btn:hover {
  opacity: 0.85;
}

.brightness-slider-grant-btn:active {
  opacity: 0.7;
}