* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

:root {
    --bg-primary: #2f2f2f;
    --bg-secondary: #252525;
    --bg-tertiary: #4a4a4a;
    --bg-dark-controls: #1a1a1a;
    --accent-color: #e67e22;
    --accent-hover: #d35400;
    --text-primary: #ecf0f1;
    --text-secondary: #bdc3c7;
    --border-color: #4a4a4a;
    --table-bg: #3a3a3a;
    --table-border: #4a4a4a;
    --table-header-bg: #1a1a1a;
    --table-hover: #5a5a5a;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: all 0.3s ease;
}

/* ========== ЭКРАН ВХОДА ========== */
#login-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
                url('fon.jpg') center center no-repeat;
    background-size: cover;
}

.login-container {
    background: var(--bg-secondary);
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 420px;
    border: 1px solid var(--border-color);
    backdrop-filter: blur(5px);
    margin: 20px;
}

.login-container h2 {
    margin-bottom: 1.8rem;
    text-align: center;
    color: var(--text-primary);
    font-size: 1.8rem;
    font-weight: 600;
}

/* ========== ФОРМЫ ========== */
.form-group {
    margin-bottom: 1.2rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.6rem;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.95rem;
}

.form-group input, .form-group select {
    width: 100%;
    padding: 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.form-group input:focus, .form-group select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.2);
}

/* ========== КНОПКИ (уменьшены на 40%) ========== */
button {
    padding: 0.54rem 0.9rem;
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.6rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    height: 28.8px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

button:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 3px 9px rgba(230, 126, 34, 0.3);
}

/* ========== ОСНОВНОЙ ЭКРАН ========== */
#main-screen {
    display: none;
    height: 100vh;
    flex-direction: column;
    background: var(--bg-primary);
}

/* ========== ШАПКА ========== */
.header {
    background: var(--bg-secondary);
    padding: 0.48rem 0.9rem;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 42px;
    border-bottom: 1px solid var(--border-color);
}

.header-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo {
    height: 24px;
    opacity: 0.9;
    cursor: pointer;
    border-radius: 6px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 9px;
}

.user-name {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.57rem;
}

.user-role-btn {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: none;
    padding: 0.3rem 0.6rem;
    border-radius: 8px;
    font-size: 0.54rem;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
}

#logout-btn.user-role-btn {
    cursor: pointer;
    background: var(--accent-color);
}

#logout-btn.user-role-btn:hover {
    background: var(--accent-hover);
}

/* ========== ВЕРХНЯЯ ПАНЕЛЬ УПРАВЛЕНИЯ ========== */
.top-controls-panel {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    padding: 7.2px 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: nowrap;
    height: 39px;
    min-height: 39px;
}

.tabs-wrapper {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    position: relative;
    height: 24px;
    max-width: 60%;
    min-width: 200px;
}

.tabs-scroll-btn {
    background: var(--bg-tertiary);
    border: none;
    color: var(--text-primary);
    width: 14.4px;
    height: 14.4px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7.2px;
    z-index: 2;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.tabs-scroll-btn:hover {
    background: var(--table-hover);
}

.tabs-scroll-btn.left {
    margin-right: 3px;
}

.tabs-scroll-btn.right {
    margin-left: 3px;
}

.tabs-container {
    display: flex;
    align-items: center;
    gap: 4.8px;
    height: 24px;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-behavior: smooth;
    flex: 1;
}

.tabs-container::-webkit-scrollbar {
    display: none;
}

.tab {
    background: var(--bg-tertiary);
    padding: 4.8px 9.6px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid var(--table-hover);
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4.8px;
    transition: all 0.3s ease;
    min-width: 84px;
    height: 24px;
    flex-shrink: 0;
    text-align: center;
    font-size: 0.6rem;
}

.tab.active {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

.tab.editable {
    cursor: text;
    border: 1px dashed transparent;
}

.tab.editable:hover {
    border-color: var(--accent-color);
    background: var(--bg-secondary);
}

.tab.editable:focus {
    outline: none;
    border-color: var(--accent-color);
    background: var(--bg-primary);
    box-shadow: 0 0 0 2px rgba(230, 126, 34, 0.2);
}

.tab-close {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 2.4px;
    border-radius: 4px;
    font-size: 8.4px;
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.tab-close:hover {
    background: rgba(255,255,255,0.2);
    transform: scale(1.1);
}

.controls-group {
    display: flex;
    align-items: center;
    gap: 7.2px;
    margin-left: auto;
    flex-shrink: 0;
    flex-wrap: nowrap;
    min-width: 40%;
    justify-content: flex-end;
}

.new-tab-btn {
    background: var(--accent-color);
    color: white;
    border: none;
    padding: 4.8px 9.6px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 0.54rem;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3.6px;
    text-align: center;
}

.new-tab-btn:hover {
    background: var(--accent-hover);
}

.search-container {
    display: flex;
    align-items: center;
    gap: 4.8px;
    background: var(--bg-dark-controls);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 3.6px 7.2px;
    min-width: 144px;
    height: 24px;
    flex-shrink: 0;
}

.search-input {
    border: none;
    outline: none;
    flex: 1;
    padding: 3.6px;
    font-size: 0.54rem;
    background: transparent;
    color: var(--text-primary);
}

.search-input::placeholder {
    color: var(--text-secondary);
}

.search-clear {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 2.4px 3.6px;
    font-size: 0.48rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.search-clear:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.filter-selected-btn {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: none;
    padding: 4.8px 9.6px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 0.54rem;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3.6px;
    text-align: center;
    transition: all 0.3s ease;
}

.filter-selected-btn:hover {
    background: var(--table-hover);
}

.export-excel-btn {
    background: var(--bg-dark-controls);
    color: var(--text-primary);
    border: none;
    padding: 4.8px 9.6px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 0.54rem;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3.6px;
    text-align: center;
    transition: all 0.3s ease;
}

.export-excel-btn:hover {
    background: var(--table-hover);
}

.import-excel-btn {
    background: var(--bg-dark-controls);
    color: var(--text-primary);
    border: none;
    padding: 4.8px 9.6px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 0.54rem;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3.6px;
    text-align: center;
    transition: all 0.3s ease;
}

.import-excel-btn:hover {
    background: var(--table-hover);
}

.copy-paste-controls {
    display: flex;
    gap: 2.4px;
    align-items: center;
    margin-left: 6px;
}

.copy-paste-btn {
    background: var(--bg-dark-controls);
    color: var(--text-primary);
    border: none;
    padding: 4.8px 7.2px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 0.54rem;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.4px;
    text-align: center;
    transition: all 0.3s ease;
    min-width: 24px;
}

.copy-paste-btn:hover {
    background: var(--table-hover);
}

.copy-paste-btn.copy {
    background: var(--accent-color);
}

.copy-paste-btn.copy:hover {
    background: var(--accent-hover);
}

.copy-paste-btn.paste {
    background: #27ae60;
}

.copy-paste-btn.paste:hover {
    background: #219653;
}

.undo-redo-controls {
    display: flex;
    gap: 2.4px;
    align-items: center;
    margin-left: 6px;
}

.undo-redo-btn {
    background: var(--bg-dark-controls);
    color: var(--text-primary);
    border: none;
    padding: 4.8px 7.2px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 0.54rem;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.4px;
    text-align: center;
    transition: all 0.3s ease;
    min-width: 24px;
}

.undo-redo-btn:hover {
    background: var(--table-hover);
}

.undo-redo-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.undo-redo-btn.undo {
    background: var(--bg-tertiary);
}

.undo-redo-btn.redo {
    background: var(--bg-tertiary);
}

/* ========== ОСНОВНОЙ КОНТЕЙНЕР ========== */
.container {
    display: flex;
    height: calc(100vh - 81px);
    position: relative;
}

/* ========== СКРЫВАЮЩАЯСЯ БОКОВАЯ ПАНЕЛЬ ========== */
.sidebar {
    width: 168px;
    background: var(--bg-secondary);
    color: white;
    padding: 0.72rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color);
    transition: transform 0.3s ease, width 0.3s ease;
    position: relative;
    flex-shrink: 0;
}

/* Язычок для скрытия/показа панели */
.sidebar-toggle {
    position: absolute;
    right: -24px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 60px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-left: none;
    border-radius: 0 6px 6px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    font-size: 12px;
    transition: all 0.3s ease;
    z-index: 100;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    padding: 5px 0;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

.sidebar-toggle:hover {
    background: var(--accent-color);
    color: white;
}

.sidebar-toggle span {
    transform: rotate(180deg);
    font-size: 10px;
    letter-spacing: 2px;
}

/* Состояние скрытой панели */
.sidebar.collapsed {
    transform: translateX(-100%);
    width: 0;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border-right: none;
}

.sidebar.collapsed .sidebar-toggle {
    right: -24px;
    border-radius: 0 6px 6px 0;
}

.sidebar.collapsed .sidebar-toggle span {
    content: "▶";
}

.sidebar-buttons {
    flex: 1;
    overflow-y: auto;
    padding-right: 4.8px;
}

.sidebar-buttons::-webkit-scrollbar {
    width: 3.6px;
}

.sidebar-buttons::-webkit-scrollbar-track {
    background: var(--bg-primary);
    border-radius: 3px;
}

.sidebar-buttons::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 3px;
}

.sidebar-buttons::-webkit-scrollbar-thumb:hover {
    background: var(--table-hover);
}

.sidebar-bottom {
    margin-top: auto;
    border-top: 1px solid var(--border-color);
    padding-top: 0.72rem;
}

.sidebar button {
    margin-bottom: 2.4px;
    background: var(--bg-tertiary);
    width: 100%;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.54rem;
    transition: all 0.3s ease;
    text-align: center;
    padding: 0 9px;
}

.sidebar button:hover {
    background: var(--accent-color);
    transform: scale(1.05);
    box-shadow: 0 3px 9px rgba(230, 126, 34, 0.3);
}

.custom-button-wrapper {
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    background: var(--bg-tertiary);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    width: 100%;
}
/* ========== ОБЛАСТЬ КОНТЕНТА ========== */
.content {
    flex: 1;
    padding: 0.72rem;
    overflow: auto;
    position: relative;
    background: var(--bg-secondary);
}

.table-container {
    position: relative;
    overflow: auto;
    height: 100%;
    background: var(--table-bg);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    border: 1px solid var(--table-border);
}

.table-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.table-container::-webkit-scrollbar-track {
    background: var(--bg-primary);
    border-radius: 5px;
}

.table-container::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 5px;
}

.table-container::-webkit-scrollbar-thumb:hover {
    background: var(--table-hover);
}

/* ========== ТАБЛИЦА ========== */
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--table-bg);
    table-layout: fixed;
}

th, td {
    border: 1px solid var(--table-border);
    padding: 0.24rem;
    text-align: center;
    position: relative;
    color: var(--text-primary);
    font-size: 0.51rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 50px;
    height: 21px;
}

th {
    background: var(--table-header-bg);
    position: sticky;
    top: 0;
    z-index: 10;
    user-select: none;
    padding: 4.8px 3.6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    font-weight: 600;
    font-size: 0.54rem;
    color: var(--text-primary);
    border: 1px solid #333 !important;
    cursor: default;
    white-space: normal !important;
    word-wrap: break-word;
    line-height: 1.2;
    height: auto;
    min-height: 21px;
}

th:first-child {
    min-width: 30px;
    max-width: 36px;
    width: 30px;
}

th:nth-child(2) {
    min-width: 42px;
    max-width: 48px;
    width: 42px;
}

th:last-child {
    min-width: 48px;
    width: auto;
}

th.actions-header {
    background: var(--table-header-bg);
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 4.8px 4.8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    font-weight: 600;
    font-size: 0.54rem;
    color: var(--text-secondary);
    border: 1px solid #333 !important;
    min-width: 48px;
    width: auto;
}

th.actions-header .th-title {
    color: var(--text-secondary);
    font-size: 9.6px;
    font-weight: bold;
}

th.editable-header:hover {
    background: var(--table-hover);
}

tr {
    height: 21px;
}

tr:hover {
    background: var(--table-hover);
}

.editable {
    cursor: pointer;
    transition: background-color 0.2s;
    position: relative;
}

.editable:hover {
    background-color: var(--table-hover);
}

.row-checkbox {
    width: 10.8px;
    height: 10.8px;
    cursor: pointer;
}

.select-all-checkbox {
    width: 10.8px;
    height: 10.8px;
    cursor: pointer;
}

.delete-row-btn {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: none;
    border-radius: 5px;
    padding: 3.6px 4.8px;
    font-size: 7.2px;
    cursor: pointer;
    transition: all 0.3s ease;
    height: 16.8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16.8px;
    text-align: center;
}

.delete-row-btn:hover {
    background: var(--table-hover);
    color: var(--text-primary);
}

/* ========== ЦВЕТОВЫЕ СТИЛИ ЯЧЕЕК ========== */
.missing-cell-warning {
    background-color: rgba(231, 76, 60, 0.2) !important;
    border: 1px solid #e74c3c !important;
    color: #fff !important;
    font-weight: bold !important;
}

.missing-cell-danger {
    background-color: rgba(231, 76, 60, 0.4) !important;
    border: 1px solid #c0392b !important;
    color: #fff !important;
    font-weight: bold !important;
}

.date-cell-warning {
    background-color: rgba(230, 126, 34, 0.2) !important;
    border: 1px solid var(--accent-color) !important;
    color: var(--text-primary) !important;
}

.date-cell-danger {
    background-color: rgba(230, 126, 34, 0.4) !important;
    border: 1px solid var(--accent-hover) !important;
    color: var(--text-primary) !important;
}

.date-cell-normal {
    border: 1px solid var(--table-border) !important;
    color: var(--text-primary) !important;
}

.text-cell-absent {
    background-color: rgba(231, 76, 60, 0.4) !important;
    border: 1px solid #e74c3c !important;
    color: var(--text-primary) !important;
    font-weight: bold;
}

.text-cell-warning {
    background-color: rgba(241, 196, 15, 0.3) !important;
    border: 1px solid #f1c40f !important;
    color: var(--text-primary) !important;
}

.cell-selected {
    background-color: rgba(52, 152, 219, 0.3) !important;
    border: 1px solid #3498db !important;
}

.cell-copied {
    background-color: rgba(46, 204, 113, 0.3) !important;
    border: 1px solid #2ecc71 !important;
}

/* ========== ВЫБОР ДАТЫ ========== */
.date-picker {
    position: fixed;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 7.2px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    z-index: 10000;
    min-width: 192px;
    color: var(--text-primary);
}

.date-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 7.2px;
    padding: 3.6px;
}

.month-nav-btn {
    background: var(--bg-tertiary);
    border: none;
    font-size: 9.6px;
    cursor: pointer;
    padding: 3.6px 7.2px;
    border-radius: 5px;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.month-nav-btn:hover {
    background: var(--accent-color) !important;
    color: white;
}

.date-picker-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1.8px;
}

.date-picker-day {
    padding: 6px 3.6px;
    text-align: center;
    cursor: pointer;
    border-radius: 5px;
    border: none;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.date-picker-day:hover {
    background: var(--accent-color) !important;
    color: white;
}

.date-picker-day.selected {
    background: var(--accent-color);
    color: white;
}

.date-picker-day.today {
    background: var(--bg-tertiary);
    font-weight: bold;
}

/* ========== ПАНЕЛЬ УВЕДОМЛЕНИЙ ========== */
.notification-panel {
    position: fixed;
    top: 12px;
    right: 12px;
    width: 252px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    z-index: 10000;
    max-height: 80vh;
    overflow-y: auto;
}

.notification-header {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    padding: 8.4px 10.8px;
    border-radius: 10px 10px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notification-content {
    padding: 10.8px;
}

.notification-item {
    padding: 7.2px;
    margin-bottom: 6px;
    border-radius: 6px;
    border-left: 4px solid var(--bg-tertiary);
    background: var(--bg-primary);
    font-size: 0.54rem;
}

.notification-item.warning {
    border-left-color: var(--accent-color);
    background: rgba(230, 126, 34, 0.2);
}

.notification-item.danger {
    border-left-color: #e74c3c;
    background: rgba(231, 76, 60, 0.3);
}

.notification-item.missing {
    border-left-color: #e74c3c;
    background: rgba(231, 76, 60, 0.4);
}

.notification-item.date-danger {
    border-left-color: var(--accent-hover);
    background: rgba(211, 84, 0, 0.3);
}

.close-notifications {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
    padding: 2.4px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.close-notifications:hover {
    background: rgba(255,255,255,0.2);
}

/* ========== СОДЕРЖИМОЕ ЯЧЕЙКИ ========== */
.cell-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.cell-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 2.4px;
}

.file-icons {
    display: flex;
    gap: 2.4px;
    flex-shrink: 0;
}

.file-icon-small {
    width: 12px;
    height: 12px;
    font-size: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--bg-tertiary);
    border: 1px solid var(--table-border);
    color: var(--text-secondary);
    text-align: center;
}

.file-icon-small:hover {
    background: var(--table-hover);
    color: var(--text-primary);
}

/* ========== ЗАГОЛОВКИ ТАБЛИЦЫ ========== */
.th-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.th-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 100%;
}

.th-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    line-height: 1.2;
    padding: 1.2px 2.4px;
    font-weight: 600;
    font-size: 0.51rem;
    color: var(--text-primary);
    text-align: center;
    min-height: 12px;
}

.filter-controls {
    display: flex;
    align-items: center;
    gap: 1.8px;
    flex-shrink: 0;
}

.sort-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 1.8px;
    border-radius: 3px;
    color: var(--text-secondary);
    font-size: 7.8px;
    width: 10.8px;
    height: 10.8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.sort-btn:hover {
    background: var(--table-hover);
    color: var(--text-primary);
}

.filter-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 1.8px;
    border-radius: 3px;
    color: var(--text-secondary);
    font-size: 7.8px;
    width: 10.8px;
    height: 10.8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.filter-btn:hover {
    background: var(--table-hover);
    color: var(--text-primary);
}

.filter-btn.active {
    background: var(--table-hover);
    color: var(--text-primary);
}

.filter-btn.filtered {
    color: var(--accent-color);
}

/* ========== ВЫПАДАЮЩИЙ ФИЛЬТР ========== */
.filter-dropdown {
    position: fixed;
    top: 0;
    left: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    z-index: 10000;
    min-width: 144px;
    max-width: 192px;
    max-height: 252px;
    overflow: hidden;
    font-family: 'Segoe UI', sans-serif;
    font-size: 8.4px;
    color: var(--text-primary);
}

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

.filter-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 8.4px;
}

.filter-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 10.8px;
    color: var(--text-secondary);
    padding: 0;
    width: 14.4px;
    height: 14.4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: all 0.2s ease;
}

.filter-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.filter-search {
    width: 100%;
    padding: 4.8px 6px;
    margin-bottom: 6px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 7.8px;
    outline: none;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.filter-search:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(230, 126, 34, 0.2);
}

.filter-search::placeholder {
    color: var(--text-secondary);
}

.filter-options {
    max-height: 132px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    margin-bottom: 6px;
    background: var(--bg-primary);
}

.filter-options::-webkit-scrollbar {
    width: 4.8px;
}

.filter-options::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 4px;
}

.filter-options::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 4px;
}

.filter-options::-webkit-scrollbar-thumb:hover {
    background: var(--table-hover);
}

.filter-option {
    display: flex;
    align-items: center;
    gap: 4.8px;
    padding: 4.8px 6px;
    font-size: 7.8px;
    cursor: pointer;
    transition: background-color 0.1s;
    border-bottom: 1px solid var(--bg-secondary);
}

.filter-option:hover {
    background-color: var(--bg-tertiary);
}

.filter-option input[type="checkbox"] {
    margin: 0;
    width: 9.6px;
    height: 9.6px;
    cursor: pointer;
}

.filter-option label {
    cursor: pointer;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-actions {
    display: flex;
    justify-content: space-between;
    gap: 4.8px;
}

.filter-actions button {
    flex: 1;
    padding: 4.8px 7.2px;
    font-size: 7.8px;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 21.6px;
    text-align: center;
}

.filter-actions button:hover {
    background: var(--table-hover);
    border-color: var(--table-hover);
}

.filter-actions .btn-primary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.filter-actions .btn-primary:hover {
    background: var(--table-hover);
    border-color: var(--table-hover);
}

.filter-count {
    font-size: 7.2px;
    color: var(--text-secondary);
    margin-bottom: 4.8px;
}

.sort-indicator {
    margin-left: 2.4px;
    font-size: 6.6px;
}

.sort-asc .sort-indicator::after {
    content: "↑";
}

.sort-desc .sort-indicator::after {
    content: "↓";
}

/* ========== МОДАЛЬНЫЕ ОКНА ========== */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background: var(--bg-secondary);
    padding: 1.5rem;
    border-radius: 12px;
    width: 90%;
    max-width: 510px;
    max-height: 90vh;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.08rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
}

.close {
    font-size: 1.08rem;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 3px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.close:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.form-row {
    display: flex;
    gap: 7.2px;
    margin-bottom: 0.72rem;
}

.form-row input {
    flex: 1;
    padding: 0.54rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* ========== АДМИН/ПОЛЬЗОВАТЕЛЬ ========== */
.admin-only {
    display: none;
}

.admin .admin-only {
    display: block;
}

.user-only {
    display: block;
}

.admin .user-only {
    display: none;
}

/* ========== СПИСОК ПОЛЬЗОВАТЕЛЕЙ ========== */
.user-list {
    margin-top: 0.72rem;
}

.user-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 0.48rem;
    background: var(--bg-primary);
}

.user-actions {
    display: flex;
    gap: 3.6px;
}

.btn-danger {
    background: var(--bg-tertiary);
}

.btn-danger:hover {
    background: var(--table-hover);
}

.btn-edit {
    background: var(--bg-tertiary);
}

.btn-edit:hover {
    background: var(--table-hover);
}

/* ========== ЗАГРУЗКА ФАЙЛОВ ========== */
.file-upload-area {
    border: 2px dashed var(--border-color);
    padding: 0.9rem;
    text-align: center;
    margin-bottom: 0.72rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 8px;
    background: var(--bg-primary);
}

.file-upload-area:hover {
    border-color: var(--accent-color);
    background: var(--bg-secondary);
}

.attached-files {
    margin-top: 0.72rem;
}

.attached-file {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.48rem;
    background: var(--bg-primary);
    border-radius: 6px;
    margin-bottom: 0.36rem;
    border: 1px solid var(--border-color);
}

.edit-cell-content {
    min-height: 72px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.54rem;
    margin-bottom: 0.72rem;
    width: 100%;
    resize: vertical;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: inherit;
}

/* ========== ПРЕДПРОСМОТР ========== */
.preview-content {
    text-align: center;
    margin: 0.72rem 0;
}

.preview-image {
    max-width: 100%;
    max-height: 270px;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.preview-document {
    width: 100%;
    height: 330px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.preview-actions {
    display: flex;
    gap: 7.2px;
    justify-content: center;
    margin-top: 0.72rem;
}

.preview-actions button {
    padding: 0.48rem 0.9rem;
}

.btn-success {
    background: var(--bg-tertiary);
}

.btn-success:hover {
    background: var(--table-hover);
}

.btn-secondary {
    background: var(--bg-tertiary);
}

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

.file-info {
    text-align: center;
    margin-bottom: 0.72rem;
    padding: 0.72rem;
    background: var(--bg-primary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

/* ========== КНОПКА ДОБАВЛЕНИЯ СТРОКИ ========== */
#add-row-btn {
    position: fixed;
    left: 3px;
    bottom: 3px;
    width: 1px !important;
    height: 1px !important;
    min-width: 1px !important;
    min-height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0 !important;
    opacity: 0.1;
    z-index: 9999;
    overflow: hidden;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.admin #add-row-btn {
    position: static;
    width: 100% !important;
    height: 24px !important;
    min-width: auto !important;
    min-height: auto !important;
    padding: 0.54rem 0.9rem !important;
    margin-bottom: 2.4px !important;
    font-size: 0.6rem !important;
    opacity: 1;
    background: var(--accent-color) !important;
}

.admin #add-row-btn:hover {
    background: var(--accent-hover) !important;
}

.add-row-btn {
    background: var(--accent-color) !important;
}

.add-row-btn:hover {
    background: var(--accent-hover) !important;
}

.check-dates-btn {
    background: var(--accent-color) !important;
}

.check-dates-btn:hover {
    background: var(--accent-hover) !important;
}

.manage-users-btn {
    background: var(--accent-color) !important;
}

.manage-users-btn:hover {
    background: var(--accent-hover) !important;
}

.add-custom-button-btn {
    background: var(--accent-color) !important;
}

.add-custom-button-btn:hover {
    background: var(--accent-hover) !important;
}

.save-data-btn {
    background: var(--accent-color) !important;
}

.save-data-btn:hover {
    background: var(--accent-hover) !important;
}

.load-data-btn {
    background: var(--accent-color) !important;
}

.load-data-btn:hover {
    background: var(--accent-hover) !important;
}

/* ========== ВВОД ДАТЫ ========== */
.date-input-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    padding: 0 4.8px;
    z-index: 100;
    border-radius: 4px;
}

.date-input {
    width: 100%;
    border: 2px solid var(--accent-color);
    border-radius: 5px;
    padding: 3.6px 4.8px;
    font-size: 8.4px;
    outline: none;
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* ========== ЗАГОЛОВОК ========== */
.header-title {
    cursor: default;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--text-primary);
}

.header-title.editable {
    cursor: text;
    border: 1px dashed transparent;
    padding: 3.6px 7.2px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.header-title.editable:hover {
    border-color: var(--accent-color);
    background: var(--bg-secondary);
}

.header-title.editable:focus {
    outline: none;
    border-color: var(--accent-color);
    background: var(--bg-primary);
    box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.2);
}

.icon {
    font-size: 0.66em;
    color: var(--text-primary);
}

/* ========== УПРАВЛЕНИЕ СТОЛБЦАМИ ========== */
.column-controls {
    position: fixed;
    bottom: 12px;
    right: 12px;
    display: flex;
    gap: 2.4px;
    z-index: 1000;
}

.column-control-btn {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    width: 16.8px;
    height: 16.8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--text-primary);
    font-size: 7.2px;
    opacity: 0.3;
}

.column-control-btn:hover {
    background: var(--bg-tertiary);
    opacity: 0.7;
}

body:not(.admin) .column-controls {
    position: fixed;
    bottom: 6px;
    right: 6px;
    z-index: 1000;
}

body:not(.admin) .column-control-btn {
    width: 1px;
    height: 1px;
    opacity: 0.01;
    position: absolute;
    bottom: 0;
    right: 0;
    overflow: hidden;
    pointer-events: auto;
}

body:not(.admin) .column-control-btn:hover {
    background: transparent;
    opacity: 0.01;
}

.fixed-columns-setting {
    position: fixed;
    bottom: 36px;
    right: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px;
    z-index: 1000;
    color: var(--text-primary);
    font-size: 7.2px;
    opacity: 0.3;
    transition: opacity 0.3s ease;
}

.fixed-columns-setting:hover {
    opacity: 0.9;
}

.fixed-columns-setting input {
    width: 30px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 2.4px;
    border-radius: 3px;
    margin-left: 4.8px;
}

/* ========== РЕДАКТИРОВАНИЕ ЯЧЕЙКИ ========== */
.cell-edit-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid var(--accent-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    padding: 0 2.4px;
    font-size: 0.51rem;
    outline: none;
    z-index: 100;
}

/* ========== ПЕРЕТАСКИВАНИЕ ========== */
.dragging {
    opacity: 0.7;
    background: var(--accent-color) !important;
}

.drop-zone {
    border-left: 3px dashed var(--accent-color) !important;
}

#show-all {
    margin-bottom: 6px !important;
}

.date-picker-year-month {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}

.year-select, .month-select {
    flex: 1;
    padding: 3px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.48rem;
}

.year-select:focus, .month-select:focus {
    outline: none;
    border-color: var(--accent-color);
}

.custom-button-wrapper.dragging {
    opacity: 0.5;
    background: rgba(230, 126, 34, 0.3);
}

.custom-button-wrapper.drag-over {
    border-top: 2px solid var(--accent-color);
}

/* ========== ПРОГРЕСС ЗАГРУЗКИ ========== */
.progress-container {
    width: 100%;
    background: var(--bg-primary);
    border-radius: 4px;
    margin: 6px 0;
    display: none;
}

.progress-bar {
    height: 12px;
    background: var(--accent-color);
    border-radius: 4px;
    width: 0%;
    transition: width 0.3s ease;
    text-align: center;
    line-height: 12px;
    color: white;
    font-size: 0.48rem;
}

#edit-cell-modal .modal-content {
    max-width: 300px;
    padding: 0.9rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#edit-cell-modal .edit-cell-content {
    min-height: 48px;
}

/* ========== ИЗМЕНЕНИЕ РАЗМЕРА ========== */
.resize-handle {
    position: absolute;
    top: 0;
    right: -1.8px;
    width: 3.6px;
    height: 100%;
    cursor: col-resize;
    z-index: 100;
    background: transparent;
}

.resize-handle:hover, .resize-handle.resizing {
    background-color: var(--accent-color);
}

th {
    position: relative;
    overflow: visible;
    white-space: normal !important;
    word-wrap: break-word;
    min-width: 50px !important;
}

td {
    white-space: normal !important;
    word-wrap: break-word;
    vertical-align: top;
    min-width: 50px !important;
}

.cell-text {
    white-space: normal !important;
    word-wrap: break-word;
}

.row-resize-handle {
    position: absolute;
    bottom: -1.8px;
    left: 0;
    right: 0;
    height: 3.6px;
    cursor: row-resize;
    z-index: 100;
    background: transparent;
}

.row-resize-handle:hover, .row-resize-handle.resizing {
    background-color: var(--accent-color);
}

tr {
    position: relative;
}

/* ========== ПАНЕЛЬ УПРАВЛЕНИЯ РАЗМЕРАМИ ========== */
.size-controls-panel {
    position: fixed;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 9px;
    z-index: 1000;
    width: 180px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}

.size-controls-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 9px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
}

.size-controls-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.54rem;
}

.size-controls-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    padding: 3px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.size-controls-close:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.size-control-group {
    margin-bottom: 9px;
}

.size-control-label {
    display: block;
    margin-bottom: 3px;
    color: var(--text-secondary);
    font-size: 0.54rem;
}

.size-control-input {
    width: 100%;
    padding: 4.8px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.54rem;
}

.size-control-buttons {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.size-control-btn {
    flex: 1;
    padding: 4.8px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.54rem;
    text-align: center;
}

.size-control-btn:hover {
    background: var(--accent-color);
}

.toggle-size-controls-btn {
    position: fixed;
    bottom: 36px;
    right: 36px;
    width: 24px;
    height: 24px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;
    color: var(--text-primary);
    font-size: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.toggle-size-controls-btn:hover {
    background: var(--accent-color);
    transform: scale(1.1);
}

.size-controls-panel.hidden {
    transform: translateY(-50%) translateX(100%);
    opacity: 0;
    pointer-events: none;
}

.size-control-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.size-control-value {
    min-width: 36px;
    text-align: center;
    color: var(--text-primary);
    font-weight:500;
}

.size-controls-top-btn {
    background: var(--bg-dark-controls);
    color: var(--text-primary);
    border: none;
    padding: 4.8px 9.6px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 0.54rem;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3.6px;
    text-align: center;
    transition: all 0.3s ease;
    min-width: auto;
}

.size-controls-top-btn:hover {
    background: var(--table-hover);
}

.size-controls-btn.admin-only {
    display: none;
}

.admin .size-controls-btn.admin-only {
    display: flex;
}

.uniform-size-controls {
    display: flex;
    gap: 2.4px;
    align-items: center;
    margin-left: 6px;
}

.uniform-size-controls .undo-redo-btn,
.uniform-size-controls .export-excel-btn {
    width: 24px;
    height: 24px;
    min-width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* ========== ВЫБОР ЦВЕТА ========== */
.cell-color-btn {
    background: var(--bg-dark-controls);
    color: var(--text-primary);
    border: none;
    padding: 4.8px 7.2px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 0.54rem;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.4px;
    text-align: center;
    transition: all 0.3s ease;
    min-width: 24px;
}

.cell-color-btn:hover {
    background: var(--table-hover);
}

.color-picker {
    position: fixed;
    top: 0;
    left: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 9px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    z-index: 10000;
    min-width: 120px;
    max-width: 180px;
    max-height: 240px;
    overflow: hidden;
    font-family: 'Segoe UI', sans-serif;
    font-size: 8.4px;
    color: var(--text-primary);
}

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

.color-picker-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 8.4px;
}

.color-picker-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 10.8px;
    color: var(--text-secondary);
    padding: 0;
    width: 14.4px;
    height: 14.4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: all 0.2s ease;
}

.color-picker-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.color-options {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3px;
    margin-bottom: 6px;
}

.color-option {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.color-option:hover {
    transform: scale(1.1);
    box-shadow: 0 0 5px rgba(255,255,255,0.3);
}

.color-option.selected {
    border: 2px solid var(--accent-color);
    transform: scale(1.1);
}

.color-picker-actions {
    display: flex;
    justify-content: space-between;
    gap: 4.8px;
    margin-top: 6px;
}

.color-picker-actions button {
    flex: 1;
    padding: 4.8px 7.2px;
    font-size: 7.8px;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 21.6px;
    text-align: center;
}

.color-picker-actions button:hover {
    background: var(--table-hover);
    border-color: var(--table-hover);
}

.color-preview {
    width: 100%;
    height: 24px;
    border-radius: 5px;
    margin: 6px 0;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7.2px;
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 2.4px;
    margin-right: 9px;
}

.admin .header-controls {
    display: flex;
}

body:not(.admin) .header-controls {
    display: none;
}

/* ========== ПРОВЕРОЧНЫЕ СЛОВА ========== */
.warning-words-manager-btn {
    background: var(--accent-color) !important;
}

.warning-words-manager-btn:hover {
    background: var(--accent-hover) !important;
}

.warning-word-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.48rem;
    background: var(--bg-primary);
    border-radius: 6px;
    margin-bottom: 0.36rem;
    border: 1px solid var(--border-color);
}

.warning-word-actions {
    display: flex;
    gap: 3.6px;
}

/* ========== ДИАЛОГ ПОДТВЕРЖДЕНИЯ ========== */
.confirm-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.confirm-dialog-content {
    background: var(--bg-secondary);
    padding: 1.2rem;
    border-radius: 12px;
    max-width: 300px;
    width: 90%;
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.confirm-dialog-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 12px;
}

.confirm-dialog-btn {
    padding: 0.48rem 0.9rem;
    border-radius: 6px;
    cursor: pointer;
    border: none;
    font-weight: 600;
    font-size: 0.54rem;
}

.confirm-dialog-btn.confirm {
    background: var(--accent-color);
    color: white;
}

.confirm-dialog-btn.confirm:hover {
    background: var(--accent-hover);
}

.confirm-dialog-btn.cancel {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.confirm-dialog-btn.cancel:hover {
    background: var(--table-hover);
}

/* ========== ОКНО ПРОСМОТРА ФАЙЛОВ ========== */
.file-preview-window {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    z-index: 11000;
    display: flex;
    flex-direction: column;
    min-width: 240px;
    min-height: 180px;
    resize: both;
    overflow: auto;
    transition: none;
}

.file-preview-window.fullscreen {
    top: 0;
    left: 0;
    transform: none;
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 0;
    resize: none;
}

.file-preview-window.minimized {
    height: 24px !important;
    min-height: 24px;
    overflow: hidden;
    resize: none;
}

.file-preview-window.minimized .file-preview-content-wrapper {
    display: none;
}

.file-preview-window.minimized .file-preview-controls {
    display: none;
}

.file-preview-window.minimized .preview-actions {
    display: none;
}

.file-preview-header {
    background: var(--bg-tertiary);
    padding: 4.8px 7.2px;
    border-radius: 8px 8px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move;
    user-select: none;
    border-bottom: 1px solid var(--border-color);
}

.file-preview-header.dragging {
    opacity: 0.8;
}

.file-preview-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 8.4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
}

.file-preview-window-controls {
    display: flex;
    gap: 4.8px;
}

.file-preview-window-btn {
    background: var(--bg-dark-controls);
    border: none;
    color: var(--text-secondary);
    width: 19.2px;
    height: 19.2px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9.6px;
    transition: all 0.2s ease;
    margin: 0;
    padding: 0;
    min-width: 19.2px;
}

.file-preview-window-btn:hover {
    background: var(--table-hover);
    color: var(--text-primary);
}

.file-preview-window-btn.minimize:hover {
    background: var(--accent-color);
}

.file-preview-window-btn.maximize:hover {
    background: var(--accent-color);
}

.file-preview-window-btn.close:hover {
    background: #e74c3c;
}

.file-preview-content-wrapper {
    padding: 9px;
    overflow: auto;
    flex: 1;
    min-height: 120px;
    display: flex;
    flex-direction: column;
}

.file-preview-image-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    min-height: 120px;
    background: var(--bg-primary);
    border-radius: 4px;
}

.file-preview-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.file-preview-pdf {
    width: 100%;
    height: 300px;
    border: none;
    border-radius: 4px;
    background: white;
}

.file-preview-info {
    margin-bottom: 6px;
    padding: 4.8px;
    background: var(--bg-primary);
    border-radius: 4px;
    font-size: 7.2px;
    color: var(--text-secondary);
}

.file-preview-controls {
    display: flex;
    gap: 4.8px;
    margin: 6px 0;
    justify-content: center;
    flex-wrap: wrap;
}

.file-preview-control-btn {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    width: 21.6px;
    height: 21.6px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9.6px;
    transition: all 0.2s ease;
}

.file-preview-control-btn:hover {
    background: var(--accent-color);
    transform: scale(1.1);
}

.file-preview-control-btn.rotate-left:hover {
    background: var(--accent-color);
}

.file-preview-control-btn.rotate-right:hover {
    background: var(--accent-color);
}

.file-preview-control-btn.zoom-in:hover {
    background: var(--accent-color);
}

.file-preview-control-btn.zoom-out:hover {
    background: var(--accent-color);
}

.file-preview-control-btn.reset:hover {
    background: var(--accent-color);
}

.file-preview-zoom-level {
    color: var(--text-secondary);
    font-size: 8.4px;
    padding: 0 6px;
    display: flex;
    align-items: center;
}

.preview-actions {
    display: flex;
    gap: 4.8px;
    justify-content: center;
    margin-top: 6px;
    flex-wrap: wrap;
}

.preview-actions button {
    padding: 3.6px 7.2px;
    font-size: 7.2px;
    height: 19.2px;
}

/* ========== PDF ПРОСМОТРЩИК ========== */
.pdf-container {
    width: 100%;
    height: 100%;
    min-height: 300px;
    background: var(--bg-primary);
    border-radius: 4px;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

.pdf-toolbar {
    display: flex;
    gap: 6px;
    padding: 6px;
    background: var(--bg-tertiary);
    border-radius: 4px 4px 0 0;
    align-items: center;
    flex-wrap: wrap;
}

.pdf-page-info {
    color: var(--text-primary);
    font-size: 8.4px;
    margin-left: auto;
}

.pdf-viewer {
    flex: 1;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: var(--bg-primary);
    padding: 6px;
}

.pdf-canvas {
    max-width: 100%;
    height: auto;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.pdf-controls {
    position: fixed;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 6px 9px;
    display: flex;
    gap: 9px;
    z-index: 11001;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    border: 1px solid var(--border-color);
}

.pdf-control-btn {
    background: var(--bg-tertiary);
    border: none;
    color: var(--text-primary);
    padding: 3.6px 7.2px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 8.4px;
    transition: all 0.2s ease;
}

.pdf-control-btn:hover {
    background: var(--accent-color);
    transform: scale(1.05);
}

.pdf-page-input {
    width: 36px;
    text-align: center;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 4px;
    padding: 2.4px;
    font-size: 8.4px;
}

.pdf-search-container {
    position: relative;
    display: inline-block;
}

.pdf-search-input {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 2.4px 4.8px;
    border-radius: 4px;
    width: 120px;
    font-size: 7.8px;
}

.pdf-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-top: 2.4px;
    padding: 3px;
    z-index: 11002;
    min-width: 120px;
    font-size: 7.2px;
}

/* ========== КОНТЕКСТНОЕ МЕНЮ ========== */
.context-menu {
    position: fixed;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 3px 0;
    z-index: 100000;
    min-width: 108px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
}

.context-menu-item {
    padding: 4.8px 9px;
    cursor: pointer;
    color: var(--text-primary);
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 7.8px;
}

.context-menu-item:hover {
    background: var(--accent-color);
}

.context-menu-divider {
    height: 1px;
    background: var(--border-color);
    margin: 3px 0;
}

.context-menu-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.context-menu-item.disabled:hover {
    background: transparent;
}

.last-selected-cell {
    outline: 2px solid var(--accent-color) !important;
    outline-offset: -1px;
    position: relative;
    z-index: 5;
}

/* ========== МЕДИА-ЗАПРОСЫ ========== */
@media (max-width: 1200px) {
    .top-controls-panel {
        height: auto;
        padding: 9px;
    }
    
    .controls-group {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    
    .search-container {
        min-width: 120px;
    }
}

@media (max-width: 992px) {
    .container {
        flex-direction: column;
        height: auto;
    }
    
    .sidebar {
        width: 100%;
        height: auto;
        max-height: 180px;
        order: 2;
    }
    
    .sidebar-toggle {
        display: none;
    }
    
    .content {
        order: 1;
        flex: none;
        height: 60vh;
    }
    
    .top-controls-panel {
        flex-direction: column;
        height: auto;
        gap: 6px;
        padding: 6px;
    }
    
    .tabs-wrapper {
        max-width: 100%;
        width: 100%;
    }
    
    .controls-group {
        width: 100%;
        justify-content: space-between;
        margin-left: 0;
    }
    
    .search-container {
        min-width: 90px;
        flex: 1;
    }
    
    .header {
        flex-direction: column;
        height: auto;
        padding: 6px;
        gap: 6px;
    }
    
    .header-content {
        justify-content: center;
        width: 100%;
    }
    
    .user-info {
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .tabs-scroll-btn {
        display: none !important;
    }
    
    .tabs-wrapper {
        gap: 3px;
    }
    
    .tabs-container {
        max-width: 100%;
    }
    
    .sidebar {
        max-height: 150px;
    }
    
    .content {
        height: 50vh;
    }
    
    .controls-group {
        flex-wrap: wrap;
        gap: 4.8px;
    }
    
    .search-container {
        order: -1;
        width: 100%;
    }
    
    .tab {
        min-width: 72px;
        padding: 3.6px 7.2px;
    }
    
    .modal-content {
        padding: 0.9rem;
        width: 95%;
    }
    
    .notification-panel {
        width: 95%;
        right: 2.5%;
    }
    
    .size-controls-panel {
        width: 168px;
        right: 3px;
    }
    
    .toggle-size-controls-btn {
        bottom: 30px;
        right: 30px;
    }
}

@media (max-width: 576px) {
    .login-container {
        padding: 0.9rem;
        margin: 6px;
    }
    
    .sidebar {
        padding: 0.6rem;
    }
    
    .content {
        padding: 0.48rem;
    }
    
    .top-controls-panel {
        padding: 4.8px;
    }
    
    .controls-group {
        flex-direction: column;
        gap: 3px;
    }
    
    .controls-group button {
        width: 100%;
        justify-content: center;
    }
    
    .tabs-wrapper {
        flex-direction: column;
        height: auto;
        gap: 3px;
    }
    
    .tabs-container {
        order: 2;
        height: 21px;
    }
    
    .header-title {
        font-size: 0.72rem;
    }
    
    .user-role-btn {
        min-width: 60px;
        font-size: 0.48rem;
    }
    
    th, td {
        padding: 0.18rem;
        font-size: 0.48rem;
    }
    
    th {
        padding: 3.6px 2.4px;
        font-size: 0.48rem;
    }
    
    .column-controls {
        bottom: 6px;
        right: 6px;
    }
    
    .fixed-columns-setting {
        bottom: 30px;
        right: 6px;
    }
    
    .toggle-size-controls-btn {
        bottom: 24px;
        right: 24px;
        width: 21px;
        height: 21px;
        font-size: 10.8px;
    }
    
    .size-controls-panel {
        width: 156px;
        padding: 6px;
    }
}

@media (max-width: 400px) {
    .sidebar button {
        font-size: 0.48rem;
        padding: 0 6px;
    }
    
    .button-text {
        font-size: 0.48rem;
    }
    
    .custom-button-wrapper {
        flex-direction: column;
        gap: 1.2px;
    }
    
    .button-actions {
        width: 100%;
        justify-content: flex-end;
    }
}
/* Исправление для язычка боковой панели */
.sidebar-toggle {
    position: absolute;
    left: 168px; /* Будет обновляться через JS */
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 60px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-left: none;
    border-radius: 0 6px 6px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    font-size: 12px;
    transition: left 0.3s ease, background 0.2s ease;
    z-index: 101;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

.sidebar-toggle:hover {
    background: var(--accent-color);
    color: white;
}

.sidebar-toggle span {
    font-size: 14px;
    font-weight: bold;
}

/* При скрытой панели язычок прижимается к левому краю */
.sidebar.collapsed ~ .sidebar-toggle {
    left: 0px !important;
}
// ========== СИСТЕМА ГОРЯЧИХ КЛАВИШ ==========
(function() {
    // Карта горячих клавиш
    const hotkeys = {
        // Навигация по таблице
        'ArrowUp': () => navigateTable('up'),
        'ArrowDown': () => navigateTable('down'),
        'ArrowLeft': () => navigateTable('left'),
        'ArrowRight': () => navigateTable('right'),
        'Tab': (e) => { e.preventDefault(); navigateTable('next'); },
        'Shift+Tab': (e) => { e.preventDefault(); navigateTable('prev'); },
        
        // Редактирование
        'F2': (e) => { e.preventDefault(); editCurrentCell(); },
        'Enter': (e) => { 
            if (document.activeElement?.classList.contains('cell-edit-input')) return;
            e.preventDefault(); 
            editCurrentCell(); 
        },
        'Delete': (e) => { e.preventDefault(); deleteCurrentCellContent(); },
        'Escape': () => { 
            closeAllModals(); 
            clearSelection();
            if (currentInlineEdit) cancelInlineEdit();
        },
        
        // Копирование/вставка/вырезание
        'Ctrl+c': (e) => { e.preventDefault(); copySelectedData(); },
        'Ctrl+v': (e) => { e.preventDefault(); pasteData(); },
        'Ctrl+x': (e) => { e.preventDefault(); cutSelectedData(); },
        'Ctrl+d': (e) => { e.preventDefault(); duplicateSelectedRows(); },
        
        // Отмена/повтор
        'Ctrl+z': (e) => { e.preventDefault(); undo(); },
        'Ctrl+y': (e) => { e.preventDefault(); redo(); },
        'Ctrl+Shift+z': (e) => { e.preventDefault(); redo(); },
        
        // Поиск
        'Ctrl+f': (e) => { e.preventDefault(); focusSearch(); },
        'F3': (e) => { e.preventDefault(); findNext(); },
        'Shift+F3': (e) => { e.preventDefault(); findPrev(); },
        
        // Сохранение
        'Ctrl+s': (e) => { 
            e.preventDefault(); 
            if (currentUser?.role === 'admin') {
                saveAllData();
            } else {
                showNotification('Информация', 'Сохранение доступно только администратору', 'info');
            }
        },
        
        // Выделение
        'Ctrl+a': (e) => { e.preventDefault(); selectAllCells(); },
        'Ctrl+Shift+ArrowUp': (e) => { e.preventDefault(); extendSelection('up'); },
        'Ctrl+Shift+ArrowDown': (e) => { e.preventDefault(); extendSelection('down'); },
        'Ctrl+Shift+ArrowLeft': (e) => { e.preventDefault(); extendSelection('left'); },
        'Ctrl+Shift+ArrowRight': (e) => { e.preventDefault(); extendSelection('right'); },
        'Ctrl+Space': (e) => { e.preventDefault(); selectCurrentColumn(); },
        'Shift+Space': (e) => { e.preventDefault(); selectCurrentRow(); },
        
        // Новая строка/столбец
        'Ctrl+Enter': (e) => { e.preventDefault(); addNewRow(); },
        'Ctrl+Shift++': (e) => { e.preventDefault(); if (currentUser?.role === 'admin') addNewColumn(); },
        'Ctrl+Shift+-': (e) => { e.preventDefault(); if (currentUser?.role === 'admin') showRemoveColumnModal(); },
        
        // Переключение вкладок
        'Ctrl+Tab': (e) => { e.preventDefault(); switchToNextTab(); },
        'Ctrl+Shift+Tab': (e) => { e.preventDefault(); switchToPrevTab(); },
        'Ctrl+w': (e) => { e.preventDefault(); closeCurrentTab(); },
        'Ctrl+t': (e) => { e.preventDefault(); if (currentUser?.role === 'admin') createNewTab(); },
        
        // Фильтры
        'Ctrl+Shift+f': (e) => { e.preventDefault(); clearAllFilters(); },
        
        // Экспорт
        'Ctrl+e': (e) => { e.preventDefault(); exportToExcelWithFormatting(); },
        
        // Проверка дат
        'F9': (e) => { e.preventDefault(); checkAllDatesAndMissing(); },
        
        // Показать все столбцы
        'Ctrl+Shift+a': (e) => { e.preventDefault(); showAllColumns(); },
        
        // Справка
        'F1': (e) => { e.preventDefault(); showHotkeysHelp(); },
    };
    
    // Переменные для навигации
    let currentFocusedCell = null;
    let searchIndex = -1;
    let lastSearchTerm = '';
    
    // Обработчик клавиш
    document.addEventListener('keydown', function(e) {
        // Игнорируем если фокус в поле ввода (кроме навигации)
        const tagName = document.activeElement?.tagName;
        const isInput = tagName === 'INPUT' || tagName === 'TEXTAREA' || tagName === 'SELECT';
        
        if (isInput && !['Escape', 'F9', 'F1'].includes(e.key) && !e.ctrlKey) {
            return;
        }
        
        // Формируем ключ для карты
        let key = e.key;
        if (e.ctrlKey || e.metaKey) key = 'Ctrl+' + key;
        if (e.shiftKey && !key.includes('Shift+')) key = 'Shift+' + key;
        if (e.altKey) key = 'Alt+' + key;
        
        // Выполняем действие если есть
        const action = hotkeys[key];
        if (action) {
            action(e);
        }
    });
    
    // ========== ФУНКЦИИ НАВИГАЦИИ ==========
    function navigateTable(direction) {
        const table = document.getElementById('data-table');
        if (!table) return;
        
        const cells = Array.from(table.querySelectorAll('tbody td:not(.admin-only)'));
        if (cells.length === 0) return;
        
        // Находим текущую активную ячейку
        let currentIndex = -1;
        
        if (currentFocusedCell) {
            currentIndex = cells.indexOf(currentFocusedCell);
        } else if (selectionStart) {
            const cell = getCellElement(selectionStart.row, selectionStart.col);
            currentIndex = cells.indexOf(cell);
        }
        
        // Если нет активной ячейки, берём первую
        if (currentIndex === -1) {
            currentIndex = 0;
        }
        
        const colsCount = table.querySelectorAll('tbody tr:first-child td').length;
        let newIndex = currentIndex;
        
        switch (direction) {
            case 'up':
                newIndex = Math.max(0, currentIndex - colsCount);
                break;
            case 'down':
                newIndex = Math.min(cells.length - 1, currentIndex + colsCount);
                break;
            case 'left':
                newIndex = Math.max(0, currentIndex - 1);
                break;
            case 'right':
                newIndex = Math.min(cells.length - 1, currentIndex + 1);
                break;
            case 'next':
                newIndex = (currentIndex + 1) % cells.length;
                break;
            case 'prev':
                newIndex = (currentIndex - 1 + cells.length) % cells.length;
                break;
        }
        
        if (newIndex >= 0 && newIndex < cells.length) {
            focusCell(cells[newIndex]);
        }
    }
    
    function focusCell(cell) {
        // Снимаем выделение с предыдущей
        if (currentFocusedCell) {
            currentFocusedCell.classList.remove('last-selected-cell');
        }
        
        // Устанавливаем новое
        currentFocusedCell = cell;
        cell.classList.add('last-selected-cell');
        
        // Устанавливаем выделение для одной ячейки
        const coords = getCellCoordinates(cell);
        selectionStart = coords;
        selectionEnd = coords;
        updateSelection();
        
        // Прокручиваем к ячейке
        cell.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }
    
    // ========== РЕДАКТИРОВАНИЕ ==========
    function editCurrentCell() {
        let cell = currentFocusedCell;
        
        if (!cell && selectionStart) {
            cell = getCellElement(selectionStart.row, selectionStart.col);
        }
        
        if (!cell) {
            // Пробуем найти любой td
            cell = document.querySelector('#data-table tbody td.editable');
        }
        
        if (cell && currentUser?.role === 'admin') {
            const value = cell.querySelector('.cell-text')?.textContent || '';
            openInlineEdit(cell, value);
        }
    }
    
    function cutSelectedData() {
        if (selectionStart && selectionEnd) {
            copySelectedData();
            deleteSelectedCells();
            showNotification('Вырезано', 'Данные вырезаны', 'success');
        } else if (currentFocusedCell) {
            const cellText = currentFocusedCell.querySelector('.cell-text');
            const text = cellText?.textContent || '';
            
            navigator.clipboard.writeText(text).then(() => {
                // Очищаем ячейку
                const columnId = currentFocusedCell.dataset.columnId;
                const rowId = parseInt(currentFocusedCell.closest('tr').dataset.rowId);
                const currentTab = getCurrentTab();
                const rowData = currentTab.data.find(row => row.id === rowId);
                const customColumns = getCurrentCustomColumns();
                
                if (rowData) {
                    saveUndoState('Вырезание');
                    
                    if (customColumns.find(col => col.id === columnId)) {
                        if (!rowData.customData) rowData.customData = {};
                        rowData.customData[columnId] = '';
                    } else {
                        if (columnId === 'name') rowData.name = '';
                        else if (columnId === 'date') rowData.date = '';
                        else if (columnId === 'status') rowData.status = '';
                    }
                    
                    localStorage.setItem('tabs', JSON.stringify(tabs));
                    saveToServer();
                    renderTable();
                }
                
                showNotification('Вырезано', 'Текст вырезан', 'success');
            }).catch(err => {
                showNotification('Ошибка', 'Не удалось вырезать', 'error');
            });
        }
    }
    
    function duplicateSelectedRows() {
        if (!currentUser || currentUser.role !== 'admin') {
            showNotification('Ошибка', 'Только администраторы могут дублировать строки', 'warning');
            return;
        }
        
        const currentTab = getCurrentTab();
        const rowsToDuplicate = [];
        
        if (selectedRows.size > 0) {
            selectedRows.forEach(rowId => {
                const row = currentTab.data.find(r => r.id === rowId);
                if (row) rowsToDuplicate.push(row);
            });
        } else if (selectionStart) {
            const rowIndex = selectionStart.row - 1;
            if (rowIndex < currentTab.data.length) {
                rowsToDuplicate.push(currentTab.data[rowIndex]);
            }
        }
        
        if (rowsToDuplicate.length === 0) {
            showNotification('Информация', 'Нет строк для дублирования', 'info');
            return;
        }
        
        saveUndoState('Дублирование строк');
        
        rowsToDuplicate.forEach(row => {
            const newRow = JSON.parse(JSON.stringify(row));
            newRow.id = Math.max(...currentTab.data.map(r => r.id)) + 1;
            newRow.name = (newRow.name || '') + ' (копия)';
            currentTab.data.push(newRow);
        });
        
        localStorage.setItem('tabs', JSON.stringify(tabs));
        saveToServer();
        renderTable();
        
        showNotification('Успех', `Дублировано строк: ${rowsToDuplicate.length}`, 'success');
    }
    
    // ========== ПОИСК ==========
    function focusSearch() {
        const searchInput = document.getElementById('table-search');
        if (searchInput) {
            searchInput.focus();
            searchInput.select();
        }
    }
    
    function findNext() {
        const searchInput = document.getElementById('table-search');
        if (!searchInput) return;
        
        const searchTerm = searchInput.value.trim();
        
        if (!searchTerm) {
            focusSearch();
            return;
        }
        
        const cells = Array.from(document.querySelectorAll('#data-table tbody td .cell-text'));
        const matches = cells.filter(cell => 
            cell.textContent.toLowerCase().includes(searchTerm.toLowerCase())
        );
        
        if (matches.length === 0) {
            showNotification('Поиск', 'Совпадений не найдено', 'info');
            return;
        }
        
        searchIndex = (searchIndex + 1) % matches.length;
        const matchCell = matches[searchIndex].closest('td');
        
        focusCell(matchCell);
        showNotification('Поиск', `Найдено ${searchIndex + 1} из ${matches.length}`, 'info');
    }
    
    function findPrev() {
        const searchInput = document.getElementById('table-search');
        if (!searchInput) return;
        
        const searchTerm = searchInput.value.trim();
        
        if (!searchTerm) {
            focusSearch();
            return;
        }
        
        const cells = Array.from(document.querySelectorAll('#data-table tbody td .cell-text'));
        const matches = cells.filter(cell => 
            cell.textContent.toLowerCase().includes(searchTerm.toLowerCase())
        );
        
        if (matches.length === 0) {
            showNotification('Поиск', 'Совпадений не найдено', 'info');
            return;
        }
        
        searchIndex = searchIndex <= 0 ? matches.length - 1 : searchIndex - 1;
        const matchCell = matches[searchIndex].closest('td');
        
        focusCell(matchCell);
        showNotification('Поиск', `Найдено ${searchIndex + 1} из ${matches.length}`, 'info');
    }
    
    // ========== ВЫДЕЛЕНИЕ ==========
    function selectAllCells() {
        const table = document.getElementById('data-table');
        if (!table) return;
        
        const rows = table.querySelectorAll('tbody tr');
        if (rows.length === 0) return;
        
        const firstCell = rows[0].querySelector('td:not(.admin-only)');
        const lastCell = rows[rows.length - 1].querySelector('td:not(.admin-only)');
        
        if (firstCell && lastCell) {
            selectionStart = getCellCoordinates(firstCell);
            selectionEnd = getCellCoordinates(lastCell);
            updateSelection();
        }
        
        // Также отмечаем чекбоксы
        document.querySelectorAll('.row-checkbox').forEach(cb => cb.checked = true);
        const selectAllCb = document.getElementById('select-all-checkbox');
        if (selectAllCb) selectAllCb.checked = true;
        
        rows.forEach(row => {
            const rowId = parseInt(row.dataset.rowId);
            if (rowId) selectedRows.add(rowId);
        });
    }
    
    function extendSelection(direction) {
        if (!selectionStart) {
            navigateTable(direction);
            return;
        }
        
        let newRow = selectionEnd.row;
        let newCol = selectionEnd.col;
        
        switch (direction) {
            case 'up': newRow = Math.max(1, newRow - 1); break;
            case 'down': 
                const maxRow = document.querySelectorAll('#data-table tbody tr').length;
                newRow = Math.min(maxRow, newRow + 1); 
                break;
            case 'left': newCol = Math.max(1, newCol - 1); break;
            case 'right': 
                const maxCol = document.querySelectorAll('#data-table thead th').length;
                newCol = Math.min(maxCol, newCol + 1); 
                break;
        }
        
        selectionEnd = { row: newRow, col: newCol };
        updateSelection();
    }
    
    function selectCurrentColumn() {
        if (!currentFocusedCell && !selectionStart) return;
        
        const col = currentFocusedCell ? 
            getCellCoordinates(currentFocusedCell).col : 
            selectionStart.col;
        
        const rows = document.querySelectorAll('#data-table tbody tr');
        
        selectionStart = { row: 1, col: col };
        selectionEnd = { row: rows.length, col: col };
        updateSelection();
    }
    
    function selectCurrentRow() {
        if (!currentFocusedCell && !selectionStart) return;
        
        const row = currentFocusedCell ? 
            getCellCoordinates(currentFocusedCell).row : 
            selectionStart.row;
        
        const colsCount = document.querySelectorAll('#data-table thead th').length;
        
        selectionStart = { row: row, col: 1 };
        selectionEnd = { row: row, col: colsCount };
        updateSelection();
    }
    
    // ========== ВКЛАДКИ ==========
    function switchToNextTab() {
        const currentIndex = tabs.findIndex(t => t.id === currentTabId);
        const nextIndex = (currentIndex + 1) % tabs.length;
        switchTab(tabs[nextIndex].id);
    }
    
    function switchToPrevTab() {
        const currentIndex = tabs.findIndex(t => t.id === currentTabId);
        const prevIndex = (currentIndex - 1 + tabs.length) % tabs.length;
        switchTab(tabs[prevIndex].id);
    }
    
    function closeCurrentTab() {
        if (tabs.length > 1 && currentUser?.role === 'admin') {
            closeTabWithConfirm(currentTabId);
        }
    }
    
    // ========== ФИЛЬТРЫ ==========
    function clearAllFilters() {
        currentFilters = {};
        searchTerm = '';
        const searchInput = document.getElementById('table-search');
        if (searchInput) searchInput.value = '';
        const selectAllCb = document.getElementById('select-all-checkbox');
        if (selectAllCb) selectAllCb.checked = true;
        isSelectAllChecked = true;
        selectedRows.clear();
        closeAllFilterDropdowns();
        renderTable();
        showNotification('Фильтры', 'Все фильтры очищены', 'success');
    }
    
    // ========== МОДАЛЬНЫЕ ОКНА ==========
    function closeAllModals() {
        document.querySelectorAll('.modal').forEach(modal => {
            modal.style.display = 'none';
        });
        closeDatePicker();
        closeDateInput();
        closeColorPicker();
        if (currentPreviewWindow) closePreviewWindow();
    }
    
    // ========== СПРАВКА ==========
    function showHotkeysHelp() {
        const helpHtml = `
            <div style="max-height: 500px; overflow-y: auto;">
                <h4 style="margin-bottom: 15px; color: var(--accent-color);">⌨️ Горячие клавиши</h4>
                
                <h5 style="margin: 15px 0 10px; color: var(--text-primary);">Навигация</h5>
                <table style="width: 100%; font-size: 0.85rem;">
                    <tr><td style="padding: 5px;">← ↑ → ↓</td><td style="padding: 5px;">Перемещение по ячейкам</td></tr>
                    <tr><td style="padding: 5px;">Tab / Shift+Tab</td><td style="padding: 5px;">Следующая / предыдущая ячейка</td></tr>
                    <tr><td style="padding: 5px;">Ctrl+Tab / Ctrl+Shift+Tab</td><td style="padding: 5px;">Следующая / предыдущая вкладка</td></tr>
                </table>
                
                <h5 style="margin: 15px 0 10px; color: var(--text-primary);">Редактирование</h5>
                <table style="width: 100%; font-size: 0.85rem;">
                    <tr><td style="padding: 5px;">F2 / Enter</td><td style="padding: 5px;">Редактировать ячейку</td></tr>
                    <tr><td style="padding: 5px;">Delete</td><td style="padding: 5px;">Удалить содержимое</td></tr>
                    <tr><td style="padding: 5px;">Escape</td><td style="padding: 5px;">Отменить редактирование / закрыть окна</td></tr>
                </table>
                
                <h5 style="margin: 15px 0 10px; color: var(--text-primary);">Буфер обмена</h5>
                <table style="width: 100%; font-size: 0.85rem;">
                    <tr><td style="padding: 5px;">Ctrl+C</td><td style="padding: 5px;">Копировать</td></tr>
                    <tr><td style="padding: 5px;">Ctrl+X</td><td style="padding: 5px;">Вырезать</td></tr>
                    <tr><td style="padding: 5px;">Ctrl+V</td><td style="padding: 5px;">Вставить</td></tr>
                    <tr><td style="padding: 5px;">Ctrl+D</td><td style="padding: 5px;">Дублировать строку</td></tr>
                </table>
                
                <h5 style="margin: 15px 0 10px; color: var(--text-primary);">Выделение</h5>
                <table style="width: 100%; font-size: 0.85rem;">
                    <tr><td style="padding: 5px;">Ctrl+A</td><td style="padding: 5px;">Выделить всё</td></tr>
                    <tr><td style="padding: 5px;">Ctrl+Shift+←↑→↓</td><td style="padding: 5px;">Расширить выделение</td></tr>
                    <tr><td style="padding: 5px;">Ctrl+Пробел</td><td style="padding: 5px;">Выделить столбец</td></tr>
                    <tr><td style="padding: 5px;">Shift+Пробел</td><td style="padding: 5px;">Выделить строку</td></tr>
                </table>
                
                <h5 style="margin: 15px 0 10px; color: var(--text-primary);">Действия</h5>
                <table style="width: 100%; font-size: 0.85rem;">
                    <tr><td style="padding: 5px;">Ctrl+Z / Ctrl+Y</td><td style="padding: 5px;">Отменить / Повторить</td></tr>
                    <tr><td style="padding: 5px;">Ctrl+F / F3</td><td style="padding: 5px;">Поиск / Найти далее</td></tr>
                    <tr><td style="padding: 5px;">Shift+F3</td><td style="padding: 5px;">Найти ранее</td></tr>
                    <tr><td style="padding: 5px;">Ctrl+S</td><td style="padding: 5px;">Сохранить данные</td></tr>
                    <tr><td style="padding: 5px;">Ctrl+E</td><td style="padding: 5px;">Экспорт в Excel</td></tr>
                    <tr><td style="padding: 5px;">Ctrl+T</td><td style="padding: 5px;">Новая вкладка</td></tr>
                    <tr><td style="padding: 5px;">Ctrl+W</td><td style="padding: 5px;">Закрыть вкладку</td></tr>
                    <tr><td style="padding: 5px;">Ctrl+Enter</td><td style="padding: 5px;">Добавить строку</td></tr>
                    <tr><td style="padding: 5px;">Ctrl+Shift++</td><td style="padding: 5px;">Добавить столбец</td></tr>
                    <tr><td style="padding: 5px;">Ctrl+Shift+-</td><td style="padding: 5px;">Удалить столбец</td></tr>
                    <tr><td style="padding: 5px;">Ctrl+Shift+F</td><td style="padding: 5px;">Очистить фильтры</td></tr>
                    <tr><td style="padding: 5px;">Ctrl+Shift+A</td><td style="padding: 5px;">Показать все столбцы</td></tr>
                    <tr><td style="padding: 5px;">F9</td><td style="padding: 5px;">Проверка дат</td></tr>
                    <tr><td style="padding: 5px;">F1</td><td style="padding: 5px;">Показать справку</td></tr>
                </table>
            </div>
        `;
        
        // Создаем модальное окно со справкой
        const modal = document.createElement('div');
        modal.className = 'modal';
        modal.style.display = 'flex';
        modal.innerHTML = `
            <div class="modal-content" style="max-width: 600px;">
                <div class="modal-header">
                    <h3>Горячие клавиши</h3>
                    <span class="close">&times;</span>
                </div>
                ${helpHtml}
            </div>
        `;
        
        document.body.appendChild(modal);
        
        modal.querySelector('.close').addEventListener('click', () => modal.remove());
        modal.addEventListener('click', (e) => {
            if (e.target === modal) modal.remove();
        });
        
        // Закрытие по Escape
        const escHandler = (e) => {
            if (e.key === 'Escape') {
                modal.remove();
                document.removeEventListener('keydown', escHandler);
            }
        };
        document.addEventListener('keydown', escHandler);
    }
    
    // Добавляем кнопку справки в верхнюю панель управления
    function addHotkeysHint() {
        // Ждем полной загрузки интерфейса
        const checkAndAdd = () => {
            const headerControls = document.querySelector('.header-controls');
            if (!headerControls) {
                setTimeout(checkAndAdd, 100);
                return;
            }
            
            // Проверяем, не добавлена ли уже кнопка
            if (document.getElementById('hotkeys-help-btn')) return;
            
            const hintBtn = document.createElement('button');
            hintBtn.id = 'hotkeys-help-btn';
            hintBtn.className = 'copy-paste-btn';
            hintBtn.style.cssText = `
                background: var(--bg-dark-controls);
                opacity: 0.8;
                font-size: 0.6rem;
                margin-left: 4px;
                min-width: 50px;
            `;
            hintBtn.innerHTML = '<span class="icon">⌨️</span> F1';
            hintBtn.title = 'Горячие клавиши — нажмите F1 для просмотра всех комбинаций';
            hintBtn.onclick = showHotkeysHelp;
            
            // Добавляем в конец панели управления
            headerControls.appendChild(hintBtn);
            
            console.log('✅ Кнопка F1 добавлена в панель управления');
        };
        
        checkAndAdd();
    }
    
    // Инициализация при загрузке и после входа
    setTimeout(addHotkeysHint, 1000);
    
    // Также добавляем при переключении темы или обновлении интерфейса
    const originalRenderTable = renderTable;
    renderTable = function() {
        originalRenderTable.apply(this, arguments);
        setTimeout(addHotkeysHint, 100);
    };
    
    console.log('✅ Система горячих клавиш активирована. Нажмите F1 для справки.');
})();
/* Кнопка F1 в панели управления */
#f1-help-btn {
    background: var(--bg-dark-controls) !important;
    color: var(--text-primary) !important;
    border: none !important;
    padding: 4.8px 7.2px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    font-size: 0.54rem !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3.6px !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    min-width: 50px !important;
    margin-left: 4px !important;
    opacity: 0.8 !important;
}

#f1-help-btn:hover {
    background: var(--accent-color) !important;
    opacity: 1 !important;
}

#f1-help-btn .icon {
    font-size: 0.8rem !important;
}
/* ========== ПЕРЕОПРЕДЕЛЕНИЕ СТИЛЕЙ КАСТОМНЫХ КНОПОК ========== */
.custom-button-wrapper {
    margin-bottom: 6px !important;
    display: flex !important;
    align-items: center !important;
    background: var(--bg-tertiary) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
}

.button-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 4px !important;
    padding: 4px 8px !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border-left: 1px solid var(--border-color) !important;
}

.btn-edit-small,
.btn-danger-small {
    background: var(--bg-dark-controls) !important;
    padding: 4px 8px !important;
    font-size: 0.65rem !important;
    border-radius: 5px !important;
    border: none !important;
    color: var(--text-primary) !important;
    cursor: pointer !important;
    width: 28px !important;
    height: 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

.btn-edit-small:hover {
    background: #3498db !important;
    transform: scale(1.05) !important;
}

.btn-danger-small:hover {
    background: #e74c3c !important;
    transform: scale(1.05) !important;
}