:root {
    --tass-display-scale: 1;
    --tass-viewport-height: calc(100vh / var(--tass-display-scale));
}

@supports (height: 100dvh) {
    :root { --tass-viewport-height: calc(100dvh / var(--tass-display-scale)); }
}

/* Scale the whole interface once; keep browser zoom available and print at normal size. */
@media screen {
    :root {
        --tass-display-scale: 0.80;
        zoom: var(--tass-display-scale);
    }
}

/* Phones already show one column; scaling them down only shrinks text and touch targets. */
@media screen and (max-width: 767.98px) {
    :root { --tass-display-scale: 1; }
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 80%;
}

a, .btn-link {
    color: var(--tass-navy);
}

.btn-primary {
    color: var(--tass-navy);
    background-color: var(--tass-accent);
    border-color: var(--tass-navy);
}

.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 var(--tass-navy);
}

.content {
    padding-top: 1.1rem;
    max-width: 100%;
    overflow-x: visible;
}

.page, main {
    min-width: 0;
    max-width: 100%;
}

.content table.table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

/* Keep wide reports inside their own scroll region and preserve table sizing. */
.report-table-scroll {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.content .report-table-scroll > table.table {
    display: table;
    width: 100%;
    max-width: none;
    margin-bottom: 0;
    overflow: visible;
}

.report-table-scroll:focus-visible {
    outline: 2px solid var(--tass-navy);
    outline-offset: 2px;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--tass-navy);
}

.invalid {
    outline: 1px solid var(--tass-navy);
}

.validation-message {
    color: var(--tass-navy);
}

.blazor-error-boundary {
    background: var(--tass-navy);
    padding: 1rem 1rem 1rem 3.7rem;
    color: var(--tass-white);
}

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

.darker-border-checkbox.form-check-input {
    border-color: var(--tass-navy);
}
/* Ensure the full page background and content alignment */
.full-page {
    min-height: var(--tass-viewport-height);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--tass-navy); /* Dark background */
    color: var(--tass-white);
}

.login-container {
    width: 100%;
    max-width: 500px; /* Increased max width to make the form larger */
    padding: 2rem;
    background-color: var(--tass-navy);
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 5, 107, 0.7); /* Darker shadow for better contrast */
}

    /* Centering the login title */
    .login-container h3 {
        color: var(--tass-white);
        margin-bottom: 1rem;
        font-weight: bold;
    }

    /* Style for buttons */
    .login-container .btn-primary {
        background-color: var(--tass-accent); /* Primary blue button */
        border-color: var(--tass-navy);
    }

        .login-container .btn-primary:hover {
            background-color: var(--tass-navy);
            border-color: var(--tass-navy);
        }

    /* Ensure the image and form fields are centered */
    .login-container img {
        margin-bottom: 1.5rem;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    /* Set form fields with consistent styling */
    .login-container input.form-control {
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }
/*---------*/

/* Ensure the body and html elements take the full height */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Container for the login page */
.login-page-container {
    display: flex;
    justify-content: center; /* Horizontally center */
    align-items: center; /* Vertically center */
    min-height: var(--tass-viewport-height);
    background-color: var(--tass-navy); /* Set your desired background color */
    color: var(--tass-white);
}

/* Login form wrapper */
.login-wrapper {
    /*background-color: var(--tass-navy);*/
    /*padding: 2rem;*/
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 5, 107, 0.2); /* Adds shadow for a cleaner look */
    width: 100%;
    max-width: 400px; /* Control the max width of the login box */
}

/* Adjust the login button to take full width */
.w-100 {
    width: 100%;
}

.dropdown-menu {
    display: none; /* Hidden by default */
}

.dropdown-menu.show {
    display: block; /* Shown when the 'show' class is applied */
}
.top-row-container {
    display: flex;
    justify-content: space-between; /* Ensures space between left and right items */
    align-items: center; /* Vertically center the items */
    padding: 0.5rem 1rem; /* Adjust padding as needed */
    background-color:var(--tass-white);
}

.top-row-left {
    text-align:center;
    /* Content on the left, can add more styling if needed */
}

.top-row-right {
    /* Content on the right */
}

#blazor-error-ui {
    display: none;
}

/* Keep essential logo bounds independent of generated component-style scopes. */
.sidebar .top-row { min-height: 76px; background-color: var(--tass-navy); }
.sidebar .navbar-logo { display: block; width: 148px; max-width: 100%; height: auto; max-height: 68px; object-fit: contain; }
.content select { overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 1023.98px) {
    .sidebar .navbar-logo { width: 128px; max-height: 59px; }
    .content .form-control, .content .form-select { min-width: 0; max-width: 100%; min-height: 44px; }
    .content .btn { min-height: 44px; }
    .content input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=hidden]),
    .content select, .content textarea, .login-wrapper .form-control {
        /* Native iPhone inputs need 16px text to avoid focus-triggered page zoom. */
        font-size: 16px !important;
    }
    .content .input-group { min-width: 0; }
    .modal-dialog { max-width: calc(100% - 24px); margin: 12px auto; }
    .modal-content { max-height: calc(100dvh - 24px); }
    .modal-body { overflow-y: auto; }
}