/* ─── Application navigation (AppLayout / PublicLayout shell) ─── */
.crm-admin-shell {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
}
.crm-sidebar {
    width: 220px;
    min-width: 220px;
    height: 100vh;
    position: sticky;
    top: 0;
}
.crm-admin-content { min-width: 0; }
.crm-admin-mobile-nav { display: none; }

.crm-public-header {
    height: 64px;
    position: sticky;
    top: 0;
    z-index: var(--z-app-nav);
}
.crm-public-nav-link,
.crm-employee-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6c757d;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 13px;
}
.crm-public-nav-link:hover,
.crm-employee-nav-link:hover { color: var(--accent-dark); background: var(--accent-subtle); }
.crm-public-nav-link.active,
.crm-employee-nav-link.active { color: var(--accent-dark); background: var(--accent-subtle); font-weight: 500; }

.crm-employee-chip-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding-bottom: 2px;
    scrollbar-width: thin;
}

.crm-employee-chip-strip::-webkit-scrollbar {
    height: 6px;
}

.crm-employee-chip-strip::-webkit-scrollbar-thumb {
    background: #d3d1c7;
    border-radius: 999px;
}

@media (max-width: 767.98px) {
    .crm-admin-shell {
        display: flex;
        flex-direction: column;
    }
    .crm-sidebar { display: none !important; }
    .crm-admin-mobile-nav {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 10px 14px 8px;
        position: sticky;
        top: 0;
        z-index: var(--z-app-nav);
    }
    .crm-mobile-nav-link {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 6px 10px;
        border-radius: 999px;
        color: #6c757d;
        text-decoration: none;
        white-space: nowrap;
        font-size: 12px;
    }
    .crm-admin-content { padding: 16px !important; }
    .crm-public-header { height: auto; min-height: 60px; padding: 8px 12px !important; }
    .crm-employee-nav-link {
        padding: 10px;
        min-width: 44px; min-height: 44px;
        justify-content: center;
    }
    .crm-employee-nav-link i { font-size: 18px; }
    .crm-employee-nav-link span { display: none; }
}

/* ─── Platform-admin grant banner (sits above the topbar, in normal flow) ─── */
.crm-grant-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: #b42318;
    color: #fff;
    font-size: 13px;
    flex-shrink: 0;
}
.crm-grant-banner i {
    font-size: 16px;
}
.crm-grant-banner span {
    flex: 1;
}
.crm-grant-banner-btn {
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: transparent;
    color: #fff;
    border-radius: 6px;
    padding: 2px 12px;
    font-size: 12px;
    cursor: pointer;
}
.crm-grant-banner-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* ─── Role-based topbar layout (AppLayout admin shell v2) ─── */
.crm-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
    background: #fff;
    border-bottom: 1px solid #f0eeeb;
    position: sticky;
    top: 0;
    z-index: var(--z-sticky-header);
    height: 52px;
    flex-shrink: 0;
}
.crm-topbar-logo {
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    color: inherit;
}
.crm-mode-sw {
    display: flex;
    gap: 2px;
    background: #f4f4f2;
    border-radius: 8px;
    padding: 3px;
}
.crm-mode-btn {
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: #6c757d;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.4;
}
.crm-mode-btn.active {
    background: #fff;
    color: #111;
    font-weight: 500;
    border: 0.5px solid #ddd;
}
.crm-mode-badge {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 999px;
}
.crm-mode-badge-owner  { background: #EEEDFE; color: #3C3489; border: 0.5px solid #AFA9EC; }
.crm-mode-badge-admin  { background: #E6F1FB; color: #0C447C; border: 0.5px solid #85B7EB; }
.crm-mode-badge-master { background: #E1F5EE; color: #085041; border: 0.5px solid #5DCAA5; }

.crm-body-v2 {
    display: flex;
    overflow: hidden;
    height: calc(100vh - 52px);
}
.crm-sidebar-v2 {
    width: 192px;
    min-width: 192px;
    background: #fff;
    border-right: 1px solid #f0eeeb;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.crm-content-v2 {
    flex: 1;
    min-width: 0;
    overflow: auto;
    padding: 24px;
    background: var(--bs-body-bg, #f7f7f5);
}
.crm-nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 13px;
    text-decoration: none;
    color: #6c757d;
}
.crm-nav-link:hover { background: #f7f7f5; color: #343a40; }
.crm-nav-link.active-nav { background: #E1F5EE; color: #085041; font-weight: 500; }
.crm-nav-section {
    font-size: 10px;
    font-weight: 500;
    color: #9ca3af;
    padding: 10px 16px 4px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.crm-mobile-topbar { display: none; }
.crm-mobile-nav { display: none; }
.crm-bottom-sheet-scrim { display: none; }

/* Mobile-only chat entry point (the FAB is dropped there — the bottom nav owns that corner).
   Matches .notif-bell-btn next to it, which is scoped to NotificationBell and can't be reused. */
.crm-topbar-chat-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #495057;
    font-size: 16px;
    cursor: pointer;
    transition: border-color .15s;
}
.crm-topbar-chat-btn:hover { border-color: #9ca3af; }

@media (max-width: 767.98px) {
    .crm-topbar    { display: none !important; }
    .crm-sidebar-v2 { display: none !important; }
    .crm-body-v2   { height: auto; overflow: visible; }
    .crm-content-v2 { padding: 14px !important; padding-bottom: 76px !important; }
    .crm-mobile-topbar {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 14px 8px;
        background: #fff;
        border-bottom: 1px solid #f0eeeb;
        position: sticky;
        top: 0;
        z-index: var(--z-sticky-header);
    }
    .crm-topbar-chat-btn { display: inline-flex; }

    /* ── Bottom nav + "Ще" menu: one component (MobileBottomNav.razor), one fixed-bottom box.
       The menu (when open) is a normal flex sibling stacked above the icon row instead of a
       separately fixed-positioned overlay, so there's no seam/gap between the two — they read
       as a single panel that grows upward, not two stacked pieces. */
    .crm-mobile-nav {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        background: #fff;
        z-index: var(--z-bottom-sheet);
    }
    .crm-mobile-nav--open {
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -6px 24px rgba(0,0,0,.14);
    }
    .crm-mobile-nav-menu {
        max-height: min(70vh, 560px);
        overflow-y: auto;
        padding: 10px 8px 4px;
    }

    .crm-bottom-nav {
        display: flex;
        flex-shrink: 0;
        border-top: 1px solid #f0eeeb;
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    }
    .crm-bottom-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 6px 2px;
        font-size: 10px;
        color: #6c757d;
        text-decoration: none;
        border: none;
        background: transparent;
        font-family: inherit;
    }
    .crm-bottom-nav-item i { font-size: 19px; }
    .crm-bottom-nav-item.nav-active { color: var(--accent); font-weight: 500; }

    .crm-bottom-sheet-scrim {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.35);
        z-index: var(--z-sheet-scrim);
    }
    .crm-bottom-sheet-handle {
        width: 36px; height: 4px;
        background: #e2dfd6;
        border-radius: 999px;
        margin: 0 auto 10px;
        flex-shrink: 0;
    }
    .crm-bottom-sheet-link {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 8px;
        border-radius: 10px;
        color: #374151;
        font-size: 14px;
        text-decoration: none;
        border: none;
        background: transparent;
        width: 100%;
        text-align: left;
        font-family: inherit;
    }
    .crm-bottom-sheet-link:active { background: #f7f7f5; }
    .crm-bottom-sheet-link i { font-size: 18px; color: var(--accent); width: 22px; text-align: center; }
}

/* ─── Empty state for a user who belongs to a company but holds no role yet ─── */
.crm-no-access {
    max-width: 420px;
    margin: 48px auto;
    text-align: center;
    color: #6b7280;
}
.crm-no-access i {
    font-size: 34px;
    color: #cbd0d4;
    display: block;
    margin-bottom: 12px;
}
.crm-no-access-title { font-size: 15px; font-weight: 600; color: #212529; margin-bottom: 6px; }
.crm-no-access-hint  { font-size: 13px; line-height: 1.6; margin: 0; }