/* ========================================
   OROS Mission Control - Premium Design System
   Professionelles OROS Energy Farbschema mit dynamischer Theme-Umschaltung
   ======================================== */

/* ===== LOCAL FONTS (DSGVO-konform, keine externen Quellen) ===== */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-variable.woff2") format("woff2");
}

/* === REMOVE ALL BOXES AROUND HEADINGS === */
h1, h2, h3, h4, h5, h6 {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}

h1:focus,
h1:focus-visible,
h1:active,
h2:focus,
h2:focus-visible,
h2:active,
h3:focus,
h3:focus-visible,
h3:active,
h4:focus,
h4:focus-visible,
h4:active,
h5:focus,
h5:focus-visible,
h5:active,
h6:focus,
h6:focus-visible,
h6:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}

h1::selection,
h1::-moz-selection,
h2::selection,
h2::-moz-selection,
h3::selection,
h3::-moz-selection,
h4::selection,
h4::-moz-selection,
h5::selection,
h5::-moz-selection,
h6::selection,
h6::-moz-selection {
  background: transparent !important;
  color: inherit !important;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Hide any stray toggle/switch artifacts in cards */
.rct-glass-card-dark > input[type="checkbox"],
.rct-glass-card > input[type="checkbox"] {
  display: none !important;
}

:root {
  /* === OROS Energy Brand Colors (per Brand Kit) === */
  --oros-white: #FFFFFF;
  --oros-black: #000000;
  --oros-gray-dark: #52525b;
  --oros-primary: #0256dc;
  --oros-primary-hover: #3b7de8;
  --oros-primary-light: #dbeafe;
  --oros-primary-dark: #1e3a5f;
  --oros-secondary: #c4a64f;
  --oros-gray-light: #f4f4f5;
  
  /* === Erweiterte Farbpalette (Zinc per Brand Kit) === */
  --oros-gray-darker: #27272a;
  --oros-gray-medium: #71717a;
  --oros-gray-lighter: #fafafa;
  --oros-background: #ffffff;
  
  /* === Premium Background System === */
  --oros-gradient-primary: linear-gradient(135deg, #1e293b 0%, #374151 50%, #1f2937 100%);
  --oros-gradient-overlay-light: rgba(0, 0, 0, 0.3);
  --oros-gradient-overlay-blue: radial-gradient(circle at 30% 30%, rgba(59, 130, 246, 0.08) 0%, transparent 50%);
  --oros-gradient-overlay-green: radial-gradient(circle at 70% 70%, rgba(16, 185, 129, 0.08) 0%, transparent 50%);
  --oros-gradient-overlay-yellow: radial-gradient(circle at 50% 50%, rgba(251, 191, 36, 0.03) 0%, transparent 70%);
  
  /* === Schatten und Transparenzen === */
  --oros-shadow-light: 0 2px 8px rgba(2, 86, 220, 0.08);
  --oros-shadow-medium: 0 4px 16px rgba(2, 86, 220, 0.12);
  --oros-shadow-strong: 0 8px 24px rgba(2, 86, 220, 0.16);
  --oros-shadow-card: 0 2px 12px rgba(88, 89, 91, 0.1);
  
  /* === Typography === */
  --oros-font-family: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --oros-font-weight-light: 300;
  --oros-font-weight-regular: 400;
  --oros-font-weight-medium: 500;
  --oros-font-weight-semibold: 600;
  --oros-font-weight-bold: 700;
  --oros-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* === Spacing System === */
  --oros-spacing-xs: 4px;
  --oros-spacing-sm: 8px;
  --oros-spacing-md: 16px;
  --oros-spacing-lg: 24px;
  --oros-spacing-xl: 32px;
  --oros-spacing-xxl: 48px;
  
  /* === Border Radius === */
  --oros-radius-sm: 6px;
  --oros-radius-md: 12px;
  --oros-radius-lg: 16px;
  --oros-radius-xl: 24px;
  
  /* === Status Colors (per Brand Kit) === */
  --oros-success: #16a34a;
  --oros-warning: #eab308;
  --oros-danger: #dc2626;
  --oros-info: #3b82f6;
  --oros-eco-green: #16a34a;
  
  /* === Safe Areas === */
  --oros-safe-area-top: env(safe-area-inset-top, 0px);
  --oros-safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --oros-safe-area-left: env(safe-area-inset-left, 0px);
  --oros-safe-area-right: env(safe-area-inset-right, 0px);
}

/* === GLOBAL PREMIUM BACKGROUND SYSTEM === */

/* Premium Background - anwendbar auf jede Seite */
.rct-premium-background {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: linear-gradient(135deg, #1e293b 0%, #374151 50%, #1f2937 100%) !important;
  background-image: url('_content/Experior.Solutions.OrOs.Ems.Ui/background.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  z-index: -2 !important;
  pointer-events: none !important;
}

.rct-premium-background::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.3) !important;
  z-index: 1 !important;
}

.rct-premium-background::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: radial-gradient(circle at 30% 30%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
              radial-gradient(circle at 70% 70%, rgba(16, 185, 129, 0.08) 0%, transparent 50%),
              radial-gradient(circle at 50% 50%, rgba(251, 191, 36, 0.03) 0%, transparent 70%) !important;
  z-index: 2 !important;
}

/* Content Container mit Premium Background */
.rct-content-with-background {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  width: 100%;
}

/* Glass-Effect für Karten über dem Premium Background */
.rct-glass-card {
  background: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important;
  color: white !important;
}

/* Glass-Effect für dunkle Karten */
.rct-glass-card-dark {
  background: rgba(6, 9, 16, 0.78) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: white !important;
  box-shadow: 0 14px 48px rgba(0, 0, 0, 0.5) !important;
}

/* === Monospace Numeric Display === */
.oros-mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace !important;
  font-variant-numeric: tabular-nums !important;
}

/* Dark Glass Form Inputs - Override Browser Defaults */
.rct-dark-input,
.rct-glass-card-dark input:not([type="checkbox"]):not([type="radio"]),
.rct-glass-card-dark select,
.rct-glass-card-dark textarea,
input.rct-dark-input,
select.rct-dark-input,
textarea.rct-dark-input {
  background-color: rgba(255, 255, 255, 0.05) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: white !important;
  border-radius: 0.5rem;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.rct-dark-input:focus,
.rct-glass-card-dark input:not([type="checkbox"]):not([type="radio"]):focus,
.rct-glass-card-dark select:focus,
.rct-glass-card-dark textarea:focus {
  border-color: rgba(59, 130, 246, 0.5) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25) !important;
}

.rct-dark-input::placeholder,
.rct-glass-card-dark input::placeholder,
.rct-glass-card-dark textarea::placeholder {
  color: rgba(156, 163, 175, 0.6) !important;
}

/* Header mit Premium Background */
.rct-header-with-background {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* === THEME: Dark Mode (uses Preline .dark class on <html>) === */
.dark {
  --oros-background: #000000;
  --oros-white: #18181b;
  --oros-black: #fafafa;
  --oros-gray-dark: #fafafa;
  --oros-gray-light: #27272a;
  --oros-gray-lighter: #18181b;
  --oros-gray-medium: #a1a1aa;
  --oros-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.5);
  --oros-shadow-light: 0 2px 8px rgba(0, 0, 0, 0.3);
  --oros-shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.4);
  --oros-shadow-strong: 0 8px 24px rgba(0, 0, 0, 0.6);
}

/* === Global Styles === */
* {
  box-sizing: border-box;
}

html, body {
  font-family: var(--oros-font-family);
  font-weight: var(--oros-font-weight-regular);
  background-color: transparent !important;
  color: var(--oros-gray-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  line-height: 1.5;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Chart labels - light mode */
.apexcharts-xaxis text,
.apexcharts-yaxis text,
.apexcharts-legend-text,
.apexcharts-text,
.apexcharts-title-text,
.apexcharts-subtitle-text,
.apexcharts-datalabels text,
.apexcharts-tooltip-title,
.apexcharts-tooltip-text-y-label,
.apexcharts-tooltip-text-y-value {
  fill: rgba(0, 0, 0, 0.75) !important;
  color: rgba(0, 0, 0, 0.75) !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.apexcharts-yaxis-title,
.apexcharts-xaxis-title {
  fill: rgba(0, 0, 0, 0.6) !important;
  color: rgba(0, 0, 0, 0.6) !important;
}

/* Chart labels - dark mode */
.dark .apexcharts-xaxis text,
.dark .apexcharts-yaxis text,
.dark .apexcharts-legend-text,
.dark .apexcharts-text,
.dark .apexcharts-title-text,
.dark .apexcharts-subtitle-text,
.dark .apexcharts-datalabels text,
.dark .apexcharts-tooltip-title,
.dark .apexcharts-tooltip-text-y-label,
.dark .apexcharts-tooltip-text-y-value {
  fill: rgba(255, 255, 255, 0.85) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

.dark .apexcharts-yaxis-title,
.dark .apexcharts-xaxis-title {
  fill: rgba(255, 255, 255, 0.7) !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

@media (min-width: 1024px) {
  .hs-dropdown[data-rct-hover-persist="true"]:hover .hs-dropdown-menu,
  .hs-dropdown[data-rct-hover-persist="true"]:focus-within .hs-dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* === Root Layout mit Premium Background === */
#root, 
.app-root {
  position: relative;
  background: transparent !important;
  font-family: var(--oros-font-family);
}

/* === Layout Structure === */
.mobile-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  background: transparent !important;
  position: relative;
  z-index: 1;
}

.desktop-layout {
  display: none;
  background: transparent !important;
  position: relative;
  z-index: 1;
}

@media (min-width: 992px) {
  .mobile-layout {
    display: none;
  }
  
  .desktop-layout {
    display: block;
    height: 100vh;
    width: 100vw;
  }
}

/* === Header === */
.mobile-header {
  flex-shrink: 0;
  z-index: 1000;
  background: var(--oros-white) !important;
  box-shadow: var(--oros-shadow-card);
}

.mobile-header .rct-toolbar {
  --background: var(--oros-white) !important;
  --color: var(--oros-gray-dark) !important;
  --border-color: transparent;
  padding-top: var(--oros-safe-area-top);
  min-height: calc(56px + var(--oros-safe-area-top));
}

.mobile-header .rct-title {
  font-weight: var(--oros-font-weight-semibold);
  font-size: 1.1rem;
  color: var(--oros-gray-dark) !important;
  display: flex;
  align-items: center;
}

/* === Main Content === */
.main-content {
  flex: 1;
  overflow-y: auto;
  background: var(--oros-background) !important;
  --padding-start: var(--oros-spacing-md);
  --padding-end: var(--oros-spacing-md);
  --padding-top: var(--oros-spacing-md);
  --padding-bottom: calc(var(--oros-spacing-md) + var(--oros-safe-area-bottom));
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* === Menu Styling === */
.rct-menu {
  --background: var(--oros-white) !important;
}

.rct-menu .rct-header .rct-toolbar {
  --background: var(--oros-primary);
  --color: var(--oros-white);
  border-bottom: none;
}

.rct-menu .rct-title {
  font-weight: var(--oros-font-weight-bold);
  font-size: 1.2rem;
  color: var(--oros-white);
  display: flex;
  align-items: center;
}

.rct-menu .rct-content {
  --background: var(--oros-white) !important;
  --padding-start: 0;
  --padding-end: 0;
}

/* === RCT Navigation Menu - Korrigierte Farben === */
.rct-nav-menu {
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--oros-white) !important;
  color: var(--oros-gray-dark) !important;
}

/* Section Titles - Lesbar machen */
.nav-section {
  margin-bottom: 16px;
}

.nav-section-title {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--oros-gray-medium) !important;
  background: var(--oros-gray-lighter) !important;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 12px 24px 8px;
  margin: 0;
  border-bottom: 1px solid var(--oros-gray-light);
}

/* Navigation Items - Korrekte Kontraste */
.nav-item {
  --background: transparent !important;
  --color: var(--oros-gray-dark) !important;
  --border-color: transparent !important;
  --padding-start: 20px !important;
  --padding-end: 20px !important;
  --min-height: 48px !important;
  margin: 2px 8px !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
  font-weight: 500 !important;
  border: none !important;
}

.nav-item:hover {
  --background: var(--oros-primary-light) !important;
  --color: var(--oros-primary) !important;
  transform: translateX(4px);
}

.nav-item.selected,
.nav-item[aria-current="page"] {
  --background: var(--oros-primary) !important;
  --color: var(--oros-white) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(2, 86, 220, 0.3);
}

/* Icons - Sichtbare Farben */
.nav-item .rct-icon {
  color: var(--oros-primary) !important;
  font-size: 1.2rem !important;
  margin-right: 12px !important;
}

.nav-item:hover .rct-icon {
  color: var(--oros-primary) !important;
}

.nav-item.selected .rct-icon,
.nav-item[aria-current="page"] .rct-icon {
  color: var(--oros-white) !important;
}

/* Labels - Lesbare Schrift */
.nav-item .rct-label {
  color: inherit !important;
  font-size: 0.95rem !important;
  font-weight: inherit !important;
}

/* Badges */
.rct-nav-menu ion-badge {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
}

/* Lists - Transparent */
.nav-section .rct-list {
  background: transparent !important;
  padding: 0 !important;
}

/* Footer - Korrekte Farben */
.nav-footer {
  margin-top: auto;
  padding: 20px;
  border-top: 1px solid var(--oros-gray-light) !important;
  background: var(--oros-gray-lighter) !important;
}

.nav-footer-content {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.nav-footer-logo {
  width: 28px;
  height: auto;
  margin-right: 12px;
  filter: none !important;
}

.nav-footer-title {
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  color: var(--oros-gray-dark) !important;
  margin: 0;
}

.nav-footer-subtitle {
  font-size: 0.7rem !important;
  color: var(--oros-gray-medium) !important;
  margin: 0;
}

.nav-footer-version {
  font-size: 0.65rem !important;
  color: var(--oros-gray-medium) !important;
  text-align: center;
  font-weight: 500 !important;
}

/* Dark Theme Adjustments for Navigation */
.theme-dark .nav-footer-logo,
.ion-palette-dark .nav-footer-logo {
  filter: brightness(0) invert(1) !important;
}

/* === Welcome Card === */
.welcome-card {
  background: linear-gradient(135deg, var(--oros-primary) 0%, var(--oros-primary-dark) 100%) !important;
  color: var(--oros-white);
  margin-bottom: var(--oros-spacing-lg);
  box-shadow: var(--oros-shadow-strong);
}

.welcome-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--oros-spacing-lg) 0;
}

.welcome-text {
  flex: 1;
}

.welcome-title {
  font-size: 2.2rem;
  font-weight: var(--oros-font-weight-bold);
  margin: 0 0 var(--oros-spacing-sm);
  color: var(--oros-white);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.welcome-subtitle {
  font-size: 1.1rem;
  font-weight: var(--oros-font-weight-regular);
  margin: 0 0 var(--oros-spacing-md);
  opacity: 0.95;
  color: var(--oros-white);
}

.system-status {
  display: flex;
  align-items: center;
  gap: var(--oros-spacing-md);
  flex-wrap: wrap;
}

.status-chip {
  --background: rgba(255, 255, 255, 0.12);
  --color: var(--oros-white);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.last-update {
  font-size: 0.8rem;
  opacity: 0.9;
  color: var(--oros-white);
  background: rgba(255, 255, 255, 0.15);
  padding: var(--oros-spacing-xs) var(--oros-spacing-sm);
  border-radius: var(--oros-radius-sm);
}

.welcome-logo {
  margin-left: var(--oros-spacing-lg);
  flex-shrink: 0;
}

.dashboard-logo {
  height: 64px;
  width: auto;
  filter: brightness(0) invert(1);
  drop-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* === Status Cards === */
.status-card {
  background: var(--oros-white) !important;
  border-radius: var(--oros-radius-md);
  padding: var(--oros-spacing-lg);
  margin: var(--oros-spacing-xs);
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid var(--oros-gray-light);
  position: relative;
  overflow: hidden;
  box-shadow: var(--oros-shadow-light);
}

.status-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--oros-primary);
}

.status-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--oros-shadow-medium);
  border-color: var(--oros-primary-light);
}

.status-icon {
  font-size: 2.8rem !important;
  margin-bottom: var(--oros-spacing-sm) !important;
  color: var(--oros-primary);
  display: block;
}

.status-card h2 {
  color: var(--oros-gray-dark) !important;
  font-weight: var(--oros-font-weight-bold);
  font-size: 1.8rem;
  margin: var(--oros-spacing-sm) 0 var(--oros-spacing-xs);
  line-height: 1.2;
}

.status-card p {
  color: var(--oros-gray-medium) !important;
  font-weight: var(--oros-font-weight-medium);
  font-size: 0.8rem;
  margin: 0 0 var(--oros-spacing-sm);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.status-trend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--oros-spacing-xs);
  font-size: 0.75rem;
  color: var(--oros-success);
  font-weight: var(--oros-font-weight-semibold);
}

.trend-value {
  color: var(--oros-success);
}

.battery-status,
.efficiency-meter,
.grid-status {
  font-size: 0.7rem;
  font-weight: var(--oros-font-weight-medium);
  padding: var(--oros-spacing-xs) var(--oros-spacing-sm);
  border-radius: var(--oros-radius-sm);
  display: inline-block;
  text-transform: none;
  letter-spacing: normal;
}

.battery-status {
  background: rgba(52, 199, 89, 0.15);
  color: var(--oros-success);
  border: 1px solid rgba(52, 199, 89, 0.3);
}

.efficiency-meter {
  background: rgba(0, 122, 255, 0.15);
  color: var(--oros-info);
  border: 1px solid rgba(0, 122, 255, 0.3);
}

.grid-status {
  font-weight: var(--oros-font-weight-semibold);
}

.grid-status.positive {
  background: rgba(52, 199, 89, 0.15);
  color: var(--oros-success);
  border: 1px solid rgba(52, 199, 89, 0.3);
}

.grid-status.negative {
  background: rgba(255, 149, 0, 0.15);
  color: var(--oros-warning);
  border: 1px solid rgba(255, 149, 0, 0.3);
}

/* === Metric Cards === */
.metric-card {
  background: var(--oros-white) !important;
  border: 1px solid var(--oros-gray-light);
  border-radius: var(--oros-radius-md);
  padding: var(--oros-spacing-lg);
  margin: var(--oros-spacing-xs);
  transition: all 0.3s ease;
  box-shadow: var(--oros-shadow-light);
  display: flex;
  align-items: flex-start;
  gap: var(--oros-spacing-md);
}

.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--oros-shadow-medium);
  border-color: var(--oros-primary-light);
}

.metric-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--oros-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.generation-metric .metric-icon {
  background: rgba(255, 193, 7, 0.15);
  color: #FFC107;
  border: 1px solid rgba(255, 193, 7, 0.3);
}

.consumption-metric .metric-icon {
  background: rgba(0, 122, 255, 0.15);
  color: var(--oros-info);
  border: 1px solid rgba(0, 122, 255, 0.3);
}

.savings-metric .metric-icon {
  background: rgba(52, 199, 89, 0.15);
  color: var(--oros-success);
  border: 1px solid rgba(52, 199, 89, 0.3);
}

.environmental-metric .metric-icon {
  background: rgba(40, 167, 69, 0.15);
  color: var(--oros-eco-green);
  border: 1px solid rgba(40, 167, 69, 0.3);
}

.metric-icon .rct-icon {
  font-size: 1.5rem;
}

.metric-content {
  flex: 1;
}

.metric-content h3 {
  font-size: 1.6rem;
  font-weight: var(--oros-font-weight-bold);
  margin: 0 0 var(--oros-spacing-xs);
  color: var(--oros-gray-dark) !important;
}

.metric-content p {
  font-size: 0.8rem;
  color: var(--oros-gray-medium) !important;
  margin: 0 0 var(--oros-spacing-sm);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: var(--oros-font-weight-semibold);
}

.metric-progress {
  margin-top: var(--oros-spacing-sm);
}

.progress-bar {
  width: 100%;
  height: 6px;
  background: var(--oros-gray-light);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: var(--oros-spacing-xs);
}

.progress-fill {
  height: 100%;
  background: var(--oros-primary);
  border-radius: 3px;
  transition: width 0.5s ease;
}

.consumption-fill {
  background: var(--oros-info);
}

.progress-text {
  font-size: 0.7rem;
  color: var(--oros-gray-medium) !important;
  font-weight: var(--oros-font-weight-medium);
}

.metric-highlight {
  display: flex;
  align-items: center;
  gap: var(--oros-spacing-xs);
  font-size: 0.75rem;
  color: var(--oros-gray-medium) !important;
  margin-top: var(--oros-spacing-xs);
  font-weight: var(--oros-font-weight-medium);
}

/* === Quick Actions === */
.quick-actions {
  display: flex;
  flex-direction: column;
  gap: var(--oros-spacing-sm);
}

.action-button {
  --border-radius: var(--oros-radius-md);
  font-weight: var(--oros-font-weight-medium);
  text-transform: none;
  height: 48px;
  font-size: 0.95rem;
}

/* === Theme Toggle Button === */
.theme-toggle {
  --color: var(--oros-gray-dark);
  transition: all 0.3s ease;
  border-radius: var(--oros-radius-sm);
}

.theme-toggle:hover {
  --color: var(--oros-primary);
  transform: scale(1.1);
  --background: var(--oros-primary-light);
}

.theme-toggle-menu {
  --color: var(--oros-white);
}

.theme-selector-menu,
.theme-selector-desktop {
  padding: var(--oros-spacing-lg);
  border-top: 1px solid var(--oros-gray-light);
  margin-top: auto;
  background: var(--oros-gray-lighter) !important;
}

.theme-selector-title {
  display: flex;
  align-items: center;
  gap: var(--oros-spacing-sm);
  font-size: 0.85rem;
  font-weight: var(--oros-font-weight-semibold);
  color: var(--oros-gray-dark) !important;
  margin-bottom: var(--oros-spacing-md);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.theme-options {
  display: flex;
  flex-direction: column;
  gap: var(--oros-spacing-xs);
}

.theme-option {
  --border-radius: var(--oros-radius-sm);
  font-size: 0.85rem;
  height: 36px;
  text-transform: none;
  transition: all 0.2s ease;
}

.theme-option:hover {
  transform: translateY(-1px);
}

/* === Mobile Responsive === */
@media (max-width: 768px) {
  .main-content {
    --padding-start: var(--oros-spacing-sm);
    --padding-end: var(--oros-spacing-sm);
    --padding-top: var(--oros-spacing-sm);
  }
  
  .rct-card {
    margin: var(--oros-spacing-sm) var(--oros-spacing-xs);
  }
  
  .status-card {
    padding: var(--oros-spacing-md);
  }
  
  .status-card h2 {
    font-size: 1.5rem;
  }
  
  .status-icon {
    font-size: 2.2rem !important;
  }
  
  .metric-card {
    padding: var(--oros-spacing-md);
    flex-direction: column;
    text-align: center;
  }
  
  .metric-icon {
    margin: 0 auto var(--oros-spacing-sm);
  }
  
  .welcome-content {
    flex-direction: column;
    text-align: center;
  }
  
  .welcome-logo {
    margin: var(--oros-spacing-lg) 0 0 0;
  }
  
  .dashboard-logo {
    height: 48px;
  }
  
  .welcome-title {
    font-size: 1.8rem;
  }
  
  .system-status {
    flex-direction: column;
    gap: var(--oros-spacing-sm);
  }
  
  .theme-selector-menu {
    padding: var(--oros-spacing-md);
  }
  
  .theme-options {
    flex-direction: row;
    gap: var(--oros-spacing-xs);
  }
  
  .theme-option {
    flex: 1;
    font-size: 0.75rem;
  }
  
  /* Mobile NavMenu Styles */
  .nav-section-title {
    padding: 8px 16px 6px;
    font-size: 0.65rem;
  }
  
  .nav-item {
    --padding-start: 16px !important;
    --padding-end: 16px !important;
    margin: 1px 4px !important;
    --min-height: 44px !important;
  }
  
  .nav-item .rct-icon {
    font-size: 1.1rem !important;
    margin-right: 10px !important;
  }
  
  .nav-item .rct-label {
    font-size: 0.9rem !important;
  }
  
  .nav-footer {
    padding: 16px;
  }
  
  .nav-footer-logo {
    width: 24px;
  }
}

@media (max-width: 480px) {
  .main-content {
    --padding-start: var(--oros-spacing-xs);
    --padding-end: var(--oros-spacing-xs);
  }
  
  .rct-card {
    margin: var(--oros-spacing-xs);
  }
  
  .status-card,
  .metric-card {
    padding: var(--oros-spacing-sm);
  }
  
  .status-card h2 {
    font-size: 1.3rem;
  }
  
  .welcome-title {
    font-size: 1.5rem;
  }
  
  .welcome-subtitle {
    font-size: 1rem;
  }
  
  .dashboard-logo {
    height: 40px;
  }
}

/* === Weather Card Styles (Forecast Page) === */
.weather-card {
  background: var(--oros-white) !important;
  border: 1px solid var(--oros-gray-light);
  border-radius: var(--oros-radius-md);
  padding: var(--oros-spacing-lg);
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: var(--oros-shadow-light);
}

.weather-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--oros-shadow-medium);
}

.weather-icon {
  font-size: 2.5rem;
  margin-bottom: var(--oros-spacing-sm);
  color: var(--oros-primary);
}

.weather-card h3 {
  font-size: 1.8rem;
  font-weight: var(--oros-font-weight-bold);
  margin: var(--oros-spacing-sm) 0 var(--oros-spacing-xs);
  color: var(--oros-gray-dark) !important;
}

.weather-card p {
  font-size: 0.8rem;
  color: var(--oros-gray-medium) !important;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.forecast-card {
  background: var(--oros-white) !important;
  border: 1px solid var(--oros-gray-light);
  border-radius: var(--oros-radius-md);
  padding: var(--oros-spacing-lg);
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: var(--oros-shadow-light);
}

.forecast-card h4 {
  font-size: 0.9rem;
  color: var(--oros-gray-medium) !important;
  margin: 0 0 var(--oros-spacing-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.forecast-card h3 {
  font-size: 1.6rem;
  font-weight: var(--oros-font-weight-bold);
  margin: 0 0 var(--oros-spacing-xs);
  color: var(--oros-gray-dark) !important;
}

.confidence {
  font-size: 0.75rem;
  color: var(--oros-success);
  font-weight: var(--oros-font-weight-semibold);
  background: rgba(52, 199, 89, 0.15);
  padding: var(--oros-spacing-xs) var(--oros-spacing-sm);
  border-radius: var(--oros-radius-sm);
  display: inline-block;
  margin-top: var(--oros-spacing-xs);
}

.trend {
  font-size: 0.75rem;
  color: var(--oros-info);
  font-weight: var(--oros-font-weight-semibold);
  background: rgba(0, 122, 255, 0.15);
  padding: var(--oros-spacing-xs) var(--oros-spacing-sm);
  border-radius: var(--oros-radius-sm);
  display: inline-block;
  margin-top: var(--oros-spacing-xs);
}

.forecast-days {
  display: flex;
  gap: var(--oros-spacing-md);
  overflow-x: auto;
  padding: var(--oros-spacing-sm) 0;
}

.day-forecast {
  flex: 0 0 auto;
  min-width: 140px;
  background: var(--oros-gray-lighter);
  border-radius: var(--oros-radius-md);
  padding: var(--oros-spacing-md);
  text-align: center;
  border: 1px solid var(--oros-gray-light);
}

.day-header h4 {
  font-size: 0.9rem;
  font-weight: var(--oros-font-weight-semibold);
  margin: 0 0 var(--oros-spacing-xs);
  color: var(--oros-gray-dark) !important;
}

.day-header p {
  font-size: 0.8rem;
  color: var(--oros-gray-medium) !important;
  margin: 0 0 var(--oros-spacing-sm);
}

.day-weather {
  margin: var(--oros-spacing-sm) 0;
}

.day-weather .rct-icon {
  font-size: 2rem;
  color: var(--oros-primary);
  margin-bottom: var(--oros-spacing-xs);
}

.day-temp {
  display: flex;
  justify-content: space-between;
  margin-top: var(--oros-spacing-xs);
}

.temp-high {
  font-weight: var(--oros-font-weight-bold);
  color: var(--oros-gray-dark);
}

.temp-low {
  color: var(--oros-gray-medium);
}

.day-solar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--oros-spacing-xs);
  margin-top: var(--oros-spacing-sm);
  font-size: 0.85rem;
  color: var(--oros-primary);
  font-weight: var(--oros-font-weight-semibold);
}

.weather-actions {
  margin-top: var(--oros-spacing-lg);
}

/* === Alert Styles (Alerts Page) === */
.alert-summary-card {
  background: var(--oros-white) !important;
  border-radius: var(--oros-radius-md);
  padding: var(--oros-spacing-lg);
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid var(--oros-gray-light);
  position: relative;
  overflow: hidden;
  box-shadow: var(--oros-shadow-light);
}

.alert-summary-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}

.alert-summary-card.critical::before {
  background: var(--oros-danger);
}

.alert-summary-card.warning::before {
  background: var(--oros-warning);
}

.alert-summary-card.info::before {
  background: var(--oros-info);
}

.alert-summary-card.success::before {
  background: var(--oros-success);
}

.alert-summary-card .rct-icon {
  font-size: 2.5rem;
  margin-bottom: var(--oros-spacing-sm);
}

.alert-summary-card.critical .rct-icon {
  color: var(--oros-danger);
}

.alert-summary-card.warning .rct-icon {
  color: var(--oros-warning);
}

.alert-summary-card.info .rct-icon {
  color: var(--oros-info);
}

.alert-summary-card.success .rct-icon {
  color: var(--oros-success);
}

.alert-summary-card h3 {
  font-size: 1.8rem;
  font-weight: var(--oros-font-weight-bold);
  margin: 0 0 var(--oros-spacing-xs);
  color: var(--oros-gray-dark) !important;
}

.alert-summary-card p {
  font-size: 0.8rem;
  color: var(--oros-gray-medium) !important;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.alert-item {
  --background: var(--oros-white) !important;
  --border-color: var(--oros-gray-light);
  margin: var(--oros-spacing-xs) 0;
  border-radius: var(--oros-radius-sm);
  transition: all 0.2s ease;
}

.alert-item.alert-critical {
  --border-color: var(--oros-danger);
  border-left: 4px solid var(--oros-danger);
}

.alert-item.alert-warning {
  --border-color: var(--oros-warning);
  border-left: 4px solid var(--oros-warning);
}

.alert-item.alert-info {
  --border-color: var(--oros-info);
  border-left: 4px solid var(--oros-info);
}

.alert-content {
  display: flex;
  align-items: center;
  margin-right: var(--oros-spacing-md);
}

.alert-icon {
  font-size: 1.5rem;
}

.alert-timestamp {
  font-size: 0.75rem !important;
  color: var(--oros-gray-medium) !important;
  margin-top: var(--oros-spacing-xs) !important;
}

.alert-actions {
  display: flex;
  gap: var(--oros-spacing-xs);
}

.no-alerts {
  text-align: center;
  padding: var(--oros-spacing-xxl);
}

.no-alerts .rct-icon {
  font-size: 4rem;
  margin-bottom: var(--oros-spacing-md);
}

.no-alerts h3 {
  font-size: 1.3rem;
  font-weight: var(--oros-font-weight-semibold);
  margin: 0 0 var(--oros-spacing-sm);
  color: var(--oros-gray-dark) !important;
}

.report-item {
  --background: var(--oros-white) !important;
  --border-color: var(--oros-gray-light);
  margin: var(--oros-spacing-xs) 0;
  border-radius: var(--oros-radius-sm);
  transition: all 0.2s ease;
  border: 1px solid var(--oros-gray-light);
}

.report-item:hover {
  --background: var(--oros-gray-lighter) !important;
  border-color: var(--oros-primary-light);
}

.report-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--oros-radius-md);
  background: rgba(2, 86, 220, 0.15);
  margin-right: var(--oros-spacing-md);
}

.report-icon .rct-icon {
  font-size: 1.5rem;
}

.report-meta {
  font-size: 0.75rem !important;
  color: var(--oros-gray-medium) !important;
  margin-top: var(--oros-spacing-xs) !important;
}

.report-actions {
  display: flex;
  gap: var(--oros-spacing-xs);
}

.report-template-card {
  background: var(--oros-white) !important;
  border: 1px solid var(--oros-gray-light);
  border-radius: var(--oros-radius-md);
  padding: var(--oros-spacing-lg);
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.report-template-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--oros-shadow-medium);
  border-color: var(--oros-primary-light);
}

.template-header {
  display: flex;
  align-items: center;
  gap: var(--oros-spacing-sm);
  margin-bottom: var(--oros-spacing-md);
}

.template-header .rct-icon {
  font-size: 1.5rem;
}

.template-header h4 {
  font-size: 1.1rem;
  font-weight: var(--oros-font-weight-semibold);
  margin: 0;
  color: var(--oros-gray-dark) !important;
}

.report-template-card p {
  flex: 1;
  font-size: 0.85rem;
  color: var(--oros-gray-medium) !important;
  line-height: 1.4;
  margin: 0 0 var(--oros-spacing-md);
}

.template-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.template-period {
  font-size: 0.75rem;
  color: var(--oros-gray-medium);
  background: var(--oros-gray-lighter);
  padding: var(--oros-spacing-xs) var(--oros-spacing-sm);
  border-radius: var(--oros-radius-sm);
}

.no-reports {
  text-align: center;
  padding: var(--oros-spacing-xxl);
}

.no-reports .rct-icon {
  font-size: 4rem;
  margin-bottom: var(--oros-spacing-md);
}

.no-reports h3 {
  font-size: 1.3rem;
  font-weight: var(--oros-font-weight-semibold);
  margin: 0 0 var(--oros-spacing-sm);
  color: var(--oros-gray-dark) !important;
}

/* === Inverter Styles (Inverter Page) === */
.parameter-section {
  background: var(--oros-gray-lighter);
  border-radius: var(--oros-radius-md);
  padding: var(--oros-spacing-lg);
  border: 1px solid var(--oros-gray-light);
}

.parameter-section h4 {
  font-size: 1.1rem;
  font-weight: var(--oros-font-weight-semibold);
  margin: 0 0 var(--oros-spacing-md);
  color: var(--oros-gray-dark) !important;
}

.parameter-section .rct-list {
  background: transparent;
}

.parameter-section .rct-item {
  --background: transparent !important;
  --border-color: transparent;
}

.performance-card {
  background: var(--oros-white) !important;
  border: 1px solid var(--oros-gray-light);
  border-radius: var(--oros-radius-md);
  padding: var(--oros-spacing-lg);
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: var(--oros-shadow-light);
}

.performance-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--oros-shadow-medium);
}

.performance-card h4 {
  font-size: 0.8rem;
  color: var(--oros-gray-medium) !important;
  margin: 0 0 var(--oros-spacing-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.performance-card h3 {
  font-size: 1.6rem;
  font-weight: var(--oros-font-weight-bold);
  margin: 0 0 var(--oros-spacing-xs);
  color: var(--oros-gray-dark) !important;
}

.performance-card p {
  font-size: 0.85rem;
  color: var(--oros-gray-medium) !important;
  margin: 0 0 var(--oros-spacing-sm);
}

.trend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--oros-spacing-xs);
  font-size: 0.75rem;
  font-weight: var(--oros-font-weight-semibold);
}

.trend.positive {
  color: var(--oros-success);
}

.trend.negative {
  color: var(--oros-danger);
}

.operating-hours {
  font-size: 0.75rem;
  color: var(--oros-gray-medium);
  margin-top: var(--oros-spacing-xs);
}

.efficiency-indicator, .temperature-indicator {
  font-size: 0.75rem;
  font-weight: var(--oros-font-weight-semibold);
  padding: var(--oros-spacing-xs) var(--oros-spacing-sm);
  border-radius: var(--oros-radius-sm);
  display: inline-block;
  margin-top: var(--oros-spacing-xs);
}

.efficiency-indicator.excellent, .temperature-indicator.normal {
  background: rgba(52, 199, 89, 0.15);
  color: var(--oros-success);
}

.efficiency-indicator.good, .temperature-indicator.elevated {
  background: rgba(255, 149, 0, 0.15);
  color: var(--oros-warning);
}

.efficiency-indicator.poor, .temperature-indicator.critical {
  background: rgba(255, 59, 48, 0.15);
  color: var(--oros-danger);
}

.status-ok {
  border-color: var(--oros-success) !important;
}

.status-ok::before {
  background: var(--oros-success) !important;
}

.status-warning {
  border-color: var(--oros-warning) !important;
}

.status-warning::before {
  background: var(--oros-warning) !important;
}

.status-error {
  border-color: var(--oros-danger) !important;
}

.status-error::before {
  background: var(--oros-danger) !important;
}

.diagnostic-item {
  --background: var(--oros-white) !important;
  --border-color: var(--oros-gray-light);
  margin: var(--oros-spacing-xs) 0;
  border-radius: var(--oros-radius-sm);
  border: 1px solid var(--oros-gray-light);
}

.diagnostic-timestamp {
  font-size: 0.75rem !important;
  color: var(--oros-gray-medium) !important;
  margin-top: var(--oros-spacing-xs) !important;
}

/* === Theme-specific enhancements === */

/* Improve dark theme readability */
.theme-dark .weather-card,
.theme-dark .forecast-card,
.theme-dark .alert-summary-card,
.theme-dark .report-template-card,
.theme-dark .performance-card,
.theme-dark .parameter-section {
  border-color: var(--oros-gray-light);
  background: var(--oros-white) !important;
}

.theme-dark .day-forecast {
  background: var(--oros-gray-light);
  border-color: var(--oros-gray-medium);
}

.theme-dark .no-alerts,
.theme-dark .no-reports {
  color: var(--oros-gray-medium);
}

/* Mobile Responsive for new components */
@media (max-width: 768px) {
  .forecast-days {
    gap: var(--oros-spacing-sm);
  }
  
  .day-forecast {
    min-width: 120px;
    padding: var(--oros-spacing-sm);
  }
  
  .alert-actions,
  .report-actions {
    flex-direction: column;
    gap: var(--oros-spacing-xs);
  }
  
  .template-footer {
    flex-direction: column;
    gap: var(--oros-spacing-sm);
    align-items: stretch;
  }
  
  .weather-card,
  .forecast-card,
  .alert-summary-card,
  .report-template-card,
  .performance-card {
    padding: var(--oros-spacing-md);
  }
  
  .parameter-section {
    padding: var(--oros-spacing-md);
  }
}

/* === Onboarding Styles === */
.onboarding-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--oros-spacing-lg);
  background: linear-gradient(135deg, var(--oros-background) 0%, var(--oros-gray-lighter) 100%);
}

.onboarding-step {
  max-width: 800px;
  width: 100%;
  background: var(--oros-white);
  border-radius: var(--oros-radius-lg);
  padding: var(--oros-spacing-xxl);
  box-shadow: var(--oros-shadow-strong);
  text-align: center;
  transition: var(--oros-theme-transition);
}

.onboarding-header {
  margin-bottom: 10px;
}

.onboarding-logo {
  height: 80px;
  width: auto;
  margin-bottom: var(--oros-spacing-lg);
  filter: none;
}

.onboarding-header h1 {
  font-size: 2.5rem;
  font-weight: var(--oros-font-weight-bold);
  color: var(--oros-gray-dark);
  margin: 0 0 var(--oros-spacing-md);
}

.onboarding-header p {
  font-size: 1.2rem;
  color: var(--oros-gray-medium);
  margin: 0;
  line-height: 1.5;
}

.onboarding-content {
  margin-bottom: var(--oros-spacing-xxl);
}

.onboarding-actions {
  display: flex;
  gap: var(--oros-spacing-md);
  justify-content: center;
}

.onboarding-actions .rct-button {
  min-width: 150px;
}

/* Welcome Benefits */
.welcome-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--oros-spacing-xl);
  margin: var(--oros-spacing-xxl) 0;
}

.benefit-item {
  text-align: center;
  padding: var(--oros-spacing-lg);
  border-radius: var(--oros-radius-md);
  background: var(--oros-gray-lighter);
  border: 1px solid var(--oros-gray-light);
  transition: all 0.3s ease;
}

.benefit-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--oros-shadow-medium);
}

.benefit-item .rct-icon {
  font-size: 3rem;
  margin-bottom: var(--oros-spacing-md);
}

.benefit-item h3 {
  font-size: 1.3rem;
  font-weight: var(--oros-font-weight-semibold);
  color: var(--oros-gray-dark);
  margin: 0 0 var(--oros-spacing-sm);
}

.benefit-item p {
  font-size: 0.95rem;
  color: var(--oros-gray-medium);
  margin: 0;
  line-height: 1.4;
}

/* User Type Selection */
.user-type-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--oros-spacing-xl);
  margin: var(--oros-spacing-xl) 0;
}

.user-type-card {
  padding: var(--oros-spacing-xl);
  border: 2px solid var(--oros-gray-light);
  border-radius: var(--oros-radius-lg);
  background: var(--oros-white);
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
}

.user-type-card:hover {
  border-color: var(--oros-primary-light);
  transform: translateY(-2px);
  box-shadow: var(--oros-shadow-medium);
}

.user-type-card.selected {
  border-color: var(--oros-primary);
  background: var(--oros-primary-light);
  box-shadow: var(--oros-shadow-strong);
}

.user-type-card .rct-icon {
  font-size: 3rem;
  margin-bottom: var(--oros-spacing-md);
}

.user-type-card h3 {
  font-size: 1.4rem;
  font-weight: var(--oros-font-weight-bold);
  color: var(--oros-gray-dark);
  margin: 0 0 var(--oros-spacing-sm);
}

.user-type-card p {
  font-size: 1rem;
  color: var(--oros-gray-medium);
  margin: 0 0 var(--oros-spacing-md);
  line-height: 1.5;
}

.user-type-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.user-type-card li {
  font-size: 0.9rem;
  color: var(--oros-gray-dark);
  margin: var(--oros-spacing-xs) 0;
  position: relative;
  padding-left: var(--oros-spacing-lg);
}

.user-type-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--oros-primary);
  font-weight: bold;
}

/* Priorities Grid */
.priorities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--oros-spacing-lg);
  margin: var(--oros-spacing-xl) 0;
}

.priority-card {
  padding: var(--oros-spacing-lg);
  border: 2px solid var(--oros-gray-light);
  border-radius: var(--oros-radius-lg);
  background: var(--oros-white);
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.priority-card:hover {
  border-color: var(--oros-primary-light);
  transform: translateY(-2px);
  box-shadow: var(--oros-shadow-medium);
}

.priority-card.selected {
  border-color: var(--oros-primary);
  background: var(--oros-primary-light);
  box-shadow: var(--oros-shadow-strong);
}

.priority-card .rct-icon {
  font-size: 2.5rem;
  margin-bottom: var(--oros-spacing-md);
}

.priority-card h3 {
  font-size: 1.2rem;
  font-weight: var(--oros-font-weight-semibold);
  color: var(--oros-gray-dark);
  margin: 0 0 var(--oros-spacing-sm);
}

.priority-card p {
  font-size: 0.9rem;
  color: var(--oros-gray-medium);
  margin: 0;
  line-height: 1.4;
}

/* Priorities Summary */
.priorities-summary {
  margin-top: var(--oros-spacing-xl);
  padding: var(--oros-spacing-lg);
  background: var(--oros-gray-lighter);
  border-radius: var(--oros-radius-md);
}

.priorities-summary h4 {
  font-size: 1.1rem;
  font-weight: var(--oros-font-weight-semibold);
  color: var(--oros-gray-dark);
  margin: 0 0 var(--oros-spacing-md);
}

.selected-priorities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--oros-spacing-sm);
  justify-content: center;
}

.priority-chip {
  background: var(--oros-primary);
  color: var(--oros-white);
  padding: var(--oros-spacing-xs) var(--oros-spacing-md);
  border-radius: var(--oros-radius-lg);
  font-size: 0.85rem;
  font-weight: var(--oros-font-weight-medium);
}

/* Customization Preview */
.customization-preview {
  text-align: left;
  max-width: 600px;
  margin: 0 auto;
}

.preview-section {
  margin-bottom: var(--oros-spacing-xl);
  padding: var(--oros-spacing-lg);
  background: var(--oros-gray-lighter);
  border-radius: var(--oros-radius-md);
  border-left: 4px solid var(--oros-primary);
}

.preview-section h3 {
  font-size: 1.2rem;
  font-weight: var(--oros-font-weight-semibold);
  color: var(--oros-gray-dark);
  margin: 0 0 var(--oros-spacing-md);
  display: flex;
  align-items: center;
  gap: var(--oros-spacing-sm);
}

.preview-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.preview-section li {
  font-size: 0.95rem;
  color: var(--oros-gray-medium);
  margin: var(--oros-spacing-xs) 0;
  position: relative;
  padding-left: var(--oros-spacing-lg);
}

.preview-section li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--oros-primary);
  font-weight: bold;
}

.priority-preview {
  display: flex;
  flex-wrap: wrap;
  gap: var(--oros-spacing-md);
}

.priority-preview-item {
  display: flex;
  align-items: center;
  gap: var(--oros-spacing-sm);
  background: var(--oros-white);
  padding: var(--oros-spacing-sm) var(--oros-spacing-md);
  border-radius: var(--oros-radius-md);
  border: 1px solid var(--oros-gray-light);
}

/* Progress Indicator */
.onboarding-progress {
  position: fixed;
  bottom: var(--oros-spacing-lg);
  left: 50%;
  transform: translateX(-50%);
  background: var(--oros-white);
  padding: var(--oros-spacing-md) var(--oros-spacing-lg);
  border-radius: var(--oros-radius-lg);
  box-shadow: var(--oros-shadow-medium);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--oros-spacing-sm);
  min-width: 200px;
}

.progress-bar {
  width: 100%;
  height: 6px;
  background: var(--oros-gray-light);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: var(--oros-spacing-xs);
}

.progress-fill {
  height: 100%;
  background: var(--oros-primary);
  border-radius: 3px;
  transition: width 0.5s ease;
}

.progress-text {
  font-size: 0.8rem;
  color: var(--oros-gray-medium);
  font-weight: var(--oros-font-weight-medium);
}

/* User Profile Section in Menu */
.user-profile-section {
  padding: var(--oros-spacing-lg);
  border-top: 1px solid var(--oros-gray-light);
  border-bottom: 1px solid var(--oros-gray-light);
  background: var(--oros-gray-lighter);
  margin: var(--oros-spacing-lg) 0;
}

.user-profile-section.desktop {
  margin: var(--oros-spacing-md) var(--oros-spacing-lg);
  border-radius: var(--oros-radius-md);
}

.user-profile-info {
  display: flex;
  align-items: center;
  gap: var(--oros-spacing-md);
  margin-bottom: var(--oros-spacing-md);
}

.user-avatar {
  font-size: 2.5rem;
  color: var(--oros-primary);
}

.user-details h4 {
  font-size: 1rem;
  font-weight: var(--oros-font-weight-semibold);
  color: var(--oros-gray-dark);
  margin: 0 0 var(--oros-spacing-xs);
}

.user-details p {
  font-size: 0.8rem;
  color: var(--oros-gray-medium);
  margin: 0;
  line-height: 1.3;
}

/* Priority-based menu sections */
.priority-section {
  border-left: 3px solid var(--oros-primary);
  background: rgba(2, 86, 220, 0.05);
}

.priority-section .nav-section-title {
  background: rgba(2, 86, 220, 0.1);
  color: var(--oros-primary);
  display: flex;
  align-items: center;
  gap: var(--oros-spacing-sm);
}

.expert-section {
  border-left: 3px solid var(--oros-gray-medium);
  background: rgba(139, 148, 158, 0.05);
}

.expert-section .nav-section-title {
  background: rgba(139, 148, 158, 0.1);
  color: var(--oros-gray-medium);
  display: flex;
  align-items: center;
  gap: var(--oros-spacing-sm);
}

/* Mobile Responsive for Onboarding */
@media (max-width: 768px) {
  .onboarding-container {
    padding: var(--oros-spacing-md);
  }
  
  .onboarding-step {
    padding: var(--oros-spacing-lg);
  }
  
  .onboarding-header h1 {
    font-size: 2rem;
  }
  
  .onboarding-header p {
    font-size: 1rem;
  }
  
  .welcome-benefits {
    grid-template-columns: 1fr;
    gap: var(--oros-spacing-lg);
  }
  
  .user-type-options {
    grid-template-columns: 1fr;
    gap: var(--oros-spacing-lg);
  }
  
  .priorities-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--oros-spacing-md);
  }
  
  .onboarding-actions {
    flex-direction: column;
  }
  
  .selected-priorities {
    justify-content: flex-start;
  }
  
  .user-profile-section {
    padding: var(--oros-spacing-md);
  }
  
  .user-avatar {
    font-size: 2rem;
  }
  
  .user-details h4 {
    font-size: 0.9rem;
  }
  
  .user-details p {
    font-size: 0.75rem;
  }
}

@media (max-width: 480px) {
  .onboarding-step {
    padding: var(--oros-spacing-md);
  }
  
  .onboarding-header h1 {
    font-size: 1.6rem;
  }
  
  .priorities-grid {
    grid-template-columns: 1fr;
  }
  
  .priority-preview {
    flex-direction: column;
    align-items: stretch;
  }
  
  .progress-text {
    font-size: 0.7rem;
  }
}

/* === Priority Stats Cards === */
.priority-stats-card {
  margin-bottom: var(--oros-spacing-lg) !important;
  background: linear-gradient(135deg, var(--oros-primary-light) 0%, var(--oros-white) 100%);
  border: 1px solid var(--oros-primary-light);
}

.priority-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--oros-spacing-lg);
  background: var(--oros-white);
  border-radius: var(--oros-radius-md);
  transition: all 0.3s ease;
  border: 1px solid var(--oros-gray-light);
  box-shadow: var(--oros-shadow-light);
}

.priority-stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--oros-shadow-medium);
}

.priority-stat.cost-savings {
  border-color: var(--oros-success);
}

.priority-stat.independence {
  border-color: var(--oros-warning);
}

.priority-stat.environmental {
  border-color: var(--oros-info);
}

.priority-stat.performance {
  border-color: var(--oros-tertiary);
}

.priority-stat .rct-icon {
  font-size: 2.5rem;
  margin-bottom: var(--oros-spacing-sm);
}

.priority-stat h3 {
  font-size: 1.8rem;
  font-weight: var(--oros-font-weight-bold);
  margin: 0 0 var(--oros-spacing-xs);
  color: var(--oros-gray-dark);
}

.priority-stat p {
  font-size: 0.85rem;
  color: var(--oros-gray-medium);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: var(--oros-font-weight-medium);
}

/* Environmental Highlight */
.environmental-highlight {
  display: flex;
  align-items: center;
  gap: var(--oros-spacing-sm);
  margin-top: var(--oros-spacing-md);
  padding: var(--oros-spacing-sm) var(--oros-spacing-md);
  background: rgba(52, 199, 89, 0.15);
  border-radius: var(--oros-radius-md);
  color: var(--oros-success);
  font-size: 0.9rem;
  font-weight: var(--oros-font-weight-medium);
}

.environmental-highlight .rct-icon {
  font-size: 1.2rem;
}

/* Autarky Indicator */
.autarky-indicator {
  background: rgba(255, 149, 0, 0.15);
  color: var(--oros-warning);
  padding: var(--oros-spacing-xs) var(--oros-spacing-sm);
  border-radius: var(--oros-radius-sm);
  font-size: 0.8rem;
  font-weight: var(--oros-font-weight-semibold);
  margin-top: var(--oros-spacing-xs);
}

.battery-status {
  background: rgba(52, 199, 89, 0.15);
  color: var(--oros-success);
  padding: var(--oros-spacing-xs) var(--oros-spacing-sm);
  border-radius: var(--oros-radius-sm);
  font-size: 0.8rem;
  font-weight: var(--oros-font-weight-semibold);
  margin-top: var(--oros-spacing-xs);
}

/* Quick Actions for Priority Actions */
.quick-actions .action-button {
  margin: var(--oros-spacing-sm) 0;
  --background: var(--oros-white);
  --color: var(--oros-gray-dark);
  --border-color: var(--oros-gray-light);
  transition: all 0.3s ease;
}

.quick-actions .action-button:hover {
  --background: var(--oros-primary-light);
  --border-color: var(--oros-primary);
  --color: var(--oros-primary);
  transform: translateY(-1px);
  box-shadow: var(--oros-shadow-medium);
}

/* Mobile Responsive for Priority Stats */
@media (max-width: 768px) {
  .priority-stat {
    padding: var(--oros-spacing-md);
  }
  
  .priority-stat .rct-icon {
    font-size: 2rem;
  }
  
  .priority-stat h3 {
    font-size: 1.5rem;
  }
  
  .priority-stat p {
    font-size: 0.8rem;
  }
  
  .environmental-highlight {
    font-size: 0.85rem;
    padding: var(--oros-spacing-xs) var(--oros-spacing-sm);
  }
}

@media (max-width: 480px) {
  .priority-stat {
    padding: var(--oros-spacing-sm);
  }
  
  .priority-stat .rct-icon {
    font-size: 1.8rem;
  }
  
  .priority-stat h3 {
    font-size: 1.3rem;
  }
  
  .environmental-highlight {
    flex-direction: column;
    text-align: center;
    gap: var(--oros-spacing-xs);
  }
}

/* === Settings Page Styles === */
.preferences-current {
  margin-bottom: var(--oros-spacing-lg);
}

.preference-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--oros-spacing-lg);
  border: 1px solid var(--oros-gray-light);
  border-radius: var(--oros-radius-md);
  margin-bottom: var(--oros-spacing-md);
  background: var(--oros-white);
}

.preference-info h4 {
  font-size: 1.1rem;
  font-weight: var(--oros-font-weight-semibold);
  color: var(--oros-gray-dark);
  margin: 0 0 var(--oros-spacing-xs);
}

.preference-info p {
  font-size: 0.9rem;
  color: var(--oros-gray-medium);
  margin: 0;
}

.current-priorities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--oros-spacing-xs);
  margin-top: var(--oros-spacing-xs);
}

.priority-chip {
  background: var(--oros-primary);
  color: var(--oros-white);
  padding: var(--oros-spacing-xs) var(--oros-spacing-sm);
  border-radius: var(--oros-radius-lg);
  font-size: 0.75rem;
  font-weight: var(--oros-font-weight-medium);
}

.priority-chip-more {
  background: var(--oros-gray-medium);
  color: var(--oros-white);
  padding: var(--oros-spacing-xs) var(--oros-spacing-sm);
  border-radius: var(--oros-radius-lg);
  font-size: 0.75rem;
  font-weight: var(--oros-font-weight-medium);
}

.preference-actions {
  margin-top: var(--oros-spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--oros-spacing-md);
}

.no-preferences {
  text-align: center;
  padding: var(--oros-spacing-xl);
}

.no-preferences .rct-icon {
  font-size: 4rem;
  margin-bottom: var(--oros-spacing-lg);
}

.no-preferences h3 {
  font-size: 1.3rem;
  font-weight: var(--oros-font-weight-semibold);
  color: var(--oros-gray-dark);
  margin: 0 0 var(--oros-spacing-sm);
}

.no-preferences p {
  font-size: 1rem;
  color: var(--oros-gray-medium);
  margin: 0 0 var(--oros-spacing-lg);
}

/* Priority Toggles */
.priority-toggles {
  margin-top: var(--oros-spacing-lg);
}

.priority-toggles h4 {
  font-size: 1.1rem;
  font-weight: var(--oros-font-weight-semibold);
  color: var(--oros-gray-dark);
  margin: 0 0 var(--oros-spacing-md);
}

.priority-toggles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--oros-spacing-md);
}

.priority-toggle-item {
  display: flex;
  align-items: center;
  gap: var(--oros-spacing-sm);
  padding: var(--oros-spacing-sm);
  border: 1px solid var(--oros-gray-light);
  border-radius: var(--oros-radius-md);
  background: var(--oros-white);
  transition: all 0.2s ease;
}

.priority-toggle-item:hover {
  border-color: var(--oros-primary-light);
  background: var(--oros-primary-light);
}

.priority-label {
  display: flex;
  align-items: center;
  gap: var(--oros-spacing-xs);
  font-size: 0.9rem;
  font-weight: var(--oros-font-weight-medium);
  color: var(--oros-gray-dark);
}

.priority-label .rct-icon {
  font-size: 1.2rem;
}

/* Profile Preferences Section */
.user-preferences {
  margin-bottom: var(--oros-spacing-lg);
}

.preference-summary {
  display: flex;
  flex-direction: column;
  gap: var(--oros-spacing-lg);
}

.current-setup h4 {
  font-size: 1.1rem;
  font-weight: var(--oros-font-weight-semibold);
  color: var(--oros-gray-dark);
  margin: 0 0 var(--oros-spacing-md);
}

.setup-info {
  display: flex;
  flex-direction: column;
  gap: var(--oros-spacing-sm);
}

.setup-item {
  display: flex;
  align-items: center;
  gap: var(--oros-spacing-sm);
  font-size: 0.9rem;
  color: var(--oros-gray-medium);
}

.setup-item .rct-icon {
  font-size: 1.1rem;
}

.setup-item strong {
  color: var(--oros-gray-dark);
  font-weight: var(--oros-font-weight-semibold);
}

/* Mobile Responsive for Settings */
@media (max-width: 768px) {
  .preference-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--oros-spacing-md);
  }
  
  .preference-item .rct-button {
    align-self: stretch;
  }
  
  .priority-toggles-grid {
    grid-template-columns: 1fr;
  }
  
  .preference-summary {
    gap: var(--oros-spacing-md);
  }
}

@media (max-width: 480px) {
  .current-priorities {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .setup-info {
    gap: var(--oros-spacing-xs);
  }
  
  .setup-item {
    font-size: 0.85rem;
  }
}