/* === 3.1: Система иконок === */
.icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* === 3.2: Тёмная тема === */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-surface: #ffffff;
    --bg-hover: #f3f4f6;
    --color-text: #1f2937;
    --color-text-muted: #6b7280;
    --color-border: #e5e7eb;
    --color-primary: #3b82f6;
    --color-primary-fg: #ffffff;
    --shadow: 0 1px 3px rgba(0,0,0,0.1);
}

[data-theme="dark"] {
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --bg-surface: #1f2937;
    --bg-hover: #374151;
    --color-text: #f9fafb;
    --color-text-muted: #9ca3af;
    --color-border: #374151;
    --color-primary: #3b82f6;
    --color-primary-fg: #ffffff;
    --shadow: 0 1px 3px rgba(0,0,0,0.3);
}

[data-theme="dark"] body { background: var(--bg-primary); color: var(--color-text); }
[data-theme="dark"] .app-header { background: var(--bg-secondary); border-bottom-color: var(--color-border); }
[data-theme="dark"] .app-footer { background: var(--bg-secondary); border-top-color: var(--color-border); color: var(--color-text-muted); }
[data-theme="dark"] .card,
[data-theme="dark"] .module-card,
[data-theme="dark"] .guide-section { background: var(--bg-surface); border-color: var(--color-border); color: var(--color-text); }
[data-theme="dark"] .kanban-card { background: var(--bg-surface); border-color: var(--color-border); }
[data-theme="dark"] .kanban-card:hover { border-color: var(--color-primary); }
[data-theme="dark"] table { color: var(--color-text); }
[data-theme="dark"] th { color: var(--color-text-muted); }
[data-theme="dark"] .muted { color: var(--color-text-muted); }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea {
    background: var(--bg-hover); color: var(--color-text); border-color: var(--color-border);
}
[data-theme="dark"] .btn-secondary { background: var(--bg-hover); color: var(--color-text); }
[data-theme="dark"] .search-trigger { background: var(--bg-hover); color: var(--color-text-muted); }
[data-theme="dark"] .toast { background: var(--bg-secondary); color: var(--color-text); }

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--bg-hover);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    color: var(--color-text);
    transition: all 0.15s;
}
.theme-toggle:hover { background: var(--color-primary); color: #fff; }

/* === 3.3: Mobile адаптивность === */
@media (max-width: 768px) {
    .app-header {
        flex-direction: column;
        align-items: stretch;
        padding: 8px 12px;
    }
    .app-header__brand { justify-content: space-between; }
    .app-nav {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--color-border);
        z-index: 100;
        padding: 8px 0;
    }
    .app-nav--open { display: flex; }
    .app-nav .nav-link {
        padding: 12px 20px;
        border-bottom: 1px solid var(--color-border);
    }
    .nav-toggle {
        display: inline-flex !important;
    }
    .app-header__user {
        flex-wrap: wrap;
        gap: 4px 12px;
        padding: 8px 0;
    }
    .app-main { padding: 8px; }

    /* Tables: horizontal scroll */
    .leads-table, .audit-table, .contacts-table, .interactions-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .leads-table thead, .leads-table tbody { display: table; width: max-content; }

    /* Kanban: vertical stack */
    .kanban-board {
        flex-direction: column;
        overflow-x: visible;
    }
    .kanban-column {
        min-width: 100%;
        margin-bottom: 12px;
    }

    /* Lead card: tabs → accordion */
    .lead-tabs { flex-wrap: wrap; }
    .tab-button { flex: 1 1 45%; }

    /* Dashboard: single column */
    .dashboard-modules { grid-template-columns: 1fr !important; }
    .status-bar { flex-direction: column; }
    .summary-grid { grid-template-columns: 1fr 1fr !important; }

    /* Pagination */
    .pagination { font-size: 12px; }
    .pagination__link, .pagination__current { min-width: 28px; height: 28px; }
    .pagination__info { width: 100%; text-align: center; margin: 4px 0 0; }

    /* Bulk panel */
    .bulk-panel { flex-direction: column; align-items: stretch; }
    .bulk-panel__actions { justify-content: center; }

    /* Search modal */
    .search-modal__content { width: 95%; margin-top: 20px; }
}
.nav-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--color-text);
    cursor: pointer;
    padding: 4px;
}

/* === 3.4: Breadcrumbs === */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 0;
    font-size: 13px;
    color: var(--color-text-muted);
    flex-wrap: wrap;
}
.breadcrumbs a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.15s;
}
.breadcrumbs a:hover { color: var(--color-primary); }
.breadcrumbs__separator {
    color: var(--color-border);
    font-size: 14px;
}
.breadcrumbs__current {
    color: var(--color-text);
    font-weight: 500;
}