/* /Components/Layout/MainLayout.razor.rz.scp.css */

/* One-line footer, pinned to the bottom of the viewport.
   flex: 0 0 auto keeps it its natural height inside the .cc-layout column while .cc-content takes the
   remaining space and scrolls — so the bar never scrolls away, on a short page or a long one. */
.cc-footer[b-ymkv5utcwu] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    /* Right padding reserves the chat bubble's corner. ChatPanel is position:fixed at bottom/right 24px
       and 52px square, so it owns the last ~76px. While the footer scrolled with the page that collision
       was transient; pinned, the bubble would clip the tail of the company name and the SDS logo on
       every single portal page. Reserving the space here keeps the fix inside this layout rather than
       reaching across into another component's positioning. */
    padding: 0.55rem 5.5rem 0.55rem 1.25rem;
    font-size: 0.8rem;
    color: var(--cc-text-muted, #6b7280);
    background: var(--content-bg, #fff);
    border-top: 1px solid var(--cc-border, #e5e7eb);
}

    .cc-footer a[b-ymkv5utcwu] {
        color: inherit;
        text-decoration: none;
    }

    .cc-footer a:hover[b-ymkv5utcwu] {
        text-decoration: underline;
    }

    .cc-footer .cc-footer-sep[b-ymkv5utcwu] {
        margin: 0 0.5rem;
        opacity: 0.6;
    }

    /* Three zones: Stripe's badge left, policy links centred, our copyright hard right. The two ends
       size to their content and the links take what's left, so the bar reads as ours with Stripe
       credited rather than the two sharing a byline. */
    .cc-footer .cc-footer-links[b-ymkv5utcwu] {
        flex: 1 1 auto;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cc-footer .cc-footer-stripe[b-ymkv5utcwu] {
        flex: 0 0 auto;
        line-height: 0;
    }

    .cc-footer .cc-footer-copyright[b-ymkv5utcwu] {
        flex: 0 0 auto;
        text-align: right;
        white-space: nowrap;
    }

    .cc-footer .cc-footer-stripe img[b-ymkv5utcwu] {
        height: 22px;
        width: auto;
        opacity: 0.75;
        transition: opacity 0.15s ease;
    }

    .cc-footer .cc-footer-stripe:hover img[b-ymkv5utcwu] {
        opacity: 1;
    }

    /* SDS logo reads as part of the company name, so it shares the link and sits on the text baseline.
       It trails the name — leading, it broke "© 2026 … Software Development Services" mid-phrase. */
    .cc-footer .cc-footer-company img[b-ymkv5utcwu] {
        height: 16px;
        width: auto;
        opacity: 0.6;
        vertical-align: text-bottom;
        margin-left: 6px;
    }

    .cc-footer .cc-footer-company:hover img[b-ymkv5utcwu] {
        opacity: 0.85;
    }

/* Below ~900px three zones on one line genuinely don't fit, so the row wraps and everything centres
   rather than the copyright being clipped at the right edge. */
@media (max-width: 900px) {
    .cc-footer[b-ymkv5utcwu] {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
        /* Same bubble reservation as desktop — it stays bottom-right at every width, and a wrapped
           footer is taller, so its last row runs further under it. */
        padding: 0.6rem 5rem 0.6rem 1rem;
    }

        .cc-footer .cc-footer-links[b-ymkv5utcwu] {
            flex: 1 0 100%;
            white-space: normal;
        }

        .cc-footer .cc-footer-copyright[b-ymkv5utcwu] {
            text-align: center;
            white-space: normal;
        }
}

#blazor-error-ui[b-ymkv5utcwu] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-ymkv5utcwu] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ── Top nav bar ──────────────────────────────────────────────────── */
.cc-topnav[b-lxcswe8na0] {
    height: 58px;
    background: var(--sidebar-bg);
    display: flex;
    align-items: stretch;
    padding-left: 24px;
    padding-right: 20px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

/* ── Brand ────────────────────────────────────────────────────────── */
.cc-topnav-brand[b-lxcswe8na0] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 24px;
    border-right: 1px solid rgba(255,255,255,.1);
    flex-shrink: 0;
    text-decoration: none;
}

.cc-topnav-name[b-lxcswe8na0] {
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
}

.cc-topnav-sub[b-lxcswe8na0] {
    color: rgba(255,255,255,.45);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .10em;
    font-weight: 600;
}

/* ── Nav items (desktop) ──────────────────────────────────────────── */
.cc-topnav-items[b-lxcswe8na0] {
    display: flex;
    align-items: stretch;
    flex: 1;
    padding-left: 4px;
}

[b-lxcswe8na0] .cc-tn-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 15px;
    height: 100%;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: rgba(255,255,255,.62);
    font-size: 13.5px;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
    transition: color .12s, border-color .12s, background .12s;
}

[b-lxcswe8na0] .cc-tn-item i {
    font-size: 14px;
    flex-shrink: 0;
}

[b-lxcswe8na0] .cc-tn-item:hover {
    color: rgba(255,255,255,.88);
    background: rgba(255,255,255,.07);
}

[b-lxcswe8na0] .cc-tn-item.active {
    color: #fff;
    font-weight: 600;
    border-bottom-color: var(--sidebar-active-bar);
}

[b-lxcswe8na0] .cc-tn-admin {
    opacity: .7;
}

/* Setup link — highlighted amber + pulsing when steps remain */
[b-lxcswe8na0] .cc-tn-setup-alert {
    color: #fbbf24 !important;
    font-weight: 600;
}

[b-lxcswe8na0] .cc-tn-setup-alert:hover {
    color: #fde68a !important;
    background: rgba(251,191,36,.12);
}

[b-lxcswe8na0] .cc-tn-setup-alert i {
    animation: setup-pulse-b-lxcswe8na0 2.4s ease-in-out infinite;
}

@keyframes setup-pulse-b-lxcswe8na0 {
    0%, 100% { opacity: 1; }
    50%       { opacity: .5; }
}

/* Setup link — green when all required steps are complete */
[b-lxcswe8na0] .cc-tn-setup-done {
    color: #4ade80 !important;
    font-weight: 600;
}

[b-lxcswe8na0] .cc-tn-setup-done:hover {
    color: #86efac !important;
    background: rgba(74,222,128,.12);
}

/* ── Right section ────────────────────────────────────────────────── */
.cc-topnav-right[b-lxcswe8na0] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-left: 16px;
    border-left: 1px solid rgba(255,255,255,.1);
    flex-shrink: 0;
}

[b-lxcswe8na0] .cc-tn-icon {
    color: rgba(255,255,255,.55);
    font-size: 17px;
    padding: 6px 7px;
    text-decoration: none;
    transition: color .12s;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    border-radius: var(--radius);
}

[b-lxcswe8na0] .cc-tn-icon:hover,
[b-lxcswe8na0] .cc-tn-icon.active { color: #fff; }

[b-lxcswe8na0] .cc-feedback-top-btn {
    color: rgba(255,255,255,.55);
}
[b-lxcswe8na0] .cc-feedback-top-btn:hover { color: #f4a261; }

.cc-topnav-avatar[b-lxcswe8na0] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    margin-left: 4px;
    flex-shrink: 0;
    cursor: default;
    user-select: none;
}

.cc-hamburger[b-lxcswe8na0] {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: rgba(255,255,255,.7);
    font-size: 20px;
    cursor: pointer;
    padding: 4px 6px;
    margin-left: 4px;
    border-radius: var(--radius);
    transition: color .12s;
}
.cc-hamburger:hover[b-lxcswe8na0] { color: #fff; }

/* ── Mobile drawer ────────────────────────────────────────────────── */
.cc-mobile-drawer[b-lxcswe8na0] {
    display: none;
    position: absolute;
    top: 58px;
    left: 0;
    right: 0;
    z-index: 99;
    background: var(--sidebar-bg);
    border-bottom: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
}

.cc-mobile-drawer.open[b-lxcswe8na0] { display: block; }

[b-lxcswe8na0] .cc-drawer-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 20px;
    color: rgba(255,255,255,.65);
    text-decoration: none;
    font-size: 14px;
    border-left: 3px solid transparent;
    transition: background .1s;
    background: none;
    border-top: none;
    border-right: none;
    border-bottom: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-sans);
}

[b-lxcswe8na0] .cc-drawer-item i { font-size: 15px; flex-shrink: 0; }

[b-lxcswe8na0] .cc-drawer-item:hover {
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.9);
}

[b-lxcswe8na0] .cc-drawer-item.active {
    color: #fff;
    font-weight: 600;
    border-left-color: var(--sidebar-active-bar);
    background: rgba(255,255,255,.1);
}

/* Setup link in mobile drawer — highlighted amber when steps remain */
[b-lxcswe8na0] .cc-drawer-setup-alert {
    color: #fbbf24 !important;
    font-weight: 600;
}

[b-lxcswe8na0] .cc-drawer-setup-alert:hover {
    color: #fde68a !important;
    background: rgba(251,191,36,.08);
}

[b-lxcswe8na0] .cc-drawer-setup-alert i {
    animation: setup-pulse-b-lxcswe8na0 2.4s ease-in-out infinite;
}

/* Setup link in mobile drawer — green when complete */
[b-lxcswe8na0] .cc-drawer-setup-done {
    color: #4ade80 !important;
    font-weight: 600;
}

[b-lxcswe8na0] .cc-drawer-setup-done:hover {
    color: #86efac !important;
    background: rgba(74,222,128,.08);
}

.cc-drawer-divider[b-lxcswe8na0] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255,255,255,.3);
    padding: 12px 20px 4px;
}

.cc-drawer-footer[b-lxcswe8na0] {
    border-top: 1px solid rgba(255,255,255,.1);
    padding: 6px 0;
}

.cc-drawer-settings[b-lxcswe8na0] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    color: rgba(255,255,255,.5);
    font-size: 13.5px;
    text-decoration: none;
    transition: background .1s, color .1s;
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    font-family: var(--font-sans);
}
.cc-drawer-settings:hover[b-lxcswe8na0] { color: rgba(255,255,255,.85); background: rgba(255,255,255,.05); }

.cc-drawer-feedback-btn[b-lxcswe8na0] { }

.cc-drawer-signout:hover[b-lxcswe8na0] { color: #ff8a80 !important; }

/* ── Responsive ───────────────────────────────────────────────────────────────
   ONE breakpoint, at 1024px (#234 D.6).

   There used to be two, and the band between them was the problem: from 640px to 1023px the labels
   were hidden and the row stayed, so a merchant got nine unlabelled glyphs and nothing else. That is
   the TABLET range, and tablets are the primary device class this product is sold for — the title
   attribute added to compensate is a hover affordance, and a finger cannot hover.

   Below 1024px the drawer takes over instead, and every item in it carries its word. A labelled list
   behind one tap beats nine unlabelled icons in front of none. Reducing the item count so the labels
   genuinely fit is the better fix and belongs with the merchant/operator split (#234 D.0); this is
   the one that can ship today.

   Consequence worth stating: the drawer is now the whole navigation on a tablet, not a phone-only
   fallback, so anything missing from it is missing on a real device class. That is why CRM was added
   to the drawer in the same change. */
@media (max-width: 1023px) {
    .cc-topnav-items[b-lxcswe8na0]    { display: none; }
    .cc-hamburger[b-lxcswe8na0]       { display: flex; }
    .cc-topnav-subtitle[b-lxcswe8na0] { display: none; }
    /* ::deep because the gear is a <NavLink>, i.e. a child component: Blazor's scope attribute is on
       this component's own elements, not on the <a> NavLink renders, so the unscoped selector this
       replaced never matched and the gear never hid. It mattered little at 639px; it matters at
       1023px, where the drawer is the navigation and a stray gear beside the hamburger is the
       duplicate route this block exists to remove. Every other NavLink rule in this file is ::deep. */
    [b-lxcswe8na0] .cc-topnav-settings { display: none; }
    /* Guides hides with the gear, and for the same reason: below 1024px the drawer IS the navigation
       and it carries a labelled "Guides" row. Leaving an icon-only book beside the hamburger would be
       a second route to the same page with no word on it - exactly what the gear rule above removed.
       ::deep because NavLink renders the <a>, so the scope attribute is not on it. */
    [b-lxcswe8na0] .cc-topnav-guides { display: none; }
}

/* /Components/Layout/TenantSwitcher.razor.rz.scp.css */
.cc-tenant-switch[b-numjlv6pky] {
    position: relative;
    display: inline-flex;
}

.cc-tenant-btn[b-numjlv6pky] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 220px;
    padding: .35rem .6rem;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e2dbd0);
    border-radius: 8px;
    color: var(--text, #1c2a1e);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .12s, background .12s;
}

.cc-tenant-btn:hover[b-numjlv6pky] { border-color: var(--accent, #d97746); }

.cc-tenant-label[b-numjlv6pky] {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.cc-tenant-caret[b-numjlv6pky] { font-size: .65rem; opacity: .6; }

.cc-tenant-menu[b-numjlv6pky] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 320px;
    max-width: 90vw;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e2dbd0);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
    z-index: 1080;
    overflow: hidden;
}

.cc-tenant-search[b-numjlv6pky] { padding: .5rem; border-bottom: 1px solid var(--border, #e2dbd0); }

.cc-tenant-list[b-numjlv6pky] { max-height: 340px; overflow-y: auto; padding: .25rem; }

.cc-tenant-opt[b-numjlv6pky] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    width: 100%;
    text-align: left;
    padding: .4rem .55rem;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--text, #1c2a1e);
    font-size: .82rem;
    cursor: pointer;
}

.cc-tenant-opt:hover[b-numjlv6pky] { background: var(--hover, #f4efe6); }

.cc-tenant-opt.active[b-numjlv6pky] {
    background: var(--accent, #d97746);
    color: #fff;
}

.cc-tenant-opt.active .cc-tenant-sub[b-numjlv6pky],
.cc-tenant-opt.active .text-muted[b-numjlv6pky] { color: rgba(255, 255, 255, .85) !important; }

.cc-tenant-name[b-numjlv6pky] { font-weight: 600; }
.cc-tenant-sub[b-numjlv6pky] { font-size: .72rem; color: var(--text-secondary, #4f6855); }

.cc-tenant-empty[b-numjlv6pky] {
    padding: .6rem .55rem;
    font-size: .8rem;
    color: var(--text-secondary, #4f6855);
}