/* i24 CRM shell. Content views keep their own styles and fixed modal layers. */
.i24-crm-app {
    --i24-crm-sidebar-width: 228px;
    --i24-crm-alert-height: 0px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    background: #f7f9fc;
    color: #243c4a;
    font-family: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.i24-crm-app.i24-crm-has-alert { --i24-crm-alert-height: 30px; }
.i24-crm-api-alert { position: sticky; top: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 30px; padding: 6px 12px; background: #d95757; color: #fff; font-size: 10px; font-weight: 650; line-height: 1.4; text-align: center; }
.i24-crm-shell { display: flex; flex: 1 0 auto; width: 100%; min-height: calc(100dvh - var(--i24-crm-alert-height)); }
.i24-crm-shell.i24-crm-is-collapsed { --i24-crm-sidebar-width: 72px; }
.i24-crm-sidebar, .i24-crm-sidebar *, .i24-crm-topbar, .i24-crm-topbar * { box-sizing: border-box; }
.i24-crm-sidebar {
    position: fixed; top: var(--i24-crm-alert-height); left: 0; z-index: 30;
    display: flex; flex-direction: column;
    width: var(--i24-crm-sidebar-width); height: calc(100vh - var(--i24-crm-alert-height)); height: calc(100dvh - var(--i24-crm-alert-height));
    padding: 0 12px; border-right: 1px solid #264451; background: linear-gradient(170deg, #0e2636 0%, #112f40 56%, #153b48 100%);
    transition: width .18s ease; outline: none;
}
.i24-crm-drawer-header { display: none; }
.i24-crm-navigation { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 18px 0 12px; scrollbar-width: thin; scrollbar-color: #446270 transparent; }
.i24-crm-navigation-group { margin: 0 0 15px; }
.i24-crm-navigation-group:last-child { margin-bottom: 0; }
.i24-crm-group-title { margin: 0 11px 7px; color: #91adbd; font-size: 10.5px; font-weight: 450; line-height: 1.4; letter-spacing: .35px; }
.i24-crm-nav-item { position: relative; display: flex; align-items: center; gap: 9px; width: 100%; min-height: 38px; margin: 2px 0; padding: 5px 8px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #c6d8e1; font: inherit; font-size: 13px; font-weight: 450; line-height: 1.4; text-align: left; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.i24-crm-nav-item > i { display: flex; align-items: center; justify-content: center; flex: 0 0 25px; width: 25px; height: 25px; border: 1px solid #597e8f26; border-radius: 6px; background: #658fa51a; color: #b2cedb; font-size: 12px; text-align: center; }
.i24-crm-nav-item > .fa-wand-magic-sparkles { background: #8b67f820; border-color: #8f72da30; color: #c9b8ff; }
.i24-crm-nav-item > .fa-layer-group { background: #4288ff20; border-color: #6b96d830; color: #abc9ff; }
.i24-crm-nav-item > .fa-list-check { background: #32ac8620; border-color: #65bfa330; color: #8ee2bd; }
.i24-crm-nav-item > .fa-table-columns { background: #da965822; border-color: #d8a26830; color: #ffc48f; }
.i24-crm-nav-item > .fa-address-book { background: #b7904722; border-color: #cbb16e30; color: #f6d796; }
.i24-crm-nav-item > .fa-boxes-stacked { background: #4aa2b122; border-color: #6ab8bf30; color: #a5dedc; }
.i24-crm-nav-item > .fa-tags { background: #b7608120; border-color: #bc829930; color: #f1b3cb; }
.i24-crm-nav-item > .fa-users-gear { background: #9174c123; border-color: #ab92cf30; color: #d1bcff; }
.i24-crm-nav-item > .fa-shield-halved { background: #5f9bc320; border-color: #7aaed330; color: #a7d5f4; }
.i24-crm-nav-item > .fa-book-open-reader { background: #749da820; border-color: #91b6c130; color: #b5d7e0; }
.i24-crm-nav-label { min-width: 0; white-space: nowrap; }
.i24-crm-nav-item:hover { background: #ffffff0b; color: #f0f9fc; }
.i24-crm-nav-item.i24-crm-nav-item-active { border-color: #358692; background: linear-gradient(105deg, #166c79, #205b6c); color: #f0feff; font-weight: 550; box-shadow: 0 3px 10px #071e2921, inset 0 1px 0 #b5f4f815; }
.i24-crm-nav-item.i24-crm-nav-item-active > i { border-color: #a7edef30; background: #c3fbff14; color: #c5f7fa; }
.i24-crm-nav-item.i24-crm-nav-item-active::before { content: ''; position: absolute; top: 10px; bottom: 10px; left: -13px; width: 3px; border-radius: 0 2px 2px 0; background: #73d7dc; }
.i24-crm-nav-badge { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 19px; height: 19px; margin-left: auto; padding: 0 5px; border-radius: 5px; background: #f6c3ac; color: #793f2c; font-size: 10px; font-weight: 650; line-height: 1; }
.i24-crm-sidebar-bottom { flex: 0 0 auto; padding: 10px 0 12px; border-top: 1px solid #84b3c126; }
.i24-crm-help { min-height: 40px; margin: 0 0 9px; padding: 6px 8px; color: #c4dce4; font-size: 12px; }
.i24-crm-help > i { border-color: transparent; background: #8dc3ce12; color: #a8d4de; font-size: 12px; }
.i24-crm-help::after { content: '\203A'; margin-left: auto; color: #9abcc9; font-size: 20px; line-height: 1; }
.i24-crm-user { margin: 0; padding: 11px; border: 1px solid #42708073; border-radius: 12px; background: linear-gradient(135deg, #254c5c, #193c4d); box-shadow: 0 4px 14px #071e2924, inset 0 1px 0 #c8eff508; }
.i24-crm-user-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.i24-crm-user-avatar { display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; flex: 0 0 35px; border: 1px solid #80cfdb59; border-radius: 10px; background: linear-gradient(135deg, #367d8b, #285667); color: #f0fcff; font-size: 13px; font-weight: 600; box-shadow: inset 0 1px 0 #cceef717; }
.i24-crm-user-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.i24-crm-user-name { display: block; overflow: hidden; color: #f2f9fc; font-size: 12.5px; font-weight: 600; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.i24-crm-user-role { display: block; overflow: hidden; color: #b3cbd5; font-size: 10.5px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.i24-crm-logout { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 33px; margin-top: 11px; padding: 7px 9px; border: 1px solid #73909b59; border-radius: 7px; background: #102d3a66; color: #f1d6c9; font: inherit; font-size: 11px; font-weight: 500; line-height: 1.4; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.i24-crm-logout > i { font-size: 11px; color: #efb8a0; }
.i24-crm-logout:hover { border-color: #cf998480; background: #5a4149; color: #fff0e8; }
.i24-crm-workspace { display: flex; flex: 1 1 auto; flex-direction: column; width: calc(100% - var(--i24-crm-sidebar-width)); min-width: 0; margin-left: var(--i24-crm-sidebar-width); overflow: visible; isolation: auto; z-index: auto; transform: none; transition: margin-left .18s ease, width .18s ease; }
.i24-crm-topbar { position: sticky; top: var(--i24-crm-alert-height); z-index: 20; display: flex; align-items: center; gap: 14px; flex: 0 0 64px; min-height: 64px; padding: 10px 26px; border-bottom: 1px solid #dfe8ee; background: linear-gradient(90deg, #fffffffa, #f9fcfdfa); backdrop-filter: blur(10px); }
.i24-crm-menu-toggle, .i24-crm-drawer-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 32px; padding: 0; border: 1px solid #dce7ed; border-radius: 7px; background: #f2f7fa; color: #547586; font: inherit; font-size: 11px; cursor: pointer; }
.i24-crm-menu-toggle:hover, .i24-crm-drawer-close:hover { color: #087e8b; border-color: #cfe3e9; background: #f5fafb; }
.i24-crm-section-heading { display: flex; align-items: center; gap: 11px; min-width: 0; }
.i24-crm-section-breadcrumb { flex: 0 0 auto; padding-right: 12px; border-right: 1px solid #e3ebef; color: #607481; font-size: 10.5px; line-height: 1.5; }
.i24-crm-section-title { margin: 0; color: #2d4a5a; font-size: 14px; font-weight: 600; letter-spacing: -.2px; line-height: 1.4; }
.i24-crm-topbar-role { margin-left: auto; padding: 5px 8px; border: 1px solid #e0e9ee; border-radius: 5px; background: #f3f7f9; color: #587080; font-size: 10px; line-height: 1.4; }
.i24-crm-main { position: relative; z-index: auto; isolation: auto; transform: none; display: flex; flex: 1 1 auto; flex-direction: column; width: 100%; min-width: 0; overflow: visible; }
.i24-crm-drawer-backdrop { display: none; }
.i24-crm-drawer-close { display: none; border-color: #456472; background: #1b4052; color: #d4e7ef; }
.i24-crm-sidebar button:focus-visible { outline: 2px solid #8be3e8; outline-offset: -3px; }
.i24-crm-menu-toggle:focus-visible { outline: 2px solid #248b9e; outline-offset: 3px; }
.i24-crm-view-enter-active { transition: opacity .16s ease; }
.i24-crm-view-leave-active { transition: opacity .12s ease; }
.i24-crm-view-enter-from, .i24-crm-view-leave-to { opacity: 0; }
@media (min-width: 901px) {
    .i24-crm-is-collapsed .i24-crm-sidebar { padding: 0 10px; }
    .i24-crm-is-collapsed .i24-crm-group-title { height: 1px; overflow: hidden; margin: 0 9px 11px; background: #42617088; font-size: 0; }
    .i24-crm-is-collapsed .i24-crm-navigation-group:first-child .i24-crm-group-title { visibility: hidden; }
    .i24-crm-is-collapsed .i24-crm-navigation-group { margin-bottom: 14px; }
    .i24-crm-is-collapsed .i24-crm-nav-item { justify-content: center; min-height: 39px; padding: 6px 8px; }
    .i24-crm-is-collapsed .i24-crm-nav-item > i { font-size: 13px; }
    .i24-crm-is-collapsed .i24-crm-nav-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip: rect(0, 0, 0, 0); overflow: hidden; white-space: nowrap; }
    .i24-crm-is-collapsed .i24-crm-nav-item-active::before { left: -11px; }
    .i24-crm-is-collapsed .i24-crm-nav-badge { position: absolute; top: 2px; right: 1px; min-width: 15px; height: 15px; padding: 0 3px; border: 1px solid #153644; border-radius: 5px; font-size: 8px; }
    .i24-crm-is-collapsed .i24-crm-help::after { display: none; }
    .i24-crm-is-collapsed .i24-crm-user { margin: 0; padding: 9px 0; border-color: transparent; background: #284d5b66; box-shadow: none; }
    .i24-crm-is-collapsed .i24-crm-user-identity { justify-content: center; }
    .i24-crm-is-collapsed .i24-crm-user-copy { display: none; }
    .i24-crm-is-collapsed .i24-crm-logout { justify-content: center; width: 34px; min-height: 32px; height: 32px; margin: 9px auto 0; padding: 6px; }
    .i24-crm-is-collapsed .i24-crm-logout > span { display: none; }
}
@media (max-width: 1100px) {
    .i24-crm-topbar { padding-left: 20px; padding-right: 20px; }
    .i24-crm-topbar-role { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 900px) {
    .i24-crm-shell, .i24-crm-shell.i24-crm-is-collapsed { --i24-crm-sidebar-width: 228px; }
    .i24-crm-workspace { width: 100%; margin-left: 0; transition: none; }
    .i24-crm-sidebar { top: 0; z-index: 80; width: min(276px, calc(100vw - 50px)); height: 100vh; height: 100dvh; padding-left: 14px; padding-right: 14px; border-right: 0; box-shadow: 12px 0 48px #071c364a; transform: translateX(-105%); visibility: hidden; pointer-events: none; transition: transform .2s ease, visibility .2s; }
    .i24-crm-drawer-header { display: flex; align-items: center; justify-content: flex-end; flex: 0 0 48px; min-height: 48px; padding: 6px 0; }
    .i24-crm-navigation { padding-top: 0; }
    .i24-crm-menu-is-open .i24-crm-sidebar { transform: translateX(0); visibility: visible; pointer-events: auto; transition-property: transform; }
    .i24-crm-drawer-close { display: inline-flex; width: 29px; height: 29px; flex-basis: 29px; }
    .i24-crm-nav-item { min-height: 43px; font-size: 13px; }
    .i24-crm-nav-item-active::before { left: -15px; }
    .i24-crm-user { padding: 12px; }
    .i24-crm-user-name { font-size: 13px; }
    .i24-crm-user-role { font-size: 11px; }
    .i24-crm-logout { min-height: 36px; font-size: 12px; }
    .i24-crm-drawer-backdrop { position: fixed; inset: 0; z-index: 70; display: block; background: #10273780; }
    .i24-crm-topbar { z-index: 20; min-height: 60px; flex-basis: 60px; padding: 10px 16px; gap: 12px; backdrop-filter: none; background: #fff; }
    .i24-crm-menu-toggle { width: 34px; height: 34px; flex-basis: 34px; font-size: 13px; }
    .i24-crm-section-heading { gap: 9px; }
    .i24-crm-section-title { font-size: 13px; }
    .i24-crm-topbar-role { font-size: 9px; max-width: 135px; }
}
@media (max-width: 520px) {
    .i24-crm-section-breadcrumb, .i24-crm-topbar-role { display: none; }
    .i24-crm-topbar { min-height: 56px; flex-basis: 56px; padding: 10px 12px; gap: 11px; }
    .i24-crm-section-title { font-size: 13px; }
    .i24-crm-api-alert { font-size: 9px; }
}
@media (max-height: 650px) and (min-width: 901px) {
    .i24-crm-navigation-group { margin-bottom: 13px; }
    .i24-crm-nav-item { min-height: 35px; padding-top: 4px; padding-bottom: 4px; }
    .i24-crm-is-collapsed .i24-crm-navigation-group { margin-bottom: 12px; }
    .i24-crm-is-collapsed .i24-crm-nav-item { min-height: 35px; padding-top: 4px; padding-bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) {
    .i24-crm-sidebar, .i24-crm-workspace, .i24-crm-nav-item, .i24-crm-logout, .i24-crm-view-enter-active, .i24-crm-view-leave-active { transition: none; }
}