/**
 * Ampæra Brand Theme
 *
 * Custom DaisyUI theme overrides based on Figma designs.
 * This file defines the Ampæra color palette and typography.
 *
 * Usage: Include after DaisyUI CSS in base.html
 *
 * @see docs/design/ampaera-style-guide.md
 */

/* ============================================
   CSS Custom Properties (Design Tokens)
   ============================================ */

:root {
  /* Brand Colors */
  --ampaera-orange: #FF9408;        /* Primary action color */
  --ampaera-orange-dark: #E07D00;   /* Darker orange for hover */
  --ampaera-gold: #F5C361;          /* Brand accent */
  --ampaera-gold-dark: #CF9421;
  --ampaera-charcoal: #3C3C3B;      /* Dark text */
  --ampaera-brown: #352A22;         /* Menu text */
  --ampaera-gray-medium: #707171;
  --ampaera-gray-light: #D5D9D9;
  --ampaera-off-white: #F3F3F3;     /* Light background */
  --ampaera-menu-bg: #F6F7F7;       /* Menu background */
  --ampaera-border: #070909;        /* Border color */

  /* Typography - from Figma specs */
  --font-family-body: 'Jura', system-ui, -apple-system, sans-serif;      /* Body text */
  --font-family-heading: 'Arimo', system-ui, sans-serif;                  /* Titles, buttons */
  --font-family-menu: 'Archivo Narrow', system-ui, sans-serif;            /* Sidebar menu items */

  /* Type Scale */
  --text-h1: clamp(2rem, 5vw, 3.4375rem);      /* 32px - 55px */
  --text-h2: clamp(1.5rem, 3vw, 2.1875rem);    /* 24px - 35px */
  --text-sh1: clamp(1.25rem, 3vw, 2.5rem);     /* 20px - 40px */
  --text-sh2: clamp(1.5rem, 4vw, 3.5rem);      /* 24px - 56px */
  --text-p1: clamp(1rem, 2vw, 1.5625rem);      /* 16px - 25px */
  --text-p2: clamp(0.875rem, 1.5vw, 1.25rem);  /* 14px - 20px */
  --text-caption: 0.875rem;                     /* 14px */

  /* Spacing */
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */

  /* Border Radius */
  --radius-sm: 0.25rem;  /* 4px */
  --radius-md: 0.5rem;   /* 8px */
  --radius-lg: 0.75rem;  /* 12px */
  --radius-xl: 1rem;     /* 16px */

  /* Sidebar */
  --sidebar-width-collapsed: 60px;   /* 60px - fits 40px icons */
  --sidebar-width-expanded: 15rem;   /* 240px */

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;
}

/* ============================================
   DaisyUI Theme: Ampæra Dark
   DaisyUI 4.x uses oklch() color format
   ============================================ */

[data-theme="ampaera-dark"],
[data-theme="dark"] {
  /* Primary - Orange #FF9408 (action color) */
  --p: 0.75 0.19 55;              /* oklch for #FF9408 */
  --pf: 0.65 0.18 50;             /* Darker orange for focus */
  --pc: 0 0 0;                    /* Black text on orange */

  /* Secondary - Gold #F5C361 (brand accent) */
  --s: 0.84 0.13 80;              /* oklch for #F5C361 */
  --sf: 0.70 0.14 75;             /* Darker gold */
  --sc: 0 0 0;                    /* Black text on gold */

  /* Accent - Gold */
  --a: 0.84 0.13 80;              /* oklch for #F5C361 */
  --af: 0.70 0.14 75;
  --ac: 0 0 0;

  /* Neutral - Charcoal scale */
  --n: 0.32 0.005 90;             /* oklch for #3C3C3B */
  --nf: 0.22 0.005 90;            /* Darker */
  --nc: 0.87 0.01 200;            /* Light text */

  /* Base colors */
  --b1: 0.32 0.005 90;            /* #3C3C3B - cards */
  --b2: 0.22 0.005 90;            /* Darker background */
  --b3: 0.18 0.005 90;            /* Darkest */
  --bc: 0.87 0.01 200;            /* #D5D9D9 - light text */

  /* Semantic colors */
  --su: 0.65 0.18 145;            /* Success green */
  --suc: 1 0 0;                   /* White text */
  --wa: 0.84 0.13 80;             /* Warning = gold */
  --wac: 0 0 0;
  --er: 0.60 0.20 25;             /* Error red */
  --erc: 1 0 0;                   /* White text */
  --in: 0.65 0.15 240;            /* Info blue */
  --inc: 0 0 0;

  /* Component specific */
  --rounded-box: 1rem;            /* 16px - matches design */
  --rounded-btn: 0.5rem;
  --rounded-badge: 1rem;
  --animation-btn: 0.2s;
  --animation-input: 0.2s;
  --btn-focus-scale: 0.98;
  --border-btn: 3px;              /* Matches design border width */
  --tab-border: 1px;
  --tab-radius: 0.5rem;
}

/* ============================================
   DaisyUI Theme: Ampæra Light
   DaisyUI 4.x uses oklch() color format
   ============================================ */

[data-theme="ampaera-light"],
[data-theme="light"] {
  /* Primary - Orange #FF9408 (action color) */
  --p: 0.75 0.19 55;              /* oklch for #FF9408 */
  --pf: 0.65 0.18 50;             /* Darker orange for focus */
  --pc: 0 0 0;                    /* Black text on orange */

  /* Secondary - Dark Gold #CF9421 for light mode */
  --s: 0.70 0.14 75;              /* oklch for #CF9421 */
  --sf: 0.60 0.14 70;
  --sc: 0 0 0;

  /* Accent - Gold #F5C361 */
  --a: 0.84 0.13 80;              /* oklch for #F5C361 */
  --af: 0.70 0.14 75;
  --ac: 0 0 0;

  /* Neutral - Charcoal */
  --n: 0.32 0.005 90;             /* oklch for #3C3C3B */
  --nf: 0.22 0.005 90;
  --nc: 1 0 0;                    /* White text on neutral */

  /* Base colors - Light backgrounds */
  --b1: 1 0 0;                    /* White - cards */
  --b2: 0.97 0.002 90;            /* #F3F3F3 - background */
  --b3: 0.97 0.005 200;           /* #F6F7F7 - menu/subtle bg */
  --bc: 0.32 0.005 90;            /* #3C3C3B - dark text */

  /* Semantic colors */
  --su: 0.65 0.18 145;            /* Success green */
  --suc: 1 0 0;                   /* White text */
  --wa: 0.84 0.13 80;             /* Warning = gold */
  --wac: 0 0 0;
  --er: 0.60 0.20 25;             /* Error red */
  --erc: 1 0 0;                   /* White text */
  --in: 0.60 0.18 240;            /* Info blue */
  --inc: 1 0 0;                   /* White text */

  /* Component specific */
  --rounded-box: 1rem;            /* 16px - matches design */
  --rounded-btn: 0.5rem;
  --rounded-badge: 1rem;
  --animation-btn: 0.2s;
  --animation-input: 0.2s;
  --btn-focus-scale: 0.98;
  --border-btn: 3px;              /* Matches design border width */
  --tab-border: 1px;
  --tab-radius: 0.5rem;
}

/* ============================================
   Typography
   ============================================ */

html {
  font-family: var(--font-family-body);
  color: oklch(var(--bc));  /* Use theme's base-content color */
}

/* ============================================
   Theme-specific Sidebar Styling
   ============================================ */

/* Base sidebar styles - must be in CSS, not Tailwind JIT, to prevent flash */
.sidebar {
  border-width: 3px;
  border-style: solid;
  border-radius: 16px;
  /* Default to dark theme colors (most users) - overridden by theme-specific rules below */
  background-color: oklch(var(--b1));
  border-color: oklch(var(--bc) / 0.3);
}

/* Light mode - dark border from Figma design */
[data-theme="light"] .sidebar,
[data-theme="ampaera-light"] .sidebar {
  background-color: #F6F7F7;
  border-color: #070909;
}

/* Dark mode - override inline defaults with !important */
[data-theme="dark"] .sidebar,
[data-theme="ampaera-dark"] .sidebar {
  background-color: oklch(var(--b1)) !important;
  border-color: oklch(var(--bc) / 0.3) !important;
}

/* ============================================
   Sidebar Initial State (prevents flash)
   Uses data-sidebar attribute set before Alpine loads
   ============================================ */

/* Initial sidebar width based on data attribute (before Alpine hydrates) */
[data-sidebar="expanded"] .sidebar {
  width: 12rem; /* 192px - matches w-48 */
}

[data-sidebar="collapsed"] .sidebar {
  width: 60px; /* matches w-[60px] */
}

/* Initial text visibility based on data attribute */
[data-sidebar="collapsed"] .sidebar-text {
  opacity: 0;
  width: 0;
  overflow: hidden;
  position: absolute;
}

[data-sidebar="expanded"] .sidebar-text {
  opacity: 1;
}

/* Initial toggle arrow visibility based on data attribute (before Alpine hydrates) */
[data-sidebar="collapsed"] .sidebar-arrow-collapse {
  display: none;
}

[data-sidebar="expanded"] .sidebar-arrow-expand {
  display: none;
}

/* Heading styles - Arimo Bold from Figma */
.text-h1, h1 {
  font-family: var(--font-family-heading);
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: 1.15;
}

.text-h2, h2 {
  font-family: var(--font-family-heading);
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: 1.15;
}

.text-sh1 {
  font-size: var(--text-sh1);
  font-weight: 500;
  line-height: 1.3;
}

.text-sh2 {
  font-size: var(--text-sh2);
  font-weight: 500;
  line-height: 1.2;
}

.text-p1 {
  font-family: var(--font-family-body);
  font-size: var(--text-p1);
  font-weight: 500;
  line-height: 1.2;
}

.text-p2 {
  font-family: var(--font-family-body);
  font-size: var(--text-p2);
  font-weight: 500;
  line-height: 1.2;
}

/* Menu item text - Archivo Narrow Regular 400, #352A22 brown */
.menu-text {
  font-family: var(--font-family-menu);
  font-weight: 400;
  font-size: 1.125rem;  /* 18px - adjusted from Figma 25px */
  line-height: 1.35;
  color: #352A22;
}

/* Dark mode menu text - light color */
[data-theme="dark"] .menu-text,
[data-theme="ampaera-dark"] .menu-text {
  color: oklch(var(--bc));
}

/* Smaller menu text for collapsed state or secondary items */
.menu-text-sm {
  font-family: var(--font-family-menu);
  font-weight: 500;
  font-size: 1.125rem;  /* 18px */
  line-height: 1.35;
}

/* Menu text when selected/active - adds underline */
.menu-text-active {
  font-family: var(--font-family-menu);
  font-weight: 400;
  font-size: 1.125rem;  /* 18px - matches .menu-text */
  line-height: 1.35;
  border-bottom: 2px solid var(--ampaera-orange);
  padding-bottom: 2px;
}

/* ============================================
   Button Overrides (from Figma specs)
   ============================================ */

/* Base button styles - Arimo Bold from Figma */
/* Scoped to our themes for proper specificity over DaisyUI defaults */
/* Note: Do NOT set 'display' here - it breaks Tailwind's lg:hidden etc. */
[data-theme="light"] .btn,
[data-theme="dark"] .btn,
[data-theme="ampaera-light"] .btn,
[data-theme="ampaera-dark"] .btn {
  font-family: var(--font-family-heading);
  font-weight: 700;
  border-radius: 4px;
  border-width: 2px;
  height: auto;
  min-height: auto;
  padding: 0.5rem 1.5rem;
  box-shadow: 4px 5px 0 #100C08;
  margin-bottom: 5px;
  margin-right: 4px;
  text-align: center;
  line-height: 1.2;
  vertical-align: middle;
  transition: transform var(--transition-fast),
              background-color var(--transition-fast),
              box-shadow var(--transition-fast);
}

[data-theme="light"] .btn:active,
[data-theme="dark"] .btn:active,
[data-theme="ampaera-light"] .btn:active,
[data-theme="ampaera-dark"] .btn:active {
  box-shadow: 2px 3px 0 #100C08;
}

/* Primary button - Orange #FF9408 with black border */
[data-theme="light"] .btn-primary,
[data-theme="ampaera-light"] .btn-primary {
  background-color: #FF9408;
  border: 2px solid #000000;
  color: #141111;
}

[data-theme="light"] .btn-primary:hover,
[data-theme="ampaera-light"] .btn-primary:hover {
  background-color: var(--ampaera-orange-dark);
  border-color: #000000;
  color: #141111;
  transform: scale(1.02);
}

[data-theme="light"] .btn-primary:active,
[data-theme="ampaera-light"] .btn-primary:active {
  transform: scale(0.98);
}

/* Secondary button - Light gray #F3F4F4 with black border */
[data-theme="light"] .btn-secondary,
[data-theme="ampaera-light"] .btn-secondary {
  background-color: #F3F4F4;
  border: 2px solid #000000;
  color: #141111;
}

[data-theme="light"] .btn-secondary:hover,
[data-theme="ampaera-light"] .btn-secondary:hover {
  background-color: #E5E6E6;
  border-color: #000000;
  color: #141111;
  transform: scale(1.02);
}

[data-theme="light"] .btn-secondary:active,
[data-theme="ampaera-light"] .btn-secondary:active {
  transform: scale(0.98);
}

/* Ghost button - text only, no background or border */
[data-theme="light"] .btn-ghost,
[data-theme="ampaera-light"] .btn-ghost {
  background-color: transparent;
  border: none;
  box-shadow: none;
  color: #141111;
}

[data-theme="light"] .btn-ghost:hover,
[data-theme="ampaera-light"] .btn-ghost:hover {
  background-color: oklch(var(--b3) / 0.5);
  color: #141111;
}

/* Outline variant - transparent with black border */
[data-theme="light"] .btn-outline,
[data-theme="ampaera-light"] .btn-outline {
  background-color: transparent;
  border: 2px solid #000000;
  color: #141111;
}

[data-theme="light"] .btn-outline:hover,
[data-theme="ampaera-light"] .btn-outline:hover {
  background-color: #F3F4F4;
  border-color: #000000;
  color: #141111;
}

/* Dark mode button styles */
[data-theme="dark"] .btn-primary,
[data-theme="ampaera-dark"] .btn-primary {
  background-color: #FF9408;
  border: 2px solid #000000;
  color: #141111;
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="ampaera-dark"] .btn-primary:hover {
  background-color: var(--ampaera-orange-dark);
  transform: scale(1.02);
}

[data-theme="dark"] .btn-secondary,
[data-theme="ampaera-dark"] .btn-secondary {
  background-color: oklch(var(--b2));
  border: 2px solid oklch(var(--bc) / 0.3);
  color: oklch(var(--bc));
}

[data-theme="dark"] .btn-secondary:hover,
[data-theme="ampaera-dark"] .btn-secondary:hover {
  background-color: oklch(var(--b3));
  transform: scale(1.02);
}

[data-theme="dark"] .btn-ghost,
[data-theme="ampaera-dark"] .btn-ghost {
  background-color: transparent;
  border: none;
  box-shadow: none;
  color: oklch(var(--bc));
}

[data-theme="dark"] .btn-ghost:hover,
[data-theme="ampaera-dark"] .btn-ghost:hover {
  background-color: oklch(var(--b3) / 0.5);
}

[data-theme="dark"] .btn-outline,
[data-theme="ampaera-dark"] .btn-outline {
  background-color: transparent;
  border: 2px solid oklch(var(--bc));
  color: oklch(var(--bc));
}

[data-theme="dark"] .btn-outline:hover,
[data-theme="ampaera-dark"] .btn-outline:hover {
  background-color: oklch(var(--b3));
}

/* ============================================
   Sidebar Component
   ============================================ */

/* Note: Sidebar layout uses Tailwind inline classes + Alpine.js dynamic classes.
   These minimal overrides support the sidebar component. */

.sidebar-item {
  /* Base styles for consistent rendering */
  font-family: var(--font-family-menu);
  overflow: visible;
}

/* Ensure sidebar nav doesn't clip icon drop shadows */
.sidebar nav,
.sidebar ul,
.sidebar li {
  overflow: visible;
}

/* Sidebar menu icons - fixed size for consistent alignment */
/* Menu: 60px, icon: 40x40, padding for drop shadow space
   All icons shifted 3px left to leave room for active drop shadow */
.sidebar-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  flex-shrink: 0;
  margin-left: -3px;
}

/* Active sidebar icon - same size and position, with drop shadow */
.sidebar-icon-active {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  flex-shrink: 0;
  margin-left: -3px;
  margin-right: 3px;
  margin-bottom: 3px;
  filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.25));
}

/* Note: Layout utilities use Tailwind flex classes inline.
   Empty states and form components use DaisyUI + Tailwind inline. */

/* Note: Mobile sidebar uses Alpine.js translate-x classes and fixed positioning inline.
   Responsive adjustments handled via Tailwind's lg: breakpoint prefix. */

/* Note: Animation utilities use Tailwind's built-in animate-* classes. */

/* ============================================
   HTMX Utilities
   ============================================ */

/* Alpine.js cloak - hide until initialized */
[x-cloak] {
  display: none !important;
}

/* HTMX loading indicator */
.htmx-indicator {
  opacity: 0;
  transition: opacity 200ms ease-in;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

/* Smooth page transitions */
.htmx-swapping {
  opacity: 0;
  transition: opacity 100ms ease-out;
}

/* Demo mode indicators */
.simulated-data {
  position: relative;
}

.simulated-data::after {
  content: 'SIM';
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 0.5rem;
  font-weight: bold;
  background: oklch(var(--wa));
  color: oklch(var(--wac));
  padding: 1px 4px;
  border-radius: 4px;
  opacity: 0.8;
}

.simulated-data-subtle {
  border-left: 3px solid oklch(var(--wa));
}

.simulated-data-badge::before {
  content: '\1F3AD '; /* 🎭 emoji */
}

/* ============================================
   Landing Page Buttons
   Large CTA buttons for landing/login/register pages
   ============================================ */

.btn-landing {
  font-family: var(--font-family-heading);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.5vw, 2.1875rem);
  padding: 1rem 2.5rem;
  min-width: 220px;
  min-height: 60px;
  border-radius: 4px;
  border: 2px solid #000000;
  box-shadow: 8px 10px 0 #100C08;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  vertical-align: middle;
  margin-bottom: 10px;
  margin-right: 8px;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}

/* Spinner inside landing buttons - position absolutely so it doesn't affect text centering */
.btn-landing .htmx-indicator {
  position: absolute;
  left: 1rem;
}

.btn-landing:hover {
  transform: scale(1.02);
}

.btn-landing:active {
  transform: scale(0.98);
  box-shadow: 4px 5px 0 #100C08;
}

.btn-landing-primary {
  background-color: var(--ampaera-orange);
  color: #141111;
}

.btn-landing-primary:hover {
  background-color: var(--ampaera-orange-dark);
}

.btn-landing-active {
  background-color: #070909;
  border-color: #070909;
  color: #FFFFFF;
}

.btn-landing-active:hover {
  background-color: #1a1a1a;
}

.btn-landing-secondary {
  background-color: #C7CCCC;
  color: #141111;
}

.btn-landing-secondary:hover {
  background-color: #B0B5B5;
}

/* ============================================
   Timeline Chart Custom Tooltip
   ============================================ */

.timeline-custom-tooltip {
  background: oklch(var(--b1));
  border: 1px solid oklch(var(--bc) / 0.2);
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 4px 12px oklch(0 0 0 / 0.15);
  font-size: 13px;
  min-width: 180px;
  max-width: 280px;
  z-index: 1000;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.timeline-custom-tooltip .tooltip-title {
  font-weight: 600;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid oklch(var(--bc) / 0.1);
  color: oklch(var(--bc));
}

.timeline-custom-tooltip .tooltip-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

.timeline-custom-tooltip .tooltip-label {
  color: oklch(var(--bc) / 0.7);
}

.timeline-custom-tooltip .tooltip-value {
  font-weight: 500;
  color: oklch(var(--bc));
}

.timeline-custom-tooltip .tooltip-tag {
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 3px;
  background: oklch(var(--wa) / 0.2);
  color: oklch(var(--wa));
  margin-left: 4px;
}

.timeline-custom-tooltip .tooltip-breakdown {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid oklch(var(--bc) / 0.1);
}

.timeline-custom-tooltip .breakdown-table {
  width: 100%;
  font-size: 12px;
}

.timeline-custom-tooltip .breakdown-table td {
  padding: 2px 0;
}

.timeline-custom-tooltip .breakdown-color span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 6px;
}

.timeline-custom-tooltip .breakdown-name {
  color: oklch(var(--bc) / 0.8);
}

.timeline-custom-tooltip .breakdown-power {
  text-align: right;
  font-weight: 500;
  padding-left: 8px;
}

.timeline-custom-tooltip .breakdown-pct {
  text-align: right;
  color: oklch(var(--bc) / 0.5);
  padding-left: 4px;
  min-width: 32px;
}

/* ============================================
   Timeline Page Styles
   ============================================ */

/* Timeline container and scrolling */
.timeline-container {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
}

.timeline-scroll {
  min-width: 100%;
  width: max-content;
}

/* Timeline grid lines */
.timeline-grid {
  background-image: repeating-linear-gradient(
    90deg,
    oklch(var(--b3)) 0px,
    oklch(var(--b3)) 1px,
    transparent 1px,
    transparent 60px
  );
}

/* Now indicator - dynamically positioned */
.now-indicator {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: oklch(var(--p));
  z-index: 20;
  transition: left 0.5s linear;
}

.now-indicator::before {
  content: attr(data-label);
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.625rem;
  font-weight: bold;
  color: oklch(var(--p));
  background: oklch(var(--b1));
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

/* Data boundary indicator */
.data-boundary {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: repeating-linear-gradient(
    0deg,
    oklch(var(--wa)) 0px,
    oklch(var(--wa)) 4px,
    transparent 4px,
    transparent 8px
  );
  z-index: 15;
}

.data-boundary::before {
  content: attr(data-label);
  position: absolute;
  top: -20px;
  left: 4px;
  font-size: 0.625rem;
  color: oklch(var(--wa));
  white-space: nowrap;
}

/* Action bar on timeline */
.action-bar {
  position: absolute;
  height: 32px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.action-bar:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 30;
}

/* Device type colors */
.action-bar.water-heater {
  background: linear-gradient(90deg, oklch(var(--su)) 0%, oklch(var(--su)/0.7) 100%);
  color: oklch(var(--suc));
}

.action-bar.ev-charger {
  background: linear-gradient(90deg, oklch(var(--in)) 0%, oklch(var(--in)/0.7) 100%);
  color: oklch(var(--inc));
}

.action-bar.unknown-device {
  background: linear-gradient(90deg, oklch(var(--n)) 0%, oklch(var(--n)/0.7) 100%);
  color: oklch(var(--nc));
}

/* Past action styling (already executed) */
.action-bar.past-action {
  opacity: 0.6;
  border: 2px solid oklch(var(--su));
}

.action-bar.past-action::before {
  content: '✓';
  margin-right: 4px;
  font-weight: bold;
}

/* Future action styling */
.action-bar.future-action {
  opacity: 1;
  border: 2px dashed oklch(var(--b3));
}

/* Price chart area */
.price-usage-chart-container {
  height: 400px;
  position: relative;
  cursor: grab;
}

.price-usage-chart-container:active {
  cursor: grabbing;
}

/* Legacy timeline tooltip (for non-chart tooltips) */
.timeline-tooltip {
  position: fixed;
  z-index: 100;
  background: oklch(var(--b1));
  border: 1px solid oklch(var(--b3));
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  max-width: 300px;
  pointer-events: none;
}

/* ============================================
   Auth Form Styles (prevents Tailwind JIT flash)
   ============================================ */

/* Auth page form inputs - light mode */
.auth-input {
  background-color: #C7CCCC;
  border-color: #707171;
}

/* Auth page form inputs - dark mode */
[data-theme="dark"] .auth-input,
[data-theme="ampaera-dark"] .auth-input {
  background-color: oklch(var(--b2));
  border-color: oklch(var(--bc) / 0.3);
}

/* Active menu item orange underline */
.menu-item-active-border {
  border-bottom: 2px solid var(--ampaera-orange);
}