/* ===== UI alignment fixes v2.2 — templates / filters / sidebar / empty states / clients ===== */
/* Должен подключаться ПОСЛЕ style.css, filters-v2, filter-panel */

/* -------------------------------------------------------------------------- */
/* Section headers: одна линия title + actions                                */
/* -------------------------------------------------------------------------- */
.content-section > .section-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 0.75rem 1rem !important;
    margin-bottom: 1rem !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.content-section > .section-header h2 {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin: 0 !important;
    line-height: 1.25 !important;
}

.content-section > .section-header .section-actions,
.content-section > .section-header .header-actions {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    margin: 0 0 0 auto !important;
}

.content-section > .section-header .section-actions .btn,
.content-section > .section-header .header-actions .btn,
.content-section > .section-header > .btn {
    margin: 0 !important;
    flex-shrink: 0 !important;
}

/* -------------------------------------------------------------------------- */
/* Filters: компактно слева, без «распорки» space-between                    */
/* -------------------------------------------------------------------------- */
#templates-section .filters-container.modern-filters,
#clients-section .filters-container.modern-filters,
#users-section .filters-container.modern-filters,
#organizations-section .filters-container.modern-filters,
#vacations-section .filters-container.modern-filters {
    min-height: 0 !important;
    height: auto !important;
    padding: 0.875rem 1rem !important;
    margin-bottom: 1rem !important;
    display: block !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

#templates-section .filters-container .filters-row,
#clients-section .filters-container .filters-row,
#users-section .filters-container .filters-row,
#organizations-section .filters-container .filters-row,
#vacations-section .filters-container .filters-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    gap: 0.75rem 1rem !important;
    width: 100% !important;
    margin: 0 !important;
}

#templates-section .filters-container .filter-group,
#clients-section .filters-container .filter-group,
#users-section .filters-container .filter-group,
#organizations-section .filters-container .filter-group,
#vacations-section .filters-container .filter-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.35rem !important;
    margin: 0 !important;
    flex: 0 1 220px !important;
    min-width: 160px !important;
    max-width: 320px !important;
}

#templates-section .filters-container .filter-group.filter-search,
#clients-section .filters-container .filter-group.filter-search {
    flex: 1 1 280px !important;
    max-width: 480px !important;
}

/* Заказчики: фильтры плотно слева, без «резинки» на всю ширину */
#clients-section .filters-container.modern-filters .filters-row {
    justify-content: flex-start !important;
    gap: 0.75rem 1rem !important;
}

#clients-section .filters-container .filter-group {
    flex: 0 1 240px !important;
    max-width: 280px !important;
}

#clients-section .filters-container .filter-group.filter-search {
    flex: 1 1 320px !important;
    max-width: 420px !important;
}

#clients-section .clients-subtabs {
    display: flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    margin: 0 0 1rem !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--border-color, #e5e7eb) !important;
}

#clients-section .clients-subtabs .tab-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    margin: 0 !important;
    padding: 0.65rem 0.9rem !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text-secondary, #6b7280) !important;
    font-size: 0.9rem !important;
    cursor: pointer !important;
}

#clients-section .clients-subtabs .tab-button.active {
    color: var(--primary-color, #4f46e5) !important;
    border-bottom-color: var(--primary-color, #4f46e5) !important;
    font-weight: 600 !important;
}

#clients-section .clients-tab-panel {
    width: 100% !important;
    min-width: 0 !important;
}

#clients-section .table-container {
    width: 100% !important;
    box-sizing: border-box !important;
}

#clients-section #companies-table-container:has(> .empty-state),
#clients-section #clients-table-container:has(> .empty-state) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 280px !important;
}

#templates-section .filters-container .filter-group label,
#clients-section .filters-container .filter-group label,
#users-section .filters-container .filter-group label,
#organizations-section .filters-container .filter-group label,
#vacations-section .filters-container .filter-group label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    margin: 0 !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: var(--text-secondary, #6b7280) !important;
    line-height: 1.2 !important;
}

#templates-section .filters-container .filter-group input,
#templates-section .filters-container .filter-group select,
#clients-section .filters-container .filter-group input,
#clients-section .filters-container .filter-group select,
#users-section .filters-container .filter-group input,
#users-section .filters-container .filter-group select,
#organizations-section .filters-container .filter-group input,
#organizations-section .filters-container .filter-group select,
#vacations-section .filters-container .filter-group input,
#vacations-section .filters-container .filter-group select {
    width: 100% !important;
    min-height: 2.5rem !important;
    height: 2.5rem !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* -------------------------------------------------------------------------- */
/* Templates cards                                                            */
/* -------------------------------------------------------------------------- */
#templates-section .templates-library {
    min-height: 280px !important;
    padding: 1rem !important;
    box-sizing: border-box !important;
}

#templates-section .templates-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 1rem !important;
    align-items: stretch !important;
    width: 100% !important;
}

#templates-section .template-card {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    padding: 1.125rem !important;
    gap: 0.75rem !important;
}

#templates-section .template-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
}

#templates-section .template-header h3 {
    margin: 0 !important;
    min-width: 0 !important;
    word-break: break-word !important;
}

#templates-section .template-description {
    flex: 1 1 auto !important;
    margin: 0 !important;
}

#templates-section .template-info {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.75rem 1rem !important;
}

#templates-section .template-info span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
}

#templates-section .template-info i {
    width: 1rem !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}

#templates-section .template-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    width: 100% !important;
    margin-top: auto !important;
    padding-top: 0.75rem !important;
}

#templates-section .template-actions .btn {
    flex: 1 1 calc(50% - 0.25rem) !important;
    min-width: 8.5rem !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    box-sizing: border-box !important;
}

/* -------------------------------------------------------------------------- */
/* Empty states — по центру; НЕ трогать display у скрытых .tab-content        */
/* -------------------------------------------------------------------------- */
#meetings-section .section-content,
#training-section .section-content,
#reviews-section .section-content {
    display: flex !important;
    flex-direction: column !important;
    min-height: 360px !important;
}

#meetings-list,
#trainings-list,
#training-list,
.meetings-list,
.trainings-list {
    width: 100% !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 280px !important;
}

/* Только активная вкладка получает min-height — иначе «вспыхивают» все empty state */
#reviews-section .tab-content.active,
#training-section .tab-content.active {
    min-height: 320px !important;
}

#meetings-list:has(> .empty-state),
#trainings-list:has(> .empty-state),
#training-list:has(> .empty-state),
.meetings-list:has(> .empty-state),
.trainings-list:has(> .empty-state),
#reviews-section .tab-content.active .reviews-list:has(> .empty-state),
#training-section .tab-content.active .trainings-list:has(> .empty-state),
#clients-table-container:has(> .empty-state),
#templates-section .templates-library:has(> .empty-state) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    min-height: 280px !important;
}

#meetings-section .empty-state,
#training-section .empty-state,
#reviews-section .empty-state,
#clients-section .empty-state,
#templates-section .empty-state,
#meetings-list .empty-state,
#trainings-list .empty-state {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 28rem !important;
    margin: 0 auto !important;
    padding: 2.5rem 1.25rem !important;
    min-height: 240px !important;
    max-height: none !important;
    box-sizing: border-box !important;
}

#meetings-section .empty-state i,
#training-section .empty-state i,
#reviews-section .empty-state i,
#clients-section .empty-state i,
#templates-section .empty-state i {
    display: block !important;
    margin: 0 0 0.75rem !important;
}

#meetings-section .empty-state h3,
#training-section .empty-state h3,
#reviews-section .empty-state h3,
#clients-section .empty-state h3,
#meetings-section .empty-state p,
#training-section .empty-state p,
#reviews-section .empty-state p,
#clients-section .empty-state p {
    margin-left: auto !important;
    margin-right: auto !important;
}

#meetings-section .empty-state .btn,
#training-section .empty-state .btn,
#reviews-section .empty-state .btn,
#clients-section .empty-state .btn {
    margin-top: 1rem !important;
}

/* -------------------------------------------------------------------------- */
/* План исполнения — шапка + основная сетка фильтров                          */
/* -------------------------------------------------------------------------- */
#execution-plan-section > .section-header {
    align-items: center !important;
}

#execution-plan-section > .section-header .header-actions {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.625rem 0.75rem !important;
}

#execution-plan-section > .section-header .counter,
#execution-plan-section #execution-counter {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.25 !important;
    margin: 0 !important;
}

#execution-plan-section .view-toggle-group {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

#execution-plan-filters .filter-panel__header-inner {
    align-items: center !important;
}

#execution-plan-filters .filter-panel__actions {
    align-items: center !important;
    margin-left: auto !important;
}

#execution-plan-filters .filter-panel__primary {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.75rem 1rem !important;
    align-items: start !important;
    padding: 0.875rem 1rem !important;
}

#execution-plan-filters .filter-group--search {
    grid-column: 1 / -1 !important;
}

#execution-plan-filters .filter-group--period {
    grid-column: auto !important;
}

#execution-plan-filters .filter-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.35rem !important;
    margin: 0 !important;
    min-width: 0 !important;
}

#execution-plan-filters .filter-group__label {
    margin: 0 !important;
    min-height: 1.125rem !important;
    line-height: 1.125rem !important;
}

#execution-plan-filters .filter-group__hint {
    display: none !important;
}

#execution-plan-filters .filter-group__control,
#execution-plan-filters .filters-v2__input:not([type="checkbox"]):not([type="radio"]) {
    width: 100% !important;
    box-sizing: border-box !important;
}

#execution-plan-filters .filter-group select[multiple],
#execution-plan-filters .filter-group select[multiple].filters-v2__input {
    min-height: 2.5rem !important;
    height: 2.5rem !important;
    max-height: 2.5rem !important;
    overflow: auto !important;
}

/* Период: без «голубой коробки», ровная колонка тип → даты */
#execution-plan-filters .filter-period-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#execution-plan-filters .filter-period-type {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
    min-width: 0 !important;
}

#execution-plan-filters .filter-period-type-label {
    display: none !important;
}

#execution-plan-filters .filter-period-range {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 0.35rem !important;
    width: 100% !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

#execution-plan-filters .filter-period-range .filter-group__control,
#execution-plan-filters .filter-period-range input[type="date"] {
    width: 100% !important;
    min-width: 0 !important;
}

#execution-plan-filters .filter-period-separator {
    flex-shrink: 0 !important;
    line-height: 1 !important;
}

#execution-plan-filters .filter-panel__advanced-wrap {
    margin-top: 0.75rem !important;
}

@media (max-width: 1023px) {
    #execution-plan-filters .filter-panel__primary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767px) {
    #execution-plan-filters .filter-panel__primary {
        grid-template-columns: 1fr !important;
    }

    #execution-plan-filters .filter-period-range {
        grid-template-columns: 1fr !important;
    }

    #execution-plan-filters .filter-period-separator {
        display: none !important;
    }
}

/* -------------------------------------------------------------------------- */
/* Sidebar: ровная колонка иконок, без двойного акцента active               */
/* -------------------------------------------------------------------------- */
.sidebar .nav-link,
.sidebar .nav-group-header {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    min-height: 2rem !important;
    box-sizing: border-box !important;
}

.sidebar .nav-link > i,
.sidebar .nav-group-header > i:first-child {
    width: 1.125rem !important;
    min-width: 1.125rem !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    font-size: 0.875rem !important;
}

.sidebar .nav-link span,
.sidebar .nav-group-header span:not(.nav-group-arrow) {
    line-height: 1.25 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Подпункты: одна линия старта текста/иконок */
.sidebar .nav-group-items .nav-link {
    padding-left: 0.875rem !important;
    margin-left: 0.5rem !important;
    border-left: 2px solid transparent !important;
}

/* Active: только inset из layout.css — убираем лишний border-left */
.sidebar .nav-group-items .nav-link.active {
    border-left-color: transparent !important;
}

.sidebar .nav-menu > li > .nav-link {
    padding-left: 0.75rem !important;
}

.sidebar .nav-link.active {
    display: flex !important;
    align-items: center !important;
}

@media (max-width: 768px) {
    #templates-section .filters-container .filter-group,
    #clients-section .filters-container .filter-group,
    #users-section .filters-container .filter-group,
    #organizations-section .filters-container .filter-group,
    #vacations-section .filters-container .filter-group {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }

    #templates-section .template-actions .btn {
        flex: 1 1 100% !important;
    }
}