/* Bootstrap 4/5 class names, defined for a Bootstrap 3 Portal.
 * ---------------------------------------------------------------------------------------------
 * This site runs Bootstrap 3.4.1. Its bootstrap.css is not a stock download: a block of Bootstrap 5
 * utilities has been appended to it, BS5 custom properties were spliced into :root, and rules were
 * edited in place (.form-control is width:95%, not 100%). foodward.css back-fills a few BS4 names
 * of its own (.btn-secondary, .btn-dark).
 *
 * The result is that views reach for BS4/BS5 names that nothing defines, and those classes render
 * as NOTHING - silently. A button asking for .btn-outline-secondary got no border and no colour; a
 * checkbox wrapped in .form-check lost its layout; and thirteen admin dialogs asking for .modal-xl
 * have been rendering at Bootstrap 3's default 600px for as long as they have existed.
 *
 * This file defines the missing names in terms of what Bootstrap 3 already provides, so a class
 * does what its name says. It is a compatibility layer, not a migration: nothing here overrides an
 * existing rule, and removing the file returns the site exactly to its previous behaviour.
 *
 * Load order matters - after bootstrap.css and bootstrap-theme.css so BS3 is the base, before
 * foodward.css and Site.css so site styling still wins.
 *
 * Deliberately NOT defined:
 *   .btn-secondary  - already defined in foodward.css (grey #6c757d).
 *   .btn-primary    - BS3 defines it; foodward.css restyles it.
 *   .d-flex, .gap-*, .ms-*, .me-*, .text-end, .p-0, .mb-0, .d-block, .border, .flex-wrap
 *                   - all present in the BS5 utility block appended to bootstrap.css.
 */

/* ---------------------------------------------------------------------------- Modal sizes --- */

/* BS3 gives .modal-dialog width:600px at >=768px and defines .modal-lg (900px) and .modal-sm
   (300px) but has no .modal-xl.

   Deliberately NOT Bootstrap 5's 1140px. Every .modal-xl here is a small admin form - three rows of
   paired fields - and at 1140px they were mostly empty space. 800px gives the pairs room without
   stretching four fields across a monitor. The ticket dialogs set their own widths and are
   unaffected by this. */
@media (min-width: 992px) {
    .modal-xl {
        width: 800px;
    }
}

/* BS3's own default. Named here only so `modal-md` is not a no-op that reads like a mistake. */
@media (min-width: 768px) {
    .modal-md {
        width: 600px;
    }
}

/* Vertically centred dialog (Bootstrap 4+). BS3 pins the dialog near the top. */
.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 60px);
}

    .modal-dialog-centered .modal-content {
        width: 100%;
    }

/* ------------------------------------------------------------------------- Outline buttons --- */

/* Bootstrap 4/5 outline variants. Colours taken from this site's own palette where it has one
   (.btn-secondary in foodward.css) and from Bootstrap 3's contextual button colours otherwise. */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-light,
.btn-outline-dark {
    background-color: transparent;
    background-image: none;
}

.btn-outline-primary {
    color: #337ab7;
    border-color: #337ab7;
}

    .btn-outline-primary:hover,
    .btn-outline-primary:focus,
    .btn-outline-primary:active {
        color: #fff;
        background-color: #337ab7;
        border-color: #337ab7;
    }

.btn-outline-secondary {
    color: #6c757d;
    border-color: #adb5bd;
}

    .btn-outline-secondary:hover,
    .btn-outline-secondary:focus,
    .btn-outline-secondary:active {
        color: #fff;
        background-color: #6c757d;
        border-color: #6c757d;
    }

.btn-outline-success {
    color: #449d44;
    border-color: #4cae4c;
}

    .btn-outline-success:hover,
    .btn-outline-success:focus,
    .btn-outline-success:active {
        color: #fff;
        background-color: #5cb85c;
        border-color: #4cae4c;
    }

.btn-outline-danger {
    color: #c9302c;
    border-color: #d43f3a;
}

    .btn-outline-danger:hover,
    .btn-outline-danger:focus,
    .btn-outline-danger:active {
        color: #fff;
        background-color: #d9534f;
        border-color: #d43f3a;
    }

.btn-outline-warning {
    color: #ec971f;
    border-color: #eea236;
}

    .btn-outline-warning:hover,
    .btn-outline-warning:focus,
    .btn-outline-warning:active {
        color: #fff;
        background-color: #f0ad4e;
        border-color: #eea236;
    }

.btn-outline-info {
    color: #31b0d5;
    border-color: #46b8da;
}

    .btn-outline-info:hover,
    .btn-outline-info:focus,
    .btn-outline-info:active {
        color: #fff;
        background-color: #5bc0de;
        border-color: #46b8da;
    }

.btn-outline-light {
    color: #495057;
    border-color: #dee2e6;
}

    .btn-outline-light:hover,
    .btn-outline-light:focus,
    .btn-outline-light:active {
        color: #212529;
        background-color: #f8f9fa;
        border-color: #dee2e6;
    }

.btn-outline-dark {
    color: #343a40;
    border-color: #343a40;
}

    .btn-outline-dark:hover,
    .btn-outline-dark:focus,
    .btn-outline-dark:active {
        color: #fff;
        background-color: #343a40;
        border-color: #343a40;
    }

/* Bootstrap 4's light button. Used across the ticket grid's row actions, where it has been getting
   its outline from the separate .border utility and nothing else. */
.btn-light {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

    .btn-light:hover,
    .btn-light:focus,
    .btn-light:active {
        color: #212529;
        background-color: #e2e6ea;
        border-color: #dae0e5;
    }

/* --------------------------------------------------------------------------------- Forms --- */

/* Bootstrap 4/5 check layout. BS3's equivalent (.checkbox) absolutely-positions the input, which
   loses it inside a flex or grid form row; this keeps the control in normal flow. */
.form-check {
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5em;
    margin-bottom: 0.125rem;
}

.form-check-input {
    float: left;
    width: 1em;
    height: 1em;
    margin-top: 0.25em;
    margin-left: -1.5em;
    vertical-align: top;
}

.form-check-label {
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer;
}

/* A .form-check that has been made a flex row (label wrapping the input) must not also indent and
   float, or the box lands outside the row. */
.form-check.d-flex {
    padding-left: 0;
}

    .form-check.d-flex .form-check-input {
        float: none;
        margin-top: 0;
        margin-left: 0;
    }

/* BS3 spells these .input-sm and .help-block. */
.form-control-sm {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

select.form-control-sm:not([multiple]) {
    height: 30px;
    line-height: 30px;
}

.form-text {
    display: block;
    margin-top: 0.25rem;
    font-size: 12px;
    color: #737373;
}

/* -------------------------------------------------------------------------------- Tables --- */

/* BS3 spells this .table-condensed. */
.table-sm > thead > tr > th,
.table-sm > tbody > tr > th,
.table-sm > tfoot > tr > th,
.table-sm > thead > tr > td,
.table-sm > tbody > tr > td,
.table-sm > tfoot > tr > td {
    padding: 5px;
}

/* Bootstrap 4's light table head. */
.thead-light th {
    color: #495057;
    background-color: #e9ecef;
    border-color: #dee2e6;
}

/* --------------------------------------------------------------------------------- Grid --- */

/* Bootstrap 4/5 breakpoint-less column. BS3's nearest equivalent is .col-xs-12, and this Portal's
   grid is float-based, so it has to float to sit in a .row correctly. */
.col-12 {
    position: relative;
    float: left;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

/* ------------------------------------------------------------------------------ Spacing --- */

/* Bootstrap 4 margin/padding utilities on the BS5 spacer scale. The BS5 spellings (ms-/me-/ps-/pe-)
   already exist in the appended utility block; these are the BS4 left/right names the views use.
   Numeric suffixes only - .pr-active and .pr-mac in the printer config are JS hooks, not padding. */
.ml-0 {
    margin-left: 0 !important;
}

.ml-1 {
    margin-left: 0.25rem !important;
}

.ml-2 {
    margin-left: 0.5rem !important;
}

.ml-3 {
    margin-left: 1rem !important;
}

.ml-4 {
    margin-left: 1.5rem !important;
}

.ml-5 {
    margin-left: 3rem !important;
}

.ml-auto {
    margin-left: auto !important;
}

.mr-0 {
    margin-right: 0 !important;
}

.mr-1 {
    margin-right: 0.25rem !important;
}

.mr-2 {
    margin-right: 0.5rem !important;
}

.mr-3 {
    margin-right: 1rem !important;
}

.mr-4 {
    margin-right: 1.5rem !important;
}

.mr-5 {
    margin-right: 3rem !important;
}

.mr-auto {
    margin-right: auto !important;
}

.pl-0 {
    padding-left: 0 !important;
}

.pl-1 {
    padding-left: 0.25rem !important;
}

.pl-2 {
    padding-left: 0.5rem !important;
}

.pl-3 {
    padding-left: 1rem !important;
}

.pl-4 {
    padding-left: 1.5rem !important;
}

.pl-5 {
    padding-left: 3rem !important;
}

.pr-0 {
    padding-right: 0 !important;
}

.pr-1 {
    padding-right: 0.25rem !important;
}

.pr-2 {
    padding-right: 0.5rem !important;
}

.pr-3 {
    padding-right: 1rem !important;
}

.pr-4 {
    padding-right: 1.5rem !important;
}

.pr-5 {
    padding-right: 3rem !important;
}