@import url('https://fonts.googleapis.com/css2?family=Pinyon%20Script:wght@900&family=Pinyon%20Script&display=swap');

.content-wrapper {
    background: #f0f1f8 !important;
}

.text-color-dashboard-counter-label {
    color: #585353 !important;
}

.text-color-dashboard-counter {
    color: #201A1A !important;
}

.cursor-pointer {
    cursor: pointer;
}

.col-md-2-4 {
    position: relative;
    flex: 1 1 20%;
    padding-right: 10px;
    padding-left: 10px;
}

@media (max-width: 1419px) {
    .col-md-2-4 {
        flex: 1 1 32%;
    }
}

@media (max-width: 991px) {
    .col-md-2-4 {
        flex: 1 1 32%;
    }
}

@media (max-width: 767px) {
    .col-md-2-4 {
        flex: 1 1 48%;
    }
}

@media (max-width: 575px) {
    .col-md-2-4 {
        flex: 1 1 100%;
    }
}

.dropdown-item {
    border-bottom: 1px solid #ebedf2;
}

.custom-dropdown-menu {
    margin: 0rem auto !important;
    top: 80% !important;
    padding: 0.0rem 0 !important;
    min-width: 14rem !important;
}

.chart-menu-option {
    position: absolute;
    width: 90%;
    background-color: grey;
}

.chart-menu:hover {
    cursor: pointer;
}

.chart-menu {
    padding: 3px 3px;
    background-color: #F3F2F2;
    border-radius: 6px;
}

.custom-table td {
    vertical-align: inherit;
    border-bottom: 1px solid #ebedf2 !important;
    border-top: 0px solid #ebedf2 !important;
}

.leave-type {
    padding: 5px 10px !important;
    border-radius: 6px !important;
}

.leave-full {
    background-color: #05bb6c !important;
}

.leave-half {
    background-color: #215679 !important;
}

.custom-dropdown-menu {
    display: none;
    /* Initially hide the dropdown menu */
}

.show-custom-dropdown {
    display: block;
    /* Show the dropdown menu */
}

.progress .progress-bar {
    border-radius: 10px;
}

.progress {
    border-radius: 10px;
}

#fees_details_chart {
    display: flex;
    justify-content: space-around;
}


.zoom-img {
    overflow: hidden;
}

.zoom-img {
    transition: all 0.5s ease;
}

.zoom-img:hover {
    transform: scale(0.9);
    object-fit: fill;
}

.cache-clear {
    margin: auto 0px !important;
}

.fa-table-layout:before {
    content: "\f247";
}

.draggableText {
    border: 1px dashed gray;
    position: absolute;
}
.page-section {
    border: 1px solid lightgray;
    padding: 1rem;
}

.filter-group {
    border: 1px solid lightgray;
    padding-top: 1rem;
    border-radius: 6px;
}

td img {
    width: 60px !important;
    height: 60px !important;
}
.action-column {
    text-align: center;
}
.action-column-dropdown-menu {
    padding: 0 !important;
}

.border-theme {
    border: 1px solid var(--theme-color);
}
.menu-search {
    border-radius: 10px;
}

/* package hover */
.popover-container {
    position: relative;
    display: inline-block;
}

.popover-content {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    padding: 10px;
    z-index: 1;
    transition: opacity 0.3s, visibility 0.3s;
    min-width: 18rem;
}

.popover-container:hover .popover-content {
    visibility: visible;
    opacity: 1;
}

.popover-content h3 {
    margin-top: 0;
}

.popover-content ul {
    padding-left: 20px;
    margin-top: 5px;
    margin-bottom: 0;
}

.popover-trigger {
    border: none;
    cursor: pointer;
    border-radius: 4px;
}
/* end package hover */

@media (min-width: 992px) {
    .sidebar-fixed .sidebar .nav {
        max-height: calc(100vh - 120px) !important;
    }
}

.wizard>.steps>ul>li {
    width: 15% !important;
}

.wizard>.steps a {
    background-color: var(--theme-color);
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* SHARIFA CRM SIDEBAR DESIGN SYSTEM - GitLab Style                                */
/* ═══════════════════════════════════════════════════════════════════════════════ */

:root {
    --sb-navy: #1B3564;
    --sb-navy-dark: #142847;
    --sb-gold: #C9A84C;
    --sb-blue: #2E9CCA;
    --sb-text: rgba(255,255,255,.65);
    --sb-text-hover: rgba(255,255,255,.9);
    --sb-text-active: #fff;
    --sb-text-muted: rgba(255,255,255,.45);
    --sb-divider: rgba(255,255,255,.07);
    --sb-hover-bg: rgba(255,255,255,.07);
    --sb-active-bg: rgba(255,255,255,.11);
    --sb-width-pinned: 260px;
    --sb-width-collapsed: 70px;
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* BASE SIDEBAR STYLES                                                              */
/* ═══════════════════════════════════════════════════════════════════════════════ */

.sidebar {
    background: var(--sb-navy) !important;
    transition: width 0.2s ease !important;
    overflow: visible !important;
    z-index: 1001 !important;
}

.sidebar-offcanvas {
    background: var(--sb-navy) !important;
}

/* Поиск в сайдбаре - скрыт */
.sidebar .sidebar-search {
    display: none !important;
}

.sidebar .sidebar-search .form-control,
.sidebar .sidebar-search .menu-search {
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    color: #fff !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
}

.sidebar .sidebar-search .form-control::placeholder,
.sidebar .sidebar-search .menu-search::placeholder {
    color: rgba(255,255,255,.4) !important;
}

.sidebar .sidebar-search .form-control:focus,
.sidebar .sidebar-search .menu-search:focus {
    background: rgba(255,255,255,.12) !important;
    border-color: var(--sb-gold) !important;
    box-shadow: none !important;
}

/* Навигация */
.sidebar .nav {
    padding: 8px 0 !important;
    overflow: visible !important;
    margin: 0 !important;
}

/* Скроллбар */
.sidebar .nav::-webkit-scrollbar {
    width: 3px;
}

.sidebar .nav::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.1);
    border-radius: 2px;
}

/* Элементы навигации */
.sidebar .nav .nav-item {
    padding: 0 !important;
    position: relative !important;
}

.sidebar .nav .nav-item .nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    margin: 2px 12px 2px 0 !important;
    color: var(--sb-text) !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    transition: all 0.15s ease !important;
    position: relative !important;
    border-radius: 6px !important;
    background: transparent !important;
    white-space: nowrap !important;
}

.sidebar .nav .nav-item .nav-link:hover {
    background: var(--sb-hover-bg) !important;
    color: var(--sb-text-hover) !important;
}

.sidebar .nav .nav-item.active > .nav-link,
.sidebar .nav .nav-item .nav-link.active {
    background: var(--sb-hover-bg) !important;
    color: var(--sb-text-active) !important;
    font-weight: 600 !important;
}

/* Убираем золотую полоску - используем фон как в GitLab */
.sidebar .nav .nav-item .nav-link::before,
.sidebar .nav .nav-item.active > .nav-link::before,
.sidebar .nav .nav-item .nav-link.active::before {
    display: none !important;
    content: none !important;
}

/* Активный родительский элемент (с раскрытым подменю) - жирный текст */
.sidebar .nav .nav-item.active > .nav-link {
    font-weight: 600 !important;
    color: var(--sb-text-active) !important;
}

/* Иконки меню */
.sidebar .nav .nav-item .nav-link i.menu-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    opacity: 0.8;
    color: inherit !important;
    margin: 0 !important;
    transition: font-size 0.2s ease !important;
}

.sidebar .nav .nav-item.active > .nav-link i.menu-icon,
.sidebar .nav .nav-item .nav-link.active i.menu-icon {
    opacity: 1;
}

/* Название меню */
.sidebar .nav .nav-item .nav-link .menu-title {
    color: inherit !important;
    font-size: 13.5px !important;
    flex: 1;
    transition: opacity 0.2s ease !important;
}

/* Стрелка раскрытия */
.sidebar .nav .nav-item .nav-link i.menu-arrow {
    font-size: 10px !important;
    color: rgba(255,255,255,.3) !important;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
    margin-left: auto !important;
}

.sidebar .nav .nav-item .nav-link[aria-expanded="true"] i.menu-arrow {
    transform: rotate(90deg) !important;
}

/* Подменю */
.sidebar .nav .nav-item .collapse,
.sidebar .nav .nav-item .collapsing {
    background: var(--sb-navy) !important;
}

.sidebar .nav .nav-item .collapse .sub-menu,
.sidebar .nav .nav-item .collapsing .sub-menu {
    background: var(--sb-navy) !important;
}

.sidebar .nav .nav-item .sub-menu {
    padding: 4px 0 4px 32px !important;
    background: var(--sb-navy) !important;
}

.sidebar .nav .nav-item .sub-menu li,
.sidebar .nav .nav-item .sub-menu .nav-item {
    background: var(--sb-navy) !important;
}

.sidebar .nav .nav-item .sub-menu .nav-item {
    padding: 0 !important;
}

.sidebar .nav .nav-item .sub-menu .nav-item .nav-link {
    padding: 8px 12px !important;
    margin: 2px 8px 2px 0 !important;
    color: var(--sb-text) !important;
    font-size: 13px !important;
    background: transparent !important;
    border-radius: 6px !important;
}

.sidebar .nav .nav-item .sub-menu .nav-item .nav-link:hover {
    color: var(--sb-text-hover) !important;
    background: var(--sb-hover-bg) !important;
}

.sidebar .nav .nav-item .sub-menu .nav-item .nav-link.active,
.sidebar .nav .nav-item .sub-menu .nav-item.active .nav-link {
    color: var(--sb-text-active) !important;
    font-weight: 600 !important;
    background: var(--sb-hover-bg) !important;
}

/* Убираем золотую полоску для подменю */
.sidebar .nav .nav-item .sub-menu .nav-item .nav-link::before,
.sidebar .nav .nav-item .sub-menu .nav-item .nav-link.active::before {
    display: none !important;
}

/* Разделитель категорий */
.sidebar .nav .nav-item.nav-category {
    padding: 0 16px !important;
    margin: 8px 0 !important;
}

.sidebar .nav .nav-item.nav-category span {
    display: block;
    height: 1px;
    background: var(--sb-divider);
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* FLYOUT SUBMENU - показывается при hover на пункт с подменю                       */
/* ═══════════════════════════════════════════════════════════════════════════════ */

/* Flyout скрыт по умолчанию */
.sidebar .flyout-submenu,
.sidebar .nav .nav-item .flyout-submenu,
.sidebar .nav > .nav-item > .flyout-submenu,
nav.sidebar .flyout-submenu {
    position: absolute !important;
    left: calc(100% + 8px) !important;
    top: 0 !important;
    min-width: 260px !important;
    background: var(--sb-navy) !important;
    border-radius: 8px !important;
    box-shadow: 4px 4px 20px rgba(0,0,0,0.3) !important;
    padding: 8px 0 !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 1050 !important;
    white-space: nowrap !important;
}

/* Невидимый мост между sidebar и flyout для плавного перехода мыши */
.sidebar .flyout-submenu::before {
    content: '' !important;
    position: absolute !important;
    left: -12px !important;
    top: 0 !important;
    width: 12px !important;
    height: 100% !important;
    background: transparent !important;
}

/* Flyout показывается при hover только в collapsed режиме - см. секцию COLLAPSED */

/* Заголовок flyout */
.sidebar .flyout-submenu .flyout-title {
    padding: 10px 16px !important;
    color: var(--sb-text-active) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    border-bottom: 1px solid var(--sb-divider) !important;
    margin-bottom: 4px !important;
}

/* Элементы flyout */
.sidebar .flyout-submenu .flyout-item {
    display: block !important;
    padding: 8px 12px !important;
    margin: 2px 8px !important;
    color: var(--sb-text) !important;
    font-size: 13px !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    border-radius: 6px !important;
}

.sidebar .flyout-submenu .flyout-item:hover {
    background: var(--sb-hover-bg) !important;
    color: var(--sb-text-hover) !important;
}

.sidebar .flyout-submenu .flyout-item.active {
    background: var(--sb-hover-bg) !important;
    color: var(--sb-text-active) !important;
    font-weight: 600 !important;
}

/* Заблокированные flyout пункты */
.sidebar .flyout-submenu .flyout-item.locked {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

.sidebar .flyout-submenu .flyout-item.locked:hover {
    background: transparent !important;
    color: var(--sb-text) !important;
}

.sidebar .flyout-submenu .flyout-item.locked::after {
    content: " \f023" !important;
    font-family: "FontAwesome" !important;
    margin-left: 8px !important;
    font-size: 11px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* DESKTOP: SIDEBAR PINNED (default - 260px, icons + text)                          */
/* ═══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 992px) {
    .sidebar-pinned .sidebar {
        width: var(--sb-width-pinned) !important;
    }

    .sidebar-pinned .main-panel {
        width: calc(100% - var(--sb-width-pinned)) !important;
        margin-left: var(--sb-width-pinned) !important;
        transition: margin-left 0.2s ease, width 0.2s ease !important;
    }

    /* В PINNED режиме: collapse скрыт по умолчанию */
    .sidebar-pinned .sidebar .nav .nav-item .collapse,
    .sidebar-pinned .sidebar .nav .nav-item .collapsing {
        display: none !important;
    }

    /* Но для АКТИВНОГО элемента показываем collapse в sidebar */
    .sidebar-pinned .sidebar .nav .nav-item.active .collapse.show {
        display: block !important;
    }

    /* Стрелка для активных элементов */
    .sidebar-pinned .sidebar .nav .nav-item .nav-link .menu-arrow {
        display: none !important;
    }
    .sidebar-pinned .sidebar .nav .nav-item.active > .nav-link .menu-arrow {
        display: inline-block !important;
        transform: rotate(90deg) !important;
    }

    /* Flyout показывается при hover только для НЕактивных элементов */
    .sidebar-pinned .sidebar .nav .nav-item:not(.active):hover > .flyout-submenu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Для активного элемента flyout скрыт - используем collapse */
    .sidebar-pinned .sidebar .nav .nav-item.active > .flyout-submenu {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* DESKTOP: SIDEBAR COLLAPSED (70px, icons only)                                    */
/* ═══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 992px) {
    .sidebar-collapsed .sidebar {
        width: var(--sb-width-collapsed) !important;
    }

    .sidebar-collapsed .main-panel {
        width: calc(100% - var(--sb-width-collapsed)) !important;
        margin-left: var(--sb-width-collapsed) !important;
        transition: margin-left 0.2s ease, width 0.2s ease !important;
    }

    /* Скрываем текст и стрелку */
    .sidebar-collapsed .sidebar .menu-title,
    .sidebar-collapsed .sidebar .menu-arrow {
        opacity: 0 !important;
        visibility: hidden !important;
        width: 0 !important;
        overflow: hidden !important;
    }

    /* Скрываем поиск */
    .sidebar-collapsed .sidebar .sidebar-search {
        opacity: 0 !important;
        visibility: hidden !important;
        height: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* Центрируем иконки */
    .sidebar-collapsed .sidebar .nav .nav-item .nav-link {
        justify-content: center !important;
        padding: 12px 0 !important;
        margin: 2px 12px 2px 0 !important;
        position: relative !important;
    }

    .sidebar-collapsed .sidebar .nav .nav-item .nav-link i.menu-icon {
        font-size: 18px !important;
        margin: 0 !important;
    }

    /* Активный элемент в collapsed - фон */
    .sidebar-collapsed .sidebar .nav .nav-item.active > .nav-link {
        background: var(--sb-hover-bg) !important;
    }

    /* Скрываем замок в collapsed - он будет виден в flyout */
    .sidebar-collapsed .sidebar .nav .nav-item .nav-link .fa-lock,
    .sidebar-collapsed .sidebar .nav .nav-item .nav-link::after {
        display: none !important;
    }

    /* Скрываем любые дополнительные элементы кроме иконки */
    .sidebar-collapsed .sidebar .nav .nav-item .nav-link > *:not(.menu-icon) {
        display: none !important;
    }
    .sidebar-collapsed .sidebar .nav .nav-item .nav-link > i.menu-icon {
        display: flex !important;
    }

    /* В COLLAPSED режиме: collapse скрыт, flyout при hover */
    .sidebar-collapsed .sidebar .collapse,
    .sidebar-collapsed .sidebar .collapsing,
    .sidebar-collapsed .sidebar .collapse.show {
        display: none !important;
    }

    /* Flyout показывается при hover в collapsed режиме */
    .sidebar-collapsed .sidebar .nav .nav-item:hover > .flyout-submenu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        left: calc(var(--sb-width-collapsed) + 8px) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* MOBILE: SIDEBAR OVERLAY (<992px)                                                 */
/* ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
    /* Reset conflicting styles from custom.css and style.min.css */
    .sidebar,
    .sidebar-fixed .sidebar,
    nav.sidebar,
    nav.sidebar.sidebar-offcanvas,
    .sidebar-offcanvas {
        position: fixed !important;
        left: 0 !important;
        right: auto !important;
        top: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: none !important;
        width: var(--sb-width-pinned) !important;
        max-width: 85vw !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        z-index: 1051 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* Override .sidebar.active and .sidebar-offcanvas.active classes */
    .sidebar.active,
    .sidebar-offcanvas.active {
        right: auto !important;
        transform: translateX(-100%) !important;
    }

    /* Show sidebar when body has sidebar-open */
    .sidebar-open .sidebar,
    .sidebar-open .sidebar-fixed .sidebar,
    .sidebar-open nav.sidebar,
    .sidebar-open nav.sidebar.sidebar-offcanvas,
    .sidebar-open .sidebar-offcanvas,
    .sidebar-open .sidebar.active,
    .sidebar-open .sidebar-offcanvas.active {
        transform: translateX(0) !important;
    }

    /* Main panel takes full width on mobile */
    .main-panel,
    .sidebar-fixed .main-panel {
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* Backdrop */
    .sidebar-backdrop {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0,0,0,0.5) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.3s ease, visibility 0.3s ease !important;
        z-index: 1050 !important;
        pointer-events: none !important;
    }

    .sidebar-open .sidebar-backdrop {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* На мобильных flyout скрыт - используем стандартный collapse */
    .sidebar .flyout-submenu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        left: -9999px !important;
    }

    /* На мобильных collapse работает */
    .sidebar .nav .nav-item .collapse,
    .sidebar .nav .nav-item .collapse.show {
        display: block !important;
        position: relative !important;
        left: auto !important;
        transform: none !important;
    }

    .sidebar .nav .nav-item .collapse:not(.show) {
        display: none !important;
    }

    /* Стрелка видна на мобильных */
    .sidebar .nav .nav-item .nav-link .menu-arrow {
        display: inline-block !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: auto !important;
    }

    /* Текст меню виден на мобильных (override collapsed styles) */
    .sidebar .nav .nav-item .nav-link .menu-title {
        display: inline !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: auto !important;
    }

    /* Nav link не центрируется на мобильных */
    .sidebar .nav .nav-item .nav-link {
        justify-content: flex-start !important;
        padding: 10px 12px !important;
        margin: 2px 12px 2px 0 !important;
    }

    /* Mobile header adjustments */
    .navbar .navbar-brand-wrapper,
    .navbar-brand-wrapper {
        width: auto !important;
        flex: 0 0 auto !important;
        padding: 0 5px !important;
        min-width: auto !important;
    }

    .navbar-brand-wrapper .brand-logo,
    .navbar .navbar-brand-wrapper .brand-logo {
        display: none !important;
    }

    .navbar-brand-wrapper .brand-logo-mini,
    .navbar .navbar-brand-wrapper .brand-logo-mini {
        display: none !important;
    }

    /* Desktop toggle hidden on mobile */
    .navbar-toggler.sidebar-toggler,
    button.sidebar-toggler,
    .navbar .navbar-brand-wrapper .sidebar-toggler {
        display: none !important;
    }

    /* Mobile burger visible */
    .sidebar-toggler-mobile,
    .navbar .sidebar-toggler-mobile {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        order: -1 !important;
    }

    /* Navbar adjustments */
    .navbar .navbar-menu-wrapper,
    .navbar-menu-wrapper {
        width: calc(100% - 50px) !important;
        flex: 1 !important;
    }

    /* Full width navbar */
    .navbar {
        flex-wrap: nowrap !important;
    }

    /* Page body wrapper */
    .page-body-wrapper,
    .navbar.fixed-top + .page-body-wrapper {
        padding-top: 70px !important;
    }

    /* Content wrapper full width */
    .content-wrapper {
        padding: 15px !important;
    }

    /* Prevent body scroll when sidebar is open */
    body.sidebar-open {
        overflow: hidden !important;
    }
}

/* Скрываем backdrop на десктопе */
@media (min-width: 992px) {
    .sidebar-backdrop {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* TOGGLE BUTTONS                                                                    */
/* ═══════════════════════════════════════════════════════════════════════════════ */

/* Mobile burger button */
.sidebar-toggler-mobile {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: rgba(255,255,255,.8) !important;
    font-size: 20px !important;
    padding: 10px 15px !important;
    cursor: pointer !important;
    display: none;
}

.sidebar-toggler-mobile:hover {
    color: #fff !important;
}

.sidebar-toggler-mobile:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Desktop sidebar toggle */
.navbar-toggler.sidebar-toggler {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: rgba(255,255,255,.8) !important;
    font-size: 18px !important;
    padding: 8px 12px !important;
    cursor: pointer !important;
}

.navbar-toggler.sidebar-toggler:hover {
    color: #fff !important;
}

.navbar-toggler.sidebar-toggler:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Mobile: show burger, hide desktop toggle */
@media (max-width: 991px) {
    .sidebar-toggler-mobile {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .navbar-toggler.sidebar-toggler {
        display: none !important;
    }
}

/* Desktop: hide mobile burger */
@media (min-width: 992px) {
    .sidebar-toggler-mobile {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* HEADER ADJUSTMENTS                                                               */
/* ═══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 992px) {
    .navbar-brand-wrapper {
        width: var(--sb-width-pinned) !important;
        transition: width 0.2s ease !important;
    }

    .sidebar-collapsed .navbar-brand-wrapper {
        width: var(--sb-width-collapsed) !important;
    }

    .sidebar-collapsed .navbar-brand-wrapper .brand-logo {
        display: none !important;
    }

    .sidebar-collapsed .navbar-brand-wrapper .brand-logo-mini {
        display: block !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* MOBILE RESPONSIVE COMPONENTS                                                     */
/* ═══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────── */
/* 0. ГЛОБАЛЬНЫЕ МОБИЛЬНЫЕ СТИЛИ                                                   */
/* ─────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
    /* Фон страницы */
    .content-wrapper {
        background: #f8f9fc !important;
        padding: 0 !important;
    }

    /* Page header - белый */
    .page-hd,
    .ds-page-header,
    .profile-header {
        background: #fff !important;
        border-bottom: 1px solid #E2E8F0 !important;
    }

    /* Убираем синие бордеры, делаем серые */
    .ds-card,
    .card,
    .premium-card,
    .course-block,
    .students-card {
        border-color: #E2E8F0 !important;
    }

    /* Inputs и selects - серые бордеры */
    .form-control,
    .inp,
    input[type="text"],
    input[type="search"],
    select {
        border-color: #E2E8F0 !important;
    }

    /* Buttons - серые бордеры для secondary */
    .btn-secondary,
    .ds-btn-secondary,
    .btn-light {
        border-color: #E2E8F0 !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────── */
/* 1. ТАБЛИЦЫ - горизонтальный скролл                                              */
/* ─────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
    /* Обертка для таблицы с горизонтальным скроллом */
    .table-responsive,
    .bootstrap-table .fixed-table-container,
    .fixed-table-body {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Минимальная ширина таблицы для скролла */
    .table-responsive table,
    .bootstrap-table table {
        min-width: 600px !important;
    }

    /* Sticky первая колонка (имя) */
    .table-responsive table th:first-child,
    .table-responsive table td:first-child,
    .bootstrap-table table th:first-child,
    .bootstrap-table table td:first-child {
        position: sticky !important;
        left: 0 !important;
        background: #fff !important;
        z-index: 2 !important;
        box-shadow: 2px 0 5px rgba(0,0,0,0.1) !important;
    }

    /* Sticky для второй колонки тоже (если checkbox) */
    .bootstrap-table table th:nth-child(2),
    .bootstrap-table table td:nth-child(2) {
        position: sticky !important;
        left: 40px !important;
        background: #fff !important;
        z-index: 2 !important;
    }

    /* Уменьшаем padding в ячейках */
    .table td, .table th {
        padding: 8px 10px !important;
        font-size: 13px !important;
    }

    /* Скрываем лишние колонки на совсем маленьких экранах */
    .hide-on-mobile {
        display: none !important;
    }
}

@media (max-width: 576px) {
    .table-responsive table,
    .bootstrap-table table {
        min-width: 500px !important;
    }

    .table td, .table th {
        padding: 6px 8px !important;
        font-size: 12px !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────── */
/* 2. ФИЛЬТРЫ - сворачиваемая панель                                               */
/* ─────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
    /* Контейнер фильтров */
    .filter-group,
    .card .card-body .row:has(select),
    .filter-container {
        display: none;
    }

    .filter-group.show,
    .filter-container.show {
        display: block !important;
    }

    /* Кнопка показа фильтров */
    .mobile-filter-toggle {
        display: flex !important;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
        background: var(--sb-navy);
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 14px;
        cursor: pointer;
        margin-bottom: 15px;
    }

    .mobile-filter-toggle i {
        font-size: 16px;
    }

    .mobile-filter-toggle .filter-count {
        background: var(--sb-gold);
        color: #000;
        padding: 2px 8px;
        border-radius: 10px;
        font-size: 12px;
        font-weight: 600;
    }

    /* Фильтры в одну колонку */
    .filter-group .col-md-2,
    .filter-group .col-md-3,
    .filter-group .col-md-4,
    .filter-container .col-md-2,
    .filter-container .col-md-3,
    .filter-container .col-md-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 10px !important;
    }

    /* Select2 на полную ширину */
    .select2-container {
        width: 100% !important;
    }
}

/* Скрываем кнопку фильтров на десктопе */
@media (min-width: 992px) {
    .mobile-filter-toggle {
        display: none !important;
    }

    .filter-group,
    .filter-container {
        display: block !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────── */
/* 3. ЗАГОЛОВКИ СТРАНИЦ с кнопками                                                 */
/* ─────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
    /* Заголовок страницы */
    .page-header,
    .content-wrapper > .row:first-child {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .page-header h3,
    .page-header h4,
    .content-wrapper h3,
    .content-wrapper h4 {
        font-size: 20px !important;
        margin-bottom: 10px !important;
    }

    /* Кнопки действий */
    .page-header .btn-group,
    .page-header .d-flex,
    .content-wrapper > .row:first-child .btn-group,
    .content-wrapper > .row:first-child .d-flex.gap-2 {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .page-header .btn,
    .content-wrapper > .row:first-child .btn {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }

    /* Breadcrumb */
    .breadcrumb {
        font-size: 12px !important;
        flex-wrap: wrap !important;
    }
}

@media (max-width: 576px) {
    /* На маленьких экранах кнопки в столбик */
    .page-header .btn-group,
    .content-wrapper > .row:first-child .d-flex.gap-2 {
        flex-direction: column !important;
        width: 100% !important;
    }

    .page-header .btn,
    .content-wrapper > .row:first-child .btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────── */
/* 4. КАРТОЧКИ СТАТИСТИКИ                                                          */
/* ─────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
    /* Сетка карточек на мобильных - 2 в ряд */
    .row .col-md-3.col-sm-6,
    .row .col-lg-3.col-md-6,
    .row .col-xl-3.col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* Карточки статистики */
    .card.card-stats,
    .card .card-body.d-flex {
        padding: 12px !important;
    }

    .card .card-body h3,
    .card .card-body .h3 {
        font-size: 22px !important;
    }

    .card .card-body p,
    .card .card-body span {
        font-size: 12px !important;
    }
}

@media (max-width: 576px) {
    /* На маленьких экранах карточки в 1 колонку */
    .row .col-md-3.col-sm-6,
    .row .col-lg-3.col-md-6,
    .row .col-xl-3.col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────── */
/* 5. ФОРМЫ                                                                         */
/* ─────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
    /* Поля формы в одну колонку */
    .form-group .col-md-6,
    .form-group .col-md-4,
    .form-group .col-md-3,
    .row .col-md-6:has(.form-control),
    .row .col-md-4:has(.form-control),
    .row .col-md-3:has(.form-control) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Лейблы */
    .form-group label,
    .col-form-label {
        font-size: 13px !important;
        margin-bottom: 5px !important;
    }

    /* Инпуты */
    .form-control {
        font-size: 14px !important;
        padding: 10px 12px !important;
    }

    /* Кнопки формы */
    .form-group .btn,
    form .btn-primary,
    form .btn-secondary {
        width: 100% !important;
        margin-bottom: 10px !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────── */
/* 6. МОДАЛЬНЫЕ ОКНА                                                               */
/* ─────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
    .modal-dialog {
        margin: 10px !important;
        max-width: calc(100% - 20px) !important;
    }

    .modal-body {
        padding: 15px !important;
    }

    .modal-footer {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .modal-footer .btn {
        width: 100% !important;
        margin: 0 !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────── */
/* 7. ТАБЫ                                                                          */
/* ─────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
    .nav-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-bottom: none !important;
        padding-bottom: 5px !important;
    }

    .nav-tabs .nav-item {
        flex-shrink: 0 !important;
    }

    .nav-tabs .nav-link {
        padding: 8px 16px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────── */
/* 8. БАННЕР ПОДПИСКИ                                                              */
/* ─────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
    .subscription-banner,
    .alert.alert-warning {
        flex-direction: column !important;
        text-align: center !important;
        padding: 12px !important;
        gap: 10px !important;
    }

    .subscription-banner .btn,
    .alert.alert-warning .btn {
        width: 100% !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────── */
/* 9. СПЕЦИФИЧНЫЕ КОМПОНЕНТЫ                                                       */
/* ─────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
    /* Календарь оплат - горизонтальный скролл */
    .payment-calendar,
    .fees-table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .payment-calendar table {
        min-width: 800px !important;
    }

    /* Группы - карточки в одну колонку */
    .group-card {
        margin-bottom: 15px !important;
    }

    /* Профиль студента/группы */
    .profile-header {
        flex-direction: column !important;
        text-align: center !important;
    }

    .profile-header .avatar {
        margin-bottom: 15px !important;
    }

    /* Bootstrap-table toolbar */
    .fixed-table-toolbar {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .fixed-table-toolbar .columns,
    .fixed-table-toolbar .search {
        width: 100% !important;
    }

    .fixed-table-toolbar .search input {
        width: 100% !important;
    }

    /* Pagination */
    .fixed-table-pagination {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .pagination {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .page-item .page-link {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* ГЛОБАЛЬНЫЕ МОБИЛЬНЫЕ СТИЛИ - УБИРАЕМ ОТСТУПЫ НА ВСЕХ СТРАНИЦАХ                  */
/* ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
    /* Убираем синие отступы везде */
    .main-panel {
        padding: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
    }

    .content-wrapper {
        padding: 0 !important;
        background: #f8f9fc !important;
    }

    .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Белые хедеры страниц */
    .page-hd,
    .ds-page-header {
        background: #fff !important;
        border-bottom: 1px solid #E2E8F0 !important;
        margin: 0 !important;
        padding: 12px 16px !important;
    }

    /* Серые бордеры вместо синих */
    .ds-card,
    .card,
    .students-card {
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border-bottom: 1px solid #E2E8F0 !important;
    }

    /* Скрыть scroll-hint подсказку */
    .scroll-hint {
        display: none !important;
    }

    /* Header: кнопки языка и профиля справа */
    .navbar-menu-wrapper {
        flex: 1 !important;
        justify-content: flex-end !important;
    }

    .navbar-nav-right {
        margin-left: auto !important;
        flex-direction: row !important;
    }

    /* Скрыть текст профиля, оставить только аватар */
    .navbar-nav-right .nav-profile-text {
        display: none !important;
    }

    /* Компактные иконки */
    .navbar-nav-right .nav-link {
        padding: 8px 10px !important;
    }
}