[ng-cloak], .ng-cloak {
    display: none !important;
}

body {
    font-family: 'Teachers', Arial, sans-serif;
}

.genesis-bottom-bar {
    z-index: 1020;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    flex-wrap: nowrap;
}

.genesis-bottom-bar > * {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
}

.genesis-bottom-bar .nav-link {
    min-height: calc(3.5rem - 1px);
}

.genesis-bottom-bar svg,
.genesis-bottom-bar img {
    width: 20px;
    height: 20px;
}

.genesis-bottom-bar svg {
    display: block;
    flex-shrink: 0;
}

.genesis-bottom-bar .small {
    font-size: .75rem;
    line-height: 1.25;
}

.genesis-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    line-height: 0;
    overflow: hidden;
}

@media (max-width: 767.98px) {
    .genesis-mobile-bar-spacer {
        min-height: calc(5rem + env(safe-area-inset-bottom, 0px));
    }
}

/* Bootstrap 5.2 has no overflow-x-auto utility. Keep Account/Preferences
   tabs on one swipeable row without a visible desktop scrollbar. */
.nav.flex-nowrap.overflow-x-auto {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.nav.flex-nowrap.overflow-x-auto .nav-link {
    white-space: nowrap;
}

.nav.flex-nowrap.overflow-x-auto::-webkit-scrollbar {
    display: none;
}

.modal-custom {
    max-height: 84vh;
    height: auto;
    display: flex;
    flex-direction: column;
}

    .modal-custom .modal-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        max-height: 100%;
        overflow: hidden;
    }

    .modal-custom .modal-body {
        flex: 1;
        overflow-y: auto;
        max-height: calc(84vh - 3.5rem); /* header/footer offset */
    }

    .modal-custom .table-scroll {
        max-height: 55vh;
        overflow-y: auto;
    }

.hr-with-text-black {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 10px 0;
    color: black;
}

    .hr-with-text-black::before,
    .hr-with-text-black::after {
        content: "";
        flex: 1;
        border-bottom: 2px solid black;
    }

    .hr-with-text-black::before {
        margin-right: 10px;
    }

    .hr-with-text-black::after {
        margin-left: 10px;
    }

/* Match the space above and below line headings to their modal-body padding. */
.modal .modal-body {
    --genesis-modal-heading-gap: 1rem;
}

.modal .hr-with-text-black {
    margin: 0 0 var(--genesis-modal-heading-gap, 1rem) !important;
    padding: 0 !important;
    line-height: 1.25;
    text-transform: uppercase;
}

.modal .modal-title {
    text-transform: uppercase;
}

@media (min-width: 992px) {
    .modal .modal-body.p-lg-4 {
        --genesis-modal-heading-gap: 1.5rem;
    }
}

.genesis-menu-tile {
    min-height: 6rem;
    white-space: normal;
}

.form-label.tiny {
    font-size: 0.75rem; /* smaller than .small */
    font-weight: 400; /* normal */
    color: #6c757d; /* muted gray */
    margin-bottom: 0.2rem;
}

.btn-pink {
    background-color: deeppink !important;
    color: white !important;
}

.btn-preview {
    background-color: mediumpurple !important;
    color: white !important;
}

/* Client-specific classes */

.bg-upm {
    background-color: #c9234b !important;
}

/* Fractional columns for Core and runtime percentage widths; stack on mobile. */
@media (min-width: 768px) {
    .col-md-0\.6 { flex: 0 0 auto; width: 5%; }
    .col-md-1\.2 { flex: 0 0 auto; width: 10%; }
    .col-md-2\.4 { flex: 0 0 auto; width: 20%; }
    .col-md-2\.52 { flex: 0 0 auto; width: 21%; }
    .col-md-2\.64 { flex: 0 0 auto; width: 22%; }
    .col-md-2\.76 { flex: 0 0 auto; width: 23%; }
    .col-md-2\.88 { flex: 0 0 auto; width: 24%; }
    .col-md-3\.12 { flex: 0 0 auto; width: 26%; }
    .col-md-3\.24 { flex: 0 0 auto; width: 27%; }
    .col-md-3\.36 { flex: 0 0 auto; width: 28%; }
    .col-md-3\.48 { flex: 0 0 auto; width: 29%; }
    .col-md-3\.6 { flex: 0 0 auto; width: 30%; }
}
@media (min-width: 992px) {
    .col-lg-0\.6 { flex: 0 0 auto; width: 5%; }
    .col-lg-1\.2 { flex: 0 0 auto; width: 10%; }
    .col-lg-2\.4 { flex: 0 0 auto; width: 20%; }
    .col-lg-2\.52 { flex: 0 0 auto; width: 21%; }
    .col-lg-2\.64 { flex: 0 0 auto; width: 22%; }
    .col-lg-2\.76 { flex: 0 0 auto; width: 23%; }
    .col-lg-2\.88 { flex: 0 0 auto; width: 24%; }
    .col-lg-3\.12 { flex: 0 0 auto; width: 26%; }
    .col-lg-3\.24 { flex: 0 0 auto; width: 27%; }
    .col-lg-3\.36 { flex: 0 0 auto; width: 28%; }
    .col-lg-3\.48 { flex: 0 0 auto; width: 29%; }
    .col-lg-3\.6 { flex: 0 0 auto; width: 30%; }
}

/* Auto Parts fit their content and keep adjacent actions close, including on mobile. */
.row > .genesis-width-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
    padding-right: 0;
}

/* Currency symbol and editable value share one field frame. */
.genesis-currency-input > input { min-width: 0; min-height: 0; height: auto; font: inherit; }
.genesis-currency-input:focus-within {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}
.genesis-currency-input.is-invalid { border-color: var(--bs-danger); }

/* Shared shell keeps a 20px side gutter without desktop max-width margins. */
body > .navbar > .container,
body > .container.mt-3,
.container.genesis-page-header-inner,
.container.genesis-page-body {
    --bs-gutter-x: 2.5rem;
    max-width: none;
}

/* Administration page banner. CSS grid fades in from left to right. */
.container.mt-3:has(> #template-placeholder > .genesis-page-header) {
    max-width: none;
    padding-inline: 0;
}
.genesis-page-header {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 96px;
    margin: 3.5rem 0 1.25rem;
    color: var(--bs-dark, #212529);
    background: linear-gradient(90deg, #fff 25%, #fffdf5 65%, #fff5d3);
    border-bottom: 1px solid rgba(var(--bs-warning-rgb, 255,193,7), .25);
}
.genesis-page-header::before {
    content: "";
    position: absolute;
    inset: 0 0 0 25%;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(rgba(var(--bs-warning-rgb, 255,193,7), .32) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--bs-warning-rgb, 255,193,7), .32) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,.12) 25%, #000);
}
.genesis-page-header-inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-height: 96px;
    padding-block: 1rem;
    padding-inline: calc(var(--bs-gutter-x, 1.5rem) / 2);
}
.genesis-page-header-icon {
    display: grid;
    place-items: center;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: .75rem;
    color: #000;
    background: #fff0b3;
}
.genesis-page-header-icon svg { width: 36px; height: 36px; }
.genesis-page-header-content { min-width: 0; }
.genesis-page-header h1 { margin: 0; font-size: clamp(1.3rem, 2.5vw, 1.85rem); font-weight: 800; line-height: 1.2; text-transform: uppercase; overflow-wrap: anywhere; }
.genesis-page-header p { margin: .25rem 0 0; font-size: .9rem; color: var(--bs-secondary, #6c757d); }
@media (max-width: 575.98px) {
    .genesis-page-header, .genesis-page-header-inner { min-height: 88px; }
    .genesis-page-header-inner { gap: .85rem; padding-block: .75rem; }
    .genesis-page-header-icon { flex-basis: 48px; width: 48px; height: 48px; border-radius: .6rem; }
    .genesis-page-header-icon svg { width: 30px; height: 30px; }
    .genesis-page-header p { font-size: .8rem; }
}

/* Contrast for the count on the selected Core navigation tab only. */
#core-catalogues aside .nav-link.active .badge {
    background-color: var(--bs-dark, #212529) !important;
    color: #fff !important;
}

/* Display convention only; persisted captions, values and identifiers stay intact. */
.btn,
.nav-link,
.dropdown-item {
    text-transform: capitalize;
}

/* Administration section/card titles follow the same visible naming convention. */
.genesis-page-body :is(h2, h3, h4, h5, h6, .card-title, .form-label, .badge) {
    text-transform: capitalize;
}

/* Locale codes and native language names preserve their configured casing. */
.btn.genesis-language-option { text-transform: none; }

/* Paint formulas without replacing the native input or its Angular model. */
.genesis-expression-editor { position: relative; }
.genesis-expression-input.form-control { font-family: var(--bs-font-monospace); color: transparent; caret-color: var(--bs-body-color, #212529); }
.genesis-expression-mirror { position: absolute; inset: 1px; overflow: hidden; padding: .25rem .5rem; pointer-events: none; font: .875rem/1.5 var(--bs-font-monospace); color: var(--bs-body-color, #212529); white-space: pre; }
.genesis-expression-mirror > span { display: block; }

.genesis-operation { color: var(--bs-code-color, #d63384); }

/* Sidebar labels ellipsize; icons and counts retain their size. */
#core-catalogues aside .nav-item { min-width: 0; width: 100%; }
#core-catalogues aside .nav-link > .text-truncate { min-width: 0; }
#core-catalogues aside .nav-link > svg,
#core-catalogues aside .nav-link > .badge { flex-shrink: 0; }

/* Shared Bootstrap switches: clear state, comfortable size and native semantics. */
@media (min-width: 992px) {
    .genesis-login-forms { width: max-content; max-width: 100%; }
    .genesis-login-forms > .tab-content { width: 0; min-width: 100%; }
}
.genesis-login-welcome { min-width: 0; }

.form-switch { padding-left: 2.625rem; min-height: 1.5rem; }
.form-switch .form-check-input {
    width: 2.125rem;
    height: 1.125rem;
    border-radius: .25rem;
    margin-left: -2.625rem;
    margin-top: .1875rem;
    border: 1px solid var(--bs-gray-500, #adb5bd);
    background-color: var(--bs-gray-200, #e9ecef);
    cursor: pointer;
    transition: background-position .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.form-switch .form-check-input:not(:checked) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3crect x='3' y='3' width='10' height='10' rx='2' fill='%236c757d'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
    background-color: var(--bs-warning, #ffc107);
    border-color: var(--bs-warning, #ffc107);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3crect x='3' y='3' width='10' height='10' rx='2' fill='%23212529'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:focus {
    border-color: var(--bs-warning, #ffc107);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-warning-rgb, 255, 193, 7), .25);
}
.form-switch .form-check-input:disabled { cursor: default; opacity: .5; }
.form-switch .form-check-label { font-size: .875rem; line-height: 1.5rem; font-weight: 600; cursor: pointer; }
.form-switch .form-check-input:disabled ~ .form-check-label { cursor: default; }
@media (prefers-reduced-motion: reduce) {
    .form-switch .form-check-input { transition: none; }
}