/* ============================================
   ANGI Energy Brand Colors
   Visual Identity Guidelines V010826
   ============================================
   
   COLOR USAGE RATIO:
   - 60% Neutrals (White, Mist, Graphite, Black)
   - 30% Surge (Primary Blue)
   - 10% Volt or Beacon (Secondary accents)
   
   ACCESSIBILITY APPROVED COMBINATIONS:
   - Black or Graphite ON White or Mist
   - Surge ON White or Mist
   - Black or Graphite ON Volt
   - Volt ON Surge
   - Mist ON Beacon
   
   ============================================ */

:root {
  /* ==========================================
     PRIMARY COLORS
     ========================================== */
  
  /* Surge - Primary Brand Blue */
  --angi-surge: #1158F0;
  --angi-surge-hover: #0E4AD0;
  
  /* White - Primary Neutral */
  --angi-white: #FFFFFF;
  
  
  /* ==========================================
     SECONDARY COLORS
     Use sparingly (10% of palette)
     ========================================== */
  
  /* Volt - Secondary Green */
  --angi-volt: #54D682;
  --angi-volt-hover: #45C573;
  
  /* Beacon - Service Pillar Orange */
  --angi-beacon: #E76400;
  --angi-beacon-hover: #D05A00;
  
  
  /* ==========================================
     NEUTRAL COLORS
     Use for 60% of the interface
     ========================================== */
  
  /* White */
  /* --angi-white: #FFFFFF; (defined above) */
  
  /* Mist - Light Neutral Background */
  --angi-mist: #F3F3F3;

  /* Ash - Text Neutral */
  --angi-ash: #5F6670;
  
  /* Graphite - Dark Neutral */
  --angi-graphite: #1A1A1A;
  
  /* Black */
  --angi-black: #000000;
  
  
  /* ==========================================
     SEMANTIC UI COLORS
     Mapped from brand colors for consistent UI
     ========================================== */
  
  /* Primary Actions - Surge */
  --angi-primary: var(--angi-surge);
  --angi-primary-hover: var(--angi-surge-hover);
  
  /* Success States - Volt */
  --angi-success: var(--angi-volt);
  --angi-success-hover: var(--angi-volt-hover);
  
  /* Warning/Accent States - Beacon */
  --angi-accent: var(--angi-beacon);
  --angi-accent-hover: var(--angi-beacon-hover);

  /* Caution States - Yellow */
  --angi-caution: #F7C325;
  --angi-caution-hover: #E0B01F;
  --angi-on-caution: #1A1A1A;   /* dark text on yellow for contrast */

  /* Critical States */
  --angi-critical: #D31245;
  --angi-critical-hover: #B10F3A;
  --angi-on-critical: #FFFFFF;  /* white text on dark red for contrast */

  /* Volt / Success text-on-color */
  --angi-on-volt: #1A1A1A;      /* dark text on bright green for contrast */

  /* Informational States */
  --angi-info: #236092;
  --angi-info-hover: #1B4A74;
  
  
  /* ==========================================
     DARK MODE BACKGROUNDS
     Using Graphite as the base
     ========================================== */
  --angi-dark-bg-primary: var(--angi-graphite);
  --angi-dark-bg-secondary: #2A2A2A;
  --angi-dark-bg-tertiary: #3A3A3A;
  --angi-dark-bg-elevated: #424242;
  
  
  /* ==========================================
     LIGHT MODE BACKGROUNDS
     Using Mist as secondary background
     ========================================== */
  --angi-light-bg-primary: var(--angi-white);
  --angi-light-bg-secondary: var(--angi-mist);

  /* ==========================================
     THEME TOKEN DEFAULTS (LIGHT)
     ========================================== */
  --angi-surface-primary: var(--angi-light-bg-primary);
  --angi-surface-secondary: var(--angi-light-bg-secondary);
  --angi-surface-elevated: var(--angi-white);
  --angi-surface-muted: #E7E7E7;
  --angi-border-subtle: #D6D6D6;
  --angi-text-primary: var(--angi-graphite);
  --angi-text-secondary: rgba(26, 26, 26, 0.72);
  --angi-nav-hover: var(--angi-surge);
  --angi-text-inverse: var(--angi-white);
  --angi-link: var(--angi-surge);
  --angi-link-hover: var(--angi-surge-hover);
  --angi-nav-bg: var(--angi-surface-secondary);
  --angi-nav-text: var(--angi-graphite);
  --angi-sidebar-bg: var(--angi-surface-secondary);
  --angi-sidebar-text: var(--angi-graphite);
  --angi-card-bg: var(--angi-surface-elevated);
  --angi-card-border: var(--angi-border-subtle);
  --angi-table-row-alt: var(--angi-surface-secondary);
  --angi-dropdown-hover-bg: #D0D0D0;
  --angi-focus-ring: rgba(17, 88, 240, 0.35);
  --angi-chip-bg: rgba(17, 88, 240, 0.1);
}

/* ============================================
   DARK THEME TOKENS
   Applied when body data-theme="dark"
   ============================================ */
html[data-theme="dark"],
body[data-theme="dark"] {
  --angi-surface-primary: var(--angi-dark-bg-primary);
  --angi-surface-secondary: var(--angi-dark-bg-secondary);
  --angi-surface-elevated: var(--angi-dark-bg-elevated);
  --angi-nav-hover: var(--angi-volt);
  --angi-surface-muted: var(--angi-dark-bg-tertiary);
  --angi-border-subtle: #4E4E4E;
  --angi-text-primary: var(--angi-white);
  --angi-text-secondary: rgba(243, 243, 243, 0.72);
  --angi-text-inverse: var(--angi-graphite);
  --angi-link: var(--angi-volt);
  --angi-link-hover: var(--angi-volt-hover);
  --angi-nav-bg: var(--angi-dark-bg-secondary);
  --angi-nav-text: var(--angi-white);
  --angi-sidebar-bg: var(--angi-dark-bg-secondary);
  --angi-sidebar-text: var(--angi-white);
  --angi-card-bg: var(--angi-dark-bg-secondary);
  --angi-card-border: #3F3F3F;
  --angi-table-row-alt: rgba(243, 243, 243, 0.06);
  --angi-dropdown-hover-bg: rgba(255, 255, 255, 0.08);
  --angi-focus-ring: rgba(84, 214, 130, 0.45);
  --angi-chip-bg: rgba(84, 214, 130, 0.16);
}


/* ============================================
  color: var(--angi-nav-hover) !important;
   All primary buttons use Surge Blue
   ============================================ */

button.btn-primary,
button.btn-default,
a.btn-primary,
a.btn-default,
.btn.btn-primary,
.btn.btn-default,
.btn-sm.btn-primary,
.btn-sm.btn-default {
  background-color: var(--angi-surge) !important;
  border-color: var(--angi-surge) !important;
  color: var(--angi-white) !important; /* Accessible: Surge + White */
}

button.btn-primary:hover,
button.btn-primary:focus,
button.btn-primary:active,
button.btn-default:hover,
button.btn-default:focus,
button.btn-default:active,
a.btn-primary:hover,
a.btn-primary:focus,
a.btn-primary:active,
a.btn-default:hover,
a.btn-default:focus,
a.btn-default:active,
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn.btn-default:hover,
.btn.btn-default:focus,
.btn.btn-default:active,
.btn-sm.btn-primary:hover,
.btn-sm.btn-primary:focus,
.btn-sm.btn-primary:active,
.btn-sm.btn-default:hover,
.btn-sm.btn-default:focus,
.btn-sm.btn-default:active {
  background-color: var(--angi-surge-hover) !important;
  border-color: var(--angi-surge-hover) !important;
  color: var(--angi-white) !important;
}

/* Outline buttons */
.btn-outline-primary {
  color: var(--angi-surge) !important;
  border-color: var(--angi-surge) !important;
  background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--angi-surge) !important;
  color: var(--angi-white) !important;
}

/* Actions button styling is consolidated at the end of this file */

/* Success buttons - Volt with Black/Graphite text */
.btn-success,
button.btn-success,
a.btn-success,
.btn-sm.btn-success {
  background-color: var(--angi-volt) !important;
  border-color: var(--angi-volt) !important;
  color: var(--angi-graphite) !important; /* Accessible: Graphite + Volt */
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
button.btn-success:hover,
button.btn-success:focus,
button.btn-success:active,
a.btn-success:hover,
a.btn-success:focus,
a.btn-success:active,
.btn-sm.btn-success:hover,
.btn-sm.btn-success:focus,
.btn-sm.btn-success:active {
  background-color: var(--angi-volt-hover) !important;
  border-color: var(--angi-volt-hover) !important;
  color: var(--angi-graphite) !important;
}

/* Warning/Accent buttons - Beacon with Mist text */
.btn-warning,
button.btn-warning,
a.btn-warning,
.btn-sm.btn-warning {
  background-color: var(--angi-beacon) !important;
  border-color: var(--angi-beacon) !important;
  color: var(--angi-mist) !important; /* Accessible: Mist + Beacon */
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
button.btn-warning:hover,
button.btn-warning:focus,
button.btn-warning:active,
a.btn-warning:hover,
a.btn-warning:focus,
a.btn-warning:active,
.btn-sm.btn-warning:hover,
.btn-sm.btn-warning:focus,
.btn-sm.btn-warning:active {
  background-color: var(--angi-beacon-hover) !important;
  border-color: var(--angi-beacon-hover) !important;
  color: var(--angi-mist) !important;
}

/* Danger/Critical buttons - Critical with White text */
.btn-danger,
button.btn-danger,
a.btn-danger,
.btn-sm.btn-danger {
  background-color: var(--angi-critical) !important;
  border-color: var(--angi-critical) !important;
  color: var(--angi-white) !important; /* Accessible: White + Critical */
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
button.btn-danger:hover,
button.btn-danger:focus,
button.btn-danger:active,
a.btn-danger:hover,
a.btn-danger:focus,
a.btn-danger:active,
.btn-sm.btn-danger:hover,
.btn-sm.btn-danger:focus,
.btn-sm.btn-danger:active {
  background-color: var(--angi-critical-hover) !important;
  border-color: var(--angi-critical-hover) !important;
  color: var(--angi-white) !important;
}


/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Background Colors */
.bg-angi-surge { background-color: var(--angi-surge) !important; }
.bg-angi-volt { background-color: var(--angi-volt) !important; }
.bg-angi-beacon { background-color: var(--angi-beacon) !important; }
.bg-angi-critical { background-color: var(--angi-critical) !important; }
.bg-angi-info { background-color: var(--angi-info) !important; }
.bg-angi-mist { background-color: var(--angi-mist) !important; }
.bg-angi-graphite { background-color: var(--angi-graphite) !important; }
.bg-angi-white { background-color: var(--angi-white) !important; }
.bg-angi-black { background-color: var(--angi-black) !important; }

/* Text Colors */
.text-angi-surge { color: var(--angi-surge) !important; }
.text-angi-volt { color: var(--angi-volt) !important; }
.text-angi-beacon { color: var(--angi-beacon) !important; }
.text-angi-critical { color: var(--angi-critical) !important; }
.text-angi-info { color: var(--angi-info) !important; }
.text-angi-ash { color: var(--angi-ash) !important; }
.text-angi-caution { color: var(--angi-caution) !important; }
.text-angi-mist { color: var(--angi-mist) !important; }
.text-angi-graphite { color: var(--angi-graphite) !important; }
.text-angi-white { color: var(--angi-white) !important; }
.text-angi-black { color: var(--angi-black) !important; }

/* Border Colors */
.border-angi-surge { border-color: var(--angi-surge) !important; }
.border-angi-volt { border-color: var(--angi-volt) !important; }
.border-angi-beacon { border-color: var(--angi-beacon) !important; }
.border-angi-graphite { border-color: var(--angi-graphite) !important; }
.border-angi-mist { border-color: var(--angi-mist) !important; }


/* ============================================
   ACCESSIBLE COLOR COMBINATIONS
   Pre-built classes for approved pairings
   ============================================ */

/* Black/Graphite text on White/Mist backgrounds */
.angi-accessible-dark-on-light {
  background-color: var(--angi-white);
  color: var(--angi-graphite);
}

.angi-accessible-dark-on-mist {
  background-color: var(--angi-mist);
  color: var(--angi-graphite);
}

/* Surge on White/Mist */
.angi-accessible-surge-on-light {
  background-color: var(--angi-white);
  color: var(--angi-surge);
}

.angi-accessible-surge-on-mist {
  background-color: var(--angi-mist);
  color: var(--angi-surge);
}

/* White on Surge */
.angi-accessible-light-on-surge {
  background-color: var(--angi-surge);
  color: var(--angi-white);
}

/* Black/Graphite on Volt */
.angi-accessible-dark-on-volt {
  background-color: var(--angi-volt);
  color: var(--angi-graphite);
}

/* Volt on Surge */
.angi-accessible-volt-on-surge {
  background-color: var(--angi-surge);
  color: var(--angi-volt);
}

/* Mist on Beacon */
.angi-accessible-mist-on-beacon {
  background-color: var(--angi-beacon);
  color: var(--angi-mist);
}


/* ============================================
   GLOBAL THEME APPLICATION
   ============================================ */

html,
body {
  background-color: var(--angi-surface-primary);
  color: var(--angi-text-primary);
}

body {
  transition: background-color 0.25s ease, color 0.25s ease;
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
}

a {
  color: var(--angi-link);
  transition: color 0.2s ease;
}

a:hover,
a:focus {
  color: var(--angi-link-hover);
}

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 3px solid var(--angi-focus-ring);
  outline-offset: 1px;
}

header,
.navbar,
.page-nav {
  background-color: var(--angi-nav-bg);
  color: var(--angi-nav-text);
}

.navbar .nav-link,
.navbar .nav-link .fas,
.navbar a,
.navbar a .fas,
.page-nav a {
  color: var(--angi-nav-text) !important;
}

.navbar .navbar-toggler,
.dashboard-menu .navbar .navbar-toggler,
.dashboard-sub-menu .navbar .navbar-toggler,
.sidebar-menu .navbar .navbar-toggler,
.navbar .navbar-toggler i,
.navbar .navbar-toggler .fas,
.navbar .navbar-toggler .far,
.navbar .navbar-toggler .fal,
.navbar .navbar-toggler span {
  color: var(--angi-text-primary) !important;
  border-color: var(--angi-card-border);
}

.breadcrumb .fas.fa-arrow-left {
  color: var(--angi-nav-text) !important;
}

#previous-page .fas.fa-arrow-left {
  color: var(--angi-nav-text) !important;
  transition: color 0.25s ease;
}

#previous-page:hover .fas.fa-arrow-left,
#previous-page:focus .fas.fa-arrow-left {
  color: var(--angi-nav-hover) !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:hover .fas,
.navbar a:hover,
.navbar a:hover .fas,
.navbar .nav-link:focus {
  color: var(--angi-nav-hover) !important;
}

.navbar .nav-link:focus,
.navbar a:focus,
.navbar .dropdown-toggle:focus,
.navbar .nav-link.active,
.navbar .dropdown-toggle.active,
.navbar .dropdown.show > .dropdown-toggle,
.navbar .dropdown .dropdown-toggle[aria-expanded="true"] {
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

.widget-button a:focus,
.widget-button a.active,
.widget-button a[aria-expanded="true"] {
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

.widget-info-link:focus,
.widget-info-link.active,
.widget-info-link[aria-expanded="true"],
.modal .widget-info-link:focus,
.modal .widget-info-link.active,
.modal .widget-info-link[aria-expanded="true"],
.modal a[data-toggle="popover"]:focus {
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

.navbar .dropdown-menu .dropdown-item,
.navbar .dropdown-menu .dropdown-item .fas,
.navbar .dropdown-menu .dropdown-item .far,
.navbar .dropdown-menu .dropdown-item .fal {
  color: inherit !important;
}

@media (prefers-color-scheme: light) {
  #sidebar .dropdown-menu .dropdown-item,
  #sidebar .dropdown-menu .dropdown-item:hover,
  #sidebar .dropdown-menu .dropdown-item:focus,
  .dashboard-menu .navbar .dropdown-menu .dropdown-item,
  .dashboard-menu .navbar .dropdown-menu .dropdown-item:hover,
  .dashboard-menu .navbar .dropdown-menu .dropdown-item:focus {
    color: var(--angi-text-primary) !important;
  }
}

html:not([data-theme="dark"]) #sidebar .dropdown-menu .dropdown-item,
body:not([data-theme="dark"]) #sidebar .dropdown-menu .dropdown-item,
html:not([data-theme="dark"]) #sidebar .dropdown-menu .dropdown-item:hover,
body:not([data-theme="dark"]) #sidebar .dropdown-menu .dropdown-item:hover,
html:not([data-theme="dark"]) .dashboard-menu .navbar .dropdown-menu .dropdown-item,
body:not([data-theme="dark"]) .dashboard-menu .navbar .dropdown-menu .dropdown-item {
  color: var(--angi-text-primary) !important;
}

.navbar .dropdown-menu .dropdown-item .text-angi-ash,
.navbar .dropdown-menu .dropdown-item .text-angi-ash .fas,
.navbar .dropdown-menu .dropdown-item .text-angi-ash .far,
.navbar .dropdown-menu .dropdown-item .text-angi-ash .fal {
  color: var(--angi-ash) !important;
}

.navbar .dropdown-menu .dropdown-item .text-angi-caution,
.navbar .dropdown-menu .dropdown-item .text-angi-caution .fas,
.navbar .dropdown-menu .dropdown-item .text-angi-caution .far,
.navbar .dropdown-menu .dropdown-item .text-angi-caution .fal {
  color: var(--angi-caution) !important;
}

.navbar .dropdown-menu .dropdown-item .text-angi-critical,
.navbar .dropdown-menu .dropdown-item .text-angi-critical .fas,
.navbar .dropdown-menu .dropdown-item .text-angi-critical .far,
.navbar .dropdown-menu .dropdown-item .text-angi-critical .fal {
  color: var(--angi-critical) !important;
}

.navbar .dropdown-menu .dropdown-item .text-angi-beacon,
.navbar .dropdown-menu .dropdown-item .text-angi-beacon .fas,
.navbar .dropdown-menu .dropdown-item .text-angi-beacon .far,
.navbar .dropdown-menu .dropdown-item .text-angi-beacon .fal {
  color: var(--angi-beacon) !important;
}

.navbar .dropdown-menu .dropdown-item .text-warning,
.navbar .dropdown-menu .dropdown-item .text-warning .fas,
.navbar .dropdown-menu .dropdown-item .text-warning .far,
.navbar .dropdown-menu .dropdown-item .text-warning .fal {
  color: var(--angi-beacon) !important;
}

.navbar .dropdown-menu .dropdown-item .text-danger,
.navbar .dropdown-menu .dropdown-item .text-danger .fas,
.navbar .dropdown-menu .dropdown-item .text-danger .far,
.navbar .dropdown-menu .dropdown-item .text-danger .fal {
  color: var(--angi-critical) !important;
}

.navbar .dropdown-menu .dropdown-item .text-info,
.navbar .dropdown-menu .dropdown-item .text-info .fas,
.navbar .dropdown-menu .dropdown-item .text-info .far,
.navbar .dropdown-menu .dropdown-item .text-info .fal {
  color: var(--angi-info) !important;
}

.navbar .dropdown-menu .dropdown-item .text-success,
.navbar .dropdown-menu .dropdown-item .text-success .fas,
.navbar .dropdown-menu .dropdown-item .text-success .far,
.navbar .dropdown-menu .dropdown-item .text-success .fal {
  color: var(--angi-volt) !important;
}

#helpbar a,
#helpbar a .fas,
#helpbar .nav-link,
#helpbar .nav-link .fas,
#helpbar .card-body,
#helpbar .card-body p,
#helpbar .card-body li {
  color: var(--angi-text-primary) !important;
}

#helpbar a:hover,
#helpbar a:focus,
#helpbar a:hover .fas,
#helpbar a:focus .fas {
  color: var(--angi-nav-hover) !important;
}

#sidebar,
.sidebar-header,
.dashboard-menu .navbar,
.dashboard-sub-menu .navbar {
  background-color: var(--angi-sidebar-bg);
  color: var(--angi-sidebar-text);
}

#sidebar a,
#sidebar .nav-link {
  color: var(--angi-sidebar-text);
}

#sidebar a:hover,
#sidebar .nav-link:hover,
#sidebar a:hover .fas,
#sidebar .nav-link:hover .fas,
.dashboard-menu .navbar .nav-link:hover,
.dashboard-sub-menu .navbar .nav-link:hover {
  color: var(--angi-nav-hover) !important;
}

.card,
.modal-content,
.dropdown-menu,
.list-group-item,
.popover-body,
.popover-header,
.jumbotron,
.file-upload-wrapper .card,
.equipment-card-background {
  background-color: var(--angi-card-bg);
  color: var(--angi-text-primary);
  border-color: var(--angi-card-border);
}

.card,
.modal-content,
.dropdown-menu,
.list-group-item,
.popover,
.jumbotron,
.file-upload-wrapper .card {
  border: 1px solid var(--angi-card-border);
}

.dropdown-menu .form-control,
.dropdown-menu .md-form input,
.dropdown-menu input.form-control {
  color: var(--angi-text-primary) !important;
}

.card-header,
.modal-header,
.dropdown-menu .dropdown-header {
  background-color: var(--angi-surface-secondary);
  color: var(--angi-text-primary);
  border-bottom: 1px solid var(--angi-card-border);
}

.modal-footer,
.card-footer {
  background-color: var(--angi-surface-secondary);
  border-top: 1px solid var(--angi-card-border);
}

.modal-header .close,
.modal-header .close span,
.modal-header .close i {
  color: var(--angi-text-primary);
  opacity: 0.85;
}

.modal-header .close:hover,
.modal-header .close:focus,
.modal-header .close:hover span,
.modal-header .close:focus span,
.modal-header .close:hover i,
.modal-header .close:focus i {
  color: var(--angi-link);
  opacity: 1;
}

.table {
  color: var(--angi-text-primary);
  background-color: var(--angi-card-bg);
}

.table-striped tbody tr:nth-of-type(odd),
.table-hover tbody tr:hover {
  background-color: var(--angi-table-row-alt);
}

.badge,
.badge-primary,
.badge-secondary,
.badge-success,
.badge-warning,
.badge-danger,
.badge-info,
.badge-dark,
.badge-light {
  color: var(--angi-text-inverse) !important;
}

.badge-secondary,
.badge-dark {
  background-color: var(--angi-graphite) !important;
}

.md-tabs {
  background-color: var(--angi-surface-secondary);
  border-bottom: 1px solid var(--angi-card-border);
}

.md-tabs .nav-link {
  color: var(--angi-text-secondary);
}

.md-tabs .nav-link.active,
.nav-tabs .nav-link.active,
.nav-tabs .nav-link.show,
.nav-tabs .nav-item.show .nav-link {
  color: var(--angi-link);
  background-color: var(--angi-surface-secondary);
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  color: var(--angi-link);
}

.md-progress .indeterminate {
  background-color: var(--angi-primary);
}

/* Loader: alternate Surge + Volt while respecting vendor motion */
.md-progress.angi-progress,
#loader.angi-progress {
  background-color: transparent;
}

html[data-theme="dark"] .md-progress.angi-progress,
body[data-theme="dark"] .md-progress.angi-progress,
html[data-theme="dark"] #loader.angi-progress,
body[data-theme="dark"] #loader.angi-progress {
  background-color: transparent;
}

.md-progress.angi-progress .indeterminate,
#loader.angi-progress .indeterminate {
  background-color: transparent;
}

.md-progress.angi-progress .indeterminate:before,
#loader.angi-progress .indeterminate:before,
.md-progress.angi-progress .indeterminate:after,
#loader.angi-progress .indeterminate:after {
  background-image: none;
  box-shadow: none;
}

.md-progress.angi-progress .indeterminate:before,
#loader.angi-progress .indeterminate:before {
  background-color: var(--angi-primary) !important;
  box-shadow: 1px 0 0 0 var(--angi-primary);
  animation-name: indeterminate;
  animation-duration: 2.1s;
  animation-timing-function: cubic-bezier(.65, .815, .735, .395);
  animation-iteration-count: infinite;
  animation-delay: 0s;
}

.md-progress.angi-progress .indeterminate:after,
#loader.angi-progress .indeterminate:after {
  background-color: var(--angi-volt) !important;
  box-shadow: -1px 0 0 0 var(--angi-volt);
  animation-name: indeterminate-short;
  animation-duration: 2.1s;
  animation-timing-function: cubic-bezier(.165, .84, .44, 1);
  animation-iteration-count: infinite;
  animation-delay: 1.15s;
}

.pagination .page-item .page-link {
  color: var(--angi-link);
}

.pagination .page-item.active .page-link {
  background-color: var(--angi-primary);
  border-color: var(--angi-primary);
  color: var(--angi-text-inverse);
}

.custom-select,
.select-wrapper .select-dropdown,
.form-control,
.md-form textarea.md-textarea,
input,
.mdb-select {
  background-color: var(--angi-card-bg);
  color: var(--angi-text-primary);
  border-color: var(--angi-card-border);
}

/* Dark mode: ensure typed form text remains primary (not MDB dark gray) */
body[data-theme="dark"]:not(.login-container) .form-control,
body[data-theme="dark"]:not(.login-container) .md-form input,
body[data-theme="dark"]:not(.login-container) .md-form textarea.md-textarea,
body[data-theme="dark"]:not(.login-container) .select-wrapper input.select-dropdown {
  color: var(--angi-text-primary) !important;
  -webkit-text-fill-color: var(--angi-text-primary) !important;
  caret-color: var(--angi-text-primary) !important;
}

body[data-theme="dark"]:not(.login-container) .md-form input:focus:not([readonly]),
body[data-theme="dark"]:not(.login-container) .md-form textarea.md-textarea:focus:not([readonly]),
body[data-theme="dark"]:not(.login-container) .form-control:focus {
  color: var(--angi-text-primary) !important;
  -webkit-text-fill-color: var(--angi-text-primary) !important;
  caret-color: var(--angi-text-primary) !important;
}

/* Override browser autofill highlight in dark mode */
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus,
html[data-theme="dark"] input:-webkit-autofill:active,
body[data-theme="dark"] input:-webkit-autofill,
body[data-theme="dark"] input:-webkit-autofill:hover,
body[data-theme="dark"] input:-webkit-autofill:focus,
body[data-theme="dark"] input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--angi-card-bg) inset !important;
  box-shadow: 0 0 0 1000px var(--angi-card-bg) inset !important;
  -webkit-text-fill-color: var(--angi-text-primary) !important;
  caret-color: var(--angi-text-primary);
  /* Suppress the browser's autofill background flash */
  transition: background-color 5000s ease-in-out 0s !important;
}

/* Float the MDB floating label up when its input is autofilled.
   Label is before input in the HTML so + selector won't work; use :has() instead. */
.md-form:has(input:-webkit-autofill) label {
  transform: translateY(-14px) scale(0.8) !important;
  transform-origin: 0% 100% !important;
}

.form-check-input[type=checkbox] + label,
label.btn input[type=checkbox] + label {
  color: var(--angi-text-primary);
}

.dropdown-item,
.list-group-item-action {
  color: var(--angi-text-primary);
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:active,
.dropdown-menu .dropdown-item.active,
.dropdown .dropdown-menu .dropdown-item:hover,
.dropdown .dropdown-menu .dropdown-item:focus,
.dropdown .dropdown-menu .dropdown-item:active,
.dropdown .dropdown-menu .dropdown-item.active,
.list-group-item-action:hover,
.list-group-item-action:focus,
.list-group-item-action:active,
.list-group-item-action.active {
  background-color: var(--angi-dropdown-hover-bg) !important;
  color: inherit !important;
}

/* Map widget (ArcGIS) hover treatment in dark mode should match dropdown hover */
html[data-theme="dark"] #SITE_MAP .esri-popup__header-title:hover,
html[data-theme="dark"] #SITE_MAP .esri-popup__header-title:focus,
html[data-theme="dark"] #SITE_MAP .esri-feature__title:hover,
html[data-theme="dark"] #SITE_MAP .esri-feature__title:focus,
html[data-theme="dark"] #SITE_MAP .esri-menu__list-item:hover,
html[data-theme="dark"] #SITE_MAP .esri-menu__list-item:focus {
  background-color: var(--angi-dropdown-hover-bg) !important;
}

.select-dropdown li:not(.disabled):not(.optgroup) span,
.select-dropdown li:not(.disabled):not(.optgroup) a {
  color: var(--angi-text-primary) !important;
}

.select-dropdown li:not(.disabled):not(.optgroup).active,
.select-dropdown li:not(.disabled):not(.optgroup):hover {
  background-color: var(--angi-dropdown-hover-bg) !important;
}

.select-dropdown li:not(.disabled):not(.optgroup).active span,
.select-dropdown li:not(.disabled):not(.optgroup):hover span,
.select-dropdown li:not(.disabled):not(.optgroup).active a,
.select-dropdown li:not(.disabled):not(.optgroup):hover a {
  color: var(--angi-text-primary) !important;
}

.service-stat-card {
  background-color: var(--service-stat-bg, var(--angi-card-bg));
  border: 1px solid var(--service-stat-border, var(--angi-border-subtle));
  color: var(--service-stat-text, var(--angi-text-primary));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s ease;
}

body[data-theme="dark"] .service-stat-card {
  box-shadow: none;
}

.service-stat-card .card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--service-stat-divider, rgba(255, 255, 255, 0.35));
  color: var(--service-stat-label, var(--angi-text-secondary));
  font-weight: 600;
  padding-bottom: 0.5rem;
  /* Prevent mid-word wrapping like "Premiu\n m" while still allowing wraps at spaces */
  word-break: normal;
  overflow-wrap: normal;
}

.service-stat-card .card-body {
  color: inherit;
}

.service-stat-card .service-stat-value {
  color: var(--service-stat-indicator, var(--angi-text-primary));
  font-weight: 600;
}

.service-stat-card a {
  color: inherit;
  text-decoration: none;
}

.service-stat-card a:hover,
.service-stat-card a:focus {
  color: inherit;
}

.service-stat-card--primary {
  --service-stat-bg: var(--angi-primary);
  --service-stat-border: var(--angi-primary);
  --service-stat-text: var(--angi-white);
  --service-stat-indicator: var(--angi-white);
  --service-stat-label: var(--angi-white);
}

.service-stat-card--positive {
  /* Use a darker green for filled stat badges to keep white text accessible,
     while leaving Volt unchanged elsewhere in the app. */
  --service-stat-bg: #198754;
  --service-stat-border: #198754;
  --service-stat-text: var(--angi-white);
  --service-stat-indicator: var(--angi-white);
  --service-stat-label: var(--angi-white);
}

.service-stat-card--caution {
  --service-stat-bg: var(--angi-accent);
  --service-stat-border: var(--angi-accent);
  --service-stat-text: var(--angi-white);
  --service-stat-indicator: var(--angi-white);
  --service-stat-label: var(--angi-white);
}

.service-stat-card--critical {
  --service-stat-bg: var(--angi-critical);
  --service-stat-border: var(--angi-critical);
  --service-stat-text: var(--angi-white);
  --service-stat-indicator: var(--angi-white);
  --service-stat-label: var(--angi-white);
}

.service-stat-card--neutral {
  --service-stat-bg: rgb(95, 102, 112);
  --service-stat-border: rgb(95, 102, 112);
  --service-stat-text: var(--angi-white);
  --service-stat-indicator: var(--angi-white);
  --service-stat-label: var(--angi-white);
}

.widget-title {
  color: inherit;
}

.widget-button a,
.widget-button a .fas,
.widget-button a .far,
.widget-button a .fal {
  color: inherit !important;
  opacity: 0.7;
}

.widget-button a:hover,
.widget-button a:focus,
.widget-button a:hover .fas,
.widget-button a:focus .fas,
.widget-button a:hover .far,
.widget-button a:focus .far,
.widget-button a:hover .fal,
.widget-button a:focus .fal {
  color: inherit !important;
  opacity: 1;
}

.widget-info-link,
.widget-info-link .fas,
.widget-info-link .far,
.widget-info-link .fal {
  color: var(--angi-text-secondary) !important;
}

.widget-info-link:hover,
.widget-info-link:focus,
.widget-info-link:hover .fas,
.widget-info-link:focus .fas,
.widget-info-link:hover .far,
.widget-info-link:focus .far,
.widget-info-link:hover .fal,
.widget-info-link:focus .fal {
  color: var(--angi-link) !important;
}

/* Remove mouse-click focus/active visual box inside tables (preserve keyboard focus)
   Uses :focus:not(:focus-visible) so keyboard users still see focus outlines.
*/
.table :focus:not(:focus-visible),
.table .btn:focus:not(:focus-visible),
.table a:focus:not(:focus-visible),
.table .dropdown-toggle:focus:not(:focus-visible),
.table i:focus:not(:focus-visible),
.table .fas:focus:not(:focus-visible),
.table .far:focus:not(:focus-visible),
.table .fal:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

.table .btn:active,
.table a:active,
.table .dropdown-toggle:active,
.table i:active,
.table .fas:active,
.table .far:active,
.table .fal:active {
  outline: none !important;
  box-shadow: none !important;
}

.login-logo-area {
  background-color: var(--angi-surface-primary);
  color: var(--angi-text-primary);
}

.login-area {
  background-color: var(--angi-card-bg);
  border: 1px solid var(--angi-card-border);
}

.btn-floating {
  background-color: var(--angi-primary);
  color: var(--angi-text-inverse);
}

.btn-floating:hover,
.btn-floating:focus {
  background-color: var(--angi-primary-hover);
}

.tri-button button,
.select-wrapper span.caret,
.md-form label,
.mdb-main-label,
.text-muted {
  color: var(--angi-text-secondary) !important;
}

/* Widget customization/edit flows: keep form-adjacent text primary in dark mode. */
html[data-theme="dark"] #AddWidgetModal .modal-title,
html[data-theme="dark"] #AddWidgetModal .modal-body p,
html[data-theme="dark"] #AddWidgetModal .form-check-label,
body[data-theme="dark"] #AddWidgetModal .modal-title,
body[data-theme="dark"] #AddWidgetModal .modal-body p,
body[data-theme="dark"] #AddWidgetModal .form-check-label,
html[data-theme="dark"] #new_widget_form .md-form label,
html[data-theme="dark"] #new_widget_form .mdb-main-label,
html[data-theme="dark"] #new_widget_form .text-muted,
body[data-theme="dark"] #new_widget_form .md-form label,
body[data-theme="dark"] #new_widget_form .mdb-main-label,
body[data-theme="dark"] #new_widget_form .text-muted {
  color: var(--angi-text-primary) !important;
}

.chip,
.badge-pill {
  background-color: var(--angi-chip-bg);
  color: var(--angi-text-primary);
}

@media (prefers-color-scheme: dark) {
  .pagination .page-item.active .page-link,
  .pagination .page-item.active .page-link:focus,
  .pagination .page-item.active .page-link:hover {
    background-color: var(--angi-volt) !important;
    border-color: var(--angi-volt) !important;
    color: var(--angi-text-inverse) !important;
    box-shadow: none !important;
    font-weight: 600;
  }
}

/* Consolidated ACTIONS button and dropdown-item rules appear at end of file. */

html[data-theme="dark"] .pagination .page-item.active .page-link,
body[data-theme="dark"] .pagination .page-item.active .page-link,
html[data-theme="dark"] .pagination .page-item.active .page-link:focus,
body[data-theme="dark"] .pagination .page-item.active .page-link:focus,
html[data-theme="dark"] .pagination .page-item.active .page-link:hover,
body[data-theme="dark"] .pagination .page-item.active .page-link:hover {
  background-color: var(--angi-volt) !important;
  border-color: var(--angi-volt) !important;
  color: var(--angi-text-inverse) !important;
  box-shadow: none !important;
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  .navbar .dropdown-menu .dropdown-item,
  .navbar .dropdown-menu .dropdown-item:hover,
  .navbar .dropdown-menu .dropdown-item:focus,
  #sidebar .dropdown-menu .dropdown-item,
  #sidebar .dropdown-menu .dropdown-item:hover,
  #sidebar .dropdown-menu .dropdown-item:focus {
    color: var(--angi-text-primary) !important;
  }
}

html[data-theme="dark"] .navbar .dropdown-menu .dropdown-item,
body[data-theme="dark"] .navbar .dropdown-menu .dropdown-item,
html[data-theme="dark"] .navbar .dropdown-menu .dropdown-item:hover,
body[data-theme="dark"] .navbar .dropdown-menu .dropdown-item:hover,
html[data-theme="dark"] #sidebar .dropdown-menu .dropdown-item,
body[data-theme="dark"] #sidebar .dropdown-menu .dropdown-item {
  color: var(--angi-text-primary) !important;
}

@media (prefers-color-scheme: light) {
  .pagination .page-item.active .page-link,
  .pagination .page-item.active .page-link:focus,
  .pagination .page-item.active .page-link:hover {
    background-color: var(--angi-primary) !important;
    border-color: var(--angi-primary) !important;
    color: var(--angi-text-inverse) !important;
    box-shadow: none !important;
    font-weight: 600;
  }
}

html:not([data-theme="dark"]) .pagination .page-item.active .page-link,
body:not([data-theme="dark"]) .pagination .page-item.active .page-link,
html:not([data-theme="dark"]) .pagination .page-item.active .page-link:focus,
body:not([data-theme="dark"]) .pagination .page-item.active .page-link:focus,
html:not([data-theme="dark"]) .pagination .page-item.active .page-link:hover,
body:not([data-theme="dark"]) .pagination .page-item.active .page-link:hover {
  background-color: var(--angi-primary) !important;
  border-color: var(--angi-primary) !important;
  color: var(--angi-text-inverse) !important;
  box-shadow: none !important;
  font-weight: 600;
}

.logo-dark { display: none; }
.logo-light { display: inline-block; }

@media (prefers-color-scheme: dark) {
  .logo-dark { display: inline-block; }
  .logo-light { display: none; }
}

html[data-theme="dark"] .logo-dark,
body[data-theme="dark"] .logo-dark {
  display: inline-block;
}

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

/* Consolidated ACTIONS rules are defined at the end of the file. */

/* ============================================
   Consolidated Actions button + dropdown styles
   - Centralized so maintainers can update tokens in one place
   - Uses theme tokens: --angi-primary and --angi-text-inverse / --angi-text-primary
   - High specificity and !important to override vendor rules
   ============================================ */
.btn-actions,
.table .btn-primary.dropdown-toggle,
button.btn-primary.dropdown-toggle,
a.btn-primary.dropdown-toggle {
  background-color: var(--angi-primary) !important;
  border-color: var(--angi-primary) !important;
  color: var(--angi-text-inverse) !important;
  box-shadow: none !important;
}

.btn-actions:hover,
.btn-actions:focus,
.btn-actions:active,
.table .btn-primary.dropdown-toggle:hover,
.table .btn-primary.dropdown-toggle:focus,
button.btn-primary.dropdown-toggle:hover,
button.btn-primary.dropdown-toggle:focus,
a.btn-primary.dropdown-toggle:hover,
a.btn-primary.dropdown-toggle:focus {
  background-color: var(--angi-primary-hover) !important;
  border-color: var(--angi-primary-hover) !important;
  color: var(--angi-text-inverse) !important;
}

/* Dropdown items should use the theme text token so they follow light/dark themes */
.table .dropdown-menu .dropdown-item,
table .dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item {
  color: var(--angi-text-primary) !important;
}

/* The app theme (html[data-theme]) controls dropdown text colors.
   Avoid using OS-level prefers-color-scheme fallbacks so dropdown items
   follow the selected app theme (light/dark). */