html, body {
    font-family: Calibri, Arial, Helvetica, sans-serif;
    font-size: 16px
}

:root {
    --text-16: 1.000rem; /* 16px / 16px */
    --text-15: 0.938rem; /* 15px / 16px */
    --text-14: 0.875rem; /* 14px / 16px */
    --text-13: 0.812rem; /* 13px / 16px */
    --text-12: 0.750rem; /* 12px / 16px */
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff !important;
    background-color: #1b6ec2 !important;
    border-color: #1861ac !important;
}

.btn-success {
    color: #fff !important;
    background-color: #5cb85c !important;
    border-color: #4cae4c !important;
}

.btn-info {
    color: #fff !important;
    background-color: #5bc0de !important;
    border-color: #46b8da !important;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-check-input:focus {
  box-shadow: none;
}

/* Homologación de Enfoque de Controles e Inputs con Administración */
input:not([type=checkbox]):not([type=radio]):focus,
input:not([type=checkbox]):not([type=radio]):focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible,
.form-control:focus,
.form-control:focus-visible {
    outline: none !important;
    border: 1px solid #6d84b7 !important;
    box-shadow: none !important;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjY2LjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.cp-modal__body {
    overflow-x: hidden;
    position: relative;
    padding: 10px;
}

.ct__header {
    margin-top: 5px;
    height: 35px;
}

.ct__title {
    font-size: var(--text-16) !important;
    font-weight: bold !important;
}

.ct__table th {
    font-size: var(--text-13) !important; /* 13px tomando la base del body */
}

.ct__table td {
    font-size: var(--text-12) !important; /* 12px tomando la base del body */
}

.swc__select {
    border-radius: 0px !important;
}

.swc__toggle {
    max-height: 25px !important;
    padding-top: 4px !important;
    border-radius: 0px !important;
    border-left: solid 1px rgb(204, 204, 204) !important;
}

.swc__refresh {
    max-height: 25px !important;
    padding-top: 4px !important;
    border-radius: 0px !important;
    border-left: solid 1px rgb(204, 204, 204) !important;
}

.spdl {
    padding-left: 0px !important;
}

.spdr {
    padding-right: 0px !important;
}

.control-label {
    font-weight: 400;
    color: #000;
    padding: 0 !important;
}

.prov-form-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
}

.prov-label {
    text-align: left;
    white-space: nowrap;
    margin-bottom: 0;
}

input.form-control, select.form-control, input.cdp-form-control {
    height: 25px !important;
    padding: 2px 5px 2px 3px !important;
    border-radius: 0 !important;
    font-size: var(--text-13) !important;
}

.btn {
    border-radius: 0;
    background-color: #eeeeee;
    border-color: #cccccc;
}

    .btn:hover {
        background-color: #e1e1e1;
        color: #000;
        transition: color ease 300ms;
    }

.btn-danger {
    color: #fff !important;
    background-color: #d9534f !important;
    border-color: #d43f3a !important;
}

.btn-agregar {
    font-weight: bold;
    color: #000;
}

.text-success {
    color: #8CC152 !important;
}

.text-warning {
    color: #f6bb42 !important;
}

.text-danger {
    color: #e9573f !important;
}

.page {
    position: relative;
    min-height: 34rem;
}

.label {
    text-align: right;
    white-space: nowrap;
    font-size: var(--text-12) !important;
    margin: 0;
}

.form-grid {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: 0.55rem 0.75rem;
    align-items: center;
}

@media (max-width: 480px) {
    .form-grid {
        grid-template-columns: 1fr;
        gap: 0.15rem 0;
    }

    .label {
        margin-top: 0.5rem;
        margin-bottom: 0;
    }
}

table tr.baja > td {
    color: red !important;
}

table td {
    color: black !important;
}

.swal2-title {
    font-size: var(--text-16) !important;
}

.swal2-actions button {
    font-size: var(--text-12) !important;
}

.swal-confirm-btn{
    min-width: 90px;
}

.swal2-actions .swal2-confirm {
    min-width: 60px;
}

.swal2-actions .swal2-deny {
    min-width: 60px;
}

.swal2-actions .swal2-cancel {
    min-width: 60px;
}

.d-none {
    display: none;
}

.alert {
    padding: 5px 15px !important;
}

.mdl-large {
    min-height: 580px;
}

.mdl-w-400 {
    width: 400px !important;
    max-width: 500px !important;
}

.mdl-personal {
    min-height: 90vh;
}

@media (min-width: 800px) {
    .mdl-personal {
        width: 880px !important;
        max-width: 880px !important;
    }
}

table.table-import tr {
    min-height: 28.14px;
    height: 28.14px;
}

.obligatorio {
    color: red;
}

/* ── AF Data Table (key-value panel) ── */
.af-table-wrap {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.af-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-13);
}

.af-data-table thead tr {
    background: linear-gradient(135deg, #0a1e3d 0%, #1a3a6b 50%, #2a5a9e 100%);
}

.af-data-table th {
    padding: 8px 12px;
    font-size: var(--text-12);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    text-align: left;
}

.af-data-table td {
    padding: 8px 12px;
    vertical-align: middle;
    border-bottom: 1px solid #eee;
}

.af-tbl-label {
    width: 30%;
    font-weight: 600;
    color: #333;
    background-color: #f5f5f5;
    white-space: nowrap;
}

.af-tbl-value {
    color: #555;
}

/* ── Mobile reflow ── */
@media (max-width: 768px) {
    .af-data-table,
    .af-data-table thead,
    .af-data-table thead tr,
    .af-data-table tbody,
    .af-data-table th,
    .af-data-table td,
    .af-data-table tr {
        display: block !important;
    }

    .af-data-table thead tr {
        display: none !important;
    }

    .af-data-table tbody tr {
        border: 1px solid #ddd;
        border-radius: 6px;
        margin: 10px;
        padding: 0;
        background: #fff;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
        display: flex !important;
        flex-wrap: wrap;
    }

    .af-data-table td {
        border: none;
        border-bottom: 1px solid #eee;
        font-size: var(--text-13);
        min-height: 40px;
        padding: 8px 12px;
    }

    .af-data-table td:last-child {
        border-bottom: none;
    }

    .af-data-table td.af-tbl-label {
        width: 40%;
        background-color: #f5f5f5;
        font-weight: 700;
        font-size: var(--text-12);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #555;
        display: flex !important;
        align-items: center;
        border-right: 1px solid #eee;
        border-bottom: none !important;
    }

    .af-data-table td.af-tbl-value {
        width: 60%;
        color: #333;
        display: flex !important;
        align-items: center;
        border-bottom: none !important;
    }
}

/* ── Scanner: scanned items table ── */
.af-scanned-table th {
    background-color: #3a4859;
    color: #fff;
    font-size: var(--text-12);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 6px 10px;
}

.af-scanned-table td {
    padding: 6px 10px;
    font-size: var(--text-13);
    vertical-align: middle;
    border-bottom: 1px solid #eee;
}

.af-row-error {
    background-color: #fdf2f2;
}

.label {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 3px;
    line-height: 1.4;
}

.label-success {
    background-color: #dff0d8;
    color: #3c763d;
}

.label-danger {
    background-color: #f2dede;
    color: #a94442;
}

.label-warning {
    background-color: #fcf8e3;
    color: #8a6d3b;
}

.af-text-muted {
    color: #999;
    font-style: italic;
    font-size: var(--text-12);
}

.af-page-scroll {
    overflow-y: auto;
    max-height: calc(100vh - 60px);
}

/* ── Scanner: QR detection feedback ── */
.af-scan-feedback {
    display: inline-block;
    margin-top: 12px;
    padding: 8px 20px;
    background-color: #5cb85c;
    color: #fff;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    animation: af-scan-pulse 1.5s ease-in-out;
}

.af-scan-feedback i {
    margin-right: 6px;
}

@keyframes af-scan-pulse {
    0% { transform: scale(0.8); opacity: 0; }
    30% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* ── Multi-column table mobile reflow ── */
@media (max-width: 768px) {
    .af-data-table.af-multicol,
    .af-data-table.af-multicol thead,
    .af-data-table.af-multicol thead tr,
    .af-data-table.af-multicol tbody,
    .af-data-table.af-multicol th,
    .af-data-table.af-multicol td,
    .af-data-table.af-multicol tr {
        display: block !important;
    }

    .af-data-table.af-multicol thead tr {
        display: none !important;
    }

    .af-data-table.af-multicol tbody tr {
        border: 1px solid #ddd;
        border-radius: 6px;
        margin: 10px;
        padding: 0;
        background: #fff;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    }

    .af-data-table.af-multicol td {
        position: relative;
        padding: 10px 12px 10px 44%;
        border: none;
        border-bottom: 1px solid #eee;
        font-size: var(--text-13);
        min-height: 40px;
        display: flex !important;
        align-items: center;
    }

    .af-data-table.af-multicol td:last-child {
        border-bottom: none;
    }

    .af-data-table.af-multicol td::before {
        content: attr(data-label);
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 38%;
        font-size: var(--text-12);
        font-weight: 600;
        text-transform: uppercase;
        color: #888;
        letter-spacing: 0.04em;
        line-height: 1.3;
    }
}

@media (min-width: 800px) {
    form.condensed .control-label {
        margin-bottom: 0px !important;
    }

    form.condensed .form-group {
        margin-bottom: 5px !important;
    }

    form.condensed .row > [class*="col-"] + [class*="col-"] {
        padding-left: 0px;
    }

    form.condensed .row > [class*="col-"]:not(:last-of-type) {
        padding-right: 5px;
    }

    form.condensed .alert {
        margin-bottom: 5px;
    }

    form.condensed.form-horizontal .row > [class*="col-"] + [class*="col-"] {
        padding-left: 5px;
    }

    form.condensed.form-horizontal .control-label {
        margin-top: 4px;
    }

    form.condensed .panel {
        margin-bottom: 10px;
    }

    form.condensed .panel-heading {
        padding: 5px 5px;
    }

    form.condensed .panel-body {
        padding: 10px;
    }

    form.condensed .tab-content {
        padding: 10px;
    }
}

#personal-form {
    min-height: 392px;
    position: relative;
}

#personal-form .tab-content {
    min-height: 354px;
}

.tab-content-border {
    border: 1px solid #ddd;
    border-top: transparent;
    padding: 20px;
    border-radius: 0 0 4px 4px;
    background-color: #fff;
}

.dropdown {
    display: inline-block;
}

    .dropdown .dropdown-toggle {
        height: 30px;
        color: inherit;
    }

        .dropdown .dropdown-toggle > .caret {
            margin-left: 5px;
            margin-top: -3px;
        }

    .dropdown .dropdown-menu > li {
        cursor: default;
    }

        .dropdown .dropdown-menu > li > a {
            padding: 3px 10px;
        }

            .dropdown .dropdown-menu > li > a > i {
                margin-right: 10px;
            }

.conpre-datepicker-container button.cdp-btn-show {
    height: 25px !important;
    padding-top: 5px;
}

    .conpre-datepicker-container button > span {
        font-size: 12px;
    }

.cdp-btn-show {
    border-radius: 0px !important;
}

.mdl-agregar-plaza .cp-modal__body{
     min-height: 250px;
}

/* =========================================================
   Bootstrap 5 → Bootstrap 3 Compatibility Utilities
   ========================================================= */

/* ── Spacing: Margin ── */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 5px !important; }
.mt-2 { margin-top: 10px !important; }
.mt-3 { margin-top: 15px !important; }
.mt-4 { margin-top: 30px !important; }
.mt-5 { margin-top: 45px !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 5px !important; }
.mb-2 { margin-bottom: 10px !important; }
.mb-3 { margin-bottom: 15px !important; }
.mb-4 { margin-bottom: 30px !important; }
.mb-5 { margin-bottom: 45px !important; }
.ms-0, .ml-0 { margin-left: 0 !important; }
.ms-1, .ml-1 { margin-left: 5px !important; }
.ms-2, .ml-2 { margin-left: 10px !important; }
.ms-3, .ml-3 { margin-left: 15px !important; }
.ms-4, .ml-4 { margin-left: 30px !important; }
.ms-5, .ml-5 { margin-left: 45px !important; }
.me-0, .mr-0 { margin-right: 0 !important; }
.me-1, .mr-1 { margin-right: 5px !important; }
.me-2, .mr-2 { margin-right: 10px !important; }
.me-3, .mr-3 { margin-right: 15px !important; }
.me-4, .mr-4 { margin-right: 30px !important; }
.me-5, .mr-5 { margin-right: 45px !important; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: 5px !important; margin-bottom: 5px !important; }
.my-2 { margin-top: 10px !important; margin-bottom: 10px !important; }
.my-3 { margin-top: 15px !important; margin-bottom: 15px !important; }
.my-4 { margin-top: 30px !important; margin-bottom: 30px !important; }
.my-5 { margin-top: 45px !important; margin-bottom: 45px !important; }
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: 5px !important; margin-right: 5px !important; }
.mx-2 { margin-left: 10px !important; margin-right: 10px !important; }
.mx-3 { margin-left: 15px !important; margin-right: 15px !important; }
.mx-4 { margin-left: 30px !important; margin-right: 30px !important; }
.mx-5 { margin-left: 45px !important; margin-right: 45px !important; }

/* ── Spacing: Padding ── */
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 5px !important; }
.pt-2 { padding-top: 10px !important; }
.pt-3 { padding-top: 15px !important; }
.pt-4 { padding-top: 30px !important; }
.pt-5 { padding-top: 45px !important; }
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 5px !important; }
.pb-2 { padding-bottom: 10px !important; }
.pb-3 { padding-bottom: 15px !important; }
.pb-4 { padding-bottom: 30px !important; }
.pb-5 { padding-bottom: 45px !important; }
.ps-0, .pl-0 { padding-left: 0 !important; }
.ps-1, .pl-1 { padding-left: 5px !important; }
.ps-2, .pl-2 { padding-left: 10px !important; }
.ps-3, .pl-3 { padding-left: 15px !important; }
.ps-4, .pl-4 { padding-left: 30px !important; }
.ps-5, .pl-5 { padding-left: 45px !important; }
.pe-0, .pr-0 { padding-right: 0 !important; }
.pe-1, .pr-1 { padding-right: 5px !important; }
.pe-2, .pr-2 { padding-right: 10px !important; }
.pe-3, .pr-3 { padding-right: 15px !important; }
.pe-4, .pr-4 { padding-right: 30px !important; }
.pe-5, .pr-5 { padding-right: 45px !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: 5px !important; padding-bottom: 5px !important; }
.py-2 { padding-top: 10px !important; padding-bottom: 10px !important; }
.py-3 { padding-top: 15px !important; padding-bottom: 15px !important; }
.py-4 { padding-top: 30px !important; padding-bottom: 30px !important; }
.py-5 { padding-top: 45px !important; padding-bottom: 45px !important; }
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: 5px !important; padding-right: 5px !important; }
.px-2 { padding-left: 10px !important; padding-right: 10px !important; }
.px-3 { padding-left: 15px !important; padding-right: 15px !important; }
.px-4 { padding-left: 30px !important; padding-right: 30px !important; }
.px-5 { padding-left: 45px !important; padding-right: 45px !important; }
.p-0 { padding: 0 !important; }
.p-1 { padding: 3px !important; }
.p-2 { padding: 5px !important; }
.p-3 { padding: 10px !important; }
.p-4 { padding: 15px !important; }
.p-5 { padding: 30px !important; }

/* ── Display ── */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-table { display: table !important; }
.d-table-cell { display: table-cell !important; }

/* ── Flexbox ── */
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-fill { flex: 1 1 auto !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch { align-items: stretch !important; }
.align-self-auto { align-self: auto !important; }
.align-self-start { align-self: flex-start !important; }
.align-self-end { align-self: flex-end !important; }
.align-self-center { align-self: center !important; }
.align-self-baseline { align-self: baseline !important; }
.align-self-stretch { align-self: stretch !important; }
.gap-0 { gap: 0 !important; }
.gap-1 { gap: 5px !important; }
.gap-2 { gap: 10px !important; }
.gap-3 { gap: 15px !important; }
.gap-4 { gap: 30px !important; }
.gap-5 { gap: 45px !important; }

/* ── Text ── */
.text-start { text-align: left !important; }
.text-end { text-align: right !important; }
.text-center { text-align: center !important; }
.text-decoration-none { text-decoration: none !important; }
.text-nowrap { white-space: nowrap !important; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-lowercase { text-transform: lowercase !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-capitalize { text-transform: capitalize !important; }
.text-monospace { font-family: monospace, monospace !important; }
.text-break { word-wrap: break-word !important; word-break: break-word !important; }
.text-reset { color: inherit !important; }

/* ── Font ── */
.fw-light { font-weight: 300 !important; }
.fw-normal { font-weight: 400 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-bold { font-weight: 700 !important; }
.fw-bolder { font-weight: bolder !important; }
.fst-italic { font-style: italic !important; }
.fst-normal { font-style: normal !important; }
.fs-1 { font-size: 2.5rem !important; }
.fs-2 { font-size: 2rem !important; }
.fs-3 { font-size: 1.75rem !important; }
.fs-4 { font-size: 1.5rem !important; }
.fs-5 { font-size: 1.25rem !important; }
.fs-6 { font-size: 1rem !important; }
.lh-1 { line-height: 1 !important; }
.lh-sm { line-height: 1.25 !important; }
.lh-base { line-height: 1.5 !important; }
.lh-lg { line-height: 2 !important; }

/* ── Text Color ── */
.text-primary { color: #337ab7 !important; }
.text-secondary { color: #6c757d !important; }
.text-success { color: #5cb85c !important; }
.text-danger { color: #d9534f !important; }
.text-warning { color: #f0ad4e !important; }
.text-info { color: #5bc0de !important; }
.text-light { color: #f8f9fa !important; }
.text-dark { color: #343a40 !important; }
.text-body { color: #212529 !important; }
.text-muted { color: #777 !important; }
.text-white { color: #fff !important; }

/* ── Background ── */
.bg-primary { background-color: #337ab7 !important; }
.bg-secondary { background-color: #6c757d !important; }
.bg-success { background-color: #5cb85c !important; }
.bg-danger { background-color: #d9534f !important; }
.bg-warning { background-color: #f0ad4e !important; }
.bg-info { background-color: #5bc0de !important; }
.bg-light { background-color: #f8f9fa !important; }
.bg-dark { background-color: #343a40 !important; }
.bg-white { background-color: #fff !important; }
.bg-transparent { background-color: transparent !important; }

/* ── Border ── */
.border { border: 1px solid #dee2e6 !important; }
.border-top { border-top: 1px solid #dee2e6 !important; }
.border-bottom { border-bottom: 1px solid #dee2e6 !important; }
.border-start, .border-left { border-left: 1px solid #dee2e6 !important; }
.border-end, .border-right { border-right: 1px solid #dee2e6 !important; }
.border-0 { border: 0 !important; }
.border-top-0 { border-top: 0 !important; }
.border-bottom-0 { border-bottom: 0 !important; }
.border-start-0, .border-left-0 { border-left: 0 !important; }
.border-end-0, .border-right-0 { border-right: 0 !important; }
.border-primary { border-color: #337ab7 !important; }
.border-secondary { border-color: #6c757d !important; }
.border-success { border-color: #5cb85c !important; }
.border-danger { border-color: #d9534f !important; }
.border-warning { border-color: #f0ad4e !important; }
.border-info { border-color: #5bc0de !important; }
.border-light { border-color: #f8f9fa !important; }
.border-dark { border-color: #343a40 !important; }
.border-white { border-color: #fff !important; }
.rounded { border-radius: 4px !important; }
.rounded-0 { border-radius: 0 !important; }
.rounded-1, .rounded-sm { border-radius: 2px !important; }
.rounded-2, .rounded-lg { border-radius: 8px !important; }
.rounded-3, .rounded-xl { border-radius: 12px !important; }
.rounded-circle { border-radius: 50% !important; }
.rounded-pill { border-radius: 50rem !important; }
.rounded-top { border-top-left-radius: 4px !important; border-top-right-radius: 4px !important; }
.rounded-bottom { border-bottom-left-radius: 4px !important; border-bottom-right-radius: 4px !important; }
.rounded-start, .rounded-left { border-top-left-radius: 4px !important; border-bottom-left-radius: 4px !important; }
.rounded-end, .rounded-right { border-top-right-radius: 4px !important; border-bottom-right-radius: 4px !important; }

/* ── Sizing ── */
.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }
.h-25 { height: 25% !important; }
.h-50 { height: 50% !important; }
.h-75 { height: 75% !important; }
.h-100 { height: 100% !important; }
.h-auto { height: auto !important; }
.mw-100 { max-width: 100% !important; }
.mh-100 { max-height: 100% !important; }
.min-vw-100 { min-width: 100vw !important; }
.min-vh-100 { min-height: 100vh !important; }
.vw-100 { width: 100vw !important; }
.vh-100 { height: 100vh !important; }
.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }
.overflow-scroll { overflow: scroll !important; }

/* ── Position ── */
.position-static { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }
.top-0 { top: 0 !important; }
.top-50 { top: 50% !important; }
.top-100 { top: 100% !important; }
.bottom-0 { bottom: 0 !important; }
.bottom-50 { bottom: 50% !important; }
.bottom-100 { bottom: 100% !important; }
.start-0, .left-0 { left: 0 !important; }
.start-50, .left-50 { left: 50% !important; }
.start-100, .left-100 { left: 100% !important; }
.end-0, .right-0 { right: 0 !important; }
.end-50, .right-50 { right: 50% !important; }
.end-100, .right-100 { right: 100% !important; }
.translate-middle { transform: translate(-50%, -50%) !important; }
.translate-middle-x { transform: translateX(-50%) !important; }
.translate-middle-y { transform: translateY(-50%) !important; }

/* ── Shadow ── */
.shadow { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important; }
.shadow-sm { box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important; }
.shadow-lg { box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important; }
.shadow-none { box-shadow: none !important; }

/* ── Opacity ── */
.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

/* ── Visibility / Screen Reader ── */
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }
.visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ── Float ── */
.float-start, .pull-left { float: left !important; }
.float-end, .pull-right { float: right !important; }
.float-none { float: none !important; }

/* ── Overflow ── */
.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }

/* ── Clearfix ── */
.clearfix::after { display: block; clear: both; content: ""; }

/* ── Image ── */
.img-fluid { max-width: 100%; height: auto; }
.img-thumbnail { padding: 4px; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.075); max-width: 100%; height: auto; }

/* ── Button XS ── */
.btn-xs {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}
.btn-group-xs > .btn,
.btn-xs { min-height: 24px; }

/* ── Button Outline (BS5 compatibility) ── */
.btn-outline-primary { color: #337ab7; border-color: #337ab7; background-color: transparent; }
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active { color: #fff; background-color: #337ab7; border-color: #337ab7; }
.btn-outline-success { color: #5cb85c; border-color: #5cb85c; background-color: transparent; }
.btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success:active { color: #fff; background-color: #5cb85c; border-color: #5cb85c; }
.btn-outline-danger { color: #d9534f; border-color: #d9534f; background-color: transparent; }
.btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger:active { color: #fff; background-color: #d9534f; border-color: #d9534f; }
.btn-outline-warning { color: #f0ad4e; border-color: #f0ad4e; background-color: transparent; }
.btn-outline-warning:hover, .btn-outline-warning:focus, .btn-outline-warning:active { color: #fff; background-color: #f0ad4e; border-color: #f0ad4e; }
.btn-outline-info { color: #5bc0de; border-color: #5bc0de; background-color: transparent; }
.btn-outline-info:hover, .btn-outline-info:focus, .btn-outline-info:active { color: #fff; background-color: #5bc0de; border-color: #5bc0de; }
.btn-outline-light { color: #f8f9fa; border-color: #f8f9fa; background-color: transparent; }
.btn-outline-light:hover, .btn-outline-light:focus, .btn-outline-light:active { color: #212529; background-color: #f8f9fa; border-color: #f8f9fa; }
.btn-outline-dark { color: #343a40; border-color: #343a40; background-color: transparent; }
.btn-outline-dark:hover, .btn-outline-dark:focus, .btn-outline-dark:active { color: #fff; background-color: #343a40; border-color: #343a40; }

/* ── Spinner (BS5 compatibility) ── */
.spinner-border {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    border: .25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border .75s linear infinite;
}
.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: .2em;
}
.spinner-grow {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    background-color: currentColor;
    border-radius: 50%;
    opacity: 0;
    animation: spinner-grow .75s linear infinite;
}
.spinner-grow-sm {
    width: 1rem;
    height: 1rem;
}
@keyframes spinner-border {
    to { transform: rotate(360deg); }
}
@keyframes spinner-grow {
    0% { transform: scale(0); }
    50% { transform: scale(1); }
    100% { opacity: 0; }
}

/* ── Input Group Text (BS5 compatibility) ── */
.input-group-text {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #555;
    text-align: center;
    white-space: nowrap;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* ── Form Select (BS5 compatibility) ── */
.form-select {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23555' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 12px;
    padding-right: 30px;
}
.form-select:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}

/* ── Form Label (BS5 compatibility) ── */
.form-label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

/* ── Col Form Label (BS5 compatibility) ── */
.col-form-label {
    padding-top: 7px;
    margin-bottom: 0;
    text-align: right;
}

/* ── Form Text (BS5 compatibility) ── */
.form-text {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #6c757d;
}

/* ── Badge Colors (BS5 bg-* compatibility) ── */
.badge.bg-primary { background-color: #337ab7 !important; }
.badge.bg-secondary { background-color: #6c757d !important; }
.badge.bg-success { background-color: #5cb85c !important; }
.badge.bg-danger { background-color: #d9534f !important; }
.badge.bg-warning { background-color: #f0ad4e !important; color: #000 !important; }
.badge.bg-info { background-color: #5bc0de !important; color: #000 !important; }
.badge.bg-light { background-color: #f8f9fa !important; color: #000 !important; }
.badge.bg-dark { background-color: #343a40 !important; }
.badge.text-dark { color: #343a40 !important; }
.badge.text-white { color: #fff !important; }

/* ── Card (BS5 compatibility, maps to panel) ── */
.card {
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
    background-color: #fff;
}
.card-header {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    background-color: #f5f5f5;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.card-body { padding: 15px; }
.card-footer {
    padding: 10px 15px;
    border-top: 1px solid transparent;
    background-color: #f5f5f5;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}
.card-title { margin-bottom: 10px; font-size: 16px; font-weight: bold; }
.card-text:last-child { margin-bottom: 0; }
.card-link:hover { text-decoration: none; }
.card-link + .card-link { margin-left: 15px; }
.card.border-primary { border-color: #337ab7; }
.card.border-success { border-color: #5cb85c; }
.card.border-danger { border-color: #d9534f; }
.card.border-warning { border-color: #f0ad4e; }
.card.border-info { border-color: #5bc0de; }

/* ── Close Button (BS5 compatibility) ── */
.btn-close {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .2;
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
}
.btn-close:hover { color: #000; text-decoration: none; opacity: .5; cursor: pointer; }

/* ── Font Awesome size (BS5 compatibility) ── */
.fa-2x { font-size: 2em; }
.fa-3x { font-size: 3em; }
.fa-4x { font-size: 4em; }
.fa-5x { font-size: 5em; }

/* ── Accessibility: Focus visible ── */
.focus-ring:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
}

/* ── Responsive: small screens ── */
@media (max-width: 767px) {
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    .btn-group-vertical,
    .btn-group {
        width: 100%;
    }
    .table-responsive {
        width: 100%;
        overflow-x: auto;
    }
    .modal-dialog {
        margin: 10px;
    }
}

/* ── Responsive: extra-small screens ── */
@media (max-width: 575px) {
    .hide-xs { display: none !important; }
    .container { width: 100%; }
    .btn-lg { width: 100%; }
}