/* =========================================
   Andes Design System
   ========================================= */

/* @font-face — DM Sans Variable (local files) */
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-Variable-Italic.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* =========================================
   Design Tokens — copied from
   design-system/Design-System/main/
   ========================================= */

:root {

  /* Colors — Palette */
  --andes-charcoal:   #22282b;
  --andes-off-white:  #f1f8f9;
  --andes-navy:       #122a4f;
  --andes-blue:       #0077fa;
  --andes-warm-gray:  #89887b;
  --andes-white:      #ffffff;
  --andes-green:      #1B7340;
  --andes-red:        #B8352A;
  --andes-amber:      #C4923D;

  /* Colors — Semantic */
  --andes-text-primary:     var(--andes-charcoal);
  --andes-text-secondary:   var(--andes-warm-gray);
  --andes-text-on-dark:     var(--andes-white);
  --andes-surface:          var(--andes-off-white);
  --andes-surface-dark:     var(--andes-navy);
  --andes-accent:           var(--andes-blue);

  /* Colors — Data Visualization */
  --andes-data-andes:       var(--andes-blue);
  --andes-data-baseline:    var(--andes-warm-gray);
  --andes-data-negative:    var(--andes-charcoal);
  --andes-data-andes-50:    #0077fa80;
  --andes-data-baseline-50: #89887b80;
  --andes-data-gridline:    #89887b4D;
  --andes-data-row-alt:     var(--andes-off-white);

  /* Performance direction */
  --andes-direction-pos:    var(--andes-green);
  --andes-direction-neg:    var(--andes-red);
  --andes-sensitivity-pos:  #1B73401A;
  --andes-sensitivity-neg:  #B8352A1A;
  --andes-sensitivity-mid:  #89887b0D;

  /* Gradients */
  --andes-gradient-cover:   linear-gradient(135deg, #0077fa, #122a4f);
  --andes-gradient-main:    linear-gradient(180deg, #122a4f 0%, #0077fa 65%, #f1f8f9 100%);
  --andes-gradient-subtle:  linear-gradient(135deg, #122a4f, #89887b);

  /* Typography — Families (DM Sans for all text including figures) */
  --andes-font-heading:  'DM Sans', sans-serif;
  --andes-font-body:     'DM Sans', sans-serif;
  --andes-font-data:     'DM Sans', sans-serif;

  /* Typography — Weights */
  --andes-weight-light:    300;
  --andes-weight-regular:  400;
  --andes-weight-medium:   500;
  --andes-weight-bold:     700;

  /* Typography — Scale (Perfect Fourth 1.333) */
  --andes-text-3xl:   3.953rem;  /* 63.2px — Display    */
  --andes-text-2xl:   2.963rem;  /* 47.4px — H1         */
  --andes-text-xl:    2.221rem;  /* 35.5px — H2         */
  --andes-text-lg:    1.665rem;  /* 26.6px — H3         */
  --andes-text-md:    1.249rem;  /* 20.0px — Body Large */
  --andes-text-base:  1rem;      /* 16.0px — Body       */
  --andes-text-sm:    0.750rem;  /* 12.0px — Labels     */
  --andes-text-xs:    0.563rem;  /*  9.0px — Footnotes  */

  /* Typography — Line Heights */
  --andes-leading-tight:    1.08;
  --andes-leading-snug:     1.12;
  --andes-leading-heading:  1.2;
  --andes-leading-sub:      1.25;
  --andes-leading-label:    1.3;
  --andes-leading-caption:  1.45;
  --andes-leading-body:     1.5;

  /* Spacing — 8px base */
  --andes-space-1:   0.25rem;   /*  4px */
  --andes-space-2:   0.5rem;    /*  8px */
  --andes-space-3:   0.75rem;   /* 12px */
  --andes-space-4:   1rem;      /* 16px */
  --andes-space-5:   1.5rem;    /* 24px */
  --andes-space-6:   2rem;      /* 32px */
  --andes-space-8:   3rem;      /* 48px */
  --andes-space-10:  4rem;      /* 64px */
  --andes-space-12:  5rem;      /* 80px */
  --andes-space-16:  7.5rem;    /* 120px */

  /* Layout */
  --andes-content-max: 1200px;
  --andes-page-margin: 3rem;
  --andes-grid-gutter: 1rem;

  /* Borders — Widths */
  --andes-border-hairline: 1px;
  --andes-border-medium:   2px;
  --andes-border-accent:   3px;

  /* Borders — Colors */
  --andes-border-gridline: #89887b4D;  /* warm-gray 30% */
  --andes-border-header:   var(--andes-charcoal);
  --andes-border-subtle:   #89887b33;  /* warm-gray 20% */

  /* Border Radius — sharp corners = institutional precision */
  --andes-radius-none: 0px;
  --andes-radius-sm:   2px;
  --andes-radius-md:   4px;
  --andes-radius-lg:   8px;
  --andes-radius-full: 50%;

  /* Shadows — none for institutional; defined only for future VC/investor layer */
  --andes-shadow-none:   none;
  --andes-shadow-subtle: 0 2px 4px rgba(34, 40, 43, 0.08);
  --andes-shadow-medium: 0 4px 12px rgba(34, 40, 43, 0.12);

  /* Containers */
  --andes-container-default:    var(--andes-white);
  --andes-container-subtle:     var(--andes-off-white);
  --andes-container-emphasized: #0077fa0D;  /* blue 5% */

  /* Table tokens */
  --andes-table-header-border:    2px solid var(--andes-charcoal);
  --andes-table-header-tracking:  0.05em;
  --andes-table-cell-padding-v:   0.75rem;
  --andes-table-cell-padding-h:   1rem;
  --andes-table-cell-border:      1px solid var(--andes-border-gridline);
  --andes-table-row-alt-bg:       var(--andes-off-white);
  --andes-table-highlight-border: 3px solid var(--andes-blue);

  /* KPI Card tokens */
  --andes-kpi-border:  3px solid var(--andes-blue);
  --andes-kpi-bg:      var(--andes-white);
  --andes-kpi-padding: var(--andes-space-4);
  --andes-kpi-gap:     var(--andes-space-4);

  /* Page Zones */
  --andes-zone-header-h:   48px;
  --andes-zone-header-bg:  var(--andes-navy);
  --andes-zone-footer-h:   32px;
  --andes-zone-action-h:   64px;
  --andes-zone-action-bg:  var(--andes-navy);

  /* Icon sizing */
  --andes-icon-xs:  12px;
  --andes-icon-sm:  16px;
  --andes-icon-md:  24px;
  --andes-icon-lg:  32px;
  --andes-icon-xl:  48px;
  --andes-icon-gap-text:      0.5rem;
  --andes-icon-gap-container: 1rem;

  /* =========================================
     App-level layout variables
     ========================================= */
  --container-max-width:   var(--andes-content-max);
  --main-content-padding:  var(--andes-space-5);  /* 24px */
  --sidebar-width:         240px;
  --header-height:         var(--andes-zone-header-h);  /* 48px */

  /* =========================================
     Bootstrap 5 token overrides
     Maps Bootstrap variables to Andes tokens
     ========================================= */
  --bs-primary:           var(--andes-blue);
  --bs-primary-rgb:       0, 119, 250;
  --bs-secondary:         var(--andes-navy);
  --bs-secondary-rgb:     18, 42, 79;
  --bs-success:           var(--andes-green);
  --bs-success-rgb:       27, 115, 64;
  --bs-info:              var(--andes-blue);
  --bs-info-rgb:          0, 119, 250;
  --bs-warning:           var(--andes-amber);
  --bs-warning-rgb:       196, 146, 61;
  --bs-danger:            var(--andes-red);
  --bs-danger-rgb:        184, 53, 42;
  --bs-light:             var(--andes-off-white);
  --bs-light-rgb:         241, 248, 249;
  --bs-dark:              var(--andes-navy);
  --bs-dark-rgb:          18, 42, 79;
  --bs-body-color:        var(--andes-charcoal);
  --bs-body-bg:           var(--andes-off-white);
  --bs-body-font-family:  var(--andes-font-body);
  --bs-border-radius:     var(--andes-radius-sm);
  --bs-border-radius-sm:  var(--andes-radius-none);
  --bs-border-radius-lg:  var(--andes-radius-md);
  --bs-border-color:      var(--andes-border-subtle);
  --bs-card-border-color: var(--andes-border-subtle);
  --bs-card-cap-bg:       var(--andes-white);
  --bs-card-bg:           var(--andes-white);
  --bs-card-spacer-y:     var(--andes-space-5);
  --bs-card-spacer-x:     var(--andes-space-5);
  --bs-card-cap-padding-y: var(--andes-space-4);
  --bs-card-cap-padding-x: var(--andes-space-5);
  --bs-secondary-soft:    var(--andes-border-subtle);

  /* =========================================
     Convenience aliases
     Allows existing templates to keep
     var(--primary-blue), var(--gray-*), etc.
     while we migrate them incrementally
     ========================================= */

  /* Primary blues */
  --primary-blue:            var(--andes-blue);
  --primary-blue-light:      #4da3ff;
  --primary-blue-dark:       #005fcc;
  --primary-blue-background: rgba(0, 119, 250, 0.08);
  --white:                   var(--andes-white);
  --background-color:        var(--andes-off-white);

  /* Status */
  --success-color:      var(--andes-green);
  --danger-color:       var(--andes-red);
  --warning-color:      var(--andes-warm-gray);
  --info-color:         var(--andes-blue);
  --success-background: rgba(27, 115, 64, 0.08);
  --danger-background:  rgba(184, 53, 42, 0.08);
  --warning-background: rgba(137, 136, 123, 0.08);
  --info-background:    rgba(0, 119, 250, 0.08);

  /* Gray scale — mapped to Andes palette */
  --gray-900: var(--andes-charcoal);     /* #22282b */
  --gray-800: #2d363a;
  --gray-700: var(--andes-charcoal);     /* #22282b */
  --gray-600: #5a5952;
  --gray-500: var(--andes-warm-gray);    /* #89887b */
  --gray-400: #b0afa8;
  --gray-300: #d5d4cd;
  --gray-200: #e8e7e0;
  --gray-100: var(--andes-off-white);    /* #f1f8f9 */
  --gray-50:  #f7fbfc;
}

/* =========================================
   Andes Composed Role Classes
   ========================================= */

.andes-display {
  font-family: var(--andes-font-heading);
  font-size: var(--andes-text-3xl);
  font-weight: var(--andes-weight-light);
  line-height: var(--andes-leading-tight);
  color: var(--andes-text-primary);
}
.andes-h1 {
  font-family: var(--andes-font-heading);
  font-size: var(--andes-text-2xl);
  font-weight: var(--andes-weight-light);
  line-height: var(--andes-leading-snug);
  color: var(--andes-text-primary);
}
.andes-h2 {
  font-family: var(--andes-font-heading);
  font-size: var(--andes-text-xl);
  font-weight: var(--andes-weight-medium);
  line-height: var(--andes-leading-heading);
  color: var(--andes-text-primary);
}
.andes-h3 {
  font-family: var(--andes-font-heading);
  font-size: var(--andes-text-lg);
  font-weight: var(--andes-weight-medium);
  line-height: var(--andes-leading-sub);
  color: var(--andes-text-primary);
}
.andes-body-lg {
  font-family: var(--andes-font-body);
  font-size: var(--andes-text-md);
  font-weight: var(--andes-weight-regular);
  line-height: var(--andes-leading-body);
  color: var(--andes-text-secondary);
}
.andes-body {
  font-family: var(--andes-font-body);
  font-size: var(--andes-text-base);
  font-weight: var(--andes-weight-regular);
  line-height: var(--andes-leading-body);
  color: var(--andes-text-secondary);
}
.andes-data-callout {
  font-family: var(--andes-font-heading);
  font-size: var(--andes-text-lg);
  font-weight: var(--andes-weight-bold);
  line-height: var(--andes-leading-tight);
  color: var(--andes-text-primary);
}
.andes-data {
  font-family: var(--andes-font-data);
  font-size: var(--andes-text-base);
  font-weight: var(--andes-weight-medium);
  color: var(--andes-text-primary);
}
.andes-label {
  font-family: var(--andes-font-heading);
  font-size: var(--andes-text-sm);
  font-weight: var(--andes-weight-medium);
  line-height: var(--andes-leading-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--andes-text-secondary);
}
.andes-caption {
  font-family: var(--andes-font-data);
  font-size: var(--andes-text-sm);
  font-weight: var(--andes-weight-regular);
  line-height: var(--andes-leading-caption);
  color: var(--andes-text-secondary);
}
.andes-footnote {
  font-family: var(--andes-font-data);
  font-size: var(--andes-text-xs);
  font-weight: var(--andes-weight-regular);
  line-height: var(--andes-leading-caption);
  color: var(--andes-text-secondary);
}
.andes-chart-title {
  font-family: var(--andes-font-heading);
  font-size: var(--andes-text-lg);
  font-weight: var(--andes-weight-medium);
  line-height: var(--andes-leading-sub);
  color: var(--andes-text-primary);
}
.andes-table-header {
  font-family: var(--andes-font-heading);
  font-size: var(--andes-text-sm);
  font-weight: var(--andes-weight-medium);
  letter-spacing: var(--andes-table-header-tracking);
  text-transform: uppercase;
  color: var(--andes-text-primary);
  border-bottom: var(--andes-table-header-border);
  padding: var(--andes-table-cell-padding-v) var(--andes-table-cell-padding-h);
}
.andes-table-cell {
  font-family: var(--andes-font-body);
  font-size: var(--andes-text-base);
  font-weight: var(--andes-weight-regular);
  color: var(--andes-text-secondary);
  text-align: left;
  padding: var(--andes-table-cell-padding-v) var(--andes-table-cell-padding-h);
  border-bottom: var(--andes-table-cell-border);
}
.andes-table-cell-number {
  font-family: var(--andes-font-data);
  font-size: var(--andes-text-base);
  font-weight: var(--andes-weight-medium);
  color: var(--andes-text-primary);
  text-align: right;
  padding: var(--andes-table-cell-padding-v) var(--andes-table-cell-padding-h);
  border-bottom: var(--andes-table-cell-border);
}
.andes-table-row-alt {
  background-color: var(--andes-table-row-alt-bg);
}
.andes-table-col-highlight {
  border-left: var(--andes-table-highlight-border);
}
.andes-kpi-card {
  background: var(--andes-kpi-bg);
  border-left: var(--andes-kpi-border);
  padding: var(--andes-kpi-padding);
  border-radius: var(--andes-radius-sm);
}
.andes-container {
  background: var(--andes-container-default);
  border-radius: var(--andes-radius-none);
}
.andes-container-subtle {
  background: var(--andes-container-subtle);
  border-radius: var(--andes-radius-none);
}
.andes-container-emphasized {
  background: var(--andes-container-emphasized);
  border-radius: var(--andes-radius-sm);
}
.andes-source {
  font-family: var(--andes-font-data);
  font-size: var(--andes-text-xs);
  font-weight: var(--andes-weight-regular);
  line-height: var(--andes-leading-caption);
  color: var(--andes-text-secondary);
  margin-top: 0.5rem;
}
.andes-delta {
  font-family: var(--andes-font-data);
  color: var(--andes-accent);
}
.andes-header-bar {
  height: var(--andes-zone-header-h);
  background: var(--andes-zone-header-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--andes-space-4);
}
.andes-action-bar {
  height: var(--andes-zone-action-h);
  background: var(--andes-zone-action-bg);
  display: flex;
  align-items: center;
  padding: 0 var(--andes-space-4);
  color: var(--andes-text-on-dark);
}

/* =========================================
   Background & Typography — Global
   ========================================= */

body {
  background-color: var(--andes-off-white);
  color: var(--andes-charcoal);
  font-family: var(--andes-font-body);
  font-size: 1rem;
  font-weight: var(--andes-weight-regular);
  line-height: var(--andes-leading-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--andes-font-heading);
  color: var(--andes-charcoal);
  font-weight: var(--andes-weight-medium);
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}

h1 { font-size: var(--andes-text-2xl); font-weight: var(--andes-weight-light); }
h2 { font-size: var(--andes-text-xl); }
h3 { font-size: var(--andes-text-lg); }
h4 { font-size: var(--andes-text-md); }
h5 { font-size: var(--andes-text-base); }
h6 { font-size: var(--andes-text-sm); }

input::placeholder { color: var(--andes-warm-gray) !important; }

/* =========================================
   Layout — Container
   ========================================= */

.container-fluid {
  max-width: var(--container-max-width);
  width: 100%;
  padding-left: var(--main-content-padding);
  padding-right: var(--main-content-padding);
  margin-left: auto;
  margin-right: auto;
}

/* =========================================
   Layout — Panel (header + sidebar + main)
   ========================================= */

#panel-main {
  min-height: 100vh;
  padding-top: var(--header-height);
  background-color: var(--andes-off-white);
}

#panel-header {
  height: var(--header-height);
  min-height: fit-content;
  z-index: 1030;
  background-color: var(--andes-navy);
  border-bottom: none;
}

#panel-sidebar {
  height: calc(100vh - var(--header-height));
  width: var(--sidebar-width) !important;
  border-right: var(--andes-border-hairline) solid var(--andes-border-gridline);
  padding-top: var(--andes-space-4);
  background-color: var(--andes-white);
  overflow-y: auto;
}

#panel-main-content {
  padding: 0;
  background-color: var(--andes-off-white);
  max-width: var(--container-max-width);
  margin: 0 auto 0 var(--sidebar-width);
}

/* =========================================
   Header styling
   ========================================= */

.header-img {
  height: 28px;
  width: auto;
  display: block;
}

.header-title-dynamic {
  font-size: var(--andes-text-base);
  color: var(--andes-white);
  font-weight: var(--andes-weight-medium);
}

.header-tools > * {
  flex: 0 0 auto;
}

@media (min-width: 768px) {
  .header-tools {
    justify-content: flex-end;
  }
}
@media (max-width: 767.98px) {
  .header-tools {
    gap: 0.5rem !important;
    margin-top: 0.5rem;
    justify-content: flex-start;
  }
}

.welcome-text {
  color: var(--andes-white);
  font-weight: var(--andes-weight-medium);
  font-size: var(--andes-text-sm);
  opacity: 0.85;
}

/* Language selector */
.sidebar-language { width: 120px; }

@media (max-width: 991.98px) {
  .header-tools .sidebar-language { display: none; }
  #panel-main-content { margin: 0 auto; }
}

#language-select,
#sidebar-language-select {
  padding-left: 1.25rem;
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--andes-white);
  border-color: rgba(255, 255, 255, 0.2);
}

#language-select option,
#sidebar-language-select option {
  background-color: var(--andes-navy);
  color: var(--andes-white);
}

.sidebar-language-icon,
.sidebar-language-icon-alt {
  left: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
}

.sidebar-language-icon-alt { top: 36%; }

/* Mobile sidebar */
#sidebar-menu {
  top: var(--header-height);
  height: calc(100vh - var(--header-height));
  width: var(--sidebar-width);
  z-index: 1000;
  transition: all 0.2s ease;
  background-color: var(--andes-white);
  border-right: var(--andes-border-hairline) solid var(--andes-border-gridline);
  overflow-y: auto;
}

/* =========================================
   Navigation
   ========================================= */

.navigation, .nav-link {
  color: var(--andes-warm-gray);
  padding: 0.625rem var(--andes-space-4);
  border-radius: var(--andes-radius-sm);
  transition: color 0.1s ease, border-color 0.1s ease;
  display: flex;
  align-items: center;
  margin-bottom: 0.25rem;
  text-decoration: none;
  font-weight: var(--andes-weight-medium);
  font-size: var(--andes-text-sm);
  line-height: 1.5;
  border-left: var(--andes-border-accent) solid transparent;
}

.navigation.active, .nav-link.active {
  color: var(--andes-charcoal);
  font-weight: var(--andes-weight-medium);
  background-color: var(--andes-off-white);
  border-left-color: var(--andes-blue);
}

.navigation:hover:not(.active), .nav-link:hover:not(.active) {
  color: var(--andes-charcoal);
  background-color: var(--andes-off-white);
}

.nav-icon, .nav-icon-small {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  color: var(--andes-warm-gray);
  margin-right: 0.75rem;
}

.navigation.active .nav-icon,
.nav-link.active .nav-icon {
  color: var(--andes-blue);
}

.nav-icon-small { width: 18px; }

/* Header links (on navy bg) */
#panel-header .btn-link,
#panel-header a.text-primary {
  color: var(--andes-white) !important;
}
#panel-header .btn-link:hover,
#panel-header a.text-primary:hover {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Sidebar open button (on navy) */
.sidebar-hidden {
  color: var(--andes-white) !important;
}

/* Responsive sidebar */
@media (max-width: 991.98px) {
  #panel-sidebar        { display: none !important; }
  .sidebar-hidden       { display: block !important; }
  .sidebar-menu.d-flex  { display: flex !important; }
}
@media (min-width: 992px) {
  #open-sidebar   { display: none !important; }
  .sidebar-hidden { display: none !important; }
}

/* =========================================
   Cards
   ========================================= */

.card {
  border: var(--andes-border-hairline) solid var(--andes-border-subtle);
  border-radius: var(--andes-radius-sm);
  box-shadow: none;
  background-color: var(--andes-white);
  margin-bottom: var(--andes-space-5);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card-header {
  background-color: var(--andes-white);
  border-bottom: var(--andes-border-hairline) solid var(--andes-border-subtle);
  padding: var(--andes-space-4) var(--andes-space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-header h2, .card-header h3, .card-header h4, .card-header h5 {
  margin-bottom: 0;
  font-size: var(--andes-text-base);
  font-weight: var(--andes-weight-medium);
  color: var(--andes-charcoal);
}

.card-body {
  padding: var(--andes-space-5);
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.card-small       { min-width: 16rem; width: 100%; height: 8.3rem; }
.card-small-taller { height: 9.2rem; }

/* =========================================
   Stats Overview / KPI Cards
   ========================================= */

.stats-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--andes-kpi-gap);
  margin-bottom: 0;
}

.stats-overview.secondary {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

@media (max-width: 991.98px) {
  .stats-overview,
  .stats-overview.secondary { grid-template-columns: 1fr; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .stats-overview { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

.stat-card {
  background-color: var(--andes-white);
  border-radius: var(--andes-radius-sm);
  box-shadow: none;
  padding: var(--andes-space-4);
  position: relative;
  display: flex;
  flex-direction: column;
  border: var(--andes-border-hairline) solid var(--andes-border-subtle);
  border-left: var(--andes-kpi-border);
  height: 100%;
}

.stat-card .label {
  font-size: var(--andes-text-sm);
  font-weight: var(--andes-weight-medium);
  color: var(--andes-warm-gray);
  margin-bottom: var(--andes-space-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.stat-card .value {
  font-size: var(--andes-text-lg);
  font-weight: var(--andes-weight-medium);
  margin-bottom: var(--andes-space-1);
  color: var(--andes-charcoal);
}

.stat-card .subtext {
  font-size: var(--andes-text-sm);
  color: var(--andes-warm-gray);
  margin-top: var(--andes-space-1);
  font-weight: var(--andes-weight-regular);
}

.stat-card .icon {
  position: absolute;
  top: var(--andes-space-4);
  right: var(--andes-space-4);
  opacity: 0.4;
  font-size: var(--andes-icon-sm);
  color: var(--andes-blue);
}

.stat-card .icon.positive { color: var(--andes-green) !important; }
.stat-card .icon.negative { color: var(--andes-red) !important; }
.stat-card .icon.neutral  { color: var(--andes-warm-gray) !important; }
.stat-card .subtext.positive-value { color: var(--andes-green) !important; }
.stat-card .subtext.negative-value { color: var(--andes-red) !important; }

/* Stat card left-border by value polarity */
.stat-card.positive { border-left: var(--andes-border-accent) solid var(--andes-green); }
.stat-card.negative { border-left: var(--andes-border-accent) solid var(--andes-red); }
.stat-card.neutral  { border-left: var(--andes-border-accent) solid var(--andes-warm-gray); }

.metric-small-card {
  background-color: var(--andes-white);
  border-radius: var(--andes-radius-sm);
  box-shadow: none;
  padding: var(--andes-space-4);
  height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: var(--andes-border-hairline) solid var(--andes-border-subtle);
  border-left: var(--andes-kpi-border);
  position: relative;
}

.metric-small-card .label {
  font-size: var(--andes-text-sm);
  font-weight: var(--andes-weight-medium);
  color: var(--andes-warm-gray);
  margin-bottom: var(--andes-space-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.metric-small-card .value {
  font-size: var(--andes-text-lg);
  font-weight: var(--andes-weight-medium);
  color: var(--andes-charcoal);
}

.metric-small-card .icon {
  position: absolute;
  top: var(--andes-space-4);
  right: var(--andes-space-4);
  opacity: 0.35;
  font-size: var(--andes-icon-sm);
  color: var(--andes-blue);
}

.metric-small-card .subtext {
  font-size: var(--andes-text-sm);
  color: var(--andes-warm-gray);
}

.metric-small-card .subtext.positive-value { color: var(--andes-green) !important; }
.metric-small-card .subtext.negative-value { color: var(--andes-red) !important; }

/* =========================================
   Buttons
   ========================================= */

.btn {
  border-radius: var(--andes-radius-sm);
  font-family: var(--andes-font-body);
  font-weight: var(--andes-weight-medium);
  font-size: var(--andes-text-sm);
  padding: 0.5rem var(--andes-space-4);
  transition: background-color 0.1s ease, border-color 0.1s ease;
  box-shadow: none;
}

.btn-primary {
  background-color: var(--andes-blue);
  border-color: var(--andes-blue);
  color: var(--andes-white);
}
.btn-primary:hover {
  background-color: var(--primary-blue-dark);
  border-color: var(--primary-blue-dark);
}

.btn-outline-primary {
  color: var(--andes-blue);
  border-color: var(--andes-blue);
}
.btn-outline-primary:hover {
  background-color: var(--primary-blue-background);
  border-color: var(--andes-blue);
  color: var(--primary-blue-dark);
}

.btn-outline-secondary {
  color: var(--andes-warm-gray);
  border-color: var(--andes-border-gridline);
}
.btn-outline-secondary:hover {
  background-color: var(--andes-off-white);
  border-color: var(--andes-warm-gray);
  color: var(--andes-charcoal);
}

.btn-success-soft {
  color: var(--andes-green);
  background-color: var(--success-background);
  border: none;
}
.btn-success-soft:hover {
  background-color: rgba(27, 115, 64, 0.15);
  color: #134f2c;
}

.btn-danger-soft {
  color: var(--andes-red);
  background-color: var(--danger-background);
  border: none;
}
.btn-danger-soft:hover {
  background-color: rgba(184, 53, 42, 0.15);
  color: #8c1f17;
}

/* =========================================
   Tables — Bootstrap .table
   ========================================= */

.table {
  color: var(--andes-charcoal);
  font-size: var(--andes-text-sm);
  font-family: var(--andes-font-body);
}

.table > thead > tr > th {
  font-weight: var(--andes-weight-medium);
  color: var(--andes-charcoal);
  border-bottom: var(--andes-table-header-border);
  padding: var(--andes-table-cell-padding-v) var(--andes-table-cell-padding-h);
  font-size: var(--andes-text-sm);
  text-transform: uppercase;
  letter-spacing: var(--andes-table-header-tracking);
}

.table > tbody > tr > td {
  padding: var(--andes-table-cell-padding-v) var(--andes-table-cell-padding-h);
  border-bottom: var(--andes-table-cell-border);
  vertical-align: middle;
  color: var(--andes-warm-gray);
}

.table > tbody > tr:nth-child(even) > td {
  background-color: var(--andes-off-white);
}

.table-hover tbody tr:hover {
  background-color: var(--andes-container-emphasized);
}

/* =========================================
   Tables — Custom table component
   ========================================= */

.table-container {
  background-color: var(--andes-white);
  border-radius: var(--andes-radius-sm);
  box-shadow: none;
  overflow: visible;
  border: var(--andes-border-hairline) solid var(--andes-border-subtle);
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--andes-space-4) var(--andes-space-5);
  border-bottom: var(--andes-border-hairline) solid var(--andes-border-subtle);
  flex-wrap: wrap;
  gap: 0.5rem;
}

.table-actions {
  width: 50%;
  padding: 0 var(--andes-space-5) var(--andes-space-1) 0;
  flex-wrap: wrap;
}

.table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--andes-space-3) var(--andes-space-5);
  border-top: var(--andes-border-hairline) solid var(--andes-border-subtle);
}

.table-footer .pagination-info {
  font-size: var(--andes-text-sm);
  color: var(--andes-warm-gray);
}

.table-footer .pagination { margin: 0; }

.table-footer .pagination .page-link {
  font-size: var(--andes-text-sm);
  padding: 0.25rem 0.5rem;
  color: var(--andes-blue);
  border-color: var(--andes-border-subtle);
}

.table-footer .pagination .page-link:hover {
  background-color: var(--primary-blue-background);
}

.table-footer .pagination .page-item.active .page-link {
  background-color: var(--andes-blue);
  border-color: var(--andes-blue);
  color: var(--andes-white);
}

.entries-selector {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.entries-selector select {
  width: auto;
  min-width: 70px;
  height: 36px;
  font-size: var(--andes-text-sm);
  border-color: var(--andes-border-subtle);
  border-radius: var(--andes-radius-sm);
  padding: 0 0.75rem;
  background-position: right 0.5rem center;
}

.entries-selector span {
  font-size: var(--andes-text-sm);
  color: var(--andes-warm-gray);
}

.search-box { width: 250px; }
.search-box .input-group { height: 36px; }
.search-box input {
  font-size: var(--andes-text-sm);
  height: 36px;
  border-color: var(--andes-border-subtle);
}
.search-box .input-group-text {
  height: 36px;
  padding: 0 0.75rem;
  border-color: var(--andes-border-subtle);
  color: var(--andes-warm-gray);
}

.data-table { width: 100%; border-collapse: collapse; }

.data-table th {
  font-weight: var(--andes-weight-medium);
  color: var(--andes-charcoal);
  padding: var(--andes-table-cell-padding-v) var(--andes-space-5);
  text-align: left;
  border-bottom: var(--andes-table-header-border);
  font-size: var(--andes-text-sm);
  text-transform: uppercase;
  letter-spacing: var(--andes-table-header-tracking);
}

.data-table td {
  padding: var(--andes-table-cell-padding-v) var(--andes-space-5);
  border-bottom: var(--andes-table-cell-border);
  vertical-align: middle;
  font-size: var(--andes-text-sm);
  color: var(--andes-charcoal);
}

.data-table tr:nth-child(even) td {
  background-color: var(--andes-off-white);
}

.data-table tr:hover td {
  background-color: var(--andes-container-emphasized);
}

.data-table .data-link {
  color: var(--andes-blue);
  text-decoration: none;
  display: flex;
  align-items: center;
}
.data-table .data-link:hover { text-decoration: underline; }
.data-table .data-link i {
  margin-left: 0.5rem;
  font-size: var(--andes-text-xs);
  opacity: 0.6;
}

/* =========================================
   Form Controls
   ========================================= */

.form-control,
.form-select {
  border-radius: var(--andes-radius-sm);
  border: var(--andes-border-hairline) solid var(--andes-border-gridline);
  padding: 0.5rem 0.75rem;
  font-size: var(--andes-text-sm);
  font-family: var(--andes-font-body);
  color: var(--andes-charcoal);
  background-color: var(--andes-white);
  box-shadow: none;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--andes-blue);
  box-shadow: 0 0 0 0.15rem rgba(0, 119, 250, 0.15);
}

.form-label {
  font-weight: var(--andes-weight-medium);
  font-size: var(--andes-text-sm);
  margin-bottom: 0.5rem;
  color: var(--andes-charcoal);
}

/* =========================================
   Month / Year Picker
   ========================================= */

.date-picker { position: relative; }

.month-input-picker {
  z-index: 9999;
  margin-top: 4px;
  border: var(--andes-border-hairline) solid var(--andes-border-subtle);
  border-radius: var(--andes-radius-sm);
  overflow: visible;
  width: 250px !important;
  left: auto !important;
  right: 0 !important;
  top: 100% !important;
  position: absolute;
  background-color: var(--andes-white);
  box-shadow: none;
  transform: translateZ(0);
  isolation: isolate;
}

.month-input-picker--up {
  top: auto !important;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 4px;
}

.month-value {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: var(--andes-radius-sm);
  transition: all 0.1s ease;
  font-size: var(--andes-text-sm);
  border: var(--andes-border-hairline) solid transparent;
  cursor: pointer;
  height: 2.25rem;
  font-weight: var(--andes-weight-medium);
  color: var(--andes-charcoal);
}

.month-radio:checked + .month-value {
  color: var(--andes-white);
  background-color: var(--andes-blue);
  border-color: var(--andes-blue);
  font-weight: var(--andes-weight-medium);
}

.month-radio:not([disabled]) + .month-value:hover {
  color: var(--andes-blue);
  background-color: var(--primary-blue-background);
  border-color: var(--andes-blue);
}

.month-radio:disabled + .month-value {
  color: var(--andes-warm-gray);
  background-color: var(--andes-off-white);
  cursor: not-allowed;
  opacity: 0.6;
}

#year-input {
  border: var(--andes-border-hairline) solid var(--andes-border-gridline);
  border-radius: var(--andes-radius-sm);
  font-weight: var(--andes-weight-medium);
  font-family: var(--andes-font-body);
  padding: 0.5rem 0.75rem;
  background-color: var(--andes-white);
  color: var(--andes-charcoal);
  box-shadow: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2389887b' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 16px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 2rem;
}
#year-input:hover  { border-color: var(--andes-warm-gray); }
#year-input:focus  {
  border-color: var(--andes-blue);
  box-shadow: 0 0 0 0.15rem rgba(0, 119, 250, 0.15);
  outline: none;
}

.month-input {
  background-color: var(--andes-white);
  border: var(--andes-border-hairline) solid var(--andes-border-gridline);
  border-radius: var(--andes-radius-sm);
  padding: 0.5rem 0.75rem;
  transition: all 0.1s ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: none;
  font-size: var(--andes-text-sm);
  color: var(--andes-charcoal);
}
.month-input:hover { border-color: var(--andes-warm-gray); }
.month-input:focus {
  box-shadow: 0 0 0 0.15rem rgba(0, 119, 250, 0.15);
  border-color: var(--andes-blue) !important;
}

/* =========================================
   Alert / Empty state
   ========================================= */

[class*="alert-"] {
  background-color: var(--andes-container-emphasized) !important;
  border: var(--andes-border-hairline) solid var(--andes-blue) !important;
  border-radius: var(--andes-radius-sm) !important;
  padding: var(--andes-space-5) !important;
  color: var(--andes-charcoal) !important;
  font-weight: var(--andes-weight-medium) !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: hidden !important;
  margin: 0.5rem 0 !important;
  border-left: var(--andes-border-accent) solid var(--andes-blue) !important;
}

/* =========================================
   Resources page
   ========================================= */

.files, .support-contacts { margin-bottom: var(--andes-space-6); }

.files > h2, .support-contacts > h2 {
  background-color: var(--andes-container-emphasized);
  padding: var(--andes-space-4) var(--andes-space-5);
  border-radius: var(--andes-radius-sm);
  margin-bottom: var(--andes-space-4);
  color: var(--andes-blue);
  font-weight: var(--andes-weight-medium);
  font-size: var(--andes-text-base);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-left: var(--andes-border-accent) solid var(--andes-blue);
}

.files svg, .support-contacts svg {
  transition: transform 0.15s ease;
  color: var(--andes-blue);
}
.files svg.fa-chevron-up,
.support-contacts svg.fa-chevron-up { transform: rotate(180deg); }

/* =========================================
   Badge
   ========================================= */

.badge {
  font-weight: var(--andes-weight-medium);
  padding: 0.25em 0.6em;
  border-radius: var(--andes-radius-sm);
  font-size: var(--andes-text-sm);
}

/* =========================================
   Charts
   ========================================= */

.chart-container          { position: relative; height: 300px; width: 100%; }
.chart-container.taller   { height: 400px; }

/* =========================================
   Stages (unit status cards)
   ========================================= */

.stages-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--andes-kpi-gap);
  margin-bottom: 0;
}

.stage-card {
  background-color: var(--andes-white);
  border-radius: var(--andes-radius-sm);
  border: var(--andes-border-hairline) solid var(--andes-border-subtle);
  overflow: hidden;
  height: 100px;
  transition: border-color 0.15s ease;
}
.stage-card:hover { border-color: var(--andes-warm-gray); }

.stage-inner {
  padding: var(--andes-space-4);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.stage-title {
  margin: 0 0 4px 0;
  font-size: var(--andes-text-sm);
  font-weight: var(--andes-weight-medium);
  color: var(--andes-charcoal);
}

.stage-description {
  color: var(--andes-warm-gray);
  font-size: var(--andes-text-sm);
  line-height: 1.5;
  margin: 0;
}

.stage-card.onboarding  { border-left: var(--andes-border-accent) solid var(--andes-amber); }
.stage-card.rampup      { border-left: var(--andes-border-accent) solid var(--andes-blue); }
.stage-card.stabilized  { border-left: var(--andes-border-accent) solid var(--andes-green); }
.stage-card.consolidated{ border-left: var(--andes-border-accent) solid var(--andes-navy); }

@media (max-width: 991.98px) {
  .stages-grid { grid-template-columns: 1fr; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .stages-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================
   Timeline
   ========================================= */

.timeline .timeline-item {
  display: flex;
  align-items: flex-start;
}
.timeline .timeline-item .timeline-item-marker {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
}
.timeline .timeline-item .timeline-item-marker .timeline-item-marker-text {
  font-size: var(--andes-text-sm);
  width: 6rem;
  color: var(--andes-warm-gray);
  text-align: center;
  margin-bottom: 0.5rem;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.timeline .timeline-item .timeline-item-marker .timeline-item-marker-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  width: 3rem;
  background-color: var(--andes-off-white);
  border-radius: 100%;
}
.timeline .timeline-item .timeline-item-content {
  padding-top: 0;
  padding-bottom: 2rem;
  padding-left: 1rem;
  width: 100%;
}
.timeline .timeline-item:last-child .timeline-item-content { padding-bottom: 0 !important; }

@media (min-width: 576px) {
  .timeline .timeline-item .timeline-item-marker {
    flex-direction: row;
    transform: translateX(1.625rem);
    margin-bottom: 0;
  }
  .timeline .timeline-item .timeline-item-marker .timeline-item-marker-text {
    margin-right: 0.5rem;
    margin-bottom: 0;
  }
  .timeline .timeline-item .timeline-item-content {
    padding-top: 0.75rem;
    padding-bottom: 3rem;
    padding-left: 3rem;
    border-left: solid 0.25rem var(--andes-off-white);
  }
  .timeline .timeline-item:last-child .timeline-item-content {
    border-left-color: transparent;
  }
}

.timeline.timeline-sm .timeline-item .timeline-item-marker {
  transform: translateX(0.875rem);
}
.timeline.timeline-sm .timeline-item .timeline-item-marker .timeline-item-marker-text {
  width: 3rem;
  font-size: 0.7rem;
}
.timeline.timeline-sm .timeline-item .timeline-item-marker .timeline-item-marker-indicator {
  height: 1.5rem;
  width: 1.5rem;
  font-size: var(--andes-text-sm);
}
.timeline.timeline-sm .timeline-item .timeline-item-content {
  font-size: var(--andes-text-sm);
  padding-top: 0.15rem;
  padding-bottom: 1rem;
  padding-left: 1.5rem;
}

.timeline.timeline-xs .timeline-item .timeline-item-marker {
  transform: translateX(0.5625rem);
}
.timeline.timeline-xs .timeline-item .timeline-item-marker .timeline-item-marker-text {
  width: 3rem;
  font-size: 0.7rem;
}
.timeline.timeline-xs .timeline-item .timeline-item-marker .timeline-item-marker-indicator {
  height: 0.875rem;
  width: 0.875rem;
  font-size: var(--andes-text-sm);
  border: 0.125rem solid var(--andes-white);
  margin-top: -0.125rem;
}
.timeline.timeline-xs .timeline-item .timeline-item-content {
  font-size: var(--andes-text-sm);
  padding-top: 0;
  padding-bottom: 1rem;
  padding-left: 1.5rem;
}

/* =========================================
   Tooltip (action)
   ========================================= */

.action-tooltip { position: relative; }
.action-tooltip .action-tooltip-text {
  visibility: hidden;
  width: 8rem;
  background-color: var(--andes-charcoal);
  color: var(--andes-white);
  text-align: center;
  border-radius: var(--andes-radius-sm);
  padding: 0.3rem 0;
  position: absolute;
  z-index: 10;
  bottom: 100%;
  left: 50%;
  margin-left: -4rem;
  font-size: var(--andes-text-sm);
}
.action-tooltip .action-tooltip-text::after {
  content: " ";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -0.3rem;
  border: 0.3rem solid transparent;
  border-top-color: var(--andes-charcoal);
}
.action-tooltip:hover .action-tooltip-text { visibility: visible; }

/* =========================================
   Tabs
   ========================================= */

.tabs {
  display: flex;
  margin: 0 0 var(--andes-space-5) var(--andes-space-4);
  background-color: var(--andes-off-white);
  border-radius: var(--andes-radius-sm);
  border: var(--andes-border-hairline) solid var(--andes-border-subtle);
  padding: 2px;
  width: fit-content;
}

.tabs > div {
  padding: 0.375rem var(--andes-space-4);
  cursor: pointer;
  font-weight: var(--andes-weight-medium);
  font-size: var(--andes-text-sm);
  color: var(--andes-warm-gray);
  transition: color 0.1s ease, background-color 0.1s ease;
  border-radius: var(--andes-radius-sm);
  border: none;
}

.tabs > div:hover:not(.selected) { color: var(--andes-charcoal); }

.tabs > div.selected {
  color: var(--andes-white);
  background-color: var(--andes-navy);
  box-shadow: none;
}

@media (max-width: 540px) {
  .tabs-dyn,
  .tabs-dyn > div { font-size: 0.6rem; }
}

/* =========================================
   TOTP (2-FA entry)
   ========================================= */

.totp {
  width: 2.5rem;
  border: none;
  border-bottom: var(--andes-border-medium) solid var(--andes-charcoal);
  text-align: center;
  font-size: 2.25rem;
  cursor: pointer;
  pointer-events: all;
  font-family: var(--andes-font-body);
}
.totp:focus {
  border-bottom: var(--andes-border-medium) solid var(--andes-blue);
  outline: none;
}
.totp-wrap:first-child > .totp {
  cursor: pointer;
  pointer-events: all;
}

/* =========================================
   NPS Survey
   ========================================= */

.survey-card {
  top: 15vh;
  left: 33vw;
  z-index: 80;
  overflow-y: auto;
  max-height: 80vh;
  width: 30rem;
  border: var(--andes-border-hairline) solid var(--andes-border-subtle) !important;
  box-shadow: none !important;
}

.survey-close { top: 10px; right: 10px; }

.survey-score-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: var(--andes-radius-sm) !important;
}
.survey-score-btn:hover { background-color: var(--andes-blue); }

input[type="radio"]:checked + .survey-score-btn {
  background-color: var(--andes-blue);
  color: var(--andes-white);
  border-color: var(--andes-blue);
}

@media (max-width: 901px) { .survey-card { left: 20vw; } }
@media (max-width: 767px) { .survey-card { left: 12vw; } }
@media (max-width: 630px) { .survey-card { left: 10vw; } }
@media (max-width: 585px) { .survey-card { left:  7vw; } }
@media (max-width: 545px) { .survey-card { left: 5vw; width: 28rem; } .survey-score-btn { width: 25px; height: 25px; } }
@media (max-width: 545px) { .survey-card { width: 24rem; } .survey-score-btn { width: 20px; height: 20px; } }
@media (max-width: 460px) { .survey-card { width: 23.3rem; } }

/* =========================================
   Lucide Icons
   ========================================= */

.icon    { width: auto; height: var(--andes-icon-md); }
.icon-sm { width: auto; height: var(--andes-icon-sm); }
.icon-xs { width: auto; height: var(--andes-icon-xs); }

/* =========================================
   Modal
   ========================================= */

.w-modal { width: calc(100% - var(--sidebar-width)); }

@media (max-width: 991.98px) {
  .w-modal { width: 100%; }
}

/* =========================================
   Utility / Helper classes
   ========================================= */

/* Andes palette bg utilities — used for dynamic legend color dots + status badges */
.bg-navy      { background-color: var(--andes-navy) !important; }
.bg-blue      { background-color: var(--andes-blue) !important; }
.bg-green     { background-color: var(--andes-green) !important; }
.bg-red       { background-color: var(--andes-red) !important; }
.bg-warm-gray { background-color: var(--andes-warm-gray) !important; }
.bg-charcoal  { background-color: var(--andes-charcoal) !important; }
.bg-amber     { background-color: var(--andes-amber) !important; }

/* Status badge — flat, institutional */
.badge-status {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: var(--andes-radius-sm);
  font-size: var(--andes-text-xs);
  font-weight: var(--andes-weight-medium);
  color: var(--andes-white);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.bg-main { background-color: var(--andes-off-white); }

.positive-value { color: var(--andes-green) !important; }
.negative-value { color: var(--andes-red) !important; }
.neutral-value  { color: var(--andes-warm-gray) !important; }

.fs-7 { font-size: var(--andes-text-sm) !important; }  /* 12px */
.fs-8 { font-size: 0.75rem !important; }               /* 12px — kept same */
.fs-9 { font-size: var(--andes-text-xs) !important; }  /*  9px */

.h-95 { height: 95%; }
.h-5  { height: 5%; }

.ps-lang    { padding-left: 14rem; }
.w-form     { width: 22rem; }
.w-70       { width: 70%; }
.w-80       { width: 80%; }
.w-90       { width: 90%; }
.pt-dyn     { padding-top: 1.5rem; }

.header-image { padding-bottom: 0; }

.flex-dynamic          { flex-direction: row !important; }
.justify-content-dynamic { justify-content: space-between !important; }

.main-page {
  padding: var(--main-content-padding);
  max-width: 1400px;
  margin: 0;
  font-family: var(--andes-font-body);
}

.error-img { width: auto; height: 60vh; }

.page-header {
  padding-bottom: var(--andes-space-5);
  margin-bottom: var(--andes-space-5);
  border-bottom: var(--andes-border-hairline) solid var(--andes-border-subtle);
}

.bg-secondary-soft { background-color: var(--andes-off-white); }

.round-left-0  { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.round-right-0 { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.navbar {
  padding: 0 var(--andes-space-5);
  height: var(--header-height);
  border-bottom: none;
  background-color: var(--andes-navy);
}
.navbar-brand img { height: 28px; }

.g-4 {
  --bs-gutter-x: var(--andes-space-5);
  --bs-gutter-y: var(--andes-space-5);
}

/* =========================================
   Responsive adjustments
   ========================================= */

@media (min-width: 992px) {
  :root { --main-content-padding: var(--andes-space-6); }
  h1 { font-size: var(--andes-text-2xl); }
}

@media (max-width: 991.98px) {
  #panel-sidebar { display: none !important; }
  .sidebar-hidden { display: block !important; }
  .sidebar-menu.d-flex { display: flex !important; }
  :root { --main-content-padding: var(--andes-space-4); }
  .row { --bs-gutter-x: var(--andes-space-4); }
  .g-4 { --bs-gutter-x: var(--andes-space-4); --bs-gutter-y: var(--andes-space-4); }
  .card-header { padding: var(--andes-space-4); }
  .card-body   { padding: var(--andes-space-4); }
  .row > .col-md-4,
  .row > .col-md-6,
  .row > .col-md-3 { margin-bottom: var(--andes-space-4); }
}

@media (max-width: 540px) {
  .flex-dynamic           { flex-direction: column !important; }
  .justify-content-dynamic { justify-content: center !important; }
  #sidebar-menu           { margin-top: 1.8rem; }
  .page-top               { padding-top: 3rem; }
  .pt-dyn                 { padding-top: 3rem; }
}

/* =========================================
   Chart tabs — shared across views
   ========================================= */

.chart-tabs {
  display: flex;
  margin-bottom: var(--andes-space-4);
  background-color: var(--andes-off-white);
  border-radius: var(--andes-radius-sm);
  border: var(--andes-border-hairline) solid var(--andes-border-subtle);
  padding: 2px;
  width: fit-content;
}

.chart-tab {
  padding: 0.375rem var(--andes-space-4);
  cursor: pointer;
  font-weight: var(--andes-weight-medium);
  font-size: var(--andes-text-sm);
  color: var(--andes-warm-gray);
  transition: color 0.1s ease, background-color 0.1s ease;
  border-radius: var(--andes-radius-sm);
  border: none;
  background: none;
}

.chart-tab:hover:not(.active) { color: var(--andes-charcoal); }

.chart-tab.active {
  color: var(--andes-white);
  background-color: var(--andes-navy);
}

/* =========================================
   Statistics — grouped chip sections
   ========================================= */

.chip-group-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--andes-radius-sm);
  border: var(--andes-border-hairline) solid var(--andes-border-subtle);
  background-color: var(--andes-off-white);
  width: 100%;
}

.chip-group-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.chip-group-label {
  font-size: var(--andes-text-sm);
  font-weight: var(--andes-weight-semibold);
  flex: 1;
}

.chip-toggle-all {
  font-size: var(--andes-text-xs);
  color: var(--andes-warm-gray);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.chip-toggle-all:hover { color: var(--andes-charcoal); }

/* Unit details / unit status page header */
#unit-details-page .header-container,
#unit-status-page .header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--andes-space-5);
}