/* ── Brand color palette ── */
/* Navy: #1E3A5C | Orange: #F47920 */
/* html:root beats the plain :root selector the Radzen theme CSS uses, so the
   brand colors survive no matter where RadzenTheme injects its stylesheet
   (it renders in the body, i.e. AFTER this file in document order). */
html:root {
    --mab-primary: #F47920;
    --mab-primary-dark: #d4620f;
    --mab-primary-light: #f9a05c;
    --mab-navy: #1E3A5C;
    --mab-navy-dark: #152C4A;
    --rz-primary: #F47920;
    --rz-primary-light: #f9a05c;
    --rz-primary-dark: #d4620f;
    --rz-on-primary: #ffffff;
}

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

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

.btn-primary {
    color: #fff;
    background-color: #F47920;
    border-color: #d4620f;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  /* Inner ring follows the theme background instead of hardcoded white so it looks right in dark mode */
  box-shadow: 0 0 0 0.1rem var(--rz-base-background-color, #fff), 0 0 0 0.25rem #f9a05c;
}

.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;
}

/* ── Mobile responsive ── */
@media (max-width: 768px) {
    /* Sidebar: fixed overlay, hidden by default – JS collapses it on load */
    .rz-sidebar {
        position: fixed !important;
        top: 3.5rem !important; /* below the header */
        left: 0 !important;
        height: calc(100dvh - 3.5rem) !important;
        z-index: 1000 !important;
        /* Keep width, use transform to slide in/out so transition is smooth */
        width: var(--rz-sidebar-width) !important;
        opacity: 1 !important;
        transition: transform 0.25s ease !important;
    }

    .rz-sidebar.rz-sidebar-collapsed {
        transform: translateX(-100%);
        width: var(--rz-sidebar-width) !important;
        opacity: 1 !important;
    }

    .rz-sidebar.rz-sidebar-expanded {
        transform: translateX(0) !important;
        width: var(--rz-sidebar-width) !important;
        opacity: 1 !important;
    }

    /* Make layout grid collapse the sidebar column so body is full width */
    .rz-layout {
        grid-template-columns: 0 1fr !important;
    }

    /* Body: full width, prevent horizontal overflow */
    .rz-body {
        overflow-x: hidden;
        min-width: 0;
        width: 100% !important;
    }

    /* Body padding: tighter on mobile */
    .rz-body > div {
        padding: 0.75rem !important;
    }

    /* Grid container scrolls horizontally — keep the outer div as block/auto,
       but leave the inner <table> as display:table so column widths still work. */
    .rz-data-grid {
        overflow-x: auto !important;
        max-width: 100% !important;
        display: block !important;
    }

    /* Restore proper table layout inside the scroll container */
    .rz-data-grid table {
        display: table !important;
    }

    /* Cards: go full width */
    .rz-card {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Charts: don't exceed screen width */
    .rz-chart {
        max-width: 100% !important;
    }

    /* Header: hide username text on small screens to save space */
    .rz-header .rz-text-body2 {
        display: none;
    }
}

.quick-card {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--rz-border-color);
    border-radius: 12px;
    min-width: 150px;
    cursor: pointer;
    flex-shrink: 0;
    background: var(--rz-base-background-color);
    transition: box-shadow 0.15s, transform 0.1s;
    user-select: none;
}

.quick-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    transform: translateY(-1px);
}

.quick-card:active {
    transform: translateY(0);
    box-shadow: none;
}

/* ── App loader overlay ── */
#ba-app-loader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.35s ease;
}

#ba-app-loader.ba-loader-hiding {
    opacity: 0;
    pointer-events: none;
}

.ba-loader-spinner {
    width: 44px;
    height: 44px;
    border: 3px solid rgba(128,128,128,0.2);
    border-top-color: #F47920;
    border-radius: 50%;
    animation: ba-spin 0.75s linear infinite;
}

@keyframes ba-spin {
    to { transform: rotate(360deg); }
}

/* ── Dialogs full-screen on mobile ── */
@media (max-width: 768px) {
    .rz-dialog-wrapper .rz-dialog {
        width: 100vw !important;
        height: 100dvh !important;
        max-width: 100vw !important;
        max-height: 100dvh !important;
        min-width: unset !important;
        min-height: unset !important;
        top: 0 !important;
        left: 0 !important;
        border-radius: 0 !important;
        position: fixed !important;
    }

    /* Dialog content scrolls internally */
    .rz-dialog-content {
        overflow-y: auto;
        flex: 1;
    }
}

/* ── Mobile grid column visibility ── */
@media (max-width: 768px) {
    /* Collapse non-essential columns — keep display:table-cell so <col> index stays
       aligned with td index (Chrome skips display:none cells when assigning col widths,
       which shifts all subsequent column widths onto the wrong cells). */
    th.hide-mobile,
    td.hide-mobile {
        width: 0 !important;
        max-width: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        border: none !important;
        white-space: nowrap;
    }

    /* Category column: icon-only on mobile (width overridden via JS to beat inline style) */
    .cat-label {
        display: none !important;
    }
}