/* --------------------------------------------------------------------
   0) IMPORTS (Fonts + AG Grid)
   -------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap");
@import url("https://unpkg.com/ag-grid-community/styles/ag-grid.css");
@import url("https://unpkg.com/ag-grid-community/styles/ag-theme-alpine.css");

/* --------------------------------------------------------------------
   1) ROOT VARIABLES
   -------------------------------------------------------------------- */

:root {
  /* brand */
  --blue-900:#003366; --blue-700:#004480; --blue-600:#00509e;
  --blue-500:#0066cc; --blue-100:#e8f4fc; --blue-050:#f5fafe;
    --blue-800: #003B73;   /* RGB (0, 59, 115) */

  /* neutrals */
  --gray-900:#1f1f1f; --gray-700:#3f3f3f; --gray-500:#6b6b6b;
  --gray-200:#e5e5e5; --gray-050:#f5f7fa;

  /* semantic */
  --green-500:#009e8f;           /* success / positive */
  --orange-500:#e57c00;          /* warning / neutral delta */
  --red-500:#d55e00;             /* error / negative */

  /* aliases for backwards‑compat */
  --primary-color:var(--blue-600);
  --secondary-color:var(--blue-700);
  --accent-color:var(--blue-500);
  --header-bg:var(--blue-900);
  --header-text-color:#fff;
  --grid-bg:var(--gray-050);
  --text-color:var(--gray-900);
    --chart-cat-1:#0066cc;
  --chart-cat-2:#009e8f;
  --chart-cat-3:#e57c00;
  --chart-cat-4:#d55e00;
  --chart-cat-5:#3f3f3f;
  --chart-cat-6:#0aa0ce;
  --chart-cat-7:#6f42c1;
  --chart-cat-8:#f3c200;
}

    --border-radius:  6px;
    --font-family:    "Open Sans", sans-serif;
    --brand-font:     "Montserrat", "Open Sans", sans-serif;

    --transition-speed: 0.3s;
    --transition-ease:  cubic-bezier(0.4, 0, 0.2, 1);
    --scroll-track : #f0f2f5;
      --scroll-thumb : var(--secondary-color);
      --scroll-thumb-hover : var(--primary-color);
      --scroll-size : 8px;
}

.ag-theme-alpine .ag-body-viewport,
.ag-theme-alpine .ag-body-horizontal-scroll-viewport{
    scrollbar-color: var(--scroll-thumb) transparent;     /* Firefox / Blink ≥121 */
}

.ag-theme-alpine .ag-body-viewport::-webkit-scrollbar-track,
.ag-theme-alpine .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-track{
    background: transparent;                              /* Chrome / Edge / Safari */
}

/* ─── AG-Grid viewport – wider scrollbars ────────────────────────── */
.ag-theme-alpine .ag-body-viewport,
.ag-theme-alpine .ag-body-horizontal-scroll-viewport{
    /* Firefox / Blink ≥121 – only sizes are `thin` or `auto`.
       `auto` jumps to the system default (usually ±16 px).            */
    scrollbar-width: auto;
}

/* Chrome / Edge / Safari */
.ag-theme-alpine .ag-body-viewport::-webkit-scrollbar,
.ag-theme-alpine .ag-body-horizontal-scroll-viewport::-webkit-scrollbar{
    width : 12px;   /* vertical rail  */
    height: 12px;   /* horizontal rail */
}

.ag-theme-alpine .ag-body-viewport::-webkit-scrollbar-thumb,
.ag-theme-alpine .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb{
    border-radius: 6px;                      /* keeps the pill look        */
    border: 3px solid transparent;           /* same visual  “padding”     */
}
.ag-theme-alpine {
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid #dee2e6; /* optional subtle border */

}
/* optional – give the hover state a little extra grab-area too */
@media (hover:hover){
  .ag-theme-alpine .ag-body-viewport::-webkit-scrollbar-thumb:hover,
  .ag-theme-alpine .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:hover{
      width : 14px;
      height: 14px;
  }
}

/* --------------------------------------------------------------------
   2) GLOBAL BODY
   -------------------------------------------------------------------- */
body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    background-color: var(--grid-bg);
    color: var(--text-color);
}




/* Make the switch knob/track your brand color when on */
.filter-switch .form-check-input:checked {
  background-color: var(--secondary-color) !important;
  border-color: var(--secondary-color) !important;
}

/* (Optional) A light focus glow around the knob when clicked/focused */
.filter-switch .form-check-input:checked:focus {
  box-shadow: 0 0 0 0.2rem rgba(0,80,158,0.3) !important;
}


.filter-switch .form-check-input:checked + .form-check-label {
  color: var(--secondary-color) !important;
  font-weight: 600; /* slightly bolder text when ON */
}

@media screen and (max-width: 768px) {
  #main-content {
    display: none !important;
  }
  #mobile-unsupported {
    display: block !important;
  }
}

/* --------------------------------------------------------------------
   2B) OFFCANVAS
   -------------------------------------------------------------------- */
.custom-offcanvas.offcanvas {
  display: flex;
  flex-direction: column;
  height: 100%; /* ensures we can stretch it */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

.custom-offcanvas .offcanvas-scrollable-body {
  flex: 1 1 auto;
  overflow-y: auto;
  margin-bottom: 1rem;
}

.offcanvas-footer {
  flex: 0 0 auto;
  padding: 1rem;
  border-top: 1px solid #dee2e6;
  background-color: #fff;
  position: sticky;
  bottom: 0;
}

/* --------------------------------------------------------------------
   3) NAVBAR STYLES
   -------------------------------------------------------------------- */




/* --------------------------------------------------------------------
   4) AG-GRID / ALPINE THEME OVERRIDES
   -------------------------------------------------------------------- */
.ag-theme-alpine {
  --ag-font-family: var(--font-family);
  --ag-background-color: var(--grid-bg);
  --ag-foreground-color: var(--text-color);
  --ag-header-background-color: var(--primary-accent-color);
  --ag-header-foreground-color: #fff;
  --ag-data-row-hover-color: #ebf2f9;
  --ag-borders: 1px solid #d8d8d8;
  --ag-row-border-color: #d8d8d8;
  --ag-header-height: 45px;
  --ag-row-height: 40px;
}

/* Force entire header row to be blue with white text */
.ag-theme-alpine .ag-header,
.ag-theme-alpine .ag-header-row,
.ag-theme-alpine .ag-header-cell {
  background-color: var(--blue-050) !important;
  color: var(--blue-700) !important;
  font-weight: 600;
  text-transform: none;
  box-shadow: none; /* remove default shading if desired */
}
.ag-theme-alpine.pi-grid .ag-header,
.ag-theme-alpine.pi-grid .ag-header-row{
  border-bottom: 1px solid #dee2e6;   /* subtle light‑grey hair‑line */
}
.ag-theme-alpine.pi-grid .ag-header-container::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background:#dee2e6;        /* or any brand tint */
  pointer-events:none;       /* keeps header drag‑handles clickable */
}
/* Subtle box-shadow under the header row if desired */
.ag-theme-alpine .ag-header-container {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


/* WebKit-based browsers (Chrome, Safari, Edge) */
/* ===========  GENERIC  =========== */
.ag-theme-alpine .ag-body-viewport,
.ag-theme-alpine .ag-body-horizontal-scroll-viewport{
  /* Firefox + future Blink */
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}




/* Remove focus outline from selected cells */
.ag-theme-alpine .ag-cell-focus {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}




/* Filter menu header (the top of the filter pop-up) */
.ag-theme-alpine .ag-menu-header,
.ag-theme-alpine .ag-tabs-header.ag-menu-header {
  background-color: var(--blue-050) !important; /* or var(--secondary-color) */
  color: #fff !important;
  border-radius: 4px;
}

/* Icons in the filter menu header → white */
.ag-theme-alpine .ag-menu-header .ag-icon,
.ag-theme-alpine .ag-tabs-header.ag-menu-header .ag-icon {
  fill: #fff !important;
  color: #fff !important;
}
/* Tabs in the filter menu header (if any) */
.ag-theme-alpine .ag-menu-header .ag-tab,
.ag-theme-alpine .ag-menu-header .ag-tab span {
  color: #fff !important;
}

/* Cells styling: adjust font size/padding if desired */
.ag-theme-alpine .ag-cell {
  font-size: 0.95rem;
  padding: 0.5rem;
}

/* 1) Input text fields (e.g. set filter search) */
.ag-theme-alpine .ag-input-field-input {
  background-color: #fafafa;
  color: #333;
  padding: 4px 6px;
  border-radius: 3px;
  box-sizing: border-box;
}
.ag-theme-alpine .ag-input-field-input:focus {
  outline: none;
  border-color: #00509e;
}

/* 2) Checkboxes in set filters */
.ag-theme-alpine .ag-checkbox-input input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #00509e;
  cursor: pointer;
  margin: 0 4px 0 0;
}

/* 3) Filter Apply Panel buttons (Apply / Cancel / Clear) */
.ag-theme-alpine .ag-button.ag-standard-button.ag-filter-apply-panel-button {
  background-color: #00509e;
  border: 1px solid #004080;
  color: #fff;
  padding: 4px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.85rem;
}
.ag-theme-alpine .ag-button.ag-standard-button.ag-filter-apply-panel-button:hover {
  background-color: #004080;
  border-color: #003366;
}

/* --------------------------------------------------------------------
   5) TABS, SLIDERS, MODALS
   -------------------------------------------------------------------- */
.custom-tabs .nav-link {
    color: #666 !important;
    background-color: transparent !important;
    border: none !important;
}
.custom-tabs .nav-link:hover {
    color: #444 !important;
    background-color: #f8f9fa !important;
}
/* Range Slider track + handle */
.rc-slider-track {
    background-color: var(--accent-color) !important;
}
.rc-slider-handle {
    border: 2px solid var(--accent-color) !important;
    background-color: #fff;
}
/* Modal header */
.custom-modal-header {
    background-color: var(--primary-color) !important;
    color: #fff !important;
    border-radius: 6px 6px 0 0;
}

/* --------------------------------------------------------------------
   6) BUTTONS (Continue, Export, Clear Filters)
   -------------------------------------------------------------------- */
.continue-button {
    background-color: var(--secondary-color);
    border: 2px solid var(--secondary-color);
}


/* -----------------------------------------------------------------
   .export-button   –   pill that matches the “Select Chains” look


/* Clear Filters button */
.clear-filters {
    color: #00509e;
    background-color: #fff;
    border: 0.5px solid #00509e;
    font-weight: 500;
    font-size: 1.05rem;

    height: 32px;
    line-height: normal;
    padding: 0.45rem 0.75rem 0.5rem; /* Slightly reduced padding for less height */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, color 0.3s ease;
}
.clear-filters:hover {
    color: #fff;
    background-color: #00509e;
    border-color: #00509e;
}

/* Clear Filters button */
.evaluate-abstracts {
    color: #00509e;
    background-color: #fff;
    border: 0.5px solid #00509e;
    font-weight: 515; /* Adjust as needed: 500, 600, 700 (bold) */
    font-size: 1.02rem; /* Slightly larger font size for better visibility */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.evaluate-abstracts:hover {
    color: #fff;
    background-color: #00509e;
    border-color: #00509e;
}


.scroll-button {
color: #fff;

}



/* --------------------------------------------------------------------
   7) FLOATING CHAT BUTTON
   -------------------------------------------------------------------- */
.chat-button {
    background-color: var(--secondary-color) !important;
    border: 2px solid var(--secondary-color) !important;
    border-radius: 12px;
    color: #fff !important;
    font-family: "Roboto", sans-serif;
    font-weight: 600 !important;
    font-size: 16px;
    padding: 10px 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    cursor: pointer;
}
.chat-button:hover {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
    transform: translateY(-2px);
}
.chat-button:active {
    transform: translateY(1px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

/* --------------------------------------------------------------------
   8) CHAT COMPONENT BUBBLES & INPUT
   -------------------------------------------------------------------- */
.message-input-button {
    background-color: var(--accent-color) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease;
}
.message-input-button:hover {
    background-color: #004c9e !important; /* slightly darker hover */
}

/* Assistant bubble */
#chat-container-div .chat-bubble.assistant {
    background-color: #f8f8f8 !important;
    color: #333 !important;
    border-radius: 8px !important;
    padding: 10px !important;
    margin: 5px 0 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    max-width: 60% !important;
    text-align: left;
}

/* User bubble */
#chat-container-div .chat-bubble.user {
    background-color: var(--accent-color) !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 10px !important;
    margin: 5px 0 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    max-width: 60% !important;
    margin-left: auto !important;
    text-align: right;
}



/* Make pinned-right columns slightly distinct */
.ag-theme-alpine .ag-pinned-right-header .ag-header-cell,
.ag-theme-alpine .ag-pinned-right-cols-container .ag-cell {
    background-color: #fff;

}

/* Add a subtle shadow on the left edge of the pinned area */
.ag-theme-alpine .ag-pinned-right-header,
.ag-theme-alpine .ag-pinned-right-cols-container {
    box-shadow: -3px 0px 6px rgba(0, 0, 0, 0.15);
}

/* Custom Card Styling */
/* Custom Card Styling */
.custom-card {
    border-radius: var(--border-radius); /* Consistent border-radius */
    border: 1px solid #00509e !important; /* Exact same color as text */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    transition: transform var(--transition-speed) var(--transition-ease),
                box-shadow var(--transition-speed) var(--transition-ease),
                border-color var(--transition-speed) var(--transition-ease);
    background-color: #fff; /* Ensure white background for contrast */
    /*color: #00509e; /* Text color matches border color */
}

.custom-card:hover {
    transform: translateY(-3px); /* Lift on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */
    border-color: #003366; /* Darker hover border for emphasis */
    /*color: #003366; /* Darker hover text color */
}

/* Text Primary Styling (e.g., highlighted values) */
.text-primary {
    color: #00509e !important; /* Ensure text matches border */
    font-weight: 700; /* Bold font for emphasis */
}


/* Subtle muted text styling */
.text-muted {
    color: #6c757d; /* Subtle muted gray */
    font-weight: 400;
}


/* ==============================================
   FETCH ABSTRACTS (brand color default)
============================================== */
.fetch-abstracts-button {
    background-color: var(--secondary-color);
    color: #fff;
    border: 0.5px solid var(--secondary-color);
    font-weight: 515;
    font-size: 1.02rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.fetch-abstracts-button:hover {
    background-color: #fff;
    color: var(--secondary-color);
    border-color: var(--secondary-color);
}
.fetch-abstracts-button:disabled,
.fetch-abstracts-button[disabled] {
    background-color: #b3cfe7; /* faded brand color */
    color: #f0f0f0;
    border-color: #b3cfe7;
    cursor: not-allowed;
    box-shadow: none;
}

/* ==============================================
   SHOW MORE RESULTS (brand color default)
============================================== */
.show-more-results-button {
    background-color: var(--secondary-color);
    color: #fff;
    border: 0.5px solid var(--secondary-color);
    font-weight: 515;
    font-size: 1.02rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.show-more-results-button:hover {
    background-color: #fff;
    color: var(--secondary-color);
    border-color: var(--secondary-color);
}
.show-more-results-button:disabled,
.show-more-results-button[disabled] {
    background-color: #b3cfe7;
    color: #f0f0f0;
    border-color: #b3cfe7;
    cursor: not-allowed;
    box-shadow: none;
}

/* ==============================================
   EVALUATE RELEVANCY (brand color default)
============================================== */
.run-evaluation-button {
    background-color: var(--secondary-color);
    color: #fff;
    border: 0.5px solid var(--secondary-color);
    font-weight: 515;
    font-size: 1.02rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.run-evaluation-button:hover {
    background-color: #fff;
    color: var(--secondary-color);
    border-color: var(--secondary-color);
}
.run-evaluation-button:disabled,
.run-evaluation-button[disabled] {
    background-color: #b3cfe7;
    color: #f0f0f0;
    border-color: #b3cfe7;
    cursor: not-allowed;
    box-shadow: none;
}
.download-csv-button {
    background-color: #217346; /* or your .export-button color */
    color: #fff;
    border: 0.5px solid #217346;
    height: 39px;
    font-weight: 515;
    font-size: 1.02rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.download-csv-button:hover {
    background-color: #fff;
    color: #217346;
    border-color: #217346;
}
.download-csv-button:disabled,
.download-csv-button[disabled] {
    background-color: #abcbb7; /* lighter fade of #217346 */
    color: #f7f7f7;
    border-color: #abcbb7;
    cursor: not-allowed;
    box-shadow: none;
}

/* -----------------------------
   Start a New Session Button
----------------------------- */
.start-new-session-button {
    background-color: var(--secondary-color); /* your brand color */
    color: #fff;
    border: 0.5px solid var(--secondary-color);
    font-weight: 515; /* Adjust as needed */
    font-size: 1.02rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.start-new-session-button:hover {
    background-color: #fff;
    color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.start-new-session-button:disabled,
.start-new-session-button[disabled] {
    background-color: #b3cfe7; /* A faded version of var(--secondary-color) */
    color: #f0f0f0;
    border-color: #b3cfe7;
    cursor: not-allowed;
    box-shadow: none;
}

/* -----------------------------
   Load Session Button
   (If you want a "secondary" look,
    slightly different from the main action)
----------------------------- */
.load-session-button {
    background-color: #fff; /* or a lighter brand color, or simply replicate the brand color style */
    color: var(--secondary-color);
    border: 0.5px solid var(--secondary-color);
    font-weight: 515;
    font-size: 1.02rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.load-session-button:hover {
    background-color: var(--secondary-color);
    color: #fff;
    border-color: var(--secondary-color);
}

.load-session-button:disabled,
.load-session-button[disabled] {
    background-color: #eee;
    color: #aaa;
    border-color: #ddd;
    cursor: not-allowed;
    box-shadow: none;
}

/**************************************
  PREVIOUS BUTTON
**************************************/
.previous-button {
    background-color: #fff;
    color: #00509e;
    border: 1px solid #00509e;
    font-weight: 500;
    font-size: 1.02rem;
    padding: 0.5rem 1rem;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
}
.previous-button:hover {
    background-color: #00509e;
    color: #fff;
}
.previous-button:disabled,
.previous-button[disabled] {
    background-color: #e0e0e0;
    color: #999;
    border-color: #e0e0e0;
    cursor: not-allowed;
    box-shadow: none;
}

/**************************************
  SAVE BUTTON (dark blue)
**************************************/
.save-button {
    background-color: var(--secondary-color); /* #00509e by default */
    color: #fff;
    border: 0.5px solid var(--secondary-color);
    font-weight: 500;
    font-size: 1.02rem;
    padding: 0.5rem 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition:
      background-color 0.3s ease,
      color 0.3s ease,
      border-color 0.3s ease;
    cursor: pointer;
}

.save-button:hover {
    background-color: #fff;
    color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.save-button:disabled,
.save-button[disabled] {
    background-color: #b3cfe7; /* a faded #00509e */
    color: #f0f0f0;
    border-color: #b3cfe7;
    cursor: not-allowed;
    box-shadow: none;
}


/**************************************
  NEXT BUTTON
**************************************/
.next-button {
    background-color: #fff;
    color: #00509e;
    border: 1px solid #00509e;
    font-weight: 500;
    font-size: 1.02rem;
    padding: 0.5rem 1rem;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
}
.next-button:hover {
    background-color: #00509e;
    color: #fff;
}
.next-button:disabled,
.next-button[disabled] {
    background-color: #e0e0e0;
    color: #999;
    border-color: #e0e0e0;
    cursor: not-allowed;
    box-shadow: none;
}

.custom-modal-header {
  background-color: var(--primary-color);
  color: #fff;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

/* ===========================
   CONFIRM SAVE BUTTON
=========================== */
.confirm-save-button {
    background-color: #00509e;       /* or any brand color */
    color: #fff;
    border: 0.5px solid #00509e;
    font-weight: 500;
    font-size: 1.02rem;
    padding: 0.5rem 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition:
      background-color 0.3s ease,
      color 0.3s ease,
      border-color 0.3s ease;
    cursor: pointer;
}
.confirm-save-button:hover {
    background-color: #fff;
    color: #00509e;
    border-color: #00509e;
}
.confirm-save-button:disabled,
.confirm-save-button[disabled] {
    background-color: #b3cfe7;  /* a faded version of #00509e */
    color: #f0f0f0;
    border-color: #b3cfe7;
    cursor: not-allowed;
    box-shadow: none;
}

/* ===========================
   EVALUATION PROGRESS BAR
=========================== */
#evaluation-progress {
  /* The outer "track" of the progress bar */
  height: 24px;
  background-color: #e9ecef; /* A light gray or your var(--grid-bg) */
  border-radius: var(--border-radius);
  overflow: hidden;
  margin-bottom: 20px; /* matches your inline style if you wish */
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); /* subtle inner shadow */
}

#evaluation-progress .progress-bar {
  /* The filled portion of the bar */
  background-color: var(--accent-color) !important;
  color: #fff;                  /* If you display text (%) inside the bar */
  font-weight: 600;            /* Slightly bolder text, if used */
  border-radius: var(--border-radius);
  transition: width 0.4s ease; /* Smoothly animate width changes */
}

/* remove row animations completely */
.ag-theme-alpine .ag-row {
    animation: none !important;
}
html, body, * {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}


/* 2 WebKit family (Chrome, Edge, Safari, Electron, Dash) */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar           { width: var(--scroll-size); height: var(--scroll-size); }
*::-webkit-scrollbar-track     { background: var(--scroll-track);
                                 border-radius: calc(var(--scroll-size)/2); }
*::-webkit-scrollbar-thumb     { background-color: var(--scroll-thumb);
                                 border-radius: calc(var(--scroll-size)/2);
                                 border: 2px solid var(--scroll-track);
                                 transition: background-color .2s ease, opacity .2s ease; }
*::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-thumb-hover); opacity: .9; }

/* (Optional) no grey square where h- and v-scrollbars meet */
*::-webkit-scrollbar-corner    { background: var(--scroll-track); }


.ag-theme-alpine .ag-body-horizontal-scroll-viewport{
  position: sticky;
  bottom: 0;
}



/* --- Vertical Scrollbar Styling (6px width, corrected) --- */
.ag-theme-alpine .ag-body-viewport {
    background-color: #f0f2f5 !important; /* THIS ensures scrollbar background matches exactly */
}







/* --- Remove third scrollbar under pinned-right column --- */
.ag-theme-alpine .ag-pinned-right-cols-viewport {
    overflow-x: hidden !important;
}
.CalendarDay__selected_span {
  background: #d0ebff;
  color: #00509e;
  border-radius: 0;
}
.CalendarDay__selected {
  background: #00509e !important;
  color: white !important;
  border-radius: 50% !important;
}
.CalendarDay__hovered_span:hover,
.CalendarDay__hovered_span {
  background: #aed9e0;
}
/* Increase z-index for Dash's react-dates portal */
.DateRangePicker_picker,
.SingleDatePicker_picker,
.DayPicker__withBorder {
    z-index: 1100 !important;  /* Bootstrap Offcanvas default z-index is 1045 */
}

.select-all-button {
    background-color: var(--secondary-color);
    color: #fff;
    border: 0.5px solid var(--secondary-color);
    font-weight: 515;
    font-size: 1.02rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.select-all-button {
    background-color: #fff;                  /* white by default */
    color: var(--secondary-color);           /* brand color text */
    border: 1px solid var(--secondary-color);
    font-weight: 500;
    font-size: 0.88rem; /* ~14px, matching “size=sm” vibe */
    padding: 0.25rem 0.75rem; /* optional to match small button spacing */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Force RangeSlider marks to never wrap text */
.rc-slider-mark-text {
  white-space: nowrap !important;
  overflow: visible !important; /* in case the container is very narrow */
}


.select-all-button:hover {
    background-color: var(--secondary-color); /* brand color on hover */
    color: #fff;                              /* white text on hover */
    border-color: var(--secondary-color);
}






/* Override default bootstrap stripes to match your brand style better */
#evaluation-progress .progress-bar-striped {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.25) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(255, 255, 255, 0.25) 75%,
    transparent 75%,
    transparent
  ) !important;
  background-size: 1rem 1rem;
}

/* Keyframes for the "animated" stripes if you want a custom speed */
@keyframes progress-bar-stripes {
  0% {
    background-position: 1rem 0;
  }
  100% {
    background-position: 0 0;
  }
}

/* If you want to tweak the animation speed or style, override these: */
#evaluation-progress .progress-bar-animated {
  animation: progress-bar-stripes 1s linear infinite;
}

/*When it is done! */
#evaluation-progress .progress-bar[aria-valuenow="100"] {
  background-image: none !important;
  animation: none !important;
  /* If you want to ensure it’s your brand color */
  background-color: var(--accent-color) !important;
}


.global-toast .toast-header {
  background-color: var(--primary-color);
  color: #fff;
}

.global-toast .toast-header .btn-close {
  filter: invert(1) brightness(2);
  opacity: 1; /* fully visible */
}

/* ==============================================
   PAUSE EVALUATION BUTTON (Neutral Gray)
============================================== */
.pause-evaluation-button {
    background-color: #fff;                  /* White background */
    color: var(--secondary-color);           /* Brand color text */
    border: 0.5px solid var(--secondary-color);
    font-weight: 515;
    font-size: 1.02rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition:
      background-color 0.3s ease,
      color 0.3s ease,
      border-color 0.3s ease;
    cursor: pointer;
}
/* ================================================================
   GLOBAL SCROLLBAR STYLING  ── works for page, off-canvas, chat,
   AG-Grid viewports … basically every scrollable element.
   Relies on the variables you already defined in :root
   ----------------------------------------------------------------
   • Slim 8 px bar that matches brand colours
   • Soft inner glow + gradient so the thumb looks tactile
   • Track is transparent until the user interacts → less noise
   • Thumb grows to 12 px on hover (desktop only) = easier to grab
   • Layout-shift guard: scrollbar-gutter
================================================================ */

/* ---------- Standards (Firefox + Blink ≥121) ---------- */
html, body, * {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}
/* ---------- WebKit family (Chrome, Edge, Safari, Electron) ---------- */
*::-webkit-scrollbar          { width: var(--scroll-size); height: var(--scroll-size); }
*::-webkit-scrollbar-track    { background: var(--scroll-track);
                                border-radius: calc(var(--scroll-size) / 2);
                                opacity: 0;                       /* invisible by default  */
                                transition: opacity .2s ease; }
*:hover::-webkit-scrollbar-track,
*:active::-webkit-scrollbar-track { opacity: 1; }                  /* fades in on hover/scroll */

*::-webkit-scrollbar-thumb    { background: var(--scroll-thumb);
                                /* subtle bevel that echoes the capsule-pill motif */
                                background-image: linear-gradient(180deg,
                                                  rgba(255,255,255,.25),
                                                  rgba(0,0,0,.12));
                                box-shadow: inset 0 0 3px rgba(255,255,255,.4);
                                border-radius: calc(var(--scroll-size) / 2);
                                border: 2px solid var(--scroll-track);
                                transition: background-color .2s ease,
                                            opacity          .2s ease,
                                            width            .15s ease,
                                            height           .15s ease; }

@media (hover:hover){          /* only on devices that have a real cursor */
  *::-webkit-scrollbar-thumb:hover{
    background-color: var(--scroll-thumb-hover);          /* darker brand blue */
    width : calc(var(--scroll-size) + 4px);               /* 8 px → 12 px */
    height: calc(var(--scroll-size) + 4px);
  }
}

/* prevent the little grey square where the bars meet */
*::-webkit-scrollbar-corner { background: var(--scroll-track); }

.pause-evaluation-button:hover {
    background-color: var(--secondary-color); /* Brand color on hover */
    color: #fff;
    border-color: var(--secondary-color);
}

.pause-evaluation-button:disabled,
.pause-evaluation-button[disabled] {
    background-color: #eee;  /* Light gray for disabled */
    color: #aaa;
    border-color: #ddd;
    cursor: not-allowed;
    box-shadow: none;
}