/* Google Fonts Material Symbols Rounded */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  user-select: none;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-rounded.fill {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-rounded.icon-xs { font-size: 13px; }
.material-symbols-rounded.icon-sm { font-size: 16px; }
.material-symbols-rounded.icon-md { font-size: 20px; }
.material-symbols-rounded.icon-lg { font-size: 24px; }
.material-symbols-rounded.icon-xl { font-size: 32px; }

:root {
  /* Approachable, Clean Light Palette */
  --bg-main: #f8fafc;           /* Slate 50 - Canvas backdrop */
  --bg-surface: #ffffff;        /* Pure White - Surfaces & Cards */
  --bg-surface-elevated: #f1f5f9;/* Slate 100 - Sub-bars, hover states, chips */
  --bg-card: #ffffff;           /* Pure White - Data containers */
  --bg-input: #ffffff;          /* Pure White - Form controls */
  
  --border-subtle: #e2e8f0;     /* Slate 200 - Precision gridlines */
  --border-active: #0284c7;     /* Sky 600 - Focus and selected highlights */
  --border-focus: #0284c7;

  --text-main: #0f172a;         /* Slate 900 - Deep charcoal primary text */
  --text-muted: #475569;        /* Slate 600 - Secondary text */
  --text-dim: #64748b;          /* Slate 500 - Metadata & timestamps */

  --primary: #0284c7;           /* Sky 600 - Friendly primary action */
  --primary-hover: #0369a1;     /* Sky 700 */
  --primary-light: #e0f2fe;     /* Sky 100 */
  --primary-glow: rgba(2, 132, 199, 0.15);

  --accent-cyan: #0284c7;
  --accent-green: #10b981;      /* Emerald 500 - Normal status */
  --accent-amber: #f59e0b;      /* Amber 500 - Warning / Review */
  --accent-rose: #f43f5e;       /* Rose 500 - Flagged / Anomaly */
  --accent-purple: #8b5cf6;     /* Purple 500 */

  /* Utility Meter Badges - Soft Pastels with Crisp Ink */
  --meter-electricity: #b45309; /* Amber 700 */
  --meter-water-cold: #0369a1;  /* Sky 700 */
  --meter-water-hot: #c2410c;   /* Orange 700 */
  --meter-gas: #6d28d9;         /* Purple 700 */
  --meter-heat: #b91c1c;        /* Red 700 */

  /* High-Legibility Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Friendly Elevation & Soft Shadows */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.03);
  --shadow-glow: 0 0 15px rgba(2, 132, 199, 0.15);

  /* Systematic Spacing Scale */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-base: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 40px;

  /* Typography Scale */
  --font-size-2xs: 0.65rem;  /* ~10.5px - micro captions & tags */
  --font-size-xs: 0.75rem;   /* 12px - badges, metadata, table headers */
  --font-size-sm: 0.8125rem; /* 13px - compact inputs, secondary text */
  --font-size-base: 0.875rem;/* 14px - body text, controls, table cells */
  --font-size-md: 0.95rem;   /* 15.2px - card headings, sub-titles */
  --font-size-lg: 1.05rem;   /* 16.8px - section titles, modal titles */
  --font-size-xl: 1.25rem;   /* 20px - page titles */
  --font-size-2xl: 1.5rem;   /* 24px - large KPI values */
  --font-size-3xl: 1.85rem;  /* 29.6px - primary metrics & dials */

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* Layout & Sizing Tokens */
  --topbar-height: 58px;
  --sidebar-width: 250px;
  --sidebar-collapsed-width: 68px;
  --page-padding: 1.25rem;

  --control-height-xs: 26px;
  --control-height-sm: 32px;
  --control-height-base: 36px;
  --control-height-lg: 42px;

  /* Z-Index Hierarchy Scale */
  --z-base: 1;
  --z-sticky: 20;
  --z-dropdown: 100;
  --z-drawer: 500;
  --z-backdrop: 1000;
  --z-modal: 1050;
  --z-popover: 1100;
  --z-toast: 1200;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 9999px;
  
  --transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  height: 100%;
  font-family: var(--font-sans);
  background-color: var(--bg-main);
  color: var(--text-main);
  font-size: 14px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Numeric tabular figure support for perfectly aligned data tables */
.tabular-nums, .data-table td, .metric-value, .dial-value {
  font-variant-numeric: tabular-nums;
}

a {
  color: var(--primary);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

input, button, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

/* Light Industrial Scrollbars */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ==========================================================================
   Design System Utility Classes (Unified Spacing, Layout, Typography)
   ========================================================================== */

/* Spacing - Margin */
.m-0 { margin: 0 !important; }
.mt-2xs { margin-top: var(--space-2xs) !important; }
.mt-xs { margin-top: var(--space-xs) !important; }
.mt-sm { margin-top: var(--space-sm) !important; }
.mt-md { margin-top: var(--space-md) !important; }
.mt-base { margin-top: var(--space-base) !important; }
.mt-lg { margin-top: var(--space-lg) !important; }
.mt-xl { margin-top: var(--space-xl) !important; }

.mb-2xs { margin-bottom: var(--space-2xs) !important; }
.mb-xs { margin-bottom: var(--space-xs) !important; }
.mb-sm { margin-bottom: var(--space-sm) !important; }
.mb-md { margin-bottom: var(--space-md) !important; }
.mb-base { margin-bottom: var(--space-base) !important; }
.mb-lg { margin-bottom: var(--space-lg) !important; }
.mb-xl { margin-bottom: var(--space-xl) !important; }

.ml-xs { margin-left: var(--space-xs) !important; }
.ml-sm { margin-left: var(--space-sm) !important; }
.ml-md { margin-left: var(--space-md) !important; }
.mr-xs { margin-right: var(--space-xs) !important; }
.mr-sm { margin-right: var(--space-sm) !important; }
.mr-md { margin-right: var(--space-md) !important; }

/* Spacing - Padding */
.p-0 { padding: 0 !important; }
.p-xs { padding: var(--space-xs) !important; }
.p-sm { padding: var(--space-sm) !important; }
.p-md { padding: var(--space-md) !important; }
.p-base { padding: var(--space-base) !important; }
.p-lg { padding: var(--space-lg) !important; }
.p-xl { padding: var(--space-xl) !important; }

.px-xs { padding-left: var(--space-xs) !important; padding-right: var(--space-xs) !important; }
.px-sm { padding-left: var(--space-sm) !important; padding-right: var(--space-sm) !important; }
.px-md { padding-left: var(--space-md) !important; padding-right: var(--space-md) !important; }
.px-base { padding-left: var(--space-base) !important; padding-right: var(--space-base) !important; }
.px-lg { padding-left: var(--space-lg) !important; padding-right: var(--space-lg) !important; }

.py-xs { padding-top: var(--space-xs) !important; padding-bottom: var(--space-xs) !important; }
.py-sm { padding-top: var(--space-sm) !important; padding-bottom: var(--space-sm) !important; }
.py-md { padding-top: var(--space-md) !important; padding-bottom: var(--space-md) !important; }
.py-base { padding-top: var(--space-base) !important; padding-bottom: var(--space-base) !important; }
.py-lg { padding-top: var(--space-lg) !important; padding-bottom: var(--space-lg) !important; }

/* Spacing - Gap */
.gap-2xs { gap: var(--space-2xs) !important; }
.gap-xs { gap: var(--space-xs) !important; }
.gap-sm { gap: var(--space-sm) !important; }
.gap-md { gap: var(--space-md) !important; }
.gap-base { gap: var(--space-base) !important; }
.gap-lg { gap: var(--space-lg) !important; }
.gap-xl { gap: var(--space-xl) !important; }

/* Flexbox Layout Helpers */
.flex { display: flex !important; }
.inline-flex { display: inline-flex !important; }
.flex-col { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-1 { flex: 1 1 0% !important; }
.flex-auto { flex: 1 1 auto !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }

.items-center { align-items: center !important; }
.items-start { align-items: flex-start !important; }
.items-end { align-items: flex-end !important; }
.items-baseline { align-items: baseline !important; }
.items-stretch { align-items: stretch !important; }

.justify-start { justify-content: flex-start !important; }
.justify-center { justify-content: center !important; }
.justify-end { justify-content: flex-end !important; }
.justify-between { justify-content: space-between !important; }
.justify-around { justify-content: space-around !important; }

/* Grid Layout Helpers */
.grid { display: grid !important; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

/* Sizing & Display */
.w-full { width: 100% !important; }
.h-full { height: 100% !important; }
.block { display: block !important; }
.hidden { display: none !important; }

/* Typography Helpers */
.text-2xs { font-size: var(--font-size-2xs) !important; }
.text-xs { font-size: var(--font-size-xs) !important; }
.text-sm { font-size: var(--font-size-sm) !important; }
.text-base { font-size: var(--font-size-base) !important; }
.text-md { font-size: var(--font-size-md) !important; }
.text-lg { font-size: var(--font-size-lg) !important; }
.text-xl { font-size: var(--font-size-xl) !important; }
.text-2xl { font-size: var(--font-size-2xl) !important; }
.text-3xl { font-size: var(--font-size-3xl) !important; }

.font-regular { font-weight: var(--font-weight-regular) !important; }
.font-medium { font-weight: var(--font-weight-medium) !important; }
.font-semibold { font-weight: var(--font-weight-semibold) !important; }
.font-bold { font-weight: var(--font-weight-bold) !important; }
.font-extrabold { font-weight: var(--font-weight-extrabold) !important; }
.font-mono { font-family: var(--font-mono) !important; }

.leading-none { line-height: var(--leading-none) !important; }
.leading-tight { line-height: var(--leading-tight) !important; }
.leading-normal { line-height: var(--leading-normal) !important; }

.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

.text-main { color: var(--text-main) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-dim { color: var(--text-dim) !important; }
.text-primary { color: var(--primary) !important; }
.text-success { color: var(--accent-green) !important; }
.text-warning { color: var(--accent-amber) !important; }
.text-danger { color: var(--accent-rose) !important; }

.uppercase { text-transform: uppercase !important; }
.truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.nowrap { white-space: nowrap !important; }