/**
 * CRM mobile fixes.
 * Loaded after the theme CSS to keep mobile overrides readable and isolated.
 */

:root {
    --crm-topbar-height: var(--crm-header-height, 64px);
    --crm-mobile-history-bar-height: 0px;
    --crm-topbar-inset-min: 0px;
    --crm-safe-area-top: 0px;
    --crm-safe-area-left: 0px;
    --crm-safe-area-right: 0px;
    --crm-topbar-stack-height: calc(var(--crm-topbar-height) + var(--crm-mobile-history-bar-height));
}

body[data-bs-theme="light"],
body[data-bs-theme="dark"] {
    --crm-topbar-stack-height: calc(var(--crm-topbar-height) + var(--crm-mobile-history-bar-height));
}

#page-topbar {
    display: flex;
    flex-direction: column;
}

.crm-topbar-safe-area {
    flex: 0 0 auto;
    width: 100%;
    height: 0;
    pointer-events: none;
    background-color: var(--bs-header-bg);
}

/* Язык, тема, почта, уведомления, звук — одна строка, выровненные иконки */
.crm-header-icon-tools {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 0;
}

.crm-header-icon-tools > .dropdown,
.crm-header-icon-tools > div {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.crm-header-icon-tools .header-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--crm-topbar-height);
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
}

.crm-header-icon-tools .header-item .icon-lg:not(.layout-mode-dark):not(.layout-mode-light),
.crm-header-icon-tools .header-item svg:not(.layout-mode-dark):not(.layout-mode-light) {
    display: block;
    flex-shrink: 0;
}

.crm-header-icon-tools .header-item .layout-mode-light {
    display: none;
}

body[data-bs-theme="dark"] .crm-header-icon-tools .header-item .layout-mode-dark {
    display: none;
}

body[data-bs-theme="dark"] .crm-header-icon-tools .header-item .layout-mode-light {
    display: block;
}

.crm-header-icon-tools #header-lang-img {
    display: block;
}

.crm-header-icon-tools #crm-sound-toggle {
    padding-top: 0 !important;
}

.crm-header-icon-tools .crm-sound-toggle-icon {
    width: 20px;
    height: 20px;
}

/* Планшет и мобильный: safe-area на всех страницах (header, контент, правые панели). */
@media (max-width: 991.98px) {
    :root {
        --crm-safe-area-left: env(safe-area-inset-left, 0px);
        --crm-safe-area-right: env(safe-area-inset-right, 0px);
        --crm-safe-area-top: env(safe-area-inset-top, 0px);
    }

    #page-topbar {
        padding-top: env(safe-area-inset-top, 0px);
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }

    body.crm-pwa-standalone #page-topbar {
        padding-top: max(env(safe-area-inset-top, 0px), 28px);
    }

    body.crm-ios.crm-pwa-standalone #page-topbar {
        padding-top: max(env(safe-area-inset-top, 0px), 44px);
    }

    .crm-topbar-safe-area {
        display: none !important;
        height: 0 !important;
    }

    .page-content {
        padding-top: calc(var(--crm-topbar-stack-height) + 1rem) !important;
    }

    .right-bar {
        top: var(--crm-safe-area-top, 0px);
    }

    .rightbar-overlay {
        top: var(--crm-safe-area-top, 0px);
    }

    .offcanvas {
        top: var(--crm-safe-area-top, 0px);
        height: calc(100% - var(--crm-safe-area-top, 0px));
        max-height: calc(100% - var(--crm-safe-area-top, 0px));
    }

    @supports (height: 100dvh) {
        .offcanvas {
            height: calc(100dvh - var(--crm-safe-area-top, 0px));
            max-height: calc(100dvh - var(--crm-safe-area-top, 0px));
        }
    }
}

.crm-mobile-history-bar {
    display: none;
    flex: 0 0 auto;
    width: 100%;
    /* height: var(--crm-mobile-history-bar-height); */
    background: transparent;
    border-bottom: 1px solid var(--bs-border-color);
    padding: 0.3rem max(0.75rem, env(safe-area-inset-right, 0px)) 0.2rem max(0.75rem, env(safe-area-inset-left, 0px));
}

.crm-mobile-history-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    height: 100%;
    width: 100%;
    max-width: 100%;
}

.crm-mobile-history-nav__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1rem;
    height: 2rem;
    padding: 0 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.625rem;
    background: transparent;
    color: var(--bs-header-item-color);
    box-shadow: none !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.crm-mobile-history-nav__btn:not(:disabled):hover,
.crm-mobile-history-nav__btn:not(:disabled):focus {
    color: var(--bs-header-item-color);
    background-color: rgba(var(--bs-primary-rgb, 81, 86, 190), 0.08);
    border-color: rgba(var(--bs-primary-rgb, 81, 86, 190), 0.35);
}

.crm-mobile-history-nav__btn:not(:disabled):active {
    background-color: rgba(var(--bs-primary-rgb, 81, 86, 190), 0.14);
}

body[data-bs-theme="dark"] .crm-mobile-history-nav__btn {
    border-color: rgba(255, 255, 255, 0.18);
}

body[data-bs-theme="dark"] .crm-mobile-history-nav__btn:not(:disabled):hover,
body[data-bs-theme="dark"] .crm-mobile-history-nav__btn:not(:disabled):focus {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.28);
}

body[data-bs-theme="dark"] .crm-mobile-history-nav__btn:not(:disabled):active {
    background-color: rgba(255, 255, 255, 0.1);
}

.crm-mobile-history-nav__btn[hidden] {
    display: none !important;
}

.crm-mobile-history-nav__btn:disabled,
.crm-mobile-history-nav__btn[disabled] {
    opacity: 0.38;
    pointer-events: none;
    border-color: var(--bs-border-color);
    background: transparent;
}

@media (max-width: 767.98px) {
    html.crm-mobile-history-active {
        --crm-mobile-history-bar-height: 35px;
    }

    html.crm-mobile-history-active .crm-mobile-history-bar {
        display: block;
    }
}

@media (max-width: 767.98px) {
    /*
     * iOS Safari zooms the whole page when a focused form control is below 16px.
     * Keep mobile controls at 16px while preserving desktop/tablet density.
     */
    input,
    select,
    textarea,
    .form-control,
    .form-select,
    .form-control-sm,
    .form-select-sm,
    .input-group-sm > .form-control,
    .input-group-sm > .form-select {
        font-size: 16px !important;
    }

    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    #page-topbar,
    .navbar-header {
        max-width: 100vw;
        overflow: visible;
    }

    .navbar-header {
        min-width: 0;
    }

    .navbar-header > .d-flex:first-child {
        min-width: 0;
        flex: 1 1 auto;
    }

    .navbar-header > .d-flex:last-child {
        flex: 0 0 auto;
        min-width: 0;
        gap: 0.25rem;
    }

    .crm-header-left-tools {
        min-width: 0;
        flex: 1 1 auto;
    }

    .crm-header-left-tools .app-search,
    #page-header-search-dropdown,
    #Profile-admina {
        display: none !important;
    }

    .navbar-header .header-item {
        height: var(--crm-topbar-height);
        padding-left: 0.45rem !important;
        padding-right: 0.45rem !important;
    }

    .crm-header-icon-tools .header-item {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 0.35rem !important;
        padding-right: 0.35rem !important;
    }

    .navbar-header .dropdown.d-none.d-sm-inline-block {
        display: inline-block !important;
    }

    .crm-header-icon-tools .dropdown.d-none.d-sm-inline-block {
        display: flex !important;
    }

    #crm-sound-toggle {
        display: inline-flex !important;
        align-items: center;
    }

    #page-header-user-dropdown {
        min-width: auto;
    }
}

@media (max-width: 420px) {
    .navbar-header {
        padding-left: 0 !important;
    }

    #vertical-menu-btn {
        padding-left: 0.35rem !important;
        padding-right: 0.35rem !important;
    }

    .crm-header-attention-btn {
        padding-left: 0.4rem !important;
        padding-right: 0.4rem !important;
    }

    .crm-header-attention-btn__label {
        display: none !important;
    }

    .navbar-header .header-item {
        padding-left: 0.3rem !important;
        padding-right: 0.5rem !important;
    }

    .crm-header-icon-tools .header-item {
        padding-left: 0.6rem !important;
        padding-right: 0.6rem !important;
    }

    #crm-sound-toggle {
        display: inline-flex !important;
    }
}

@media (max-width: 320px) {
    .navbar-header .header-item {
        padding-right: 0.3rem !important;
    }

    .crm-header-icon-tools .header-item {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

@media (max-width: 991.98px) {
    body.sidebar-enable .vertical-menu {
        top: var(--crm-topbar-stack-height);
        bottom: 0;
        width: min(280px, 86vw) !important;
        height: calc(100vh - var(--crm-topbar-stack-height));
        max-height: calc(100vh - var(--crm-topbar-stack-height));
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        overscroll-behavior: contain;
    }

    @supports (height: 100dvh) {
        body.sidebar-enable .vertical-menu {
            height: calc(100dvh - var(--crm-topbar-stack-height));
            max-height: calc(100dvh - var(--crm-topbar-stack-height));
        }
    }

    body.sidebar-enable .vertical-menu [data-simplebar].h-100,
    body.sidebar-enable .vertical-menu .simplebar-wrapper,
    body.sidebar-enable .vertical-menu .simplebar-mask,
    body.sidebar-enable .vertical-menu .simplebar-offset,
    body.sidebar-enable .vertical-menu .simplebar-content-wrapper {
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
    }

    body.sidebar-enable .vertical-menu .simplebar-content-wrapper {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    body.sidebar-enable .vertical-menu .simplebar-content {
        min-height: auto !important;
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px)) !important;
    }

    body.sidebar-enable .vertical-menu #sidebar-menu {
        text-align: left !important;
        padding-bottom: 0.75rem;
    }

    body.sidebar-enable[data-sidebar-size="sm"] .vertical-menu #sidebar-menu .menu-title {
        display: block !important;
    }

    body.sidebar-enable[data-sidebar-size="sm"] .vertical-menu #sidebar-menu .badge {
        display: inline-block !important;
    }

    body.sidebar-enable[data-sidebar-size="sm"] .vertical-menu #sidebar-menu .sidebar-alert {
        display: block !important;
    }

    body.sidebar-enable[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li {
        white-space: normal !important;
    }

    body.sidebar-enable[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li > a {
        width: auto !important;
        padding: 1rem !important;
    }

    body.sidebar-enable[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li > a i,
    body.sidebar-enable[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li > a svg {
        margin-left: 0 !important;
    }

    body.sidebar-enable[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li > a span {
        display: inline !important;
        padding-left: 0 !important;
    }

    body.sidebar-enable[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li > a.has-arrow::after {
        display: block !important;
    }

    body.sidebar-enable[data-sidebar-size="sm"] #sidebar-menu .mm-active > .has-arrow::after {
        transform: rotate(90deg) !important;
    }

    body.sidebar-enable[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li:hover > a {
        width: auto !important;
        background-color: transparent !important;
    }

    body.sidebar-enable[data-sidebar-size="sm"] .vertical-menu #sidebar-menu ul.sub-menu,
    body.sidebar-enable[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li:hover > ul,
    body.sidebar-enable[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul ul li:hover > ul {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        height: auto !important;
        margin-top: 0 !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
    }

    body.sidebar-enable[data-sidebar-size="sm"] .vertical-menu #sidebar-menu ul.sub-menu:not(.mm-show):not(.mm-collapsing) {
        display: none !important;
    }

    body.sidebar-enable[data-sidebar-size="sm"] .vertical-menu #sidebar-menu ul.sub-menu.mm-show,
    body.sidebar-enable[data-sidebar-size="sm"] .vertical-menu #sidebar-menu ul.sub-menu.mm-collapsing {
        display: block !important;
    }

    body.sidebar-enable[data-sidebar-size="sm"] .vertical-menu #sidebar-menu ul.sub-menu li a {
        padding: 0.4rem 1.5rem 0.4rem 1.3rem !important;
    }

    body.sidebar-enable[data-sidebar-size="sm"] .vertical-menu #sidebar-menu ul.sub-menu li ul.sub-menu li a {
        padding-left: 2.4rem !important;
    }
}

/* Таймер открытой смены (ЧЧ:ММ:СС) — на телефоне не меньше 14px */
@media (max-width: 767.98px) {
    .crm-shift-elapsed-timer {
        font-size: 14px !important;
        line-height: 1.2;
        font-variant-numeric: tabular-nums;
    }

    .crm-sidebar-shift-cta .crm-shift-elapsed-timer,
    body[data-sidebar-size="sm"] .crm-sidebar-shift-cta .crm-shift-elapsed-timer,
    body[data-sidebar-size="md"] .crm-sidebar-shift-cta .crm-shift-elapsed-timer {
        font-size: 14px !important;
    }

    .crm-shift-timer-btn .crm-shift-elapsed-timer.small,
    .crm-shift-timer-btn .crm-shift-elapsed-timer.font-monospace.small {
        font-size: 14px !important;
    }
}