/*
   Bootstrap 3 look on Bootstrap 5, for both layouts (templates/base.html.twig links it right after
   the library stylesheets, before the page and layout ones).

   The legacy interface was Bootstrap 3: 14px base font, bold labels, #333 text, #337ab7 links and
   controls, 4px radii, #ccc input borders with an inset shadow and a #66afe9 focus glow. Bootstrap 5
   sizes everything in rem, so the 87.5% root font size (14px at the browser default) gives every
   control its legacy proportions again while the px-based chrome (header, sidebar, footer, date-time
   picker) is unaffected; the other rules map Bootstrap 3's values onto Bootstrap 5's CSS variables
   or override the few literal colours of its compiled stylesheet (focus states, validation icons).
   The .container keeps Bootstrap 3's widths: the DSI chrome and moyens.css were written for them.
   The last block restores the transitions Bootstrap 5 switches off under the OS "reduce motion"
   preference (owner's decision of 2026-09-17: the legacy interface animated regardless of it).
*/

html {
    font-size: 87.5%;
}

/*
   Bootstrap 3 container widths: the full width below 768px, then 750, 970 and 1170px from 768,
   992 and 1200px (Bootstrap 5: 540px from 576px, 720, 960, 1140 and 1320px from 1400px).
   moyens.css widens it to 1400px from 1500px, as the legacy stylesheet did.
*/
@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;
    }
}

:root {
    --bs-body-color: #333;
    --bs-body-color-rgb: 51, 51, 51;
    --bs-emphasis-color: #333;
    --bs-emphasis-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-color: #ccc;
    --bs-border-radius: 4px;
    --bs-border-radius-sm: 3px;
    --bs-border-radius-lg: 6px;
    --bs-form-valid-color: #3c763d;
    --bs-form-valid-border-color: #3c763d;
    --bs-form-invalid-color: #a94442;
    --bs-form-invalid-border-color: #a94442;
}

a {
    text-decoration: none;
}

a:hover, a:focus {
    text-decoration: underline;
}

/* Bootstrap 3 buttons: never underlined (the rule above would reach <a class="btn">), one line of text */
.btn:hover, .btn:focus {
    text-decoration: none;
}

.btn {
    white-space: nowrap;
}

/*
   Bootstrap 3's .btn-block, which the legacy templates used everywhere Bootstrap 5 has the w-100
   utility: a block-level button (w-100 alone leaves .btn inline-block) and a 5px gap between two
   stacked ones. The action cells of the lists mix <a> and <button>, and only the former carry the
   margin of moyens.css: without this rule their gaps alternate 5px / 0.
*/
.btn.w-100 {
    display: block;
}

.btn.w-100 + .btn.w-100 {
    margin-top: 5px;
}

/*
   Bootstrap 3's .btn-xs metrics, the size of the legacy list buttons, on .btn-sm, the closest
   Bootstrap 5 size (their 13px font is the legacy one, forced by moyens.css): Bootstrap 5's
   3.5px / 7px padding cost the labels 8px of room and clipped "Modifier visas".
*/
.btn-sm {
    --bs-btn-padding-y: 1px;
    --bs-btn-padding-x: 5px;
    --bs-btn-border-radius: 3px;
}

/* Tables of the lists */

/*
   Bootstrap 3 table stripes: #f9f9f9. Bootstrap 5 uses 5% black, painted as an inset shadow over
   the cell, where Bootstrap 3 coloured the row behind it. The lists have no hover shading: their
   tables carry no table-hover class (owner's decision of 2026-09-17; Bootstrap 3 shaded the hovered
   row #f5f5f5, which read as a grey veil next to the flat stripes).
*/
.table {
    --bs-table-striped-bg: #f9f9f9;
}

/*
   DataTables' Bootstrap 5 flavour repaints the stripe of its own tables with its own shadow (5%
   black over rgb(var(--dt-row_background-stripe))), which ignores the variable above: shade the
   cells outright instead. The visa colours of moyens.css are cell backgrounds, which that shadow
   greyed (#eef3a1 showed as #e2e799) and their !important now keeps intact, as Bootstrap 3's row
   colour was covered. The shadow needs !important: its stylesheet uses this very selector and is
   linked by the page block, after this file. The background must not have it (the visa colours win
   over it).
*/
table.table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1) > * {
    background-color: #f9f9f9;
    box-shadow: none !important;
}

/*
   Bootstrap 3 drew the grid of the lists in #ddd on the cells themselves, so the legacy
   "#aaa !important" of moyens.css only reached the rows, which it never painted; Bootstrap 5
   has every cell inherit its row's border colour (reboot), which turned all of them #aaa. The
   !important and the type selector are what it takes to win from here (moyens.css comes last).
*/
table.dataTable tr {
    border-color: #ddd !important;
}

/*
   The actions column is as wide as its buttons, as in the legacy lists: DataTables 3 shares the
   free space differently and the generic "td { max-width: 100px }" of moyens.css caps it.
*/
table.dataTable td:last-child {
    min-width: max-content;
    max-width: none;
}

/*
   The journal has no actions column: its last cell is the details JSON. Responsive hides columns,
   the last one first, when the minimum widths of the current page's cells exceed the table, and
   "break-word" does not lower a minimum width: a page holding an exception (class names and file
   paths without spaces) lost its details column. Bootstrap sets the <code> wrapping itself.
*/
#tableJournal td {
    min-width: 0;
}

#tableJournal td,
#tableJournal code {
    overflow-wrap: anywhere;
}

label,
legend {
    font-weight: 700;
}

.form-check-label {
    font-weight: 400;
}

/* Form controls */

.form-control, .form-select {
    color: #555;
}

.form-control {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

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

.form-control:focus, .form-select: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);
}

.form-control.is-valid:focus, .form-select.is-valid:focus {
    border-color: #2b542c;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;
}

.form-control.is-invalid:focus, .form-select.is-invalid:focus {
    border-color: #843534;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
}

/* Bootstrap 5's validation icons (same drawings) in Bootstrap 3's colours */

.form-control.is-valid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%233c763d' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/%3e%3c/svg%3e");
}

.form-select.is-valid:not([multiple]):not([size]) {
    --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%233c763d' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/%3e%3c/svg%3e");
}

.form-control.is-invalid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23a94442'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23a94442' stroke='none'/%3e%3c/svg%3e");
}

.form-select.is-invalid:not([multiple]):not([size]) {
    --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23a94442'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23a94442' stroke='none'/%3e%3c/svg%3e");
}

/*
   Legacy checkboxes and radios (Bootstrap 3 + awesome-bootstrap-checkbox, checkbox-primary): the box
   and its label show the hand cursor; a checked box is #337ab7. The checkbox was a 17px box 8px before
   its text (Bootstrap 5: 1em = 14px, 7px gap), and BootstrapValidator's has-success turned the label
   of a checked checkbox green (#3c763d) — never on a disabled one (read-only pages), which it skipped.
   Bootstrap 5 already sets the default cursor and a lighter label on a disabled control.
*/
.form-check-input:not(:disabled),
.form-check-input:not(:disabled) ~ .form-check-label {
    cursor: pointer;
}

.form-check-input:checked {
    background-color: #337ab7;
    border-color: #337ab7;
}

.form-check-input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin-top: 2px;
}

.form-check:has(> .form-check-input[type="checkbox"]) {
    padding-left: 25px;
}

.form-check > .form-check-input[type="checkbox"] {
    margin-left: -25px;
}

.form-check-input[type="checkbox"]:checked:not(:disabled) ~ .form-check-label {
    color: #3c763d;
}

.form-check-input:focus {
    border-color: #66afe9;
    box-shadow: 0 0 8px rgba(102, 175, 233, .6);
}

/* Bootstrap 3 palette */

.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: #204d74;
    --bs-btn-active-border-color: #122b40;
    --bs-btn-disabled-bg: #337ab7;
    --bs-btn-disabled-border-color: #2e6da4;
    --bs-btn-focus-shadow-rgb: 82, 143, 199;
}

.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: #398439;
    --bs-btn-active-border-color: #255625;
    --bs-btn-disabled-bg: #5cb85c;
    --bs-btn-disabled-border-color: #4cae4c;
    --bs-btn-focus-shadow-rgb: 116, 195, 116;
}

.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: #ac2925;
    --bs-btn-active-border-color: #761c19;
    --bs-btn-disabled-bg: #d9534f;
    --bs-btn-disabled-border-color: #d43f3a;
    --bs-btn-focus-shadow-rgb: 223, 117, 114;
}

/* Bootstrap 3's .btn-default, which the legacy templates used where Bootstrap 5 has .btn-outline-secondary */
.btn-outline-secondary {
    --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;
}

.alert-info {
    --bs-alert-color: #31708f;
    --bs-alert-bg: #d9edf7;
    --bs-alert-border-color: #bce8f1;
    --bs-alert-link-color: #245269;
}

.alert-success {
    --bs-alert-color: #3c763d;
    --bs-alert-bg: #dff0d8;
    --bs-alert-border-color: #d6e9c6;
    --bs-alert-link-color: #2b542c;
}

.alert-danger {
    --bs-alert-color: #a94442;
    --bs-alert-bg: #f2dede;
    --bs-alert-border-color: #ebccd1;
    --bs-alert-link-color: #843534;
}

.alert-warning {
    --bs-alert-color: #8a6d3b;
    --bs-alert-bg: #fcf8e3;
    --bs-alert-border-color: #faebcc;
    --bs-alert-link-color: #66512c;
}

.pagination {
    --bs-pagination-active-bg: #337ab7;
    --bs-pagination-active-border-color: #337ab7;
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(51, 122, 183, .25);
}

/*
   Bootstrap 5 disables its transitions when the OS asks for reduced motion (Windows: "Animation
   effects" off); Bootstrap 3 had no such media query, so the legacy sections, modals, flashes and
   focus glows animated for everyone. Same values as Bootstrap 5's own, same specificity, later in
   the cascade.
*/
@media (prefers-reduced-motion: reduce) {
    .collapsing {
        transition: height .35s ease;
    }

    .fade {
        transition: opacity .15s linear;
    }

    .modal.fade .modal-dialog {
        transition: transform .3s ease-out;
    }

    .form-control, .form-select {
        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    }
}