/* ==========================================================================
   MeterTrack Pro · Precision OS (macOS Sequoia HIG Inspired)
   Design System: HydroMetric Precision (DESIGN.md)
   Author: n-paul | Havířov, CZ
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

/* --------------------------------------------------------------------------
   1. Design Tokens & CSS Custom Properties (Light Mode Default)
   -------------------------------------------------------------------------- */
:root {
  --surface: #faf9fe;
  --surface-dim: #dad9df;
  --surface-bright: #faf9fe;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f4f3f8;
  --surface-container: #eeedf3;
  --surface-container-high: #e9e7ed;
  --surface-container-highest: #e3e2e7;

  --on-surface: #1a1b1f;
  --on-surface-variant: #414754;
  --outline: #717786;
  --outline-variant: #c0c6d6;

  --primary: #005ab3;
  --primary-container: #0073e0;
  --on-primary: #ffffff;
  --on-primary-container: #fefcff;
  --primary-fixed: #d6e3ff;
  --primary-fixed-dim: #aac7ff;
  --on-primary-fixed: #001b3e;

  --secondary: #ba0910;
  --secondary-container: #de2d26;
  --on-secondary: #ffffff;
  --secondary-fixed: #ffdad5;
  --secondary-fixed-dim: #ffb4aa;

  --tertiary: #845000;
  --tertiary-container: #a66600;
  --on-tertiary: #ffffff;
  --tertiary-fixed: #ffddbb;
  --electric: #6b4fbb;
  --heat: #a8326e;

  --success: #27c93f;
  --error: #ba1a1a;
  --error-container: #ffdad6;

  --background: #faf9fe;
  --on-background: #1a1b1f;

  /* RGB channels for Tailwind dynamic opacity */
  --surface-rgb: 250, 249, 254;
  --surface-dim-rgb: 218, 217, 223;
  --surface-bright-rgb: 250, 249, 254;
  --surface-container-lowest-rgb: 255, 255, 255;
  --surface-container-low-rgb: 244, 243, 248;
  --surface-container-rgb: 238, 237, 243;
  --surface-container-high-rgb: 233, 231, 237;
  --surface-container-highest-rgb: 227, 226, 231;
  --on-surface-rgb: 26, 27, 31;
  --on-surface-variant-rgb: 65, 71, 84;
  --outline-rgb: 113, 119, 134;
  --outline-variant-rgb: 192, 198, 214;
  --primary-rgb: 0, 90, 179;
  --primary-container-rgb: 0, 115, 224;
  --on-primary-rgb: 255, 255, 255;
  --on-primary-container-rgb: 254, 252, 255;
  --primary-fixed-rgb: 214, 227, 255;
  --primary-fixed-dim-rgb: 170, 199, 255;
  --on-primary-fixed-rgb: 0, 27, 62;
  --secondary-rgb: 186, 9, 16;
  --secondary-container-rgb: 222, 45, 38;
  --on-secondary-rgb: 255, 255, 255;
  --secondary-fixed-rgb: 255, 218, 213;
  --secondary-fixed-dim-rgb: 255, 180, 170;
  --tertiary-rgb: 132, 80, 0;
  --tertiary-container-rgb: 166, 102, 0;
  --on-tertiary-rgb: 255, 255, 255;
  --tertiary-fixed-rgb: 255, 221, 187;
  --electric-rgb: 107, 79, 187;
  --heat-rgb: 168, 50, 110;
  --background-rgb: 250, 249, 254;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Menlo", monospace;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 14px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 16px 36px 0 rgba(0, 0, 0, 0.1), 0 4px 12px 0 rgba(0, 0, 0, 0.05);

  /* Radii */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;
}

/* --------------------------------------------------------------------------
   2. Global Reset & Base
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  background-color: var(--surface);
  color: var(--on-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* OpenType Tabular Numerals for Meter Readings */
.tabular-nums, .num, [data-tabular] {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Subtle scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(142, 142, 147, 0.25);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(142, 142, 147, 0.45);
}

/* Material Symbols alignment */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  vertical-align: middle;
  line-height: 1;
  user-select: none;
}
.material-symbols-fill {
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}

/* --------------------------------------------------------------------------
   3. Form Controls & Precision Inputs
   -------------------------------------------------------------------------- */
:where(
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="search"],
  select,
  textarea
) {
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  color: var(--on-surface);
  background-color: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  padding: 7px 11px;
  transition: all 0.15s ease;
}

/* Inputs with icons: ensure icons never overlap text */
.pl-9,
.pl-10,
.input-icon-left,
input.pl-9,
input.pl-10 {
  padding-left: 2.5rem !important; /* 40px: comfortably clears 18px icon at left-3 (12px) */
}

.pr-10,
.input-icon-right,
input.pr-10 {
  padding-right: 2.5rem !important; /* 40px: comfortably clears 18px toggle button at right */
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  background-color: var(--surface-container-lowest);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 90, 179, 0.22);
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
}

/* --------------------------------------------------------------------------
   4. Chart & SVG Aesthetics
   -------------------------------------------------------------------------- */
.bar-chart {
  width: 100%;
  height: auto;
  max-height: 280px;
  overflow: visible;
  font-family: var(--font-sans);
}

.bar-chart .grid-line {
  stroke: var(--outline-variant);
  stroke-opacity: 0.4;
  stroke-dasharray: 4 4;
}

.bar-chart .axis-label {
  fill: var(--on-surface-variant);
  font-size: 11px;
  font-weight: 500;
}

.bar-chart .axis-unit {
  fill: var(--on-surface-variant);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.bar-chart .bar-cold {
  fill: var(--primary);
  opacity: 0.92;
  transition: opacity 0.2s;
}
.bar-chart .bar-cold:hover {
  opacity: 1;
}

.bar-chart .bar-hot {
  fill: var(--secondary);
  opacity: 0.92;
  transition: opacity 0.2s;
}
.bar-chart .bar-hot:hover {
  opacity: 1;
}

/* Gas has its own chart; hot-water sources sit next to TUV, so they get lighter shades of the warm palette. */
.bar-chart .bar-gas,
.legend-gas {
  fill: var(--tertiary);
  background: var(--tertiary);
}
.bar-chart .bar-exchanger,
.legend-exchanger {
  fill: var(--secondary);
  background: var(--secondary);
  opacity: 0.45;
}
.bar-chart .bar-boiler,
.legend-boiler {
  fill: var(--tertiary-container);
  background: var(--tertiary-container);
  opacity: 0.7;
}
.bar-chart .bar-electricity,
.legend-electricity {
  fill: var(--electric);
  background: var(--electric);
}
.bar-chart .bar-heat,
.legend-heat {
  fill: var(--heat);
  background: var(--heat);
}
/* Tailwind takes the light hex from its config; the new energy tones need a readable shade on dark surfaces. */
html.dark .text-electric {
  color: var(--electric);
}
html.dark .text-heat {
  color: var(--heat);
}
.legend-cold {
  background: var(--primary);
}
.legend-hot {
  background: var(--secondary);
}

/* --------------------------------------------------------------------------
   5. Lightbox Modal
   -------------------------------------------------------------------------- */
dialog.lightbox {
  padding: 0;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  background: var(--surface-container-lowest);
  color: var(--on-surface);
  box-shadow: var(--shadow-lg);
  max-width: 90vw;
  max-height: 90vh;
  outline: none;
}

dialog.lightbox::backdrop {
  background: rgba(15, 16, 21, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

dialog.lightbox img {
  display: block;
  max-width: 85vw;
  max-height: 70vh;
  object-fit: contain;
  border-bottom: 1px solid var(--outline-variant);
}

/* --------------------------------------------------------------------------
   6. Cohesive Dark Mode (When explicitly toggled by user)
   -------------------------------------------------------------------------- */
html.dark,
:root[data-theme="dark"] {
  --surface: #0f1015;
  --surface-dim: #15161d;
  --surface-bright: #1b1c24;
  --surface-container-lowest: #181920;
  --surface-container-low: #1e1f28;
  --surface-container: #232430;
  --surface-container-high: #2a2c3a;
  --surface-container-highest: #333546;

  --on-surface: #f1f0f5;
  --on-surface-variant: #a2a7b5;
  --outline: #6a7082;
  --outline-variant: #2e313d;

  --primary: #0A84FF;
  --primary-container: #0073e0;
  --on-primary: #ffffff;
  --on-primary-container: #ffffff;
  --primary-fixed: #1e3250;
  --primary-fixed-dim: #14233c;
  --on-primary-fixed: #d6e3ff;

  --secondary: #FF453A;
  --secondary-container: #8c0c11;
  --on-secondary: #ffffff;
  --secondary-fixed: #501419;
  --secondary-fixed-dim: #3c0f14;
  --on-secondary-fixed: #ffdada;

  --tertiary: #FF9F0A;
  --tertiary-container: #a66600;
  --on-tertiary: #ffffff;
  --tertiary-fixed: #462d0a;
  --on-tertiary-fixed: #ffddbb;
  --electric: #B69DF8;
  --heat: #FF7AB8;

  --background: #0f1015;
  --on-background: #f1f0f5;

  /* RGB channels for Tailwind dynamic opacity */
  --surface-rgb: 15, 16, 21;
  --surface-dim-rgb: 21, 22, 29;
  --surface-bright-rgb: 27, 28, 36;
  --surface-container-lowest-rgb: 24, 25, 32;
  --surface-container-low-rgb: 30, 31, 40;
  --surface-container-rgb: 35, 36, 48;
  --surface-container-high-rgb: 42, 44, 58;
  --surface-container-highest-rgb: 51, 53, 70;
  --on-surface-rgb: 241, 240, 245;
  --on-surface-variant-rgb: 162, 167, 181;
  --outline-rgb: 106, 112, 130;
  --outline-variant-rgb: 46, 49, 61;
  --primary-rgb: 10, 132, 255;
  --primary-container-rgb: 0, 115, 224;
  --on-primary-rgb: 255, 255, 255;
  --on-primary-container-rgb: 255, 255, 255;
  --primary-fixed-rgb: 30, 50, 80;
  --primary-fixed-dim-rgb: 20, 35, 60;
  --on-primary-fixed-rgb: 214, 227, 255;
  --secondary-rgb: 255, 69, 58;
  --secondary-container-rgb: 140, 12, 17;
  --on-secondary-rgb: 255, 255, 255;
  --secondary-fixed-rgb: 80, 20, 25;
  --secondary-fixed-dim-rgb: 60, 15, 20;
  --tertiary-rgb: 255, 159, 10;
  --tertiary-container-rgb: 166, 102, 0;
  --on-tertiary-rgb: 255, 255, 255;
  --tertiary-fixed-rgb: 70, 45, 10;
  --electric-rgb: 182, 157, 248;
  --heat-rgb: 255, 122, 184;
  --background-rgb: 15, 16, 21;
}

html.dark body {
  background-color: #0f1015 !important;
  color: #f1f0f5 !important;
}

html.dark header,
html.dark header[class*="bg-surface"] {
  background-color: rgba(22, 23, 31, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark aside {
  background-color: rgba(20, 21, 28, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark main {
  background-color: #0f1015 !important;
}

html.dark input,
html.dark select,
html.dark textarea {
  background-color: #1e1f28 !important;
  color: #f1f0f5 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark option {
  background-color: #1e1f28 !important;
  color: #f1f0f5 !important;
}

html.dark footer,
html.dark footer[class*="bg-surface"] {
  background-color: rgba(22, 23, 31, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark dialog {
  background-color: #181920 !important;
  color: #f1f0f5 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark table thead tr {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark table tbody tr {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* --------------------------------------------------------------------------
   7. Print Styles
   -------------------------------------------------------------------------- */
@media print {
  header, aside, .header-controls, .no-print, button {
    display: none !important;
  }
  body, main {
    padding: 0 !important;
    background: #ffffff !important;
    color: #000000 !important;
  }
  .pl-64, .lg\:pl-64 {
    padding-left: 0 !important;
  }
  .pt-14 {
    padding-top: 0 !important;
  }
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid #ccc !important;
    padding: 6px 10px !important;
  }
}

/* Filtered rows/cards use the hidden attribute; Tailwind display utilities (flex, grid) would otherwise keep them visible. */
[hidden] { display: none !important; }