/* IZI CRM — Light Google Sheets Style */
/* Aesthetic: Clean, readable, light — brand blue + orange accents */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
    --primary-color: #074783;
    --primary-hover: #053668;
    --primary-light: #e8f0f8;
    --primary-glow: rgba(7, 71, 131, 0.12);
    --accent-color: #F77350;
    --accent-hover: #e5623f;
    --secondary-color: #5f6368;
    --success-color: #188038;
    --warning-color: #e37400;
    --danger-color: #d93025;
    --bg-color: #ffffff;
    --card-bg: #ffffff;
    --text-color: #202124;
    --text-muted: #5f6368;
    --border-color: #dadce0;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 4px 12px rgba(0, 0, 0, 0.1);
    --radius: 4px;
    --radius-lg: 8px;
    --header-bg: #ffffff;
    --header-text: #202124;
    --transition: 0.15s ease;
    --surface-bg: #f8f9fa;
    --hover-bg: #f1f3f4;
    --surface-tint: #f0f5fa;
    --text-secondary: #9ca3af;
    --border-light: #e8eaed;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
    min-height: 100vh;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========== LOGIN PAGE ========== */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-bg);
    position: relative;
    overflow: hidden;
}

.login-page::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    top: 0;
    left: 0;
    pointer-events: none;
}

.login-page::after {
    content: none;
}

.login-container {
    background: var(--card-bg);
    padding: 40px 36px;
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--border-color);
    width: 100%;
    max-width: 400px;
    text-align: center;
    position: relative;
    z-index: 1;
    animation: loginAppear 0.4s ease;
}

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

.login-container h1 {
    color: var(--primary-color);
    margin-bottom: 6px;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.login-subtitle {
    color: var(--text-muted);
    margin-bottom: 28px;
    font-size: 0.9rem;
    font-weight: 400;
}

.forgot-password {
    display: block;
    margin-top: 18px;
    color: var(--primary-color);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: color var(--transition);
}

.forgot-password:hover {
    color: var(--primary-hover);
    text-decoration: none;
}

.error-message {
    color: var(--danger-color);
    font-size: 0.85rem;
    margin-top: 12px;
    font-weight: 500;
}

/* 2FA & Password Recovery */
.twofa-header {
    text-align: center;
    margin-bottom: 24px;
}

.twofa-icon {
    font-size: 44px;
    display: block;
    margin-bottom: 12px;
}

.twofa-header h3 {
    font-size: 1.2rem;
    color: var(--text-color);
    margin: 0;
    font-weight: 700;
}

.twofa-info {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 24px;
}

.code-input {
    text-align: center;
    font-size: 28px;
    letter-spacing: 10px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
}

.twofa-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 18px;
}

.twofa-actions a {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: color var(--transition);
}

.twofa-actions a:hover {
    color: var(--primary-hover);
}

/* ========== MAIN APP ========== */
.main-app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.hidden {
    display: none !important;
}

/* ========== HEADER ========== */
.header {
    background: var(--header-bg);
    padding: 0 20px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--border-color);
    box-shadow: none;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo svg {
    border-radius: 4px;
    flex-shrink: 0;
}

.logo-text {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-color);
    letter-spacing: -0.3px;
}

.main-nav {
    display: flex;
    gap: 0;
}

.nav-btn {
    padding: 6px 14px;
    background: transparent;
    border: none;
    border-radius: var(--radius);
    font-size: 0.825rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
    position: relative;
}

.nav-btn:hover {
    background: var(--hover-bg);
    color: var(--text-color);
}

.nav-btn.active {
    background: var(--primary-light);
    color: var(--primary-color);
    font-weight: 600;
    box-shadow: none;
}

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

.user-info {
    text-align: right;
}

.user-info span {
    display: block;
    color: var(--text-color);
    font-size: 0.82rem;
    font-weight: 500;
}

.user-role {
    font-size: 0.7rem !important;
    color: var(--text-muted) !important;
    font-weight: 400 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-logout {
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 0.8rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
}

.btn-logout:hover {
    background: var(--danger-color);
    color: white;
    border-color: var(--danger-color);
}

/* ========== CONTROL BAR ========== */
.control-bar {
    background: var(--card-bg);
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid var(--border-color);
}

.period-filters {
    display: flex;
    align-items: center;
    gap: 8px;
}

.period-filters label {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.825rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.period-filters select {
    padding: 7px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 0.85rem;
    background: var(--bg-color);
    color: var(--text-color);
    font-family: inherit;
    cursor: pointer;
    transition: border-color var(--transition);
}

.period-filters select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.global-search {
    flex: 1;
    max-width: 420px;
}

.global-search input {
    width: 100%;
    padding: 9px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 0.85rem;
    background: var(--bg-color);
    font-family: inherit;
    transition: all var(--transition);
}

.global-search input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-glow);
    background: var(--card-bg);
}

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

.btn-settings {
    padding: 8px 14px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 0.825rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all var(--transition);
    font-family: inherit;
    color: var(--text-muted);
    font-weight: 500;
}

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

/* ========== MAIN CONTENT ========== */
.main-content {
    flex: 1;
    padding: 16px 20px;
    overflow-x: hidden;
    overflow-y: hidden;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--surface-bg);
}

.main-content > .tab-panel.active {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#clientCardTab.active,
#auditTab.active {
    overflow-y: auto;
}

/* ========== TAB PANELS ========== */
.tab-panel {
    display: none;
}

.tab-panel.active {
    display: flex;
    flex-direction: column;
}

.tab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.tab-header h2 {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: normal;
    color: var(--text-color);
}

.tab-actions {
    display: flex;
    gap: 10px;
}

/* ========== STATS BAR ========== */
.stats-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
    flex-shrink: 0;
}

.stat-item {
    background: var(--card-bg);
    padding: 14px 18px;
    border-radius: var(--radius);
    box-shadow: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--border-color);
    transition: all var(--transition);
}

.stat-item:hover {
    background: var(--surface-bg);
}

.stat-label {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.stat-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--primary-color);
    font-variant-numeric: tabular-nums;
}

/* ========== TABLES ========== */
.table-wrapper {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: none;
    overflow-x: scroll;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    display: block;
    scrollbar-width: thin;
    scrollbar-color: #c1c8d1 transparent;
    position: relative;
    flex: 1;
    min-height: 0;
    border: 1px solid var(--border-color);
}

.table-wrapper::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.table-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.table-wrapper::-webkit-scrollbar-thumb {
    background: #c1c8d1;
    border-radius: var(--radius);
}

.table-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

.data-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

.data-table th,
.data-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    font-size: 13px;
    line-height: 1.4;
}

.data-table th {
    background: var(--surface-bg);
    font-weight: 500;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
    position: sticky;
    top: 0;
    z-index: 10;
    text-transform: none;
    letter-spacing: normal;
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-light);
    min-width: 70px;
    will-change: transform;
}

.data-table th:last-child {
    border-right: none;
}

.data-table th:hover {
    background: var(--hover-bg);
    color: var(--text-color);
}

.data-table tbody tr {
    transition: background var(--transition);
}

.data-table tbody tr:hover {
    background: var(--surface-bg);
}

.data-table tbody tr:nth-child(even) {
    background: transparent;
}

.data-table tbody tr:nth-child(even):hover {
    background: var(--surface-bg);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.loading {
    text-align: center;
    color: var(--text-muted);
    padding: 48px !important;
    font-weight: 500;
}

.no-data {
    text-align: center;
    color: var(--text-muted);
    padding: 48px !important;
}

/* Clickable row */
.clickable-row {
    cursor: pointer;
}

.clickable-row:hover {
    background: var(--primary-light) !important;
}

/* ========== STATUS BADGES ========== */
.status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius);
    font-size: 0.73rem;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.status-active {
    background: #d1fae5;
    color: #065f46;
}

.status-working {
    background: #fef3c7;
    color: #92400e;
}

.status-paused {
    background: #fed7aa;
    color: #c2410c;
}

.status-closed {
    background: #fecaca;
    color: #991b1b;
}

.status-submitted {
    background: #d1fae5;
    color: #065f46;
}

.status-pending {
    background: #f3f4f6;
    color: #4b5563;
}

.status-overdue {
    background: #fecaca;
    color: #991b1b;
}

/* Task statuses */
.status-new {
    background: #dbeafe;
    color: #1e40af;
}

.status-progress {
    background: #fef3c7;
    color: #92400e;
}

.status-done {
    background: #d1fae5;
    color: #065f46;
}

.status-error {
    background: #fecaca;
    color: #991b1b;
}

.status-success {
    background: #d1fae5;
    color: #065f46;
}

.error {
    color: #991b1b;
}

.empty {
    color: var(--text-muted);
    text-align: center;
    font-style: italic;
}

.priority-high {
    color: #991b1b;
    font-weight: 600;
}

/* Circular spinner */
.status-badge-spinner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 4px;
    background: var(--surface-tint);
    border-radius: var(--radius);
}

.spinner-ring {
    width: 22px;
    height: 22px;
    animation: spin 1.2s linear infinite;
}

.spinner-track {
    fill: none;
    stroke: #a3c4e3;
    stroke-width: 3;
}

.spinner-arc {
    fill: none;
    stroke: var(--primary-color);
    stroke-width: 3;
    stroke-dasharray: 60, 88;
    stroke-linecap: round;
}

.spinner-text {
    font-size: 0.73rem;
    font-weight: 600;
    color: var(--primary-hover);
}

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

.priority-urgent {
    background-color: #fffbeb !important;
}

.priority-urgent td:first-child {
    border-left: 3px solid #f59e0b;
}

/* Task details */
.task-details {
    line-height: 1.8;
}

.task-details p {
    margin: 8px 0;
}

.task-log {
    background: var(--surface-bg);
    padding: 14px;
    border-radius: var(--radius);
    font-size: 0.85rem;
    white-space: pre-wrap;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    font-family: 'JetBrains Mono', monospace;
}

/* ========== ACTION BUTTONS ========== */
.action-btns {
    white-space: nowrap;
    vertical-align: middle;
}

.btn-icon {
    padding: 5px 10px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.75rem;
    transition: all var(--transition);
    font-family: inherit;
    margin-right: 4px;
}

.btn-icon:last-child {
    margin-right: 0;
}

.btn-icon:hover {
    background: var(--bg-color);
}

.btn-icon.edit:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

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

.btn-icon.parser {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-icon.parser:hover {
    background: var(--primary-color);
    color: white;
}

/* Parser Launch Modal Info — Gradient Modern */
#parserLaunchModal .parser-launch-info {
    margin: -12px 28px 0;
    padding: 16px 20px;
    background: linear-gradient(135deg, #f0f4ff 0%, #f5f0ff 100%);
    border-radius: 14px;
    position: relative;
    z-index: 1;
    border: 1px solid rgba(102, 126, 234, 0.1);
    color: #1e3a5f;
}

#parserLaunchModal .parser-launch-info .info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

#parserLaunchModal .parser-launch-info .info-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #8b7fc7;
    font-weight: 700;
    opacity: 1;
}

#parserLaunchModal .parser-launch-info .info-value {
    font-size: 14px;
    font-weight: 600;
    color: #1e3a5f;
}

#parserLaunchOrgInn {
    font-family: 'SF Mono', 'Menlo', monospace;
    letter-spacing: 0.5px;
}

/* ========== SUB-TABS ========== */
.sub-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 20px;
    flex-shrink: 0;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0;
}

.sub-tab-btn {
    padding: 9px 18px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: 0.85rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
    font-weight: 500;
}

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

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

.sub-panel {
    display: none;
}

.sub-panel.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* ========== SALYK SUB-TABS ========== */
.salyk-sub-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 16px;
    background: var(--hover-bg);
    padding: 3px;
    border-radius: var(--radius);
    width: fit-content;
}

.salyk-sub-btn {
    padding: 5px 12px;
    background: transparent;
    border: none;
    border-radius: var(--radius);
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
    font-weight: 500;
}

.salyk-sub-btn:hover {
    color: var(--text-color);
}

.salyk-sub-btn.active {
    background: #ffffff;
    color: var(--primary-color);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.salyk-sub-panel {
    display: none;
}

.salyk-sub-panel.active {
    display: block;
}

/* Salyk Two-level Navigation */
.salyk-nav {
    margin-bottom: 16px;
}

.salyk-group-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 8px;
    background: var(--hover-bg);
    padding: 3px;
    border-radius: var(--radius);
    width: fit-content;
}

.salyk-group-btn {
    padding: 6px 14px;
    background: transparent;
    border: none;
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition);
    text-transform: none;
    letter-spacing: normal;
    font-family: inherit;
}

.salyk-group-btn:hover {
    color: var(--text-color);
    background: rgba(0,0,0,0.04);
}

.salyk-group-btn.active {
    background: #ffffff;
    color: var(--primary-color);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.file-download-btn {
    display: inline-block;
    padding: 3px 10px;
    background: var(--primary-color);
    color: white;
    border-radius: var(--radius);
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    transition: background var(--transition);
}

.file-download-btn:hover {
    background: var(--primary-hover);
}

/* ========== CLIENT CARD ========== */
.client-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.card-section {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: none;
    border: 1px solid var(--border-color);
}

.card-section h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border-color);
    color: var(--text-color);
    letter-spacing: -0.2px;
}

.card-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.info-item {
    display: flex;
    flex-direction: column;
}

.info-label {
    font-size: 0.73rem;
    color: var(--text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 500;
}

.info-value {
    font-weight: 600;
    color: var(--text-color);
}

/* Client Card Period Filter */
.card-period-filter {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 16px 22px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.card-period-filter label {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.825rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.card-period-filter select {
    padding: 7px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-color);
    cursor: pointer;
    font-family: inherit;
    transition: border-color var(--transition);
}

.card-period-filter select:focus {
    outline: none;
    border-color: var(--primary-color);
}

.btn-back {
    padding: 8px 16px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    cursor: pointer;
    margin-right: 12px;
    font-size: 0.85rem;
    font-family: inherit;
    font-weight: 500;
    transition: all var(--transition);
    color: var(--text-muted);
}

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

/* ========== BUTTONS ========== */
.btn-primary {
    padding: 8px 18px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
    box-shadow: none;
}

.btn-primary:hover {
    background: var(--primary-hover);
    box-shadow: 0 1px 3px rgba(7, 71, 131, 0.2);
}

.btn-primary:active {
    background: #042d54;
}

.btn-secondary {
    padding: 9px 20px;
    background: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
    font-weight: 500;
}

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

.btn-danger {
    padding: 9px 20px;
    background: var(--danger-color);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 0.85rem;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    transition: all var(--transition);
}

.btn-danger:hover {
    background: #dc2626;
    transform: translateY(-1px);
}

.btn-full {
    width: 100%;
}

/* ========== MODALS ========== */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.32);
    backdrop-filter: none;
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal.show {
    display: flex;
    animation: modalBgAppear 0.25s ease;
}

@keyframes modalBgAppear {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 500px;
    max-height: 85vh;
    margin: 20px;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    animation: modalSlideUp 0.2s ease;
    border: 1px solid var(--border-color);
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-content-wide {
    max-width: 580px;
}

.modal-large {
    max-width: 700px;
}

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

.modal-header h2 {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.2px;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--text-muted);
    line-height: 1;
    padding: 4px;
    border-radius: var(--radius);
    transition: all var(--transition);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

/* ========== FORMS ========== */
form {
    padding: 24px 26px;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    font-size: 0.825rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-color);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 13px;
    transition: all var(--transition);
    font-family: inherit;
    background: var(--card-bg);
    color: var(--text-color);
}

.form-group select,
.period-field select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23667085' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    cursor: pointer;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-glow);
    background: var(--card-bg);
}

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

.form-group input[type="checkbox"] {
    width: auto;
    margin-right: 8px;
}

/* iOS-style toggle switch */
.ios-toggle {
    display: flex !important;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-color);
    user-select: none;
    margin-bottom: 0 !important;
    line-height: 1;
}

.ios-toggle input[type="checkbox"] {
    display: none !important;
}

.ios-toggle-track {
    display: inline-block;
    width: 44px;
    min-width: 44px;
    height: 24px;
    background: #d1d5db;
    border-radius: 12px;
    position: relative;
    transition: background 0.3s;
    flex-shrink: 0;
    vertical-align: middle;
}

.ios-toggle-track::after {
    content: '';
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.ios-toggle input:checked + .ios-toggle-track {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 100%);
}

.ios-toggle input:checked + .ios-toggle-track::after {
    transform: translateX(20px);
}

.ios-toggle span:last-child {
    line-height: 24px;
}

/* Расторгнут + дата в одну строку */
.toggle-date-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.toggle-date-row .form-group {
    margin-bottom: 0;
}

.toggle-date-row .ios-toggle {
    white-space: nowrap;
}

.toggle-date-row .termination-date-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.toggle-date-row .termination-date-inline label {
    white-space: nowrap;
    margin-bottom: 0;
    font-size: 0.825rem;
    font-weight: 600;
}

.toggle-date-row .termination-date-inline input {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 13px;
    font-family: inherit;
    background: var(--card-bg);
    color: var(--text-color);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-group.full-width {
    grid-column: span 2;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--border-color);
    margin-top: 8px;
    background: var(--surface-bg);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Column Settings */
.columns-settings {
    padding: 22px 26px;
}

.columns-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.columns-list label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: var(--radius);
    transition: background var(--transition);
}

.columns-list label:hover {
    background: var(--bg-color);
}

.columns-templates {
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.columns-templates h4 {
    margin-bottom: 12px;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
}

.columns-templates select {
    width: 100%;
    padding: 8px 12px;
    margin-bottom: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-family: inherit;
}

/* ========== WHATSAPP LINK ========== */
.whatsapp-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background: transparent;
    border-radius: var(--radius);
    transition: transform var(--transition);
    text-decoration: none;
    color: #25d366;
}

.whatsapp-link:hover {
    transform: scale(1.15);
    text-decoration: none;
}

.whatsapp-link .wa-icon {
    display: block;
}

/* ========== INLINE FILTERS ========== */
.filter-row {
    background: var(--surface-bg);
}

.filter-row th {
    padding: 6px 8px;
    top: 41px;
    border-bottom: 2px solid var(--border-color);
}

.column-filter-input {
    width: 100%;
    padding: 6px 8px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 0.75rem;
    background: var(--card-bg);
    font-family: inherit;
    transition: border-color var(--transition);
}

.column-filter-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-glow);
}

.btn-clear-filters {
    padding: 5px 12px;
    background: var(--danger-color);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 0.75rem;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    transition: background var(--transition);
}

.btn-clear-filters:hover {
    background: #dc2626;
}

/* ========== INLINE EDITING ========== */
.editable-cell {
    padding: 0 !important;
}

.inline-edit {
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    font-size: 0.875rem;
    font-family: inherit;
}

.inline-edit:focus {
    outline: none;
    background: var(--surface-tint);
}

/* Form hints */
.form-hint {
    display: block;
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* File links */
.file-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition);
}

.file-link:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

/* Comment cell */
.comment-cell {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Archived row */
.archived-row {
    opacity: 0.55;
    background: var(--surface-bg);
}

.status-archived {
    background: #94a3b8;
    color: white;
}

/* View button */
.btn-icon.view {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.btn-icon.view:hover {
    background: var(--primary-hover);
}

/* ========== PRIORITY & OVERDUE ========== */
.priority-overdue {
    background: #fef2f2 !important;
}

.priority-overdue td {
    color: #991b1b;
    font-weight: 500;
}

.priority-urgent {
    background: #fffbeb !important;
}

.priority-urgent td {
    color: #92400e;
}

.priority-soon {
    background: #fefce8 !important;
}

.days-left {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.priority-overdue .days-left {
    color: var(--danger-color);
}

.priority-urgent .days-left {
    color: var(--warning-color);
}

/* Sortable headers */
.sortable {
    cursor: pointer;
    user-select: none;
}

.sortable:hover {
    background: var(--hover-bg);
}

/* Full width info item */
.info-item.full-width {
    grid-column: 1 / -1;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .header {
        flex-wrap: wrap;
        height: auto;
        padding: 12px;
    }

    .main-nav {
        order: 3;
        width: 100%;
        margin-top: 12px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .control-bar {
        flex-wrap: wrap;
    }

    .global-search {
        order: 3;
        max-width: 100%;
        width: 100%;
        margin-top: 12px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .form-group.full-width {
        grid-column: span 1;
    }

    .columns-list {
        grid-template-columns: 1fr;
    }
}

/* ========== FILES (DMS) ========== */
.files-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary-color);
}

.files-table {
    font-size: 0.85rem;
}

.archived-row {
    opacity: 0.55;
    background-color: var(--surface-bg);
}

.status-archived {
    background-color: #6b7280;
    color: white;
}

.btn-sm {
    padding: 5px 12px;
    font-size: 0.75rem;
}

.btn-icon.download {
    background-color: var(--success-color);
    color: white;
    border-color: var(--success-color);
}

/* Document folders */
.doc-folder {
    margin-bottom: 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
}

.doc-folder-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    background: var(--surface-bg);
    cursor: pointer;
    user-select: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background var(--transition);
}

.doc-folder-header:hover {
    background: var(--hover-bg);
}

.doc-folder-icon {
    font-size: 1.1rem;
}

.doc-folder-toggle {
    margin-left: auto;
    font-size: 0.7rem;
    transition: transform 0.2s;
    color: var(--text-muted);
}

.doc-folder.collapsed .doc-folder-toggle {
    transform: rotate(-90deg);
}

.doc-folder.collapsed .doc-folder-content {
    display: none;
}

.doc-folder-content {
    padding: 0;
}

.doc-folder-content .data-table {
    margin: 0;
    border-radius: 0;
}

.btn-icon.download:hover {
    background-color: #059669;
}

.btn-icon.archive {
    background-color: #6b7280;
    color: white;
    border-color: #6b7280;
}

.btn-icon.archive:hover {
    background-color: #4b5563;
}

.btn-icon.restore {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

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

.file-input,
input[type="file"].form-control {
    width: 100%;
    padding: 10px 14px;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-color);
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.file-input:hover,
input[type="file"].form-control:hover {
    border-color: var(--primary-color);
    background: var(--surface-tint);
}

input[type="file"].form-control::file-selector-button {
    padding: 6px 16px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 0.82rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    margin-right: 12px;
    transition: background 0.15s;
}

input[type="file"].form-control::file-selector-button:hover {
    background: var(--primary-hover);
}

.modal-sm {
    max-width: 450px;
}

/* Dictionaries */
.inactive-row {
    opacity: 0.45;
    background-color: var(--surface-bg) !important;
}

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

/* ========== NOTIFICATION & CONFIRM MODALS ========== */
.notification-modal .modal-notification,
.confirm-modal .modal-confirm {
    max-width: 420px;
    text-align: center;
    padding: 36px;
    position: relative;
}

.confirm-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    font-size: 1.3rem;
    color: var(--text-muted);
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    transition: all var(--transition);
    line-height: 1;
}
.confirm-close:hover {
    color: var(--text-color);
    background: var(--bg-color);
}

.notification-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.notification-icon.success { color: var(--success-color); }
.notification-icon.error { color: var(--danger-color); }
.notification-icon.warning { color: var(--warning-color); }
.notification-icon.info { color: var(--primary-color); }

.notification-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-color);
}

.notification-message {
    color: var(--text-muted);
    margin-bottom: 24px;
    line-height: 1.6;
    font-size: 0.9rem;
}

.notification-actions,
.confirm-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.confirm-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--accent-color);
    color: white;
    font-size: 24px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    box-shadow: none;
}

.confirm-message {
    font-size: 1rem;
    color: var(--text-color);
    margin-bottom: 24px;
    line-height: 1.6;
}

/* Prompt modal */
.prompt-modal .modal-prompt {
    max-width: 420px;
    padding: 28px;
}

.prompt-message {
    font-size: 1rem;
    color: var(--text-color);
    margin-bottom: 16px;
    font-weight: 500;
}

.prompt-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 0.875rem;
    margin-bottom: 20px;
    font-family: inherit;
    background: var(--bg-color);
    transition: all var(--transition);
}

.prompt-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-glow);
    background: var(--card-bg);
}

.prompt-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ========== IMPORT MODAL ========== */
.import-info {
    background: var(--bg-color);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 20px;
    font-size: 0.875rem;
    border: 1px solid var(--border-color);
}

.import-info p {
    margin: 0 0 8px;
}

.import-info ul {
    margin: 8px 0;
    padding-left: 20px;
}

.import-info li {
    margin: 4px 0;
    color: var(--text-muted);
}

.import-preview {
    margin-top: 20px;
    padding: 16px;
    background: var(--bg-color);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
}

.import-preview h4 {
    margin: 0 0 12px;
    font-size: 0.875rem;
    font-weight: 700;
}

.preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.preview-table th,
.preview-table td {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    text-align: left;
}

.preview-table th {
    background: var(--surface-bg);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.3px;
}

#importTotalCount {
    margin-top: 12px;
    font-weight: 600;
    color: var(--primary-color);
}

/* ========== TOAST NOTIFICATIONS ========== */
.toast-container {
    position: fixed;
    top: 76px;
    right: 24px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xl);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 320px;
    max-width: 460px;
    pointer-events: auto;
    animation: slideInRight 0.35s cubic-bezier(0.16, 1, 0.3, 1), fadeOut 0.35s ease 2.65s forwards;
    border-left: 4px solid var(--primary-color);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary-color);
}

.toast.success {
    border-left-color: var(--success-color);
}

.toast.error {
    border-left-color: var(--danger-color);
}

.toast.warning {
    border-left-color: var(--warning-color);
}

.toast-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.toast.success .toast-icon { color: var(--success-color); }
.toast.error .toast-icon { color: var(--danger-color); }
.toast.warning .toast-icon { color: var(--warning-color); }
.toast.info .toast-icon { color: var(--primary-color); }

.toast-content {
    flex: 1;
}

.toast-title {
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 2px;
}

.toast-message {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.toast-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
    padding: 4px;
    opacity: 0.5;
    transition: opacity var(--transition);
    border-radius: 4px;
}

.toast-close:hover {
    opacity: 1;
}

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

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* ========== TASKS DASHBOARD ========== */
.tasks-dashboard {
    margin-bottom: 8px;
}

/* Toggle filters button */
.btn-toggle-filters {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--card-bg);
    font-size: 0.82rem;
    font-family: inherit;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition);
}

.btn-toggle-filters:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-toggle-filters.active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.btn-toggle-filters svg {
    flex-shrink: 0;
}

.tasks-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 14px 18px;
    background: var(--card-bg);
    border-radius: var(--radius);
    margin-bottom: 8px;
    align-items: center;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
}

.tasks-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.task-filter-btn {
    padding: 4px 12px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: white;
    font-size: 12px;
    cursor: pointer;
    transition: all var(--transition);
    color: var(--text-muted);
    font-family: inherit;
    font-weight: 500;
}

.task-filter-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.task-filter-btn.active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    box-shadow: none;
}

.task-period-group {
    display: flex;
    gap: 2px;
    margin-left: 4px;
    padding-left: 10px;
    border-left: 2px solid var(--border-color);
}

.task-custom-period {
    display: flex;
    align-items: center;
    gap: 4px;
}

.task-custom-period input[type="date"] {
    padding: 3px 6px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 0.75rem;
    background: var(--bg-color);
    font-family: inherit;
}

.tasks-filter-selects {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}

.tasks-filter-selects .filter-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tasks-filter-selects label {
    font-size: 0.73rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.tasks-filter-selects select {
    padding: 5px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: #fff;
    font-size: 0.78rem;
    font-family: inherit;
    color: var(--text-color);
    min-width: 100px;
    cursor: pointer;
    transition: border-color var(--transition);
}

.tasks-filter-selects select:hover,
.tasks-filter-selects select:focus {
    border-color: var(--primary-color);
    outline: none;
}

/* Indicators inside filter bar */
.tasks-indicators {
    display: flex;
    gap: 6px;
    margin-left: 8px;
}


.task-indicator {
    padding: 3px 12px;
    border-radius: 16px;
    font-size: 12px;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
    font-weight: 600;
}

.task-indicator.active {
    box-shadow: 0 0 0 2px var(--primary-color);
}

.indicator-overdue {
    background: #fecaca;
    color: #991b1b;
}

.indicator-escalation {
    background: #fef3c7;
    color: #92400e;
}

.indicator-done {
    background: #d1fae5;
    color: #065f46;
}

/* Stats toggle */
.tasks-stats-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--card-bg);
    border-radius: var(--radius);
    margin-bottom: 8px;
    cursor: pointer;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
    font-size: 0.825rem;
    color: var(--text-muted);
    user-select: none;
    font-weight: 500;
    transition: all var(--transition);
}

.tasks-stats-toggle:hover {
    color: var(--text-color);
    border-color: var(--primary-color);
}

.tasks-stats-toggle .toggle-arrow {
    transition: transform 0.25s;
    font-size: 0.7rem;
}

.tasks-stats-toggle.expanded .toggle-arrow {
    transform: rotate(90deg);
}

.tasks-stats-grid {
    display: none;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}

.tasks-stats-grid.visible {
    display: grid;
}

.tasks-stat-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 12px 14px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
}

.tasks-stat-card h4 {
    margin: 0 0 8px 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.stat-card-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 120px;
    overflow-y: auto;
}

.stat-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    font-size: 0.78rem;
}

.stat-card-name {
    color: var(--text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 75%;
}

.stat-card-count {
    font-weight: 700;
    color: var(--primary-color);
    min-width: 20px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.stat-card-empty {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-style: italic;
}

@media (max-width: 900px) {
    .tasks-stats-grid {
        grid-template-columns: 1fr;
    }
    .tasks-filter-bar {
        flex-direction: column;
        align-items: flex-start;
    }
    .tasks-filter-selects {
        margin-left: 0;
    }
    .tasks-indicators {
        margin-left: 0;
    }
}

/* Task Row Indicators */
.row-overdue {
    background-color: #fef2f2 !important;
}

.row-escalated {
    background-color: #fffbeb !important;
}

.indicator-overdue {
    color: #dc2626;
    font-weight: 700;
}

.indicator-escalated {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius);
    font-size: 0.73rem;
    font-weight: 600;
}

.escalation-1 { background: #fef3c7; color: #92400e; }
.escalation-2 { background: #fed7aa; color: #9a3412; }
.escalation-3 { background: #fecaca; color: #991b1b; }

/* Task Action Buttons */
.task-actions {
    white-space: nowrap;
}

.task-actions button {
    padding: 4px 8px;
    font-size: 0.72rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    font-weight: 600;
    transition: all var(--transition);
}

.btn-start { background: var(--success-color); color: white; }
.btn-start:hover { background: #059669; }
.btn-pause { background: var(--warning-color); color: white; }
.btn-pause:hover { background: #d97706; }
.btn-stop { background: var(--danger-color); color: white; }
.btn-stop:hover { background: #dc2626; }
.btn-transfer { background: #6b7280; color: white; }
.btn-transfer:hover { background: #4b5563; }

/* code tag */
code {
    background: var(--border-light);
    padding: 2px 7px;
    border-radius: 5px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
}

/* ========== Parser Launch Modal — Gradient Modern ========== */
#parserLaunchModal .modal-content-wide {
    max-width: 480px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.05);
    border: none;
}

#parserLaunchModal .modal-header {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 100%);
    padding: 28px 28px 24px;
    position: relative;
    overflow: hidden;
    border-bottom: none;
    display: block;
}
#parserLaunchModal .modal-header::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 200px;
    height: 200px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
}
#parserLaunchModal .modal-header::after {
    content: '';
    position: absolute;
    bottom: -40%;
    left: -5%;
    width: 150px;
    height: 150px;
    background: rgba(255,255,255,0.03);
    border-radius: 50%;
}
#parserLaunchModal .modal-header h2 {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    position: relative;
    z-index: 1;
}
#parserLaunchModal .modal-subtitle {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    margin: 4px 0 0;
    position: relative;
    z-index: 1;
}
#parserLaunchModal .modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: none;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 18px;
    z-index: 2;
    padding: 0;
}
#parserLaunchModal .modal-close:hover {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

#parserLaunchModal form {
    padding: 0;
}

/* Custom checkboxes — gradient */
#parserLaunchModal input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border: 2px solid #d0d5e0;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    flex-shrink: 0;
    background: #fff;
}
#parserLaunchModal input[type="checkbox"]:checked {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 100%);
    border-color: transparent;
    box-shadow: 0 2px 6px rgba(30, 58, 95, 0.3);
}
#parserLaunchModal input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 45%;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

/* Parser sections wrapper */
#parserLaunchModal .parser-sections {
    margin: 0;
    padding: 20px 28px 0;
    background: none;
    border-radius: 0;
    border: none;
}

/* Select All header */
#parserLaunchModal .section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f8f9ff 0%, #fff 100%);
    border: 1px solid #e8ecf4;
    margin-bottom: 16px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 600;
    font-size: 14px;
    color: #333;
}
#parserLaunchModal .section-header:hover {
    border-color: #c5d0e8;
    box-shadow: 0 2px 8px rgba(30, 58, 95, 0.06);
}

/* Checkbox list */
#parserLaunchModal .parser-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Checkbox items */
#parserLaunchModal .parser-checkbox-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px 11px 36px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
    margin: 2px 0;
    border: none;
    background: none;
    font-size: 14px;
}
#parserLaunchModal .parser-checkbox-item:hover {
    background: linear-gradient(135deg, #f8f9ff 0%, #fff 100%);
    border-color: transparent;
}
#parserLaunchModal .parser-checkbox-item span {
    font-size: 14px;
    color: #444;
    font-weight: 500;
}

/* Period block */
#parserLaunchModal .parser-period-block {
    padding: 12px 28px 0;
    display: flex;
    align-items: center;
    gap: 16px;
}
.parser-period-label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}
/* Custom month picker */
.month-picker {
    flex: 1;
    position: relative;
}
.month-picker-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border: 2px solid #e8ecf4;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    background: linear-gradient(135deg, #f8f9ff 0%, #fff 100%);
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}
.month-picker-display:hover {
    border-color: #c5d0e8;
    box-shadow: 0 2px 8px rgba(30, 58, 95, 0.06);
}
.month-picker-display.open {
    border-color: #2d5a8e;
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}
.month-picker-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.04);
    border: 1px solid #e8ecf4;
    padding: 16px;
    z-index: 100;
    animation: monthPickerIn 0.15s ease;
}
.month-picker-dropdown.open {
    display: block;
}
@keyframes monthPickerIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
.month-picker-year-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.month-picker-year {
    font-size: 16px;
    font-weight: 700;
    color: #1e3a5f;
}
.month-picker-arrow {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: #f0f4ff;
    color: #1e3a5f;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.month-picker-arrow:hover {
    background: #e0e8f8;
}
.month-picker-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.month-picker-cell {
    padding: 10px 4px;
    border-radius: 10px;
    border: none;
    background: none;
    font-size: 13px;
    font-weight: 500;
    color: #444;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    font-family: inherit;
}
.month-picker-cell:hover {
    background: #f0f4ff;
    color: #1e3a5f;
}
.month-picker-cell.selected {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 100%);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(30, 58, 95, 0.25);
}
.month-picker-cell.current {
    border: 2px solid #2d5a8e;
    padding: 8px 2px;
}
.month-picker-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}
.month-picker-clear,
.month-picker-today {
    background: none;
    border: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.15s;
}
.month-picker-clear {
    color: #999;
}
.month-picker-clear:hover {
    color: #666;
    background: #f5f5f5;
}
.month-picker-today {
    color: #2d5a8e;
}
.month-picker-today:hover {
    background: #f0f4ff;
}

/* Telegram toggle row */
#parserLaunchModal .parser-telegram-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 28px;
    margin-top: 8px;
    border-top: 1px solid #f0f0f0;
}
.parser-tg-label {
    font-size: 14px;
    color: #333;
    font-weight: 600;
}
.parser-tg-sub {
    font-size: 12px;
    color: #999;
    margin-top: 2px;
}
.parser-toggle {
    width: 48px;
    height: 26px;
    background: #e0e0e0;
    border-radius: 13px;
    cursor: pointer;
    position: relative;
    transition: background 0.3s;
    flex-shrink: 0;
}
.parser-toggle.active {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 100%);
}
.parser-toggle-knob {
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.parser-toggle.active .parser-toggle-knob {
    transform: translateX(22px);
}

/* Footer buttons */
#parserLaunchModal .form-actions {
    padding: 16px 28px 28px;
    display: flex;
    gap: 12px;
    border-top: none;
    background: none;
    margin-top: 0;
    justify-content: stretch;
}
#parserLaunchModal .form-actions .btn-secondary {
    flex: 1;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: #666;
}
#parserLaunchModal .form-actions .btn-secondary:hover {
    background: #f8f8f8;
    border-color: #ccc;
}
#parserLaunchModal .form-actions .btn-primary {
    flex: 2;
    padding: 14px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 100%);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.3);
}
#parserLaunchModal .form-actions .btn-primary:hover {
    box-shadow: 0 6px 20px rgba(30, 58, 95, 0.4);
    transform: translateY(-1px);
}

/* ========== Task Details View ========== */
.task-details-view {
    max-height: 70vh;
    overflow-y: auto;
}

.task-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

.task-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.task-info-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.task-info-value {
    font-weight: 600;
    color: var(--text-color);
}

.task-log-section {
    border-top: 2px solid var(--border-color);
    padding-top: 16px;
}

.task-log-section h4 {
    margin: 0 0 12px 0;
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: 700;
}

.task-log-timeline {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 300px;
    overflow-y: auto;
}

.log-entry {
    display: flex;
    gap: 12px;
    padding: 10px 14px;
    background: var(--surface-bg);
    border-radius: var(--radius);
    border-left: 3px solid #e5e7eb;
    font-size: 0.85rem;
}

.log-entry.start {
    border-left-color: var(--primary-color);
    background: var(--surface-tint);
}

.log-entry.success {
    border-left-color: var(--success-color);
    background: #f0fdf4;
}

.log-entry.error {
    border-left-color: var(--danger-color);
    background: #fef2f2;
}

.log-entry.pause {
    border-left-color: var(--warning-color);
    background: #fffbeb;
}

.log-time {
    color: var(--text-muted);
    font-size: 0.75rem;
    white-space: nowrap;
    min-width: 130px;
    font-family: 'JetBrains Mono', monospace;
}

.log-message {
    color: var(--text-color);
    flex: 1;
}

.log-empty {
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    padding: 20px;
}

/* Additional task statuses */
.status-paused {
    background: #fef3c7;
    color: #92400e;
}

.status-stopped {
    background: #f3f4f6;
    color: #4b5563;
}

/* ========== Tasks Table ========== */
.task-number {
    font-weight: 700;
    color: var(--primary-color);
    text-align: center;
    min-width: 55px;
    font-variant-numeric: tabular-nums;
}

.task-date {
    white-space: nowrap;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.task-inn {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.priority-high {
    color: #dc2626;
    font-weight: 700;
}

/* Task Details Container */
.task-details-container {
    padding: 18px 22px;
    max-height: 70vh;
    overflow-y: auto;
}

.task-details-view {
    padding: 0;
}

.task-details-view .task-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
    margin-bottom: 24px;
}

.task-details-view .task-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.task-details-view .task-info-label {
    font-size: 0.7rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.task-details-view .task-info-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color);
    word-break: break-word;
}

.task-details-view .task-log-section {
    border-top: 2px solid var(--border-color);
    padding-top: 16px;
    margin-top: 8px;
}

.task-details-view .task-log-section h4 {
    margin: 0 0 12px 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: #374151;
}

/* ========== COMPACT TABLE OPTIMIZATIONS ========== */

/* --- svodTable: dynamic columns, "Организация" + "Вид деятельности" wide --- */
#svodTable td {
    max-width: 240px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}

/* --- salykDataTable: dynamic columns depending on sub-tab --- */
#salykDataTable td {
    max-width: 260px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}

/* --- organizationsTable: 13 columns, many wide --- */
#organizationsTable td:nth-child(1) {  /* Организация */
    max-width: 200px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}
#organizationsTable td:nth-child(4) {  /* Адрес организации */
    max-width: 180px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}
#organizationsTable td:nth-child(5),
#organizationsTable th:nth-child(5) {  /* Вид налога */
    max-width: 180px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}
#organizationsTable td:nth-child(8) {  /* Вид деятельности */
    max-width: 160px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}
#organizationsTable td:nth-child(9) {  /* Доп. вид деятельности */
    max-width: 140px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}

/* --- salykDataTable: "Наименование" column can be long --- */
#salykDataTable td:nth-child(2) {  /* Организация */
    max-width: 200px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}
#salykDataTable td:nth-child(4) {  /* Наименование */
    max-width: 200px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}

/* --- reportsTable: "Организация" --- */
#reportsTable td:nth-child(1) {  /* Организация */
    max-width: 220px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}

/* --- paymentsTable: "Организация" + "Назначение" --- */
#paymentsTable td:nth-child(2) {  /* Организация */
    max-width: 200px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}
#paymentsTable td:nth-child(3) {  /* Назначение */
    max-width: 200px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}

/* --- revenueTable: "Организация" --- */
#revenueTable td:nth-child(1) {  /* Организация */
    max-width: 220px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}

/* --- clientsTable: "Имя клиента" --- */
#clientsTable td:nth-child(1) {  /* Имя клиента */
    max-width: 220px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}

/* --- repAccessesBody parent table: many narrow columns, keep compact --- */
#repAccessesPanel .data-table th,
#repAccessesPanel .data-table td {
    padding: 7px 6px;
    font-size: 0.78rem;
}
#repAccessesPanel .data-table td:nth-child(1) {  /* Организация */
    max-width: 180px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}

/* --- activityTable: "Детали" can be long --- */
#activityTable td:nth-child(4) {  /* Детали */
    max-width: 250px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}

/* --- Compact table for tasks — only constrain the 2 wide columns ---*/
#tasksTable th,
#tasksTable td {
    padding: 7px 6px;
    font-size: 0.78rem;
}

#tasksTable th {
    white-space: nowrap;
}

/* Центрируем заголовки и данные для: №, Дата, Период, Приоритет, Дедлайн, Статус, Последний статус, Просрочка, Действия */
#tasksTable th:nth-child(1),
#tasksTable th:nth-child(2),
#tasksTable th:nth-child(7),
#tasksTable th:nth-child(8),
#tasksTable th:nth-child(9),
#tasksTable th:nth-child(10),
#tasksTable th:nth-child(11),
#tasksTable th:nth-child(12),
#tasksTable th:nth-child(13),
#tasksTable td:nth-child(1),
#tasksTable td:nth-child(2),
#tasksTable td:nth-child(7),
#tasksTable td:nth-child(8),
#tasksTable td:nth-child(9),
#tasksTable td:nth-child(10),
#tasksTable td:nth-child(11),
#tasksTable td:nth-child(12),
#tasksTable td:nth-child(13) {
    text-align: center;
}

#tasksTable th.wrap-header {
    white-space: normal;
    max-width: 80px;
}

#tasksTable td:nth-child(4) {  /* ОРГ (ИНН) — allow wrap */
    max-width: 220px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}

#tasksTable td:nth-child(5) {  /* Тема — allow wrap */
    max-width: 200px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}

#tasksTable .task-actions {
    white-space: nowrap;
    vertical-align: middle;
}

#tasksTable td {
    vertical-align: middle;
}

#tasksTable td small {
    display: block;
}

#tasksTab .task-filters {
    flex-shrink: 0;
}

/* OD statuses */
.status-progress-od {
    background: #e0e7ff;
    color: #3730a3;
}

.status-done-od {
    background: #d1fae5;
    color: #065f46;
}

/* Small INN */
#tasksTable td small {
    color: var(--text-muted);
    font-size: 0.73rem;
}

/* Time under date */
#tasksTable small.task-time {
    color: var(--text-muted);
    font-size: 0.7rem;
    display: block;
    margin-top: 1px;
}

/* Task action dropdown */
.task-action-dropdown {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

.task-action-dropdown .btn-action-toggle {
    padding: 4px 10px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.78rem;
    white-space: nowrap;
    line-height: 1.4;
    vertical-align: middle;
    font-family: inherit;
    font-weight: 600;
    transition: all var(--transition);
}

.task-action-dropdown .btn-action-toggle:hover {
    background: var(--primary-hover);
}

.task-action-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xl);
    z-index: 100;
    min-width: 140px;
    padding: 4px;
    animation: menuAppear 0.15s ease;
}

@keyframes menuAppear {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.task-action-menu.open {
    display: block;
}

.task-action-menu button {
    display: block;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    font-size: 0.82rem;
    color: var(--text-color);
    white-space: nowrap;
    font-family: inherit;
    border-radius: var(--radius);
    font-weight: 500;
    transition: background var(--transition);
}

.task-action-menu button:hover {
    background: var(--bg-color);
}

.task-action-menu .btn-start { color: #059669; }
.task-action-menu .btn-pause { color: #d97706; }
.task-action-menu .btn-stop { color: #dc2626; }
.task-action-menu .btn-transfer { color: var(--text-color); }
.task-action-menu .btn-icon.view {
    color: var(--primary-color);
    background: none;
    border: none;
    padding: 8px 14px;
}

/* Task row flash */
@keyframes taskRowFlash {
    0% { background-color: rgba(7, 71, 131, 0.1); }
    100% { background-color: transparent; }
}

tr.task-row-updated {
    animation: taskRowFlash 3s ease-out;
}

/* ========== AUDIT PANEL ========== */
.audit-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #0a5da8 100%);
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(7, 71, 131, 0.15);
}

.audit-header .btn-back {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
    backdrop-filter: blur(4px);
}

.audit-header .btn-back:hover {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.4);
}

.btn-audit-edit {
    margin-left: auto;
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
    backdrop-filter: blur(4px);
}

.btn-audit-edit:hover {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.4);
}

/* Portal access button & status dot */
.btn-portal-access {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.portal-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6b7280;
    flex-shrink: 0;
    transition: background 0.2s;
}

.portal-status-dot.active {
    background: #34d399;
    box-shadow: 0 0 6px rgba(52, 211, 153, 0.6);
}

.portal-status-dot.inactive {
    background: #ef4444;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
}

/* Portal modal body */
.portal-info-block {
    background: var(--surface-bg, #f8f9fa);
    border: 1px solid var(--border-color, #dadce0);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.portal-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

.portal-info-row + .portal-info-row {
    border-top: 1px solid var(--border-color, #e8eaed);
}

.portal-info-label {
    font-size: 13px;
    color: var(--text-muted, #5f6368);
}

.portal-info-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color, #202124);
    display: flex;
    align-items: center;
    gap: 6px;
}

.portal-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.portal-status-badge.connected {
    background: #e6f4ea;
    color: #188038;
}

.portal-status-badge.disconnected {
    background: #fce8e6;
    color: #d93025;
}

.portal-status-badge.suspended {
    background: #fef7e0;
    color: #e37400;
}

.portal-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.portal-actions .btn {
    width: 100%;
    padding: 10px 16px;
    border: 1px solid var(--border-color, #dadce0);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 8px;
}

.portal-actions .btn:hover {
    background: var(--hover-bg, #f1f3f4);
}

.portal-actions .btn-primary-portal {
    background: var(--primary-color, #074783);
    color: #fff;
    border-color: var(--primary-color, #074783);
}

.portal-actions .btn-primary-portal:hover {
    background: var(--primary-hover, #053668);
}

.portal-actions .btn-danger-portal {
    color: #d93025;
    border-color: #fce8e6;
    background: #fff;
}

.portal-actions .btn-danger-portal:hover {
    background: #fce8e6;
}

.portal-actions .btn-warning-portal {
    color: #e37400;
    border-color: #fef7e0;
    background: #fff;
}

.portal-actions .btn-warning-portal:hover {
    background: #fef7e0;
}

.portal-actions .btn-success-portal {
    color: #188038;
    border-color: #e6f4ea;
    background: #fff;
}

.portal-actions .btn-success-portal:hover {
    background: #e6f4ea;
}

.portal-credentials {
    background: var(--surface-bg, #f8f9fa);
    border: 1px solid var(--border-color, #dadce0);
    border-radius: 8px;
    padding: 16px;
    margin-top: 12px;
}

.portal-credentials h4 {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color, #202124);
}

.portal-cred-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
}

.portal-cred-label {
    font-size: 12px;
    color: var(--text-muted, #5f6368);
}

.portal-cred-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color, #074783);
    font-family: 'SF Mono', 'Consolas', monospace;
    cursor: pointer;
}

.portal-cred-value:hover {
    text-decoration: underline;
}

/* Portal setup form */
.portal-setup-form .form-group {
    margin-bottom: 14px;
}

.portal-setup-form .form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--text-color, #202124);
}

.portal-setup-form .form-group input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border-color, #dadce0);
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
}

.portal-setup-form .form-group input:focus {
    outline: none;
    border-color: var(--primary-color, #074783);
    box-shadow: 0 0 0 2px rgba(7,71,131,0.12);
}

.portal-setup-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.portal-setup-actions button {
    flex: 1;
    padding: 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    border: 1px solid var(--border-color, #dadce0);
}

.audit-header h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
}

.audit-inn {
    color: rgba(255,255,255,0.75);
    font-size: 0.82rem;
    font-family: 'JetBrains Mono', monospace;
    background: rgba(255,255,255,0.12);
    padding: 3px 10px;
    border-radius: 4px;
}

.audit-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    overflow-x: auto;
    white-space: nowrap;
    background: var(--surface-bg);
    padding: 5px;
    border-radius: 10px;
    scrollbar-width: thin;
    flex-shrink: 0;
    border: 1px solid var(--border-light);
}

.audit-tabs::-webkit-scrollbar {
    height: 3px;
}

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

.audit-tab {
    padding: 8px 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text-muted);
    border-radius: 6px;
    transition: all var(--transition);
    font-family: inherit;
    font-weight: 500;
}

.audit-tab:hover {
    color: var(--text-color);
    background: rgba(0,0,0,0.04);
}

.audit-tab.active {
    color: var(--primary-color);
    background: #fff;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.audit-content {
    min-height: 400px;
}

/* ========== Profile — Card-based sections ========== */
.audit-profile {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.profile-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.profile-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profile-card {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 20px;
    transition: box-shadow var(--transition);
}

.profile-card:hover {
    box-shadow: var(--shadow-lg);
}

.profile-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-light);
}

.profile-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.profile-card-icon.org { background: #e0f2fe; color: #0369a1; }
.profile-card-icon.access { background: #fef3c7; color: #d97706; }
.profile-card-icon.contact { background: #dbeafe; color: #2563eb; }
.profile-card-icon.minjust { background: #f3e8ff; color: #7c3aed; }
.profile-card-icon.bank { background: #d1fae5; color: #059669; }
.profile-card-icon.founders { background: #ffe4e6; color: #e11d48; }

.profile-card-header h3 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-color);
    flex: 1;
}

/* Кнопки редактирования карточек профиля */
.btn-icon.edit-card-btn { opacity: 0.3; transition: opacity 0.2s; background: none; border: none; cursor: pointer; font-size: 16px; padding: 4px; }
.profile-card:hover .btn-icon.edit-card-btn { opacity: 1; }
.card-edit-actions { display: flex; gap: 4px; }
.btn-icon.save-card-btn { color: #4caf50; background: none; border: none; cursor: pointer; font-size: 16px; padding: 4px; }
.btn-icon.cancel-card-btn { color: #f44336; background: none; border: none; cursor: pointer; font-size: 16px; padding: 4px; }
.btn-icon.save-card-btn:hover { background: #e8f5e9; border-radius: 4px; }
.btn-icon.cancel-card-btn:hover { background: #ffebee; border-radius: 4px; }

/* Банковские счета — таблица и кнопки */
.btn-icon-sm {
    background: none; border: none; cursor: pointer;
    width: 28px; height: 28px; border-radius: var(--radius);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; opacity: 0.4; transition: all var(--transition);
}
.btn-icon-sm:hover { opacity: 1; background: var(--surface-bg); }
.btn-icon-sm.danger:hover { color: #f44336; background: #ffebee; }

/* Iconsax icon color helpers */
.icon-danger { color: #e74c3c; }
.icon-success { color: #27ae60; }

/* SVG icons inside buttons inherit color */
.btn-icon svg, .btn-icon-sm svg, .btn.btn-sm svg { vertical-align: middle; }
.btn-icon-sm svg, .btn.btn-sm svg { pointer-events: none; }

.readonly-row { opacity: 0.65; font-style: italic; }
.badge {
    display: inline-block; padding: 3px 10px; border-radius: 12px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
    background: #e3f2fd; color: #1565c0;
}
.badge.salyk { background: #fff3e0; color: #e65100; }
.editing-row td { padding: 4px 6px; }

/* Inline edit inputs (профиль + банковские счета) */
.inline-edit-input {
    width: 100%;
    padding: 6px 10px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 13px;
    font-family: inherit;
    color: var(--text-color);
    background: var(--card-bg);
    transition: border-color var(--transition), box-shadow var(--transition);
    outline: none;
    box-sizing: border-box;
}
.inline-edit-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(7, 71, 131, 0.1);
}
.inline-edit-input::placeholder { color: var(--text-secondary); opacity: 0.6; }

/* Кнопки выручки */
.btn-revenue {
    padding: 7px 16px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-revenue.edit {
    background: var(--primary-color);
    color: white;
}
.btn-revenue.edit:hover {
    background: var(--primary-hover);
    box-shadow: 0 1px 3px rgba(7, 71, 131, 0.2);
}
.btn-revenue.save {
    background: var(--success-color, #10b981);
    color: white;
}
.btn-revenue.save:hover {
    background: #059669;
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.3);
}
.btn-revenue.cancel {
    background: var(--surface-bg, #f5f5f5);
    color: var(--text-secondary, #666);
    border: 1px solid var(--border-color, #e0e0e0);
}
.btn-revenue.cancel:hover {
    background: var(--border-color, #e0e0e0);
}
.revenue-display { font-size: 13px; }

.profile-grid {
    display: grid;
    gap: 2px;
}

.profile-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 8px;
    border-radius: 4px;
    transition: background var(--transition);
}

.profile-row:hover {
    background: var(--surface-bg);
}

.profile-row .label {
    color: var(--text-muted);
    font-size: 0.8rem;
    flex-shrink: 0;
    max-width: 45%;
}

.profile-row .value {
    font-size: 0.8rem;
    font-weight: 600;
    text-align: right;
    word-break: break-word;
    max-width: 55%;
}

.password-masked {
    cursor: pointer;
    color: var(--text-secondary);
    transition: all var(--transition);
    padding: 2px 6px;
    border-radius: 4px;
}

.password-masked:hover {
    color: var(--text-color);
    background: var(--hover-bg);
}

.data-table.compact {
    font-size: 12px;
    border-radius: 6px;
    overflow: hidden;
}

.data-table.compact td,
.data-table.compact th {
    padding: 6px 10px;
}

/* Parameters */
.audit-parameters {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.audit-section-card {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 20px;
    transition: box-shadow var(--transition);
}

.audit-section-card:hover {
    box-shadow: var(--shadow-lg);
}

.audit-section-card h3 {
    margin: 0 0 4px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-color);
}

.audit-section-card .hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0 0 12px;
}

.audit-section-card h4 {
    margin: 0 0 10px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-color);
}

.audit-section-card .data-table {
    margin: 0;
}

.audit-section-card .data-table td,
.audit-section-card .data-table th {
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}

.audit-section-card .data-table td:nth-child(2),
.audit-section-card .data-table th:nth-child(2) {
    max-width: 250px;
}

.audit-section-card .table-wrapper {
    overflow-x: auto;
}

/* ========== Reports Calendar Matrix ========== */
.audit-reports-wrap {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.reports-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 10px;
}

.reports-toolbar h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

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

.year-selector button,
.year-selector select {
    border: 1px solid var(--border-light);
    background: var(--surface-bg);
    padding: 5px 12px;
    cursor: pointer;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    font-weight: 600;
    transition: all var(--transition);
    color: var(--text-muted);
    height: 34px;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.year-selector select {
    padding: 5px 28px 5px 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23667085'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    color: var(--text-primary);
}

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

.year-selector span {
    font-weight: 700;
    font-size: 1.05rem;
}

.reports-legend {
    display: flex;
    gap: 14px;
    margin-bottom: 14px;
    font-size: 0.78rem;
    flex-wrap: wrap;
    font-weight: 500;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.legend-box {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    display: inline-block;
}

.reports-matrix-wrapper {
    overflow-x: auto;
}

.reports-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.825rem;
}

.reports-matrix th,
.reports-matrix td {
    border: 1px solid var(--border-color);
    padding: 7px 8px;
    text-align: center;
}

.reports-matrix thead th {
    background: var(--surface-bg);
    font-weight: 700;
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.report-type-col {
    text-align: left !important;
    min-width: 80px;
    font-weight: 600;
}

.month-col {
    min-width: 45px;
}

.month-cell {
    cursor: pointer;
    font-weight: 700;
    font-size: 12px;
    transition: opacity var(--transition);
    border-radius: 3px;
}

.month-cell:hover {
    opacity: 0.7;
}

/* Report status colors */
.rc-status-ok { background-color: #d1fae5; color: #065f46; }
.rc-status-corrected { background-color: #fef9c3; color: #854d0e; }
.rc-status-missing { background-color: #fecaca; color: #991b1b; }
.rc-status-na { background-color: var(--surface-bg); color: #c1c8d1; }
.rc-status-no-activity, .rc-status-no_activity { background-color: #dbeafe; color: #6b7fad; font-size: 10px; }
.rc-status-dismissed { background-color: #dbeafe; color: #3b82f6; }

.extra-report { opacity: 0.65; }
.extra-report td:first-child { font-style: italic; }
tr.policy-row { opacity: 1; border-top: 2px solid #7c3aed; }
tr.policy-row td:first-child { font-style: normal; color: #7c3aed; font-weight: 600; }

/* District selector on Reports tab */
.district-selector {
    display: flex;
    align-items: center;
    gap: 4px;
}
.district-selector button {
    border: 1px solid var(--border-light);
    background: var(--surface-bg);
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color);
    transition: all var(--transition);
    height: 30px;
}
.district-selector button:hover:not(:disabled) { background: var(--hover-bg); }
.district-selector button:disabled { opacity: 0.3; cursor: default; }
.district-code {
    font-weight: 700;
    font-size: 14px;
    color: var(--primary-color);
    padding: 0 4px;
    min-width: 32px;
    text-align: center;
}
.district-code-single {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-muted);
    padding: 0 6px;
}

/* ККМ per-district rows in profile */
.kkm-district-row { border-top: 1px dashed #e0d4f5; }
.kkm-activity-header .label { color: #7c3aed !important; font-weight: 600; font-size: 12px; }
.kkm-activity-header { margin-top: 8px; border-top: 2px solid #e0d4f5; padding-top: 4px; }
.additional-activity-kkm { border-left: 3px solid #7c3aed; padding-left: 12px; }
.btn-kkm-add { background: #7c3aed; color: #fff; border: none; border-radius: 6px; padding: 4px 12px; font-size: 12px; cursor: pointer; font-weight: 500; }
.btn-kkm-add:hover:not(:disabled) { background: #6d28d9; }
.btn-kkm-add:disabled { opacity: 0.4; cursor: not-allowed; }
.kkm-no-label { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #6b7280; cursor: pointer; user-select: none; }
.kkm-no-label input[type="checkbox"] { accent-color: #d93025; width: 15px; height: 15px; }
.kkm-buttons-row { padding: 4px 0 !important; }

/* Problems badge in svod table */
.problems-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 50%; font-size: 11px; font-weight: 700; line-height: 1; }
.problems-badge.problems-error { background: #d93025; color: #fff; padding: 0 5px; }
.problems-badge.problems-ok { background: #188038; color: #fff; font-size: 13px; }

/* Revenue flags (Без ККМ / Без ЭСФ) */
.revenue-flags label { user-select: none; }
.revenue-flags input[type="checkbox"] { accent-color: var(--primary-color); width: 16px; height: 16px; }

/* Reports toolbar — right section */
.reports-toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Activity date in reports header */
.reports-activity-date {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}
.activity-label {
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
}
.activity-date-input {
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 13px;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--surface-bg);
    height: 30px;
}
.activity-date-input:focus {
    border-color: var(--primary-color);
    outline: none;
}

/* Report details panel */
.report-details {
    margin-top: 16px;
    padding: 18px;
    background: var(--surface-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
}

.report-details h4 {
    margin: 0 0 10px;
    font-weight: 700;
}

.report-detail-grid {
    display: grid;
    gap: 5px;
}

.detail-row span:first-child {
    color: var(--text-muted);
}

.report-data-preview {
    margin-top: 10px;
}

.report-data-preview pre {
    font-size: 11px;
    background: white;
    padding: 10px;
    border-radius: var(--radius);
    overflow-x: auto;
    max-height: 200px;
    font-family: 'JetBrains Mono', monospace;
    border: 1px solid var(--border-color);
}

/* ========== Employee sections (Audit) ========== */
.audit-employees {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.emp-section-tabs {
    display: flex;
    gap: 4px;
    background: var(--surface-bg);
    padding: 5px;
    border-radius: 10px;
    width: fit-content;
    border: 1px solid var(--border-light);
}

.emp-section-btn {
    padding: 8px 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 6px;
    font-size: 0.8rem;
    transition: all var(--transition);
    font-family: inherit;
    font-weight: 500;
    color: var(--text-muted);
}

.emp-section-btn:hover {
    color: var(--text-color);
    background: rgba(0,0,0,0.04);
}

.emp-section-btn.active {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 1px 3px rgba(7, 71, 131, 0.25);
}

.emp-details-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.emp-salyk-section,
.emp-161-section,
.emp-client-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.emp-client-card {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 16px;
}

.emp-client-card h4 {
    margin: 0 0 10px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-color);
}

.emp-client-card .reports-matrix td {
    text-align: left;
    white-space: nowrap;
}

.emp-client-card .reports-matrix td:last-child {
    text-align: center;
}

.emp-salyk-section h4,
.emp-161-section h4,
.emp-client-section h4 {
    margin: 0 0 8px;
    font-size: 0.9rem;
    color: var(--text-color);
    font-weight: 700;
}

.spino-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
}

.spino-yes { background: #d1fae5; color: #065f46; }
.spino-no { background: #fecaca; color: #991b1b; }

.status-ok { background-color: #d1fae5; color: #065f46; }
.status-na { background-color: var(--surface-bg); color: #c1c8d1; }

/* ========== Revenue Matrix ========== */
.audit-revenue {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.revenue-table { min-width: 900px; table-layout: fixed; width: 100%; }
.revenue-table .report-type-col { width: 120px; min-width: 100px; }
.revenue-table .total-col { width: 90px; min-width: 80px; background: var(--surface-bg); }
.subtotal-row { background: #f0f4f8; font-weight: 700; }
.subtotal-row td { border-top: 2px solid var(--text-secondary); }

.revenue-input {
    width: 70px;
    border: 1px solid transparent;
    background: transparent;
    text-align: right;
    padding: 3px 5px;
    font-size: 12px;
    font-family: 'JetBrains Mono', monospace;
    transition: all var(--transition);
}

.revenue-input:focus {
    border-color: var(--primary-color);
    background: white;
    outline: none;
    box-shadow: 0 0 0 2px var(--primary-glow);
}

.revenue-input:hover {
    border-color: var(--border-color);
}

.audit-revenue .hint { font-size: 0.78rem; color: var(--text-muted); margin: 0 0 8px; }

.revenue-pdf-upload-btn { cursor: pointer; margin-left: 2px; opacity: 0.6; display: inline-flex; align-items: center; color: var(--primary-color); }
.revenue-pdf-upload-btn:hover { opacity: 1; }
.revenue-pdf-attached { cursor: pointer; margin-left: 1px; display: inline-flex; align-items: center; color: var(--primary-color); }
.revenue-pdf-attached:hover { opacity: 0.7; }
.revenue-pdf-indicator { cursor: pointer; display: inline-flex; align-items: center; color: var(--primary-color); }
.revenue-pdf-indicator-ro { display: inline-flex; align-items: center; color: var(--primary-color); vertical-align: middle; }
.revenue-pdf-delete-btn { cursor: pointer; margin-left: 1px; display: inline-flex; align-items: center; color: #e53935; opacity: 0.6; }
.revenue-pdf-delete-btn:hover { opacity: 1; }
.editable-cell.has-pdf { position: relative; }
.audit-revenue h4 { margin: 16px 0 6px; font-size: 0.9rem; font-weight: 700; }
.status-no-activity { background-color: #f3e8fd; color: #7627bb; }

/* ========== Contract & Balance ========== */
.audit-contract {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contract-section, .balance-section {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.contract-section h3, .balance-section h3 {
    margin: 0 0 14px;
    font-size: 0.95rem;
    font-weight: 700;
}

.row-terminated { opacity: 0.45; text-decoration: line-through; }

/* --- Contract Form: Periods --- */
.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.contract-periods-section {
    margin: 18px 0 14px;
    padding: 18px 18px 14px;
    background: var(--bg-secondary, #f8f9fb);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.contract-periods-section .section-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--primary-color, var(--primary));
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--primary-color, var(--primary));
    opacity: 0.85;
}

.contract-period-row {
    position: relative;
    padding: 14px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    transition: box-shadow 0.15s;
}
.contract-period-row:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.period-fields-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}

.period-field {
    display: flex;
    flex-direction: column;
}

.period-field label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 5px;
}

.period-field input,
.period-field select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 0.88rem;
    background: var(--card-bg);
    color: var(--text-color);
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}
.period-field input:focus,
.period-field select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-glow);
}
.period-field input::placeholder {
    color: var(--text-secondary);
}

.period-field-hint {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 3px;
    font-style: italic;
}

.period-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid #fca5a5;
    background: #fef2f2;
    color: #dc2626;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.period-remove:hover {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
}

.contract-period-separator {
    border: none;
    border-top: 1px dashed var(--border-color);
    margin: 12px 0;
}

.btn-add-period {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding: 8px 18px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary-color, var(--primary));
    background: var(--card-bg);
    border: 1px dashed var(--primary-color, var(--primary));
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.15s;
}
.btn-add-period:hover {
    background: var(--primary-color, var(--primary));
    color: #fff;
    border-style: solid;
}

/* --- Contract Table: period column --- */
.contract-group-separator td {
    padding: 0 !important;
    height: 2px;
    background: var(--border-light, var(--border-color));
}

.contract-price {
    font-weight: 700;
    white-space: nowrap;
}

.contract-period-cell {
    white-space: nowrap;
    font-size: 0.82rem;
}
.contract-period-cell .period-to {
    color: var(--text-muted);
}

@media (max-width: 600px) {
    .form-row-2 { grid-template-columns: 1fr; }
    .period-fields-grid { grid-template-columns: 1fr; }
    .contract-period-row { padding: 10px; }
}

.balance-badge {
    font-size: 0.85rem;
    padding: 3px 10px;
    border-radius: var(--radius);
    margin-left: 8px;
    font-weight: 700;
}

.balance-badge.positive { background: #d1fae5; color: #065f46; }
.balance-badge.negative { background: #fecaca; color: #991b1b; }

.amount-positive { color: #065f46; font-weight: 600; }
.amount-negative { color: #991b1b; font-weight: 600; }

/* ========== Tax subtabs ========== */
.audit-taxes, .audit-esf {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tax-subtabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 0;
    margin-bottom: 4px;
}

.tax-subtab-btn {
    padding: 6px 14px;
    border: 1px solid var(--border-light);
    background: var(--card-bg);
    cursor: pointer;
    border-radius: 20px;
    font-size: 0.76rem;
    white-space: nowrap;
    font-family: inherit;
    font-weight: 500;
    transition: all var(--transition);
    color: var(--text-muted);
}

.tax-subtab-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    box-shadow: 0 1px 3px rgba(7, 71, 131, 0.25);
}

.tax-subtab-btn:hover:not(.active) {
    color: var(--text-color);
    border-color: var(--primary-color);
    background: var(--surface-tint);
}

.tax-content-card {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.total-row { background: var(--surface-bg); font-weight: 700; }
.total-row td { border-top: 2px solid #374151; }

/* Certificate request */
.cert-tabs {
    display: flex;
    gap: 4px;
    background: var(--surface-bg);
    padding: 5px;
    border-radius: 10px;
    width: fit-content;
    margin-bottom: 16px;
    border: 1px solid var(--border-light);
}

.cert-tab-btn {
    padding: 7px 14px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 6px;
    font-size: 0.8rem;
    font-family: inherit;
    font-weight: 500;
    transition: all var(--transition);
    color: var(--text-muted);
}

.cert-tab-btn.active {
    background: var(--success-color);
    color: white;
    box-shadow: 0 1px 3px rgba(24, 128, 56, 0.25);
}

.cert-tab-btn:hover:not(.active) {
    color: var(--text-color);
    background: rgba(0,0,0,0.04);
}

.cert-form {
    max-width: 500px;
    padding: 20px;
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
}

.cert-form h4 {
    margin: 0 0 14px;
    font-weight: 700;
}

.status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius);
    font-size: 0.73rem;
    font-weight: 600;
}

.status-badge.status-ok { background: #d1fae5; color: #065f46; }
.status-badge.status-pending { background: #fef9c3; color: #854d0e; }

.reconciliation-section .data-table,
.summary-section .data-table { font-size: 11px; }

@media (max-width: 768px) {
    .audit-header { padding: 12px 16px; border-radius: 6px; }
    .audit-header h2 { font-size: 1rem; }
    .profile-columns { grid-template-columns: 1fr; }
    .audit-tabs { font-size: 12px; padding: 3px; }
    .audit-tab { padding: 6px 12px; font-size: 0.75rem; }
    .profile-card { padding: 14px; }
    .emp-section-tabs { flex-wrap: wrap; }
    .emp-details-row { grid-template-columns: 1fr; }
    .tax-subtabs { gap: 2px; }
    .tax-subtab-btn { font-size: 11px; padding: 4px 8px; }
}

/* ========== AUTOCOMPLETE ========== */
.search-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 10px 10px;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    max-height: 320px;
    overflow-y: auto;
}

.search-autocomplete-item {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background var(--transition);
}

.search-autocomplete-item:last-child {
    border-bottom: none;
}

.search-autocomplete-item:hover {
    background: var(--primary-light);
}

.search-autocomplete-item .ac-name {
    font-weight: 600;
    color: var(--text-color);
}

.search-autocomplete-item .ac-inn {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-family: 'JetBrains Mono', monospace;
}

/* ========== ADMIN PANEL ========== */
.nav-btn-admin {
    color: var(--danger-color) !important;
}

.nav-btn-admin.active {
    background: #fce8e6 !important;
    color: var(--danger-color) !important;
    box-shadow: none;
}

.nav-btn-admin:hover {
    color: var(--danger-color) !important;
    background: #fce8e6 !important;
}

.admin-logs {
    background: #0f172a;
    color: #94a3b8;
    padding: 18px;
    border-radius: var(--radius);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    line-height: 1.5;
    max-height: 70vh;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
    flex: 1;
    min-height: 200px;
    border: 1px solid #1e293b;
}

.admin-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.admin-controls select {
    padding: 7px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 0.85rem;
    background: white;
    font-family: inherit;
}

.admin-controls label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem;
    color: var(--text-muted);
    cursor: pointer;
    font-weight: 500;
}

.admin-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

/* Simplified logs */
.simple-logs {
    background: #0f172a;
    border-radius: var(--radius);
    padding: 14px;
    max-height: 70vh;
    overflow-y: auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    line-height: 1.4;
    min-height: 200px;
    border: 1px solid #1e293b;
}

.log-line {
    padding: 2px 8px;
    border-radius: 3px;
    color: #94a3b8;
    white-space: pre-wrap;
    word-break: break-all;
}

.log-line:hover {
    background: rgba(148, 163, 184, 0.08);
}

.log-error {
    color: #f87171;
    background: rgba(239, 68, 68, 0.08);
    font-weight: 600;
}

.btn-copy {
    padding: 7px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: white;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-muted);
    transition: all var(--transition);
    font-family: inherit;
    font-weight: 500;
}

.btn-copy:hover {
    background: var(--bg-color);
    color: var(--text-color);
}

/* Maintenance mode */
.btn-maintenance {
    padding: 8px 16px;
    border: 2px solid #f59e0b;
    border-radius: var(--radius);
    background: white;
    color: #f59e0b;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
}

.btn-maintenance:hover {
    background: #f59e0b;
    color: white;
}

.btn-maintenance.maintenance-active {
    background: var(--danger-color);
    border-color: var(--danger-color);
    color: white;
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Maintenance overlay */
.maintenance-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(8px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.maintenance-box {
    background: white;
    border-radius: var(--radius-lg);
    padding: 52px 68px;
    text-align: center;
    max-width: 500px;
    box-shadow: var(--shadow-xl);
}

.maintenance-icon {
    font-size: 60px;
    margin-bottom: 18px;
    color: #f59e0b;
}

.maintenance-box h2 {
    font-size: 1.4rem;
    margin-bottom: 12px;
    color: var(--text-color);
    font-weight: 700;
}

.maintenance-box p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 8px;
}

.maintenance-sub {
    color: var(--text-secondary) !important;
    font-size: 0.825rem !important;
}

/* Activity load more */
.activity-load-more td {
    border: none !important;
}

.activity-load-more .btn-secondary {
    padding: 6px 20px;
    font-size: 0.85rem;
}

/* Scan upload preview */
.scan-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--primary-light);
    border-radius: var(--radius);
    margin-bottom: 6px;
    border: 1px solid #a3c4e3;
}

.scan-preview a {
    color: var(--primary-color);
    text-decoration: underline;
    word-break: break-all;
    font-weight: 500;
}

.btn-remove-scan {
    color: var(--danger-color);
    font-size: 1.2rem;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0 4px;
    transition: opacity var(--transition);
}

.btn-remove-scan:hover {
    opacity: 0.7;
}

.form-hint {
    display: block;
    color: var(--text-secondary);
    font-size: 0.78rem;
    margin-top: 3px;
}

/* Admin tariff trigger */
.btn-tariff-trigger {
    background: #f59e0b;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.85rem;
    font-family: inherit;
    font-weight: 700;
    transition: all var(--transition);
}

.btn-tariff-trigger:hover {
    background: #d97706;
    transform: translateY(-1px);
}

/* ========== SELECTION & SCROLLBAR ========== */
::selection {
    background: rgba(7, 71, 131, 0.15);
    color: var(--text-color);
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #c1c8d1;
    border-radius: var(--radius);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* ========== FLATPICKR THEME ========== */
.flatpickr-calendar {
    font-family: 'Inter', sans-serif !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid var(--border-color) !important;
    z-index: 10001 !important;
}

.flatpickr-current-month {
    font-weight: 700 !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    font-weight: 700 !important;
    font-family: inherit !important;
}

span.flatpickr-weekday {
    color: var(--text-secondary) !important;
    font-weight: 600 !important;
}

.flatpickr-day {
    border-radius: var(--radius) !important;
    transition: all 0.15s ease !important;
}

.flatpickr-day:hover {
    background: var(--primary-light) !important;
    border-color: var(--primary-light) !important;
}

.flatpickr-day.today {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
    font-weight: 600 !important;
}

.flatpickr-day.today:hover {
    background: var(--primary-light) !important;
    color: var(--primary-color) !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: white !important;
}

.flatpickr-day.inRange {
    background: var(--primary-light) !important;
    border-color: var(--primary-light) !important;
    box-shadow: -5px 0 0 var(--primary-light), 5px 0 0 var(--primary-light) !important;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--primary-color) !important;
}

input.flatpickr-input[readonly] {
    background: var(--bg-color) !important;
    cursor: pointer !important;
}

/* Ensure flatpickr alt inputs take full width in form groups */
.form-group input.flatpickr-input,
.period-field input.flatpickr-input,
.form-row-2 .form-group input.flatpickr-input {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Also handle the wrapper when static mode is used */
.flatpickr-wrapper {
    display: block !important;
    width: 100% !important;
}

.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after {
    display: none !important;
}

/* ========== THEME TOGGLE BUTTON ========== */
.btn-theme-toggle {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    cursor: pointer;
    padding: 5px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
    color: var(--text-muted);
}

.btn-theme-toggle:hover {
    background: var(--hover-bg);
    color: var(--text-color);
    border-color: var(--text-muted);
}

.btn-theme-toggle svg {
    width: 18px;
    height: 18px;
}

.theme-icon-dark { display: block; }
.theme-icon-light { display: none; }

body[data-theme="dark"] .theme-icon-dark { display: none; }
body[data-theme="dark"] .theme-icon-light { display: block; }

/* ========== DARK THEME ========== */
body[data-theme="dark"] {
    --primary-color: #4a9eff;
    --primary-hover: #6db3ff;
    --primary-light: #1a2a3a;
    --primary-glow: rgba(74, 158, 255, 0.15);
    --accent-color: #ff8a65;
    --accent-hover: #ffab91;
    --secondary-color: #9ca3af;
    --success-color: #34d399;
    --warning-color: #fbbf24;
    --danger-color: #f87171;
    --bg-color: #111827;
    --card-bg: #1f2937;
    --text-color: #e5e7eb;
    --text-muted: #9ca3af;
    --border-color: #374151;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 4px 12px rgba(0, 0, 0, 0.5);
    --header-bg: #111827;
    --header-text: #e5e7eb;
    --surface-bg: #1f2937;
    --hover-bg: #374151;
    --surface-tint: #1e3a5f;
    --text-secondary: #9ca3af;
    --border-light: #374151;
    color-scheme: dark;
}

/* Dark: elements with hardcoded white/light backgrounds */
body[data-theme="dark"] .salyk-sub-btn.active,
body[data-theme="dark"] .salyk-group-btn.active {
    background: var(--card-bg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

body[data-theme="dark"] .task-filter-btn {
    background: var(--card-bg);
}

body[data-theme="dark"] .parser-checkbox-item {
    background: var(--card-bg);
}

body[data-theme="dark"] .task-action-menu {
    background: var(--card-bg);
}

body[data-theme="dark"] .search-autocomplete {
    background: var(--card-bg);
}

body[data-theme="dark"] .admin-controls select {
    background: var(--card-bg);
}

body[data-theme="dark"] .btn-copy {
    background: var(--card-bg);
}

body[data-theme="dark"] .btn-maintenance {
    background: var(--card-bg);
}

body[data-theme="dark"] .maintenance-box {
    background: var(--card-bg);
}

body[data-theme="dark"] .year-selector button,
body[data-theme="dark"] .year-selector select {
    background: var(--card-bg);
}

body[data-theme="dark"] .emp-section-btn {
    background: var(--card-bg);
}

body[data-theme="dark"] .tax-subtab-btn {
    background: var(--card-bg);
}

body[data-theme="dark"] .cert-tab-btn {
    background: var(--card-bg);
}

body[data-theme="dark"] .report-data-preview pre {
    background: var(--surface-bg);
}

body[data-theme="dark"] .revenue-input:focus {
    background: var(--card-bg);
}

/* Dark: modal backdrop */
body[data-theme="dark"] .modal {
    background: rgba(0, 0, 0, 0.55);
}

/* Dark: scrollbar */
body[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #4b5563;
}

body[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

body[data-theme="dark"] .table-wrapper {
    scrollbar-color: #4b5563 transparent;
}

/* Dark: selection */
body[data-theme="dark"] ::selection {
    background: rgba(74, 158, 255, 0.25);
}

/* Dark: SVG logo path */
body[data-theme="dark"] .logo svg path:first-child {
    fill: #4a9eff;
}

/* Dark: flatpickr */
body[data-theme="dark"] .flatpickr-calendar {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

body[data-theme="dark"] .flatpickr-months,
body[data-theme="dark"] .flatpickr-month,
body[data-theme="dark"] .flatpickr-monthDropdown-months {
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
}

body[data-theme="dark"] .flatpickr-weekdays,
body[data-theme="dark"] span.flatpickr-weekday {
    background: var(--card-bg) !important;
}

body[data-theme="dark"] .flatpickr-day {
    color: var(--text-color) !important;
}

body[data-theme="dark"] .flatpickr-day:hover {
    background: var(--hover-bg) !important;
    border-color: var(--hover-bg) !important;
}

body[data-theme="dark"] .flatpickr-day.prevMonthDay,
body[data-theme="dark"] .flatpickr-day.nextMonthDay {
    color: var(--text-muted) !important;
}

body[data-theme="dark"] .flatpickr-months .flatpickr-prev-month svg,
body[data-theme="dark"] .flatpickr-months .flatpickr-next-month svg {
    fill: var(--text-color) !important;
}

/* Dark: admin logs already dark — no change needed */

/* Dark: nav-btn admin */
body[data-theme="dark"] .nav-btn-admin.active,
body[data-theme="dark"] .nav-btn-admin:hover {
    background: rgba(248, 113, 113, 0.15) !important;
}

/* Dark: priority rows */
body[data-theme="dark"] .priority-overdue {
    background: rgba(220, 38, 38, 0.12) !important;
}

body[data-theme="dark"] .priority-urgent {
    background: rgba(245, 158, 11, 0.12) !important;
}

body[data-theme="dark"] .priority-soon {
    background: rgba(250, 204, 21, 0.08) !important;
}

body[data-theme="dark"] .row-overdue {
    background-color: rgba(220, 38, 38, 0.1) !important;
}

body[data-theme="dark"] .row-escalated {
    background-color: rgba(245, 158, 11, 0.1) !important;
}

/* Dark: log entry backgrounds */
body[data-theme="dark"] .log-entry.success {
    background: rgba(52, 211, 153, 0.1);
    border-left-color: var(--success-color);
}

body[data-theme="dark"] .log-entry.error {
    background: rgba(248, 113, 113, 0.1);
    border-left-color: var(--danger-color);
}

body[data-theme="dark"] .log-entry.pause {
    background: rgba(251, 191, 36, 0.1);
    border-left-color: var(--warning-color);
}

/* Dark: scan preview */
body[data-theme="dark"] .scan-preview {
    border-color: var(--border-color);
}

/* Editable profile fields */
.editable-field,
.editable-access {
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 6px;
    transition: background 0.2s;
    flex: 1;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.editable-field:hover,
.editable-access:hover {
    background: #e8f0fe;
}
body[data-theme="dark"] .editable-field:hover,
body[data-theme="dark"] .editable-access:hover {
    background: rgba(138, 180, 248, 0.15);
}
.editable-access.password-masked {
    cursor: pointer;
}

/* 161 матрица — цвета ячеек */
.emp161-present {
    background-color: #e6f4ea !important;
    color: #1e7e34;
    cursor: pointer;
}
.emp161-missing {
    background-color: #fce8e6 !important;
    color: #d93025;
}
body[data-theme="dark"] .emp161-present {
    background-color: rgba(30, 126, 52, 0.2) !important;
    color: #81c995;
}
body[data-theme="dark"] .emp161-missing {
    background-color: rgba(217, 48, 37, 0.2) !important;
    color: #f28b82;
}

/* Dark: Chat */
body[data-theme="dark"] .chat-bubble--in {
    background: var(--surface-bg);
    border-color: var(--border-color);
}
body[data-theme="dark"] .chat-bubble--out {
    background: #1d4ed8;
}
body[data-theme="dark"] .chat-conv-avatar {
    background: #2563eb;
}
body[data-theme="dark"] .chat-messages {
    background: var(--surface-bg);
}
body[data-theme="dark"] .chat-media-doc {
    background: rgba(96, 165, 250, 0.1);
    color: #60a5fa;
}
body[data-theme="dark"] .chat-media-doc:hover {
    background: rgba(96, 165, 250, 0.18);
}
body[data-theme="dark"] .chat-media-unavailable {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
}
body[data-theme="dark"] .chat-layout {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}
body[data-theme="dark"] .chat-send-btn {
    background: #2563eb;
}
body[data-theme="dark"] .chat-conv-badge {
    background: #2563eb;
}
body[data-theme="dark"] .chat-media-img {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
body[data-theme="dark"] .chat-media-video {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* PDF Viewer модальное окно */
.pdf-viewer-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pdf-viewer-container {
    width: 90vw;
    height: 90vh;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.pdf-viewer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: #1e293b;
    color: #fff;
    font-size: 14px;
}
.pdf-viewer-toolbar a { color: #93c5fd; text-decoration: none; font-size: 13px; }
.pdf-viewer-toolbar a:hover { text-decoration: underline; }
.pdf-viewer-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.pdf-viewer-close:hover { color: #f87171; }
.pdf-viewer-iframe {
    flex: 1;
    border: none;
    width: 100%;
}

/* Поиск по таблицам */
.table-search {
    padding: 0 0 16px;
}
.table-search-wrapper {
    position: relative;
    width: 100%;
}
.table-search-wrapper .search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}
.table-search input {
    width: 100%;
    padding: 10px 16px 10px 40px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.9rem;
    background: var(--card-bg);
    color: var(--text-color);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.table-search input::placeholder {
    color: var(--text-muted);
}
.table-search input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Группы парсеров в модалке */
/* Parser groups — Gradient Modern */
#parserLaunchModal .parser-group { margin-bottom: 12px; }
#parserLaunchModal .parser-group-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 100%);
    color: #fff;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.2);
}
#parserLaunchModal .parser-group-header:hover {
    box-shadow: 0 6px 16px rgba(30, 58, 95, 0.3);
    transform: translateY(-1px);
    opacity: 1;
}
#parserLaunchModal .parser-group-header input[type="checkbox"] {
    border-color: rgba(255,255,255,0.4);
    background: transparent;
}
#parserLaunchModal .parser-group-header input[type="checkbox"]:checked {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.5);
    box-shadow: none;
}
#parserLaunchModal .parser-group-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
#parserLaunchModal .parser-group-name { flex: 1; }
#parserLaunchModal .parser-group-count {
    background: rgba(255,255,255,0.2);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}
#parserLaunchModal .parser-group-toggle { font-size: 14px; color: rgba(255,255,255,0.6); opacity: 1; }
#parserLaunchModal .parser-group-items { padding: 6px 0 0 0; display: flex; flex-direction: column; gap: 0; }
.modal-subtitle { color: var(--text-muted); font-size: 0.9rem; margin: -8px 0 8px; }

/* Audit details tooltip */
.audit-date-cell { position: relative; cursor: default; }
.audit-date-cell .audit-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--text-color, #333);
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
    white-space: nowrap;
    z-index: 100;
    box-shadow: var(--shadow-lg);
    pointer-events: none;
}
.audit-date-cell .audit-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--text-color, #333);
}
.audit-date-cell:hover .audit-tooltip { display: none; }

.audit-tooltip-fixed {
    position: fixed;
    transform: translate(-50%, -100%);
    background: var(--text-color, #333);
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
    white-space: nowrap;
    z-index: 10000;
    box-shadow: var(--shadow-lg);
    pointer-events: none;
}

/* Grouped client rows (M:N) */
.data-table td[rowspan] {
    vertical-align: middle;
    background: var(--bg-color);
}
.client-group-first td {
    border-top: 2px solid var(--border-color) !important;
}

/* ========== Audit: Error badges on tabs ========== */
.tab-error-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: #e74c3c;
    margin-left: 4px;
    vertical-align: middle;
}

/* ========== Audit: Profile error highlighting ========== */
.profile-row.error-field .value {
    color: #e74c3c !important;
    font-weight: 600;
}
.profile-row.error-field .label {
    color: #c0392b;
}
.profile-card.error-card {
    border: 2px solid #e67e22 !important;
    box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.15);
}

/* ========== Audit: Employee mismatch highlighting ========== */
.emp-comparison-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    margin-left: 12px;
    vertical-align: middle;
}
.emp-comparison-badge.match {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}
.emp-comparison-badge.mismatch {
    background: #ffebee;
    color: #c62828;
    border: 1px solid #ef9a9a;
}
.emp-row-mismatch {
    background: #fff3e0 !important;
}
.emp-row-mismatch td:first-child {
    border-left: 3px solid #e74c3c;
}

/* ========== Audit: Problems tab styling ========== */
.problem-dismissed {
    opacity: 0.6;
    background: #f9f9f9;
}
.problem-dismissed td {
    text-decoration: line-through;
    text-decoration-color: #ccc;
}
.problem-comment {
    font-size: 12px;
    color: #888;
    font-style: italic;
    margin-top: 4px;
    text-decoration: none !important;
    display: block;
}

/* ==================== CHAT ==================== */

.chat-badge {
    background: var(--primary-color);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    margin-left: 6px;
    vertical-align: middle;
}

.chat-layout {
    display: flex;
    height: calc(100vh - 130px);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    background: var(--card-bg);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
}

.chat-sidebar {
    width: 340px;
    min-width: 300px;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    position: relative;
}

.chat-sidebar-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--card-bg);
}
.chat-sidebar-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-color);
}
.chat-sidebar-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.chat-sidebar-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.chat-sidebar-count {
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: var(--primary-color);
    padding: 2px 8px;
    border-radius: 4px;
}
.chat-filter-tabs {
    display: flex;
    gap: 4px;
    background: var(--surface-bg);
    border-radius: 8px;
    padding: 2px;
}
.chat-filter-tab {
    flex: 1;
    padding: 6px 0;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}
.chat-filter-tab:hover {
    color: var(--text-color);
}
.chat-filter-tab.active {
    background: var(--card-bg);
    color: var(--text-color);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.chat-conversation-list {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.15) transparent;
}
.chat-conversation-list::-webkit-scrollbar { width: 4px; }
.chat-conversation-list::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.1);
    border-radius: 4px;
}

.chat-conv-item {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-light);
    transition: background 0.15s ease;
    position: relative;
}
.chat-conv-item:hover {
    background: var(--hover-bg);
}
.chat-conv-item.active {
    background: var(--primary-light);
}
/* Status border now handled by .status-* classes below */

.chat-conv-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    background: var(--primary-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.chat-conv-item:hover .chat-conv-avatar {
    /* no scale effect in v2 design */
}

.chat-conv-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}
.chat-conv-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.chat-conv-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-conv-time {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    margin-left: 8px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.chat-conv-item.active .chat-conv-time {
    color: var(--primary-color);
}
.chat-conv-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.chat-conv-last {
    font-size: 12px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
}
.chat-conv-arrow {
    color: var(--text-muted);
    font-size: 11px;
    opacity: 0.6;
}
.chat-conv-badge {
    background: var(--primary-color);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    margin-left: 8px;
    flex-shrink: 0;
}

/* === Status left border (always visible, color depends on status) === */
.chat-conv-item::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: transparent;
    border-radius: 0 2px 2px 0;
    transition: background 0.2s ease;
}
.chat-conv-item.status-open::after { background: #22c55e; }
.chat-conv-item.status-waiting::after { background: #f59e0b; }
.chat-conv-item.status-closed::after { background: #9ca3af; }

/* SLA indicator */
.chat-conv-sla {
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    margin-left: 4px;
    padding: 1px 5px;
    border-radius: 3px;
    flex-shrink: 0;
}
.chat-conv-sla.sla-green { color: #16a34a; background: #f0fdf4; }
.chat-conv-sla.sla-yellow { color: #ca8a04; background: #fefce8; }
.chat-conv-sla.sla-red { color: #dc2626; background: #fef2f2; }

/* Labels mini-badges in sidebar */
.chat-conv-labels {
    display: flex;
    gap: 3px;
    flex-wrap: nowrap;
    overflow: hidden;
    margin-top: 2px;
}
.chat-conv-label {
    font-size: 9px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    color: #fff;
    white-space: nowrap;
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Search bar in sidebar */
.chat-search-bar {
    padding: 8px 16px 0;
}
.chat-search-input {
    width: 100%;
    padding: 7px 12px 7px 32px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 12px;
    background: var(--surface-bg);
    color: var(--text-color);
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}
.chat-search-input:focus {
    border-color: var(--primary-color);
}
.chat-search-wrap {
    position: relative;
}
.chat-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

/* Bulk actions bar */
.chat-bulk-bar {
    display: none;
    padding: 8px 12px;
    background: var(--primary-light);
    border-bottom: 1px solid var(--border-color);
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-color);
}
.chat-bulk-bar.visible { display: flex; }
.chat-bulk-bar button {
    padding: 4px 10px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    border-radius: 5px;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}
.chat-bulk-bar button:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}
.chat-bulk-count {
    font-weight: 600;
    margin-right: 4px;
}
.chat-bulk-close {
    margin-left: auto;
    background: transparent !important;
    border: none !important;
    font-size: 16px !important;
    cursor: pointer;
    color: var(--text-muted);
}

/* Conversation checkbox (bulk select) */
.chat-conv-checkbox {
    display: none;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--primary-color);
    cursor: pointer;
    margin-right: -4px;
    align-self: center;
}
.chat-bulk-mode .chat-conv-checkbox { display: block; }
.chat-bulk-mode .chat-conv-avatar { display: none; }

/* Header status selector */
.chat-status-select {
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    background: var(--card-bg);
    color: var(--text-color);
}
.chat-status-select.s-open { border-color: #22c55e; color: #16a34a; }
.chat-status-select.s-waiting { border-color: #f59e0b; color: #ca8a04; }
.chat-status-select.s-closed { border-color: #9ca3af; color: #6b7280; }

/* Header labels */
.chat-header-labels {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    align-items: center;
}
.chat-header-label {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    color: #fff;
    cursor: default;
    position: relative;
}
.chat-header-label .remove-label {
    display: none;
    margin-left: 3px;
    cursor: pointer;
    font-weight: 700;
}
.chat-header-label:hover .remove-label { display: inline; }
.chat-add-label-btn {
    font-size: 11px;
    padding: 2px 7px;
    border: 1px dashed var(--border-color);
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}
.chat-add-label-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* Header info row (subject, assigned, labels) */
.chat-header-details {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    flex-wrap: wrap;
}
.chat-header-subject {
    font-size: 11px;
    color: var(--text-muted);
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    padding: 1px 4px;
    border-radius: 3px;
    transition: background 0.15s;
}
.chat-header-subject:hover { background: var(--hover-bg); }
.chat-header-assigned {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}
.chat-header-assigned select {
    padding: 2px 6px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 11px;
    background: var(--card-bg);
    color: var(--text-color);
    cursor: pointer;
    outline: none;
    max-width: 140px;
}

/* Internal note styling */
.chat-bubble.note-bubble {
    background: #fefce8 !important;
    border-left: 3px solid #f59e0b;
}
.chat-note-icon {
    font-size: 10px;
    color: #ca8a04;
    font-weight: 600;
}
.chat-note-input-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
}
.chat-note-toggle {
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: transparent;
    font-size: 11px;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.15s;
}
.chat-note-toggle.active {
    background: #fefce8;
    border-color: #f59e0b;
    color: #ca8a04;
}

/* Search results overlay */
.chat-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0 0 8px 8px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 10;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    display: none;
}
.chat-search-results.visible { display: block; }
.chat-search-result-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-light);
    font-size: 12px;
}
.chat-search-result-item:hover { background: var(--hover-bg); }
.chat-search-result-name {
    font-weight: 600;
    color: var(--text-color);
}
.chat-search-result-text {
    color: var(--text-muted);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--card-bg);
}

.chat-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: var(--text-muted);
    opacity: 0.7;
}
.chat-placeholder svg {
    opacity: 0.3;
}
.chat-placeholder p {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
}

.chat-placeholder-small {
    padding: 32px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
}

.chat-header-bar {
    padding: 12px 24px;
    border-bottom: 1px solid var(--border-color);
    background: var(--card-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.chat-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}
.chat-header-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    background: var(--primary-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}
.chat-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.chat-header-action-btn {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.chat-header-action-btn:hover {
    background: var(--primary-light);
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.chat-verify-btn {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.chat-verify-btn:hover {
    background: var(--primary-light);
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.chat-header-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.chat-header-info strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
}
.chat-header-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    color: var(--text-muted);
}
.chat-header-meta-sep {
    width: 1px;
    height: 12px;
    background: var(--border-color);
}
.chat-header-phone {
    font-size: 11px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--surface-bg);
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.1) transparent;
}
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.1);
    border-radius: 4px;
}

.chat-bubble {
    max-width: 65%;
    padding: 10px 16px;
    font-size: 13px;
    line-height: 1.55;
    word-break: break-word;
    position: relative;
    animation: chat-bubble-appear 0.2s ease;
}
@keyframes chat-bubble-appear {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.chat-bubble--in {
    align-self: flex-start;
    background: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--border-light);
    border-radius: 4px 16px 16px 16px;
}
.chat-bubble--out {
    align-self: flex-end;
    background: var(--primary-color);
    color: #fff;
    border-radius: 16px 4px 16px 16px;
}

.chat-bubble-sender {
    display: none;
}

.chat-load-more {
    text-align: center;
    padding: 8px 16px;
    margin: 8px auto;
    color: var(--primary-color);
    font-size: 13px;
    cursor: pointer;
    border-radius: 16px;
    background: rgba(var(--primary-rgb, 37, 99, 235), 0.08);
    width: fit-content;
}
.chat-load-more:hover {
    background: rgba(var(--primary-rgb, 37, 99, 235), 0.15);
}

.chat-source-omnidesk {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
    font-size: 9px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    letter-spacing: 0.5px;
    vertical-align: middle;
    margin-right: 2px;
}
.chat-bubble--in .chat-source-omnidesk {
    background: rgba(var(--primary-rgb, 37, 99, 235), 0.12);
    color: var(--primary-color);
}

.chat-bubble-text {
    white-space: pre-wrap;
}

.chat-bubble-time {
    font-size: 10px;
    text-align: right;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}
.chat-bubble--in .chat-bubble-time {
    color: var(--text-muted);
}
.chat-bubble--out .chat-bubble-time {
    color: rgba(255, 255, 255, 0.5);
}

.chat-input-area {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
    background: var(--card-bg);
    align-items: end;
}
.chat-input-area textarea {
    flex: 1;
    resize: none;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px 16px;
    font-size: 13px;
    font-family: inherit;
    background: var(--surface-bg);
    color: var(--text-color);
    outline: none;
    max-height: 120px;
    line-height: 1.5;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.chat-input-area textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}
.chat-input-area textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(7, 71, 131, 0.08);
}
.chat-send-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
}
.chat-send-btn:hover {
    opacity: 0.9;
}
.chat-send-btn:active {
    transform: scale(0.95);
}

.chat-media-img {
    max-width: 280px;
    max-height: 300px;
    border-radius: 10px;
    cursor: pointer;
    display: block;
    margin-bottom: 6px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.chat-media-img:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.chat-media-video {
    max-width: 320px;
    max-height: 240px;
    border-radius: 10px;
    display: block;
    margin-bottom: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.chat-media-audio {
    max-width: 280px;
    display: block;
    margin-bottom: 6px;
    border-radius: 20px;
}
.chat-media-unavailable {
    padding: 10px 14px;
    color: var(--text-muted);
    font-size: 13px;
    font-style: italic;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 8px;
}
.chat-media-doc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(7, 71, 131, 0.06);
    border-radius: 8px;
    color: var(--primary-color);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
    transition: background 0.15s ease;
}
.chat-media-doc:hover {
    background: rgba(7, 71, 131, 0.1);
    text-decoration: none;
}
.chat-bubble--out .chat-media-doc {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}
.chat-bubble--out .chat-media-doc:hover {
    background: rgba(255, 255, 255, 0.22);
}
.chat-bubble--out .chat-media-unavailable {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

/* Unread divider */
.chat-unread-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0;
    align-self: stretch;
}
.chat-unread-divider::before,
.chat-unread-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(7, 71, 131, 0.3), transparent);
}
.chat-unread-divider span {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-color);
    white-space: nowrap;
    padding: 4px 14px;
    background: rgba(7, 71, 131, 0.06);
    border-radius: 12px;
    letter-spacing: 0.2px;
}

/* Date divider between messages */
.chat-date-divider {
    text-align: center;
    margin: 16px 0;
}
.chat-date-divider span {
    font-size: 11px;
    font-weight: 500;
    color: #8b95a5;
    background: #fff;
    padding: 4px 12px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    letter-spacing: 0.2px;
}

/* Reply quote inside bubble */
.chat-reply-quote {
    padding: 6px 10px;
    margin-bottom: 6px;
    border-left: 3px solid rgba(7, 71, 131, 0.5);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.chat-bubble--in .chat-reply-quote {
    background: rgba(7, 71, 131, 0.06);
}
.chat-bubble--out .chat-reply-quote {
    background: rgba(255, 255, 255, 0.12);
    border-left-color: rgba(255, 255, 255, 0.5);
}
.chat-reply-quote:hover {
    opacity: 0.8;
}
.chat-reply-quote-sender {
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 2px;
}
.chat-bubble--in .chat-reply-quote-sender {
    color: var(--primary-color);
}
.chat-bubble--out .chat-reply-quote-sender {
    color: rgba(255, 255, 255, 0.85);
}
.chat-reply-quote-text {
    font-size: 12px;
    opacity: 0.75;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Reply preview above input */
.chat-reply-preview {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 24px;
    border-top: 1px solid var(--border-color);
    background: var(--surface-bg);
    animation: chat-bubble-appear 0.2s ease;
}
.chat-reply-preview-icon {
    font-size: 18px;
    color: var(--primary-color);
    flex-shrink: 0;
}
.chat-reply-preview-body {
    flex: 1;
    min-width: 0;
    border-left: 3px solid var(--primary-color);
    padding-left: 10px;
}
.chat-reply-preview-sender {
    font-size: 12px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 2px;
}
.chat-reply-preview-text {
    font-size: 12.5px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-reply-preview-close {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 50%;
    transition: all 0.15s;
    flex-shrink: 0;
}
.chat-reply-preview-close:hover {
    background: rgba(0,0,0,0.06);
    color: var(--text-color);
}

/* Highlight animation on scroll-to-message */
.chat-bubble-highlight {
    animation: chat-highlight-flash 2s ease;
}
@keyframes chat-highlight-flash {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    15%, 50% { box-shadow: 0 0 0 3px rgba(7, 71, 131, 0.35); }
}

/* Emoji button */
.chat-upload-spinner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 13px;
    opacity: 0.8;
}
.spinner-ring {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}
.chat-bubble--in .spinner-ring {
    border-color: rgba(0,0,0,0.15);
    border-top-color: var(--primary-color);
}
@keyframes spin { to { transform: rotate(360deg); } }

.chat-attach-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
    padding: 0;
    color: var(--text-muted);
}
.chat-attach-btn:hover {
    background: var(--hover-bg);
    color: var(--text-color);
}

.chat-emoji-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
    padding: 0;
}
.chat-emoji-btn:hover {
    background: var(--hover-bg);
}

/* Emoji picker */
.chat-emoji-picker {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 2px;
    padding: 10px 24px;
    border-top: 1px solid var(--border-color);
    background: var(--card-bg);
    animation: chat-bubble-appear 0.2s ease;
}
.chat-emoji-item {
    font-size: 22px;
    text-align: center;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    transition: all 0.12s;
    line-height: 1;
}
.chat-emoji-item:hover {
    background: var(--hover-bg);
    transform: scale(1.2);
}

/* Подавление нативной HTML5 подсветки невалидных полей */
input:invalid,
select:invalid {
    box-shadow: none;
    outline: none;
}

/* ========== ОМНИ — Morphing Disclosure ========== */
.audit-omni {
    max-width: 720px;
    --omni-border: #e0e0e0;
    --omni-bg: #fff;
    --omni-hover: #f8f9fa;
    --omni-radius: 12px;
    --omni-duration: 0.3s;
    --omni-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

.omni-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.omni-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #202124;
    letter-spacing: -0.02em;
}

.omni-target {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 500;
    font-size: 12px;
}

.omni-target svg { flex-shrink: 0; }
.omni-target-group { background: #e8f5e9; color: #2e7d32; }
.omni-target-personal { background: #e3f2fd; color: #1565c0; }

/* Morphing disclosure container */
.morphing-disclosure {
    line-height: 1.5;
    font-size: 14px;
}

.morphing-disclosure details {
    background: var(--omni-bg);
    border-inline: 1px solid var(--omni-border);
    position: relative;
    transition: border-radius var(--omni-duration) var(--omni-ease),
                margin var(--omni-duration) var(--omni-ease),
                background var(--omni-duration) var(--omni-ease),
                border-color var(--omni-duration) var(--omni-ease);
    interpolate-size: allow-keywords;
}

.morphing-disclosure details::details-content {
    height: 0;
    overflow: hidden;
    transition: height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                content-visibility 0.4s;
    transition-behavior: allow-discrete;
}

.morphing-disclosure details[open]::details-content {
    height: fit-content;
}

.morphing-disclosure details:first-of-type {
    border-radius: var(--omni-radius) var(--omni-radius) 0 0;
    border-top: 1px solid var(--omni-border);
}

.morphing-disclosure details:last-of-type {
    border-radius: 0 0 var(--omni-radius) var(--omni-radius);
    border-bottom: 1px solid var(--omni-border);
}

.morphing-disclosure details + details {
    border-top: 1px solid var(--omni-border);
}

.morphing-disclosure details:has(+ details[open]) {
    border-bottom-left-radius: var(--omni-radius);
    border-bottom-right-radius: var(--omni-radius);
    border-bottom: 1px solid var(--omni-border);
}

.morphing-disclosure details[open] + details {
    border-top-left-radius: var(--omni-radius);
    border-top-right-radius: var(--omni-radius);
}

.morphing-disclosure details[open] {
    margin-block: 12px;
    border-radius: var(--omni-radius);
    border: 1px solid var(--omni-border);
    z-index: 2;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

.morphing-disclosure details[open]:first-of-type { margin-block-start: 0; }
.morphing-disclosure details[open]:last-of-type { margin-block-end: 0; }

.morphing-disclosure details[open].omni-done {
    border-color: #27ae60;
    background: linear-gradient(135deg, #f6fef8, #eef9f1);
}

.morphing-disclosure details:has(~ details[open]) {
    translate: 0 -8px;
    transition: translate var(--omni-duration) var(--omni-ease), border-radius var(--omni-duration) var(--omni-ease), margin var(--omni-duration) var(--omni-ease), background var(--omni-duration) var(--omni-ease), border-color var(--omni-duration) var(--omni-ease);
}

.morphing-disclosure details[open] ~ details {
    translate: 0 8px;
    transition: translate var(--omni-duration) var(--omni-ease), border-radius var(--omni-duration) var(--omni-ease), margin var(--omni-duration) var(--omni-ease), background var(--omni-duration) var(--omni-ease), border-color var(--omni-duration) var(--omni-ease);
}

.morphing-disclosure details[open][data-highlight] {
    --omni-border: #202124;
}

/* Summary */
.morphing-disclosure summary {
    padding: 14px 18px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    font-weight: 600;
    font-size: 14px;
    color: #202124;
    letter-spacing: -0.01em;
}

.morphing-disclosure summary::marker { font-size: 0; }

.morphing-disclosure summary:hover {
    background: var(--omni-hover);
}

.morphing-disclosure details:first-of-type summary:hover {
    border-radius: var(--omni-radius) var(--omni-radius) 0 0;
}

.morphing-disclosure details:last-of-type summary:hover {
    border-radius: 0 0 var(--omni-radius) var(--omni-radius);
}

.morphing-disclosure details[open] summary:hover {
    border-radius: var(--omni-radius) var(--omni-radius) 0 0;
}

.morphing-disclosure summary svg:last-child {
    opacity: 0.4;
    transition: rotate var(--omni-duration) var(--omni-ease), opacity var(--omni-duration);
}

.morphing-disclosure summary:hover svg:last-child { opacity: 0.8; }
.morphing-disclosure details[open] summary svg:last-child { rotate: 45deg; opacity: 0.6; }

.morphing-disclosure .omni-done summary span {
    color: #27ae60;
}

.omni-sent-time {
    font-weight: 400;
    font-size: 11px;
    color: #27ae60;
    margin-left: 6px;
    opacity: 0.8;
}

/* Content area */
.omni-content {
    padding: 0 18px 18px;
    opacity: 0.4;
    translate: 0 8px;
    filter: blur(3px);
    transition: opacity var(--omni-duration) var(--omni-ease),
                translate var(--omni-duration) var(--omni-ease),
                filter var(--omni-duration) var(--omni-ease);
}

.morphing-disclosure details[open] .omni-content {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
}

.omni-step-desc {
    margin: 0 0 14px;
    color: #666;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}

/* Toggle switch */
.omni-toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #f0f0f0;
}

.omni-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.omni-toggle input { display: none; }

.omni-toggle-slider {
    position: relative;
    width: 44px;
    height: 24px;
    background: #ccc;
    border-radius: 12px;
    transition: background 0.3s;
}

.omni-toggle-slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.3s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

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

.omni-toggle input:checked + .omni-toggle-slider::after {
    transform: translateX(20px);
}

.omni-toggle-label {
    font-size: 13px;
    color: #666;
    font-weight: 500;
}

/* Chat ID input */
.omni-chatid-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.omni-chatid-input-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    max-width: 360px;
}

.omni-chatid-icon {
    position: absolute;
    left: 12px;
    pointer-events: none;
    opacity: 0.4;
}

.omni-chatid-input {
    width: 100%;
    padding: 10px 12px 10px 34px;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    font-size: 13px;
    font-family: 'JetBrains Mono', monospace;
    background: #fafafa;
    transition: border-color 0.2s, box-shadow 0.2s;
    letter-spacing: 0.3px;
}

.omni-chatid-input:focus {
    border-color: var(--primary-color);
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(7, 71, 131, 0.08);
}

.omni-chatid-btn {
    font-size: 12px;
    padding: 10px 18px;
    white-space: nowrap;
    border-radius: 8px;
}

.omni-chatid-hint {
    margin: 0 0 4px;
    font-size: 12px;
    color: #999;
    display: flex;
    align-items: center;
    gap: 4px;
}

.omni-chatid-hint-ok { color: #27ae60; font-weight: 500; }

/* Message textarea */
.omni-msg-text {
    width: 100%;
    font-family: inherit;
    line-height: 1.6;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px;
    background: #fafafa;
    font-size: 13px;
    resize: none;
    overflow: hidden;
    min-height: 60px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.omni-msg-text:focus {
    border-color: var(--primary-color);
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(7, 71, 131, 0.08);
}

/* Send button */
.omni-send-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 9px 20px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.omni-send-btn:hover { background: var(--primary-hover); }
.omni-send-btn:active { transform: scale(0.97); }
.omni-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Variants */
.omni-variant {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.omni-variant:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.omni-variant-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ========== Аудит — Секционный вид (Проблемы v2) ========== */
.audit-problems-v2 {
    max-width: 860px;
}

.audit-problems-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.audit-problems-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #202124;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 10px;
}

.audit-status-ok {
    font-size: 13px;
    font-weight: 500;
    color: #27ae60;
    background: #e8f5e9;
    padding: 3px 10px;
    border-radius: 12px;
}

.audit-status-error {
    font-size: 13px;
    font-weight: 500;
    color: #c62828;
    background: #fde8e8;
    padding: 3px 10px;
    border-radius: 12px;
}

.audit-status-warning {
    font-size: 13px;
    font-weight: 500;
    color: #e65100;
    background: #fff3e0;
    padding: 3px 10px;
    border-radius: 12px;
}

/* Section status colors (open state) */
.morphing-disclosure details[open].section-ok {
    border-color: #27ae60;
    background: linear-gradient(135deg, #f6fef8, #eef9f1);
}

.morphing-disclosure details[open].section-error {
    border-color: #e74c3c;
    background: linear-gradient(135deg, #fef6f6, #fdeaea);
}

.morphing-disclosure details[open].section-warning {
    border-color: #f39c12;
    background: linear-gradient(135deg, #fffef6, #fef8ea);
}

/* Section summary text color */
.morphing-disclosure .section-ok summary > span { color: #27ae60; }
.morphing-disclosure .section-error summary > span { color: #c62828; }
.morphing-disclosure .section-warning summary > span { color: #e65100; }

/* Section badge (count) in summary */
.section-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    padding: 0 6px;
    margin-left: 6px;
    line-height: 1;
}

.section-badge-error {
    background: #e74c3c;
    color: #fff;
}

.section-badge-warning {
    background: #f39c12;
    color: #fff;
}

/* Audit check table inside sections */
.audit-check-table {
    width: 100%;
    border-collapse: collapse;
}

.audit-check-row td {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

.audit-check-row:last-child td {
    border-bottom: none;
}

.audit-check-label {
    font-size: 13px;
    color: #333;
    font-weight: 500;
    width: 45%;
}

.audit-check-value {
    text-align: right;
    padding-right: 8px !important;
}

.audit-check-action {
    width: 32px;
    text-align: right;
}

/* Check badge (status pill) */
.check-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

/* Message section inside audit */
.audit-msg-section {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #f0f0f0;
}

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

.audit-msg-label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Sub-headers */
.audit-sub-header {
    margin: 24px 0 12px;
    font-size: 15px;
    font-weight: 600;
    color: #555;
}

/* Closed/dismissed details */
.audit-closed-details {
    margin-top: 24px;
}

.audit-closed-details > summary {
    cursor: pointer;
    color: #888;
    font-size: 14px;
    font-weight: 500;
    user-select: none;
}

.audit-closed-details > summary:hover {
    color: #555;
}

/* Мини-календарь закрытых периодов */
.audit-mini-calendar .cal-cell {
    padding: 6px 2px;
    text-align: center;
    font-size: 11px;
    border-radius: 4px;
    background: #f3f4f6;
    color: #6b7280;
    cursor: default;
    user-select: none;
    transition: background 0.15s;
}
.audit-mini-calendar .cal-cell.cal-quarter {
    font-weight: 600;
    background: #e5e7eb;
    color: #4b5563;
}
.audit-mini-calendar .cal-cell.closed {
    background: #d1fae5;
    color: #065f46;
    font-weight: 600;
}
.audit-mini-calendar .cal-cell.closed.cal-quarter {
    background: #a7f3d0;
    color: #064e3b;
}

/* Этапы отчётов */
.report-stages .stage-item input[type="checkbox"] {
    accent-color: #27ae60;
    flex-shrink: 0;
}

/* ========== OMNI CHAT PANEL ========== */

.omni-chat-wrapper {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.omni-chat-wrapper > .audit-omni {
    flex: 0 1 720px;
    min-width: 0;
}

.omni-chat-panel {
    flex: 1;
    min-width: 340px;
    max-width: 480px;
    height: calc(100vh - 200px);
    min-height: 500px;
    display: flex;
    flex-direction: column;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 16px;
    overflow: hidden;
    position: sticky;
    top: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.omni-chat-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    background: var(--card-bg, #fff);
    flex-shrink: 0;
}
.omni-chat-panel-header .ocp-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary-color, #2563eb);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}
.omni-chat-panel-header .ocp-info {
    flex: 1;
    min-width: 0;
}
.omni-chat-panel-header .ocp-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-color, #202124);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.omni-chat-panel-header .ocp-phone {
    font-size: 11px;
    color: var(--text-muted, #6b7280);
    font-variant-numeric: tabular-nums;
}

.omni-chat-panel-header .ocp-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.omni-chat-panel-header .ocp-actions button {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #6b7280);
    transition: background 0.15s, color 0.15s;
}
.omni-chat-panel-header .ocp-actions button:hover {
    background: var(--surface-bg, #f3f4f6);
    color: var(--text-color, #202124);
}
.omni-chat-panel-header .ocp-actions button.ocp-note-active {
    background: #fefce8;
    color: #ca8a04;
}

.omni-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--surface-bg, #f8f9fa);
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.1) transparent;
}
.omni-chat-messages::-webkit-scrollbar { width: 4px; }
.omni-chat-messages::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.1);
    border-radius: 4px;
}
.omni-chat-messages .chat-bubble {
    max-width: 85%;
    font-size: 12.5px;
    padding: 8px 12px;
}
.omni-chat-messages .chat-bubble-sender {
    display: block;
    font-size: 10px;
    font-weight: 600;
    margin-bottom: 2px;
    opacity: 0.7;
}
.omni-chat-messages .chat-bubble--in .chat-bubble-sender {
    color: var(--text-muted, #6b7280);
}
.omni-chat-messages .chat-bubble--out .chat-bubble-sender {
    color: rgba(255,255,255,0.7);
}
.omni-chat-messages .chat-media-img {
    max-width: 200px;
    max-height: 200px;
}
.omni-chat-messages .chat-media-video {
    max-width: 240px;
    max-height: 180px;
}
.omni-chat-messages .chat-load-more {
    font-size: 12px;
    padding: 6px 12px;
}

.omni-chat-placeholder {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #999);
    font-size: 13px;
    text-align: center;
    padding: 40px 20px;
}

.omni-chat-reply-preview {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-top: 1px solid var(--border-color, #e0e0e0);
    background: #f0f7ff;
    font-size: 12px;
    flex-shrink: 0;
}
.omni-chat-reply-preview.active {
    display: flex;
}
.omni-chat-reply-preview .ocrp-icon {
    color: var(--primary-color, #2563eb);
    font-size: 16px;
    flex-shrink: 0;
}
.omni-chat-reply-preview .ocrp-body {
    flex: 1;
    min-width: 0;
}
.omni-chat-reply-preview .ocrp-sender {
    font-weight: 600;
    color: var(--primary-color, #2563eb);
    font-size: 11px;
}
.omni-chat-reply-preview .ocrp-text {
    color: var(--text-muted, #6b7280);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.omni-chat-reply-preview .ocrp-close {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--text-muted, #999);
    padding: 0 2px;
    line-height: 1;
}

.omni-chat-input-area {
    display: flex;
    gap: 6px;
    padding: 10px 12px;
    border-top: 1px solid var(--border-color, #e0e0e0);
    background: var(--card-bg, #fff);
    align-items: end;
    flex-shrink: 0;
}
.omni-chat-input-area textarea {
    flex: 1;
    resize: none;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 12.5px;
    font-family: inherit;
    background: var(--surface-bg, #f8f9fa);
    color: var(--text-color, #202124);
    outline: none;
    max-height: 100px;
    line-height: 1.45;
    transition: border-color 0.2s;
}
.omni-chat-input-area textarea::placeholder {
    color: var(--text-muted, #999);
    opacity: 0.6;
}
.omni-chat-input-area textarea:focus {
    border-color: var(--primary-color, #2563eb);
}
.omni-chat-input-area textarea.ocp-note-mode {
    background: #fefce8;
    border-color: #facc15;
}
.omni-chat-input-area .ocp-send-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--primary-color, #2563eb);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.15s, transform 0.15s;
}
.omni-chat-input-area .ocp-send-btn:hover {
    opacity: 0.9;
}
.omni-chat-input-area .ocp-send-btn:active {
    transform: scale(0.95);
}

.omni-chat-date-divider {
    text-align: center;
    padding: 4px 0;
    font-size: 10px;
    color: var(--text-muted, #999);
    position: relative;
}
.omni-chat-date-divider::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--border-color, #e0e0e0);
}
.omni-chat-date-divider span {
    position: relative;
    background: var(--surface-bg, #f8f9fa);
    padding: 0 8px;
}

/* Mobile toggle */
.omni-chat-toggle {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 10px;
    background: var(--card-bg, #fff);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--primary-color, #2563eb);
    margin-bottom: 12px;
    transition: background 0.15s;
}
.omni-chat-toggle:hover {
    background: var(--surface-bg, #f3f4f6);
}
.omni-chat-toggle svg {
    flex-shrink: 0;
}
.omni-chat-toggle .ocp-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    display: none;
    flex-shrink: 0;
}

@media (max-width: 1100px) {
    .omni-chat-wrapper {
        flex-direction: column;
    }
    .omni-chat-wrapper > .audit-omni {
        flex: none;
        width: 100%;
        max-width: 100%;
    }
    .omni-chat-panel {
        max-width: 100%;
        min-width: 0;
        width: 100%;
        height: 500px;
        position: static;
    }
    .omni-chat-panel.ocp-collapsed {
        display: none;
    }
    .omni-chat-toggle {
        display: inline-flex;
    }
}

/* ===== Раздел "Выписка" (Bank Statement) ===== */

.stmt-container { padding: 0; }

/* Тулбар */
.stmt-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px; margin-bottom: 16px;
}
.stmt-toolbar h3 { margin: 0; font-size: 18px; }
.stmt-toolbar-right { display: flex; align-items: center; gap: 12px; }

/* Период-селектор */
.stmt-period-selector { display: flex; align-items: center; gap: 6px; }
.stmt-period-btn {
    padding: 4px 12px; border: 1px solid #d1d5db; border-radius: 6px;
    background: #fff; font-size: 13px; cursor: pointer; color: #374151;
    transition: all .15s;
}
.stmt-period-btn:hover { border-color: var(--primary-color); color: var(--primary-color); }
.stmt-period-btn.active {
    background: var(--primary-color); color: #fff; border-color: var(--primary-color);
}
.stmt-period-select {
    padding: 4px 8px; border: 1px solid #d1d5db; border-radius: 6px;
    font-size: 13px; background: #fff; cursor: pointer;
}
.stmt-period-custom { display: flex; align-items: center; gap: 6px; }
.stmt-period-custom input[type="date"] {
    padding: 3px 8px; border: 1px solid #d1d5db; border-radius: 6px;
    font-size: 13px;
}

/* Секция файлов */
.stmt-files-section { margin-bottom: 20px; }
.stmt-files-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
}
.stmt-files-header h4 { margin: 0; font-size: 15px; }
.stmt-upload-label {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 8px;
    background: var(--primary); color: #fff; font-size: 13px;
    cursor: pointer; transition: opacity .15s;
}
.stmt-upload-label:hover { opacity: .85; }
.stmt-upload-label input { display: none; }

/* Таблица файлов */
.stmt-files-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.stmt-files-table th {
    text-align: left; padding: 6px 10px; background: #f3f4f6;
    font-weight: 600; color: #374151; border-bottom: 1px solid #e5e7eb;
}
.stmt-files-table td {
    padding: 6px 10px; border-bottom: 1px solid #f0f0f0; color: #4b5563;
}
.stmt-files-table tr:hover td { background: #f9fafb; }
.stmt-file-delete {
    cursor: pointer; color: #9ca3af; transition: color .15s;
}
.stmt-file-delete:hover { color: #e53935; }

/* Статусы файлов */
.stmt-status { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; }
.stmt-status-uploaded { color: #6b7280; }
.stmt-status-processing { color: #f59e0b; }
.stmt-status-completed { color: #27ae60; }
.stmt-status-error { color: #e53935; }
.stmt-status-dot {
    width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}
.stmt-status-uploaded .stmt-status-dot { background: #9ca3af; }
.stmt-status-processing .stmt-status-dot { background: #f59e0b; animation: stmt-pulse 1.2s infinite; }
.stmt-status-completed .stmt-status-dot { background: #27ae60; }
.stmt-status-error .stmt-status-dot { background: #e53935; }

@keyframes stmt-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .4; }
}

/* Сабтабы Выписка / ЭСФ */
.stmt-data-section { margin-top: 20px; }
.stmt-subtabs {
    display: flex; gap: 0; border-bottom: 2px solid #e5e7eb; margin-bottom: 12px;
}
.stmt-subtab-btn {
    padding: 8px 20px; border: none; background: none;
    font-size: 14px; font-weight: 500; color: #6b7280; cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    transition: all .15s;
}
.stmt-subtab-btn:hover { color: var(--primary); }
.stmt-subtab-btn.active {
    color: var(--primary); border-bottom-color: var(--primary); font-weight: 600;
}
.stmt-subtab-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: #e5e7eb; font-size: 11px; font-weight: 600;
    color: #6b7280; margin-left: 6px;
}
.stmt-subtab-btn.active .stmt-subtab-count {
    background: var(--primary); color: #fff;
}
.stmt-panel-hint {
    font-size: 12px; color: #9ca3af; margin: 0 0 10px;
}

/* Таблица операций */
.stmt-ops-wrapper { max-height: 600px; overflow: auto; }
.stmt-ops-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.stmt-ops-table th {
    position: sticky; top: 0; z-index: 2;
    text-align: left; padding: 6px 8px; background: #f3f4f6;
    font-weight: 600; color: #374151; border-bottom: 2px solid #e5e7eb;
    white-space: nowrap;
}
.stmt-ops-table td {
    padding: 5px 8px; border-bottom: 1px solid #f0f0f0; color: #4b5563;
    vertical-align: top;
}
.stmt-ops-table tr:hover td { background: #f9fafb; }
.stmt-ops-table .purpose-cell {
    max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stmt-ops-table .purpose-cell:hover {
    white-space: normal; overflow: visible;
}

/* Суммы credit/debit */
.amount-credit { color: #27ae60; font-weight: 600; }
.amount-debit { color: #e53935; font-weight: 600; }

/* Итоговая строка */
.stmt-totals-row td {
    font-weight: 700; background: #f0f4f8 !important;
    border-top: 2px solid #d1d5db;
}

/* Итоги блок */
.stmt-summary {
    display: flex; gap: 24px; margin-top: 16px; padding: 14px 18px;
    background: #f8f9fa; border-radius: 10px; font-size: 14px; flex-wrap: wrap;
}
.stmt-summary-item { display: flex; flex-direction: column; gap: 2px; }
.stmt-summary-label { font-size: 12px; color: #9ca3af; }
.stmt-summary-value { font-weight: 700; font-size: 16px; color: #1f2937; }
.stmt-summary-value.credit { color: #27ae60; }
.stmt-summary-value.debit { color: #e53935; }

/* Пустое состояние */
.stmt-empty {
    text-align: center; padding: 40px 20px; color: #9ca3af; font-size: 14px;
}

/* Responsive */
@media (max-width: 768px) {
    .stmt-toolbar { flex-direction: column; align-items: flex-start; }
    .stmt-summary { flex-direction: column; gap: 12px; }
    .stmt-subtabs { overflow-x: auto; }
}