:root {
  /* backgrounds */
  --bg:                  #08131a;
  --bg-gradient-1:       rgba(64, 145, 108, 0.18);
  --bg-gradient-2:       rgba(240, 125, 56, 0.12);
  --panel:               rgba(11, 27, 36, 0.88);
  --panel-light:         rgba(255, 255, 255, 0.04);
  --insight-bg:          rgba(255, 255, 255, 0.04);
  /* borders */
  --border:              rgba(255, 255, 255, 0.09);
  --border-subtle:       rgba(255, 255, 255, 0.08);
  /* text */
  --text:                #eaf2f6;
  --text-body:           #e7eef3;
  --muted:               #9db2be;
  /* brand accents — same in both themes */
  --accent:              #5bc58d;
  --accent-alt:          #f07d38;
  --danger:              #ff7d78;
  --warning:             #f4c95d;
  --gold:                #efca00;
  --gold-btn:            #d4b400;
  --blue-link:           #6ab4ff;
  /* navbar */
  --navbar-bg:              rgba(8, 19, 26, 0.95);
  --navbar-border:          rgba(255, 255, 255, 0.08);
  --nav-link-color:         rgba(255, 255, 255, 0.65);
  --nav-link-hover-bg:      rgba(255, 255, 255, 0.05);
  --nav-link-active-bg:     rgba(255, 255, 255, 0.10);
  --nav-link-active-color:  #fff;
  --navbar-subtle:          rgba(255, 255, 255, 0.50);
  --border-navbar-divider:  rgba(255, 255, 255, 0.10);
  /* misc */
  --shadow:              0 24px 60px rgba(0, 0, 0, 0.28);
  --brand-text:          #041014;
  --selector-bg:         rgba(255, 255, 255, 0.05);
  --selector-border:     rgba(255, 255, 255, 0.10);
  --selector-text:       #f4f8fa;
  --selector-opt-text:   #08131a;
  --selector-opt-bg:     #fff;
  --logout-border:       rgba(255, 255, 255, 0.20);
  --logout-color:        rgba(255, 255, 255, 0.80);
  --logout-hover-bg:     rgba(255, 255, 255, 0.10);
  --logout-hover-border: rgba(255, 255, 255, 0.30);
  /* status / comparison pills */
  --pill-online-bg:      rgba(91, 197, 141, 0.12);
  --pill-online-text:    #8fe7b8;
  --pill-offline-bg:     rgba(255, 255, 255, 0.07);
  --pill-offline-text:   #c6d5dd;
  --pill-monitor-bg:     rgba(255, 255, 255, 0.07);
  --pill-monitor-text:   #d9e3e8;
  --pill-increase-bg:    rgba(91, 197, 141, 0.12);
  --pill-increase-text:  #8fe7b8;
  --pill-lower-bg:       rgba(255, 125, 120, 0.12);
  --pill-lower-text:     #ffb4b0;
  --pill-promote-bg:     rgba(107, 169, 255, 0.12);
  --pill-promote-text:   #b2ceff;
  --pill-review-bg:      rgba(244, 201, 93, 0.14);
  --pill-review-text:    #ffd979;
  --delta-up:            #ffb4b0;
  --delta-down:          #8fe7b8;
  --delta-neutral:       #d9e3e8;
  /* ApexCharts (read by JS via getComputedStyle) */
  --chart-fore:          #a7bcc8;
  --chart-grid:          rgba(255, 255, 255, 0.06);
  --chart-legend:        #dce7ec;
  --chart-canvas-bg:     #08131a;
  /* surface overlays */
  --surface-1:           rgba(255, 255, 255, 0.03);
  --input-bg:            rgba(255, 255, 255, 0.05);
  --input-bg-focus:      rgba(255, 255, 255, 0.07);
  --surface-hover:       rgba(255, 255, 255, 0.06);
  --dropdown-bg:         #10212b;
  /* status */
  --status-api-online:   #8ae6b3;
  --status-api-offline:  #ff9d9a;
  --blue-link-hover:     #99ccff;
  /* active tabs / links */
  --active-tab-bg:       rgba(17, 119, 255, 0.20);
  --active-tab-border:   rgba(17, 119, 255, 0.30);
  /* table */
  --table-icon-border:   rgba(107, 180, 255, 0.30);
  --table-icon-bg:       rgba(17, 119, 255, 0.10);
  --table-icon-hover-bg: rgba(17, 119, 255, 0.20);
  --table-icon-hover-border: rgba(107, 180, 255, 0.55);
  --table-row-border:    rgba(255, 255, 255, 0.05);
  --table-head-bg:       rgba(255, 255, 255, 0.04);
  --dashed-border:       rgba(255, 255, 255, 0.12);
  /* pagination buttons */
  --page-btn-bg:         rgba(255, 255, 255, 0.04);
  --page-btn-border:     rgba(255, 255, 255, 0.10);
  --page-btn-hover-bg:   rgba(255, 255, 255, 0.09);
  --page-btn-hover-border: rgba(255, 255, 255, 0.20);
  /* filter toggle */
  --filter-toggle-bg:    rgba(255, 255, 255, 0.05);
  --filter-toggle-border: rgba(255, 255, 255, 0.12);
  --filter-toggle-hover-bg: rgba(255, 255, 255, 0.09);
  --filter-toggle-hover-border: rgba(255, 255, 255, 0.22);
  /* chips */
  --chip-bg:             rgba(255, 255, 255, 0.05);
  --chip-border:         rgba(255, 255, 255, 0.10);
  --data-period-color:   rgba(255, 255, 255, 0.45);
  /* fleet / card variants */
  --fleet-bg:            rgba(255, 255, 255, 0.03);
  --fleet-border:        rgba(255, 255, 255, 0.06);
  --tabs-bg:             rgba(255, 255, 255, 0.04);
  --tab-hover-bg:        rgba(255, 255, 255, 0.06);
  /* chart action buttons */
  --btn-action-bg:       rgba(255, 255, 255, 0.04);
  --btn-action-border:   rgba(255, 255, 255, 0.10);
  --btn-action-hover-bg: rgba(255, 255, 255, 0.08);
  --btn-action-hover-border: rgba(255, 255, 255, 0.16);
  --subtle-meta-bg:      rgba(255, 255, 255, 0.04);
  /* misc icon/thumbnail */
  --disabled-icon-color: rgba(255, 255, 255, 0.20);
  --thumb-border:        rgba(255, 255, 255, 0.08);
  --thumb-empty-bg:      rgba(255, 255, 255, 0.03);
  --thumb-dashed-border: rgba(255, 255, 255, 0.10);
  --primary-btn-text:    #071115;
}

[data-theme="light"] {
  --bg:                  #f0f5f9;
  --bg-gradient-1:       rgba(91, 197, 141, 0.10);
  --bg-gradient-2:       rgba(240, 125, 56, 0.08);
  --panel:               rgba(255, 255, 255, 0.92);
  --panel-light:         rgba(0, 0, 0, 0.03);
  --insight-bg:          rgba(0, 0, 0, 0.03);
  --border:              rgba(0, 0, 0, 0.10);
  --border-subtle:       rgba(0, 0, 0, 0.08);
  --text:                #0d1e2b;
  --text-body:           #1a3040;
  --muted:               #4d6b7d;
  --shadow:              0 24px 60px rgba(0, 0, 0, 0.10);
  --selector-bg:         rgba(0, 0, 0, 0.05);
  --selector-border:     rgba(0, 0, 0, 0.15);
  --selector-text:       #0d1e2b;
  --selector-opt-text:   #0d1e2b;
  --selector-opt-bg:     #f0f5f9;
  /* navbar adapts to light theme */
  --navbar-bg:              rgba(255, 255, 255, 0.97);
  --navbar-border:          rgba(0, 0, 0, 0.08);
  --nav-link-color:         rgba(0, 0, 0, 0.60);
  --nav-link-hover-bg:      rgba(0, 0, 0, 0.05);
  --nav-link-active-bg:     rgba(0, 0, 0, 0.07);
  --nav-link-active-color:  #0d1e2b;
  --navbar-subtle:          rgba(0, 0, 0, 0.40);
  --border-navbar-divider:  rgba(0, 0, 0, 0.10);
  --logout-border:          rgba(0, 0, 0, 0.20);
  --logout-color:           rgba(0, 0, 0, 0.65);
  --logout-hover-bg:        rgba(0, 0, 0, 0.06);
  --logout-hover-border:    rgba(0, 0, 0, 0.30);
  --pill-offline-bg:     rgba(0, 0, 0, 0.06);
  --pill-offline-text:   #3d5a6b;
  --pill-monitor-bg:     rgba(0, 0, 0, 0.06);
  --pill-monitor-text:   #3d5a6b;
  --delta-neutral:       #3d5a6b;
  --chart-fore:          #3d5a6b;
  --chart-grid:          rgba(0, 0, 0, 0.06);
  --chart-legend:        #1a3040;
  --chart-canvas-bg:     #f0f5f9;
  /* navbar stays dark (brand identity) */
  /* surface overlays — inverted for light bg */
  --surface-1:           rgba(0, 0, 0, 0.03);
  --input-bg:            rgba(0, 0, 0, 0.04);
  --input-bg-focus:      rgba(0, 0, 0, 0.06);
  --surface-hover:       rgba(0, 0, 0, 0.05);
  --dropdown-bg:         #ffffff;
  --status-api-online:   #1a7a46;
  --status-api-offline:  #cc3333;
  --blue-link-hover:     #0066cc;
  --active-tab-bg:       rgba(17, 119, 255, 0.10);
  --active-tab-border:   rgba(17, 119, 255, 0.20);
  --table-icon-border:   rgba(17, 119, 255, 0.25);
  --table-icon-bg:       rgba(17, 119, 255, 0.08);
  --table-icon-hover-bg: rgba(17, 119, 255, 0.15);
  --table-icon-hover-border: rgba(17, 119, 255, 0.40);
  --table-row-border:    rgba(0, 0, 0, 0.06);
  --table-head-bg:       rgba(0, 0, 0, 0.04);
  --dashed-border:       rgba(0, 0, 0, 0.12);
  --page-btn-bg:         rgba(0, 0, 0, 0.04);
  --page-btn-border:     rgba(0, 0, 0, 0.12);
  --page-btn-hover-bg:   rgba(0, 0, 0, 0.08);
  --page-btn-hover-border: rgba(0, 0, 0, 0.20);
  --filter-toggle-bg:    rgba(0, 0, 0, 0.05);
  --filter-toggle-border: rgba(0, 0, 0, 0.12);
  --filter-toggle-hover-bg: rgba(0, 0, 0, 0.08);
  --filter-toggle-hover-border: rgba(0, 0, 0, 0.20);
  --chip-bg:             rgba(0, 0, 0, 0.05);
  --chip-border:         rgba(0, 0, 0, 0.10);
  --data-period-color:   rgba(0, 0, 0, 0.40);
  --fleet-bg:            rgba(0, 0, 0, 0.03);
  --fleet-border:        rgba(0, 0, 0, 0.08);
  --tabs-bg:             rgba(0, 0, 0, 0.04);
  --tab-hover-bg:        rgba(0, 0, 0, 0.05);
  --btn-action-bg:       rgba(0, 0, 0, 0.04);
  --btn-action-border:   rgba(0, 0, 0, 0.10);
  --btn-action-hover-bg: rgba(0, 0, 0, 0.07);
  --btn-action-hover-border: rgba(0, 0, 0, 0.15);
  --subtle-meta-bg:      rgba(0, 0, 0, 0.04);
  --disabled-icon-color: rgba(0, 0, 0, 0.25);
  --thumb-border:        rgba(0, 0, 0, 0.12);
  --thumb-empty-bg:      rgba(0, 0, 0, 0.03);
  --thumb-dashed-border: rgba(0, 0, 0, 0.12);
}

html {
  font-size: 16px;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, var(--bg-gradient-1), transparent 32%),
    radial-gradient(circle at bottom right, var(--bg-gradient-2), transparent 28%),
    var(--bg);
  color: var(--text-body);
  font-family: Inter, system-ui, sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
}

a {
  color: inherit;
  text-decoration: none;
}

.app-navbar {
  background: var(--navbar-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--navbar-border);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Override Bootstrap utility classes inside the navbar when in light mode */
[data-theme="light"] .app-navbar .text-white,
[data-theme="light"] .app-navbar .text-light { color: var(--text) !important; }
[data-theme="light"] .app-navbar .text-white-50 { color: var(--muted) !important; }
[data-theme="light"] .app-navbar .user-avatar { background-color: rgba(0, 0, 0, 0.08) !important; color: var(--text) !important; }

.app-navbar-frame {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.6rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-alt));
  color: var(--brand-text);
  font-weight: 800;
  font-size: 1rem;
  flex-shrink: 0;
}

.brand-subtitle {
  letter-spacing: 0.12em;
  color: var(--navbar-subtle);
}

.page-content {
  padding-bottom: 2rem;
}

.app-nav {
  margin: 0;
}

.app-nav .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem !important;
  border-radius: 0.5rem;
  color: var(--nav-link-color);
  font-weight: 500;
  font-size: 0.9rem;
  transition: all 0.2s ease-in-out;
}

.app-nav .nav-link:hover,
.app-nav .nav-link:focus {
  color: var(--nav-link-active-color);
  background: var(--nav-link-hover-bg);
}

.app-nav .nav-link.active {
  color: var(--nav-link-active-color);
  background: var(--nav-link-active-bg);
}

.app-nav .nav-link.active i {
  color: var(--gold);
}

.min-w-0 {
  min-width: 0;
}

.app-user-rail {
  min-width: 0;
}

.company-selector-group {
  background-color: var(--selector-bg);
  border: 1px solid var(--selector-border);
  border-radius: 0.5rem;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.company-selector-group .input-group-text {
  background: transparent;
  color: var(--navbar-subtle);
}

.company-selector-group .form-select {
  background-color: transparent;
  color: var(--selector-text);
  cursor: pointer;
  padding-left: 0;
}

.company-selector-group .form-select:focus {
  background-color: transparent;
  box-shadow: none;
}

.company-selector-group .form-select option {
  color: var(--selector-opt-text);
  background: var(--selector-opt-bg);
}

.company-selector-group:focus-within {
  border-color: rgba(91, 197, 141, 0.5);
  box-shadow: 0 0 0 0.15rem rgba(91, 197, 141, 0.25);
}

.company-display {
  background-color: var(--selector-bg);
  border: 1px solid var(--selector-border);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.border-white-10 {
  border-color: var(--border-navbar-divider) !important;
}

.btn-logout {
  width: 36px;
  height: 36px;
  padding: 0;
  border-color: var(--logout-border);
  color: var(--logout-color);
  transition: all 0.2s ease-in-out;
}

.btn-logout:hover {
  background-color: var(--logout-hover-bg);
  border-color: var(--logout-hover-border);
  color: var(--logout-color);
}

/* Theme toggle icon visibility */
.theme-icon-light,
.theme-icon-dark {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

[data-theme="dark"] .theme-icon-light  { display: block; }
[data-theme="dark"] .theme-icon-dark   { display: none; }
[data-theme="light"] .theme-icon-light { display: none; }
[data-theme="light"] .theme-icon-dark  { display: block; }

[data-theme="dark"] .logo-light  { display: none; }
[data-theme="dark"] .logo-dark   { display: block; }
[data-theme="light"] .logo-light { display: block; }
[data-theme="light"] .logo-dark  { display: none; }

/* Transitions for themed elements */
.card-panel, .auth-card, .metric-card, .summary-card,
.chart-card, .insight-card,
.radar-table, .compare-table {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
    }
}

@media (min-width: 992px) {
  .header-company-form,
  .company-display {
    max-width: 240px;
  }

  .user-info-block {
    max-width: 180px;
  }

  .border-lg-none {
    border: none !important;
  }
}