/* TEMPORARY Bootstrap 3 compatibility.
 *
 * The app ran on Bootstrap 3.3.7 until Nov 2026. misc_scripts/css_migration/
 * bs3_to_bs5.py rewrote the markup it could convert safely; the classes below
 * are still toggled from JavaScript or used in ways a codemod cannot judge.
 * tests/test_css_stack.py caps the number of selectors in this file, so it can
 * only shrink: convert a usage, delete its rule, lower the cap.
 */

/* .hidden is added/removed by ~64 JS calls (BS5 uses .d-none). */
.hidden { display: none !important; }

/* .form-group spacing (BS5 uses .mb-3). */
.form-group { margin-bottom: 1rem; }

/* .help-block / .control-label (BS5 .form-text / .form-label). */
.help-block { display: block; margin-top: .25rem; color: var(--bs-secondary-color); font-size: .875em; }
.control-label { margin-bottom: .25rem; font-weight: 600; }

/* BS3 badges were grey pills with no colour class; BS5 badges need text-bg-*. */
.badge:where(:not([class*="bg-"], [class*="text-bg"])) {  /* (0,1,0): page .badge.x rules win */
    background-color: #777;
    color: #fff;
}

/* .form-inline was removed in BS5. */
.form-inline { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.form-inline .form-group { margin-bottom: 0; }
.form-inline .form-control, .form-inline .form-select { display: inline-block; width: auto; }

/* Dropdown carets drawn as <span class="caret"> in BS3 markup. */
.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

/* .in was BS3's "shown" state for .fade/.collapse (JS that sets it by hand). */
.fade.in { opacity: 1; }
.collapse.in { display: block; }

/* BS3 .row was a block clearfix with -15px gutters. BS5 makes every child of a
   .row full-width flex item, which breaks rows that hold no .col-* children. */
.row:not(:has(> [class*="col"])) { display: block; }
.row:not(:has(> [class*="col"])) > * { width: auto; max-width: none; flex-shrink: 1; }

/* BS3 helpers still in markup. */
.page-header { padding-bottom: 9px; margin: 20px 0 20px; border-bottom: 1px solid var(--bs-border-color); }
.open > .dropdown-menu { display: block; }
.checkbox, .radio { position: relative; display: block; margin: 10px 0; }
.label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}
.label-default { background-color: #777; }
.label-primary { background-color: var(--bs-primary); }
.label-success { background-color: #5cb85c; }
.label-info { background-color: #5bc0de; }
.label-warning { background-color: #f0ad4e; }
.label-danger { background-color: #d9534f; }
/* .close on custom (non-Bootstrap-modal) close glyphs */
.close {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: var(--bs-emphasis-color);
    opacity: .4;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.close:hover { opacity: .7; }
/* BS3 modal headers put the close button first; BS5 headers are flex rows. */
.modal-header > .btn-close:first-child { order: 2; margin-left: auto; }
.modal-header > .close:first-child { order: 2; margin-left: auto; }

/* Admin shell (admin_main.html wraps every admin page in .jumbotron). BS3 sizes,
   including its 21px paragraphs, so admin pages read as they did. */
.jumbotron { padding: 30px 15px; margin-bottom: 30px; border-radius: 6px; }
.jumbotron p { margin-bottom: 15px; font-size: 21px; font-weight: 200; }
@media (min-width: 768px) { .jumbotron { padding: 48px 60px; } }

/* BS3 panels / wells (admin + a few pages). */
.panel { margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; }
.panel-heading { padding: 10px 15px; border-bottom: 1px solid transparent; border-radius: 3px 3px 0 0; }
.panel-body { padding: 15px; }
.panel-footer { padding: 10px 15px; border-top: 1px solid var(--bs-border-color); border-radius: 0 0 3px 3px; }
.panel-title { margin: 0; font-size: 16px; }
.well { min-height: 20px; padding: 19px; margin-bottom: 20px; border: 1px solid var(--bs-border-color); border-radius: 4px; }