html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

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

.btn-primary {
    color: #fff;
    background-color: #E63D8F; /* Fixii magenta */
    border-color: #d12a75; /* Darker magenta for border */
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
}

.btn-primary:hover {
    background-color: #d12a75; /* Darker magenta on hover */
    border-color: #b8216a;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(230, 61, 143, 0.3);
}

.btn-primary:active {
    background-color: #b8216a;
    transform: translateY(0);
}

.btn-secondary {
    color: #fff;
    background-color: #5BB5C9; /* Fixii cyan */
    border-color: #48A0B3;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
}

.btn-secondary:hover {
    background-color: #48A0B3; /* Darker cyan on hover */
    border-color: #3d8fa0;
}

.btn-secondary:active {
    background-color: #3d8fa0;
    transform: translateY(0);
}

.btn-secondary:disabled {
    background-color: #536274; /* navy-lighter — clearly disabled */
    border-color: #536274;
    color: #a0aec0;
    cursor: not-allowed;
    opacity: 0.7;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Layout Structure */
.layout-wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.fixed-top-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: #061525;
}

.main-content {
    margin-top: 70px; /* Height of fixed menu */
    height: calc(100vh - 70px);
    overflow: auto;
}

/* Modal overlays must clear the fixed top menu above (z-index 1000). Modals are marked up with
   Tailwind's z-50, which loses to it: the menu then paints over the top ~70px of the dialog. A
   short, centred modal never shows the problem because it sits below the menu anyway — but a
   dialog as tall as the viewport has its heading and close control hidden behind the banner, with
   no way to scroll them back into view.

   Applied by convention rather than per modal: UX.modal (common-ux.js) documents modal roots as
   id="{name}-modal", so one rule covers every modal in the app and a new one inherits it for free.
   The div[...] selector is deliberate — it outranks Tailwind's .z-50 on specificity, so this works
   without !important and without editing each modal's classes. */
div[id$="-modal"] {
    z-index: 1100;
}

.content-container {
    /* padding: 2rem; */
    height: 100%;
}

/* Navigation Menu Styles */
.nav-menu-link {
    color: #A9D9E3;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.nav-menu-link:hover {
    color: #E63D8F;
    background-color: rgba(230, 61, 143, 0.1);
}

.nav-menu-link.active {
    color: #5BB5C9;
    background-color: rgba(91, 181, 201, 0.15);
    font-weight: 600;
}

/* Dropdown Menu Styles */
.dropdown-link {
    display: block;
    color: #A9D9E3;
    text-decoration: none;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.dropdown-link:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.dropdown-link:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.dropdown-link:hover {
    background-color: rgba(230, 61, 143, 0.1);
    border-left-color: #E63D8F;
    color: #E63D8F;
}

.dropdown-link.active {
    background-color: rgba(91, 181, 201, 0.15);
    border-left-color: #5BB5C9;
    color: #5BB5C9;
}

.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+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) 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;
}