/* ─── Framework base resets ─── */
h1:focus { outline: none; }

/* Auto-grow all textareas with content instead of an internal scrollbar. */
/* ponytail: field-sizing has no Safari support yet — degrades to fixed-height textareas there, upgrade to a JS-based resize if that becomes an issue. */
textarea {
    field-sizing: content;
    min-height: 2.4em;
}

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

/* ─── Teal accent theme ─── */
:root {
    --accent:        #1D9E75;
    --accent-hover:  #0F6E56;
    --accent-subtle: #E1F5EE;
    --accent-dark:   #085041;
    --bs-body-bg:    #f7f7f5;

    /* Card/panel/input corner radius — one value so every box-shaped element rounds the
       same amount. Pills (999px) and circles (50%) are a shape choice, not this scale. */
    --radius: 12px;

    /* ─── z-index scale ───
       Fixed/sticky chrome stacks in this order (low → high). Always reuse one of
       these variables for anything fixed/sticky at the app-shell level — never a
       bare number — so a new overlay can't silently end up behind/above the wrong
       layer. See CLAUDE.md "z-index rules" for the full explanation. */
    --z-sticky-header: 100;    /* desktop topbar, mobile topbar (sticky top:0) */
    --z-app-nav:       1020;   /* public site header, admin mobile sub-nav */
    --z-bottom-nav:    1030;   /* mobile bottom tab bar (AppLayout) */
    --z-floating-fab:  1035;   /* floating action buttons above the bottom nav, e.g. chat widget */
    --z-sheet-scrim:   1040;   /* dark backdrop behind a bottom sheet */
    --z-bottom-sheet:  1050;   /* bottom-sheet content (e.g. "Ще" nav sheet) */
    --z-modal:         1060;   /* any modal backdrop/box — always above bottom nav, FAB and sheets */
    --z-dropdown:      1070;   /* CustomDropdown popover — must clear modals since dropdowns can open inside one */
    --z-toast:         9999;   /* Alert/Loader — always topmost */
}

/* ─── Global scrollbar — thin, rounded, muted gray; any element can still override
   via its own ::-webkit-scrollbar rule (e.g. .crm-employee-chip-strip) ─── */
html {
    scrollbar-width: thin;
    scrollbar-color: #d3d1c7 transparent;
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: #d3d1c7;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #b5b2a3;
    background-clip: padding-box;
}

/* Inputs/dropdowns must stay white — body-bg is gray and .form-control inherits it, which reads as "disabled" */
.form-control, .form-control:focus {
    background-color: #fff;
}

/* Primary button → teal */
.btn-accent {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
    border-radius: 20px;
    padding: 6px 18px;
    font-size: 13px;
}
.btn-accent:hover, .btn-accent:focus {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #fff;
}

/* EntityHeader PrimaryAction buttons (Зберегти/Редагувати, Скасувати) — on mobile their label
   is hidden (icon only), so they must become true circles instead of keeping the pill's wide
   horizontal padding. */
@media (max-width: 767.98px) {
    .btn-header-icon {
        width: 34px;
        height: 34px;
        padding: 0;
        border-radius: 50%;
        font-size: 15px;
    }
}

/* Sidebar nav active state */
.nav-active {
    color: var(--accent) !important;
    background-color: var(--accent-subtle) !important;
    font-weight: 500 !important;
}

/* Badge */
.badge-teal {
    background-color: var(--accent-subtle);
    color: var(--accent-dark);
    font-weight: 500;
}

/* Tabs */
.crm-tabs {
    display: flex;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 20px;
    gap: 0;
}
.crm-tab {
    padding: 9px 18px;
    font-size: 14px;
    color: #6c757d;
    cursor: pointer;
    border: none;
    background: transparent;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.crm-tab:hover:not(.active) { color: #343a40; }
.crm-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 500;
}
@media (max-width: 767.98px) {
    .crm-tabs {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .crm-tabs::-webkit-scrollbar { display: none; }
    .crm-tab { flex-shrink: 0; }

    /* Header + tabs bleed edge-to-edge on white, standing out from the grey page
       background (.crm-content-v2 has 14px mobile padding — see layout.css) —
       desktop keeps its own spacing untouched, this is mobile-only. */
    .entity-header-mobile {
        background: #fff;
        margin: -14px -14px 0;
        padding: 0 16px 0;
        border-bottom: 1px solid #f0eeeb;
    }
    .crm-tabs-scroll-mobile-bar {
        background: #fff;
        margin: 0 -14px 20px;
        padding: 8px 16px 0;
        border-bottom: 1px solid #f0eeeb;
    }
    .crm-tabs-scroll-mobile-bar .crm-tabs { margin-bottom: 0; }
}

/* Tabs scroll hint (mobile only) — wraps a scrollable tab row (crm-tabs or an
   ad-hoc tab bar) with two edge chevrons that fade in only on the side that
   still has more to scroll to, via .can-scroll-left/.can-scroll-right toggled
   by tabs-scroll.js. Desktop tab rows never overflow, so chevrons stay hidden there. */
.crm-tabs-scroll {
    position: relative;
}
.crm-tabs-chev {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #fff;
    background: rgba(33, 37, 41, .55);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
}
.crm-tabs-chev-left { left: 2px; }
.crm-tabs-chev-right { right: 2px; }
.crm-tabs-scroll.can-scroll-left .crm-tabs-chev-left,
.crm-tabs-scroll.can-scroll-right .crm-tabs-chev-right {
    opacity: 1;
}
@media (max-width: 767.98px) {
    .crm-tabs-chev { display: flex; }
}

/* ─── Per-page "?" link to /faq ─── */
.crm-help-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.crm-help-btn-faq {
    border-color: #e5e7eb;
    background: #fff;
    color: #9ca3af;
    font-size: 15px;
}
.crm-help-btn-faq:hover {
    background: #f7f7f5;
    border-color: #d9d6cf;
    color: #6c757d;
}