/* ── 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;

    /* The Material themes ship their own purple/indigo for these — without them the active
       menu item, light badges and focus accents leak the stock Radzen colors. */
    --rz-primary-darker: #b35210;
    --rz-primary-lighter: rgba(244, 121, 32, 0.14);
    /* Theme-dependent tokens live in the html[data-theme] blocks below. */

    --rz-badge-text-transform: none;
    --rz-tabs-tab-text-transform: none;
    --rz-text-button-text-transform: none;
    --rz-scheduler-today-button-text-transform: none;

    --rz-text-font-family: 'Inter', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --rz-border-radius: 8px;
    --rz-card-border-radius: 14px;

    /* MyAllBills design tokens */
    --mab-radius-lg: 14px;
    --mab-radius-md: 10px;
    --mab-shadow-sm: 0 1px 2px var(--mab-shadow-tint), 0 1px 3px var(--mab-shadow-tint);
    --mab-shadow-md: 0 4px 12px -2px var(--mab-shadow-tint), 0 2px 6px -2px var(--mab-shadow-tint);
    --mab-ease: cubic-bezier(0.2, 0, 0, 1);
}

/* ── Theme tokens ──
   Keyed off data-theme, which App.razor renders on the server and billingApp.setTheme updates.
   Not light-dark(): Chrome does not re-resolve light-dark() reached through var() when
   color-scheme changes at runtime, so a live theme switch left surfaces in the old palette.
   Dark is the default (matches the app default); same specificity as html:root, so later wins. */
html:root,
html[data-theme="dark"] {
    --rz-on-primary-lighter: #ffa25e;
    --rz-secondary: #6f9bd1;
    --rz-secondary-lighter: rgba(111, 155, 209, 0.16);
    --rz-on-secondary-lighter: #9dbde3;

    /* Used across the app but not defined by any Radzen theme — every divider and bar
       track that referenced it rendered invisibly. */
    --rz-border-color: #2c2f36;

    /* Surfaces: a cooler, slightly lifted palette than stock Material grey */
    --rz-body-background-color: #0f1115;
    --rz-base-background-color: #171a20;
    --rz-card-background-color: var(--rz-base-background-color);
    --rz-text-secondary-color: #9aa3b2;
    --rz-text-tertiary-color: #6b7484;

    --mab-shadow-tint: rgba(0, 0, 0, 0.35);
    --mab-hover-bg: rgba(255, 255, 255, 0.04);
    --mab-scrollbar: #343944;
}

html[data-theme="light"] {
    --rz-on-primary-lighter: #c25a0c;
    --rz-secondary: #1E3A5C;
    --rz-secondary-lighter: rgba(30, 58, 92, 0.1);
    --rz-on-secondary-lighter: #1E3A5C;

    --rz-border-color: #e4e7ec;

    --rz-body-background-color: #f4f6f9;
    --rz-base-background-color: #ffffff;
    --rz-card-background-color: var(--rz-base-background-color);
    --rz-text-secondary-color: #5b6472;
    --rz-text-tertiary-color: #8a93a3;

    --mab-shadow-tint: rgba(16, 24, 40, 0.06);
    --mab-hover-bg: rgba(16, 24, 40, 0.035);
    --mab-scrollbar: #c7ccd4;
}

html, body {
    font-family: var(--rz-text-font-family);
    font-feature-settings: 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
}

body {
    background: var(--rz-body-background-color);
}

/* ── Global surface polish ── */
.rz-card {
    border-radius: var(--mab-radius-lg);
    box-shadow: var(--mab-shadow-sm);
}

.rz-card.rz-variant-outlined {
    border: 1px solid var(--rz-border-color);
}

.rz-header {
    backdrop-filter: saturate(160%) blur(10px);
}

/* Sentence case everywhere: the Material size classes (.rz-button-md etc.) hardcode
   uppercase + wide tracking, and load after this file — "html" lifts specificity past them. */
html .rz-button,
html .rz-button .rz-button-text {
    text-transform: none;
    letter-spacing: 0.01em;
}

.rz-button {
    border-radius: var(--mab-radius-md);
    font-weight: 600;
}

.rz-badge {
    font-weight: 600;
    letter-spacing: 0.02em;
}

.rz-dialog {
    border-radius: var(--mab-radius-lg);
    overflow: hidden;
}

/* Sidebar menu: inset rounded items with a brand indicator instead of full-bleed rows */
.rz-sidebar .rz-panel-menu {
    background: transparent;
}

/* Radzen's own stylesheet loads after this file, so restyle the menu through its variables */
.rz-sidebar {
    --rz-panel-menu-item-border: none;
    --rz-panel-menu-item-margin-block: 2px;
    --rz-panel-menu-item-margin-inline: 0.6rem;
    --rz-panel-menu-item-border-radius: var(--mab-radius-md);
    --rz-panel-menu-item-padding-block: 0.6rem;
    --rz-panel-menu-item-background-color: transparent;
    --rz-panel-menu-item-hover-background-color: var(--mab-hover-bg);
    --rz-panel-menu-item-active-background-color: var(--rz-primary-lighter);
}

.rz-sidebar .rz-navigation-item {
    border-radius: var(--mab-radius-md);
    overflow: hidden;
}

.rz-sidebar .rz-navigation-item-link {
    padding-block: 0.6rem;
    border-radius: var(--mab-radius-md);
    background: transparent;
}

.rz-sidebar .rz-navigation-item-link-active,
.rz-sidebar .rz-navigation-item-link-active:hover {
    background: var(--rz-primary-lighter);
    color: var(--rz-on-primary-lighter);
    box-shadow: inset 3px 0 0 var(--rz-primary);
}

.rz-sidebar .rz-navigation-item-link-active .rz-navigation-item-icon {
    color: var(--rz-primary);
}

.rz-sidebar .rz-navigation-item-link {
    transition: background-color 0.2s var(--mab-ease), color 0.2s, box-shadow 0.25s var(--mab-ease);
}

.rz-sidebar .rz-navigation-item-link .rz-navigation-item-icon {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s;
}

.rz-sidebar .rz-navigation-item-link:hover .rz-navigation-item-icon {
    transform: translateX(2px) scale(1.08);
}

/* ── App-wide motion ── */
/* Every routed page fades up into place */
.rz-body > div > * {
    animation: mab-page-in 0.4s var(--mab-ease) both;
}

@keyframes mab-page-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* Dialogs scale in from slightly below; the mask fades */
.rz-dialog-wrapper .rz-dialog {
    animation: mab-dialog-in 0.28s var(--mab-ease) both;
}

.rz-dialog-mask {
    animation: mab-fade 0.2s ease both;
}

@keyframes mab-dialog-in {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}

@keyframes mab-fade {
    from { opacity: 0; }
}

/* Dropdown / popup panels */
.rz-popup {
    animation: mab-popup-in 0.18s var(--mab-ease) both;
    transform-origin: top center;
    border-radius: var(--mab-radius-md);
}

@keyframes mab-popup-in {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

.rz-button:not(.rz-state-disabled) {
    transition: background-color 0.2s, box-shadow 0.2s var(--mab-ease), transform 0.15s var(--mab-ease), color 0.2s;
}

.rz-button:not(.rz-state-disabled):active {
    transform: scale(0.97);
}

/* Thin, theme-aware scrollbars */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--mab-scrollbar) transparent;
}

/* Tabular figures for every money value so columns don't jitter */
.mab-num {
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

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-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    animation: ba-rise 0.5s var(--mab-ease) both;
}

.ba-loader-mark {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(244, 121, 32, 0.12);
    box-shadow: 0 0 0 0 rgba(244, 121, 32, 0.35);
    animation: ba-pulse 1.8s ease-out infinite;
}

.ba-loader-mark img {
    width: 32px;
    height: 32px;
}

.ba-loader-track {
    position: relative;
    width: 148px;
    height: 4px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(128, 128, 128, 0.18);
}

.ba-loader-track::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 40%;
    border-radius: inherit;
    background: linear-gradient(90deg, #F47920, #f9a05c);
    animation: ba-indeterminate 1.25s var(--mab-ease) infinite;
}

@keyframes ba-indeterminate {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(260%); }
}

@keyframes ba-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(244, 121, 32, 0.35); }
    70%  { box-shadow: 0 0 0 14px rgba(244, 121, 32, 0); }
    100% { box-shadow: 0 0 0 0 rgba(244, 121, 32, 0); }
}

@keyframes ba-rise {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* ── 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;
    }
}