/*
 * Bootstrap 4 defaults on top of Bootstrap 5.3 (EFRO8473-7936 / EFRO8473-7939).
 *
 * The portal markup and site.css were written against Bootstrap 4. Bootstrap 5 changed or dropped
 * some defaults the pages rely on; the rules below put those back so the move to Bootstrap 5 does
 * not change the look of the portal. The file is loaded directly after bootstrap.min.css and before
 * the Radzen theme and site.css, so those still override it as they overrode Bootstrap 4.
 */

/* Reboot */
:root {
    scroll-behavior: auto;
    --bs-border-radius: .25rem;
    --bs-border-radius-sm: .2rem;
    --bs-border-radius-lg: .3rem;
}

/* Bootstrap 4 aligned the body left; the side menu uses direction: rtl and relies on it */
body {
    text-align: left;
}

a {
    text-decoration: none;
}

a:hover {
    color: #0056b3;
    text-decoration: underline;
}

a:not([href]):not([tabindex]),
a:not([href]):not([tabindex]):hover,
a:not([href]):not([tabindex]):focus {
    color: inherit;
    text-decoration: none;
}

label {
    margin-bottom: .5rem;
}

ol,
ul {
    padding-left: 40px;
}

/* Bootstrap 5 scales headings with the viewport; Bootstrap 4 used fixed sizes */
h1, .h1 { font-size: 2.5rem; }
h2, .h2 { font-size: 2rem; }
h3, .h3 { font-size: 1.75rem; }
h4, .h4 { font-size: 1.5rem; }

legend.radiobuttonLegend {
    float: none;
}

/* Forms: form-group stays in the markup as a portal class (site.css and the Playwright tests use it) */
.form-group {
    margin-bottom: 1rem;
}

/* Grid: Bootstrap 4 gutter and positioned columns (the auto-growing textareas are positioned against the column) */
.container,
.container-fluid,
.row {
    --bs-gutter-x: 30px;
}

/* Bootstrap 4 styled every column the same way, also outside a .row: positioned, 15px side padding,
   and full width below its breakpoint (the column classes used in the portal) */
.col,
.col-12,
.col-md,
.col-md-auto,
.col-md-2,
.col-md-4,
.col-md-6,
.col-md-8,
.col-md-10,
.col-md-11,
.col-md-12,
.col-xl-6,
.col-xl-12 {
    position: relative;
    padding-right: 15px;
    padding-left: 15px;
}

@media (max-width: 767.98px) {
    .col-md,
    .col-md-auto,
    .col-md-2,
    .col-md-4,
    .col-md-6,
    .col-md-8,
    .col-md-10,
    .col-md-11,
    .col-md-12 {
        width: 100%;
    }
}

@media (max-width: 1199.98px) {
    .col-xl-6,
    .col-xl-12 {
        width: 100%;
    }
}

/* Bootstrap 5 sizes every direct child of .row like a column; these are not columns */
.row > .tooltip-icon-wrapper,
.row > .col-ml-1,
.row > .validation-message,
.row > p,
.row > .questions-filter-label,
.row > .question-mandatory-attachment-label {
    width: auto;
    flex-shrink: 1;
    padding-right: 0;
    padding-left: 0;
}

/* Radzen sets the padding of a button, and it already wins from the Bootstrap 5 column padding */
.row > .rz-button {
    width: auto;
    flex-shrink: 1;
}

/* The upload control and the date picker (the open questions of a checklist) keep their width, but not the column padding */
.row > .rz-fileupload,
.row > .st-calendar {
    padding-right: 0;
    padding-left: 0;
}

/* Bootstrap 5 sets the top margin of every direct child of .row to 0, over the paragraph margin in site.css */
.row > p {
    margin-top: 1rem;
}

@media (min-width: 768px) {
    input.form-control.col-md-4 {
        max-width: 33.333333%;
    }
}

/* Navbar */
.navbar {
    --bs-navbar-padding-x: 1rem;
}

@media (max-width: 991.98px) {
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }
}

/* Bootstrap 4 left the toggler at the browser's button colour and drew no focus shadow */
.navbar-toggler {
    color: #000;
    border-color: transparent;
}

.navbar-toggler:focus {
    box-shadow: none;
}

/* Bootstrap 5 also removes the outline of a focused toggler, so without its shadow nothing showed keyboard focus:
   put back the focus ring Bootstrap 4 drew, for keyboard focus */
.navbar-toggler:focus-visible {
    outline: 1px dotted;
    outline: 5px auto -webkit-focus-ring-color;
}

/* Buttons and the user menu */

/* Keeps the link underline on hover (above) off links styled as buttons, as Bootstrap 4 did */
.btn:hover {
    text-decoration: none;
}

.btn-light {
    --bs-btn-hover-border-color: #dae0e5;
    --bs-btn-active-color: #212529;
    --bs-btn-active-bg: #dae0e5;
    --bs-btn-active-border-color: #d3d9df;
    --bs-btn-focus-shadow-rgb: 216, 217, 219;
}

.btn-group > .btn-light.dropdown-toggle.show {
    color: #212529;
    background-color: #dae0e5;
    border-color: #d3d9df;
}

.dropdown-menu {
    --bs-dropdown-border-color: rgba(0, 0, 0, .15);
    --bs-dropdown-link-active-bg: #007bff;
}

/* Cards: Bootstrap 5 only pads a .card-body inside a .card, the checklists and side menus use it on its own */
.card,
.card-body {
    --bs-card-spacer-y: 1.25rem;
    --bs-card-spacer-x: 1.25rem;
}

.card {
    --bs-card-title-spacer-y: .75rem;
    --bs-card-border-color: rgba(0, 0, 0, .125);
    color: inherit;
}

/* Tables (the contact tables on Service en contact): Bootstrap 4 tables were transparent */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: #212529;
}

.table > :not(caption) > * > * {
    padding: .75rem;
}

.table > thead > tr > th {
    border-bottom: 2px solid #dee2e6;
}

/* Bootstrap 5 sets the border width of every table cell to 0; Bootstrap 4 left the browser's cell borders of a table with
   a border attribute, such as the tables typed into the rich-text fields. :where keeps the rule weaker than any class rule. */
:where(table[border]:not([border="0"])) > * > tr > td {
    border-width: 1px;
    border-style: inset;
}

/* Colours that Bootstrap 5 changed or only applies inside the parent component */
.border-info {
    border-color: #17a2b8 !important;
}

.upload-document-container .alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}

/* Print: Bootstrap 5 dropped these Bootstrap 4 print styles (no navbar, desktop layout on A3, tables and page breaks) */
@media print {
    *,
    ::after,
    ::before {
        text-shadow: none !important;
        box-shadow: none !important;
    }

    a:not(.btn) {
        text-decoration: underline;
    }

    abbr[title]::after {
        content: " (" attr(title) ")";
    }

    pre {
        white-space: pre-wrap !important;
    }

    blockquote,
    pre {
        border: 1px solid #adb5bd;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    img,
    tr {
        page-break-inside: avoid;
    }

    h2,
    h3,
    p {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }

    @page {
        size: a3;
    }

    body,
    .container {
        min-width: 992px !important;
    }

    .navbar {
        display: none;
    }

    .table {
        border-collapse: collapse !important;
    }

    .table td,
    .table th {
        background-color: #fff !important;
    }
}