/* Override the Tabler icons @font-face (loaded from the jsDelivr CDN, which
   ships it WITHOUT font-display and therefore defaults to `block` — icons stay
   invisible for up to 3s on a slow connection). Redeclaring the same family +
   sources here with `font-display: swap` makes the icons render immediately in
   fallback and swap in when the woff2 arrives (Lighthouse "Font display").
   app.css loads after the CDN stylesheet, so this wins. Keep the version query
   (?v3.33.0) in sync with the CDN link in App.razor. */
@font-face {
    font-family: "tabler-icons";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.33.0/dist/fonts/tabler-icons.woff2?v3.33.0") format("woff2"),
         url("https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.33.0/dist/fonts/tabler-icons.woff?v3.33.0") format("woff"),
         url("https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.33.0/dist/fonts/tabler-icons.ttf?v3.33.0") format("truetype");
}

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

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

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

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

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

/* Increase base font size slightly for better mobile readability.
   Tabler 1.4.0 defaults to 0.875rem (14px). Overriding all three
   variables ensures Bootstrap, Tabler core, and any component-level
   references all pick up the same value. */
:root {
    --tblr-body-font-size: 0.9375rem;
    --tblr-font-size-base: 0.9375rem;
    --bs-body-font-size: 0.9375rem;
}

/* Slightly larger text on mobile for readability.
   Fluid clamp() sizing (not a fixed rem) so text scales with phone width.
   Emulators report CSS pixels: iPhone SE = 375px, iPhone 16 Pro Max = 430px.
   A fixed 1.125rem looks right on the SE but too small on the wider Pro Max
   because it fills a smaller fraction of the screen. clamp(min, Xvw, max)
   grows the size gently across the phone range and caps it so it never runs
   away on large/landscape screens. */
@media (max-width: 767.98px) {
    :root {
        --tblr-body-font-size: clamp(1.125rem, 4.9vw, 1.375rem);
        --tblr-font-size-base: clamp(1.125rem, 4.9vw, 1.375rem);
        --bs-body-font-size: clamp(1.125rem, 4.9vw, 1.375rem);
        --tblr-input-font-size: clamp(1.125rem, 4.9vw, 1.375rem);
    }

    /* form-control-sm / form-select-sm have hardcoded smaller sizes that
       don't inherit from the body variables — override them explicitly. */
    .form-control,
    .form-control-sm,
    .form-select,
    .form-select-sm,
    .input-group-text {
        font-size: clamp(1.125rem, 4.9vw, 1.375rem);
    }

    .form-label,
    .form-check-label,
    .form-hint {
        font-size: clamp(1.125rem, 4.9vw, 1.375rem);
    }

    .card-title,
    .card-subtitle {
        font-size: clamp(1.3rem, 5.6vw, 1.5rem);
    }
}

/* Ensure the header user/notification dropdowns don't overflow off-screen on mobile.
   The right-side nav uses ms-auto + dropdown-menu-end; this pins the menu to the
   right viewport edge on narrow screens where Popper is disabled. */
@media (max-width: 767.98px) {
    .navbar .navbar-nav.ms-auto .dropdown-menu {
        right: 0;
        left: auto;
        position: absolute;
    }
}

/* Header nav icons — sized via CSS so mobile can override without inline styles */
.header-nav-icon {
    font-size: 1.25rem;
}

@media (max-width: 767.98px) {
    .header-nav-icon {
        font-size: 1.1rem;
    }
}
/*.navbar-vertical .navbar-nav .nav-link-title {
    opacity: 1 !important;
    width: auto !important;
}*/
/* Make sidebar links full-width, even when Tabler tries to collapse them */
/*.navbar-vertical .navbar-nav .nav-link {
    width: 100% !important;
    overflow: visible !important;
}*/

/* Belt-and-braces: even if Tabler adds navbar-vertical-collapsed to <body> 
body.navbar-vertical-collapsed .navbar-vertical .navbar-nav .nav-link {
    width: 100% !important;
    overflow: visible !important;
} */

/* Tighten the default vertical spacing Tabler applies between the
   page header and the first piece of content. Tabler ships with
   .page-body { margin-top: 1.5rem } which wastes screen real estate
   on mobile. Override both the CSS variable Tabler reads and the
   resolved margin as belt-and-braces. */
:root, body, .page {
    --tblr-page-padding-y: 0.25rem;
}

@media (min-width: 768px) {
    :root, body, .page {
        --tblr-page-padding-y: 1rem;
    }
}

.page,
.page-wrapper,
.page-body,
.page-body > .container-xl,
.page-body > .container-tight,
.page-body > .container-fluid,
.page-body > .container-xl > .container-xl {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.page-body {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
}

.page-body .py-4 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.75rem !important;
}

@media (min-width: 768px) {
    .page-body .py-4 {
        padding-top: 1rem !important;
        padding-bottom: 1.25rem !important;
    }
}

/* Same treatment for the page-header block so the title sits closer
   to the top nav on mobile. */
.page-header {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    margin-top: 0 !important;
}

@media (min-width: 768px) {
    .page-header {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
}


/* Attendees page: colour tab labels and list names by status.
   Kept in the global stylesheet (not Blazor scoped CSS) because the
   scoped-CSS attribute selector can be stripped by aggressive CSS
   minifiers and is easy to break with hard-refresh + service worker. */

/* Hidden scrollbar for the horizontal tab strip. Must be global because
   ::-webkit-scrollbar and scrollbar-width don't reliably apply through
   Blazor scoped CSS attribute selectors. */
.attendees-tabs {
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* Edge/IE */
}

.attendees-tabs::-webkit-scrollbar {
    display: none;               /* Chromium, Safari */
    width: 0;
    height: 0;
}

/* Shrink tab padding on narrow screens so all three tabs fit without
   horizontal scrolling. Badges also lose their inline margin. */
@media (max-width: 575.98px) {
    .attendees-tabs .nav-link {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        font-size: 1.05rem;
    }

    .attendees-tabs .nav-link .badge {
        margin-left: 0.25rem !important;
        padding: 0.2em 0.4em;
    }
}
.attendees-tabs .nav-link.tab-going,
.attendees-tabs .nav-link.tab-going:hover,
.attendees-tabs .nav-link.tab-going:focus,
.attendees-tabs .nav-link.tab-going.active { color: var(--tblr-green) !important; }

.attendees-tabs .nav-link.tab-waiting,
.attendees-tabs .nav-link.tab-waiting:hover,
.attendees-tabs .nav-link.tab-waiting:focus,
.attendees-tabs .nav-link.tab-waiting.active { color: var(--tblr-yellow) !important; }

.attendees-tabs .nav-link.tab-noresponse,
.attendees-tabs .nav-link.tab-noresponse:hover,
.attendees-tabs .nav-link.tab-noresponse:focus,
.attendees-tabs .nav-link.tab-noresponse.active { color: var(--tblr-secondary) !important; }

.attendees-tabs .nav-link.tab-declined,
.attendees-tabs .nav-link.tab-declined:hover,
.attendees-tabs .nav-link.tab-declined:focus,
.attendees-tabs .nav-link.tab-declined.active { color: var(--tblr-red) !important; }

.attendees-tabs .nav-link.tab-going.active { border-bottom-color: var(--tblr-green) !important; }
.attendees-tabs .nav-link.tab-waiting.active { border-bottom-color: var(--tblr-yellow) !important; }
.attendees-tabs .nav-link.tab-noresponse.active { border-bottom-color: var(--tblr-secondary) !important; }
.attendees-tabs .nav-link.tab-declined.active { border-bottom-color: var(--tblr-red) !important; }

.list-going .list-group-item .flex-fill { color: var(--tblr-green) !important; }
.list-waiting .list-group-item .flex-fill { color: var(--tblr-yellow) !important; }
.list-noresponse .list-group-item .flex-fill { color: var(--tblr-secondary) !important; }
.list-declined .list-group-item .flex-fill { color: var(--tblr-red) !important; }

/* Mobile sidebar menu optimization - horizontal main nav items */
@media (max-width: 991.98px) {
    .nav-main-items {
        display: flex;
        flex-direction: row;
        width: 100%;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .nav-main-items .nav-item {
        flex: 1;
    }

    .nav-main-items .nav-link {
        padding: 0.5rem;
        text-align: center;
    }

    .nav-main-items .nav-link-icon {
        display: block;
        margin-bottom: 0.25rem;
    }

    .nav-main-items .nav-link-title {
        display: block;
        font-size: 0.875rem;
    }
}

/* Mobile table optimizations */
@media (max-width: 575.98px) {
    /* Allow tables to be scrollable on very small screens */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Make action buttons stack vertically on mobile */
    .card-table td .d-flex {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .card-table td .d-flex .btn {
        width: 100%;
    }

    /* Reduce button padding on mobile */
    .card-table .btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }

    /* Make badges smaller */
    .card-table .badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }
}

/* Persistent offline banner shown in the layout chrome while the browser is
   offline (see OfflineBanner.razor / IConnectivityService). */
.cheza-offline-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    background-color: #f59f00;
    color: #fff;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.4rem 1rem;
    text-align: center;
}

/* Thin indeterminate top progress bar shown while GlobalBusyService.IsBusy
   (see GlobalProgressBar.razor). */
.cheza-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 2200;
    overflow: hidden;
    background-color: transparent;
}

.cheza-progress-bar__inner {
    height: 100%;
    width: 40%;
    background-color: #1b6ec2;
    animation: cheza-progress-indeterminate 1.1s ease-in-out infinite;
}

@keyframes cheza-progress-indeterminate {
    0% { margin-left: -40%; }
    100% { margin-left: 100%; }
}

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

/* App-wide "something slow is happening" indicator. Shown by both the JS
   navigation click hook (App.razor) and the GlobalProgressBar component
   (driven by GlobalBusyService). Any slow operation should surface this. */
.cheza-loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 3000;
    overflow: hidden;
    background: rgba(27, 110, 194, 0.25);
}

/* The JS navigation overlay (App.razor cheza.showNavProgress) is added to the
   DOM instantly on link click and removed instantly when LocationChanged fires.
   To avoid an ugly flash on fast navigations we keep it visually hidden and
   fade it in only after a short delay via a delayed animation. Fast navigations
   remove the element before the delay elapses, so nothing is ever painted;
   slow navigations survive and the indicator appears. Show/hide stay instant,
   so there's no interop race that could leave the pill stuck after load. */
#cheza-nav-progress {
    opacity: 0;
    animation: cheza-nav-progress-reveal 0s linear 250ms forwards;
}

@keyframes cheza-nav-progress-reveal {
    to {
        opacity: 1;
    }
}

.cheza-loading-bar__inner {
    height: 100%;
    width: 40%;
    background: #1b6ec2;
    animation: cheza-progress-indeterminate 1.1s ease-in-out infinite;
}

.cheza-loading-pill {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3001;
    background: #1b6ec2;
    color: #fff;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cheza-loading-pill__spinner {
    width: 0.9rem;
    height: 0.9rem;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: cheza-spin 0.7s linear infinite;
}

/* Attention pulse applied to the offline banner when the user tries to
   navigate while offline (see cheza.flashOfflineHint in App.razor). Draws the
   eye to the already-visible banner rather than adding a separate toast that
   could be missed on mobile / under PWA chrome. */
.cheza-offline-banner--pulse {
    animation: cheza-offline-pulse 0.5s ease-in-out 4;
    position: relative;
    z-index: 3100;
}

/* Fallback offline strip created by cheza.flashOfflineHint when the Blazor
   OfflineBanner isn't in the DOM. Pinned to the top so it's always visible. */
#cheza-offline-hint-fallback {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3100;
}

@keyframes cheza-offline-pulse {
    0%, 100% {
        background-color: #f59f00;
        box-shadow: 0 0 0 0 rgba(180, 35, 24, 0);
        transform: scale(1);
    }
    50% {
        background-color: #b42318;
        box-shadow: 0 0 0 10px rgba(180, 35, 24, 0.55);
        transform: scale(1.06);
    }
}