/*
 * bootstrap-overrides.css — Bootstrap 5, tuned to the Bootstrap 3 metrics that
 * esCss.css, project.css and responsive.css were written for.
 *
 * Loaded right after bootstrap.min.css and before those three, so they still
 * override it the way they overrode Bootstrap 3. Most of it sets Bootstrap 5's
 * own variables to Bootstrap 3's values; the plain rules say what Bootstrap 3
 * did that Bootstrap 5 no longer does.
 */

/* ==========================================================================
   1. Base type, colours, links
   ========================================================================== */

/*
 * A 14px root makes Bootstrap 5's rem-based components come out at Bootstrap
 * 3 sizes (34px inputs and buttons). Nothing in the app's own CSS uses rem.
 */
:root {
    font-size: 14px;
    --bs-body-font-size: 14px;
    --bs-body-line-height: 1.42857143;
    --bs-body-color: #333;
    --bs-body-color-rgb: 51, 51, 51;
    --bs-border-color: #ddd;
    --bs-border-radius: 4px;
    --bs-border-radius-sm: 3px;
    --bs-border-radius-lg: 6px;
    --bs-link-color: #337ab7;
    --bs-link-color-rgb: 51, 122, 183;
    --bs-link-hover-color: #23527c;
    --bs-link-hover-color-rgb: 35, 82, 124;

    /* Bootstrap 3's palette, which the app's buttons, badges and alerts use */
    --bs-primary: #337ab7;
    --bs-primary-rgb: 51, 122, 183;
    --bs-secondary: #777;
    --bs-secondary-rgb: 119, 119, 119;
    --bs-success: #5cb85c;
    --bs-success-rgb: 92, 184, 92;
    --bs-info: #5bc0de;
    --bs-info-rgb: 91, 192, 222;
    --bs-warning: #f0ad4e;
    --bs-warning-rgb: 240, 173, 78;
    --bs-danger: #d9534f;
    --bs-danger-rgb: 217, 83, 79;

    /* Bootstrap 3's alert/state colours (Bootstrap 5 builds alerts and *-subtle from these) */
    --bs-success-text-emphasis: #3c763d;
    --bs-success-bg-subtle: #dff0d8;
    --bs-success-border-subtle: #d6e9c6;
    --bs-info-text-emphasis: #31708f;
    --bs-info-bg-subtle: #d9edf7;
    --bs-info-border-subtle: #bce8f1;
    --bs-warning-text-emphasis: #8a6d3b;
    --bs-warning-bg-subtle: #fcf8e3;
    --bs-warning-border-subtle: #faebcc;
    --bs-danger-text-emphasis: #a94442;
    --bs-danger-bg-subtle: #f2dede;
    --bs-danger-border-subtle: #ebccd1;
}

/* Bootstrap 3 text helpers used the darker state colours. */
.text-success { color: #3c763d !important; }
.text-info    { color: #31708f !important; }
.text-warning { color: #8a6d3b !important; }
.text-danger  { color: #a94442 !important; }
.text-muted   { color: #777 !important; }
.text-bg-info,
.text-bg-warning { color: #fff !important; }

/* Bootstrap 5 underlines every link; Bootstrap 3 only on hover. */
a { text-decoration: none; }
/* ...and Bootstrap 5 leaves an <a> with no href or class in the text colour. */
a:not([href]):not([class]) { color: rgba(var(--bs-link-color-rgb), 1); }
a:hover,
a:focus { text-decoration: underline; }
.btn:hover, .btn:focus,
.nav-link:hover, .nav-link:focus,
.navbar-brand:hover, .navbar-brand:focus,
.dropdown-item:hover, .dropdown-item:focus,
.page-link:hover, .page-link:focus { text-decoration: none; }

h1, h2, h3, .h1, .h2, .h3 { margin-top: 20px; margin-bottom: 10px; }
h4, h5, h6, .h4, .h5, .h6 { margin-top: 10px; margin-bottom: 10px; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { line-height: 1.1; }
h1, .h1 { font-size: 36px; }
h2, .h2 { font-size: 30px; }
h3, .h3 { font-size: 24px; }
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: 12px; }
p { margin: 0 0 10px; }
ul, ol { padding-left: 40px; margin-bottom: 10px; }
small, .small { font-size: 85%; }
hr { margin: 20px 0; border: 0; border-top: 1px solid #eee; opacity: 1; }
label { max-width: 100%; margin-bottom: 5px; font-weight: 700; }
input[type='checkbox'],
input[type='radio'] { margin: 4px 0 0; line-height: normal; }
input[type='file'] { display: block; }
input[type='file']::file-selector-button { font: revert; } /* Bootstrap 5 makes it inherit the page font */

/* Font Awesome 4 spaces icons it sees floated with .pull-*, now .float-*. */
.fa.float-end { margin-left: .3em; }
.fa.float-start { margin-right: .3em; }

/* ==========================================================================
   2. Grid
   ========================================================================== */

.row,
.container,
.container-fluid { --bs-gutter-x: 30px; }

/* Bootstrap 3's three fixed container widths, fluid below 768px. */
@media (min-width: 576px)  { .container { max-width: none; } }
@media (min-width: 768px)  { .container { max-width: 750px; } }
@media (min-width: 992px)  { .container { max-width: 970px; } }
@media (min-width: 1200px) { .container { max-width: 1170px; } }

/*
 * Bootstrap 3 columns worked anywhere: every .col-* was a padded box that
 * floated at its breakpoint, whatever its parent. Most of these views put
 * columns straight into a .container, another column or a .form-group, with no
 * .row in between. Bootstrap 5 columns only lay out inside a .row, so for
 * those orphans the Bootstrap 3 behaviour is restored here. :where() keeps the
 * specificity at Bootstrap 3's single class, so the app's rules still win.
 * Inside a .row, columns are plain Bootstrap 5 flex items.
 */
:where(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
       .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
       .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
       .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12) {
    position: relative;
    min-height: 1px;
}

:where(:not(.row)) > :where(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
       .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
       .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
       .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12) {
    padding-right: 15px;
    padding-left: 15px;
}

:where(:not(.row)) > :where(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12) { float: left; }

@media (min-width: 768px) {
    :where(:not(.row)) > :where(.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12) { float: left; }
}

@media (min-width: 992px) {
    :where(:not(.row)) > :where(.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12) { float: left; }
}

@media (min-width: 1200px) {
    :where(:not(.row)) > :where(.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12) { float: left; }
}

/* ...and Bootstrap 3 containers cleared those floats. */
:where(:not(.navbar)) > :where(.container, .container-fluid)::after {
    display: table;
    clear: both;
    content: '';
}

/*
 * Bootstrap 5 pads every child of a .row like a column. Bootstrap 3 padded
 * only the columns, so headings and boxes placed straight in a row (the login
 * panel, for one) keep their full width.
 */
.row > :where(:not([class*='col'])) {
    padding-right: 0;
    padding-left: 0;
}

/* ==========================================================================
   3. Forms
   ========================================================================== */

/*
 * Bootstrap 3 form layouts that Bootstrap 5 dropped and the views still use:
 * .form-group spaces the fields; inside .form-horizontal each .form-group is a
 * row (its columns float, see the grid above); .form-inline lines fields up
 * from 768px.
 */
.form-group { margin-bottom: 15px; }

.form-horizontal .form-group {
    margin-right: -15px;
    margin-left: -15px;
}

.form-horizontal .form-group::after {
    display: table;
    clear: both;
    content: '';
}

@media (min-width: 768px) {
    .form-horizontal .form-label,
    .form-horizontal .col-form-label {
        padding-top: 7px;
        margin-bottom: 0;
        text-align: right;
    }

    .form-inline .form-group {
        display: inline-block;
        margin-bottom: 0;
        vertical-align: middle;
    }

    .form-inline .form-control {
        display: inline-block;
        width: auto;
        vertical-align: middle;
    }
}

/* Bootstrap 3 fixed the control heights; Bootstrap 5 derives them from the font size. */
.form-control {
    height: 34px;
    padding: 6px 12px;
    line-height: 1.42857143;
    color: #555;
    border-color: #ccc;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

.form-control:focus {
    color: #555;
    border-color: #66afe9;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

textarea.form-control,
select[multiple].form-control,
select[size].form-control { height: auto; }

.form-control-sm { height: 30px; padding: 5px 10px; font-size: 12px; line-height: 1.5; }
.form-control-lg { height: 46px; padding: 10px 16px; font-size: 18px; line-height: 1.3333333; }

.form-control::placeholder { color: #999; }

.form-control:disabled,
.form-control[readonly] { background-color: #eee; opacity: 1; }

/* Bootstrap 5 hides a select's own arrow under .form-control; Bootstrap 3 kept the native control. */
select.form-control { appearance: auto; }

.form-label { margin-bottom: 5px; }
/* .control-label: an ordinary label, until .form-horizontal lines it up from 768px. */
.col-form-label { padding-top: 0; padding-bottom: 0; margin-bottom: 5px; line-height: 1.42857143; }

/*
 * .help-block, now .form-text. Not on <small>: the few <small class="form-text">
 * hints predate this port and were plain small text under Bootstrap 3.
 */
.form-text:not(small) {
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: inherit;
    color: #737373;
}

/* Bootstrap 3's error state, which the views set from Laravel's $errors. */
.has-error .form-text,
.has-error .form-label,
.has-error .col-form-label { color: #a94442; }
.has-error .form-control { border-color: #a94442; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); }
.has-error .form-control:focus { border-color: #843534; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483; }

/* ==========================================================================
   4. Buttons
   ========================================================================== */

.btn {
    --bs-btn-padding-x: 12px;
    --bs-btn-padding-y: 6px;
    --bs-btn-font-size: 14px;
    --bs-btn-line-height: 1.42857143;
    white-space: nowrap; /* Bootstrap 5 lets button labels wrap */
}

.btn-sm { --bs-btn-padding-x: 10px; --bs-btn-padding-y: 5px; --bs-btn-font-size: 12px; --bs-btn-line-height: 1.5; }
.btn-lg { --bs-btn-padding-x: 16px; --bs-btn-padding-y: 10px; --bs-btn-font-size: 18px; --bs-btn-line-height: 1.3333333; }

/* Bootstrap 3's button colours. .btn-default no longer exists in Bootstrap 5. */
.btn-default {
    --bs-btn-color: #333; --bs-btn-bg: #fff; --bs-btn-border-color: #ccc;
    --bs-btn-hover-color: #333; --bs-btn-hover-bg: #e6e6e6; --bs-btn-hover-border-color: #adadad;
    --bs-btn-active-color: #333; --bs-btn-active-bg: #e6e6e6; --bs-btn-active-border-color: #adadad;
    --bs-btn-disabled-color: #333; --bs-btn-disabled-bg: #fff; --bs-btn-disabled-border-color: #ccc;
    --bs-btn-focus-shadow-rgb: 204, 204, 204;
}

.btn-primary {
    --bs-btn-bg: #337ab7; --bs-btn-border-color: #2e6da4;
    --bs-btn-hover-bg: #286090; --bs-btn-hover-border-color: #204d74;
    --bs-btn-active-bg: #286090; --bs-btn-active-border-color: #204d74;
    --bs-btn-disabled-bg: #337ab7; --bs-btn-disabled-border-color: #2e6da4;
    --bs-btn-focus-shadow-rgb: 51, 122, 183;
}

.btn-success {
    --bs-btn-bg: #5cb85c; --bs-btn-border-color: #4cae4c;
    --bs-btn-hover-bg: #449d44; --bs-btn-hover-border-color: #398439;
    --bs-btn-active-bg: #449d44; --bs-btn-active-border-color: #398439;
    --bs-btn-disabled-bg: #5cb85c; --bs-btn-disabled-border-color: #4cae4c;
    --bs-btn-focus-shadow-rgb: 92, 184, 92;
}

.btn-info {
    --bs-btn-color: #fff; --bs-btn-bg: #5bc0de; --bs-btn-border-color: #46b8da;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #31b0d5; --bs-btn-hover-border-color: #269abc;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #31b0d5; --bs-btn-active-border-color: #269abc;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #5bc0de; --bs-btn-disabled-border-color: #46b8da;
    --bs-btn-focus-shadow-rgb: 91, 192, 222;
}

.btn-warning {
    --bs-btn-color: #fff; --bs-btn-bg: #f0ad4e; --bs-btn-border-color: #eea236;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #ec971f; --bs-btn-hover-border-color: #d58512;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #ec971f; --bs-btn-active-border-color: #d58512;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #f0ad4e; --bs-btn-disabled-border-color: #eea236;
    --bs-btn-focus-shadow-rgb: 240, 173, 78;
}

.btn-danger {
    --bs-btn-bg: #d9534f; --bs-btn-border-color: #d43f3a;
    --bs-btn-hover-bg: #c9302c; --bs-btn-hover-border-color: #ac2925;
    --bs-btn-active-bg: #c9302c; --bs-btn-active-border-color: #ac2925;
    --bs-btn-disabled-bg: #d9534f; --bs-btn-disabled-border-color: #d43f3a;
    --bs-btn-focus-shadow-rgb: 217, 83, 79;
}

/* ==========================================================================
   5. Components
   ========================================================================== */

/* Cards are the former panels. */
.card {
    --bs-card-spacer-y: 15px;
    --bs-card-spacer-x: 15px;
    --bs-card-cap-padding-y: 10px;
    --bs-card-cap-padding-x: 15px;
    --bs-card-cap-bg: #f5f5f5;
    --bs-card-border-color: #ddd;
    --bs-card-border-radius: 4px;
    --bs-card-inner-border-radius: 3px;
    margin-bottom: 20px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

/* .panel-body cleared its floats; the filter forms are floated columns. */
.card-body::after {
    display: table;
    clear: both;
    content: '';
}

/* A panel heading had a transparent border unless the panel's colour gave it one. */
.card-header { border-bottom-color: transparent; }
.card-title { margin-top: 0; margin-bottom: 0; font-size: 16px; }
.card-title > a,
.card-title > small > a { color: inherit; }

/* .panel-group stacks the collapsible filter panels. */
.panel-group { margin-bottom: 20px; }
.panel-group > .card { margin-bottom: 0; }
.panel-group > .card + .card { margin-top: 5px; }
.panel-group .card-header { border-bottom: 0; }
.panel-group .card-header + .collapse > .card-body { border-top: 1px solid #ddd; }

.alert {
    --bs-alert-padding-x: 15px;
    --bs-alert-padding-y: 15px;
    --bs-alert-margin-bottom: 20px;
}

.alert > p,
.alert > ul { margin-bottom: 0; }
.alert > p + p { margin-top: 5px; }
.alert h4 { margin-top: 0; color: inherit; }
.alert .btn-close { opacity: .2; }
.alert .btn-close:hover,
.alert .btn-close:focus { opacity: .5; }

.modal {
    --bs-modal-width: 600px;
    --bs-modal-padding: 15px;
    --bs-modal-header-padding: 15px;
    --bs-modal-header-padding-x: 15px;
    --bs-modal-header-padding-y: 15px;
    --bs-modal-header-border-color: #e5e5e5;
    --bs-modal-footer-border-color: #e5e5e5;
    --bs-modal-border-radius: 6px;
    --bs-modal-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
}

@media (min-width: 576px) {
    .modal { --bs-modal-margin: 30px; }
}

/*
 * Bootstrap 5's header is a flex row, so the title only spans the width the
 * close button leaves, as it did next to Bootstrap 3's floated close.
 */
.modal-title { flex-grow: 1; margin: 0; line-height: 1.42857143; }

.dropdown-menu {
    --bs-dropdown-min-width: 160px;
    --bs-dropdown-padding-y: 5px;
    --bs-dropdown-spacer: 2px;
    --bs-dropdown-font-size: 14px;
    --bs-dropdown-color: #333;
    --bs-dropdown-border-color: rgba(0, 0, 0, .15);
    --bs-dropdown-divider-margin-y: 9px;
    --bs-dropdown-divider-bg: #e5e5e5;
    --bs-dropdown-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    --bs-dropdown-link-color: #333;
    --bs-dropdown-link-hover-color: #262626;
    --bs-dropdown-link-hover-bg: #f5f5f5;
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: #337ab7;
    --bs-dropdown-item-padding-x: 20px;
    --bs-dropdown-item-padding-y: 3px;
    box-shadow: var(--bs-dropdown-box-shadow);
}

.dropdown-item { line-height: 1.42857143; }

/* Former .label elements: Bootstrap 3's tighter padding. */
.badge:not(.rounded-pill) { display: inline; padding: .2em .6em .3em; }

/* Bootstrap 3 badges (now .rounded-pill) were smaller pills that sat on the text's middle. */
.badge.rounded-pill {
    --bs-badge-padding-x: 7px;
    --bs-badge-padding-y: 3px;
    --bs-badge-font-size: 12px;
    min-width: 10px;
    vertical-align: middle;
}

/* Bootstrap 3's pagination was an inline block of inline items, so a text-align on its parent placed it. */
.pagination { display: inline-block; margin: 20px 0; }
.pagination > li { display: inline; }

.progress {
    --bs-progress-height: 20px;
    --bs-progress-font-size: 12px;
    --bs-progress-bg: #f5f5f5;
    margin-bottom: 20px;
}

/* Tables: Bootstrap 3 drew each row's rule above it, and a heavier one under the head. */
.table {
    --bs-table-striped-bg: #f9f9f9;
    --bs-table-hover-bg: #f5f5f5;
    margin-bottom: 20px;
}

/* Explicit colour: Bootstrap 5 cells inherit the table's, and .table-xalandri's top border is pink. */
.table > :not(caption) > * > * {
    padding: 8px;
    border-top: 1px solid var(--bs-table-border-color);
    border-bottom-width: 0;
}

.table > thead > tr > th { vertical-align: bottom; border-bottom: 2px solid #ddd; }
.table > thead:first-child > tr:first-child > * { border-top-width: 0; }
.table-sm > :not(caption) > * > * { padding: 5px; }
.table-bordered > :not(caption) > * > * { border-width: 1px; }