@import '_content/PSC.Blazor.Components.MarkdownEditor/PSC.Blazor.Components.MarkdownEditor.mlg14ggzcc.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Layout styles moved to app.css for theming support */
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Nav styles moved to app.css for theming support */
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-h02dmh7b8b],
.components-reconnect-repeated-attempt-visible[b-h02dmh7b8b],
.components-reconnect-failed-visible[b-h02dmh7b8b],
.components-pause-visible[b-h02dmh7b8b],
.components-resume-failed-visible[b-h02dmh7b8b],
.components-rejoining-animation[b-h02dmh7b8b] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-h02dmh7b8b],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-h02dmh7b8b],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-h02dmh7b8b],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-h02dmh7b8b],
#components-reconnect-modal.components-reconnect-retrying[b-h02dmh7b8b],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-h02dmh7b8b],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-h02dmh7b8b],
#components-reconnect-modal.components-reconnect-failed[b-h02dmh7b8b],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-h02dmh7b8b] {
    display: block;
}


#components-reconnect-modal[b-h02dmh7b8b] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-h02dmh7b8b 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-h02dmh7b8b 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-h02dmh7b8b 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-h02dmh7b8b]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-h02dmh7b8b 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-h02dmh7b8b {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-h02dmh7b8b {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-h02dmh7b8b {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-h02dmh7b8b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-h02dmh7b8b] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-h02dmh7b8b] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-h02dmh7b8b] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-h02dmh7b8b] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-h02dmh7b8b] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-h02dmh7b8b] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-h02dmh7b8b 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-h02dmh7b8b] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-h02dmh7b8b {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Admin/Settings.razor.rz.scp.css */
/* Page-scoped responsive fixes for /admin/settings.
   Many help-text blocks here use inline <code> tags (e.g. appsettings keys,
   template placeholders) that don't word-break — combined with long URL
   placeholders in inputs and flex rows whose children can't shrink, the
   page can overflow an iPhone viewport. ::deep makes these rules apply
   to descendants of the scoped .admin-settings element. */

/* Hard cap on the container itself so no descendant can push the page
   wider than the viewport (e.g. raw HTML in the email template preview,
   a long connection-string placeholder, a wide `<pre>` block). Without
   this, iOS Mobile Safari zooms the whole page out instead of letting
   individual elements scroll — which is what made the tab bar LOOK
   non-scrolling: everything was just tiny.
   Using overflow-x: hidden (not `clip`) for broad browser support. */
.admin-settings[b-2wzc656d3f] {
    max-width: 100%;
    overflow-x: hidden;
}
.admin-settings[b-2wzc656d3f]  .card,
.admin-settings[b-2wzc656d3f]  .fli-form-page,
.admin-settings[b-2wzc656d3f]  .alert { max-width: 100%; }
.admin-settings[b-2wzc656d3f]  pre,
.admin-settings[b-2wzc656d3f]  .card-body > pre,
.admin-settings[b-2wzc656d3f]  .card-footer > pre { max-width: 100%; overflow-x: auto; }
/* The email-template preview is user-authored HTML — could be anything.
   Box it in so a stray fixed-width table can't push the page wider. */
.admin-settings[b-2wzc656d3f]  .card-footer > .border.rounded { max-width: 100%; overflow-x: auto; }

.admin-settings[b-2wzc656d3f]  code,
.admin-settings[b-2wzc656d3f]  dd { word-break: break-word; overflow-wrap: anywhere; }

.admin-settings[b-2wzc656d3f]  .d-flex > * { min-width: 0; }
.admin-settings[b-2wzc656d3f]  .text-truncate { min-width: 0; max-width: 100%; }
.admin-settings[b-2wzc656d3f]  input.form-control,
.admin-settings[b-2wzc656d3f]  textarea.form-control,
.admin-settings[b-2wzc656d3f]  .form-select { max-width: 100%; }
.admin-settings[b-2wzc656d3f]  table { word-break: break-word; }

/* Horizontal-scroll tab bar. The 6 tabs (General / Providers / Templates
   / Testing / Bounces / Reviews) exceed an iPhone's 375px width, so the
   row needs to scroll sideways. width:100% + max-width:100% pins the row
   to the container width so the scrollbar has something to overflow against.
   display:flex is restated because Bootstrap defaults to flex-wrap:wrap;
   the `min-width:0` + `flex-shrink:0` on the children keeps each tab at
   its natural width while letting the row scroll. */
.admin-settings[b-2wzc656d3f]  .nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    min-width: 0;
}
.admin-settings[b-2wzc656d3f]  .nav-tabs::-webkit-scrollbar { display: none; }
.admin-settings[b-2wzc656d3f]  .nav-tabs .nav-item {
    flex-shrink: 0;
}
.admin-settings[b-2wzc656d3f]  .nav-tabs .nav-link {
    white-space: nowrap;
    flex-shrink: 0;
}

/* Tablet + phone (below Bootstrap's lg — same breakpoint the grid uses
   to collapse col-lg-* to a single column). Anything that reads "big" on
   iPhone gets tuned here; the 575.98px block below handles the tiny-phone
   extras. */
@media (max-width: 991.98px) {
    /* rows="10" textareas dominate the screen on a phone — keep them tall
       enough to be usable but not a full-screen block. */
    .admin-settings[b-2wzc656d3f]  textarea.form-control {
        max-height: 260px;
        min-height: 140px;
    }
    /* Long template HTML is easier to read with slightly smaller text. */
    .admin-settings[b-2wzc656d3f]  textarea.font-monospace { font-size: .78rem !important; line-height: 1.35; }
    /* Card header right-hand badge (template key) drops below the title
       instead of being squeezed next to it. */
    .admin-settings[b-2wzc656d3f]  .card-header { flex-wrap: wrap; row-gap: .3rem; }
    /* The Save / Preview row — centre-align instead of the desktop
       split-left-and-right timestamp which wastes a whole row on mobile. */
    .admin-settings[b-2wzc656d3f]  .col-md-6.text-end { text-align: left !important; margin-top: .4rem; }
}

@media (max-width: 575.98px) {
    .admin-settings[b-2wzc656d3f]  .fli-page-header h1 { font-size: 1.4rem; }
    .admin-settings[b-2wzc656d3f]  .fli-form-page { max-width: 100% !important; padding: 0; }
    .admin-settings[b-2wzc656d3f]  .fli-form-page .card { margin-bottom: .75rem; }
    .admin-settings[b-2wzc656d3f]  .fli-form-page .card-body { padding: .85rem; }
    .admin-settings[b-2wzc656d3f]  .fli-form-page .card-header { padding: .55rem .85rem; }
    .admin-settings[b-2wzc656d3f]  .fli-form-page .card-header h5,
    .admin-settings[b-2wzc656d3f]  .fli-form-page .card-header h6 { font-size: .95rem; }
    .admin-settings[b-2wzc656d3f]  .nav-tabs .nav-link { padding: .35rem .55rem; font-size: .85rem; white-space: nowrap; }
    /* Tabs fill the screen with just icons — labels wrap below if they
       don't fit so you don't have to horizontally scroll a long tab row. */
    .admin-settings[b-2wzc656d3f]  .nav-tabs .nav-link i { margin-right: .25rem !important; }
    /* Stack the bounce filter row instead of forcing 3 selects across */
    .admin-settings[b-2wzc656d3f]  .row.g-2 > [class*="col-"] { margin-bottom: .4rem; }
    /* Smaller alert text + tighter padding */
    .admin-settings[b-2wzc656d3f]  .alert { padding: .65rem .75rem; font-size: .85rem; }
    /* Provider assignment selects + provider list rows */
    .admin-settings[b-2wzc656d3f]  .form-label { font-size: .9rem; }
    .admin-settings[b-2wzc656d3f]  .form-text { font-size: .75rem; }
    /* Textareas even tighter on phones. */
    .admin-settings[b-2wzc656d3f]  textarea.form-control { max-height: 220px; min-height: 120px; }
    /* Any stray wide content (email preview iframe etc) gets boxed in. */
    .admin-settings[b-2wzc656d3f]  .card-footer > div { overflow-x: auto; }
    /* Buttons on the template card wrap cleanly. */
    .admin-settings[b-2wzc656d3f]  .card-body .btn { margin-bottom: .3rem; }
    .admin-settings[b-2wzc656d3f]  .card-body .btn + .btn { margin-left: 0 !important; }
}
/* /Components/Pages/Organizer/Planner.razor.rz.scp.css */
/* Hero header + section cards now live in the shared components
   (Components/Shared/PageHeader + SectionCard). This file keeps only the
   planner-specific styles: pill steps, Quick Fill, schedule grid. */

/* ===== Numbered pill steps ===== */
.planner-steps[b-7khrykel4j] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.25rem;
    padding: .35rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
}

.planner-step[b-7khrykel4j] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .9rem .4rem .45rem;
    border: none;
    background: transparent;
    border-radius: 999px;
    font-size: .9rem;
    color: var(--bs-secondary-color);
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}

.planner-step:hover[b-7khrykel4j] {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.planner-step.active[b-7khrykel4j] {
    background: linear-gradient(135deg, #4cc9f0 0%, #4361ee 100%);
    color: #fff;
    font-weight: 600;
}

.planner-step.active:hover[b-7khrykel4j] {
    color: #fff;
}

.planner-step.done[b-7khrykel4j] {
    color: var(--bs-success);
}

.planner-step-num[b-7khrykel4j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    font-size: .78rem;
    font-weight: 700;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
}

.planner-step.active .planner-step-num[b-7khrykel4j] {
    background: rgba(255, 255, 255, .25);
    color: #fff;
}

.planner-step.done .planner-step-num[b-7khrykel4j] {
    background: rgba(25, 135, 84, .15);
    color: var(--bs-success);
}

.planner-step-label[b-7khrykel4j] { display: inline-flex; align-items: center; gap: .35rem; }

.planner-step .badge[b-7khrykel4j] {
    background: rgba(255, 255, 255, .25);
    color: inherit;
    font-weight: 700;
    font-size: .68rem;
    padding: .2rem .45rem;
}

.planner-step:not(.active) .badge[b-7khrykel4j] {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
}

.planner-step-connector[b-7khrykel4j] {
    flex: 0 0 1.75rem;
    height: 2px;
    background: var(--bs-border-color);
    border-radius: 1px;
}

/* ===== Prominent Quick Fill panel ===== */
.quickfill[b-7khrykel4j] {
    position: relative;
    overflow: hidden;
    border-radius: .75rem;
    padding: 0;
    margin-bottom: 1rem;
    background: var(--bs-body-bg);
    border: 1px solid rgba(247, 127, 0, .35);
    box-shadow: 0 2px 10px -6px rgba(247, 127, 0, .35);
}

.quickfill-header[b-7khrykel4j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .9rem 1.1rem;
    background: linear-gradient(135deg, rgba(247, 127, 0, .12) 0%, rgba(230, 57, 70, .08) 100%);
    border-bottom: 1px solid rgba(247, 127, 0, .2);
    cursor: pointer;
}

.quickfill-title[b-7khrykel4j] {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.quickfill-title .quickfill-bolt[b-7khrykel4j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: .5rem;
    background: linear-gradient(135deg, #f77f00, #e63946);
    color: #fff;
    font-size: 1rem;
    box-shadow: 0 2px 6px -2px rgba(230, 57, 70, .6);
}

.quickfill-preview[b-7khrykel4j] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .65rem;
    background: #fff;
    border: 1px solid rgba(247, 127, 0, .3);
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    color: #9e4d00;
}

[data-bs-theme="dark"] .quickfill-preview[b-7khrykel4j] {
    background: rgba(247, 127, 0, .1);
    color: #ffb366;
}

.quickfill-body[b-7khrykel4j] {
    padding: 1rem 1.1rem;
}

.quickfill-section-label[b-7khrykel4j] {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin-bottom: .4rem;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.quickfill-divider[b-7khrykel4j] {
    height: 1px;
    background: var(--bs-border-color-translucent);
    margin: .85rem 0;
}

.quickfill-days[b-7khrykel4j] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.quickfill-day[b-7khrykel4j] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.quickfill-day input[b-7khrykel4j] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.quickfill-day.on[b-7khrykel4j] {
    background: linear-gradient(135deg, #f77f00, #e63946);
    color: #fff;
    border-color: transparent;
}

.quickfill-day:hover:not(.on)[b-7khrykel4j] {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

.quickfill-fill-btn[b-7khrykel4j] {
    background: linear-gradient(135deg, #f77f00, #e63946);
    color: #fff;
    border: none;
    font-weight: 600;
    padding: .4rem 1rem;
    border-radius: .35rem;
    box-shadow: 0 2px 8px -2px rgba(230, 57, 70, .5);
    transition: transform .15s ease, box-shadow .15s ease;
}

.quickfill-fill-btn:hover:not(:disabled)[b-7khrykel4j] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -2px rgba(230, 57, 70, .6);
    color: #fff;
}

.quickfill-fill-btn:disabled[b-7khrykel4j] {
    opacity: .55;
    box-shadow: none;
}

.quickfill-result[b-7khrykel4j] {
    margin-top: .6rem;
    padding: .5rem .7rem;
    border-radius: .35rem;
    font-size: .82rem;
}

.quickfill-result.success[b-7khrykel4j] {
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
    border: 1px solid var(--bs-success-border-subtle);
}

.quickfill-result.error[b-7khrykel4j] {
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
    border: 1px solid var(--bs-danger-border-subtle);
}

@media (max-width: 575.98px) {
    .quickfill-header[b-7khrykel4j] { flex-direction: column; align-items: stretch; }
    .quickfill-preview[b-7khrykel4j] { align-self: flex-start; }
}

/* ===== Schedule grid polish ===== */
.planner-weeknav[b-7khrykel4j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .55rem .75rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .6rem;
    margin-bottom: 1rem;
}

.planner-weeknav-group[b-7khrykel4j] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.planner-weeknav-pill[b-7khrykel4j] {
    display: inline-flex;
    align-items: center;
    background: var(--bs-tertiary-bg);
    border-radius: 999px;
    padding: .15rem;
}

.planner-weeknav-pill .btn[b-7khrykel4j] {
    border: none;
    background: transparent;
    border-radius: 999px;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.planner-weeknav-pill .btn:hover:not(:disabled)[b-7khrykel4j] {
    background: var(--bs-secondary-bg);
}

.planner-weeknav-range[b-7khrykel4j] {
    font-size: .95rem;
    font-weight: 600;
    padding: 0 .5rem;
    color: var(--bs-body-color);
    white-space: nowrap;
}

.planner-weeknav-today[b-7khrykel4j] {
    font-size: .78rem;
    font-weight: 600;
    padding: .3rem .75rem;
    border-radius: 999px;
    border: 1px solid var(--bs-primary);
    color: var(--bs-primary);
    background: transparent;
    transition: background .15s ease;
}

.planner-weeknav-today:hover:not(:disabled)[b-7khrykel4j] {
    background: var(--bs-primary-bg-subtle);
}

.planner-slot-count[b-7khrykel4j] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    background: linear-gradient(135deg, #4cc9f0, #4361ee);
    color: #fff;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
}

.planner-weeknav-clear[b-7khrykel4j] {
    font-size: .78rem;
}

.planner-interval-select[b-7khrykel4j] {
    width: auto;
    border-radius: 999px;
    padding: .3rem .8rem;
    font-size: .8rem;
}

/* Templates sidebar */
.planner-templates-panel[b-7khrykel4j] {
    position: sticky;
    top: 1rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .6rem;
    overflow: hidden;
}

.planner-templates-header[b-7khrykel4j] {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .65rem .85rem;
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.planner-templates-header h6[b-7khrykel4j] {
    margin: 0;
    font-size: .85rem;
    font-weight: 600;
}

.planner-templates-body[b-7khrykel4j] {
    padding: .6rem;
}

.planner-template-card[b-7khrykel4j] {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .65rem;
    border-radius: .45rem;
    margin-bottom: .4rem;
    font-size: .82rem;
    font-weight: 500;
    cursor: grab;
    background: var(--tpl-bg);
    border: 1px solid transparent;
    transition: transform .12s ease, box-shadow .15s ease;
}

.planner-template-card:hover[b-7khrykel4j] {
    transform: translateX(2px);
    box-shadow: 0 2px 8px -3px rgba(0, 0, 0, .12);
}

.planner-template-card:active[b-7khrykel4j] { cursor: grabbing; }

.planner-template-card .tpl-dot[b-7khrykel4j] {
    flex-shrink: 0;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--tpl-color);
    box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 3px var(--tpl-color);
}

.planner-template-card .tpl-name[b-7khrykel4j] { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planner-template-card .tpl-dur[b-7khrykel4j] { color: var(--bs-secondary-color); font-size: .7rem; white-space: nowrap; }
.planner-template-card.default[b-7khrykel4j] {
    box-shadow: 0 0 0 1.5px var(--tpl-color);
}
.planner-template-card .tpl-star[b-7khrykel4j] { color: var(--tpl-color); font-size: .65rem; }

/* Grid shell */
.planner-grid-scroll[b-7khrykel4j] {
    position: relative;
    max-height: 70vh;
    overflow: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: .6rem;
    background: var(--bs-body-bg);
}

.planner-grid-loading[b-7khrykel4j] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.7);
    z-index: 10;
    backdrop-filter: blur(1px);
}

[data-bs-theme="dark"] .planner-grid-loading[b-7khrykel4j] {
    background: rgba(0, 0, 0, 0.4);
}

.planner-grid[b-7khrykel4j] {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
}

.planner-grid thead th[b-7khrykel4j] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bs-tertiary-bg);
    padding: .55rem .25rem;
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid var(--bs-border-color);
    box-shadow: 0 2px 4px -2px rgba(0, 0, 0, .06);
}

.planner-grid thead th.is-today[b-7khrykel4j] {
    background: linear-gradient(180deg, rgba(67, 97, 238, .15) 0%, rgba(67, 97, 238, .05) 100%);
    position: relative;
}

.planner-grid thead th.is-today[b-7khrykel4j]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #4361ee, transparent);
}

.planner-grid .day-name[b-7khrykel4j] { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--bs-secondary-color); }
.planner-grid .day-date[b-7khrykel4j] { font-size: .72rem; color: var(--bs-tertiary-color); margin-top: 1px; }
.planner-grid thead th.is-today .day-name[b-7khrykel4j],
.planner-grid thead th.is-today .day-date[b-7khrykel4j] { color: #4361ee; font-weight: 700; }

.planner-grid th.time-col[b-7khrykel4j] {
    width: 64px;
    font-size: .72rem;
    text-align: center;
}

.planner-grid td[b-7khrykel4j] {
    padding: 0;
    border-right: 1px solid var(--bs-border-color-translucent);
    border-bottom: 1px solid var(--bs-border-color-translucent);
    vertical-align: middle;
}

.planner-grid td:last-child[b-7khrykel4j] {
    border-right: none;
}

.planner-grid td.time-label[b-7khrykel4j] {
    text-align: center;
    font-size: .7rem;
    color: var(--bs-tertiary-color);
    background: var(--bs-tertiary-bg);
    font-variant-numeric: tabular-nums;
}

.planner-grid td.is-today-col:not(.is-past):not(.has-slot)[b-7khrykel4j] {
    background: rgba(67, 97, 238, .04);
}

.planner-grid td.is-past[b-7khrykel4j] {
    background: repeating-linear-gradient(
        -45deg,
        var(--bs-tertiary-bg),
        var(--bs-tertiary-bg) 6px,
        rgba(0, 0, 0, .025) 6px,
        rgba(0, 0, 0, .025) 12px
    );
    opacity: .6;
}

.planner-grid td.is-empty:not(.is-past):hover[b-7khrykel4j] {
    background: rgba(67, 97, 238, .08);
    cursor: cell;
}

.planner-grid td.is-empty:not(.is-past)[b-7khrykel4j]::after {
    content: '+';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 1rem;
    font-weight: 700;
    transition: color .15s ease;
    pointer-events: none;
}

.planner-grid td.is-empty:not(.is-past):hover[b-7khrykel4j]::after {
    color: rgba(67, 97, 238, .7);
}

.planner-grid td.has-slot[b-7khrykel4j] {
    padding: 2px;
}

.planner-slot-pill[b-7khrykel4j] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .3rem;
    height: 100%;
    min-height: 22px;
    padding: 2px 4px 2px 6px;
    border-radius: .3rem;
    background: var(--slot-bg);
    border-left: 3px solid var(--slot-color);
    color: var(--slot-color);
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.1;
    overflow: hidden;
    cursor: grab;
    transition: filter .12s ease, transform .12s ease;
}

.planner-slot-pill:hover[b-7khrykel4j] {
    filter: brightness(0.97);
    transform: translateY(-1px);
}

.planner-slot-pill .slot-name[b-7khrykel4j] { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planner-slot-pill .slot-dur[b-7khrykel4j] { font-weight: 500; opacity: .75; font-size: .62rem; margin-left: 2px; }

.planner-slot-pill .slot-remove[b-7khrykel4j] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: .6rem;
    opacity: 0;
    transition: opacity .12s ease, background .12s ease;
}

.planner-slot-pill:hover .slot-remove[b-7khrykel4j] {
    opacity: 1;
}

.planner-slot-pill .slot-remove:hover[b-7khrykel4j] {
    background: rgba(220, 53, 69, .2);
    color: var(--bs-danger);
}

/* Mobile timeline */
.planner-mobile-day[b-7khrykel4j] {
    display: flex;
    gap: .5rem;
    margin-bottom: .75rem;
}

.planner-mobile-day .form-select[b-7khrykel4j] { font-size: .88rem; }

.planner-mobile-timeline[b-7khrykel4j] {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .6rem;
    overflow: hidden;
}

.planner-mobile-row[b-7khrykel4j] {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .8rem;
    min-height: 48px;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    background: var(--row-bg, transparent);
    border-left: 3px solid var(--row-accent, transparent);
}

.planner-mobile-row:last-child[b-7khrykel4j] { border-bottom: none; }

.planner-mobile-row .row-time[b-7khrykel4j] {
    width: 52px;
    flex-shrink: 0;
    font-size: .8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--bs-secondary-color);
}

.planner-mobile-row.is-past .row-time[b-7khrykel4j] { color: var(--bs-tertiary-color); }
.planner-mobile-row.is-past[b-7khrykel4j] { opacity: .55; }

.planner-mobile-row .row-name[b-7khrykel4j] {
    flex: 1 1 auto;
    font-size: .86rem;
    font-weight: 600;
    color: var(--slot-color);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.planner-mobile-row .row-dur[b-7khrykel4j] {
    font-size: .72rem;
    color: var(--bs-secondary-color);
    font-weight: 400;
    margin-left: .25rem;
}

.planner-mobile-row .btn[b-7khrykel4j] { font-size: .78rem; }
/* /Components/Pages/Support/TicketDetail.razor.rz.scp.css */
/* Linked-tickets collapsible — default list-style on <summary> is ugly, replace with a
   rotating chevron so the agent has a clear affordance for expand/collapse. */

.fli-linked-child > summary[b-h3ldaeblgm] {
    list-style: none;
}

.fli-linked-child > summary[b-h3ldaeblgm]::-webkit-details-marker {
    display: none;
}

.fli-linked-child[open] > summary .fli-linked-caret[b-h3ldaeblgm] {
    transform: rotate(90deg);
}

.fli-linked-child .fli-linked-caret[b-h3ldaeblgm] {
    transition: transform 0.15s ease;
    display: inline-block;
}
/* /Components/Shared/PageHeader.razor.rz.scp.css */
/* Plain-mode styles live globally in app.css (.fli-page-header) — 39 legacy pages
   rely on them. This file only adds the HERO variant used when Accent is set. */

.fli-page-header--hero[b-kxu9d02uab] {
    position: relative;
    overflow: hidden;
    border-radius: .75rem;
    color: #fff;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.25rem;
    display: block;
    background: var(--fli-hero-gradient, linear-gradient(135deg, #4361ee 0%, #3a0ca3 100%));
    box-shadow: 0 6px 20px -8px var(--fli-hero-shadow, rgba(67, 97, 238, .45));
}

.fli-page-header--hero .fli-page-header-bg[b-kxu9d02uab] {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 110%, rgba(255, 255, 255, .18) 0%, transparent 45%),
        radial-gradient(circle at 85% -10%, rgba(255, 255, 255, .12) 0%, transparent 55%);
    pointer-events: none;
}

.fli-page-header--hero .fli-page-header-content[b-kxu9d02uab] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.fli-page-header--hero .fli-page-header-text[b-kxu9d02uab] {
    min-width: 0;
    flex: 1 1 auto;
}

.fli-page-header--hero .fli-page-header-eyebrow[b-kxu9d02uab] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .9;
    margin-bottom: .25rem;
}

.fli-page-header--hero .fli-page-header-title[b-kxu9d02uab] {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 .5rem 0;
    color: #fff;
    word-break: break-word;
}

.fli-page-header--hero .fli-page-header-chip[b-kxu9d02uab] {
    display: block;
    margin-top: .35rem;
}

/* Skip the chip wrapper entirely when content is empty (e.g. not yet saved) */
.fli-page-header--hero .fli-page-header-chip:empty[b-kxu9d02uab] {
    display: none;
}

.fli-page-header--hero .fli-page-header-chip[b-kxu9d02uab]  a,
.fli-page-header--hero .fli-page-header-chip[b-kxu9d02uab]  .chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .6rem;
    background: rgba(255, 255, 255, .18);
    border-radius: .35rem;
    font-size: .85rem;
    color: #fff;
    text-decoration: none;
    backdrop-filter: blur(4px);
    transition: background .15s ease;
}

.fli-page-header--hero .fli-page-header-chip[b-kxu9d02uab]  a:hover {
    background: rgba(255, 255, 255, .28);
    color: #fff;
}

.fli-page-header--hero .fli-page-header-subtitle[b-kxu9d02uab] {
    font-size: .9rem;
    opacity: .85;
    margin-top: .5rem;
}

.fli-page-header--hero .fli-page-header-actions[b-kxu9d02uab] {
    position: relative;
    z-index: 1;
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.fli-page-header--hero .fli-page-header-actions[b-kxu9d02uab]  .btn-outline-light {
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
}

.fli-page-header--hero .fli-page-header-actions[b-kxu9d02uab]  .btn-outline-light:hover {
    background: rgba(255, 255, 255, .15);
    border-color: #fff;
}

/* ===== Accent palette — mirrors the landing-page theme tokens ===== */
.fli-page-header--hero[data-accent="links"][b-kxu9d02uab]    { --fli-hero-gradient: linear-gradient(135deg, #4361ee 0%, #3a0ca3 100%); --fli-hero-shadow: rgba(67, 97, 238, .45); }
.fli-page-header--hero[data-accent="qrcodes"][b-kxu9d02uab]  { --fli-hero-gradient: linear-gradient(135deg, #7209b7 0%, #3a0ca3 100%); --fli-hero-shadow: rgba(114, 9, 183, .45); }
.fli-page-header--hero[data-accent="pages"][b-kxu9d02uab]    { --fli-hero-gradient: linear-gradient(135deg, #f72585 0%, #b5179e 100%); --fli-hero-shadow: rgba(247, 37, 133, .45); }
.fli-page-header--hero[data-accent="contacts"][b-kxu9d02uab] { --fli-hero-gradient: linear-gradient(135deg, #06d6a0 0%, #0b8a6e 100%); --fli-hero-shadow: rgba(6, 214, 160, .45); }
.fli-page-header--hero[data-accent="mailing"][b-kxu9d02uab]  { --fli-hero-gradient: linear-gradient(135deg, #f77f00 0%, #d62828 100%); --fli-hero-shadow: rgba(247, 127, 0, .45); }
.fli-page-header--hero[data-accent="bookings"][b-kxu9d02uab] { --fli-hero-gradient: linear-gradient(135deg, #4cc9f0 0%, #4361ee 100%); --fli-hero-shadow: rgba(67, 97, 238, .45); }
.fli-page-header--hero[data-accent="payments"][b-kxu9d02uab] { --fli-hero-gradient: linear-gradient(135deg, #7209b7 0%, #560bad 100%); --fli-hero-shadow: rgba(114, 9, 183, .45); }
.fli-page-header--hero[data-accent="shops"][b-kxu9d02uab]    { --fli-hero-gradient: linear-gradient(135deg, #e63946 0%, #a4133c 100%); --fli-hero-shadow: rgba(230, 57, 70, .45); }
.fli-page-header--hero[data-accent="support"][b-kxu9d02uab]  { --fli-hero-gradient: linear-gradient(135deg, #2ec4b6 0%, #264653 100%); --fli-hero-shadow: rgba(46, 196, 182, .45); }
.fli-page-header--hero[data-accent="api"][b-kxu9d02uab]      { --fli-hero-gradient: linear-gradient(135deg, #495057 0%, #212529 100%); --fli-hero-shadow: rgba(33, 37, 41, .45); }
.fli-page-header--hero[data-accent="admin"][b-kxu9d02uab]    { --fli-hero-gradient: linear-gradient(135deg, #dc3545 0%, #8b0000 100%); --fli-hero-shadow: rgba(220, 53, 69, .45); }
.fli-page-header--hero[data-accent="organizer"][b-kxu9d02uab] { --fli-hero-gradient: linear-gradient(135deg, #ffa62b 0%, #d62828 100%); --fli-hero-shadow: rgba(255, 166, 43, .45); }
.fli-page-header--hero[data-accent="info"][b-kxu9d02uab]     { --fli-hero-gradient: linear-gradient(135deg, #0dcaf0 0%, #0d6efd 100%); --fli-hero-shadow: rgba(13, 110, 253, .45); }
.fli-page-header--hero[data-accent="success"][b-kxu9d02uab]  { --fli-hero-gradient: linear-gradient(135deg, #20c997 0%, #198754 100%); --fli-hero-shadow: rgba(25, 135, 84, .45); }
.fli-page-header--hero[data-accent="warning"][b-kxu9d02uab]  { --fli-hero-gradient: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%); --fli-hero-shadow: rgba(253, 126, 20, .45); }
.fli-page-header--hero[data-accent="danger"][b-kxu9d02uab]   { --fli-hero-gradient: linear-gradient(135deg, #e63946 0%, #a4133c 100%); --fli-hero-shadow: rgba(230, 57, 70, .45); }

@media (max-width: 575.98px) {
    .fli-page-header--hero[b-kxu9d02uab] { padding: 1.1rem; }
    .fli-page-header--hero .fli-page-header-title[b-kxu9d02uab] { font-size: 1.25rem; }
    .fli-page-header--hero .fli-page-header-content[b-kxu9d02uab] { flex-direction: column; align-items: stretch; }
    .fli-page-header--hero .fli-page-header-actions[b-kxu9d02uab] { justify-content: flex-end; }
}
/* /Components/Shared/SectionCard.razor.rz.scp.css */
.fli-section-card[b-8ye7hogyml] {
    position: relative;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .6rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
    overflow: hidden;
    transition: box-shadow .15s ease;
}

.fli-section-card:hover[b-8ye7hogyml] {
    box-shadow: 0 4px 16px -8px rgba(0, 0, 0, .1);
}

.fli-section-card.has-accent[b-8ye7hogyml]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--fli-accent, var(--bs-primary));
}

.fli-section-card-header[b-8ye7hogyml] {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    background: var(--bs-tertiary-bg);
}

.fli-section-card-icon[b-8ye7hogyml] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: .45rem;
    background: var(--fli-accent-soft, var(--bs-secondary-bg));
    color: var(--fli-accent, var(--bs-secondary));
    font-size: 1rem;
    flex-shrink: 0;
}

.fli-section-card-title[b-8ye7hogyml] {
    margin: 0;
    font-size: .95rem;
    font-weight: 600;
    color: var(--bs-body-color);
    flex: 1 1 auto;
    min-width: 0;
}

.fli-section-card-actions[b-8ye7hogyml] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    color: var(--bs-secondary-color);
}

/* Ensure header action buttons stay readable on the tertiary-bg strip in both themes.
   btn-outline-secondary reads low-contrast in dark mode — bump its border + text. */
.fli-section-card-actions[b-8ye7hogyml]  .btn-outline-secondary {
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

.fli-section-card-actions[b-8ye7hogyml]  .btn-outline-secondary:hover,
.fli-section-card-actions[b-8ye7hogyml]  .btn-outline-secondary:focus {
    background: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

.fli-section-card-body[b-8ye7hogyml] {
    padding: 1rem;
}

/* ===== Accent palette (shared vocabulary with PageHeader) ===== */
.fli-section-card[data-accent="links"][b-8ye7hogyml]     { --fli-accent: #4361ee; --fli-accent-soft: rgba(67, 97, 238, .12); }
.fli-section-card[data-accent="qrcodes"][b-8ye7hogyml]   { --fli-accent: #7209b7; --fli-accent-soft: rgba(114, 9, 183, .12); }
.fli-section-card[data-accent="pages"][b-8ye7hogyml]     { --fli-accent: #f72585; --fli-accent-soft: rgba(247, 37, 133, .12); }
.fli-section-card[data-accent="contacts"][b-8ye7hogyml]  { --fli-accent: #06d6a0; --fli-accent-soft: rgba(6, 214, 160, .14); }
.fli-section-card[data-accent="mailing"][b-8ye7hogyml]   { --fli-accent: #f77f00; --fli-accent-soft: rgba(247, 127, 0, .14); }
.fli-section-card[data-accent="bookings"][b-8ye7hogyml]  { --fli-accent: #4cc9f0; --fli-accent-soft: rgba(76, 201, 240, .14); }
.fli-section-card[data-accent="payments"][b-8ye7hogyml]  { --fli-accent: #7209b7; --fli-accent-soft: rgba(114, 9, 183, .12); }
.fli-section-card[data-accent="shops"][b-8ye7hogyml]     { --fli-accent: #e63946; --fli-accent-soft: rgba(230, 57, 70, .12); }
.fli-section-card[data-accent="support"][b-8ye7hogyml]   { --fli-accent: #2ec4b6; --fli-accent-soft: rgba(46, 196, 182, .14); }
.fli-section-card[data-accent="api"][b-8ye7hogyml]       { --fli-accent: #495057; --fli-accent-soft: rgba(73, 80, 87, .12); }
.fli-section-card[data-accent="admin"][b-8ye7hogyml]     { --fli-accent: #dc3545; --fli-accent-soft: rgba(220, 53, 69, .12); }
.fli-section-card[data-accent="organizer"][b-8ye7hogyml] { --fli-accent: #ffa62b; --fli-accent-soft: rgba(255, 166, 43, .14); }
.fli-section-card[data-accent="info"][b-8ye7hogyml]      { --fli-accent: #0d6efd; --fli-accent-soft: rgba(13, 110, 253, .12); }
.fli-section-card[data-accent="success"][b-8ye7hogyml]   { --fli-accent: #198754; --fli-accent-soft: rgba(25, 135, 84, .12); }
.fli-section-card[data-accent="warning"][b-8ye7hogyml]   { --fli-accent: #fd7e14; --fli-accent-soft: rgba(253, 126, 20, .14); }
.fli-section-card[data-accent="danger"][b-8ye7hogyml]    { --fli-accent: #dc3545; --fli-accent-soft: rgba(220, 53, 69, .12); }
.fli-section-card[data-accent="neutral"][b-8ye7hogyml]   { --fli-accent: #6c757d; --fli-accent-soft: rgba(108, 117, 125, .14); }
