.rag-red {
    background-color: #cc222244;
}
.rag-red-disabled {
    background-color: #cc222244;
    opacity: 0.4;
}
.rag-yellow {
    background-color: #FFF2A5;
}
.rag-teal {
    background-color: #DBEAFE;
}
.rag-salmon {
    background-color: #FFCFC3;
}
.rag-green {
    background-color: #33cc3344;
}
.rag-grey {
    background-color: #60A5FA;
}
.rag-blue {
    background-color: #60A5FA;
}
.form-check {
    padding-left: 0;
}
.btn-group > .form-check:not(:last-child) > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.btn-group > .form-check:not(:first-child) > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
}
.btn-group .btn {
    background-color: white;
    color: #1E40AF;
    border-color: #1E40AF;
}
.btn-group .btn.active {
    background-color: #1E40AF;
    color: white;
    border-color: #1E40AF;
}
/* Wrapped item filters (transcript / model confidence): buttons wrap to
   multiple rows for scales with many items (HAM-D ~31) but keep the same
   Mira blue tone as the .btn-group filters above. */
.item-filter .btn {
    background-color: white;
    color: #1E40AF;
    border-color: #1E40AF;
}
.item-filter .btn.active {
    background-color: #1E40AF;
    color: white;
    border-color: #1E40AF;
}
.btn-group-vertical {
    width: 100%;
    display: inline;
}
.form-check .btn-group-vertical {
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.btn-group-vertical > .form-check > .btn {
    font-size: small;
    width: 35px;
}

.btn-group-vertical > .form-check:not(:last-child) > .btn {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.btn-group-vertical > .form-check:not(:first-child) > .btn {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    margin-top: -3px;
}
/* ---- Transcript: item cards ---- */
.transcript-card {
    background-color: white;
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.transcript-card .card-body {
    padding: 1rem;
}

.transcript-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f0f2f5;
}

.transcript-section-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ---- Transcript: score badges ---- */
.transcript-badges {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.transcript-badge {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}

.transcript-badge-rater {
    color: #495057;
    background-color: #f0f2f5;
}

.transcript-badge-model {
    color: #495057;
    background-color: #f0f2f5;
}

.transcript-badge-mismatch {
    color: #842029;
    background-color: #f8d7da;
}

/* ---- Transcript: non-item context cards ---- */
.transcript-context-card {
    background-color: #fafbfc;
    border: 1px dashed #dee2e6;
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}

.transcript-context-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

/* ---- Transcript: lines ---- */
.transcript-lines {
    font-size: 0.8rem;
    line-height: 1.6;
}

.transcript-line {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    /* padding: 0.2rem 0; */
    border-bottom: 1px solid transparent;
}

.transcript-line:hover {
    background-color: #f8f9fa;
    border-radius: 0.2rem;
}

.transcript-ts {
    flex-shrink: 0;
    width: 3rem;
    text-align: right;
    font-size: 0.7rem;
    font-family: 'Courier New', Courier, monospace;
    color: #6c757d;
}

.transcript-conf-dot {
    flex-shrink: 0;
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin: 0 0.15rem;
    align-self: center;
}

.transcript-conf-dot.conf-low {
    background-color: #dc3545;
}

.transcript-conf-dot.conf-mid {
    background-color: #e09200;
}

.transcript-conf-dot.conf-ok,
.transcript-conf-dot.conf-none {
    background-color: transparent;
}

.transcript-text {
    color: #212529;
}

/* ---- Transcript: sidebar ---- */
.transcript-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.transcript-sidebar-section {
    background-color: #f8f9fa;
    border-radius: 0.375rem;
    padding: 0.75rem;
    border-left: 3px solid #dee2e6;
}

.transcript-sidebar-explanation {
    border-left-color: #e09200;
}

.transcript-sidebar-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.35rem;
}

.transcript-sidebar-text {
    font-size: 0.8rem;
    color: #495057;
    line-height: 1.5;
}

.transcript-sidebar-text p {
    margin-bottom: 0.35rem;
}

.transcript-sidebar-text p:last-child {
    margin-bottom: 0;
}
.ag-header-cell-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: unset;
    white-space: normal;
}
.ag-header-cell-center .ag-header-cell-label {
    justify-content: center;
}
.ag-header-cell {
  .ag-header-cell-filter-button {
    display: none;
  }
  &.ag-header-cell-filtered,
  &.ag-column-menu-visible,
  &.ag-header-active {
    .ag-header-cell-filter-button {
      display: initial;
    }
  }
}
.ag-theme-balham.fontawesome {
    --ag-icon-font-family: 'Font Awesome 6 Free' !important;
    --ag-icon-font-weight: 900 !important;
    --ag-icon-font-code-checkbox-checked: '\f058';
    --ag-icon-font-code-checkbox-unchecked: '\f057';
    --ag-icon-font-code-checkbox-indeterminate: '\f111';
    --ag-icon-font-code-first: '\f048';
    --ag-icon-font-code-previous: '\f104';
    --ag-icon-font-code-next: '\f105';
    --ag-icon-font-code-last: '\f051';
    --ag-icon-font-code-asc: '\f0de';
    --ag-icon-font-code-desc: '\f0dd';
    --ag-icon-font-code-none: '\f256';
    --ag-icon-font-code-filter: '\f0c9';
    --ag-icon-font-code-grip: '\f58d';
    --ag-icon-font-code-menu: '\f0c9';
    --ag-icon-font-code-small-down: '\f0dd';
    --ag-icon-font-code-contracted: '\f105';
    --ag-icon-font-code-expanded: '\f107';
    --ag-checkbox-checked-color: #33cc33;
    --ag-checkbox-unchecked-color: #cc2222;
    --ag-checkbox-indeterminate-color: #f1f1f1;
    --ag-checkbox-background-color: #ffffffff;
}
.ag-checkbox-input-wrapper.ag-disabled {
    opacity: 1;
}
.cellCenter .ag-cell-wrapper {
    justify-content: center;
}

.ag-theme-balham .ag-cell-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
}

.ag-theme-balham .ag-cell.cell-duration:not([col-id="Source"]) {
    font-size: 10px;
    white-space: nowrap;
}

/* Navbar dropdown group styling */
.navbar-dropdown-group {
    gap: 0;
}

.navbar-dropdown-container {
    position: relative;
}

.navbar-dropdown-label {
    position: absolute;
    top: 4px;
    left: 10px;
    color: #6c757d;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 1;
    pointer-events: none;
}

.navbar-dropdown {
    width: 150px;
}

.navbar-dropdown .Select-control {
    background-color: white;
    border-color: #ced4da;
    color: #212529;
    height: 40px;
    min-height: 40px;
}

.navbar-dropdown .Select-value,
.navbar-dropdown .Select-placeholder {
    position: absolute !important;
    bottom: 4px !important;
    top: auto !important;
    line-height: 1.2 !important;
}

.navbar-dropdown .Select-value-label {
    color: #212529 !important;
    font-size: 0.875rem;
    font-weight: 600;
}

.navbar-dropdown .Select-input {
    height: 40px;
}

.navbar-dropdown .Select-arrow {
    border-color: #212529 transparent transparent;
}

.navbar-dropdown .Select-menu-outer {
    background-color: white;
    border-color: #ced4da;
}

.navbar-dropdown .VirtualizedSelectOption {
    color: #212529;
    font-size: 0.875rem;
}

.navbar-dropdown .VirtualizedSelectFocusedOption {
    background-color: rgba(0, 0, 0, 0.1);
}

/* Left dropdown - rounded left corners only */
.navbar-dropdown-left .Select-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

/* Middle dropdown - no rounded corners */
.navbar-dropdown-middle .Select-control {
    border-radius: 0;
    border-right: none;
}

/* Right dropdown - rounded right corners only */
.navbar-dropdown-right .Select-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Disabled state */
.navbar-dropdown.Select.is-disabled .Select-control {
    opacity: 0.5;
    cursor: not-allowed;
}

/* User menu */
.user-menu-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.user-avatar-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background-color: #6c757d;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color 0.15s;
}

.user-avatar-btn:hover {
    background-color: #5a6268;
}

.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 140px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    padding: 4px 0;
}

.user-menu-item {
    display: block;
    width: 100%;
    padding: 8px 16px;
    border: none;
    background: none;
    text-align: left;
    font-size: 0.875rem;
    color: #212529;
    cursor: pointer;
}

.user-menu-item:hover {
    background-color: #f8f9fa;
}

/* Sidebar visits accordion */
.sidebar-visits-accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-width: 0;
    --bs-accordion-btn-padding-x: 0.75rem;
    --bs-accordion-btn-padding-y: 0.5rem;
    --bs-accordion-body-padding-x: 0;
    --bs-accordion-body-padding-y: 0;
    margin: 0 -0.75rem;
}

.sidebar-visits-accordion .accordion-item {
    border: none;
    border-bottom: 1px solid #dee2e6;
    border-radius: 0;
    background-color: #fff;
}

.sidebar-visits-accordion .accordion-item:first-child {
    border-top: 1px solid #dee2e6;
}

.sidebar-visits-accordion .accordion-item:last-child {
    border-bottom: 1px solid #dee2e6;
}

/* Collapsed state - show box shadow to indicate children */
.sidebar-visits-accordion .accordion-item:has(.accordion-button.collapsed) {
    box-shadow: inset 0 -3px 0 0 #e4e7ea;
}

.sidebar-visits-accordion .accordion-button {
    font-size: 0.875rem;
    font-weight: 500;
    background-color: #fff;
    box-shadow: none;
    padding: 0.75rem 0.75rem;
    border-radius: 0;
}

.sidebar-visits-accordion .accordion-button:not(.collapsed) {
    background-color: #f0f2f4;
    color: #212529;
}

.sidebar-visits-accordion .accordion-button::after {
    width: 0.875rem;
    height: 0.875rem;
    background-size: 0.875rem;
}

.sidebar-visits-accordion .accordion-body {
    padding: 0;
    background-color: #fff;
}

/* Subelement boxes */
.sidebar-visit-link {
    display: block;
    padding: 0.4rem 0.75rem 0.4rem 1.5rem;
    border-bottom: 1px solid #eef0f2;
    background-color: #fafbfc;
    text-decoration: none;
    color: #495057;
    font-size: 0.8rem;
}

.sidebar-visit-link:last-child {
    border-bottom: none;
}

.sidebar-visit-link:hover {
    background-color: #e9ecef;
}

.sidebar-visit-link-active {
    background-color: #e2e6ea;
    border-left: 3px solid #0d6efd;
    padding-left: calc(1.5rem - 3px);
    font-weight: 500;
    color: #212529;
}

.sidebar-visit-link-active:hover {
    background-color: #d3d9df;
}

/* Subject History is a top-level entry, not a visit sub-item: align its text
   with the visit labels (accordion buttons, 0.75rem) instead of the indented
   sub-items (1.5rem). The bordered box stays full-bleed; only the text moves. */
.sidebar-history-link {
    padding-left: 0.75rem;
}

.sidebar-history-link.sidebar-visit-link-active {
    padding-left: calc(0.75rem - 3px);
}

/* Flags card radio group */
.flags-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.flags-radio-group label {
    font-size: 0.8rem;
    color: #495057;
}

/* ---- Entity date picker ---- */
.entity-date-picker {
    flex-shrink: 0;
}

.entity-date-picker .DateInput {
    width: 90px;
}

.entity-date-picker .DateInput_input {
    font-size: 0.78rem;
    padding: 4px 8px;
    line-height: 1.4;
    color: #212529;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-weight: 500;
}

.entity-date-picker .DateInput_input::placeholder {
    color: #6c757d;
    font-weight: 400;
}

.entity-date-picker .DateInput_input__focused {
    border-color: #1E40AF;
    outline: none;
}

.entity-date-picker .DateRangePickerInput {
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

.entity-date-picker .DateRangePickerInput_arrow {
    color: #6c757d;
    padding: 0 2px;
}

.entity-date-picker .DateRangePickerInput_arrow svg {
    width: 14px;
    height: 14px;
    fill: #6c757d;
}

.entity-date-picker .DateRangePickerInput_clearDates {
    padding: 2px;
    margin: 0 0 0 4px;
}

.entity-date-picker .DateRangePickerInput_clearDates svg {
    width: 12px;
    height: 12px;
    fill: #6c757d;
}

.entity-date-picker .DateRangePickerInput_clearDates:hover svg {
    fill: #842029;
}

.entity-date-picker .CalendarDay__selected,
.entity-date-picker .CalendarDay__selected:active,
.entity-date-picker .CalendarDay__selected:hover {
    background: #1E40AF;
    border-color: #1E40AF;
    color: #fff;
}

.entity-date-picker .CalendarDay__selected_span {
    background: #DBEAFE;
    border-color: #93C5FD;
    color: #1E40AF;
}

.entity-date-picker .CalendarDay__hovered_span,
.entity-date-picker .CalendarDay__hovered_span:hover {
    background: #EFF6FF;
    border-color: #93C5FD;
    color: #1E40AF;
}

.entity-date-picker .DayPickerNavigation_button__default {
    border: 1px solid #ced4da;
    border-radius: 6px;
}

.entity-date-picker .DayPickerNavigation_button__default:hover {
    border-color: #1E40AF;
}

/* ---- Raters dashboard ---- */
.raters-section-title {
    font-size: 0.72rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.4rem;
}

.raters-alert-card {
    border-radius: 0.375rem;
    border: 1px solid #dee2e6;
    overflow: hidden;
}

.raters-alert-title {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.4rem 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.raters-alert-danger {
    background-color: #FFCFC3;
    color: #842029;
    border-bottom: 1px solid #E5A090;
}

.raters-alert-warning {
    background-color: #FFF2A5;
    color: #664d03;
    border-bottom: 1px solid #D4C870;
}

.raters-alert-body {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    background-color: white;
}

/* ---- Global card and graph styling ---- */
.card {
    border: 1px solid #e0e0e0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.dash-graph {
    border: 1px solid #e0e0e0;
    border-radius: 0.375rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    background-color: white;
    padding: 0.5rem;
}

.ag-theme-balham {
    border: 1px solid #e0e0e0 !important;
    border-radius: 0.375rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Navbar Cols: spacing rules previously inline; promoted here so they
   can be overridden in the collapsed-drawer media query below. */
.mira-user-menu-col {
    margin-left: 16px;
}

/* Subject-detail sidebar — at-all-widths defaults. The "active" class
   is added by `update_sidebar_class` in run.py only on /subject_detail.
   At >= lg this renders as the inline 18% column; the < lg drawer mode
   is in the media query below. */
#app-sidebar {
    display: none;
    width: 18%;
    min-width: 200px;
    padding: 0.5rem 0.75rem;
    background: #f8f9fa;
    border-right: 1px solid #dee2e6;
    box-sizing: border-box;
    flex-direction: column;
    flex-shrink: 0;
}
#app-sidebar.app-sidebar-active {
    display: flex;
}
#app-sidebar-backdrop {
    display: none;
}
.subject-sidebar-toggle {
    display: none;
}

/* ===================================================================== */
/* Responsive: navbar drawer (< xxl = 1400px).                           */
/* The navbar uses an earlier breakpoint than the rest of the layout —   */
/* the 5 chained dropdowns + main nav + brand crams the bar before       */
/* 1000 px, so we collapse it at < xxl rather than waiting for `lg`.     */
/* ===================================================================== */
@media (max-width: 1399.98px) {
    /* Inside the collapsed navbar drawer, drop the desktop margin on the
       user-menu column and stack dropdowns vertically. */
    .navbar-collapse .mira-user-menu-col {
        margin-left: 0;
        padding: 0.25rem 0;
        width: 100%;
        flex: none;
    }

    .navbar-collapse .navbar-dropdown-group {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        width: 100%;
        padding: 0.25rem 0;
    }
    .navbar-collapse .navbar-dropdown-container {
        width: 100%;
    }
    .navbar-collapse .navbar-dropdown {
        width: 100%;
    }
    /* Each dropdown stands alone in the drawer — drop the chained-pill
       border styling that joins them on desktop. */
    .navbar-collapse .navbar-dropdown-left .Select-control,
    .navbar-collapse .navbar-dropdown-middle .Select-control,
    .navbar-collapse .navbar-dropdown-right .Select-control {
        border-radius: 4px;
        border-right: 1px solid #ced4da;
    }
}

/* ===================================================================== */
/* Responsive: tablet/mobile content (< lg = 992px).                     */
/* All overrides in this block apply only on narrow viewports — at >= lg */
/* the page content layout is byte-for-byte the desktop experience.      */
/* ===================================================================== */
@media (max-width: 991.98px) {
    /* Stat / pill bars: let the inner pill row and the outer left|right
       wrapper wrap so right-side clusters fall to the next line instead
       of overflowing. */
    .mira-stat-bar,
    .mira-stat-row {
        flex-wrap: wrap;
        row-gap: 0.4rem;
    }

    /* AG Grid: more touch-friendly row height on tablets. */
    .ag-theme-balham {
        --ag-row-height: 40px;
    }

    /* Subject sidebar becomes a left-edge drawer over the navbar+content.
       CSS classes wired in run.py:
         .app-sidebar-active        → drawer mounted (only on /subject_detail)
         .app-sidebar-active.app-sidebar-open → slid in
         #app-sidebar-backdrop.show → translucent overlay visible
       position:fixed escapes the parent flex row's overflow:hidden, so the
       drawer paints over the entire viewport including the navbar. */
    #app-sidebar.app-sidebar-active {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        max-width: 80vw;
        min-width: 0;
        z-index: 1040;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
    }
    #app-sidebar.app-sidebar-active.app-sidebar-open {
        transform: translateX(0);
    }
    #app-sidebar-backdrop.show {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1039;
    }

    /* Visits toggle button — visible only inside subject_detail at < lg.
       Hidden by default elsewhere via the at-all-widths rule above. */
    .subject-sidebar-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        margin: 0.5rem 0 0.5rem 1rem;
        padding: 0.45rem 0.85rem;
        font-size: 0.9rem;
        background: #fff;
        color: #333;
        border: 1px solid #dee2e6;
        border-radius: 6px;
        cursor: pointer;
        align-self: flex-start;
    }
    .subject-sidebar-toggle:hover {
        background: #f8f9fa;
    }
}
/* Subject Overview per-icon hover tooltip (floating bubble on <body>, shown
   instantly by VisitCellRenderer's mouseenter handlers). */
#mira-cell-tip {
    position: fixed;
    z-index: 10000;
    pointer-events: none;
    background: #1f2937;
    color: #fff;
    font-size: 12px;
    line-height: 1.3;
    padding: 4px 8px;
    border-radius: 4px;
    max-width: 260px;
    white-space: normal;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
}
#mira-cell-tip.mira-cell-tip-on {
    opacity: 1;
    visibility: visible;
}


/* --- Rater Oversight overview: a rectangular dashboard ---------------------
   Bootstrap already stretches the two columns of the top row to equal height. What was
   missing is that the right column's CONTENT did not fill it, so the page bottomed out
   ragged. The two tiles grow to share whatever height the left column sets. */
.ov-side { display: flex; flex-direction: column; }
.ov-side > .ov-grow { flex: 1 1 0; min-height: 0; }
/* dcc.Loading renders a wrapper around its child, so the tile inside must fill it too. */
.ov-side > .ov-grow > .fl-mod { height: 100%; }
.ov-side .fl-mod { overflow-y: auto; }