.large {
    font-size: 24px;
}

.huge {
    font-size: 28px;
}

.medium {
    font-size: 18px;
}


.heading {
    font-size: 28px;
    border-bottom: 3px solid gray;
    margin-bottom: 0;
    margin-top: 50px;
    padding: 8px 0;
}

.section-head {
    font-size: 24px;
    border-bottom: 2px solid gray;
    margin-bottom: 0;
    margin-top: 20px;
}

.status {
    padding: 5px 10px;
    border-start-start-radius: 10px;
    border-end-start-radius: 10px;
    display: flex;
    text-align: center;
    font-weight: bold;
    min-width: 60px;
}
.form-group {
    margin-bottom: 5px !important;
}

.bm-header {    
    padding: 10px 20px !important;
    background-color: royalblue;
    color: white;
}
.form-area {
    max-width: 920px;
    margin: 0 auto;
}

.sub-total {
    border-bottom: 1px solid gray;
    border-top: 1px solid gray;
}

.grand-total {
    border-bottom: 2px solid gray;
    border-top: 1px solid gray;
}

.login-area {
    max-width: 400px;
    margin: 0 auto;
    padding: 30px;
    border-radius: 10px;
    border: 1px solid gray;
}

.login-page {
    background-color: darkgray;
    background-image: url(/images/background.png);
    
}

    .login-page h1 {
        font-size: 24px;
    }

    .mud-tab {
        min-width: auto;
    }

h1.header {
    display: flex;
    flex-direction: row;
}

    h1.header:before, h1:after {
        content: "";
        flex: 1 1;
        border-bottom: 5px solid;
        margin: auto;
    }

    h1.header:before {
        margin-right: 10px
    }

    h1.header:after {
        margin-left: 10px
    }

    .blazored-modal {
        padding: 0 !important;
        z-index: 2000 !important;
    }



td, th {
    /*text-align: center;*/ /* Horizontal alignment */
    vertical-align: middle; /* Vertical alignment */
    padding: 5px; /* Optional for spacing */
}

.side-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.4);
    z-index: 2040;
}

.side-modal {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    height: 100%;
    background-color: #fff;
    box-shadow: -2px 0 8px rgba(0,0,0,0.2);
    z-index: 2050;
    display: flex;
    flex-direction: column;
    animation: slideIn 0.3s ease-out forwards;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

.side-modal-header {
    padding: 1rem;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.side-modal-body {
    padding: 1rem;
    overflow-y: auto;
    flex-grow: 1;
}

.close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

.modal-class {
    max-height: 90%;
}

/* ==========================================================================
   Modal dialogs — one scrollbar, and it belongs to the dialog.

   Every editor dialog used to show two vertical scrollbars: its own, from the
   form body's `max-height: 70vh; overflow-y: auto`, and a second one down the
   right of the window. The second one appeared because the dialog is free to
   grow taller than the screen — 70vh of body, plus the title bar, the form
   padding, the validation summary and the buttons row, comes to more than
   100vh — and whatever is behind it then has to scroll to reach the bottom of
   the dialog.

   The fix is structural rather than another guessed height: cap the dialog at
   the viewport, and let the body inside it take whatever space is left over.
   The per-dialog `max-height: 70vh` rules have been removed to match, so the
   markup no longer has to predict how tall its own chrome is.

   Loaded after MudBlazor.min.css (see App.razor), so these win on order at
   equal specificity.
   ========================================================================== */

/* Nothing outside the dialog scrolls while it is open. */
.mud-dialog-container {
    overflow: hidden;
}

body:has(.mud-dialog-container) {
    overflow: hidden;
}

.mud-dialog {
    display: flex;
    flex-direction: column;
    /* dvh, so the mobile address bar sliding away does not leave a gap. */
    max-height: calc(100dvh - 3rem);
    overflow: hidden;
}

.mud-dialog > .mud-dialog-title,
.mud-dialog > .mud-dialog-actions {
    flex: 0 0 auto;
}

/* The dialog body. Most of these dialogs render an EditForm straight into the
   dialog rather than wrapping it in <MudDialog>, so the body element is a
   <form> as often as it is .mud-dialog-content — and a couple are a plain div.
   All three take the space the title and actions leave and scroll inside it.
   min-height: 0 is what actually allows that: without it a flex child refuses
   to shrink below its content and the overflow moves back outside. */
.mud-dialog > .mud-dialog-content,
.mud-dialog > form,
.mud-dialog > div:not(.mud-dialog-title):not(.mud-dialog-actions) {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Bootstrap rows hang 12px outside their parent on each side. That 24px is
       empty gutter — the columns' own padding — but it was enough to raise a
       horizontal scrollbar under every dialog. Clip it. */
    overflow-x: hidden;
}

/* The exception: a handful of older forms declare a fixed min-width wider than
   the dialog they open in (min-width: 800px inside a 600px dialog). Clipping
   those would put real fields off-screen with no way to reach them, so they
   keep a horizontal scrollbar. Narrowing them to fit is the better fix, one
   form at a time. */
.mud-dialog > form[style*="min-width"] {
    overflow-x: auto;
}

/* A form that marks its own scrolling body keeps its Save / Discard row
   pinned at the bottom instead of scrolling it away. The form becomes the
   column, .dialog-scroll is the only part that moves. */
.mud-dialog > form:has(> .dialog-scroll) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mud-dialog > form:has(> .dialog-scroll) > :not(.dialog-scroll) {
    flex: 0 0 auto;
}

.dialog-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Bootstrap rows carry negative side margins that poke ~12px outside an
       unpadded parent. That is empty gutter, so clip it rather than raise a
       horizontal scrollbar over nothing. */
    overflow-x: hidden;
}

/* Modal content */
.blazored-modal-content {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    border-radius: 8px;
    box-shadow: var(--mud-elevation-6); /* MudBlazor shadow */
}




.fileinput-button {
    border: 2px dashed gray;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    cursor: pointer;
    position: relative;
    max-height: 40px;
    width: 100%;
}

    .fileinput-button input[type=file] {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        display: block;
        cursor: pointer;
    }

.animated-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: -2;
}

.bg-frame {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    animation: fadeImages 20s infinite;
    opacity: 0;
    will-change: opacity, transform;
}

    /* NOTE: source files on disk are .JPG (uppercase) — Windows dev boxes resolve
       either case, but this matters on case-sensitive (Linux) hosting. */
    .bg-frame:nth-child(1) {
        background-image: url('/images/bg-01.JPG');
        animation-delay: 0s;
    }

    .bg-frame:nth-child(2) {
        background-image: url('/images/bg-02.JPG');
        animation-delay: 5s;
    }

    .bg-frame:nth-child(3) {
        background-image: url('/images/bg-03.JPG');
        animation-delay: 10s;
    }
    .bg-frame:nth-child(4) {
        background-image: url('/images/bg-04.JPG');
        animation-delay: 15s;
    }

@keyframes fadeImages {
    0% {
        opacity: 0;
        transform: scale(1.06);
    }

    8% {
        opacity: 1;
    }

    25% {
        opacity: 1;
        transform: scale(1.12);
    }

    33% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/* Darkening/brand-tint overlay so foreground content stays readable over any photo. */
.bg-overlay {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(160deg, rgba(5, 39, 103, 0.82) 0%, rgba(58, 6, 71, 0.78) 100%);
}

[data-bs-theme="dark"] .bg-overlay {
    background: linear-gradient(160deg, rgba(3, 12, 32, 0.9) 0%, rgba(24, 4, 30, 0.88) 100%);
}

@media (prefers-reduced-motion: reduce) {
    .bg-frame {
        animation: none;
        opacity: 1;
    }
}

.transparent-content {
    background-color: transparent !important;
    box-shadow: none;
}