/*
 * Bootstrap 5 adjustments for the login / enrollment / account pages (#703).
 * The pages moved from Bootstrap 3 to Bootstrap 5, but SmartAdmin, app.css and the module
 * CSS were written on top of the Bootstrap 3 base styles.  This file restores the Bootstrap 3
 * sizes, colours and spacing those styles expect.  Load it right after bootstrap.min.css so
 * SmartAdmin, app.css, branding.css and the page CSS still override it as before.
 */

:root {
    --bs-body-font-size: 14px;
    --bs-body-line-height: 1.428571429;
    --bs-body-color: #333;
    --bs-body-color-rgb: 51, 51, 51;
    --bs-link-color: #337ab7;
    --bs-link-color-rgb: 51, 122, 183;
    --bs-link-hover-color: #23527c;
    --bs-link-hover-color-rgb: 35, 82, 124;
    --bs-border-radius: 4px;
}

/* links: no underline until hover, as in Bootstrap 3 */
a {
    text-decoration: none;
}

    a:hover, a:focus {
        text-decoration: underline;
    }

/* form controls inherit the text colour (Bootstrap 3 normalize) */
input, button, select, optgroup, textarea {
    color: inherit;
}

/* headings and paragraphs */
h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 10px;
}

h1, h2, h3 {
    margin-top: 20px;
}

h4, h5, h6 {
    margin-top: 10px;
}

h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }

p {
    margin: 0 0 10px;
}

.lead {
    font-size: 21px;
    font-weight: 300;
}

/* layout: Bootstrap 3 sizes the container with width (page CSS overrides it, e.g. .main-center), not max-width */
.container {
    padding-left: 15px;
    padding-right: 15px;
    max-width: none;
}

@media (min-width: 768px) {
    .container { width: 750px; }
}

@media (min-width: 992px) {
    .container { width: 970px; }
}

@media (min-width: 1200px) {
    .container { width: 1170px; }
}

/* rows: Bootstrap 3 gutters, and no column padding on children that are not columns */
.row {
    --bs-gutter-x: 30px;
}

    .row > :not([class*="col-"]):not(.col) {
        padding-left: 0;
        padding-right: 0;
    }

/* Bootstrap 3 .well (SmartAdmin restyles its colours and shadow) */
.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}

/* Bootstrap 3 .label shape (SmartAdmin's .smart-form .label sets the rest) */
.label {
    border-radius: .25em;
}

/* the hidden class still used by page scripts */
.hidden {
    display: none !important;
}

/* buttons: Bootstrap 3 size and colours */
.btn {
    --bs-btn-font-size: 14px;
    --bs-btn-line-height: 1.428571429;
    --bs-btn-padding-x: 12px;
    --bs-btn-padding-y: 6px;
    --bs-btn-border-radius: 4px;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #337ab7;
    --bs-btn-border-color: #2e6da4;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #286090;
    --bs-btn-hover-border-color: #204d74;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #204d74;
    --bs-btn-active-border-color: #122b40;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #337ab7;
    --bs-btn-disabled-border-color: #2e6da4;
    --bs-btn-focus-shadow-rgb: 51, 122, 183;
}

.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: #269abc;
    --bs-btn-active-border-color: #1b6d85;
    --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-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: #5cb85c;
    --bs-btn-border-color: #4cae4c;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #449d44;
    --bs-btn-hover-border-color: #398439;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #398439;
    --bs-btn-active-border-color: #255625;
    --bs-btn-focus-shadow-rgb: 92, 184, 92;
}

.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: #d58512;
    --bs-btn-active-border-color: #985f0d;
    --bs-btn-focus-shadow-rgb: 240, 173, 78;
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: #d9534f;
    --bs-btn-border-color: #d43f3a;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #c9302c;
    --bs-btn-hover-border-color: #ac2925;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #ac2925;
    --bs-btn-active-border-color: #761c19;
    --bs-btn-focus-shadow-rgb: 217, 83, 79;
}

.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: #d4d4d4;
    --bs-btn-active-border-color: #8c8c8c;
    --bs-btn-focus-shadow-rgb: 204, 204, 204;
}

/* form controls: Bootstrap 3 size */
.form-control {
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    color: #555;
    border-color: #ccc;
    border-radius: 4px;
}

textarea.form-control {
    height: auto;
}

.has-error .form-control {
    border-color: #a94442;
}

.has-error .form-text, .has-error .form-label {
    color: #a94442;
}

/* Bootstrap 5 hides the native arrow of select.form-control (it expects .form-select) */
select.form-control {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
}

.input-group-text {
    font-size: 14px;
    padding: 6px 12px;
    color: #555;
    background-color: #eee;
    border-color: #ccc;
}

/* Bootstrap 3 .form-group spacing (the class is kept in the markup) */
.form-group {
    margin-bottom: 15px;
}

/* alerts: Bootstrap 3 spacing and colours (SmartAdmin overrides some of them) */
.alert {
    --bs-alert-padding-x: 15px;
    --bs-alert-padding-y: 15px;
    --bs-alert-margin-bottom: 20px;
    --bs-alert-border-radius: 4px;
}

.alert-danger {
    --bs-alert-color: #a94442;
    --bs-alert-bg: #f2dede;
    --bs-alert-border-color: #ebccd1;
}

.alert-success {
    --bs-alert-color: #3c763d;
    --bs-alert-bg: #dff0d8;
    --bs-alert-border-color: #d6e9c6;
}

.alert-info {
    --bs-alert-color: #31708f;
    --bs-alert-bg: #d9edf7;
    --bs-alert-border-color: #bce8f1;
}

.alert-warning {
    --bs-alert-color: #8a6d3b;
    --bs-alert-bg: #fcf8e3;
    --bs-alert-border-color: #faebcc;
}

/* list groups */
.list-group-item {
    color: inherit;
    --bs-list-group-border-radius: 4px;
}

/* fixed top navbar (permissions / link account pages): Bootstrap 3 height */
.navbar.fixed-top {
    min-height: 50px;
}
