/* global-styles.css */

/* =======================================
   Skip to Main Content Link (WCAG 2.4.1)
   Hidden by default, visible when focused
   Positioned centered on the navbar (70px tall)
   ======================================= */
.skip-to-main {
  position: fixed;
  /* Center vertically in the 70px navbar: (70px - ~44px link height) / 2 ≈ 13px */
  top: 13px;
  left: 50%;
  transform: translateX(-50%) translateY(-200%);
  background: #fff;
  color: var(--dark-teal, #005362);
  padding: 10px 20px;
  z-index: 10001; /* Above navbar (z-index 10000 or less) */
  text-decoration: underline;
  font-weight: bold;
  font-size: 14px;
  border: 2px solid #fff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
}

.skip-to-main:focus {
  /* Slide into view, centered horizontally within the navbar */
  transform: translateX(-50%) translateY(0);
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* Ensure main content can receive focus when skip link is activated */
main:focus {
  outline: none;
}

/* =======================================
   Color Variables
   ======================================= */
   :root {
    /* Darkened for improved contrast with white (WCAG) */
    --medium-teal: #2C7F91; 
    --medium-teal-rgb: 44, 127, 145; 
    --dark-teal: #005362;
    --dark-teal-bg: #E9F2F4;
     /* Darkened semantic colors for better contrast (WCAG) */
    --success-green: #247E22;
    --success-green-rgb: 36, 126, 34;
    --success-green-bg: #EFF6EF;
    --alert-yellow: #F0AD4E; 
    --alert-yellow-rgb: 240, 168, 78; 
    --error-red: #CE4844; 
    --error-red-rgb: 206, 72, 68; 
    --light-teal-new: #9BE4EC;
    --vibrant-orange: #FF8347;
    --info-teal: #8BCBD6;
    --inactive-teal: #E6F3F5;
    --dark-amber: #5C3A00;
    --dark-amber-bg: #FDF6ED;
    --black:  #090b0d;
    --dark-gray: #38414C; 
    --medium-gray: #5D6D7E; 
    --silver: #A5ADB5; 
    --light-gray: #E8E8E8; 
    --lighter-gray: #F9F9F9; 
    --eggshell: #FCFCFC; 
    --special-green: #228B22; 
    /* Bootstrap primary overrides */
     --bs-primary: var(--medium-teal); 
     --bs-primary-rgb: var(--medium-teal-rgb);
  }
  
  /* =======================================
     Base Styles
     ======================================= */
  
  /* Typography */
  body {
    color: #333;
    line-height: 1.6;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
  }
  
  /* Links */
  a {
    color: var(--medium-teal);
    text-decoration: none;
  }

  a:hover {
    color: #256F82;  /* Hover state - matches primary teal button hover */
    text-decoration: underline;
  }

  a:active {
    color: #1F5E6D;  /* Press state - matches primary teal button press */
  }

  /* Button that visually looks like a link (use for non-navigational actions) */
  .brim-link-button {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline !important;
    color: var(--medium-teal) !important;
    text-decoration: underline !important;
    font: inherit !important;
    line-height: inherit !important;
    cursor: pointer;
  }

  /* Optional left spacing for inline link-buttons appended after label text */
  .brim-link-button--spaced {
    margin-left: 10px !important;
  }

  .brim-link-button:hover {
    color: #256F82 !important;  /* Hover state - matches primary teal button hover */
    text-decoration: underline !important;
  }

  .brim-link-button:active {
    color: #1F5E6D !important;  /* Press state - matches primary teal button press */
  }

  .brim-link-button:focus {
    outline: none !important;
  }

  .brim-link-button:focus-visible {
    outline: 3px solid rgba(var(--medium-teal-rgb), 0.55) !important;
    outline-offset: 2px !important;
    border-radius: 4px;
    text-decoration: underline !important;
  }

  .brim-link-button.hidden {
    display: none !important;
  }

  /* Button styled as transparent inline element (for icon-only toggle buttons) */
  .btn-link-style {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline !important;
    font: inherit !important;
    line-height: inherit !important;
    cursor: pointer;
    vertical-align: middle;
  }

  .btn-link-style:focus-visible {
    outline: 3px solid rgba(var(--medium-teal-rgb), 0.55) !important;
    outline-offset: 2px !important;
    border-radius: 4px;
  }

  /* Global focus ring (avoid default browser/Bootstrap blue) */
  :focus-visible {
    outline: 3px solid rgba(var(--medium-teal-rgb), 0.55);
    outline-offset: 2px;
  }

  /* Bootstrap form focus (BS3 uses a blue border/shadow by default) */
  .form-control:focus {
    border-color: var(--medium-teal) !important;
    outline: 0 !important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px rgba(var(--medium-teal-rgb), 0.25) !important;
  }

  /* Read-only status checkboxes (e.g., Setup Checklist) - not interactive */
  .readonly-checkbox {
    pointer-events: none;  /* Prevent mouse interaction */
  }

  /* =======================================
     Button Styles
     ======================================= */
  
  .btn {
    font-weight: bold;
    line-height: 20px;
    padding: 8px 16px;
    border-radius: 20px;
    transition: all 0.3s ease;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    margin-right: 10px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
  }
  
  /* Hover effect for all buttons */
  .btn:hover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.1);
  }
  
  /* Inactive state for all buttons */
  .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  .btn:disabled::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.5);
  }
  
  /* Button Variants */
  .btn-primary {
    background-color: var(--medium-teal) !important;
    border-color: var(--medium-teal) !important;
    color: #fff !important;
    border-style: solid !important;
    border-width: 1px !important;
  }

  /* PRIMARY BUTTON STATE SYSTEM (prevent any Bootstrap-blue hover/press/focus states) */
  .btn-primary:hover,
  .btn-primary:focus,
  .btn-primary.focus {
    background-color: var(--dark-teal) !important;
    border-color: var(--dark-teal) !important;
    color: #fff !important;
  }

  .btn-primary:active,
  .btn-primary.active,
  .show > .btn-primary.dropdown-toggle,
  .btn-primary:active:hover,
  .btn-primary.active:hover,
  .show > .btn-primary.dropdown-toggle:hover {
    background-color: #004350 !important; /* slightly darker than --dark-teal for press */
    border-color: #004350 !important;
    color: #fff !important;
  }

  /* Bootstrap often applies a blue box-shadow on :active:focus; force our focus ring instead */
  .btn-primary:focus,
  .btn-primary.focus,
  .btn-primary:focus-visible,
  .btn-primary:active:focus,
  .btn-primary:active:focus-visible,
  .btn-primary.active:focus,
  .btn-primary.active:focus-visible,
  .show > .btn-primary.dropdown-toggle:focus,
  .show > .btn-primary.dropdown-toggle:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--medium-teal-rgb), 0.35) !important;
    outline: none !important;
  }

  /* Bootstrap "info" is blue by default; map to Brim teal */
  .btn-info {
    background-color: var(--medium-teal) !important;
    border-color: var(--medium-teal) !important;
    color: #fff !important;
  }

  .btn-info:hover,
  .btn-info:focus {
    background-color: var(--dark-teal) !important;
    border-color: var(--dark-teal) !important;
    color: #fff !important;
  }

  /* Bootstrap link-buttons should not be blue */
  .btn-link {
    color: var(--medium-teal) !important;
  }

  .btn-link:hover,
  .btn-link:focus {
    color: #256F82 !important;  /* Hover state - matches primary teal button hover */
  }

  .btn-link:active {
    color: #1F5E6D !important;  /* Press state - matches primary teal button press */
  }

  /* Ensure Bootstrap semantic button classes use Brim palette */
  .btn-success {
    background-color: var(--success-green) !important;
    border-color: var(--success-green) !important;
    color: #fff !important;
  }

  .btn-danger,
  .btn-error {
    background-color: var(--error-red) !important;
    border-color: var(--error-red) !important;
    color: #fff !important;
  }

  /* Bootstrap warning buttons: keep yellow background but use dark text for contrast */
  .btn-warning,
  .btn-alert {
    background-color: var(--alert-yellow) !important;
    border-color: var(--alert-yellow) !important;
    color: #5C3A00 !important; /* dark amber for contrast on yellow */
  }

  /* SEMANTIC BUTTON STATE SYSTEM (prevent any Bootstrap-blue borders/shadows on press/focus) */
  .btn-success:hover,
  .btn-success:focus,
  .btn-success.focus {
    background-color: var(--success-green) !important;
    border-color: var(--success-green) !important;
    color: #fff !important;
  }

  .btn-success:active,
  .btn-success.active,
  .show > .btn-success.dropdown-toggle {
    background-color: var(--success-green) !important;
    border-color: var(--success-green) !important;
    color: #fff !important;
  }

  .btn-danger:hover,
  .btn-danger:focus,
  .btn-danger.focus,
  .btn-error:hover,
  .btn-error:focus,
  .btn-error.focus {
    background-color: var(--error-red) !important;
    border-color: var(--error-red) !important;
    color: #fff !important;
  }

  .btn-danger:active,
  .btn-danger.active,
  .show > .btn-danger.dropdown-toggle,
  .btn-error:active,
  .btn-error.active,
  .show > .btn-error.dropdown-toggle {
    background-color: var(--error-red) !important;
    border-color: var(--error-red) !important;
    color: #fff !important;
  }

  .btn-warning:hover,
  .btn-warning:focus,
  .btn-warning.focus,
  .btn-alert:hover,
  .btn-alert:focus,
  .btn-alert.focus {
    background-color: var(--alert-yellow) !important;
    border-color: var(--alert-yellow) !important;
    color: #5C3A00 !important;
  }

  .btn-warning:active,
  .btn-warning.active,
  .show > .btn-warning.dropdown-toggle,
  .btn-alert:active,
  .btn-alert.active,
  .show > .btn-alert.dropdown-toggle {
    background-color: var(--alert-yellow) !important;
    border-color: var(--alert-yellow) !important;
    color: #5C3A00 !important;
  }

  /* Remove Bootstrap blue focus/active shadows for semantic buttons; use our brand ring */
  .btn-success:focus,
  .btn-success.focus,
  .btn-success:focus-visible,
  .btn-success:active:focus,
  .btn-success:active:focus-visible,
  .btn-success.active:focus,
  .btn-success.active:focus-visible,
  .show > .btn-success.dropdown-toggle:focus,
  .show > .btn-success.dropdown-toggle:focus-visible,
  .btn-danger:focus,
  .btn-danger.focus,
  .btn-danger:focus-visible,
  .btn-danger:active:focus,
  .btn-danger:active:focus-visible,
  .btn-danger.active:focus,
  .btn-danger.active:focus-visible,
  .show > .btn-danger.dropdown-toggle:focus,
  .show > .btn-danger.dropdown-toggle:focus-visible,
  .btn-error:focus,
  .btn-error.focus,
  .btn-error:focus-visible,
  .btn-error:active:focus,
  .btn-error:active:focus-visible,
  .btn-error.active:focus,
  .btn-error.active:focus-visible,
  .show > .btn-error.dropdown-toggle:focus,
  .show > .btn-error.dropdown-toggle:focus-visible,
  .btn-warning:focus,
  .btn-warning.focus,
  .btn-warning:focus-visible,
  .btn-warning:active:focus,
  .btn-warning:active:focus-visible,
  .btn-warning.active:focus,
  .btn-warning.active:focus-visible,
  .show > .btn-warning.dropdown-toggle:focus,
  .show > .btn-warning.dropdown-toggle:focus-visible,
  .btn-alert:focus,
  .btn-alert.focus,
  .btn-alert:focus-visible,
  .btn-alert:active:focus,
  .btn-alert:active:focus-visible,
  .btn-alert.active:focus,
  .btn-alert.active:focus-visible,
  .show > .btn-alert.dropdown-toggle:focus,
  .show > .btn-alert.dropdown-toggle:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--medium-teal-rgb), 0.35) !important;
    outline: none !important;
  }

  /* Rounded corners everywhere, even if Bootstrap tries to override (e.g., btn-sm) */
  .btn,
  .btn.btn-sm,
  .btn.btn-xs,
  .btn.btn-lg {
    border-radius: 20px !important;
  }
  
  /* Keep Bootstrap helpers aligned with Brim primary teal */
  .bg-primary,
  .border-primary {
    background-color: var(--medium-teal) !important;
    border-color: var(--medium-teal) !important;
    color: #fff !important;
  }

  .text-primary {
    color: var(--medium-teal) !important;
  }

  .btn-export {
    width: auto;
    min-width: 150px;
    max-width: 250px;
  }
  
  .btn-success {
    background-color: var(--success-green);
    color: white;
    border: none;
  }
  
  .btn-alert {
    background-color: var(--alert-yellow);
    color: white;
    border: none;
  }
  
  .btn-error {
    background-color: var(--error-red);
    color: white;
    border: none;
  }
  
  .btn-contrast {
    background-color: var(--dark-teal);
    color: white;
    border: none;
  }
  
  .btn-secondary,
  .btn-outline-secondary,
  .btn-cancel,
  .btn-outline {
    background-color: #fff;
    color: var(--medium-teal);
    border: 2px solid var(--medium-teal);
  }

  /*
    SECONDARY BUTTON STATE SYSTEM
    - Default: white bg, teal border/text
    - Hover: subtle teal tint
    - Press: stronger teal tint + dark-teal border/text
    - Focus: teal focus ring (handled globally via :focus-visible) + reinforce border
    - Inactive: muted border/text
    - Toggled: filled teal (inverse) with hover/press/focus variants
  */

  /* Hover */
  .btn-secondary:hover,
  .btn-outline-secondary:hover,
  .btn-cancel:hover,
  .btn-outline:hover {
    background-color: rgba(var(--medium-teal-rgb), 0.08) !important;
    border-color: var(--medium-teal) !important;
    color: var(--medium-teal) !important;
  }

  /* Avoid double-hover overlays for outline buttons (we set explicit bg above) */
  .btn-secondary:hover::after,
  .btn-outline-secondary:hover::after,
  .btn-cancel:hover::after,
  .btn-outline:hover::after {
    background-color: transparent;
  }

  /* Press */
  .btn-secondary:active,
  .btn-outline-secondary:active,
  .btn-cancel:active,
  .btn-outline:active {
    background-color: rgba(var(--medium-teal-rgb), 0.18) !important;
    border-color: var(--dark-teal) !important;
    color: var(--dark-teal) !important;
    transform: translateY(0.5px);
  }

  /* Bootstrap sometimes injects blue focus/box-shadow on active press; neutralize */
  .btn-secondary:active:focus,
  .btn-outline-secondary:active:focus,
  .btn-cancel:active:focus,
  .btn-outline:active:focus,
  .btn-secondary:active:focus-visible,
  .btn-outline-secondary:active:focus-visible,
  .btn-cancel:active:focus-visible,
  .btn-outline:active:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--medium-teal-rgb), 0.25) !important;
    outline: none !important;
  }

  /* Focus */
  .btn-secondary:focus,
  .btn-outline-secondary:focus,
  .btn-cancel:focus,
  .btn-outline:focus {
    border-color: var(--medium-teal) !important;
    box-shadow: 0 0 0 3px rgba(var(--medium-teal-rgb), 0.25) !important;
    outline: none !important;
  }

  .btn-secondary:focus-visible,
  .btn-outline-secondary:focus-visible,
  .btn-cancel:focus-visible,
  .btn-outline:focus-visible {
    border-color: var(--dark-teal) !important;
    box-shadow: 0 0 0 3px rgba(var(--medium-teal-rgb), 0.35) !important;
    outline: none !important;
  }

  /* Inactive / disabled */
  .btn-secondary:disabled,
  .btn-outline-secondary:disabled,
  .btn-cancel:disabled,
  .btn-outline:disabled,
  .btn-secondary.disabled,
  .btn-outline-secondary.disabled,
  .btn-cancel.disabled,
  .btn-outline.disabled,
  fieldset:disabled .btn-secondary,
  fieldset:disabled .btn-outline-secondary,
  fieldset:disabled .btn-cancel,
  fieldset:disabled .btn-outline {
    background-color: #fff;
    border-color: var(--silver);
    color: var(--medium-gray);
    opacity: 1; /* avoid extra dimming beyond color change */
  }

  .btn-secondary:disabled::after,
  .btn-outline-secondary:disabled::after,
  .btn-cancel:disabled::after,
  .btn-outline:disabled::after,
  fieldset:disabled .btn-secondary::after,
  fieldset:disabled .btn-outline-secondary::after,
  fieldset:disabled .btn-cancel::after,
  fieldset:disabled .btn-outline::after {
    background-color: transparent;
  }

  /* Toggled (active/on) — support Bootstrap patterns + a utility `.is-toggled`
     Note: Toggled state uses outline style (same as default), hover fills it in.
     The badge/indicator shows the toggled state, not the button color. */
  .btn-secondary.is-toggled,
  .btn-outline-secondary.is-toggled,
  .btn-cancel.is-toggled,
  .btn-outline.is-toggled,
  .btn-secondary.active,
  .btn-outline-secondary.active,
  .btn-cancel.active,
  .btn-outline.active,
  .btn-secondary[aria-pressed="true"],
  .btn-outline-secondary[aria-pressed="true"],
  .btn-cancel[aria-pressed="true"],
  .btn-outline[aria-pressed="true"],
  .show > .btn-secondary.dropdown-toggle,
  .show > .btn-outline-secondary.dropdown-toggle,
  .show > .btn-outline.dropdown-toggle,
  .open > .btn-secondary.dropdown-toggle,
  .open > .btn-outline-secondary.dropdown-toggle,
  .open > .btn-outline.dropdown-toggle {
    background-color: var(--medium-teal);
    border-color: var(--medium-teal);
    color: #fff;
  }

  /* Toggled-hover: fills in with teal */
  .btn-secondary.is-toggled:hover,
  .btn-outline-secondary.is-toggled:hover,
  .btn-cancel.is-toggled:hover,
  .btn-outline.is-toggled:hover,
  .btn-secondary.active:hover,
  .btn-outline-secondary.active:hover,
  .btn-cancel.active:hover,
  .btn-outline.active:hover,
  .btn-secondary[aria-pressed="true"]:hover,
  .btn-outline-secondary[aria-pressed="true"]:hover,
  .btn-cancel[aria-pressed="true"]:hover,
  .btn-outline[aria-pressed="true"]:hover {
    background-color: var(--medium-teal) !important;
    border-color: var(--medium-teal) !important;
    color: #fff !important;
  }

  /* Toggled-press: darker teal fill */
  .btn-secondary.is-toggled:active,
  .btn-outline-secondary.is-toggled:active,
  .btn-cancel.is-toggled:active,
  .btn-outline.is-toggled:active,
  .btn-secondary.active:active,
  .btn-outline-secondary.active:active,
  .btn-cancel.active:active,
  .btn-outline.active:active,
  .btn-secondary[aria-pressed="true"]:active,
  .btn-outline-secondary[aria-pressed="true"]:active,
  .btn-cancel[aria-pressed="true"]:active,
  .btn-outline[aria-pressed="true"]:active {
    background-color: var(--dark-teal) !important;
    border-color: var(--dark-teal) !important;
    color: #fff !important;
  }

  /* Toggled-focus */
  .btn-secondary.is-toggled:focus-visible,
  .btn-outline-secondary.is-toggled:focus-visible,
  .btn-cancel.is-toggled:focus-visible,
  .btn-outline.is-toggled:focus-visible,
  .btn-secondary.active:focus-visible,
  .btn-outline-secondary.active:focus-visible,
  .btn-cancel.active:focus-visible,
  .btn-outline.active:focus-visible,
  .btn-secondary[aria-pressed="true"]:focus-visible,
  .btn-outline-secondary[aria-pressed="true"]:focus-visible,
  .btn-cancel[aria-pressed="true"]:focus-visible,
  .btn-outline[aria-pressed="true"]:focus-visible {
    border-color: var(--dark-teal);
  }

  .panel-button-container {
    display: flex;
    flex-wrap: wrap;
  }
  
  .panel-button-container .btn {
    flex: 1 0 auto; /* flex-grow: 1; flex-shrink: 0; flex-basis: auto; */
    margin: 5px;
  }

  /* Override border-radius for plus/minus buttons and reduce size while maintaining text size */
  .instance_div_btn {
    border-radius: 0 !important;
    transform: scale(0.85); /* Reduce size by 15% */
    font-size: calc(100% / 0.85); /* Increase font size to compensate for scaling */
  }

  .modal-footer .btn.btn-danger,
  .modal-footer .btn.btn-primary,
  .modal-footer .btn.btn-secondary,
  .modal-footer .btn.btn-default,
  .modal-footer .btn.btn-warning {
      padding: 10px 18px;
      border: 2px solid;
      margin-left: 0;
      margin-right: 10px;
      margin-bottom: 0;
      display: inline-block;
      vertical-align: middle;
      line-height: 20px;
      box-sizing: border-box;
  }

  /* Primary/danger buttons have no visible border, adjust padding to match height */
  .modal-footer .btn.btn-primary,
  .modal-footer .btn.btn-danger {
      border-color: transparent;
  }

  .modal-footer .btn:last-child {
      margin-right: 0; /* Remove margin from last button */
  }
  /* =======================================
     Form Elements
     ======================================= */
  
  .form-control {
    border: 1px solid var(--medium-teal);
    border-radius: 4px;
  }
  
  /* Checkboxes */
  .checkbox {
    accent-color: var(--medium-teal);
  }

  input[type="checkbox"],
  input[type="radio"] {
    accent-color: var(--medium-teal);
  }
  
  /* Dropdowns */
  .dropdown {
    color: var(--medium-teal);
  }
  
  /* =======================================
     Alert Styles
     ======================================= */
  
  .alert {
    border: none;
    border-radius: 4px;
    padding: 12px 20px;
    margin-bottom: 15px;
  }
  
  /* Alert Variants */
  .alert-warning {
    background-color: rgba(240, 173, 78, 0.2);
    color: #856404;
  }
  
  .alert-success {
    background-color: rgba(93, 184, 91, 0.2);
    color: #155724;
  }
  
  .alert-info {
    background-color: rgba(var(--medium-teal-rgb), 0.2);
    color: #0c5460;
  }
  
  .alert-danger {
    background-color: rgba(217, 83, 79, 0.2);
    color: #721c24;
  }

  /* =======================================
     Layout Styles
     ======================================= */
  
  /* Button Container */
  #variables-decisions .row,
  #variables-decisions .col-auto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  /* Dashboard */
  .dashboard-header {
    color: var(--medium-teal);
  }
  
  .dashboard-header.inactive {
    opacity: 0.5;
  }

  /* Target the search input field in DataTables */
  .dataTables_wrapper .dataTables_filter input[type="search"] {
      border: 1px solid var(--medium-teal);
      border-radius: 4px;
      padding: 6px 12px;
      height: 34px;
      line-height: 1.42857143;
      color: #555555;
      background-color: #ffffff;
      background-image: none;
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
      transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  }

  /* =======================================
     Table Striping - WCAG Contrast Fix
     ======================================= */
  /* Override Bootstrap's #f9f9f9 with lighter #FDFDFD for better contrast with medium-teal links */
  .table-striped > tbody > tr:nth-child(odd) > td,
  .table-striped > tbody > tr:nth-child(odd) > th {
    background-color: var(--eggshell) !important; /* #FDFDFD */
  }

  /* DataTables uses .odd/.even classes instead of :nth-child - override those too */
  table.dataTable tbody tr.odd > td,
  table.dataTable tbody tr.odd > th {
    background-color: var(--eggshell) !important; /* #FDFDFD */
  }

  table.dataTable tbody tr.even > td,
  table.dataTable tbody tr.even > th {
    background-color: #fff !important; /* white for even rows */
  }

  /* Override DataTables order-column sorted column highlighting */
  table.dataTable.order-column tbody tr > .sorting_1,
  table.dataTable.order-column tbody tr > .sorting_2,
  table.dataTable.order-column tbody tr > .sorting_3,
  table.dataTable.display tbody tr > .sorting_1,
  table.dataTable.display tbody tr > .sorting_2,
  table.dataTable.display tbody tr > .sorting_3 {
    background-color: var(--eggshell) !important;
  }

  table.dataTable.order-column tbody tr.odd > .sorting_1,
  table.dataTable.order-column tbody tr.odd > .sorting_2,
  table.dataTable.order-column tbody tr.odd > .sorting_3,
  table.dataTable.display tbody tr.odd > .sorting_1,
  table.dataTable.display tbody tr.odd > .sorting_2,
  table.dataTable.display tbody tr.odd > .sorting_3 {
    background-color: var(--eggshell) !important;
  }

  table.dataTable.order-column tbody tr.even > .sorting_1,
  table.dataTable.order-column tbody tr.even > .sorting_2,
  table.dataTable.order-column tbody tr.even > .sorting_3,
  table.dataTable.display tbody tr.even > .sorting_1,
  table.dataTable.display tbody tr.even > .sorting_2,
  table.dataTable.display tbody tr.even > .sorting_3 {
    background-color: #fff !important;
  }

  /* Also fix hover state for consistency */
  .table-hover > tbody > tr:hover > td,
  .table-hover > tbody > tr:hover > th,
  table.dataTable.hover tbody tr:hover > td,
  table.dataTable.hover tbody tr:hover > th,
  table.dataTable.display tbody tr:hover > td,
  table.dataTable.display tbody tr:hover > th {
    background-color: var(--eggshell) !important; /* #FDFDFD */
  }

  /* DataTables hover on sorted column */
  table.dataTable.display tbody tr:hover > .sorting_1,
  table.dataTable.display tbody tr:hover > .sorting_2,
  table.dataTable.display tbody tr:hover > .sorting_3,
  table.dataTable.order-column.hover tbody tr:hover > .sorting_1,
  table.dataTable.order-column.hover tbody tr:hover > .sorting_2,
  table.dataTable.order-column.hover tbody tr:hover > .sorting_3 {
    background-color: var(--eggshell) !important;
  }

  /* DataTables / pagination: remove default Bootstrap blue */
  .pagination > li > a,
  .pagination > li > span,
  .page-link {
    color: var(--medium-teal) !important;
  }

  .pagination > .active > a,
  .pagination > .active > span,
  .pagination > .active > a:hover,
  .pagination > .active > span:hover,
  .pagination > .active > a:focus,
  .pagination > .active > span:focus,
  .page-item.active .page-link {
    background-color: var(--medium-teal) !important;
    border-color: var(--medium-teal) !important;
    color: #fff !important;
  }

  .pagination > li > a:hover,
  .pagination > li > span:hover,
  .page-link:hover {
    color: #256F82 !important;  /* Hover state - matches primary teal button hover */
  }

  .pagination > li > a:active,
  .pagination > li > span:active,
  .page-link:active {
    color: #1F5E6D !important;  /* Press state - matches primary teal button press */
  }

  /* Keep primary helpers aligned to teal (do NOT style BS3 .panel-primary here; overview cards manage their own panel styles) */
  .label-primary,
  .badge-primary {
    background-color: var(--medium-teal) !important;
    border-color: var(--medium-teal) !important;
    color: #fff !important;
  }

  /* Bootstrap BS3 semantic labels often default to blues/greens/reds that may not meet contrast */
  .label-info {
    background-color: var(--medium-teal) !important;
    color: #fff !important;
  }

  .label-success {
    background-color: var(--success-green) !important;
    color: #fff !important;
  }

  .label-danger {
    background-color: var(--error-red) !important;
    color: #fff !important;
  }

  .label-warning {
    background-color: var(--alert-yellow) !important;
    color: #111 !important;
  }

  /* BS3 panels */
  .panel-info {
    border-color: var(--medium-teal) !important;
  }

  .panel-info > .panel-heading {
    background-color: rgba(var(--medium-teal-rgb), 0.12) !important;
    border-color: var(--medium-teal) !important;
    color: var(--dark-teal) !important;
  }

  .panel-success {
    border-color: var(--success-green) !important;
  }

  .panel-success > .panel-heading {
    background-color: rgba(var(--success-green-rgb), 0.12) !important;
    border-color: var(--success-green) !important;
    color: #0f2a17 !important;
  }

  .panel-danger {
    border-color: var(--error-red) !important;
  }

  .panel-danger > .panel-heading {
    background-color: rgba(var(--error-red-rgb), 0.12) !important;
    border-color: var(--error-red) !important;
    color: #3a0d12 !important;
  }

  .panel-warning {
    border-color: var(--alert-yellow) !important;
  }

  .panel-warning > .panel-heading {
    background-color: rgba(var(--alert-yellow-rgb), 0.22) !important;
    border-color: var(--alert-yellow) !important;
    color: #3b2a00 !important;
  }

  /* Bootstrap text helpers (avoid blue-ish info text) */
  .text-muted {
    /* Improve contrast for visual accessibility */
    color: var(--medium-gray) !important;
  }

  .text-info {
    color: var(--medium-teal) !important;
  }

  .text-success {
    color: var(--success-green) !important;
  }

  .text-danger {
    color: var(--error-red) !important;
  }

  .text-warning {
    color: #6b4a00 !important;
  }

  .help-block {
    /* Improve contrast for visual accessibility */
    color: var(--medium-gray) !important;
  }

  /* Bootstrap theme adds gradients; remove them for consistent contrast */
  .btn-primary,
  .btn-info,
  .btn-success,
  .btn-warning,
  .btn-danger {
    background-image: none !important;
  }

  /* DataTables RowReorder plugin uses a hard-coded Bootstrap blue outline. Override it. */
  div.dt-rowReorder-float-parent {
    outline-color: var(--medium-teal) !important;
  }

  /* DataTables (Bootstrap skin) active page button */
  .dataTables_wrapper .dataTables_paginate .paginate_button.current,
  .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--medium-teal) !important;
    border-color: var(--medium-teal) !important;
    color: #fff !important;
  }

  .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(var(--medium-teal-rgb), 0.12) !important;
    border-color: rgba(var(--medium-teal-rgb), 0.25) !important;
    color: var(--dark-teal) !important;
  }

  /* Highcharts default palette includes blues; override via CSS classes.
     IMPORTANT: Don't force stroke on .highcharts-point (e.g., pie slices) — it can break
     pie rendering/separators. Only force stroke on .highcharts-graph (lines), and fill on points. */
  .highcharts-point.highcharts-color-0,
  .highcharts-color-0 .highcharts-point {
    fill: var(--medium-teal) !important;
  }
  .highcharts-graph.highcharts-color-0,
  .highcharts-color-0 .highcharts-graph {
    stroke: var(--medium-teal) !important;
  }

  .highcharts-point.highcharts-color-1,
  .highcharts-color-1 .highcharts-point {
    fill: var(--dark-teal) !important;
  }
  .highcharts-graph.highcharts-color-1,
  .highcharts-color-1 .highcharts-graph {
    stroke: var(--dark-teal) !important;
  }

  .highcharts-point.highcharts-color-2,
  .highcharts-color-2 .highcharts-point {
    fill: var(--success-green) !important;
  }
  .highcharts-graph.highcharts-color-2,
  .highcharts-color-2 .highcharts-graph {
    stroke: var(--success-green) !important;
  }

  .highcharts-point.highcharts-color-3,
  .highcharts-color-3 .highcharts-point {
    fill: var(--alert-yellow) !important;
  }
  .highcharts-graph.highcharts-color-3,
  .highcharts-color-3 .highcharts-graph {
    stroke: var(--alert-yellow) !important;
  }

  .highcharts-point.highcharts-color-4,
  .highcharts-color-4 .highcharts-point {
    fill: var(--error-red) !important;
  }
  .highcharts-graph.highcharts-color-4,
  .highcharts-color-4 .highcharts-graph {
    stroke: var(--error-red) !important;
  }

  /* =======================================
     Miscellaneous
     ======================================= */
  
  /* Text Selection */
  ::selection {
    background-color: var(--inactive-teal);
  }

  /* =======================================
     Responsive Adjustments
     ======================================= */
  
  @media (max-width: 768px) {
    #variables-decisions .row {
      flex-direction: column;
      align-items: stretch;
    }
    
    #variables-decisions .col-auto,
    #export_button {
      width: 100%;
      justify-content: center;
    }
    
    #export_button {
      margin-top: 10px;
    }
  }
  @media (min-width: 768px) {
    #clearResultsModal .modal-dialog {
        min-width: 650px; /* Force the modal to be at least 650px wide to prevent button wrapping */
        margin: 30px auto; /* Maintain centering */
    }
}

#clearResultsModal .modal-body button {
    white-space: nowrap; /* Prevent buttons from wrapping */
}

/* =======================================
   Modal Header Close-Button Alignment
   ======================================= */
/* Make sure the “×” / close button sits in the true top-right corner,
   not flush against the bottom border of the header.*/
.modal-header {
    position: relative;            /* create positioning context */
}

/* Override Bootstrap’s modal-header close-button placement */
.modal-header .close,
.modal-header .btn-close {
    position: absolute !important;
    top: 8px !important;
    right: 12px !important;
    margin: 0 !important;
}

/* =======================================
   Example Format Sections - Text Wrapping
   ======================================= */
/* Ensure <pre> tags in example format sections wrap text instead of overflowing */
#exampleFormatSection pre,
#structuredDataFormatSection pre,
#variableFormatSection pre,
#decisionFormatSection pre {
    white-space: pre-wrap;       /* Preserve whitespace but allow wrapping */
    word-wrap: normal;           /* Don't break words - wrap whole words only */
    overflow-wrap: normal;       /* Don't break words in the middle */
    word-break: normal;          /* Keep words intact */
    overflow-x: auto;            /* Add horizontal scroll as fallback for very long unbreakable strings */
    max-width: 100%;             /* Constrain to parent width */
    background-color: #f5f5f5;   /* Light grey background */
    padding: 15px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.5;
}

/* =======================================
   Bundle Badges
   ======================================= */

.badge-bundle {
    display: inline-block;
    background-color: #EAECF3;
    color: #354889;
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 4px;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: normal;
}

/* =======================================
   Variable Scope Icons
   ======================================= */

/* Scope icons for variable display */
.scope-icon {
    margin-right: 8px;
}

/* CSS tooltip for scope icons */
.scope-icon-wrapper {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.scope-icon-wrapper::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 0; /* Align to left edge so tooltip never goes off left side of page */
    padding: 4px 8px;
    background-color: #333;
    color: #fff;
    font-size: 12px;
    white-space: nowrap;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transition: none; /* Instant appearance */
    pointer-events: none;
    z-index: 1000;
    margin-bottom: 4px;
}
.scope-icon-wrapper:hover::after {
    opacity: 1;
    visibility: visible;
}

/* =======================================
   Variable Name Display Component
   Reusable component for showing variable/decision names
   with scope icons, info icons, and stats icons.
   ======================================= */

/* Main wrapper - uses flexbox for alignment */
.var-name-display {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    max-width: 100%;
    gap: 6px;
}

/* Scope icon should not shrink */
.var-name-display .scope-icon-wrapper {
    flex-shrink: 0;
}

/* Only remove margin when scope-icon-wrapper is a direct flex child (gap handles spacing).
   When icon is nested inside a link, it still needs margin-right for spacing. */
.var-name-display > .scope-icon-wrapper .scope-icon {
    margin-right: 0;
}

/* Variable name text */
.var-name-text {
    word-break: break-word;
}

/* Variable name as link - must be underlined for accessibility */
a.var-name-link,
.var-name-link {
    display: inline-flex;
    align-items: center;
    word-break: break-word;
    color: var(--medium-teal) !important;
    text-decoration: underline !important;
}

/* When link contains scope icon, prevent wrapping under icon */
a.var-name-link .scope-icon-wrapper,
.var-name-link .scope-icon-wrapper {
    flex-shrink: 0;
}

/* Don't underline icons inside links */
a.var-name-link .scope-icon,
a.var-name-link .scope-icon-wrapper {
    text-decoration: none !important;
}

a.var-name-link img {
    text-decoration: none !important;
}

a.var-name-link:hover,
.var-name-link:hover {
    color: #256F82 !important;
    text-decoration: underline !important;
}

a.var-name-link:active,
.var-name-link:active {
    color: #1F5E6D !important;
}

/* Info icon styling - use !important to override global a tag styles */
a.var-name-info-icon,
.var-name-info-icon {
    flex-shrink: 0;
    color: #6c757d !important;
    text-decoration: none !important;
    vertical-align: middle;
}

a.var-name-info-icon:hover,
.var-name-info-icon:hover {
    color: var(--medium-teal) !important;
    text-decoration: none !important;
}

a.var-name-info-icon:focus-visible,
.var-name-info-icon:focus-visible {
    outline: 3px solid rgba(var(--medium-teal-rgb), 0.55) !important;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Stats/summarize icon styling */
a.var-name-stats-icon,
.var-name-stats-icon {
    flex-shrink: 0;
    color: var(--medium-teal) !important;
    text-decoration: none !important;
    vertical-align: middle;
}

a.var-name-stats-icon:hover,
.var-name-stats-icon:hover {
    color: var(--dark-teal) !important;
    text-decoration: none !important;
}

a.var-name-stats-icon:focus-visible,
.var-name-stats-icon:focus-visible {
    outline: 3px solid rgba(var(--medium-teal-rgb), 0.55) !important;
    outline-offset: 2px;
    border-radius: 2px;
}

/* =======================================
   Infotags
   Shared by: edit_variable, edit_decision, edit_hierarchy_fields,
              edit_variable_hierarchy
   ======================================= */

.infotag {
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0.21px;
    padding: 2px 10px;
    border-radius: 12px;
    margin-left: 8px;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.infotag .glyphicon-info-sign {
    cursor: pointer;
    font-size: 12px;
    opacity: 1;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    height: 18px;
    top: -1px;
}

.infotag .glyphicon-info-sign:hover {
    opacity: 0.7;
}

.infotag-library,
.infotag-library button {
    background-color: #EAECF3;
    color: #354889;
}

.infotag-logic-only {
    background-color: var(--lighter-gray);
    color: var(--medium-gray);
}

.infotag-logic-only .glyphicon-info-sign {
    color: var(--medium-gray);
}

.infotag-logic-only-results {
    background-color: var(--light-gray);
    color: var(--dark-gray);
}

.infotag-logic-only-results .glyphicon-info-sign {
    color: #6c757d;
}

/* Tooltip for infotag info icons */
.infotag .infotag-info-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.infotag .infotag-info-icon::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 10px;
    background-color: #333;
    color: #fff;
    font-size: 12px;
    white-space: normal;
    min-width: 200px;
    max-width: 320px;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 10000;
    margin-bottom: 4px;
    line-height: 1.4;
}
.infotag .infotag-info-icon:hover::after {
    opacity: 1;
}

/* =======================================
   Tree Node Styles
   Shared by: edit_variable_hierarchy, edit_hierarchy_fields,
              visualize_variable, visualize_decision
   ======================================= */

.tree-node {
    position: relative;
    margin-left: 25px;
    padding: 8px 12px;
    border-left: 3px solid var(--medium-teal);
    margin-bottom: 4px;
}

.tree-node.root-node {
    margin-left: 0;
    border-left-width: 4px;
    border-left-color: var(--dark-teal);
}

.tree-node.leaf-node {
    border-left-color: var(--light-gray);
}

.tree-node.duplicate {
    border-left-style: dashed;
    border-left-color: var(--medium-gray);
}

.tree-node.duplicate .node-name {
    color: var(--medium-gray);
}

.tree-node.highlight {
    background-color: var(--light-gray);
    border-radius: 4px;
}

.node-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    cursor: pointer;
}

.node-toggle {
    margin-right: 8px;
    font-size: 14px;
    color: var(--medium-teal);
    transition: transform 0.2s;
    user-select: none;
}

.node-toggle.expanded {
    transform: rotate(90deg);
}

.node-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--dark-gray);
    user-select: text;
}

.node-content {
    margin-top: 0;
    padding-top: 4px;
    padding-left: 24px;
}

.node-content.collapsed {
    display: none;
}

.children-container.collapsed {
    display: none;
}

/* Node content headers (for visualize pages) */
.node-header.content-header {
    font-weight: 600;
    font-size: 13px;
    color: var(--medium-gray);
    margin-bottom: 4px;
    cursor: pointer;
}

/* Node content groups do not get extra margin/border (for visualize pages) */
.tree-node.content-group {
    border-left: none;
    margin-bottom: 0;
    margin-left: 0;
}

/* Result value (bold text, no background) */
.result-value {
    font-size: 14px;
    font-weight: 700;
    margin-left: 8px;
    color: var(--dark-gray);
}

.result-separator {
    font-size: 14px;
    font-weight: 700;
    color: var(--dark-gray);
}

.result-value.no-value {
    font-weight: 400;
    font-style: italic;
    color: var(--medium-gray);
}

/* Reasoning section (for visualize pages) */
.result-reasoning {
    font-size: 14px;
    color: var(--dark-gray);
    margin-bottom: 8px;
    line-height: 1.5;
    padding: 8px 12px;
    background-color: var(--lighter-gray);
    border-radius: 4px;
}

/* Evidence section (for visualize pages) */
.result-evidence-snippet {
    font-size: 13px;
    color: var(--dark-gray);
    padding: 6px 10px;
    margin-bottom: 4px;
    border-left: 3px solid #E6A817;
    border-radius: 2px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Many-per-note evidence items */
.result-evidence-item {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--light-gray);
}

.result-evidence-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.result-evidence-item-header {
    margin-bottom: 6px;
}

.result-evidence-item-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--dark-teal);
}

/* Default value badge */
.result-default-badge {
    font-size: 11px;
    font-weight: 500;
    padding: 2px 6px;
    margin-left: 8px;
    background-color: var(--inactive-teal);
    color: var(--dark-teal);
    border-radius: 3px;
}

/* =======================================
   Visualization Styles
   Shared by: visualize_variable, visualize_decision
   ======================================= */

/* Detailed view toolbar (expand/collapse buttons) */
.detailed-view-toolbar {
    padding: 16px 0;
    margin-bottom: 8px;
}

.detailed-view-toolbar .btn {
    margin-right: 8px;
}

/* Detailed tree container */
.detailed-tree-container {
    padding: 12px 0;
}

/* Outline teal button (for expand/collapse controls) */
.btn-outline-teal {
    color: var(--medium-teal);
    border-color: var(--medium-teal);
    background: white;
}

.btn-outline-teal:hover,
.btn-outline-teal:focus,
.btn-outline-teal:active {
    background-color: var(--inactive-teal);
    color: var(--dark-teal);
    border-color: var(--dark-teal);
}

/* Children container spacing for visualization trees */
.detailed-tree-container .children-container {
    margin-top: 8px;
}