* {
  font-family: 'Inter', sans-serif;
  box-sizing: border-box;
}

:root {
  /* ============================================
     LEGACY VARIABLES (v1)
     Last v1 holdout — eBuilder accent color used to mark fields/projects
     owned by the eBuilder portal. No v2 equivalent yet (the rest of the
     v2 palette is brand blues/grays; this orange is intentionally
     different so eBuilder ownership stands out). Drop this when the v2
     palette adds a dedicated "external system" accent.
     Consumers: DetailsTab.jsx, ExcelBuilder.jsx, EbuilderTab.jsx, ProjectAggregate.jsx
     ============================================ */
  --color_ebuilder: #cc6600;

  /* ============================================
     DESIGN SYSTEM v2
     All new development MUST use these tokens.
     See STYLING_GUIDE.md for usage rules.
     ============================================ */

  /* --- Font --- */
  --font: 'Inter', sans-serif;

  /* --- 1. Primary Palette --- */
  --primary: #3f69ad;
  --primary-hover: #233e69;
  --primary-disabled: #b6bcc6;
  --primary-select: #3f69ad; /* select/focus state, may differ from primary */

  /* --- 2. Semantic Colors --- */
  --danger: #dc3545; /* TODO: verify — may change in new designs */
  --warning: #ffc107; /* TODO: verify — may change in new designs */
  --success: #19af69; /* TODO: verify — may change in new designs */

  /* --- 2b. Button Colors --- */
  --btn-secondary-bg: #d7e2f3; /* Secondary button background */
  --btn-tertiary-bg: #8494ad; /* Tertiary button background */

  /* --- 3. Backgrounds --- */
  --bg-shell: #f3f6f9; /* App shell / page background */
  --bg-card: #fdfeff; /* Card/panel surface */
  --bg-white: #ffffff; /* Pure white surfaces */
  --bg-input: #f5f6fa; /* Field/input background */
  --bg-properties: #e6eaf1; /* Properties badge/chip background */
  --bg-tooltip: #7a879b; /* Tooltip background */
  --bg-page-header: #fbfbfc; /* Page header bar background */

  /* --- 3b. Table Backgrounds --- */
  --table-header-bg: #dde3ed; /* Table header row */
  --table-row-even: #fdfeff; /* Table even rows (matches bg-card) */
  --table-row-odd: #eef0f4; /* Table odd/alternating rows */

  /* --- 4. Text Colors --- */
  --text-muted: #7a879b; /* Secondary/muted text */
  --text-body: #233e69; /* Primary body text */
  --text-small: #1b3358; /* Small text for better readability */
  --text-contrast: #ffffff; /* White text on dark/colored backgrounds */

  /* --- 5. Borders & Lines --- */
  --border-color: #d0d7e3; /* Default border/divider color */
  --border-divider: #d5dbe5; /* Sidebar/section dividers */
  --border-weight: 1px; /* Standard border width */

  /* --- 6. Header Bar --- */
  --header-gradient-start: #eef0f3; /* left of navbar gradient */
  --header-gradient-end: #d4dce8; /* right of navbar gradient */

  /* --- 7. Project Status Colors --- */
  --status-predesign: #8bb7d0; /*  */
  --status-design: #5778a1; /*  */
  --status-construction: #4a5a81; /*  */
  --status-activation: #262b51; /*  */

  /* --- 8. Asset Data Source Colors ---
     Used by asset tables to distinguish data origin:
       - ALR: fields pulled from asset_lookup_reference (equipment classification)
       - Calc: fields computed server-side (priority, risk, cost chain) */
  --alr-header-bg: #e8edf5;
  --alr-header-fg: #556b7a;
  --alr-header-border: #c8d0de;
  --calc-header-bg: #e8f5e9;
  --calc-header-fg: #2e7d32;
  --calc-header-border: #a5d6a7;

  /* --- 9. Cost Category Colors --- */
  --cost-construction-escalation: #cc7e50; /*  */
  --cost-soft-costs: #ea9e5b; /*  */
  --cost-construction: #eebfa0; /*  */
  --cost-contingency: #eacc93; /*  */

  /* --- 10. Chart Color Palette (mirrors constants.js PALETTES.default) --- */
  --chart-1: #70849A; /* Slate */
  --chart-2: #769B99; /* Sage */
  --chart-3: #537C7F; /* Teal */
  --chart-4: #ACC1C1; /* Seafoam */
  --chart-5: #767298; /* Lavender */
  --chart-6: #5F6796; /* Steel blue */
  --chart-7: #A98AAD; /* Mauve */
  --chart-8: #6E9A6E; /* Forest */
  --chart-9: #A87B82; /* Rose */
  --chart-10: #4a5a81; /* Navy */

  /* --- 11. Typography Scale (Inter) --- */
  --fs-xs: 9px; /* Fine print, labels */
  --fs-sm: 11px; /* Body text, table cells */
  --fs-md: 13px; /* Emphasized body, subheadings */
  --fs-lg: 15px; /* Section headings */
  --fs-xl: 18px; /* Page titles, card titles */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600; /* Table headers, card titles */
  --fw-bold: 700; /* Strong emphasis */

  /* --- 11b. Letter Spacing --- */
  --ls-sm: 0.22px; /* 11px body text */
  --ls-md: 0.26px; /* 13px subheadings */
  --ls-lg: 0.36px; /* 18px page titles */

  /* --- 12. Spacing Scale --- */
  --gap-1: 4px;
  --gap-2: 8px;
  --gap-3: 12px;
  --gap-4: 16px;
  --gap-5: 20px;
  --gap-6: 24px;
  --gap-8: 32px;
  --gap-10: 40px;
  --gap-12: 48px;
  --gap-16: 64px;

  /* --- 13. Border Radius --- */
  --radius-sm: 4px; /* Filter pills, small action buttons */
  --radius-input: 6px; /* Text inputs, selects, search fields */
  --radius-md: 8px; /* Cards, modals, dropdowns */
  --radius-btn: 10px; /* Buttons, dropdown fields, tooltips */
  --radius-lg: 12px; /* Large cards */
  --radius-xl: 16px; /* Hero cards */
  --radius-pill: 999px; /* Pill tags, toggle tracks */

  /* --- 14. Shadows --- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 3px 10px rgba(13, 12, 42, 0.08);
  --shadow-card: 10px 20px 50px rgba(181, 194, 214, 0.25); /* Card/panel surface */
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);

  /* --- 15. Layout --- */
  --sidebar-w: 220px; /* Sidebar expanded width */
  --sidebar-w-collapsed: 54px; /* Sidebar collapsed width */
  --header-h: 64px; /* Top navbar height */
  --content-max-w: 1280px; /* Content area max width */

  /* --- 16. Z-Index Scale --- */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-sidebar: 300;
  --z-navbar: 400;
  --z-modal-backdrop: 500;
  --z-modal: 600;
  --z-tooltip: 700;
  --z-notification: 800;

  /* --- 17. Transitions --- */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease-in-out;
}

/* Leaflet z-index overrides — keep controls below modals/drawers */
.leaflet-top,
.leaflet-bottom,
.leaflet-control {
  z-index: 200 !important;
}

/* ============================================
   v2 Default Table Styles
   Applied to all native <table> elements.
   ============================================ */

table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font);
  font-size: var(--fs-sm);
  color: var(--text-body);
}

table thead th {
  background-color: var(--table-header-bg);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  text-align: left;
  padding: var(--gap-2) var(--gap-3);
  border-bottom: var(--border-weight) solid var(--border-color);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

table tbody tr {
  border-bottom: var(--border-weight) solid var(--border-color);
  transition: background-color var(--transition-fast);
}

table tbody tr:nth-child(odd) {
  background-color: var(--table-row-odd);
}

table tbody tr:nth-child(even) {
  background-color: var(--table-row-even);
}

table tbody tr:hover {
  background-color: var(--bg-shell);
}

table tbody td {
  padding: var(--gap-2) var(--gap-3);
  vertical-align: middle;
}

/* ============================================
   v2 Base Element Defaults
   Scoped to #root so legacy pages are unaffected.
   These ensure unstyled elements inside React
   components fall back to the design system
   rather than incorrect legacy defaults.
   ============================================ */

#root {
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--text-body);
  letter-spacing: var(--ls-sm);
  line-height: 1.5;
}

#root p {
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--text-body);
  margin: 0;
  line-height: 1.5;
}

#root h1,
#root h2,
#root h3,
#root h4,
#root h5,
#root h6 {
  font-family: var(--font);
  color: var(--text-body);
  margin: 0;
  line-height: 1.3;
}

#root h1 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); letter-spacing: var(--ls-lg); }
#root h2 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); letter-spacing: var(--ls-md); }
#root h3 { font-size: var(--fs-md); font-weight: var(--fw-semibold); letter-spacing: var(--ls-md); }
#root h4 { font-size: var(--fs-sm); font-weight: var(--fw-semibold); letter-spacing: var(--ls-sm); }

#root label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-body);
  padding: 0;
}

#root a {
  color: var(--primary);
  text-decoration: none;
}

#root a:hover {
  color: var(--primary-hover);
}

#root button {
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-sm);
}

#root input,
#root select,
#root textarea {
  font-family: var(--font);
  font-size: var(--fs-sm);
  color: var(--text-body);
  letter-spacing: var(--ls-sm);
}

#root input::placeholder,
#root textarea::placeholder {
  color: var(--primary-disabled);
}

#root small {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

html {
  height: 100%;
}

#root {
  height: 100%;
}

html body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: #ffffff;
  font-weight: 400;
  font-size: var(--fs-sm);
}

/* Responsive base styles */
@media (max-width: 768px) {
  html body {
    font-size: var(--fs-xs);
  }
}

a {
  text-decoration: none;
  color: #333;
}

a,
a:hover,
a:active,
a:visited,
a:focus {
  text-decoration: none;
  color: #000;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

textarea {
  font-family: inherit;
}

input[disabled] {
  cursor: not-allowed;
}

button {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-weight: 300;
  padding: 4px;
  margin: 0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.air-datepicker-global-container {
  z-index: 999999;
}

p {
  font-size: 11pt;
  margin: 0px;
  font-weight: 300;
}

/* Responsive text adjustments */
@media (max-width: 768px) {
  p {
    font-size: 10pt;
  }
}

/* ============================================
   Global Scrollbar Theme (v2)
   Styles native scrollbars to match v2 tokens.
   Firefox uses scrollbar-width / scrollbar-color;
   WebKit/Blink uses the ::-webkit-scrollbar pseudos.
   Components that explicitly hide their scrollbars
   (scrollbar-width: none) still take precedence.
   ============================================ */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--border-color);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background-color 0.15s ease;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-muted);
}

*::-webkit-scrollbar-thumb:active {
  background-color: var(--primary);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}