:root,
[data-bs-theme="light"] {
  /* Portal Palette Definitions */
  --portal-teal: #00707E;
  --portal-teal-rgb: 0, 112, 126;
  --portal-dark: #2D3561;
  --portal-dark-rgb: 45, 53, 97;
  --portal-navy: #1a1a2e;
  --portal-navy-rgb: 26, 26, 46;
  --portal-deep-teal: #005A65;
  --portal-deep-teal-rgb: 0, 90, 101;
  --portal-light-teal: #E8F4F6;
  --portal-light-teal-rgb: 232, 244, 246;
  --portal-accent-teal: #009FB0;
  --portal-accent-teal-rgb: 0, 159, 176;
  --portal-white: #ffffff;
  --portal-white-rgb: 255, 255, 255;
  --portal-gray: #6c757d;
  --portal-gray-rgb: 108, 117, 125;
  --portal-silver: #C3C4CB;
  --portal-silver-rgb: 195, 196, 203;
  --portal-black: #000000;
  --portal-black-rgb: 0, 0, 0;

  /* Portal Semantic Colors */
  --portal-success: #198754;
  --portal-success-rgb: 25, 135, 84;
  --portal-warning: #fd7e14;
  --portal-warning-rgb: 253, 126, 20;
  --portal-danger: #dc3545;
  --portal-danger-rgb: 220, 53, 69;

  /* Portal UI Chrome */
  --portal-page-bg: #FAFBFC;
  --portal-border: #DEE2E8;
  --portal-muted: #8B909E;
  --portal-label: #4B5563;
  --portal-placeholder: #C0C5CE;
  --portal-notice-bg: #FEF3CD;
  --portal-notice-text: #856404;



  /* Portal Role Assignments — update these when setting up a new portal */
  --portal-primary: var(--portal-teal);
  --portal-primary-rgb: var(--portal-teal-rgb);
  --portal-primary-gradient: var(--portal-dark);
  --portal-primary-hover: var(--portal-deep-teal);
  --portal-primary-hover-rgb: var(--portal-deep-teal-rgb);
  --portal-primary-subtle: var(--portal-light-teal);
  --portal-primary-active: var(--portal-dark);

  /* Typography */
  --portal-font-family: var(--bs-font-sans-serif);

  /* Bootstrap Variable Overrides */
  --bs-primary: var(--portal-primary);
  --bs-primary-rgb: var(--portal-primary-rgb);
  --bs-secondary: var(--portal-dark);
  --bs-secondary-rgb: var(--portal-dark-rgb);
  --bs-body-font-family: var(--portal-font-family);

  --bs-success: var(--portal-success);
  --bs-success-rgb: var(--portal-success-rgb);
  --bs-warning: var(--portal-warning);
  --bs-warning-rgb: var(--portal-warning-rgb);
  --bs-danger: var(--portal-danger);
  --bs-danger-rgb: var(--portal-danger-rgb);

  /* Body text */
  --bs-body-color: var(--portal-navy);
  --bs-body-color-rgb: var(--portal-navy-rgb);

  /* Links */
  --bs-link-color: var(--bs-primary);
  --bs-link-color-rgb: var(--bs-primary-rgb);
  --bs-link-hover-color: var(--portal-primary-hover);
  --bs-link-hover-color-rgb: var(--portal-primary-hover-rgb);

  /* Dropdowns */
  --bs-dropdown-link-active-bg: var(--bs-primary);
  --bs-dropdown-link-active-color: #fff;
}

/* Explicit Override for Dropdown Active State to ensure precedence */
.dropdown-item.active, 
.dropdown-item:active {
  background-color: var(--bs-primary);
  color: #fff;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--portal-primary-hover);
  --bs-btn-hover-border-color: var(--portal-primary-hover);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--portal-primary-active);
  --bs-btn-active-border-color: var(--portal-primary-active);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--portal-primary-hover);
  --bs-btn-active-border-color: var(--portal-primary-hover);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--portal-primary);
  --bs-btn-hover-border-color: var(--portal-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--portal-primary-active);
  --bs-btn-active-border-color: var(--portal-primary-active);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-secondary);
  --bs-btn-disabled-border-color: var(--bs-secondary);
}

.btn-outline-secondary {
  --bs-btn-color: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: var(--bs-secondary);
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--portal-primary);
  --bs-btn-active-border-color: var(--portal-primary);
  --bs-btn-disabled-color: var(--bs-secondary);
  --bs-btn-disabled-border-color: var(--bs-secondary);
}

/* Portal Custom Utility Classes */
.text-portal-teal { color: var(--portal-teal) !important; }
.bg-portal-teal { background-color: var(--portal-teal) !important; }

.text-portal-dark { color: var(--portal-dark) !important; }
.bg-portal-dark { background-color: var(--portal-dark) !important; }

.text-portal-navy { color: var(--portal-navy) !important; }
.bg-portal-navy { background-color: var(--portal-navy) !important; }

.text-portal-deep-teal { color: var(--portal-deep-teal) !important; }
.bg-portal-deep-teal { background-color: var(--portal-deep-teal) !important; }

.text-portal-light-teal { color: var(--portal-light-teal) !important; }
.bg-portal-light-teal { background-color: var(--portal-light-teal) !important; }

.text-portal-gray { color: var(--portal-gray) !important; }
.bg-portal-gray { background-color: var(--portal-gray) !important; }

.text-portal-silver { color: var(--portal-silver) !important; }
.bg-portal-silver { background-color: var(--portal-silver) !important; }

.text-portal-black { color: var(--portal-black) !important; }
.bg-portal-black { background-color: var(--portal-black) !important; }


/* --- Form Components (Inputs, Selects, Checks, Radios, Switches) --- */

/* Focus states for text inputs and selects */
.form-control:focus, 
.form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* Checkboxes and Radios */
.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.form-check-input:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* --- Navigation --- */

/* Nav Pills */
.nav-pills .nav-link.active, 
.nav-pills .show > .nav-link {
  background-color: var(--bs-primary);
  color: #fff;
}

/* Nav Tabs */
.nav-tabs .nav-link.active, 
.nav-tabs .nav-item.show .nav-link {
  color: var(--bs-primary);
}

.nav-link {
  color: var(--bs-primary);
}

.nav-link:hover, .nav-link:focus {
  color: var(--portal-primary-hover);
}

/* --- Pagination --- */

.page-link {
  color: var(--bs-primary);
}

.page-link:hover {
  color: var(--portal-primary-hover);
  border-color: var(--bs-border-color);
}

.page-link:focus {
  color: var(--portal-primary-hover);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.active > .page-link, 
.page-item.active .page-link {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}

/* --- List Group --- */

.list-group-item.active {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}

/* --- Progress Bars --- */

.progress-bar {
  background-color: var(--bs-primary);
}

/* --- Accordion --- */

.accordion-button:not(.collapsed) {
  color: var(--bs-primary);
  background-color: rgba(var(--bs-primary-rgb), 0.1); 
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.125); 
}

.accordion-button:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* --- Range Inputs --- */
.form-range::-webkit-slider-thumb {
  background: var(--bs-primary);
}
.form-range::-webkit-slider-thumb:active {
  background: var(--portal-primary-hover);
}
.form-range::-moz-range-thumb {
  background: var(--bs-primary);
}
.form-range::-moz-range-thumb:active {
  background: var(--portal-primary-hover);
}
.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}
.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/*================================================================
  JExcel Style Overrides
  ================================================================*/

/* General table styling */
.jexcel {
    border-right: 1px solid var(--portal-silver) !important;
    border-bottom: 1px solid var(--portal-silver) !important;
    font-family: inherit !important;
    font-size: 0.875rem !important;
    color: var(--portal-black) !important;
}

/* Header Cells styling */
.jexcel > thead > tr > td {
    background-color: var(--bs-tertiary-bg, #f8f8f8) !important;
    color: var(--portal-black) !important;
    font-size: var(--bs-body-font-size, 0.875rem) !important;
    font-family: var(--bs-body-font-family, inherit) !important;
    font-weight: 600 !important;
    border-top: 1px solid var(--portal-silver) !important;
    border-left: 1px solid var(--portal-silver) !important;
    padding: 8px 12px !important;
}

/* Row-header (first-child) */
.jexcel > tbody > tr > td:first-child {
    background-color: var(--bs-tertiary-bg, #f8f8f8) !important;
    font-weight: 600 !important;
    color: var(--portal-gray) !important;
}

/* Base Data Cells */
.jexcel > tbody > tr > td {
    color: var(--portal-black) !important;
    font-size: var(--bs-body-font-size, 0.875rem) !important;
    font-family: var(--bs-body-font-family, inherit) !important;
    border-top: 1px solid var(--portal-silver) !important;
    border-left: 1px solid var(--portal-silver) !important;
    padding: 6px 12px !important;
    vertical-align: middle !important;
}

/* Row zebra-striping and hover styling */
.jexcel > tbody > tr:nth-child(even) > td {
    background-color: rgba(var(--portal-silver-rgb), 0.05);
}

.jexcel > tbody > tr:hover > td {
    background-color: rgba(var(--portal-primary-rgb), 0.1) !important;
}

.jexcel > tbody > tr:hover > td.highlight {
    background-color: rgba(var(--portal-primary-rgb), 0.2) !important;
}

/* Selection Highlight overrides */
.jexcel_container .jexcel .highlight-top { border-top: 2px solid var(--portal-primary) !important; box-shadow: none !important; }
.jexcel_container .jexcel .highlight-left { border-left: 2px solid var(--portal-primary) !important; box-shadow: none !important; }
.jexcel_container .jexcel .highlight-right { border-right: 2px solid var(--portal-primary) !important; }
.jexcel_container .jexcel .highlight-bottom { border-bottom: 2px solid var(--portal-primary) !important; }
.jexcel_container .jexcel .highlight { background-color: rgba(var(--portal-primary-rgb), 0.1) !important; }
.jexcel_container .jexcel .highlight-top.highlight-left { box-shadow: none !important; }

/* Selection Range outline */
.jexcel_container .jexcel .selection-top { border-top: 1px solid var(--portal-primary) !important; }
.jexcel_container .jexcel .selection-left { border-left: 1px solid var(--portal-primary) !important; }
.jexcel_container .jexcel .selection-right { border-right: 1px solid var(--portal-primary) !important; }
.jexcel_container .jexcel .selection-bottom { border-bottom: 1px solid var(--portal-primary) !important; }
.jexcel_container .jexcel .selection { background-color: rgba(var(--portal-primary-rgb), 0.05) !important; }

/* The little fill handle square in the bottom right corner */
.jexcel_corner {
    background-color: var(--portal-primary) !important;
    border: 1px solid #fff !important;
}

/* Readonly cells styling */
.jexcel > tbody > tr > td.readonly {
    background-color: #fafafa !important;
    color: #68686a !important;
}

/* Make JExcel fill container width but allow horizontal scroll on wide tables */
.jexcel_container,
.jexcel_content {
    min-width: 100% !important;
}