/* ФАЙЛ: .\frontend\frontend_style.css */

/* =================================================================================
   1. ПЕРЕМЕННЫЕ ТЕМЫ (СИНХРОНИЗАЦИЯ С WINDOWS DWM И WEB)
================================================================================= */
:root[data-theme="dark"] {
    --color-scheme: dark;
    --bg-main: #242424;
    --bg-card: #2b2b2b;
    --text-main: #dce4ee;
    --text-muted: #a8a8a8;
    --accent-blue: #1f6aa5;
    --accent-hover: #144870;
    --btn-secondary: #565b5e;
    --btn-secondary-hover: #7a848d;
    --border-color: #333333;
    --switch-bg: #565b5e;
    --switch-handle: #c3c3c3;
    --input-bg: #343638;
    --console-bg: #2b2b2b;
    --console-track: #292929;
    --console-text: #e0e0e0;
    --panel-radius: 15px;
    --element-radius: 6px;
    --btn-radius: 8px;
    --tabulator-grid: #555555;
    --shadow-card: 0 4px 15px rgba(0,0,0,0.2);
}

:root[data-theme="light"] {
    --color-scheme: light;
    --bg-main: #ebebeb;
    --bg-card: #f9f9fa;
    --text-main: #242424;
    --text-muted: #555555;
    --accent-blue: #3a7ebf;
    --accent-hover: #325d88;
    --btn-secondary: #d9d9d9;
    --btn-secondary-hover: #e5e5e5;
    --border-color: #cccccc;
    --switch-bg: #d9d9d9;
    --switch-handle: #ffffff;
    --input-bg: #ffffff;
    --console-bg: #f9f9fa;
    --console-track: #f2f2f2;
    --console-text: #000000;
    --panel-radius: 15px;
    --element-radius: 6px;
    --btn-radius: 8px;
    --tabulator-grid: #aaa;
    --shadow-card: none;
}

/* =================================================================================
   2. БАЗОВЫЙ СБРОС И КАРКАС ПРИЛОЖЕНИЯ
================================================================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

html, body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    line-height: 1.4;
}

body { background-color: var(--bg-main); color: var(--text-main); display: flex; height: 100vh; overflow: hidden; transition: background-color 0.3s, color 0.3s; }

input, button, select, textarea { font-family: inherit; font-size: inherit; }

.app-container {
    display: flex;
    width: 100%;
    padding: 8px;
    gap: 8px;
    max-width: 1500px;
    margin: 0 auto;
    height: 100%;
}

.sidebar {
    position: relative;
    width: 200px;
    min-width: 200px;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    z-index: 10;
}

#sidebar-resizer {
    position: absolute;
    top: 0;
    right: -4px;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    background: transparent;
    z-index: 15;
}

.sidebar-block {
    background-color: var(--bg-card);
    border-radius: var(--panel-radius);
    padding: 8px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-card);
    transition: background-color 0.3s;
}

.nav-block { flex-grow: 1; overflow-y: auto; }

/* Кастомный скроллбар для сайдбара */
.nav-block::-webkit-scrollbar {
    width: 4px;
    background-color: transparent;
}
.nav-block::-webkit-scrollbar-track {
    background-color: transparent;
    margin-top: 10px;
    margin-bottom: 10px;
}
.nav-block::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 4px;
}
.nav-block:hover::-webkit-scrollbar-thumb {
    background-color: var(--btn-secondary);
}
.nav-block:hover::-webkit-scrollbar-thumb:hover {
    background-color: var(--btn-secondary-hover);
}

/* Фиксируем нижний блок */
.util-block { flex-shrink: 0; }

.nav-btn { background-color: var(--btn-secondary); color: var(--text-main); border: none; border-radius: var(--btn-radius); padding: 15px 8px; margin-bottom: 8px; cursor: pointer; text-align: center; font-size: 14px; transition: 0.2s; min-height: 50px; flex-shrink: 0; touch-action: manipulation; }
.nav-btn:last-child { margin-bottom: 0; }
.nav-btn.active, .nav-btn:hover { background-color: var(--accent-blue); color: white; }
.nav-btn small { font-size: 11px; opacity: 0.8; display: block; margin-top: 5px; }

.spacer { flex-grow: 1; }

.content { flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.tab-content { display: none; height: 100%; flex-direction: column; gap: 8px; overflow-y: auto; padding-right: 5px; }
.tab-content.active { display: flex; }
.placeholder { align-items: center; justify-content: center; text-align: center; color: var(--text-muted); font-size: 24px; font-weight: bold; }

/* =================================================================================
   3. ГЕОМЕТРИЯ И КАРТОЧКИ
================================================================================= */
.content-block-sync { min-width: 724px; }

.header-card,
.editors-card,
.filters-card,
.card {
    background-color: var(--bg-card);
    border-radius: var(--panel-radius);
    padding: 15px;
    transition: 0.3s;
}

.header-card { overflow-x: auto; min-width: 724px; }
.editors-card { display: flex; gap: 8px; padding: 8px 15px; flex-shrink: 0; min-width: 724px; }

.switches-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(175px, 1fr));
    gap: 8px;
    min-width: 724px;
}
.switches-grid .card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 175px;
    min-height: 170px;
    padding: 10px;
}

.filters-card {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    min-width: 724px;
}
.filter-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.card h3,
.filter-col h4,
.header-card h3,
.editors-card h3 {
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border-color);
    text-align: center;
    width: 100%;
}
.filter-col h4 { cursor: pointer; user-select: none; transition: color 0.2s ease-in-out; }
.filter-col h4:hover { color: var(--accent-blue); }

/* =================================================================================
   4. ЭЛЕМЕНТЫ УПРАВЛЕНИЯ (INPUTS, BUTTONS, SWITCHES)
================================================================================= */
.folder-input-group, .time-sim-group, .exclude-group { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.folder-input-group .btn.secondary { font-weight: normal; }

input[type="text"],
input[type="password"],
input[type="number"],
select.t-input {
    color-scheme: var(--color-scheme);
    flex-grow: 1;
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 8px 12px;
    border-radius: var(--element-radius);
    outline: none;
    transition: 0.3s;
    height: 32px;
    min-width: 0;
    font-size: 13px;
    caret-color: var(--text-main) !important;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus { border-color: var(--accent-blue); }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
    -webkit-text-fill-color: var(--text-main) !important;
    caret-color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--element-radius) !important;
    background-clip: padding-box !important;
    animation-name: onAutoFillStart !important;
}

input:autofill,
input:-moz-autofill,
input:-moz-autofill-preview {
    background-color: var(--input-bg) !important;
    background-image: none !important;
    color: var(--text-main) !important;
    -webkit-text-fill-color: var(--text-main) !important;
    caret-color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--element-radius) !important;
    box-shadow: none !important;
    filter: none !important;
    animation-name: onAutoFillStart !important;
}

input::-webkit-credentials-auto-fill-button,
input::-webkit-contacts-auto-fill-button,
input::-ms-reveal,
input::-ms-clear {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    right: 0 !important;
}

.password-container {
    position: relative;
    display: flex;
    width: 100%;
}
.password-container input[type="password"],
.password-container input[type="text"] {
    width: 100%;
    padding-right: 40px !important;
}
.password-toggle-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--text-muted);
    display: none;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    z-index: 2;
}

.password-toggle-icon:hover { color: var(--text-muted) !important; }

.time-input { flex-grow: 0 !important; width: 95px !important; text-align: center; flex-shrink: 0; }

#input_folder { direction: rtl; text-align: left; }
#input_folder:focus { direction: ltr; }
::placeholder { color: var(--text-muted); opacity: 1; }
input:disabled, select.t-input:disabled { color: var(--text-muted); -webkit-text-fill-color: var(--text-muted); cursor: not-allowed; }

.btn { border: none; border-radius: var(--element-radius); padding: 0 15px; cursor: pointer; font-weight: bold; transition: 0.2s; color: white; display: flex; align-items: center; justify-content: center; white-space: nowrap; flex-shrink: 0; height: 32px; touch-action: manipulation; }
.btn.primary { background-color: var(--accent-blue); }
.btn.primary:hover { background-color: var(--accent-hover); }
.btn.secondary { background-color: var(--btn-secondary); color: var(--text-main); font-size: 13px; }
.btn.secondary:hover { background-color: var(--btn-secondary-hover); }
.btn-sm { height: 32px; padding: 0 10px; }
.reference-btn { flex: 1; height: 38px; flex-shrink: 0; border-radius: var(--btn-radius); font-weight: normal; }

.ctk-switch { display: inline-flex; align-items: center; cursor: pointer; gap: 8px; margin-bottom: 6px; user-select: none; }
.ctk-switch span { font-size: 13px; }
.ctk-switch input { display: none; }
.switch-track { width: 36px; height: 20px; background-color: var(--switch-bg); border-radius: 10px; position: relative; border: 2px solid var(--border-color); transition: 0.2s; flex-shrink: 0; }
.switch-track::after { content: ''; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; background-color: var(--switch-handle); border-radius: 50%; transition: left 0.2s; }
.ctk-switch input:checked + .switch-track { background-color: var(--accent-blue); border-color: var(--accent-blue); }
.ctk-switch input:checked + .switch-track::after { left: 18px; background-color: white; }
.master-track { background-color: var(--btn-secondary); border-color: var(--btn-secondary); margin-bottom: 2px; }
.ctk-switch input:checked + .switch-track.master-track { background-color: var(--accent-blue); border-color: var(--accent-blue); }

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    margin-top: -5px;
    margin-bottom: 5px;
}
.checkbox-group input[type="checkbox"].t-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    margin: 0;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, border-color 0.2s;
    flex-shrink: 0;
}
.checkbox-group input[type="checkbox"].t-checkbox:checked {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
}
.checkbox-group input[type="checkbox"].t-checkbox:checked::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-top: -2px;
}
.checkbox-group label {
    font-size: 13px;
    color: var(--text-main);
    cursor: pointer;
}

/* =================================================================================
   5. ГЛАВНАЯ КНОПКА ЗАПУСКА И АНИМАЦИИ
================================================================================= */
.run-btn {
    --progress: 0%;
    height: 40px;
    font-size: 14px;
    font-weight: bold;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    z-index: 1;
    border-radius: var(--btn-radius);
    transition: transform 0.1s, filter 0.2s;
    min-width: 724px;
}

.run-btn .btn-text {
    position: relative;
    z-index: 5;
    pointer-events: auto;
    padding: 5px 15px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.run-btn::before,
.run-btn::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    height: 100%;
    border-radius: inherit;
    margin: 0;
    box-sizing: border-box;
    pointer-events: none;
}

.run-btn.is-running { background-color: transparent; background-image: none; color: white; }
html[data-theme="light"] .run-btn.is-running { color: #000000; }

.run-btn.is-running::after {
    width: 100%;
    background-color: var(--btn-secondary);
    background-image: linear-gradient(-45deg, rgba(0,0,0,0.15) 25%, transparent 25%, transparent 50%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.15) 75%, transparent 75%, transparent);
    background-size: 40px 40px;
    animation: stripemove_pieces 1.2s linear infinite;
    z-index: 2;
}
html[data-theme="light"] .run-btn.is-running::after {
    background-image: linear-gradient(-45deg, rgba(255,255,255,0.4) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0.4) 75%, transparent 75%, transparent);
}

.run-btn::before {
    width: var(--progress);
    background-color: var(--accent-blue);
    background-image: none;
    z-index: 3;
    transition: width 1.2s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.2s ease-in-out;
}

.run-btn.is-running:has(.btn-text:hover)::before { background-color: #cc3333; }

.run-btn.is-queued {
    background-color: transparent;
    background-image: linear-gradient(-45deg, var(--accent-hover) 25%, var(--accent-blue) 25%, var(--accent-blue) 50%, var(--accent-hover) 50%, var(--accent-hover) 75%, var(--accent-blue) 75%, var(--accent-blue));
    background-size: 40px 40px;
    animation: stripemove_pieces 1.2s linear infinite;
}
.run-btn.is-queued::before, .run-btn.is-queued::after { display: none; }

@keyframes stripemove_pieces {
    from { background-position: 0 0; }
    to { background-position: 40px 0; }
}

.progress-container { position: absolute; width: 0; height: 0; visibility: hidden; pointer-events: none; }
.progress-bar { display: none; }

/* =================================================================================
   6. КОНСОЛЬ И СКРОЛЛБАРЫ
================================================================================= */
.console-wrapper {
    flex-grow: 1;
    background-color: var(--console-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--panel-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 150px;
    transition: background-color 0.3s, border-color 0.3s;
    min-width: 724px;
    padding: 0;
}

.console-box {
    width: 100%;
    flex-grow: 1;
    font-family: 'Consolas', monospace;
    font-size: 13px;
    color: var(--console-text);
    white-space: pre-wrap;
    user-select: text;
    transition: color 0.3s;
    line-height: 1.4;
    direction: rtl;
    text-align: left;
    unicode-bidi: plaintext;
    padding: 8px 8px 8px 5px;
    border-radius: var(--panel-radius);
    overflow-y: scroll;
    overflow-x: hidden;
    z-index: 1;
    box-sizing: border-box;
    scroll-behavior: auto;
}

/* Настройки скроллбара консоли */
.console-box::-webkit-scrollbar {
    width: 12px;
    background-color: transparent;
}

.console-box::-webkit-scrollbar-track {
    background-color: transparent;
    margin-top: var(--panel-radius);
    margin-bottom: var(--panel-radius);
}

/* Пипка консоли по умолчанию скрыта */
.console-box::-webkit-scrollbar-thumb {
    background-color: transparent; 
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: 6px;
    min-height: 40px;
}

/* Интеллектуальное проявление при активации класса через JS */
.console-box.scrollbar-visible::-webkit-scrollbar-thumb {
    background-color: var(--btn-secondary);
    border: 3px solid transparent; 
    background-clip: padding-box;
    min-height: 40px;
}

.console-box.scrollbar-visible::-webkit-scrollbar-thumb:hover {
    background-color: var(--btn-secondary-hover);
    border: 3px solid transparent; 
    background-clip: padding-box;
    min-height: 40px;
}

/* Глобальные настройки скроллбаров (Tabulator и др) */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg-card); border-radius: 6px; }
::-webkit-scrollbar-thumb { 
    background: var(--btn-secondary); 
    border-radius: 6px; 
    border: 3px solid var(--bg-card);
    min-height: 40px; 
}
::-webkit-scrollbar-thumb:hover { background: var(--btn-secondary-hover); }
::-webkit-scrollbar-corner { background-color: transparent; }

/* =================================================================================
   7. ОВЕРЛЕИ, МОДАЛЬНЫЕ ОКНА, УВЕДОМЛЕНИЯ И ПОДСКАЗКИ
================================================================================= */
.ui-card-disabled { position: relative; overflow: hidden; }
.ui-card-overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(36, 36, 36, 0.85); z-index: 50; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; pointer-events: none; }
html[data-theme="light"] .ui-card-overlay { background-color: rgba(249, 249, 250, 0.85); }
.ui-card-disabled .ui-card-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; }

.card-toggle-header { cursor: pointer; transition: color 0.2s, opacity 0.2s; position: relative; z-index: 51; }
.card-toggle-header:hover { color: var(--accent-blue); text-shadow: 0 0 1px var(--accent-blue); }
.ui-card-overlay.active + .card-toggle-header { opacity: 0.4; }
.ui-card-overlay.active + .card-toggle-header:hover { opacity: 1; color: var(--accent-blue); text-shadow: 0 0 1px var(--accent-blue); }

.drop-zone-container { position: relative; overflow: hidden; flex-shrink: 0; }
.drop-overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(36, 36, 36, 0.85); border: 2px dashed var(--accent-blue); border-radius: var(--panel-radius); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 100; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; pointer-events: none; }
html[data-theme="light"] .drop-overlay { background-color: rgba(249, 249, 250, 0.85); }
.drop-zone-container.drag-active .drop-overlay { opacity: 1; visibility: visible; }
.drop-icon { margin-bottom: 8px; color: var(--accent-blue); }
.drop-text { font-size: 16px; font-weight: bold; color: var(--text-main); }

.custom-alert-overlay { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(36, 36, 36, 0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s ease-in-out; }
html[data-theme="light"] .custom-alert-overlay { background-color: rgba(249, 249, 250, 0.85); }
.custom-alert-overlay.show { opacity: 1; }
.custom-alert-box { background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 25px; min-width: 320px; max-width: 450px; box-shadow: 0 10px 25px rgba(0,0,0,0.3); text-align: center; display: flex; flex-direction: column; gap: 15px; transform: scale(0.9); transition: transform 0.2s ease-in-out; }
.custom-alert-overlay.show .custom-alert-box { transform: scale(1); }
.custom-alert-title { font-size: 18px; font-weight: bold; color: var(--text-main); margin-bottom: 5px; }
.custom-alert-message { font-size: 14px; color: var(--text-main); line-height: 1.5; margin-bottom: 8px; }
.custom-alert-btn { align-self: center; min-width: 120px; height: 35px; border-radius: var(--btn-radius); touch-action: manipulation; }

/* Глобальная всплывающая подсказка (Tooltip) */
.custom-app-tooltip {
    position: fixed; 
    background-color: var(--bg-card); 
    color: var(--text-main); 
    border: 1px solid var(--border-color); 
    border-radius: var(--element-radius); 
    padding: 6px 12px; 
    font-size: 13px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); 
    z-index: 100000; 
    pointer-events: none; 
    opacity: 0; 
    visibility: hidden; 
    transition: opacity 0.15s ease-in-out; 
    max-width: 320px; 
    word-wrap: break-word; 
    white-space: pre-wrap;
}

/* =================================================================================
   8. ВЫПАДАЮЩИЕ СПИСКИ И МЕНЮ
================================================================================= */
.custom-select-wrapper { position: relative; display: inline-block; min-width: 140px; height: 32px; }
.custom-select-trigger { background-color: var(--input-bg); border: 1px solid var(--border-color); color: var(--text-main); padding: 0 25px 0 12px; border-radius: var(--element-radius); cursor: pointer; line-height: 30px; user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; font-size: 14px; }
.custom-select-trigger::after { content: "▼"; position: absolute; right: 10px; top: 0; font-size: 10px; color: var(--text-muted); }
.custom-select-options { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--element-radius); box-shadow: 0 4px 15px rgba(0,0,0,0.3); z-index: 1000; display: none; flex-direction: column; max-height: 250px; overflow-y: auto; }
.custom-select-wrapper.open .custom-select-options { display: flex; }
.custom-select-option { padding: 8px 12px; cursor: pointer; color: var(--text-main); font-size: 14px; transition: background-color 0.2s; }
.custom-select-option:hover { background-color: var(--accent-blue); color: white; }
.custom-select-option.selected { background-color: var(--btn-secondary); }

.context-menu { position: absolute; background-color: var(--bg-card); border: none; border-radius: var(--element-radius); box-shadow: 0 4px 15px rgba(0,0,0,0.3); z-index: 1000; padding: 0; overflow: hidden; min-width: 215px; }
.menu-item { padding: 10px 15px; cursor: pointer; color: var(--text-main); font-size: 14px; transition: background-color 0.2s; }
.menu-item:hover { background-color: var(--accent-blue); color: white; }

/* =================================================================================
   9. НАСТРОЙКИ (SETTINGS TAB) И ACTION ИКОНКИ
================================================================================= */
.settings-card { background-color: var(--bg-card); border-radius: var(--panel-radius); padding: 25px; width: 100%; flex-grow: 1; height: 100%; display: flex; flex-direction: column; box-shadow: var(--shadow-card); overflow: hidden; overflow-y: auto; }
.settings-tab-pane { width: 100%; height: 100%; display: flex; flex-direction: column; }
.settings-grid-layout { display: flex; flex-direction: column; gap: 12px; flex-grow: 1; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.settings-row label { width: 220px; font-weight: bold; flex-shrink: 0; }
.settings-input-group { display: flex; flex-grow: 1; gap: 8px; }
.settings-input-group input { flex-grow: 1; }
.settings-divider { margin: 15px 0 5px 0; font-weight: bold; color: var(--text-muted); text-align: center; border-bottom: 1px solid var(--border-color); padding-bottom: 5px; }
.settings-footer { display: flex; justify-content: center; gap: 20px; margin-top: auto; padding-top: 20px; }

/* Иконки действий в таблицах (Tabulator) */
.action-icon-container { display: flex; gap: 15px; justify-content: center; align-items: center; width: 100%; height: 100%; }
.action-icon { cursor: pointer; transition: transform 0.1s; display: inline-flex; align-items: center; justify-content: center; outline: none; }
.action-icon:hover { transform: scale(1.15); opacity: 1; }

.icon-download { color: var(--text-main); }
.icon-save { color: var(--text-main); }
.icon-key { color: #f39c12; } 
.icon-delete { color: #cc3333; }
html[data-theme="dark"] .icon-delete { color: #FF6B6B; }

/* Глобальное правило для заголовков таблиц (Tabulator) - ЗАЩИТА ОТ ОБРЕЗКИ */
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
    white-space: normal !important;
    word-wrap: break-word !important;
    text-overflow: clip !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
}

/* =================================================================================
  11. SPA WORKSPACE PANELS
================================================================================= */
.workspace-overlay-panel {
    display: none;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--bg-main);
    z-index: 500;
    box-sizing: border-box;
    padding: 8px;
    flex-direction: column;
}
.workspace-overlay-panel.active {
    display: flex;
}
.workspace-panel-card {
    background-color: var(--bg-card);
    border-radius: var(--panel-radius);
    padding: 15px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

/* =================================================================================
   12. MODAL LAYOUT WRAPPER
================================================================================= */
.modal {
    display: none;
    position: fixed;
    z-index: 500;
    top: 0; bottom: 0; left: 0; right: 0;
    background-color: var(--bg-main);
    padding: 8px;
    box-sizing: border-box;
    transition: opacity 0.05s ease-in-out;
    justify-content: center;
    align-items: flex-start;
}
.modal.active { display: flex !important; }

.modal-layout-wrapper {
    max-width: 1500px;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    background-color: transparent;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.modal-panel {
    background-color: var(--bg-card);
    border-radius: var(--panel-radius);
    padding: 20px 15px;
    flex-shrink: 0;
    box-shadow: var(--shadow-card);
}

.modal-panel .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.modal-panel .editor-toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 15px;
    background-color: transparent;
    flex-shrink: 0;
}
.toolbar-group {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.toolbar-group:first-child {
    flex: 1 1 auto;
    min-width: 100px;
}

.modal-panel.flush {
    padding: 0;
    flex-grow: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.modal-panel.flush #table-container,
.modal-panel.flush #history-audit-table-container {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border: none !important;
    border-radius: var(--panel-radius) !important;
}

.modal-panel.flush .tabulator {
    border: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    overflow-x: hidden !important;
}

.tabulator .tabulator-tableholder {
    background-color: transparent !important;
}