:root {
    --primary-color: #00d1ff;
    --secondary-color: #0095ff;
    --success-color: #00ff88;
    --danger-color: #ff2d75;
    --warning-color: #ffcc00;
    --light-color: #f8f9fa;
    --dark-color: #1a1a2e;
    --border-color: #2a2a3a;
    --bg-color: #16213e;
    --card-bg: #1a1a2e;
    --text-color: #e6e6e6;
    --text-light: #8d99ae;
    --darker-bg: #0f0f1a;
}

/* Главные вкладки приложения */
.main-tabs {
    display: flex;
    border-bottom: 2px solid var(--border-color);
    margin: 10px 0;
    background-color: var(--card-bg);
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    border-bottom: none;
}

.main-tab-btn {
    flex: 1;
    padding: 15px 20px;
    background: var(--darker-bg);
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-light);
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
}

.main-tab-btn:hover {
    background: var(--card-bg);
    color: var(--text-color);
}

.main-tab-btn.active {
    background: var(--card-bg);
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    box-shadow: 0 2px 10px rgba(0, 209, 255, 0.2);
}

.main-tab-btn i {
    font-size: 18px;
}

/* Контейнер для содержимого главных вкладок */
.main-tab-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
/*    margin-top: 10px;*/
}

.main-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.main-tab-pane {
    display: none;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    position: relative;
}

.main-tab-pane.active {
    display: flex;
}

/* Стили для вкладки платежи - таблица на всю высоту */
#payments-tab .table-wrapper {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Стили для вкладки контрагентов - таблица на всю высоту */
#counterparties-tab .table-wrapper {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Стили для вкладки счета - таблица на всю высоту */
#invoices-tab .table-wrapper {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Стили для вкладки договоры - таблица на всю высоту */
#contracts-tab .table-wrapper {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Стили для вкладки задачи - таблица на всю высоту */
#tasks-tab .table-wrapper {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

#counterparties-empty-state {
    display: none;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    z-index: 50;
    background: var(--card-bg);
}

#counterparties-empty-state.active {
    display: flex;
}

#empty-state {
    display: none;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    z-index: 50;
    background: var(--card-bg);
}

#empty-state.active {
    display: flex;
}

/* Стили для светлой темы */
.light-theme .main-tab-btn {
    background: #e8e8e8;
    color: #666;
}

.light-theme .main-tab-btn:hover {
    background: #f5f5f5;
    color: #333;
}

.light-theme .main-tab-btn.active {
    background: var(--light-color);
    color: var(--primary-color);
}

/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
    .main-tab-btn {
        padding: 12px 15px;
        font-size: 14px;
    }

    .main-tab-btn i {
        font-size: 16px;
    }

    @media (max-width: 768px) {
        .main-tab-btn {
            min-width: 60px;
            padding: 15px 10px !important;
        }
        
        .main-tab-btn i {
            font-size: 20px !important;
            margin: 0 !important;
        }
        
        .main-tab-btn.active i {
            color: var(--primary-color) !important;
        }
        
        /* Скрываем текст кнопок, оставляем только иконки */
        .main-tab-btn span {
            display: none !important;
        }
    }
}


body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

body {
    font-family: Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    height: 100vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Основной контейнер */
.container {
    display: none;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
/*    padding: 20px;*/
    box-sizing: border-box;
    min-height: 0;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
    0% { opacity: 0.8; }
    50% { opacity: 1; }
    100% { opacity: 0.8; }
}

@keyframes pulse-red {
    0% { 
        opacity: 0.8; 
        box-shadow: 0 0 5px rgba(255, 45, 117, 0.5); 
    }
    50% { 
        opacity: 1; 
        box-shadow: 0 0 5px rgba(255, 45, 117, 0.8);
    }
    100% { 
        opacity: 0.8; 
        box-shadow: 0 0 5px rgba(255, 45, 117, 0.5);
    }
}

@-webkit-keyframes glowing {
      0% { -webkit-box-shadow: 0 0 3px rgba(255, 45, 117, 0.5); }
      50% {  -webkit-box-shadow: 0 0 15px rgba(255, 45, 117, 0.8); }
      100% {  -webkit-box-shadow: 0 0 3px rgba(255, 45, 117, 0.5); }
      }
      @keyframes glowing {
      0% { box-shadow: 0 0 3px rgba(255, 45, 117, 0.5); }
      50% { box-shadow: 0 0 15px rgba(255, 45, 117, 0.8); }
      100% { box-shadow: 0 0 3px rgba(255, 45, 117, 0.5); }
      }

@keyframes neon {
    0% { text-shadow: 0 0 5px var(--primary-color), 0 0 10px var(--primary-color); }
    50% { text-shadow: 0 0 10px var(--primary-color), 0 0 20px var(--primary-color); }
    100% { text-shadow: 0 0 5px var(--primary-color), 0 0 10px var(--primary-color); }
}

@keyframes css-animation-blink {
    50% {
        opacity: 0.5;
    }
}

@keyframes tooltipFade {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Loading overlay */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-color);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.loading-spinner {
    text-align: center;
    color: var(--primary-color);
}

.loading-spinner i {
    animation: spin 1s linear infinite;
}

.loading-spinner p {
    margin-top: 15px;
    font-size: 1.2rem;
    color: var(--text-color);
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Аутентификация */
.auth-container {
    max-width: 400px;
    margin: 100px auto;
    padding: 30px;
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(0, 209, 255, 0.1);
    text-align: center;
    animation: fadeIn 0.3s ease-out;
    border: 1px solid var(--border-color);
}

.auth-container h2 {
    color: var(--primary-color);
    margin-bottom: 25px;
    font-weight: 600;
    font-size: 1.8rem;
    animation: neon 3s infinite;
}

.auth-container input {
    width: -webkit-fill-available;
    padding: 12px 15px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s;
    background-color: var(--darker-bg);
    color: var(--text-color);
}

.auth-container input:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 209, 255, 0.2);
}

.auth-container button {
    width: 100%;
    padding: 12px;
    background-color: var(--primary-color);
    color: var(--dark-color);
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.auth-container button:hover {
    background-color: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 209, 255, 0.3);
}

/* Основной контейнер */
.container {
    display: none;
    max-width: 100%;
    height: 100%;
    flex: 1;
    animation: fadeIn 0.5s ease-in-out;
}

#app-container {
    display: flex;
    flex-direction: column;
    height: 98vh;
    width: 100%;
    overflow: hidden;
}

.app-header {
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 10px 15px;
    background-color: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    min-height: 70px;
    overflow: visible; /* Разрешаем тултипам выходить за пределы */
}

.app-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 10px;
    text-shadow: 0 0 5px rgba(0, 209, 255, 0.5);
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 100; /* Ниже чем модальные окна (1000), но выше контента */
}

.year-nav {
    display: flex;
    align-items: center;
/*    background-color: var(--darker-bg);*/
    border-radius: 8px;
    padding: 5px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    border: 1px solid var(--border-color);
    width: fit-content;
}

.current-year {
  font-size: 1.7rem;
  font-weight: 700;
  min-width: 60px;
  text-align: center;
  color: var(--danger-color);
}


/* Общие стили кнопок (независимые от темы) */
.btn {
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative;
    font-weight: 500;
}

/* Отступ для иконок в кнопках */

.modal .btn i {
  padding-right: 10px;
}




#add-counterparty i {
  margin: 0 !important;
}

/* Размеры кнопок */
.header-controls .btn{
    min-width: 40px;
    height: 40px;
}

/* Стили для светлой темы */
.light-theme .btn {
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.light-theme .btn:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Кнопка добавления */
.light-theme .btn-add {
    background-color: var(--success-color);
    color: #fff;
    height: 40px;
  padding: 0 20px;
}

/* Кнопка редактирования */
.light-theme .btn-edit {
    background-color: var(--primary-color);
    color: #fff;
}

/* Кнопка удаления */
.light-theme .btn-delete {
    background-color: var(--danger-color);
    color: #fff;
    padding: 0 20px;
}

/* Кнопка импорта/экспорта */
.light-theme .btn-import-export {
    background-color: var(--secondary-color);
    color: #fff;
}

/* Кнопка настроек */
.light-theme .btn-settings {
    background-color: var(--primary-color);
    color: #fff;
}

/* Кнопка графика */
.light-theme .btn-chart {
    background-color: #7209b7;
    color: #fff;
}

/* Кнопка пользователя */
.light-theme .btn-user {
    background-color: #3a0ca3;
    color: #fff;
}

/* Кнопка активации/деактивации */
.btn-toggle {
    background-color: var(--warning-color);
    color: var(--dark-color);
}

.light-theme .btn-toggle {
    background-color: var(--warning-color);
    color: var(--dark-color);
}

.actions-cell .btn-toggle:hover {
    background-color: var(--warning-color);
    color: var(--dark-color);
}

.light-theme .actions-cell .btn-toggle:hover {
    background-color: var(--warning-color);
    color: var(--dark-color);
}

/* Стили для тёмной темы (базовые) */
.btn-add {
    background-color: var(--primary-color);
    color: var(--dark-color);
    height: 40px;
    padding: 0 20px;
}

.btn-edit {
    background-color: var(--primary-color);
    color: var(--dark-color);
}

.btn-delete {
    background-color: var(--danger-color);
    color: white;
    height: 40px;
    padding: 0 20px;
}

/* Маленькие кнопки удаления (в контекстном меню) */
.btn-delete.btn-sm {
    background-color: var(--danger-color) !important;
    color: white !important;
    font-size: 10px;
    padding: 3px 6px;
    height: auto;
    min-width: auto;
}

.btn-delete.btn-sm:hover {
    background-color: #ff4d4d !important;
}

.btn-import-export {
    background-color: var(--secondary-color);
    color: var(--dark-color);
}

.btn-settings {
    background-color: var(--primary-color);
    color: var(--dark-color);
}

.btn-chart {
    background-color: #7209b7;
    color: white;
}

.btn-stats {
    background-color: #4361ee;
    color: white;
}

.btn-user {
    background-color: #3a0ca3;
    color: white;
}

/* Эффекты при наведении для тёмной темы */
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 209, 255, 0.3);
}

.btn-add:hover {
    box-shadow: 0 4px 12px rgba(0, 255, 136, 0.4);
}

.btn-delete:hover {
    box-shadow: 0 4px 12px rgba(255, 45, 117, 0.4);
}

.btn-import-export:hover {
    box-shadow: 0 4px 12px rgba(0, 149, 255, 0.4);
}

/* Стили для кнопок в ячейках действий (тёмная тема) */
.actions-cell .btn {
    background-color: var(--darker-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.actions-cell .btn-edit:hover {
    background-color: var(--primary-color);
    color: var(--dark-color);
}

.actions-cell .btn-delete:hover {
    background-color: var(--danger-color);
    color: white;
}

/* Для светлой темы - кнопки в ячейках действий */
.light-theme .actions-cell .btn {
    background-color: var(--darker-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.light-theme .actions-cell .btn-edit:hover {
    background-color: var(--primary-color);
    color: white;
}

.light-theme .actions-cell .btn-delete:hover {
    background-color: var(--danger-color);
    color: white;
}

/* Анимации для кнопок в тёмной теме */
.btn {
    position: relative;
}

.btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%, -50%);
    transform-origin: 50% 50%;
}

.btn:focus:not(:active)::after {
    animation: ripple 0.6s ease-out;
}

@keyframes ripple {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }
    100% {
        transform: scale(20, 20);
        opacity: 0;
    }
}


/* Таблица */
.table-wrapper {
    background-color: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    border: 1px solid var(--border-color);
    position: relative;
    min-height: 0;
    height: 100%;
}

/* Контейнер для прокручиваемого содержимого таблицы */
#table-container,
#counterparties-table-container,
#invoices-table-container,
#contracts-table-container {
    overflow-y: auto;
    overflow-x: auto;
    flex-grow: 1;
    position: relative;
    scrollbar-gutter: stable;
    display: block;
    -webkit-overflow-scrolling: touch;
}

/* Таблица */
table {
    width: 100%;
    min-width: fit-content;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--card-bg);
    position: relative;
    display: table;
}

/* Закрепленный заголовок таблицы */
thead {
    position: sticky;
    top: 0;
    z-index: 120;
}

thead th {
    position: sticky;
    top: 0;
    z-index: 110;
    background-color: var(--darker-bg) !important;
    border-bottom: 2px solid var(--primary-color);
}

/* Закрепленная левая колонка - заголовки таблиц */
thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 120;
    background-color: var(--darker-bg) !important;
    box-shadow: 2px 0 5px rgba(0,0,0,0.2);
}

/* Закреплённая колонка контрагента в таблице платежей */
#table-container tbody td.counterparty-name-cell {
    position: sticky !important;
    left: 0 !important;
    z-index: 100 !important;
    background: var(--card-bg) !important;
    background-color: var(--card-bg) !important;
    border-right: 2px solid var(--primary-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

#table-container tbody td.counterparty-name-cell.compact-view {
    position: sticky !important;
    left: 0 !important;
    z-index: 100 !important;
    background: var(--card-bg) !important;
    background-color: var(--card-bg) !important;
    border-right: 2px solid var(--primary-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

#table-container thead th.counterparty-column {
    position: sticky !important;
    left: 0 !important;
    z-index: 120 !important;
    background: var(--darker-bg) !important;
    background-color: var(--darker-bg) !important;
    border-right: 2px solid var(--primary-color) !important;
}

/* Закреплённая колонка в таблице контрагентов - только первая колонка (логотип) */
#counterparties-table-container tbody td.counterparty-logo-cell {
    position: sticky;
    left: 0;
    z-index: 10;
    background-color: var(--card-bg) !important;
    border-right: 2px solid var(--primary-color) !important;
    vertical-align: middle;
}

#counterparties-table-container thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 120;
    background-color: var(--darker-bg) !important;
    border-right: 2px solid var(--primary-color) !important;
}

/* Закреплённая колонка в таблице договоров */
#contracts-table-container tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 10;
    background-color: var(--card-bg) !important;
    border-right: 2px solid var(--primary-color) !important;
}

#contracts-table-container thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 120;
    background-color: var(--darker-bg) !important;
    border-right: 2px solid var(--primary-color) !important;
}

/* Закреплённая колонка в таблице счетов */
#invoices-table-container tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 10;
    background-color: var(--card-bg) !important;
    border-right: 2px solid var(--primary-color) !important;
}

#invoices-table-container thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 120;
    background-color: var(--darker-bg) !important;
    border-right: 2px solid var(--primary-color) !important;
}

/* Заголовок - фиксированная ширина */
.tasks-calendar-header-cell {
    background: var(--darker-bg) !important;
    background-color: var(--darker-bg) !important;
    padding: 10px 5px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    border-right: 1px solid var(--border-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
    position: sticky;
    top: 0;
    z-index: 10;
}

.tasks-calendar-header-cell.tasks-calendar-counterparty-header {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 100;
    text-align: left;
    padding: 10px;
    background: var(--darker-bg) !important;
    background-color: var(--darker-bg) !important;
    border-right: 2px solid var(--primary-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.tasks-calendar-header-cell.tasks-calendar-month-header {
    text-align: center;
    background: var(--darker-bg) !important;
    background-color: var(--darker-bg) !important;
    z-index: 10;
    position: sticky;
    top: 0;
}

/* Строка задачи */
.tasks-calendar-row {
    display: contents;
}

/* Закреплённая колонка контрагента - НЕПРОЗРАЧНАЯ */
.tasks-calendar-counterparty {
    background: var(--card-bg) !important;
    background-color: var(--card-bg) !important;
    padding: 10px;
    font-size: 12px;
    font-weight: 500;
    border-right: 2px solid var(--primary-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
    position: sticky;
    left: 0;
    z-index: 5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Чередование строк - через классы (НЕПРОЗРАЧНЫЕ цвета) */
.tasks-calendar-row.odd .tasks-calendar-counterparty {
    background: var(--card-bg) !important;
    background-color: var(--card-bg) !important;
}

.tasks-calendar-row.even .tasks-calendar-counterparty {
    background: var(--darker-bg) !important;
    background-color: var(--darker-bg) !important;
}

/* Ячейки месяцев - НЕПРОЗРАЧНЫЕ */
.tasks-calendar-cell {
    background: var(--card-bg) !important;
    background-color: var(--card-bg) !important;
    min-height: 40px;
    height: auto;
    padding: 4px;
    cursor: default;
    transition: background-color 0.2s;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    border-right: 1px solid var(--border-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* Границы между кварталами в календаре задач - после марта, июня, сентября */
/* Контрагент + 3 месяца = март, контрагент + 6 месяцев = июнь, контрагент + 9 месяцев = сентябрь */
.quarter-border-left {
    border-left: 2px solid var(--primary-color) !important;
}

/* Чередование для ячеек (НЕПРОЗРАЧНЫЕ цвета) */
.tasks-calendar-row.odd .tasks-calendar-cell {
    background: var(--card-bg) !important;
    background-color: var(--card-bg) !important;
}

.tasks-calendar-row.even .tasks-calendar-cell {
    background: var(--darker-bg) !important;
    background-color: var(--darker-bg) !important;
}

/* Выделение строки при наведении */
.tasks-calendar-row:hover .tasks-calendar-cell {
    background: rgba(0, 209, 255, 0.15) !important;
    background-color: rgba(0, 209, 255, 0.15) !important;
}

.tasks-calendar-row:hover .tasks-calendar-counterparty {
    background: rgb(4, 83, 100) !important;
    background-color: rgb(4, 83, 100) !important;
}

.tasks-calendar-cell:hover {
    background: rgba(0, 209, 255, 0.15) !important;
    background-color: rgba(0, 209, 255, 0.15) !important;
}

.tasks-calendar-cell.has-task {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
    min-height: 40px;
    height: auto;
    padding: 8px;
    box-sizing: border-box;
    overflow: visible;
}

/* Итоговые строки - закреплены внизу */
.summary-row {
    position: sticky;
    bottom: 0;
    z-index: 100;
    background-color: var(--darker-bg) !important;
    font-weight: 600;
}

.summary-row td {
    background-color: var(--darker-bg) !important;
    padding: 8px 4px !important;
    border: 1px solid var(--border-color);
    height: 34px;
    min-height: 34px;
    max-height: 34px;
    box-sizing: border-box;
}

.summary-row td.summary-label-cell {
    position: sticky;
    left: 0;
    z-index: 105;
    min-width: 150px;
    background-color: var(--darker-bg) !important;
/*    border-right: 2px solid var(--primary-color) !important;*/
    font-weight: bold;
    height: 34px;
    min-height: 34px;
    max-height: 34px;
}

/* Порядок итоговых строк (снизу вверх) */
.year-total-row {
    bottom: 0;
}

.quarter-total-row {
    bottom: 34px;
}

.month-total-row {
    bottom: 68px;
}

/* Таблица контрагентов - адаптивная ширина */
#counterparties-table-container table {
    min-width: 600px;
}

#counterparties-table-container th:first-child,
#counterparties-table-container td:first-child {
    width: 80px;
    min-width: 80px;
}

#counterparties-table-container th:nth-child(2),
#counterparties-table-container td:nth-child(2) {
    min-width: 200px;
}

#counterparties-table-container th:nth-child(3),
#counterparties-table-container td:nth-child(3) {
    width: 150px;
    min-width: 150px;
}

#counterparties-table-container th:nth-child(4),
#counterparties-table-container td:nth-child(4) {
    width: 100px;
    min-width: 100px;
    text-align: center;
}

#counterparties-table-container th:nth-child(5),
#counterparties-table-container td:nth-child(5) {
    width: 120px;
    min-width: 120px;
}

/* Исключение для таблицы связанных счетов в модальном окне - не фиксируем ширину */
.contract-invoices-list .invoices-table,
.modal-content .invoices-table {
    min-width: auto;
    width: 100%;
}

/* Фиксированная шапка таблицы */
thead {
    position: sticky;
    top: 0;
    z-index: 120;
}

thead th {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--darker-bg) !important;
    border-bottom: 2px solid var(--primary-color);
}

/* Фиксируем заголовок "Контрагент" */
thead th.counterparty-column {
    position: sticky;
    left: 0;
    z-index: 105;
    min-width: 200px;
    background-color: var(--darker-bg) !important;
    box-shadow: 2px 0 5px rgba(0,0,0,0.2);
}

/* Фиксируем имена контрагентов */
tbody td.counterparty-name-cell {
    position: sticky;
    left: 0;
    z-index: 85;
    min-width: 200px;
    background-color: var(--card-bg) !important;
    box-shadow: 2px 0 5px rgba(0,0,0,0.2);
}

/* Фиксированные итоговые строки внизу контейнера */
.summary-row {
    position: sticky;
    bottom: 0;
    z-index: 100;
    background-color: var(--darker-bg) !important;
    font-weight: 600;
}

.summary-row td {
    background-color: var(--darker-bg) !important;
    padding: 8px 4px !important;
/*    border: 1px solid var(--border-color);*/
    height: 34px;
    min-height: 34px;
    max-height: 34px;
    box-sizing: border-box;
}

/* Бордер первой закреплённой колонки в итоговых строках */
.summary-row td:first-child {
    border-right: 2px solid var(--primary-color) !important;
}

/* Фиксируем первую ячейку итоговых строк */
.summary-row td.summary-label-cell {
    position: sticky;
    left: 0;
    z-index: 105;
    min-width: 150px;
    background-color: var(--darker-bg) !important;
    border-right: 2px solid var(--primary-color) !important;
    font-weight: bold;
    height: 34px;
    min-height: 34px;
    max-height: 34px;
}

/* Порядок итоговых строк (снизу вверх) - высота строки 34px */
.year-total-row {
    bottom: 0;
}

.quarter-total-row {
    bottom: 34px;
}

.month-total-row {
    bottom: 68px;
}

/* Тени для всех фиксированных элементов */
thead th.counterparty-column,
tbody td.counterparty-name-cell,
.summary-row td.summary-label-cell {
    box-shadow: 2px 0 5px rgba(0,0,0,0.2);
}

/* Адаптация для мобильных */
@media (max-width: 768px) {
    thead th.counterparty-column,
    tbody td.counterparty-name-cell {
        left: 0;
        min-width: 150px;
    }

    .summary-row td.summary-label-cell {
        min-width: 120px;
    }
}

/* Для светлой темы */
.light-theme .counterparty-column,
.light-theme .summary-row td.summary-label-cell {
    background-color: var(--darker-bg) !important;
}

/* Фиксированный первый столбец */
tbody td:first-child,
thead th:first-child {
    /*position: sticky;
    left: 0;
    z-index: 20;*/
    background-color: var(--darker-bg);
    box-shadow: 2px 0 5px rgba(0,0,0,0.2);
}

/* столбец действий */
td.actions {
    
    z-index: 20;
    background-color: var(--card-bg);
    
}

th, td {
    border: 1px solid var(--border-color);
/*    padding: 12px 15px;*/
    text-align: center;
    position: relative;
}

th {
    font-weight: 600;
}



/* Стили для платежей */
.paid {
    background-color: rgba(0, 255, 136, 0.1);
    font-weight: 600;
    color: var(--success-color);
    cursor: pointer;
}

.unpaid.current-month, .unpaid.past-due {
    background-color: rgba(255, 45, 117, 0.1) !important;
  font-weight: 600;
  color: var(--danger-color);
-webkit-animation: glowing 1300ms infinite;
      -moz-animation: glowing 1300ms infinite;
      -o-animation: glowing 1300ms infinite;
      animation: glowing 1300ms infinite;
      z-index: 30;
      cursor: pointer;
}

.unpaid {
  background-color: rgba(245, 34, 45, 0.1);
  cursor: pointer;
}

.one-time::after {
  content: '';
  position: absolute;
  left: 10%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background-color: var(--warning-color);
  border-radius: 50%;
}

/* Границы кварталов */
/*.quarter-divider-right {
    border-right: 1px solid var(--primary-color) !important;
}

.quarter-divider-left {
    border-left: 1px solid var(--primary-color) !important;
}*/

.quarter-start {
    border-left: 2px solid var(--primary-color) !important;}

/* Текущий месяц */
.current-month {
    background-color: rgba(0, 209, 255, 0.1);
    font-weight: bold;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
    -webkit-touch-callout: none; /* iOS Safari */
}

/* Все ячейки в таблице платежей - запрет выделения */
#payments-table-container td {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/*.current-month::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 3px;
    background-color: var(--primary-color);
    border-radius: 30%;
}*/

/* Базовые стили для всех элементов с подсказками */
[data-tooltip] {
    position: relative;
    cursor: pointer;
}

/* Стили для самой подсказки */
[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 10px;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1100;
    pointer-events: none;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Стили для тёмной темы */
[data-tooltip]::before {
    background-color: #1a1a2e;
    color: #e6e6e6;
    border: 1px solid #00d1ff;
    box-shadow: 0 2px 10px rgba(0, 209, 255, 0.2);
}

/* Стили для светлой темы */
.light-theme [data-tooltip]::before {
    background-color: #f5f5f5;
    color: #333333;
    border: 1px solid #d9d9d9;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Показ подсказки при наведении */
[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
}

/* Специальные стили для кнопок в правой части */
.header-controls [data-tooltip]::before {
    left: auto;
    right: 0;
    transform: none;
    z-index: 100000; /* Максимальный z-index чтобы быть выше всего */
}

/* Специальные стили для кнопок в левой части */
.year-nav [data-tooltip]::before {
    left: 0;
    right: auto;
    transform: none;
}

/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
    [data-tooltip]::before {
        font-size: 12px;
        white-space: normal;
        max-width: 180px;
    }
}

/* Стили для кнопок в контекстном меню платежей */
#payment-context-menu .btn-add {
    color: var(--primary-color) !important;
}

/* Контейнер кнопок в контекстном меню */
.payment-context-menu-buttons {
    display: flex;
    gap: 4px;
}

.payment-context-menu-buttons .btn {
    font-size: 10px;
    padding: 3px 6px;
}

.payment-context-menu-buttons .toggle-payment-status-btn {
    flex: 1;
    background-color: var(--darker-bg);
    color: var(--text-color);
}

.payment-context-menu-buttons .toggle-payment-status-btn:hover {
    background-color: var(--card-bg);
}

.payment-context-menu-buttons .edit-payment-item-btn {
    background-color: var(--darker-bg);
    color: var(--text-color);
}

.payment-context-menu-buttons .edit-payment-item-btn:hover {
    background-color: var(--card-bg);
}

.payment-context-menu-buttons .btn-delete {
    background-color: var(--danger-color) !important;
    color: white !important;
}

.payment-context-menu-buttons .btn-delete:hover {
    background-color: #ff4d4d !important;
}

/* Кнопка добавления платежа в контекстном меню пустой ячейки */
.payment-context-menu-add,
#empty-cell-context-menu {
}

.payment-context-menu-add .btn-add,
#empty-cell-context-menu .btn-add {
    width: 100%;
    font-size: 12px;
    background-color: var(--darker-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color);
}

.payment-context-menu-add .btn-add:hover,
#empty-cell-context-menu .btn-add:hover {
    background-color: rgba(0, 209, 255, 0.15) !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-color);
}

/* Кнопка создания платежа в контекстном меню пустой ячейки (inline) */
.create-payment-btn {
    background-color: var(--darker-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color);
}

.create-payment-btn:hover {
    background-color: rgba(0, 209, 255, 0.15) !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-color);
}

/* Модальные окна */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.85); /* Сделали фон чуть плотнее для надежности */
    backdrop-filter: blur(8px);
    z-index: 2000; 
    animation: fadeIn 0.3s;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    pointer-events: auto; /* Гарантируем, что окно ловит события */
    -webkit-tap-highlight-color: transparent; /* Убираем синюю подсветку тапа на мобильных */
}

.modal-content {
    background-color: var(--card-bg);
    margin: auto;
    padding: 25px;
    border-radius: 12px;
    box-sizing: border-box;
    width: calc(100% - 40px); /* Учитываем padding */
    max-width: 800px;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 0 30px rgba(0, 209, 255, 0.2);
    border: 1px solid var(--primary-color);
    position: relative;
    transform: none;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
}

.modal-content h2 {
    color: var(--primary-color);
    margin-top: 0;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 40px;
    word-wrap: break-word;
}

.close {
    position: absolute;
    top: 0px;
    right: 20px;
    font-size: 34pt;
    color: var(--text-light);
    cursor: pointer;
    transition: color 0.3s;
}

.close:hover {
    color: var(--primary-color);
}

/* Формы */
.form-group {
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
/*    color: var(--text-color);*/
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Стили для секции множественных связей счетов */
.invoice-multiple-links-section {
    margin-top: 15px;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--card-bg);
}

.invoice-multiple-links-section label {
    color: var(--text-color);
    margin-bottom: 12px;
}

.invoice-links-controls {
    margin-bottom: 10px;
}

.invoice-links-controls select {
    width: 100%;
    margin-bottom: 5px;
    background-color: var(--darker-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 8px;
}

/* Цветовая индикация статусов платежей в select */
.invoice-links-controls select option {
    background-color: var(--darker-bg);
    color: var(--text-color);
    padding: 5px;
}

.invoice-links-controls select option[data-paid="1"] {
    background-color: rgba(0, 255, 136, 0.2);
    color: var(--success-color);
}

.invoice-links-controls select option[data-paid="0"] {
    background-color: rgba(255, 45, 117, 0.2);
    color: var(--danger-color);
}

.invoice-links-controls .btn {
    width: 100%;
}

#invoice-links-list {
    margin-top: 10px;
}

.invoice-link-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background-color: var(--darker-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-bottom: 5px;
    font-size: 13px;
    color: var(--text-color);
}

.link-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.link-counterparty-name {
    color: var(--text-color);
    font-size: 14px;
}

.link-payment-details {
    color: var(--text-light);
    font-size: 12px;
}

.status-paid {
    color: var(--success-color);
    font-weight: 600;
}

.status-unpaid {
    color: var(--warning-color);
    font-weight: 600;
}

.link-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.link-payment-status {
    color: var(--text-light);
    font-size: 12px;
}

.no-links-message {
    color: var(--text-light);
    font-size: 13px;
    padding: 8px 0;
}

.btn-sm {
    padding: 3px 8px;
    font-size: 11px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    box-sizing: border-box;
    max-width: 100%;
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s;
    background-color: var(--darker-bg);
    color: var(--text-color);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 209, 255, 0.2);
}

/* Стили для select привязки платежей - цветовая индикация */
#invoice-payment-select option[data-paid="1"] {
    background-color: rgba(0, 255, 136, 0.2);
    color: var(--success-color);
}

#invoice-payment-select option[data-paid="0"] {
    background-color: rgba(255, 45, 117, 0.2);
    color: var(--danger-color);
}

.form-actions,
.form-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

/* Для строк с несколькими элементами */
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
}

.form-row .form-group {
    flex: 1;
    min-width: 200px; /* Минимальная ширина для полей в строке */
}

/* Чекбоксы-ползунки */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
    margin-left: 10px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border-color);
    transition: .4s;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .toggle-slider {
    background-color: var(--primary-color);
}

input:checked + .toggle-slider:before {
    transform: translateX(26px);
}

.actions {
    position: relative;
    z-index: 4;
}

.actions .btn {
    width: 25px;
    height: 25px;
    font-size: 13px;
    margin: 0;
}

/* Вкладки */
.tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
}

.tab-btn {
    padding: 10px 20px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-light);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.tab-btn.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Файловый инпут */
.file-input {
    display: none;
}

.file-label {
    display: inline-block;
    padding: 8px 15px;
    background-color: var(--primary-color);
    color: var(--dark-color);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
    margin-bottom: 10px;
}

.file-label:hover {
    background-color: var(--secondary-color);
}

#file-name {
    display: block;
    margin-bottom: 15px;
    color: var(--text-light);
    font-size: 0.9rem;
}

/* Текстовые области */
textarea {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s;
    background-color: var(--darker-bg);
    color: var(--text-color);
    margin-bottom: 15px;
    min-height: 150px;
    resize: vertical;
}

textarea:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 209, 255, 0.2);
}

/* Модальное окно графика */
#chart-modal .modal-content {
    max-width: 800px;
    padding: 25px;
}

.chart-controls {
  display: inline-flex;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 15px;
}

.chart-periods {
    display: flex;
    gap: 10px;
}

.chart-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    background-color: var(--darker-bg);
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.2s;
}

.chart-btn.active {
    background-color: var(--primary-color);
    color: var(--dark-color);
    font-weight: 600;
}

.chart-year-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: var(--darker-bg);
    border-radius: 6px;
    padding: 5px 10px;
    border: 1px solid var(--border-color);
}

#income-chart {
    width: 100% !important;
    height: 400px !important;
}

/* Уведомления */
.notification-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 99999;
    pointer-events: none;
}

.notification {
    background-color: var(--card-bg);
    padding: 20px 25px;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.4);
    max-width: 400px;
    margin-bottom: 15px;
    position: relative;
    animation: fadeIn 0.3s;
    border-left: 6px solid;
    pointer-events: auto;
    border: 1px solid var(--border-color);
    font-size: 1.1rem;
    box-shadow: 0 0 15px rgba(0, 209, 255, 0.3), 
                0 5px 25px rgba(0,0,0,0.4);
    transition: all 0.3s ease;
}

.notification.success {
    border-left-color: var(--success-color);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.3),
                0 5px 25px rgba(0,0,0,0.4);
}

.notification.error {
    border-left-color: var(--danger-color);
    box-shadow: 0 0 15px rgba(255, 45, 117, 0.3),
                0 5px 25px rgba(0,0,0,0.4);
}

.notification.warning {
    border-left-color: var(--warning-color);
    box-shadow: 0 0 15px rgba(255, 204, 0, 0.3),
                0 5px 25px rgba(0,0,0,0.4);
}
.notification.info {
    border-left-color: var(--primary-color);
    box-shadow: 0 0 15px rgba(0, 209, 255, 0.3),
                0 5px 25px rgba(0,0,0,0.4);
}

.notification-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
}

.notification-message {
    margin: 0;
    padding-right: 25px;
    font-size: 1.1rem;
    font-weight: 500;
}

.notification-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.notification-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s;
}

.notification-btn-success {
    background-color: var(--success-color);
    color: var(--dark-color);
}

.notification-btn-error {
    background-color: var(--danger-color);
    color: white;
}
.notification-btn-primary {
    background-color: var(--primary-color);
    color: var(--dark-color);
}

/* Анимация появления */
@keyframes notificationFadeIn {
    from { 
        opacity: 0;
        transform: translateY(20px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

.notification {
    animation: notificationFadeIn 0.3s ease-out forwards;
}


/* Диалог подтверждения */
.confirm-dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    background-color: rgba(0,0,0,0.7);
}

.confirm-content {
    background-color: var(--card-bg);
    padding: 25px;
    border-radius: 12px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 0 30px rgba(0, 209, 255, 0.2),
                0 5px 25px rgba(0,0,0,0.4);
    border: 1px solid var(--primary-color);
    border-left: 6px solid var(--primary-color);
}

.confirm-content p {
    margin: 0 0 20px;
    color: var(--text-color);
    font-size: 1.1rem;
    padding-right: 25px;
}

.confirm-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Адаптивность */
@media (max-width: 768px) {
    .app-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .header-controls {
        width: 100%;
        justify-content: space-between;
    }

    td:nth-child(2) {
        max-width: 150px;
    }

    .modal-content {
        width: calc(100% - 20px);
        margin: 10% auto;
        padding: 15px;
    }
    .form-row .form-group {
        min-width: 100%;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    body {
        padding: 10px;
    }

    .btn {
        min-width: 40px;
        height: 40px;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        color: white;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        position: relative;
        padding: 0 15px;
        margin: 0 5px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

    .btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    }

    .btn:active {
        transform: translateY(1px);
    }

    .current-year {
        min-width: 50px;
        font-size: 1.5rem;
    }

    th, td {
/*        padding: 4px 10px;*/
        font-size: 14px;
    }

    .tabs {
        flex-direction: column;
        border-bottom: none;
    }

    .tab-btn {
        border-bottom: none;
        border-left: 3px solid transparent;
        text-align: left;
    }

    .tab-btn.active {
        border-left-color: var(--primary-color);
        border-bottom: none;
    }
}

/* Светлая тема */
.light-theme {
    --primary-color: #0066cc;
    --secondary-color: #004d99;
    --success-color: #00a854;
    --danger-color: #f5222d;
    --warning-color: #faad14;
    --light-color: #f8f9fa;
    --dark-color: #f0f2f5;
    --border-color: #d9d9d9;
    --bg-color: #ffffff;
    --card-bg: #f5f5f5;
    --text-color: #333333;
    --text-light: #666666;
    --darker-bg: #e6e6e6;
}

/* Стили для кнопки темы */
.btn-theme {
    background-color: var(--primary-color);
    color: white;
}

.light-theme .btn-theme {
    background-color: var(--secondary-color);
}

.light-theme .btn-theme i::before {
    content: "\f185";
}

/* Адаптация элементов для светлой темы */
.light-theme body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

.light-theme .modal-content,
.light-theme .confirm-content,
.light-theme .auth-container,
.light-theme .app-header,
.light-theme .table-wrapper {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.light-theme th {
    background-color: var(--darker-bg);
}

.light-theme .paid {
    background-color: rgba(0, 168, 84, 0.1);
}

.light-theme .unpaid {
    background-color: rgba(245, 34, 45, 0.1);
}

.light-theme .notification {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

/* Для светлой темы */
.light-theme .notification {
    box-shadow: 0 0 15px rgba(0, 102, 204, 0.2),
                0 5px 15px rgba(0,0,0,0.1);
}

.light-theme .notification.success {
    box-shadow: 0 0 15px rgba(0, 168, 84, 0.2),
                0 5px 15px rgba(0,0,0,0.1);
}

.light-theme .notification.error {
    box-shadow: 0 0 15px rgba(245, 34, 45, 0.2),
                0 5px 15px rgba(0,0,0,0.1);
}

.light-theme .notification.warning {
    box-shadow: 0 0 15px rgba(250, 173, 20, 0.2),
                0 5px 15px rgba(0,0,0,0.1);
}

.light-theme .confirm-content {
    box-shadow: 0 0 20px rgba(0, 102, 204, 0.2),
                0 5px 15px rgba(0,0,0,0.1);
}

/* Улучшенный скроллинг */
#table-container::-webkit-scrollbar {
    width: 14px;
}

#table-container::-webkit-scrollbar-track {
    background: var(--darker-bg);
}

#table-container::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: 7px;
    background-color: var(--primary-color);
}

#table-container::-webkit-scrollbar-thumb:hover {
    background-color: var(--secondary-color);
}

/* Кнопки переключения года (тёмная тема) */
.year-nav button,
.chart-year-selector button {
    background: transparent;
    color: var(--primary-color);
    transition: all 0.3s ease;
    font-size: 20pt;
  box-shadow: none !important;
  padding: 0 10px 0 10px;
}

.year-nav button:hover,
.chart-year-selector button:hover {
    color: var(--secondary-color);
    transform: scale(1.1);
/*    background: rgba(0, 209, 255, 0.1);*/
}

/* Для светлой темы */
.light-theme .year-nav button,
.light-theme .chart-year-selector button {
    color: var(--primary-color);
}

.light-theme .year-nav button:hover,
.light-theme .chart-year-selector button:hover {
    color: var(--secondary-color);
/*    background: rgba(0, 102, 204, 0.1);*/
}

/*Выделение кварталов в итоговых строках*/

.month-total-row td {
    font-weight: 600;
    font-size: 1.05em;
}

.quarter-total-row td {
    font-weight: 700;
    font-size: 1.1em;
    background-color: rgba(0, 209, 255, 0.05);
}

.year-total-row td {
    font-weight: 800;
    font-size: 1.2em;
    background-color: rgba(0, 209, 255, 0.1);
    color: var(--primary-color);
}

/* Границы кварталов в итоговых строках */
/*.month-total-row td:nth-child(3n+4),
.quarter-total-row td:nth-child(3n+4) {
    border-right: 2px solid var(--primary-color);
}*/
.month-total.quarter-divider-left, .quarter-total {
  border-left: 2px solid var(--primary-color);
}
/*Выделение итогов*/
.month-total td {
    font-weight: 600;
    color: var(--text-color);
    background-color: rgba(0, 209, 255, 0.05);
}

/* Бордер последнего месяца (декабрь) в строке итогов за месяц */
.month-total-row .month-total:last-of-type {
    border-right: 2px solid var(--primary-color) !important;
}

.quarter-total {
    font-weight: 700;
    color: var(--primary-color);
    background-color: rgba(0, 209, 255, 0.1);
}

/* Бордер последнего квартала (декабрь) в строке итогов за квартал */
.quarter-total-row .quarter-total:last-of-type {
    border-right: 2px solid var(--primary-color) !important;
}

.year-total {
    font-weight: 800;
    color: var(--primary-color);
    background-color: rgba(0, 209, 255, 0.2);
    text-shadow: 0 0 5px rgba(0, 209, 255, 0.3);
    border-top: 2px solid var(--primary-color);
    border-top: 2px solid var(--primary-color) !important;
}

.cell-free {
  border-left: 2px solid var(--primary-color) !important;
}

/* Стили для ячеек с именами контрагентов */
.counterparty-name-cell {
    position: sticky;
    left: 40px; /* Ширина колонки с номером */
    min-width: 200px;
    max-width: 300px;
    text-align: left !important;
    background: linear-gradient(90deg,
        rgba(26, 26, 46, 0.98) 0%,
        rgba(26, 26, 46, 0.95) 85%,
        rgba(26, 26, 46, 0.9) 100%) !important;
    z-index: 5;
    box-shadow: 2px 0 5px rgba(0,0,0,0.2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0px 15px !important;
}

/* Краткий вид - переопределяем padding */
.counterparty-name-cell.compact-view {
    padding: 0 !important;
}

/* Фон для закреплённой колонки в светлой теме */
.light-theme .counterparty-name-cell {
    background: linear-gradient(90deg,
        rgba(245, 245, 245, 0.98) 0%,
        rgba(245, 245, 245, 0.95) 85%,
        rgba(245, 245, 245, 0.9) 100%) !important;
}

/* Краткий вид в светлой теме */
.light-theme .counterparty-name-cell.compact-view {
    background: var(--card-bg) !important;
}

/* Краткий вид колонки контрагента */
.counterparty-name-cell.compact-view {
    min-width: 60px;
    max-width: 80px;
    padding: 8px 4px !important;
    text-align: center !important;
    left: 0 !important;
    background: var(--card-bg) !important;
}

.counterparty-column.compact-view {
    min-width: 60px;
    max-width: 80px;
}

.counterparty-column {
    position: sticky;
    left: 40px; /* Ширина колонки с номером */
    min-width: 200px;
    z-index: 30;
    background-color: var(--darker-bg) !important;
    box-shadow: 2px 0 5px rgba(0,0,0,0.2);
}

/* Заголовок с переключателем */
.counterparty-column > div {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Переключатель в заголовке - как в действиях */
.counterparty-column .btn-toggle {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    max-width: 28px;
    max-height: 28px;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 10pt;
    background-color: var(--warning-color);
    color: var(--dark-color);
    border: none;
    cursor: pointer;
}

.counterparty-column .btn-toggle i {
    font-size: 12px;
    transition: transform 0.3s;
}

.counterparty-column .btn-toggle:hover i {
    transform: scale(1.2);
}

/* Краткий вид колонки контрагента */
.counterparty-name-cell.compact-view {
    min-width: 80px;
    max-width: 100px;
    text-align: center !important;
}

/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
    .counterparty-name-cell {
        min-width: 150px;
        max-width: 150px;
        padding: 8px 10px !important;
        left: 30px;
    }
    
    .counterparty-name-cell.compact-view {
        min-width: 60px;
        max-width: 60px;
        padding: 5px 0 !important;
        left: 0 !important;
    }
}

/* Для светлой темы */
.light-theme .counterparty-name-cell {
    background-color: var(--card-bg) !important;
}

/* Скрываем колонку с порядковым номером */
.counterparty-index,
td.counterparty-index {
    display: none !important;
}

/* Сортировка колонок */
table th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 25px;
}

table th.sortable:hover {
    background-color: rgba(0, 209, 255, 0.1);
}

table th.sortable::after {
    content: '⇅';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.3;
    font-size: 12px;
}

table th.sortable.sorted-asc::after {
    content: '↑';
    opacity: 1;
}

table th.sortable.sorted-desc::after {
    content: '↓';
    opacity: 1;
}

.light-theme table th.sortable:hover {
    background-color: rgba(0, 209, 255, 0.05);
}

/* Стили для ячеек с действиями */
.actions-cell {   
    right: 0;
    z-index: 5;
    background-color: var(--card-bg) !important;
    box-shadow: -2px 0 5px rgba(0,0,0,0.2);
/*    padding: 8px 5px !important;*/
    white-space: nowrap; /* Запрещаем перенос содержимого */
    border-left: 2px solid var(--primary-color);
}
.actions-column{border-left: 2px solid var(--primary-color);}

.actions-buttons-container {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: nowrap; /* Запрещаем перенос кнопок */
    min-width: 80px; /* Минимальная ширина контейнера */
}

.actions-cell .btn {
    width: 22px;
    height: 22px;
    min-width: 22px; /* Фиксированная ширина */
    min-height: 22px; /* Фиксированная высота */
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Запрещаем сжатие */
    font-size: 10pt;
}
/* Адаптация для мобильных */
@media (max-width: 768px) {
    .actions-buttons-container {
        min-width: 70px;
        gap: 3px;
    }
    
    .actions-cell .btn {
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 28px;
    }
}

/* Эффекты при наведении */
.actions-cell .btn:hover {
    /*transform: none;
    box-shadow: 0 0 0 2px var(--primary-color);*/
}


/* Стили для неактивных контрагентов */
.inactive-counterparty {
    opacity: 0.7;
    background-color: rgba(128, 128, 128, 0.1) !important;
}

.inactive-counterparty td {
    color: var(--text-color);
}

.inactive-counterparty .counterparty-name {
    color: var(--text-light);
}

.inactive-counterparty .btn-edit {
    pointer-events: none;
    opacity: 0.5;
    background-color: var(--darker-bg) !important;
    color: var(--text-light) !important;
    border: 1px solid var(--border-color) !important;
}

.inactive-counterparty .btn-edit i {
    color: var(--text-light) !important;
}

.inactive-counterparty .paid {
    opacity: 1;
    background-color: rgba(0, 255, 136, 0.1) !important;
    color: var(--success-color);
}

.inactive-counterparty .unpaid {
    opacity: 0.8;
    background-color: rgba(255, 0, 0, 0.05) !important;
}

/* Стили для счетов деактивированных контрагентов */
#invoices-table-container .inactive-counterparty {
    opacity: 0.6;
    background-color: rgba(128, 128, 128, 0.05) !important;
}

#invoices-table-container .inactive-counterparty td {
    color: var(--text-light);
}

#invoices-table-container .inactive-counterparty .btn-edit,
#invoices-table-container .inactive-counterparty .btn-delete {
    opacity: 0.4;
    pointer-events: none;
}

/* Стили для отменённых счетов */
#invoices-table-container .cancelled-invoice {
    opacity: 0.6;
    background-color: rgba(128, 128, 128, 0.05) !important;
}

#invoices-table-container .cancelled-invoice td {
    color: var(--text-light);
}

#invoices-table-container .cancelled-invoice .btn-edit,
#invoices-table-container .cancelled-invoice .btn-delete {
    opacity: 0.6;
    pointer-events: none;
}

#invoices-table-container .cancelled-invoice .invoice-status-cell {
    cursor: not-allowed;
    opacity: 0.7;
    background-color: rgba(128, 128, 128, 0.1) !important;
    color: var(--text-light) !important;
}

/* Стили для отключенных кнопок */
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--darker-bg) !important;
    color: var(--text-light) !important;
}

.btn:disabled:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Кнопка активации/деактивации */
.btn-toggle {
    background-color: var(--warning-color);
    color: var(--dark-color);
}

.btn-toggle i {
    transition: transform 0.3s;
}

.btn-toggle:hover i {
    transform: scale(1.2);
}

/* Стили для пустого состояния */
.empty-state {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100% - 120px);
    background-color: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    text-align: center;
    padding: 20px;
}

.empty-state-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 400px;
    width: 100%;
}

.empty-state i {
  font-size: 17pt;
  padding-right: 10px;
}

.empty-state h3 {
    color: var(--primary-color);
    margin: 0 0 10px 0;
    font-size: 1.5rem;
    font-weight: 600;
    width: 100%;
}

.empty-state p {
    color: var(--text-light);
    margin: 0 0 20px 0;
    font-size: 1.1rem;
    width: 100%;
}

#add-first-counterparty {
    padding: 12px 24px;
    font-size: 1.1rem;
    width: auto;
    margin-top: 10px;
}

/* Для мобильных устройств */
@media (max-width: 768px) {
    .empty-state {
        padding: 15px;
    }
    
    .empty-state i {
        font-size: 3rem;
        margin-bottom: 15px;
    }
    
    .empty-state h3 {
        font-size: 1.3rem;
    }
    
    .empty-state p {
        font-size: 1rem;
    }
    
    #add-first-counterparty {
        padding: 10px 20px;
        font-size: 1rem;
    }
}

/* Стили для формы контрагента */
#counterparty-form .form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

#counterparty-form .form-row .form-group {
    flex: 1;
    margin-bottom: 0;
}
#counterparty-form .full-width {
    width: 100%;
    clear: both; /* Принудительный перенос на новую строку */
    margin-top: 15px;
}

.form-checkbox {
    margin-top: 15px;
}

.form-checkbox label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 500;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.btn-secondary {
    background-color: var(--darker-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 10px 20px;
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--dark-color);
    padding: 10px 20px;
    font-weight: 600;
}

.btn-success {
    background-color: var(--success-color);
    color: var(--dark-color);
    padding: 10px 20px;
    font-weight: 600;
}

.btn-secondary:hover {
    background-color: var(--border-color);
}

.btn-primary:hover {
    background-color: var(--secondary-color);
}

.btn-success:hover {
    background-color: #00e699;
}

/* Для светлой темы */
.light-theme .btn-secondary {
    background-color: var(--darker-bg);
    color: var(--text-color);
}

.light-theme .btn-primary {
    background-color: var(--primary-color);
    color: white;
}

.light-theme .btn-secondary:hover {
    background-color: #d9d9d9;
}

/* Стили для переключателя "Включить прошедшие платежи" */
.toggle-label {
    display: flex;
/*    align-items: center;*/
    gap: 10px;
    cursor: pointer;
    font-weight: 500;
    margin-top: 15px;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
    margin-left: auto;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border-color);
    transition: .4s;
    border-radius: 24px;
    overflow: hidden;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-sizing: border-box;
}

input:checked + .toggle-slider {
    background-color: var(--primary-color);
}

input:checked + .toggle-slider:before {
    transform: translateX(26px);
}

/* Адаптация для мобильных */
@media (max-width: 768px) {
    .toggle-switch {
        width: 40px;
        height: 20px;
    }

    .toggle-slider {
        border-radius: 20px;
    }

    .toggle-slider:before {
        height: 14px;
        width: 14px;
        left: 3px;
        bottom: 3px;
    }
    
    input:checked + .toggle-slider:before {
        transform: translateX(20px);
    }
}

#periodic-fields .form-group:not(.form-row) {
    width: 100%;
    margin-top: 15px;
}

.toggle-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

#counterparty-form .toggle-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

#counterparty-form .toggle-switch {
    margin-left: auto; /* Переключатель справа */
}

/* Стили для улучшенного поля ввода чисел */
.number-input-container {
    margin-bottom: 20px;
}

.number-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.number-input-wrapper input[type="number"] {
    -moz-appearance: textfield; /* Убирает стрелки в Firefox */
    width: 100%;
    padding: 10px 40px 10px 15px; /* Правое поле для кнопок */
}

/* Убираем стрелки в Chrome/Safari */
.number-input-wrapper input[type="number"]::-webkit-outer-spin-button,
.number-input-wrapper input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.number-input-controls {
    position: absolute;
    right: 5px;
    display: flex;
    flex-direction: column;
    height: calc(100% - 10px);
}

.number-input-btn {
    background-color: var(--darker-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    width: 24px;
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

.number-input-btn:hover {
    background-color: var(--primary-color);
    color: var(--dark-color);
}

.number-input-btn.increment {
    border-radius: 0 4px 0 0;
    border-bottom: none;
}

.number-input-btn.decrement {
    border-radius: 0 0 4px 0;
}

/* Для светлой темы */
.light-theme .number-input-btn {
    background-color: var(--darker-bg);
    color: var(--text-color);
}

.light-theme .number-input-btn:hover {
    background-color: var(--primary-color);
    color: white;
}



/* Для десктопной версии - все в одну строку */
@media (min-width: 769px) {
    .app-header {
        flex-wrap: nowrap;
    }

    .header-main-row {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr !important;
        align-items: center;
        width: 100%;
        gap: 15px;
    }

    .app-title {
        margin: 0;
        justify-self: start;
    }

    .year-nav {
        justify-self: center;
    }

    .header-controls {
        display: flex;
        align-items: center;
        gap: 10px;
        justify-content: flex-end;
    }

    .burger-menu {
        display: none;
    }
}

/* Стили для бургер-меню */
.burger-menu {
    display: none;
    cursor: pointer;
    padding: 5px;
    position: relative;
}

.burger-icon {
    width: 25px;
    height: 3px;
    background-color: var(--primary-color);
    position: relative;
    transition: all 0.3s;
}

.burger-icon::before,
.burger-icon::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 3px;
    background-color: var(--primary-color);
    transition: all 0.3s;
}

.burger-icon::before {
    top: -8px;
}

.burger-icon::after {
    top: 8px;
}

.burger-menu.active .burger-icon {
    background-color: transparent;
}

.burger-menu.active .burger-icon::before {
    transform: rotate(45deg);
    top: 0;
}

.burger-menu.active .burger-icon::after {
    transform: rotate(-45deg);
    top: 0;
}

/* Мобильное меню */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -300px;
    width: 250px;
    height: 100vh;
    background-color: var(--card-bg);
    z-index: 1001;
    transition: right 0.3s;
    padding: 20px;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
    border-left: 1px solid var(--border-color);
    overflow-y: auto;
}

.mobile-menu.active {
    right: 0;
}

.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
}

.mobile-menu-overlay.active {
    display: block;
}

.mobile-menu .header-controls {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 20px;
}

.mobile-menu .btn {
    width: 100%;
    justify-content: flex-start;
}

/* Стили для кнопки уведомлений в мобильном меню */
.mobile-menu .btn-notifications {
   background: #5A14E8 !important;
  color: #fff !important;
}

.mobile-menu .btn-notifications:hover {
    background: var(--bg-hover) !important;
}

/* Отступ для иконок во всех кнопках мобильного меню */
.mobile-menu .btn i,
.mobile-header-controls .btn i {
    margin-right: 10px !important;
}

/* Показываем бургер только на мобильных */
@media (max-width: 768px) {
    .burger-menu {
        display: block;
    }
    
    .header-controls {
        display: none;
    }

    .mobile-header-controls .btn {
      margin: 0 0 20px 0;
      padding: 10px;
    }
}

/* Чередование цветов строк (zebra striping) - только для незакреплённых ячеек */
tbody tr:not(.summary-row):nth-child(odd) td:not(.counterparty-name-cell):not(:first-child) {
    background-color: rgba(255, 255, 255, 0.02);
}

tbody tr:not(.summary-row):nth-child(even) td:not(.counterparty-name-cell):not(:first-child) {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Чередование для деактивированных контрагентов - только для незакреплённых ячеек */
tbody tr.inactive-counterparty:nth-child(odd) td:not(.counterparty-name-cell):not(:first-child) {
    background-color: rgba(128, 128, 128, 0.08);
}

tbody tr.inactive-counterparty:nth-child(even) td:not(.counterparty-name-cell):not(:first-child) {
    background-color: rgba(128, 128, 128, 0.12);
}

/* Чередование для таблицы счетов - только для незакреплённых ячеек */
#invoices-table-container tbody tr:nth-child(odd) td:not(:first-child) {
    background-color: rgba(255, 255, 255, 0.02);
}

#invoices-table-container tbody tr:nth-child(even) td:not(:first-child) {
    background-color: rgba(0, 0, 0, 0.05);
}

#invoices-table-container tbody tr.inactive-counterparty:nth-child(odd) td:not(:first-child) {
    background-color: rgba(128, 128, 128, 0.08);
}

#invoices-table-container tbody tr.inactive-counterparty:nth-child(even) td:not(:first-child) {
    background-color: rgba(128, 128, 128, 0.12);
}

/* Чередование для таблицы контрагентов - только для незакреплённых ячеек */
#counterparties-table-container tbody tr:nth-child(odd) td:not(:first-child) {
    background-color: rgba(255, 255, 255, 0.02);
}

#counterparties-table-container tbody tr:nth-child(even) td:not(:first-child) {
    background-color: rgba(0, 0, 0, 0.05);
}

#counterparties-table-container tbody tr.inactive-counterparty:nth-child(odd) td:not(:first-child) {
    background-color: rgba(128, 128, 128, 0.08);
}

#counterparties-table-container tbody tr.inactive-counterparty:nth-child(even) td:not(:first-child) {
    background-color: rgba(128, 128, 128, 0.12);
}

/* Чередование для таблицы договоров - только для незакреплённых ячеек */
#contracts-table-container tbody tr:nth-child(odd) td:not(:first-child) {
    background-color: rgba(255, 255, 255, 0.02);
}

#contracts-table-container tbody tr:nth-child(even) td:not(:first-child) {
    background-color: rgba(0, 0, 0, 0.05);
}

#contracts-table-container tbody tr.inactive-counterparty:nth-child(odd) td:not(:first-child) {
    background-color: rgba(128, 128, 128, 0.08);
}

#contracts-table-container tbody tr.inactive-counterparty:nth-child(even) td:not(:first-child) {
    background-color: rgba(128, 128, 128, 0.12);
}

/* Выделение строки при наведении, исключая итоговые строки */
tbody tr:not(.summary-row):hover td {
    background-color: rgba(0, 209, 255, 0.15) !important;
}

/* Фиксированные колонки (имя/первая колонка) - исключая итоговые строки */
tbody tr:not(.summary-row):hover td.counterparty-name-cell,
#invoices-table-container tbody tr:not(.summary-row):hover td:first-child,
#contracts-table-container tbody tr:not(.summary-row):hover td:first-child,
#counterparties-table-container tbody tr:not(.summary-row):hover td.counterparty-logo-cell,
#table-container tbody tr:not(.summary-row):hover td:first-child,
#table-container tbody tr:not(.summary-row):hover td.counterparty-name-cell.compact-view {
    background-color: rgb(4, 83, 100) !important;
    color: #fff;
}

/* Сохраняем стили для оплаченных/неоплаченных ячеек - исключая итоговые строки */
tbody tr:not(.summary-row):hover td.paid {
    background-color: rgba(0, 255, 136, 0.35) !important;
}

tbody tr:not(.summary-row):hover td.unpaid {
    background-color: rgba(255, 45, 117, 0.35) !important;
}

/* Текущий месяц - исключая итоговые строки */
tbody tr:not(.summary-row):hover td.current-month:not(.paid):not(.unpaid) {
    background-color: rgba(0, 209, 255, 0.2) !important;
}

/* Для светлой темы - исключая итоговые строки */
.light-theme tbody tr:not(.summary-row):hover td {
    background-color: rgba(0, 102, 204, 0.1) !important;
}

.light-theme tbody tr:not(.summary-row):hover td.counterparty-name-cell,
#invoices-table-container.light-theme tbody tr:not(.summary-row):hover td:first-child,
#contracts-table-container.light-theme tbody tr:not(.summary-row):hover td:first-child,
#counterparties-table-container.light-theme tbody tr:not(.summary-row):hover td.counterparty-logo-cell,
#table-container.light-theme tbody tr:not(.summary-row):hover td:first-child,
#table-container.light-theme tbody tr:not(.summary-row):hover td.counterparty-name-cell.compact-view {
    background-color: rgba(0, 102, 204, 0.15) !important;
}

.light-theme tbody tr:not(.summary-row):hover td.paid {
    background-color: rgba(0, 168, 84, 0.3) !important;
}

.light-theme tbody tr:not(.summary-row):hover td.unpaid {
    background-color: rgba(245, 34, 45, 0.3) !important;
}

.light-theme tbody tr:not(.summary-row):hover td.current-month:not(.paid):not(.unpaid) {
    background-color: rgba(0, 102, 204, 0.2) !important;
}

.settings-modal .form-group {
    margin-bottom: 20px;
}

.settings-modal label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-weight: 500;
}

.settings-modal input[type="number"] {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--darker-bg);
    color: var(--text-color);
    max-width: 100px;
    transition: all 0.2s;
}

.settings-modal input[type="number"]:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 209, 255, 0.15);
}

.settings-modal input[type="text"],
.settings-modal input[type="password"] {
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--darker-bg);
    color: var(--text-color);
    transition: all 0.2s;
}

.settings-modal input[type="text"]:focus,
.settings-modal input[type="password"]:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 209, 255, 0.15);
}

/* Оформление секций в настройках блоками-карточками */
.settings-section {
    background: var(--card-bg);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    margin-bottom: 20px;
}

.settings-section h3 {
    margin: 0 0 20px 0;
    color: var(--primary-color);
    font-size: 1.3rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-section h3 i {
    color: var(--primary-color);
}

.settings-section h4 {
    margin: 0 0 15px 0;
    color: var(--secondary-color);
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-section h4 i {
    color: var(--secondary-color);
}

/* Убираем старые стили для h3 и h4 в settings-modal */

/* Заголовки в модальном окне статистики контрагента */
#counterparty-stats-modal h4 {
    color: var(--primary-color);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 25px 0 15px 0;
    padding: 10px 15px;
    background: var(--card-bg);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 8px rgba(0, 209, 255, 0.15);
}

#counterparty-stats-modal h4 i {
    color: var(--primary-color);
    font-size: 1.1rem;
}

/* Исправление для мобильной версии - хедер в одну строку */
@media (max-width: 768px) {
    /* Компактный хедер в одну строку */
    .app-header {
        padding: 8px 10px !important;
        min-height: 40px !important;
    }

    .header-main-row {
        display: grid !important;
        grid-template-columns: auto auto auto !important;
        align-items: center;
        width: 100%;
        gap: 8px !important;
    }

    .app-title {
        font-size: 16px !important;
        display: flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        margin: 0 !important;
        justify-self: start !important;
    }

    .year-nav {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        justify-self: center !important;
        min-height: 28px;
    }

    .year-nav .btn {
        min-width: 28px !important;
        height: 28px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .year-nav .btn i {
        font-size: 14px !important;
    }

    .current-year {
        font-size: 16px !important;
        min-width: 50px !important;
        text-align: center !important;
    }

    .header-controls {
        display: none !important;
    }

    .burger-menu {
        display: block !important;
        justify-self: end !important;
        min-width: 32px !important;
    }
}

    /* Скрываем текст кнопок, оставляем только иконки */
    .btn-text {
        display: none !important;
    }

    .btn-add i,
    .btn-chart i,
    .btn-import-export i {
        margin: 0 !important;
    }
    
    /* Вкладки компактнее */
    .main-tabs {
        flex-wrap: wrap;
        gap: 3px;
    }
    
    .main-tab-btn {
        padding: 8px 10px !important;
        font-size: 16px !important;
    }

    /* Таблица на всю высоту */
    .table-wrapper {
        height: 100% !important;
        border-radius: 8px !important;
    }

    #table-container,
    #counterparties-table-container,
    #invoices-table-container,
    #contracts-table-container {
        min-height: 200px !important;
    }

    /* Переключатель в заголовке - как в действиях */
    .counterparty-column .btn-toggle {
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 28px;
        max-width: 28px;
        max-height: 28px;
        padding: 0;
        margin: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 10pt;
        background-color: var(--warning-color);
        color: var(--dark-color);
        border: none;
        cursor: pointer;
    }
    
    .counterparty-column .btn-toggle i {
        font-size: 12px;
        transition: transform 0.3s;
    }
    
    .counterparty-column .btn-toggle:hover i {
        transform: scale(1.2);
    }

    /* Улучшаем видимость итоговых строк */
    .summary-row td {
        padding: 6px 4px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
/*        border: 1px solid var(--border-color) !important;*/
    }

    /* Фиксируем первую ячейку в итоговых строках */
    .summary-row td.summary-label-cell {
        position: sticky;
        left: 0;
        z-index: 105;
        min-width: 100px;
        box-shadow: 2px 0 5px rgba(0,0,0,0.2);
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
    }

    /* Уменьшаем отступы в таблицах для мобильных */
    table th {
        padding: 6px 4px !important;
    }

    table td {
        padding: 4px 3px !important;
    }
    
    /* Порядок итоговых строк для мобильных - высота 30px */
    .year-total-row {
        bottom: 0;
    }

    .quarter-total-row {
        bottom: 30px;
    }

    .month-total-row {
        bottom: 60px;
    }

    /* Бордеры в итоговых строках */
    .year-total-row td,
    .quarter-total-row td,
    .month-total-row td {
/*        border: 1px solid var(--border-color) !important;*/
    }

    /* Бордеры кварталов в итоговых строках */
    .month-total-row .month-total:last-of-type {
        border-right: 2px solid var(--primary-color) !important;
    }

    .quarter-total-row .quarter-total:last-of-type {
        border-right: 2px solid var(--primary-color) !important;
    }
}

@media (max-width: 480px) {
    /* Ещё более компактный хедер */
    .app-header {
        padding: 5px 8px !important;
    }

    .app-title {
        font-size: 14px !important;
    }

    .header-controls .btn {
        min-width: 28px !important;
        height: 28px !important;
    }

    .current-year {
        font-size: 14px !important;
        min-width: 35px !important;
    }

    /* Уменьшаем отступы в итоговых строках */
    .summary-row td {
        padding: 4px 2px !important;
    }

    /* Уменьшаем отступы в таблицах */
    table td, table th {
        padding: 4px 2px !important;
    }

    /* Уменьшаем размеры кнопок в ячейках действий */
    .actions-cell .btn {
        width: 22px;
        height: 22px;
        min-width: 22px;
        min-height: 22px;
        font-size: 9px;
    }

    .actions-buttons-container {
        gap: 2px;
    }
    
    /* Статистика в строках */
    .stat-item {
        flex-wrap: wrap !important;
        padding: 8px 10px !important;
    }
    
    .stat-item .stat-item-info {
        flex-basis: 100% !important;
        margin-bottom: 5px !important;
    }
}




/* Стили для поля "Начало периода" */
#start-period {
    width: 120px;
    margin-left: 10px;
}

.settings-modal .form-group label {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#settings-form input[type="number"] {
    width: 120px !important;
}

/*стили для неактивных кнопок навигации*/
.year-nav button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    color: var(--text-light) !important;
}

.year-nav button:disabled:hover {
    transform: none !important;
    color: var(--text-light) !important;
}


/* Анимации */
@keyframes macosModalOpen {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
        filter: blur(2px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0);
    }
}

@keyframes macosModalClose {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0);
    }
    100% {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
        filter: blur(2px);
    }
}

@keyframes macosOverlayOpen {
    0% {
        opacity: 0;
        backdrop-filter: blur(0);
    }
    100% {
        opacity: 1;
        backdrop-filter: blur(8px);
    }
}

@keyframes macosOverlayClose {
    0% {
        opacity: 1;
        backdrop-filter: blur(8px);
    }
    100% {
        opacity: 0;
        backdrop-filter: blur(0);
    }
}

.modal {
    animation: macosOverlayOpen 0.6s cubic-bezier(0.36, 0.66, 0.04, 1) forwards;
}

.modal.closing {
    animation: macosOverlayClose 0.6s ease-out forwards !important;
}

.modal-content {
    animation: macosModalOpen 0.6s cubic-bezier(0.36, 0.66, 0.04, 1) forwards;
    transform-origin: center;
}

.modal.closing .modal-content {
    animation: macosModalClose 0.6s cubic-bezier(0.36, 0.66, 0.04, 1) forwards !important;
}

/* Уведомления */
@keyframes macosNotificationOpen {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    70% {
        opacity: 1;
        transform: translateY(-5px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes macosNotificationClose {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    30% {
        opacity: 0.8;
        transform: translateY(5px) scale(0.98);
    }
    100% {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
}

.notification {
    animation: macosNotificationOpen 0.6s cubic-bezier(0.36, 0.66, 0.04, 1) forwards;
}

.notification.closing {
    animation: macosNotificationClose 0.6s cubic-bezier(0.36, 0.66, 0.04, 1) forwards;
}

/* Диалог подтверждения */
@keyframes macosDialogOpen {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    60% {
        opacity: 1;
        transform: scale(1.03) translateY(-2px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes macosDialogClose {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    100% {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
}

.confirm-dialog {
    animation: macosOverlayOpen 0.6s ease-out forwards;
}

.confirm-dialog.closing {
    animation: macosOverlayClose 0.6s ease-out forwards;
}

.confirm-content {
    animation: macosDialogOpen 0.6s cubic-bezier(0.36, 0.66, 0.04, 1) forwards;
}

.confirm-dialog.closing .confirm-content {
    animation: macosDialogClose 0.6s ease-out forwards;
}

/* Мобильное меню */
@keyframes macosMenuOpen {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes macosMenuClose {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.mobile-menu {
    animation: macosMenuOpen 0.6s cubic-bezier(0.36, 0.66, 0.04, 1) forwards;
}

.mobile-menu.closing {
    animation: macosMenuClose 0.6s ease-out forwards !important;
}

/* Эффекты для кнопок */
.btn {
    transition: all 0.15s cubic-bezier(0.36, 0.66, 0.04, 1);
}

.btn:active {
    transform: scale(0.97);
}

/* Тени */
.modal-content,
.notification,
.confirm-content {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), 
                0 0 0 1px rgba(255, 255, 255, 0.05);
}

.light-theme .modal-content,
.light-theme .notification,
.light-theme .confirm-content {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 
                0 0 0 1px rgba(0, 0, 0, 0.05);
}

/* Анимация появления кнопки закрытия */
@keyframes closeButtonFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-content .close {
    animation: closeButtonFadeIn 0.6s 0.3s cubic-bezier(0.36, 0.66, 0.04, 1) both;
}



@media (max-width: 768px) {
    /* Исправление проблемы с "прострелом" кликов на мобильных */
    .modal {
        background-color: #000 !important; /* Полностью черный фон без прозрачности */
        backdrop-filter: none !important; /* Отключаем размытие, которое может глючить */
        -webkit-backdrop-filter: none !important;
        pointer-events: auto !important;
    }

    .modal-content {
        width: 95% !important;
        max-height: 95vh !important;
        margin: auto !important;
        pointer-events: auto !important; /* Контент тоже должен ловить клики */
    }

    /* Гарантируем, что кнопки внутри формы имеют высокий приоритет событий */
    #counterparty-modal .btn,
    #counterparty-modal button,
    #counterparty-modal input[type="submit"] {
        pointer-events: auto !important;
        position: relative;
        z-index: 2001; /* Выше фона модального окна */
    }

    #login-btn:disabled {
        opacity: 0.8;
        background-color: var(--primary-color);
    }
    
    .fa-spinner {
        margin-right: 8px;
    }
}
/* Центрируeм глобальный контейнер уведомлений */
#notification-container {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 10000 !important;
}

/* Общий стиль для контекстного меню */
.context-menu {
  display: none;
  position: fixed;
  background: var(--context-bg, #222);
  color: var(--context-fg, #fff);
  border: 2px solid var(--primary-color);
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  z-index: 1500; /* Ниже модальных окон (2000), но выше контента */
  min-width: 220px;
  overflow: hidden;
  font-size: 14px;
}

.context-menu ul {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}

.context-menu li {
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.2s;
  display: none; /* Скрыто по умолчанию */
}

.context-menu li:hover {
  background: var(--context-hover, #444);
}

/* Показываем иконки в контекстном меню */
.context-menu li i {
  margin-right: 8px;
  width: 16px;
  text-align: center;
}

/* Разделитель в контекстном меню */
.context-menu .context-divider {
  border-top: 1px solid var(--border-color);
  margin: 5px 0;
  padding: 0;
  cursor: default;
}

.context-menu .context-divider:hover {
  background: transparent;
}

/* Скрываем пункты для платежей по умолчанию */
.context-menu .context-item-payment {
  display: none;
}

/* Стили для светлой темы */
body.light-theme .context-menu {
  --context-bg: #f9f9f9;
  --context-fg: #222;
  --context-hover: #e0e0e0;
}

/* === Стили для новых элементов === */

/* Кнопка выхода */
.btn-logout {
    background-color: var(--danger-color) !important;
    color: white !important;
}

.btn-logout:hover {
    opacity: 0.9;
}

/* Скрытие/показ кнопок в зависимости от вкладки */
.tab-specific-btn {
    display: none !important;
}

.tab-specific-btn.visible {
    display: inline-flex !important;
}

.common-btn {
    display: inline-flex !important;
}

/* Стили для модального окна статистики */
.modal-content-large {
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
}

.stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.stats-header h3 {
    margin: 0;
    color: var(--primary-color);
}

.stats-year-selector {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stats-year-selector button {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.stats-year-selector button:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.stats-content {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.stats-section {
    background: var(--card-bg);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(0, 209, 255, 0.3);
    border-left: 3px solid var(--primary-color);
}

.stats-section h4 {
    margin: 0 0 15px 0;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}

.stat-card {
    background: var(--darker-bg);
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid var(--border-color);
}

.stat-card .stat-label {
    display: block;
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 8px;
}

.stat-card .stat-value {
    display: block;
    font-size: 20px;
    font-weight: bold;
    color: var(--text-color);
}

.stat-card.stat-success {
    border-color: var(--success-color);
}

.stat-card.stat-success .stat-value {
    color: var(--success-color);
}

.stat-card.stat-warning {
    border-color: var(--warning-color);
}

.stat-card.stat-warning .stat-value {
    color: var(--warning-color);
}

.stat-card.stat-primary {
    border-color: var(--primary-color);
}

.stat-card.stat-primary .stat-value {
    color: var(--primary-color);
}

.stat-card.stat-danger {
    border-color: var(--danger-color);
}

.stat-card.stat-danger .stat-value {
    color: var(--danger-color);
}

.stats-list {
    display: block;
    width: 100%;
}

.stat-item {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 15px;
    background: var(--darker-bg);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    width: 100%;
    box-sizing: border-box;
    flex-wrap: nowrap !important;
    gap: 10px;
}

.stat-item .stat-item-info {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 15px;
    flex: 1;
    min-width: 200px;
}

.stat-item .stat-item-number {
    font-weight: bold;
    color: var(--primary-color);
    white-space: nowrap;
}

.stat-item .stat-item-date {
    font-size: 12px;
    color: var(--text-light);
    white-space: nowrap;
}

.stat-item .stat-item-basis {
    font-size: 12px;
    color: var(--text-light);
    white-space: nowrap;
}

.stat-item .stat-item-amount {
    font-weight: bold;
    font-size: 14px;
    min-width: 70px;
    text-align: right;
    white-space: nowrap;
}

.stat-item .stat-item-status,
.stat-item .stat-item-status-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: bold;
    min-width: 70px;
    text-align: center;
    white-space: nowrap;
    display: inline-block !important;
}

.stat-item .stat-item-number {
    font-weight: bold;
    color: var(--primary-color);
}

.stat-item .stat-item-date {
    font-size: 12px;
    color: var(--text-light);
}

.stat-item .stat-item-basis {
    font-size: 12px;
    color: var(--text-light);
}

.stat-item .stat-item-amount {
    font-weight: bold;
    font-size: 16px;
}

.stat-item .stat-item-status {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
}

.stat-item .stat-item-amount {
    font-weight: bold;
    font-size: 16px;
    white-space: nowrap;
    margin: 0 15px;
}

.stat-item .stat-item-status.paid {
    background: rgba(0, 255, 136, 0.2);
    color: var(--success-color);
}

.stat-item .stat-item-status.unpaid {
    background: rgba(255, 204, 0, 0.2);
    color: var(--warning-color);
}

/* Стили для таблицы счетов */
.invoice-status-cell {
    text-align: center;
    cursor: pointer;
    user-select: none;
}

.invoice-status-cell.paid {
    background-color: rgba(0, 255, 136, 0.15);
    color: var(--success-color);
}

.invoice-status-cell.unpaid {
    background-color: rgba(255, 204, 0, 0.15);
    color: var(--warning-color);
}

.invoice-status-cell.cancelled {
    background-color: rgba(128, 128, 128, 0.15);
    color: var(--text-light);
}

.invoice-status-cell:hover {
    opacity: 0.8;
}

/* Запрет hover эффекта для отменённых счетов */
.cancelled-invoice .invoice-status-cell:hover {
    opacity: 0.7;
}

/* Ячейка примечания в таблице счетов */
.invoice-note-cell {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
    font-size: 0.9em;
}

/* Логотип контрагента в таблице */
.counterparty-logo-cell {
    width: 60px;
    text-align: center;
    padding: 8px 4px;
    vertical-align: middle;
}

.counterparty-logo-img {
    max-width: 40px;
    max-height: 40px;
    border-radius: 6px;
    object-fit: contain;
    vertical-align: middle;
}

/* Сокращенное наименование контрагента */
.counterparty-short-name-badge {
    display: inline-block;
    padding: 6px 10px;
    background: var(--primary-color);
    color: var(--dark-color);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 0 1px rgba(0,0,0,0.3);
    vertical-align: middle;
}

/* Вкладка Задачи - календарь */
.tasks-calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--card-bg);
    flex-wrap: wrap;
    gap: 10px;
}

.tasks-legend {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-color);
}

.legend-item .task-icon {
    display: inline-flex;
    margin: 0 2px;
}

.legend-item .task-icon.priority-high::before {
    border-color: #ff8800 !important;
}

.legend-item .task-icon.priority-normal::before {
    border-color: rgba(255,255,255,0.8) !important;
}

.legend-item .task-icon.priority-low::before {
    border-color: #6c757d !important;
}

/* Для легенды - иконки без пульсации */
.legend-item .task-icon.planned {
    animation: none;
}

/* Квадратные бордеры для статусов в легенде */
.legend-item .status-dot {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 2px solid;
    display: inline-block;
}

.legend-item .status-dot.status-planned {
    background: var(--danger-color);
    border: none;
    border-radius: 50%;
}

.legend-item .status-dot.status-in-progress {
    background: #0d6efd;
    border: none;
    border-radius: 50%;
}

.legend-item .status-dot.status-needs-clarification {
    background: var(--warning-color);
    border: none;
    border-radius: 50%;
}

.legend-item .status-dot.status-completed { 
    background: var(--success-color);
    border: none;
    border-radius: 50%;
}

.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.status-planned {
    background-color: var(--danger-color);
}

.status-in-progress {
    background-color: var(--primary-color);
}

.status-needs-clarification {
    background-color: var(--warning-color);
}

.status-completed {
    background-color: var(--success-color);
}

/* Статусы платежей */
.status-dot.status-paid {
    background-color: var(--success-color);
}

.status-dot.status-unpaid {
    background-color: var(--danger-color);
}

/* Индикатор нескольких платежей в ячейке - слева как у разовых */
.multiple-payments {
    position: relative;
}

.multiple-payments::before {
    content: '◤';
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: 8px;
    color: #0095ff; /* цвет для нескольких платежей */
}

/* Календарь задач */
.tasks-calendar {
    display: grid;
    grid-template-columns: 200px repeat(12, minmax(80px, 1fr));
    gap: 1px;
    background-color: var(--border-color);
    border: 1px solid var(--border-color);
}

.tasks-calendar-wrapper {
    overflow: auto;
    max-height: calc(100vh - 280px);
}

.tasks-calendar-header-cell {
    background-color: var(--darker-bg);
    padding: 10px 5px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    position: sticky;
    top: 0;
    z-index: 10;
    border: 1px solid var(--border-color);
    white-space: nowrap;
}

.tasks-calendar-counterparty {
    background: linear-gradient(90deg, 
        rgba(26, 26, 46, 0.98) 0%, 
        rgba(26, 26, 46, 0.95) 85%,
        rgba(26, 26, 46, 0.9) 100%);
    padding: 10px;
    font-size: 14px;
    font-weight: 500;
    border-left: 2px solid var(--primary-color);
    position: sticky;
    left: 0;
    z-index: 20;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid var(--border-color);
}

/* Фон для закреплённой колонки в светлой теме */
.light-theme .tasks-calendar-counterparty {
    background: linear-gradient(90deg,
        rgba(245, 245, 245, 0.98) 0%,
        rgba(245, 245, 245, 0.95) 85%,
        rgba(245, 245, 245, 0.9) 100%);
}

/* Выделение строки при наведении в светлой теме */
.light-theme .tasks-calendar-row:hover .tasks-calendar-cell {
    background: rgba(0, 102, 204, 0.1) !important;
    background-color: rgba(0, 102, 204, 0.1) !important;
}

.light-theme .tasks-calendar-row:hover .tasks-calendar-counterparty {
    background: rgb(204, 226, 249) !important;
    background-color: rgb(204, 226, 249) !important;
}

.tasks-calendar-cell {
    background-color: var(--card-bg);
    min-height: 40px;
    padding: 4px;
    cursor: default;
    transition: background-color 0.2s;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    border: 1px solid var(--border-color);
}

.tasks-calendar-cell:hover {
    background-color: rgba(0, 209, 255, 0.05);
}

.tasks-calendar-cell.has-task {
/*    background-color: rgba(0, 0, 0, 0.03);*/
    cursor: default;
}

.light-theme .tasks-calendar-cell.has-task {
/*    background-color: rgba(0, 0, 0, 0.05);*/
}

/* Drag-and-drop стили для ячеек */
.tasks-drop-target.drag-over {
    background-color: rgba(0, 209, 255, 0.15) !important;
    box-shadow: inset 0 0 0 2px var(--primary-color);
}

.tasks-drop-target.drag-over-invalid {
    background-color: rgba(255, 77, 77, 0.15) !important;
    box-shadow: inset 0 0 0 2px #ff4d4d;
    cursor: not-allowed !important;
}

/* Линия-индикатор позиции вставки — вертикальная между горизонтальными иконками */
.task-insert-line {
    position: fixed;
    width: 3px;
    height: 24px;
    background: var(--primary-color);
    border-radius: 2px;
    z-index: 10000;
    pointer-events: none;
    box-shadow: 0 0 8px rgba(0, 209, 255, 0.6);
    transition: left 0.05s ease-out;
}

.task-insert-line::before,
.task-insert-line::after {
    content: '';
    position: absolute;
    left: -3px;
    width: 9px;
    height: 9px;
    background: var(--primary-color);
    border-radius: 50%;
}

.task-insert-line::before {
    top: -5px;
}

.task-insert-line::after {
    bottom: -5px;
}

/* Срочные задачи - мигающая рамка */
.task-icon.task-urgent {
    animation: urgentPulse 1.5s ease-in-out infinite;
}

@keyframes urgentPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.7);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(255, 77, 77, 0);
    }
}

.light-theme .task-icon.task-urgent {
    animation: urgentPulseLight 1.5s ease-in-out infinite;
}

@keyframes urgentPulseLight {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(204, 0, 0, 0.5);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(204, 0, 0, 0);
    }
}

.task-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
    transition: transform 0.2s;
    position: relative;
    flex-shrink: 0;
    margin: 5px;
    z-index: 1;
}

.task-icon i {
    position: relative;
    z-index: 2;
}

.task-icon:hover {
    transform: scale(1.15);
    z-index: 1001;
}

.legend-item .task-icon:hover {
    transform: none;
    z-index: 1001;
}

/* Квадратный бордер для приоритета (с отступом) */
.task-icon::before {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border-radius: 10px;
    border: 2px solid transparent;
    pointer-events: none;
}

/* Тултип для иконок задач (JavaScript) */
.task-icon-tooltip {
    position: fixed;
    background: var(--darker-bg);
    color: var(--text-color);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    border: 2px solid var(--primary-color);
    pointer-events: none;
    animation: tooltip-fade-in 0.3s ease-in-out both;
    display: none;
    visibility: hidden;
}

@keyframes tooltip-fade-in {
    from {
        opacity: 0;
        visibility: hidden;
    }
    to {
        opacity: 1;
        visibility: visible;
    }
}

/* Статусы задач - ЦВЕТА ФОНА (круглые) */
.task-icon.planned {
    background-color: var(--danger-color);
    animation: pulse-task-bg 1.5s ease-in-out infinite;
    position: relative;
}

/* Бордер не должен мигать у запланированных задач */
.task-icon.planned::before {
    animation: none !important;
    z-index: 1;
}

/* Анимация только для фона (opacity) */
@keyframes pulse-task-bg {
    0%, 100% {
        background-color: var(--danger-color);
    }
    50% {
        background-color: rgba(255, 45, 117, 0.5);
    }
}

.task-icon.in-progress { 
    background-color: #0d6efd;
}

.task-icon.in-progress i {
    animation: fa-spin 2s infinite linear;
}

.task-icon.needs-clarification { 
    background-color: var(--warning-color);
    color: var(--dark-color);
}

.task-icon.completed { 
    background-color: var(--success-color);
    opacity: 0.5;
}

/* Приоритеты задач - КВАДРАТНЫЙ БОРДЕР */
.task-icon.priority-high::before {
    border-color: #ff8800 !important;
}

.task-icon.priority-normal::before {
    border-color: rgba(255,255,255,0.8) !important;
}

.task-icon.priority-low::before {
    border-color: #6c757d !important;
}

/* Модальное окно задачи */
.task-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.task-file-list {
    max-height: 200px;
    overflow-y: auto;
}

.task-file-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: 8px;
    background-color: var(--card-bg);
    transition: background-color 0.2s;
}

.task-file-item:hover {
    background-color: rgba(0, 209, 255, 0.1);
}

@media (max-width: 1024px) {
    .task-modal-grid {
        grid-template-columns: 1fr;
    }
    
    .tasks-calendar {
        grid-template-columns: 150px repeat(12, minmax(80px, 1fr));
    }
    
    .tasks-calendar-counterparty {
        
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .tasks-calendar-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .tasks-legend {
        flex-wrap: wrap;
    }
    
    .tasks-calendar {
        grid-template-columns: 120px repeat(12, minmax(60px, 1fr));
        font-size: 10px;
    }
    
    .tasks-calendar-counterparty {
        
        font-size: 12px;
    }
    
    .task-icon {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }
}

/* Контекстное меню - разделитель */
.context-divider {
    border-top: 1px solid var(--border-color);
    margin: 4px 0;
    pointer-events: none;
}

.context-menu li i {
    margin-right: 8px;
    width: 16px;
    text-align: center;
}

/* Превью логотипа */
#logo-preview img {
    max-width: 100px;
    max-height: 100px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

/* Стили для светлой темы - статистика */
body.light-theme .stats-section {
    background: #fff;
    border-color: #ddd;
    border-left: 4px solid var(--primary-color);
}

body.light-theme .stat-card {
    background: #f5f5f5;
    border-color: #ddd;
}

body.light-theme .stat-item {
    background: #f5f5f5;
    border-color: #ddd;
}

/* Названия контрагентов в статистике - читаемый цвет */
#counterparty-stats-modal h3 {
    color: var(--text-color);
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 25px 0;
    padding: 12px 18px;
    border-radius: 10px;
    background: var(--card-bg);
    box-shadow: 0 4px 15px rgba(0, 209, 255, 0.15);
    display: flex;
    align-items: center;
    gap: 12px;
}

#counterparty-stats-modal h3 i {
    color: var(--primary-color);
    font-size: 1.4rem;
}

/* Статусы задач - цвет текста белый на всех фонах */
.stat-item-status-badge.status-planned,
.stat-item-status-badge.status-in-progress,
.stat-item-status-badge.status-needs-clarification {
    color: #fff;
    font-weight: 600;
}

/* Выполнена - зелёный фон, чёрный текст в тёмной теме */
.stat-item-status-badge.status-completed {
    color: #000;
    font-weight: 600;
}

/* ========================================
   Стили для модуля Договоры (Contracts)
   ======================================== */

/* Бейджи статусов */
.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
}

.status-active {
    background-color: rgba(0, 255, 136, 0.15);
    color: var(--success-color);
}

.status-inactive {
    background-color: rgba(255, 45, 117, 0.15);
    color: var(--danger-color);
}

.status-cancelled {
    background-color: rgba(128, 128, 128, 0.15);
    color: var(--text-light);
}

/* Бейджи файлов */
.files-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background-color: rgba(0, 209, 255, 0.1);
    color: var(--primary-color);
    border-radius: 12px;
    font-size: 13px;
}

.files-badge i {
    font-size: 12px;
}

/* Список файлов договора */
.contract-files-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contract-file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background-color: var(--darker-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.contract-file-item .file-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.contract-file-item .file-info i {
    font-size: 20px;
    color: var(--primary-color);
}

.contract-file-item .file-name {
    font-weight: 500;
}

.contract-file-item .file-size {
    color: var(--text-light);
    font-size: 12px;
}

.contract-file-item .file-actions {
    display: flex;
    gap: 8px;
}

/* Малые кнопки */
.btn-sm {
    padding: 6px 10px;
    font-size: 13px;
    min-width: auto;
    height: auto;
}

/* Секция счетов по годам */
.contract-invoices-year-section {
    margin-bottom: 25px;
    padding: 15px;
    background-color: var(--darker-bg);
    border-radius: 8px;
    overflow-x: auto; /* Прокрутка по горизонтали если нужно */
    max-width: 100%; /* Не шире родителя */
}

.contract-invoices-year-section h4 {
    margin-bottom: 15px;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap; /* Заголовок не переносится */
}

.contract-invoices-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 15px;
}

.stat-item {
    padding: 10px;
    background-color: var(--card-bg);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0; /* Предотвращаем растягивание */
}

.stat-item .stat-label {
    font-size: 12px;
    color: var(--text-light);
}

.stat-item .stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
}

.stat-item.paid .stat-value {
    color: var(--success-color);
}

.stat-item.unpaid .stat-value {
    color: var(--danger-color);
}

/* Таблица счетов в модальном окне */
.contract-invoices-list .invoices-table {
    width: 100%;
    max-width: 100%; /* Не шире родителя */
    border-collapse: collapse;
    margin-top: 10px;
    table-layout: fixed; /* Фиксированная ширина таблицы */
    font-size: 13px; /* Уменьшенный шрифт */
}

.contract-invoices-list .invoices-table th,
.contract-invoices-list .invoices-table td {
    padding: 6px 8px; /* Компактные отступы */
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    word-wrap: break-word; /* Перенос длинных слов */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Фиксированные ширины колонок (4 колонки) - компактные */
.contract-invoices-list .invoices-table th:nth-child(1),
.contract-invoices-list .invoices-table td:nth-child(1) {
    width: 60px; /* № счёта */
}

.contract-invoices-list .invoices-table th:nth-child(2),
.contract-invoices-list .invoices-table td:nth-child(2) {
    width: 90px; /* Дата */
}

.contract-invoices-list .invoices-table th:nth-child(3),
.contract-invoices-list .invoices-table td:nth-child(3) {
    width: 80px; /* Сумма */
}

.contract-invoices-list .invoices-table th:nth-child(4),
.contract-invoices-list .invoices-table td:nth-child(4) {
    width: 80px; /* Статус */
}

.contract-invoices-list .invoices-table th {
    background-color: var(--darker-bg);
    font-weight: 600;
    color: var(--primary-color);
}

.contract-invoices-list .invoices-table tr:hover {
    background-color: rgba(0, 209, 255, 0.05);
}

/* Добавляем прокрутку для содержимого модального окна */
#contract-invoices-by-year {
    max-height: 500px;
    overflow-y: auto;
    padding-right: 10px;
}

#contract-invoices-by-year::-webkit-scrollbar {
    width: 8px;
}

#contract-invoices-by-year::-webkit-scrollbar-track {
    background: var(--darker-bg);
    border-radius: 4px;
}

#contract-invoices-by-year::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 4px;
}

#contract-invoices-by-year::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color);
}

/* Просмотрщик файлов */
#contract-file-viewer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#contract-file-viewer-content img {
    max-width: 100%;
    max-height: 500px;
    border-radius: 8px;
}

#contract-file-viewer-content iframe {
    width: 100%;
    height: 500px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.file-preview-info {
    text-align: center;
    padding: 40px;
}

.file-preview-info i {
    font-size: 64px;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.file-preview-info p {
    margin: 10px 0;
}

/* Empty message */
.empty-message {
    text-align: center;
    padding: 40px;
    color: var(--text-light);
    font-style: italic;
}

/* Кнопка просмотра в таблице */
.btn-view {
    background-color: var(--secondary-color);
    color: white;
}

.btn-view:hover {
    box-shadow: 0 4px 12px rgba(0, 149, 255, 0.4);
}

/* Адаптация для мобильных */
@media (max-width: 768px) {
    .contract-file-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .contract-file-item .file-actions {
        width: 100%;
        justify-content: flex-end;
    }
    
    .contract-invoices-stats {
        grid-template-columns: 1fr 1fr;
    }
    
    .contract-invoices-list .invoices-table {
        font-size: 12px;
    }
    
    .contract-invoices-list .invoices-table th,
    .contract-invoices-list .invoices-table td {
        padding: 6px;
    }
}

/* Примечание к форме */
.form-note {
    font-size: 12px;
    color: var(--text-light);
    margin-top: 5px;
    font-style: italic;
}

/* Примечание в настройках - более выразительное */
.settings-section .form-note {
    background: var(--darker-bg);
    padding: 8px 12px;
    border-radius: 6px;
    border-left: 3px solid var(--secondary-color);
    margin-top: 8px;
}

/* Drag & Drop зона для загрузки файлов */
.file-drop-zone {
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    background: var(--darker-bg);
    transition: all 0.3s ease;
    cursor: pointer;
    margin-bottom: 10px;
}

.file-drop-zone:hover {
    border-color: var(--primary-color);
    background: rgba(0, 209, 255, 0.05);
}

.file-drop-zone.drag-over {
    border-color: var(--primary-color);
    background: rgba(0, 209, 255, 0.1);
    border-style: solid;
    transform: scale(1.02);
}

.file-drop-zone i {
    font-size: 32px;
    color: var(--primary-color);
    margin-bottom: 10px;
    display: block;
}

.file-drop-zone .drop-text {
    color: var(--text-color);
    font-size: 14px;
}

.file-drop-zone .drop-hint {
    color: var(--text-light);
    font-size: 12px;
    margin-top: 5px;
}

.file-drop-zone input[type="file"] {
    display: none;
}

/* Стилизация опций платежей в select с цветовым кодированием статусов */
select#task-link-object option[data-paid="1"] {
    background-color: rgba(0, 255, 136, 0.2);
    color: var(--success-color);
    font-weight: 600;
}

select#task-link-object option[data-paid="0"] {
    background-color: rgba(255, 45, 117, 0.2);
    color: var(--danger-color);
    font-weight: 600;
}

/* Для светлой темы */
body:not(.dark-theme) select#task-link-object option[data-paid="1"] {
    background-color: rgba(0, 255, 136, 0.3);
    color: #00a86b;
}

body:not(.dark-theme) select#task-link-object option[data-paid="0"] {
    background-color: rgba(255, 45, 117, 0.3);
    color: #d63031;
}

/* === Стили для списка резервных копий === */
.backups-list {
    max-height: 500px;
    overflow-y: auto;
    border-radius: 8px;
    padding: 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.backups-list::-webkit-scrollbar {
    width: 8px;
}

.backups-list::-webkit-scrollbar-track {
    background: var(--card-bg);
    border-radius: 4px;
}

.backups-list::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.backups-list::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

.backups-list-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.backup-item {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--primary-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    transition: all 0.2s ease;
}

.backup-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 209, 255, 0.15);
}

.backup-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: var(--primary-color);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    border-radius: 6px;
    flex-shrink: 0;
}

/* Номер для ручного бэкапа - зелёный */
.backup-item[data-backup-type="manual"] .backup-number {
    background-color: var(--success-color);
    color: #000;
}

.light-theme .backup-item[data-backup-type="manual"] .backup-number {
    background-color: var(--success-color);
    color: #fff;
}

.backup-info-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.backup-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.backup-date {
    font-weight: 600;
    color: var(--text-color);
    font-size: 13px;
    white-space: nowrap;
}

.backup-meta {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.backup-size {
    color: var(--text-light);
    font-size: 11px;
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 4px;
}

.backup-type {
    color: var(--text-light);
    font-size: 11px;
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 4px;
}

.backup-type.manual {
    background: rgba(0, 255, 136, 0.15);
    color: var(--success-color);
    font-weight: 600;
}

.backup-type.auto {
    background: rgba(0, 209, 255, 0.15);
    color: var(--primary-color);
}

.backup-status {
    display: flex;
    gap: 8px;
    font-size: 11px;
}

.backup-status .status-ok {
    color: var(--success-color);
    font-weight: 500;
}

.backup-status .status-error {
    color: var(--danger-color);
    font-weight: 500;
}

.backup-description {
    padding: 6px 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-color);
    line-height: 1.4;
}

.backup-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.backup-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.backup-actions .btn i {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.btn-restore {
    background-color: var(--primary-color);
    color: #000;
    cursor: pointer;
}

.light-theme .btn-restore {
    background-color: var(--success-color);
    color: #fff;
}

.btn-restore:hover {
    box-shadow: 0 3px 10px rgba(0, 209, 255, 0.3);
    transform: translateY(-1px);
}

.light-theme .btn-restore:hover {
    box-shadow: 0 3px 10px rgba(0, 255, 136, 0.3);
}

.btn-delete-backup {
    background: var(--danger-color);
    color: #fff;
    cursor: pointer;
}

.btn-delete-backup:hover {
    background: #ff1f1f;
    transform: translateY(-1px);
}

.no-backups-message,
.loading-message {
    text-align: center;
    color:var(--text-light);
    padding: 30px;
    font-size: 14px;
}

/* === Стили для вкладок Создание и Восстановление === */
.backup-create-section,
.backup-restore-section {
    padding: 10px 0;
}

.backup-create-info,
.backup-restore-info {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 20px;
}

.backup-create-info p,
.backup-restore-info p {
    margin: 0 0 10px 0;
    color: var(--text-color);
    font-size: 14px;
}

.backup-create-info ul {
    margin: 10px 0 0 0;
    padding-left: 20px;
    color: var(--text-light);
    font-size: 13px;
}

.backup-create-info li {
    margin-bottom: 5px;
}

.backup-create-info i {
    color: var(--primary-color);
    margin-right: 5px;
}

.backup-restore-info i {
    color: var(--warning-color);
    margin-right: 5px;
}

.backup-description-field {
    margin-top: 15px;
}

.backup-description-field label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-color);
    font-weight: 500;
    font-size: 14px;
}

.backup-description-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    background-color: var(--darker-bg);
    color: var(--text-color);
    resize: vertical;
    min-height: 80px;
}

.backup-description-field textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 209, 255, 0.2);
}

.backup-status-message {
    margin-top: 15px;
    padding: 10px;
    border-radius: 6px;
    font-size: 13px;
    display: none;
}

.backup-status-message.success {
    display: block;
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid var(--success-color);
    color: var(--success-color);
}

.backup-status-message.error {
    display: block;
    background: rgba(255, 45, 117, 0.1);
    border: 1px solid var(--danger-color);
    color: var(--danger-color);
}

.backup-status-message.info {
    display: block;
    background: rgba(0, 209, 255, 0.1);
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
}

.restore-backups-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
    border-radius: 8px;
    padding: 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.restore-backups-list::-webkit-scrollbar {
    width: 8px;
}

.restore-backups-list::-webkit-scrollbar-track {
    background: var(--card-bg);
    border-radius: 4px;
}

.restore-backups-list::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.restore-backups-list::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

.restore-backup-item {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--primary-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    transition: all 0.2s ease;
}

.restore-backup-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 209, 255, 0.15);
}

.restore-backup-item .backup-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: var(--primary-color);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    border-radius: 6px;
    flex-shrink: 0;
}

.restore-backup-item[data-backup-type="manual"] .backup-number {
    background-color: var(--success-color);
    color: #000;
}

.light-theme .restore-backup-item[data-backup-type="manual"] .backup-number {
    background-color: var(--success-color);
    color: #fff;
}

.restore-backup-item .backup-info-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.restore-backup-item .backup-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.restore-backup-item .backup-date {
    font-weight: 600;
    color: var(--text-color);
    font-size: 13px;
    white-space: nowrap;
}

.restore-backup-item .backup-meta {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.restore-backup-item .backup-size,
.restore-backup-item .backup-type {
    color: var(--text-light);
    font-size: 11px;
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 4px;
}

.restore-backup-item .backup-type.manual {
    background: rgba(0, 255, 136, 0.15);
    color: var(--success-color);
    font-weight: 600;
}

.restore-backup-item .backup-type.auto {
    background: rgba(0, 209, 255, 0.15);
    color: var(--primary-color);
}

.restore-backup-item .backup-status {
    display: flex;
    gap: 8px;
    font-size: 11px;
}

.restore-backup-item .backup-status .status-ok {
    color: var(--success-color);
    font-weight: 500;
}

.restore-backup-item .backup-status .status-error {
    color: var(--danger-color);
    font-weight: 500;
}

.restore-backup-item .backup-description {
    padding: 6px 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-color);
    line-height: 1.4;
}

.restore-backup-item .backup-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.restore-backup-item .backup-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.restore-backup-item .backup-actions .btn i {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.no-backups-message,
.loading-message {
    text-align: center;
    padding: 20px;
    color: var(--text-light);
}

.restore-backup-item .backup-description {
    padding: 6px 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-color);
    line-height: 1.4;
}

.restore-backup-item .status-ok {
    color: var(--success-color);
}

.restore-backup-item .status-error {
    color: var(--danger-color);
}

/* === Стили для кнопки уведомлений === */
.btn-notifications {
    position: relative;
    overflow: visible; /* Разрешаем бейджу выходить за границы */
}

.notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: linear-gradient(135deg, #ff4444, #cc0000);
    color: white;
    border-radius: 50%;
    font-size: 11px;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 8px rgba(255, 68, 68, 0.4);
    z-index: 10;
    border: 2px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-badge.hidden {
    display: none !important;
}

/* === Стили для модального окна уведомлений === */
.notifications-modal-content {
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.notifications-toolbar {
    display: flex;
    gap: 10px;
    margin: 15px 0;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.notifications-toolbar .btn {
    flex: 1;
}

.notifications-list {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 5px;
}

.notifications-list::-webkit-scrollbar {
    width: 6px;
}

.notifications-list::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 3px;
}

.notifications-list::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.notifications-list::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 8px;
    border-left: 4px solid var(--border-color);
    background: var(--bg-secondary);
    transition: all 0.2s ease;
    position: relative;
}

.notification-item:hover {
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.notification-item.unread {
    background: linear-gradient(135deg, var(--bg-primary), rgba(0, 102, 204, 0.1));
    border-left: 4px solid #0066cc;
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.2);
    border-radius: 8px;
}

.notification-item.unread .notification-icon {
    background: linear-gradient(135deg, #0066cc, #004499);
    color: white;
    box-shadow: 0 2px 4px rgba(0, 102, 204, 0.3);
}

.notification-item.read {
    background: var(--bg-secondary);
    border-left: none;
    opacity: 0.65;
    border-radius: 8px;
}

.notification-item.read .notification-icon {
    background: var(--darker-bg);
    color: var(--text-light);
    opacity: 0.5;
}

.notification-item.read.info .notification-icon,
.notification-item.read.success .notification-icon,
.notification-item.read.warning .notification-icon,
.notification-item.read.error .notification-icon {
    background: var(--darker-bg);
    color: var(--text-light);
    opacity: 0.4;
    box-shadow: none;
}

.notification-item.read .notification-content {
    opacity: 0.7;
}

.notification-item.read .notification-time {
    font-size: 11px;
    color: #999;
}


.notification-item.unread.info {
    background: linear-gradient(135deg, var(--bg-primary), rgba(23, 162, 184, 0.1));
    border-left-color: #17a2b8;
    box-shadow: 0 2px 8px rgba(23, 162, 184, 0.2);
}

.notification-item.unread.info .notification-icon {
    background: linear-gradient(135deg, #17a2b8, #138496);
    box-shadow: 0 2px 4px rgba(23, 162, 184, 0.3);
}

.notification-item.unread.success {
    background: linear-gradient(135deg, var(--bg-primary), rgba(40, 167, 69, 0.1));
    border-left-color: #28a745;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.2);
}

.notification-item.unread.success .notification-icon {
    background: linear-gradient(135deg, #28a745, #1e7e34);
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
}

.notification-item.unread.warning {
    background: linear-gradient(135deg, var(--bg-primary), rgba(255, 193, 7, 0.1));
    border-left-color: #ffc107;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2);
}

.notification-item.unread.warning .notification-icon {
    background: linear-gradient(135deg, #ffc107, #e0a800);
    box-shadow: 0 2px 4px rgba(255, 193, 7, 0.3);
}

.notification-item.unread.error {
    background: linear-gradient(135deg, var(--bg-primary), rgba(220, 53, 69, 0.1));
    border-left-color: #dc3545;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.2);
}

.notification-item.unread.error .notification-icon {
    background: linear-gradient(135deg, #dc3545, #c82333);
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
}

.notification-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}


.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
    color: var(--text-primary);
}

.notification-message {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0;
    word-wrap: break-word;
}

.notification-message ul {
    margin: 8px 0;
    padding-left: 20px;
}

.notification-message li {
    margin-bottom: 4px;
}

.notification-time {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
}

.notification-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.notification-actions .btn {
    padding: 4px 10px;
    font-size: 12px;
}

.notification-item-actions {
    display: flex;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.notification-item:hover .notification-item-actions {
    opacity: 1;
}

.notification-item-actions .btn-icon {
    background: none;
    border: none;
    padding: 4px 6px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 13px;
    transition: all 0.2s ease;
}

.notification-item-actions .btn-icon:hover {
    color: var(--text-primary);
    transform: scale(1.1);
}

.notifications-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.notifications-empty i {
    color: var(--border-color);
    margin-bottom: 15px;
}

.notifications-empty p {
    margin: 0;
    font-size: 14px;
}

/* Мобильная версия бейджа */
.mobile-badge {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    display: inline-block !important;
    margin-left: 0 !important;
}

/* Бейдж на кнопке бургер-меню */
.burger-badge {
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    min-width: 16px !important;
    height: 16px !important;
    font-size: 10px !important;
    padding: 0 3px !important;
}