/* ==========================================================================
                                   Dark Theme
   ========================================================================== */

/* Import Custom Fonts */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap');

/* ==========================================================================
                           SECTION A: APP CONTENT
   ========================================================================== */

/* ------ SECTION A-1: Content ------ */

/* Section A-1-A: Set Page Scaling (Zoom In_Out) */
#app-content {
  zoom: 80%;
  transform-origin: top left;
}

/* Section A-1-B: Edit the spacing around the dashboardbody items and the background color */
.content {
  position: relative; /*background-color: #000000;*/
  padding: 0px 0px 20px 20px; /* Top Right Bottom Left */ 
  min-height: 100vh;         /* 100% of the viewport height */
  overflow: auto;            /* allow scrolling if needed */
  z-index: 0; /* content stays above background layers */
}

/* Section A-1-C: LEFT Side background */
.content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 77.45%;
  height: 100%;
  background-color: #393939;
  z-index: -1;
}

/* Section A-1-D: RIGHT Side background */
.content::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 22.55%;
  height: 100%;
  background-color: #2E2E2E;
  z-index: -1;
}

/* --- SECTION A-2: Content TabPanels --- */

/* Section: Tab Content Background */
#main_tabs ~ .tab-content {
    background-color: #444444;
    padding: 15px 25px 15px 25px; 
    border-radius: 0px 5px 5px 5px;
    margin-bottom: 25px;
}

#filter_tabs ~ .tab-content {
    background-color: transparent;
    padding: 0px;
}

/* Flex container holding both main tabs and filter panel */
.custom-flex-container {
  display: flex;
  flex-direction: row;
  gap: 25px;
  padding: 0px;
  width: 100%;  /* ensure the container spans full width */
  box-sizing: border-box;  /* include padding in width calculation */
}

/* Main tab panel area */
.custom-main-tabs {
  width: 77%;  /* or whatever percentage you want */
  min-width: 400px;  /* optional safeguard for small screens */
}

/* Filter panel on the right */
.custom-filter-panel {
  width: 23%;  /* make sure it adds up to 100% with gap accounted for */
  min-width: 265px;
}

/* ==========================================================================
                 SECTION B: Sweet Alerts (Information Icons)
   ========================================================================== */

/* ---------------------  SECTION B-1: SweetAlert Style --------------------- */

/* Section B-1-A: The Notification Pop ups*/
div:where(.swal2-container).swal2-center > .swal2-popup {
  grid-column: 2;
  grid-row: 2;
  place-self: center center;
  background-color: #FFFFFF;
  color: #FF7701;
  font-size: 1.2rem; /* Adjust as needed */
  font-family: 'Verdana', 'Helvetica', 'Roboto Condensed', 'Arial Narrow' !important;
  border-radius: 12px; /* Optional: for rounded corners */
  padding: 20px; /* Optional: for spacing */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Optional: for depth */
}

/* Section B-1-B: Remove Button Highlight */
.swal2-popup .swal2-confirm:focus,
.swal2-popup .swal2-cancel:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Section B-1-C: Style SweetAlert Title */
.swal2-title {
  color: #4D4D4D !important;
  font-family: 'Verdana', 'Helvetica', 'Roboto Condensed', 'Arial Narrow' !important;
}

/* Section B-1-D: Custom Class-Based Styling for SweetAlerts */

/* Popup base */
.sweet-alert-popup {
  background-color: #FFFFFF !important;
  color: #FF7701 !important;
  font-size: 1.2rem;
  font-family: 'Verdana', 'Helvetica', 'Roboto Condensed', 'Arial Narrow' !important;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* Title */
.sweet-alert-title {
  color: #4D4D4D !important;
  font-family: 'Verdana', 'Helvetica', 'Roboto Condensed', 'Arial Narrow' !important;
  margin-top: 0 !important;
  padding-top: 10px !important;
  text-align: center;
}

/* Text content */
.sweet-alert-text {
  color: #4D4D4D !important;
  font-size: 1rem;
  text-align: center;
  margin-top: 10px;
}

/* Confirm Button (Portal) */
.sweet-alert-confirm {
  background-color: #FF7701 !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: bold !important;
  box-shadow: none !important;
}

/* Cancel Button (Ok) */
.sweet-alert-cancel {
  background-color: #DCDCDC !important;
  color: #4D4D4D !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: bold !important;
  box-shadow: none !important;
}

/* Remove button highlights on focus */
.sweet-alert-confirm:focus,
.sweet-alert-cancel:focus {
  outline: none !important;
  box-shadow: none !important;
}

/*---------------------------- The Header Icon -------------------------------*/

/* Show dark mode (white) icon */
.icon-light { display: none; }
.icon-dark { display: inline; }
.icon-hover { display: none; }

/* On hover, show hover icon */
.btn-icon-swap:hover .icon-dark { display: none; }
.btn-icon-swap:hover .icon-hover { display: inline; }

/* ==========================================================================
                            SECTION B: HEADER STYLING
   ========================================================================== */

/* Section B-1: Set font for the entire app and change text color */
body, .main-sidebar {
  font-family: 'Verdana', 'Helvetica', 'Roboto Condensed', 'Arial Narrow' !important;
}

/* Section B-2: Remove default AdminLTE behavior for navbar/header */  
.skin-blue .left-side, .skin-blue .main-sidebar, .skin-blue .wrapper {
  background-color: #231F20;
}

/* Section B-3: Set the header fixed when scrolling down */
.main-header {
  position: fixed;
  width: 100%;
  z-index: 1035; /* Ensure it's above other elements */
  top: 0; /* Ensure it stays at the top */
  background-color: #231F20 !important; /* Ensure background matches the navbar */
  box-shadow: none; /* Remove any default box shadow */
  max-height: 75px;
}

/* Section B-4: Change header and navbar colors */
.skin-blue .main-header .logo,
.skin-blue .main-header .navbar {
  background-color: transparent !important; /* Ensure background matches the navbar */
  height: 75px; /* the section A-2 main-header is 51px; since i want header to be 50px, set this to 51px*/
  box-shadow: none !important;
}

/* ==========================================
   SECTION C: SIDEBAR STYLING
   ========================================== */

/* Section C-0-A: Remove default default AdminLTE behavior for sidebar */
.sidebar-mini.sidebar-collapse .content-wrapper,
.sidebar-mini.sidebar-collapse .main-footer,
.sidebar-mini.sidebar-collapse .right-side {
    margin-left: 0 !important;
}

/* Section C-0-B: Hide default default AdminLTE behavior for sidebar */
.sidebar-mini.sidebar-collapse .main-sidebar {
  width: 0px!important;
  z-index: 0;
}

/* Section C-0-C: Adjust content wrapper to respect fixed header height and sidebar width */
.content-wrapper {
  margin-top: 75px; 
}

/* ==========================================================================
                    SECTION E: General Text Header Styling
   ========================================================================== */

/* Section D-21-A: h1, h2, h3, h4, h5 values */
h1, h2, h3, h4, h5 {
  font-family: 'Verdana', 'Helvetica', 'Roboto Condensed', 'Arial Narrow' !important;
  font-size: 16px;  /* Adjust size if necessary for each heading */
  font-weight: 700;
  color: #FFFFFF !important; /* Controlbar menuitem content text color change: headers*/
  margin-top: 0px;
  margin-bottom: 15px;
  margin-left: 0px;
}

/* Section D-21-B: h6 values */
h6 {
  font-family: 'Verdana', 'Helvetica', 'Roboto Condensed', 'Arial Narrow' !important;
  font-size: 15px;  /* Adjust size if necessary for each heading */
  color: #FFFFFF !important; /* Controlbar menuitem content text color change:  headers*/
  margin-top: 0px;
  margin-bottom: 15px;
  margin-left: 0px;
}

/* =============================================
   SECTION E: BOX STYLING
   ============================================= */

/* Custom styling for box() items in fluidRow()s*/
.box-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  margin-bottom: 15px;
}

/* Section E-1: Base Box Styling */
.box {
  border-top: 0px solid #E0E0E0 !important;
  border-left: 0px solid #E0E0E0 !important;
  border-right: 0px solid #E0E0E0 !important;
  border-bottom: 0px solid #E0E0E0 !important;
  border-radius: 0;
  transition: box-shadow 0.3s ease !important;
  overflow: hidden;
  color: #FF7701 !important;
  background-color: #FFFFFF !important; /* change custom box footer background color */
  margin-bottom: 15px !important;
  margin-right: -5px !important;
  width: calc(100% + 5px) !important;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Section E-6: Box Body */
.box-body {
  height: 100%;
  overflow-y: auto;
  flex-grow: 1; /* take up remaining height */
}

/* Section E-2: */
.box-footer {
  background-color: #FFFFFF;
  border-top: 2px solid #E0E0E0;
}

/* Section E-3: */
.box:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Section E-4: Box Header & Title */
.box-header {
  background-color: #1C1C1C;
  border-bottom: 0 !important;
  padding: 15px;
}

/* Section E-5: */
.box-title {
  font-family: 'Verdana', 'Helvetica', 'Roboto Condensed', 'Arial Narrow' !important;
  font-size: 16px !important;
  color: #FFFFFF !important;
}

/* Section E-7: Box Tools */
.btn-box-tool,
.btn-box-tool:hover,
.btn-box-tool:focus,
.btn-box-tool:active {
  font-size: 20px;
  background: none;
  color: #FFFFFF;
  outline: none 0px #FFFFFF;
}

/* Box Action Buttons */

/* Section E-8-A: Box Title Action Buttons (Default State)*/ 
.box-header-btns .action-button.btn-default {
  border: none !important;
  color: #FF7701 !important;
}

/* Section E-8-B: Box Title Action Buttons */
.box-header-btns .action-button {
  position: absolute;
  font-family: 'Verdana', 'Helvetica', 'Roboto Condensed', 'Arial Narrow' !important;
  right: 40px;
  top: 8px;
  color: #FF7701;
  background-color: transparent;
  text-align: center;
  align-items: center;
  line-height: normal;
  padding: 3px;
  z-index: 1050;
}

/* Section E-8-C: Box Title Action Buttons on Hover*/
.box-header-btns .action-button:hover {
  color: #FFFFFF;
  background-color: #1C1C1C;
  transition: background-color 0.3s ease;
}

/* Box Navigation Tabs*/

/* Section E-9: General bottom border for the tabPanels bar*/
.nav-tabs {
  border-bottom: 0px solid #FFFFFF;
}

/* Section E-10: Normal state for all tabs */
.box .nav-tabs > li > a {
  background-color: #FFFFFF !important;
  color: #1C1C1C !important;
  border: 0px solid #FFFFFF !important; 
  transition: background-color 0.3s ease !important;
}

/* Section E-11: Hover state for tabs */
.box .nav-tabs > li > a:hover {
  background-color: #333333 !important;
  color: #F0F0F0 !important;
}

/* Section E-12: Active/selected tab state */
.box .nav-tabs > li.active > a,
.box .nav-tabs > li.active > a:focus,
.box .nav-tabs > li.active > a:hover {
  background-color: #FFFFFF !important; /* background color of active state for tabPanel*/
  color: #FF7701 !important;
  cursor: default !important;
  border-top: 1px solid #F0F0F0!important;
  border-right: 1px solid #F0F0F0 !important;
  border-left: 1px solid #F0F0F0 !important;
  border-bottom: 0px solid #FFFFFF !important;
  top: 1px; /* Bug: do this to prevent bottom border appearing when resizing, even at 0px*/
  margin-bottom: 10px;
}

/* Section E-13: Tab content area (where the plots go) */
.box .tab-content {
  background-color: #FFFFFF !important; /* Basically acts like a loading screen between plot selection*/
  color: #1C1C1C !important;
  border-top: 0px solid #F0F0F0 !important;
}

/* ==========================================================================
                    SECTION F: BOX () SLIDER INPUT STYLING
   ========================================================================== */

/* Section F-1: Slider Input Container */
.box .irs {
  font-family: 'Verdana', 'Helvetica', 'Roboto Condensed', 'Arial Narrow' !important;
}

/* Section F-2: Slider Input Labels */
.box .irs-min, 
.box .irs-max, 
.box .irs-single, 
.box .irs-from, 
.box .irs-to,
.box .irs-grid-text {
  background-color: #F0F0F0 !important;  /* Menu Background */
  color: #1C1C1C !important;             /* Main Text Color */
}

/* Section F-3: Slider Input Track */
.box .irs-line {
  background: #F0F0F0 !important;        /* Menu Background */
  border: 1px solid #D9D9D9 !important;  /* Menu Highlight Background */
}

/* Section F-4: Slider Input Bar (selected area) */
.box .irs-bar,
.box .irs-bar-edge {
  background: #FF7701 !important;        /* Box Highlights / Main Accent */
  border: 1px solid #FF7701 !important;
}

/* Section F-5: Slider Input Handle */
.box .irs-handle {
  background: #FFFFFF !important;        /* App Background */
  border: 2px solid #FF7701 !important;  /* Main Accent */
}

/* Section F-6: Slider Input Handle Hover */
.box .irs-handle:hover {
  background: #D9D9D9 !important;        /* Menu Highlight Background */
}

/* Section F-7: Slider Input Grid */
.box .irs-grid-pol {
  background: #D9D9D9 !important;        /* Menu Highlight Background */
}

/* Section F-8: Slider Input Label */
.box .control-label {
  color: #333333 !important;             /* Titles / Borders / Subtle Elements */
}

/* Section F-9: Slider Value Display */
.box .irs-grid-text {
  color: #1C1C1C !important;             /* Main Text Color */
}

/* Section F-10: Slider Input Shadow */
.box .irs-handle.state_hover,
.box .irs-handle:hover {
  box-shadow: 0 0 4px #FF7701 !important; /* Main Accent */
} 

/* =============================================
   SECTION G: BOX TEXT/NUMERIC INPUT STYLING
   ============================================= */

/* --- SECTION G-1: Base Styling for BOX Text/Numeric Input (Search)  --- */

/* Section G-1-A: Text Input Labels */
.box label {
  color: #E0E0E0 !important;
  font-family: 'Verdana', 'Helvetica', 'Roboto Condensed', 'Arial Narrow' !important;
}

/* Section G-1-B: Text Input Icon Addons */
.box .input-group-addon {
  background-color: transparent !important;
  color: #E0E0E0 !important;
  border: 1px solid #444444 !important;
}

/* --- SECTION G-2: Custom Styling for Text Input (Search)  --- */
   
/* Section G-2-A: Text Input Form Style */
.custom-text-input .form-control {
  background-color: #1A1A1A !important;
  border: 1px solid #333333 !important;
  color: #E0E0E0 !important;
}

/* Section G-2-B: Text Input Form Style When Selected */
.custom-text-input .form-control:focus {
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05), 0 0 6px #FF770180 !important;
  border-color: #FF7701 !important;
}

/* Section G-2-C: Text Input Form Text Syle */
.custom-text-input label {
  color: #999999 !important;
  font-weight: bold !important;
}

/* --- SECTION G-3: Custom Styling for Numeric Range Input  --- */

/* Section G-3-A: Numeric Input Form Style */
.custom-numeric-input .form-control {
  background-color: #1A1A1A !important;
  border: 1px solid #333333 !important;
  color: #E0E0E0 !important;
}

/* Section G-3-B: Numeric Input Form Style When Selected */
.custom-numeric-input .form-control:focus {
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05), 0 0 6px #FF770180 !important;
  border-color: #FF7701 !important;
}

/* Section G-3-C: Numeric Input Form Text Syle */
.custom-numeric-input label {
  color: #999999 !important;
  font-weight: bold !important;
}
   
/* ==========================================
   SECTION H: General Pretty Checkbox (Light Mode)
   ========================================== */

/* Section H-1: Checkbox Icon Base */
.pretty .state label:before {
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: none !important;
  background-color: transparent !important;
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}

/* Section H-2: Checkbox Icon - Unchecked */
.pretty input[type="checkbox"] ~ .state label:before {
  background-image: url('CheckBoxNull.svg');
}

/* Section H-3: Checkbox Icon - Checked */
.pretty input[type="checkbox"]:checked ~ .state label:before {
  background-image: url('CheckBoxSelect.svg');
}

/* Section H-4: Hide default checkmark */
.pretty input[type="checkbox"]:checked ~ .state label:after {
  display: none !important;
}

/* =============================================
   SECTION I: BOX PRETTY CHECKBOXES (Light Mode)
   ============================================= */

/* Section I-1: Group Label (label= argument for prettyCheckboxGroup) */
.box .form-group > label.control-label {
  color: #4D4D4D !important;
  font-family: 'Verdana', 'Helvetica', 'Roboto Condensed', 'Arial Narrow' !important;
  font-size: 16px !important;
  font-weight: bold;
  margin-bottom: 10px;
  display: block;
}

/* Section I-2: Checkbox Label - Unchecked */
.box .pretty input[type="checkbox"] ~ .state label {
  color: #4D4D4D !important;
  font-family: 'Verdana', 'Helvetica', 'Roboto Condensed', 'Arial Narrow' !important;
  font-size: 14px !important;
  font-weight: normal;
}

/* Section I-3: Checkbox Label - Checked */
.box .pretty input[type="checkbox"]:checked ~ .state label {
  color: #4D4D4D !important;
  font-weight: 400 !important;
}

/* ========================================================
   SECTION J: BOX PRETTY RADIO BUTTONS (Light Mode)
   ======================================================== */

/* Section J-1: Radio Icon Base */
.box .pretty.p-default input[type="radio"] ~ .state label:before {
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: none !important;
  background-color: transparent !important;
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}

/* Section J-2: Radio Icon - Unchecked */
.box .pretty.p-default input[type="radio"] ~ .state label:before {
  background-image: url('RadioNull.svg');
}

/* Section J-3: Radio Icon - Checked */
.box .pretty.p-default input[type="radio"]:checked ~ .state label:before {
  background-image: url('RadioSelect.svg');
}

/* Section J-4: Hide inner dot / tick */
.box .pretty.p-default input[type="radio"]:checked ~ .state label:after {
  display: none !important;
}

/* Section J-5: Label Text - Unchecked */
.box .pretty.p-default input[type="radio"] ~ .state label {
  color: #4D4D4D !important;
  font-family: 'Verdana', 'Helvetica', 'Roboto Condensed', 'Arial Narrow' !important;
  font-size: 14px !important;
  font-weight: normal;
}

/* Section J-6: Label Text - Checked */
.box .pretty.p-default input[type="radio"]:checked ~ .state label {
  color: #4D4D4D !important;
  font-weight: 400 !important;
}

/* =============================================
   SECTION J: CUSTOM FOOTER STYLING
   ============================================= */

/* Section J-1: Box Custom Footer Base */
.custom-footer {
  font-family: 'Verdana', 'Helvetica', 'Roboto Condensed', 'Arial Narrow' !important;
  color: #21A !important;
  font-size: 12px !important; /* Added font size */
  background-color: #FFFFFF; /* change custom box footer background color  */
}

/* Section J-2: Custom Footer Primary Text */
.custom-footer-1 {
  color: #FF7701 !important;
  font-weight: bold;
}

/* Section J-3: Custom Footer Secondary Text */
.custom-footer-2 {
  color: #4D4D4D !important;
}

/* Section J-4: Footer Top Row Layout */
.footer-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-bottom: 0px; /* padding instead of margin */
}

/* Section J-5: Footer Action Button */
.footer-action-btn {
  color: #4D4D4D !important;
  background-color: transparent;
  border: none !important;
  font-family: 'Verdana', 'Helvetica', 'Roboto Condensed', 'Arial Narrow' !important;
  font-weight: normal;
  margin-left: auto;
  margin-right: 5px;
  margin-top: -8px;
  padding: 0px 0px 1px 0px;
  border: 0px solid #F0F0F0 !important;
}

/* Section J-6: Footer Action Button - Initial Icon Hover State */
.footer-action-btn .icon-hover {
  display: none;
}

/* Section J-7: Footer Action Button - Initial Icon Default State */
.footer-action-btn .icon-default {
  display: inline;
}

/* Section J-8: Footer Action Button (Hover State) */
.footer-action-btn:hover {
  color: #FF7701 !important;
  background-color: transparent;
  transition: color 0.1s ease;
  border: 0px solid #FF7701 !important;
}

/* Section J-9: Footer Action Button - Show Hover Icon on Hover */
.footer-action-btn:hover .icon-hover {
  display: inline;
}

/* Section J-10: Footer Action Button - Show Hover Icon Default on Hover */
.footer-action-btn:hover .icon-default {
  display: none;
}

/* Section J-11: Footer Action Button (Remove Shadow Post-Active State) */
.footer-action-btn:focus,
.footer-action-btn:active {
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* =============================================
   SECTION K: DATATABLE STYLING
   ============================================= */

/* --- SECTION K-1: DataTable Cells and Header  --- */
   
/* Section K-1-A: DataTable Styling */
table.dataTable {
  font-size: 12px !important;
  font-family: Verdana, Helvetica, Arial !important;
  color: #4D4D4D !important;
}

/* Section K-1-B: Proper styling for selected row using box-shadow */
table.dataTable tbody tr.selected > * {
  box-shadow: inset 0 0 0 9999px #DCDCDCE6 !important;
  color: #4D4D4D !important;
  font-family: Verdana, Helvetica, Arial !important;
  font-size: 12px !important;
}

/* Section K-1-C: Header styling */
table.dataTable thead th {
  font-size: 12px !important;
  font-family: Verdana, Helvetica, Arial !important;
  font-weight: normal !important;
  color: #4D4D4D !important;
}

/* --- SECTION K-2: DataTable Controls (Pagination) */

/* Section K-2-A: Base pagination button text color - higher specificity */
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.current) {
  color: #FF7701 !important;
  font-size: 12px !important;
  font-family: Verdana, Helvetica, Arial !important;
  text-decoration: none !important;
  background: #FFFFFF !important; /* Explicitly set background */
  border: 1px solid #DCDCDC !important;
}

/* Section K-2-B:  Super specific Previous/Next button targeting */
html body .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_paginate a.previous.paginate_button,
.dataTables_wrapper .dataTables_paginate .previous,
.dataTables_paginate .previous,
.paginate_button.previous,
a.previous {
  color: #FF7701 !important;
  font-size: 12px !important;
  font-family: Verdana, Helvetica, Arial !important;
  margin-top: 8px;
}

/* Section K-2-D:  Previous/Next hover states */
html body .dataTables_wrapper .dataTables_paginate .paginate_button.previous:hover,
html body .dataTables_wrapper .dataTables_paginate .paginate_button.next:hover,
.dataTables_paginate a.previous.paginate_button:hover,
.dataTables_paginate a.next.paginate_button:hover {
  color: #FFFFFF !important;
  background: #FF7701 !important;
}

/* Section K-2-E:  Hover state for all buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.current):hover {
  color: #FFFFFF !important;
  background: #FF7701 !important;
  border: 1px solid #FF7701 !important;
}

/* Section K-2-F:  Current/active state - with extremely high specificity */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate span .paginate_button.current,
.dataTables_wrapper .dataTables_paginate span .paginate_button.current:hover,
html body .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  color: #FFFFFF !important;
  background: #FF7701 !important;
  background-color: #FF7701 !important;
  border: 1px solid #FF7701 !important;
}

/* Section K-2-G:  Ultimate failsafe - target EVERYTHING in pagination area (elipsis) */
.dataTables_paginate *:not(.current):not(:hover),
.dataTables_wrapper .dataTables_paginate *:not(.current):not(:hover) {
  color: #FF7701 !important;
}

/* --- SECTION K-3: DataTable Record Count (Info, Length Menu) */

/* Section K-3-A: Info text (e.g., "Showing 1 to 10 of 57 entries") */
.dataTables_wrapper .dataTables_info {
  font-size: 12px !important;
  font-family: Verdana, Geneva, sans-serif !important;
  color: #4D4D4D !important;
  margin: 10px 0px 0px 10px;
}

/* Section K-3-B: Length menu ("Show X entries") */
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_length select {
  font-size: 12px !important;
  font-family: Verdana, Geneva, sans-serif !important;
  color: #4D4D4D !important;
}

/* =============================================
   SECTION L: Smooth Transition for Startup Gif
   ============================================= */

/* Section L-1: CSS class for loading overlay */
.waiter-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.75); /* Semi-transparent background */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0; /* Start invisible */
  z-index: 9999; /* Ensure it's on top of other elements */
  /*transition: opacity 2s ease; /* Smooth transition for both fade-in and fade-out */
  /*Commented default transition above, makes fade in faster than fadeout */
}

/* Section L-2: When the overlay is visible (fade-in) */
.waiter-overlay.visible {
  opacity: 1; 
  transition: opacity 0.75s ease; /* Faster fade-in: 1 second */
}

/* Section L-3: When the overlay fades out (fade-out) */
.waiter-overlay.fade-out {
  opacity: 0;
  transition: opacity 2s ease; /* Slower fade-out: 2 seconds */
}

/* =============================================
   SECTION M: Page Main Footer 
   ============================================= */

/* Section M-1: Fix main footer to bottom of page and above all other elements*/
.main-footer {
  background: transparent;
  padding: 15px;
  color: #FFFFFF;
  border-top: 1.5px solid transparent;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 1030;
  right: 0; /* Add this to ensure it spans the full width */
  font-size: 12px;
}

/* Section M-2: Then, use this to align right side text of footer appropriately*/
.footer-right {
  position: fixed;
  right: 26%;
  font-size: 12px;
}

/* Section M-3: Then, use this to align right side text of footer appropriately*/
.footer-left {
  margin-left: 10px;
  left: 0;
  font-size: 12px;
}

/* =============================================
   SECTION N: App Banners
   ============================================= */

/* Section N-1: Flex container for banner row */
.banner-row {
  display: flex;
  justify-content: space-between;  /* pushes left and right items to edges */
  align-items: center;
  padding: 5px 15px 10px 15px;
  background-color: #444444;
  max-width: 100%;
}

/* Section N-2: Banner text */
.banner {
  color: #FFFFFF;
  font-family: 'Verdana', 'Helvetica', 'Roboto Condensed', 'Arial Narrow' !important;
  font-size: 16px;
  line-height: normal;
}

/* User Icon Swap — Dark Mode */
.user-icon-wrapper .icon-light { display: none; }
.user-icon-wrapper .icon-dark { display: inline; }

/* ==========================================================================
   SECTION O: Header Bar Logo and Action Buttons
   ========================================================================== */

/* Section O-1: Wrap logo and text together */
.logo-wrapper {
  position: fixed;
  top: 14px;
  left: 2.5%;
  transform: translateX(-2.5%);
  display: flex;
  align-items: center;
  gap: 30px;
  z-index: 1040;
}

/* Section O-2: Logo image styling */
.header-logo {
  height: 45px;
  transition: all 0.2s ease-in-out;
}

/* Section O-3: Logo text container */
.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  font-family: 'Verdana', 'Helvetica', 'Roboto Condensed', 'Arial Narrow', sans-serif;
  color: #FFFFFF;
  font-size: 15px;
  text-align: left;
}

/* Section O-4: Title lines */
.logo-title-bold {
  font-weight: bold;
}

.logo-title-normal {
  font-weight: normal;
}

/* Section O-5: Theme toggle position in header */
.header-switch {
  position: absolute;
  top: 14px;
  right: 4%;
  font-size: 25px;
  z-index: 1040;
}

/* Section O-6: Theme toggle track */
.theme-toggle {
  position: relative;
  width: 56px;
  height: 28px;
  margin-right: -20px;
  margin-top: 10px;
  cursor: pointer;
}

/* Background SVG image (non-interactive) */
.toggle-bg {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  z-index: 1;
  pointer-events: none;
}

/* Toggle knob (starts on right in light mode) */
.toggle-knob {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  position: absolute;
  top: 3px;
  left: 31px; /* Light mode position (right side) */
  background-color: #FF7701;
  z-index: 2;
  transition: left 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 0 6px rgba(255, 119, 1, 0.4); /* subtle orange glow */
}

/* When dark mode is active, knob moves left and color changes */
.theme-toggle.dark .toggle-knob {
  left: 3px;
  background-color: #4D4D4D;
  box-shadow: 0 0 8px rgba(77, 77, 77, 0.5); /* dark gray glow */
}

/* Optional: glow on hover */
.theme-toggle:hover .toggle-knob {
  box-shadow: 0 0 10px rgba(255, 119, 1, 0.7); /* stronger glow on hover */
}

/* =============================================
  SECTION P: Plotly Modebar Positioning
============================================= */

/* Section P-1: Customize Plotly modebar position */
.js-plotly-plot .plotly .modebar {
  top: -27px !important;
}

/* ==========================================================================
                  SECTION R: Main tabPabel Custom Styling
   ========================================================================== */

/* --- SECTION A: Tab Container Styling --- */

/* Section A: Container Styling - tab container styled border & horizontal padding */
#main_tabs.nav-tabs-custom {
  border-bottom: 2px solid #2E2E2E;
  padding-left: 10px;
  padding-right: 10px;
}

/* --- SECTION B: Default Tab Link Styling --- */

/* Section B: Default tab Link - essential base style for each tab */
#main_tabs.nav-tabs > li > a {
  color: #FFFFFF;
  background-color: #2E2E2E;
  border: 1px solid transparent;
  border-radius: 5px 5px 0 0;
  margin-right: 10px;
  padding: 10px 15px;
  font-weight: 700;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 1px;
  height: 35px;
}

/* --- SECTION C: Icon Spacing and Sizing --- */

/* Section C: Icon Spacing*/
#main_tabs.nav-tabs > li > a img {
  margin-right: 6px;
}

.tab-icon-wrapper img {
  height: 20px;
  width: 20px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 6px;
}

/* --- SECTION D: Hover State --- */

/* Section D: Hover Effects*/
#main_tabs.nav-tabs > li > a:hover {
  background-color: #2E2E2E;
  color: #FF7701;
  border: 0px solid #2E2E2E;
  border-bottom-color: transparent;
}

/* --- SECTION F: Tab Icon States (Default / Hover / Active) --- */

/* Section F: Active tab */
#main_tabs.nav-tabs > li.active > a,
#main_tabs.nav-tabs > li.active > a:focus,
#main_tabs.nav-tabs > li.active > a:hover {
  background-color: #FF7701;
  border: 1px solid #FF7701;
  border-bottom-color: transparent;
  color: #FFFFFF;
  font-weight: 600;
  margin-bottom: 0px;
}

/* --- SECTION F: Tab Icon States (Default / Hover / Active) --- */

/* Hide icon-default entirely in dark mode */
.tab-icon-wrapper .icon-default {
  display: none;
}

/* Show icon-active by default */
.tab-icon-wrapper .icon-active {
  display: inline;
}

/* Hide hover icon by default */
.tab-icon-wrapper .icon-hover {
  display: none;
}

/* On hover: show hover icon instead of active */
#main_tabs.nav-tabs > li > a:hover .icon-active {
  display: none;
}


#main_tabs.nav-tabs > li > a:hover .icon-hover {
  display: inline;
}

/* On active tab: show icon-active again (same as default), hide others */
#main_tabs.nav-tabs > li.active > a .icon-default,
#main_tabs.nav-tabs > li.active > a .icon-hover {
  display: none;
}

/* Active: show icon-active */
#main_tabs.nav-tabs > li.active > a .icon-active {
  display: inline;
}

/* --- SECTION G: Responsive Adjustments --- */

/* Section G-1: Icon Color for Active tab */
#main_tabs.nav-tabs > li.active > a img {
  filter: brightness(0) invert(1); /* Makes black SVGs white */
}

/* Section G-2: Responsive Design */
@media (max-width: 768px) {
  #main_tabs.nav-tabs > li > a {
    padding: 6px 10px;
    font-size: 14px;
  }
}

/* =============================================
  SECTION R: Filters tabPabel Custom Styling
============================================= */

/* Section A: Container Styling - tab container styled border & horizontal padding */
#filter_tabs.nav-tabs-custom {
  border-bottom: 2px solid #464646;
  padding-left: 0px;
  padding-right: 0px;
}

/* Section A.1: Flex container to distribute tabs evenly - NEW */
#filter_tabs.nav-tabs {
  display: flex;              /* NEW */
  flex-wrap: nowrap;          /* Prevent wrapping by default */
  width: 100%;                /* Ensures full-width layout */
}

/* Section B: Default tab Link - essential base style for each tab */
#filter_tabs.nav-tabs > li {
  flex: 1 1 0;                /* UPDATED: distribute space evenly */
  text-align: center;         /* UPDATED: center tab text */
}

/* Section B: Default tab Link - essential base style for each tab */
#filter_tabs.nav-tabs > li > a {
  color: #FFFFFF;
  background-color: #464646;
  border: 0px solid transparent;
  border-radius: 0px 0px 0 0;
  padding: 0px 0px;
  font-weight: 700;
  transition: all 0.2s ease;
  align-items: center;
  margin-top: 0px;
  height: 40px;
  display: flex;
  justify-content: center;   /* UPDATED: center icon + text */
  width: 100%;               /* UPDATED: full width of parent li */
  /* Removed margin-right for even spacing */
}

/* Section C: Icon Spacing*/
#filter_tabs.nav-tabs > li > a img {
  margin-right: 6px;
}

/* Section D: Hover Effects*/
#filter_tabs.nav-tabs > li > a:hover {
  background-color: #464646;
  color: #FF7701;
  border: 0px solid #464646;
  border-bottom-color: transparent;
}

/* Section F: Active tab */
#filter_tabs.nav-tabs > li.active > a,
#filter_tabs.nav-tabs > li.active > a:focus,
#filter_tabs.nav-tabs > li.active > a:hover {
  background-color: #2E2E2E;
  border: 0px solid #2E2E2E;
  border-bottom-color: transparent;
  color: #FFFFFF;
  font-weight: 600;
  margin-bottom: 5px;
}

/* Section H: Icon Color for Active tab */
#filter_tabs.nav-tabs > li.active > a img {
  filter: brightness(0) invert(1); /* Turns black SVGs to white */
}

/* Section E: Icon Swap on Hover (from www/) */
/*#filter_tabs.nav-tabs > li > a:hover img {
  content: url('path/to/orange-icon.svg');
}*/

/* Section G: Responsive Design - adjust padding and font size for smaller screens */
@media (max-width: 768px) {
  #filter_tabs.nav-tabs {
    flex-wrap: wrap;          /* Allow wrapping on small screens */
  }
  
  #filter_tabs.nav-tabs > li {
    flex: 1 1 100%;           /* Stack tabs vertically */
  }
  
  #filter_tabs.nav-tabs > li > a {
    padding: 6px 10px;
    font-size: 14px;
  }
}

/* ==========================================================================
  SECTION S: Filters tabPabel Custom BOX() Styling
   ========================================================================== */

/* Override base box styling ONLY inside filter-tabs-wrapper */

/* F-1: Target base layer of all boxes inside filter-tabs-wrapper */
.filter-tabs-wrapper .box {
  border-top: 0px solid #E0E0E0 !important;
  border-left: 0px solid #E0E0E0 !important;
  border-right: 0px solid #E0E0E0 !important;
  border-bottom: 0px solid #E0E0E0 !important;
  border-radius: 0 !important;
  transition: none !important;
  overflow: hidden;
  color: #FFFFFF !important;
  background-color: #e0e !important; /* to check its working */
  margin-left: -10px !important;
  margin-right: -10px !important;
  margin-bottom: 7.5px !important;
  width: 100%;
}

/* F-8: Remove box shadow on normal and hover states */
.filter-tabs-wrapper .box,
.filter-tabs-wrapper .box:hover,
.filter-tabs-wrapper .box:focus,
.filter-tabs-wrapper .box:active {
  box-shadow: none !important;
}

/* F-2: further customize all boxes inside filter-tabs-wrapper*/
.filter-tabs-wrapper .box.box-solid {
  background-color: transparent !important;
}

/* F-3: Target all box headers inside filter-tabs-wrapper */
.filter-tabs-wrapper .box.box-solid .box-header.with-border {
  border-bottom: none !important;
  background-color: transparent !important;
  color: #e0e !important; /* to check its working*/
  font-family: Verdana, Helvetica, Arial !important;
  padding: 15px 15px 7.5px 15px;
}

/* F-4: Target all box headers text inside filter-tabs-wrapper */
.filter-tabs-wrapper .box.box-solid .box-header.with-border .box-title {
  font-size: 18px !important;
  font-weight: bold !important;
  color: #FFFFFF !important; 
  font-family: Verdana, Helvetica, Arial !important;
  letter-spacing: 0.5px !important;
  margin-left: -5px;
}

/* F-?: Target all box collapse/expand icon inside filter-tabs-wrapper */
.filter-tabs-wrapper .box-header .btn-box-tool,
.filter-tabs-wrapper .box-header .btn-box-tool:hover,
.filter-tabs-wrapper .box-header .btn-box-tool:focus,
.filter-tabs-wrapper .box-header .btn-box-tool:active {
  font-size: 20px !important;      /* Adjust icon size */
  color: #FFFFFF !important;       /* Icon color (orange) */
  margin-right: -15px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  transition: color 0.2s ease-in-out;
}

/* F-5: Target only specific box inside filter-tabs-wrapper */
#filter_header_box.box.box-solid {
  background-color: #464646 !important;
  margin-left: 0px !important;
  margin-right: 5px !important; /* To update right margin spacing (1/2) */
  width: calc(100% - 5px) !important; /* To update right margin spacing (2/2) */
  margin-bottom: 7.5px !important;
}

/* F-6: Target only specific box header inside filter-tabs-wrapper */
#filter_header_box.box.box-solid .box-header.with-border {
  border-bottom: none !important;
  background-color: #464646 !important;
  color: #1c1 !important;
  font-family: Verdana, Helvetica, Arial !important;
  padding: 25px 15px 2.5px 15px;
}

/* F-7: Target only specific box header inside filter-tabs-wrapper */
#filter_header_box.box.box-solid .box-header.with-border .box-title {
  font-size: 18px;
  font-weight: 700;
  color: #FFFFFF !important; /* or your preferred color */
  font-family: Verdana, Helvetica, Arial !important;
  letter-spacing: 0.5px;
  margin-right: 5px;
  margin-left: 3px;
}

/* ==========================================================================
        SECTION U: Filters tabPabel Custom BOX() CheckBox/Radio Styling
   ========================================================================== */

/* Filter-specific PrettyCheckboxGroup Label */
.filter-tabs-wrapper .box .form-group > label.control-label {
  color: #FFFFFF !important;
  font-size: 16px !important;
  font-family: 'Verdana', 'Helvetica', 'Roboto Condensed', 'Arial Narrow' !important;
  font-weight: bold !important;
  margin-bottom: 10px;
  display: block;
}

/* Checkbox Label - Unchecked */
.filter-tabs-wrapper .box .pretty input[type="checkbox"] ~ .state label {
  color: #FFFFFF !important;
  font-family: 'Verdana', 'Helvetica', 'Roboto Condensed', 'Arial Narrow' !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

/* Checkbox Label - Checked */
.filter-tabs-wrapper .box .pretty input[type="checkbox"]:checked ~ .state label {
  color: #FFFFFF !important;
  font-weight: 400 !important;
}

/* Checkbox Icon - Unchecked */
.filter-tabs-wrapper .box .pretty input[type="checkbox"] ~ .state label:before {
  background-image: url('CheckBoxNull.svg') !important;
}

/* Checkbox Icon - Checked */
.filter-tabs-wrapper .box .pretty input[type="checkbox"]:checked ~ .state label:before {
  background-image: url('CheckBoxSelect.svg') !important;
}

/* radio buttons*/

/* Radio Label - Unchecked */
.filter-tabs-wrapper .box .pretty.p-default input[type="radio"] ~ .state label {
  color: #1c1 !important;
  font-family: 'Verdana', 'Helvetica', 'Roboto Condensed', 'Arial Narrow' !important;
  font-size: 14px !important;
  font-weight: normal !important;
}

/* Radio Label - Checked */
.filter-tabs-wrapper .box .pretty.p-default input[type="radio"]:checked ~ .state label {
  color: #77d !important;
  font-weight: 400 !important;
}

/* Radio Icon - Unchecked */
.filter-tabs-wrapper .box .pretty.p-default input[type="radio"] ~ .state label:before {
  background-image: url('RadioNull.svg') !important;
}

/* Radio Icon - Checked */
.filter-tabs-wrapper .box .pretty.p-default input[type="radio"]:checked ~ .state label:before {
  background-image: url('RadioSelect.svg') !important;
}

/* ==========================================================================
  SECTION T: Custom Dataset Toggle Styling
   ========================================================================== */

#switches-wrapper {
  margin-top: 5px;  /* adjust to your desired spacing */
  margin-bottom: -15px;
}

/* Each row: label on the left, switch on the right */
.switch-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px; /* spacing between rows */
}

/* Label container: icon + text */
.switch-label {
  display: flex;
  align-items: center;
  color: #FF7701; /* default if ON */
  font-size: 14px;
}

/* Icon next to label */
.switch-icon {
  height: 22px;
  object-fit: contain;
  margin-right: 8px;
  vertical-align: middle;
  filter: brightness(0) saturate(100%) invert(56%) sepia(66%) saturate(3311%) hue-rotate(357deg) brightness(99%) contrast(104%);
}

/* Optional: label text styling */
.switch-text {
  vertical-align: middle;
  font-weight: 700;
}

/* Toggle container */
.custom-switch {
  position: relative;
  width: 44px;
  height: 22px;
  cursor: pointer;
  margin-left: auto;
  margin-right: -10px;
}

/* Toggle background (SVG) */
.switch-bg {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Toggle knob */
.switch-knob {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #FFFFFF;
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 2;
  transition: left 0.3s ease;
}

/* When switch is ON, knob moves right */
.switch-knob.on {
  left: 24px;
}