/* ==========================================================================
   1. ДИЗАЙН-ТОКЕНЫ (ПЕРЕМЕННЫЕ)
   ========================================================================== */

/* ☀️ СВЕТЛАЯ ТЕМА (По умолчанию) */
:root {
    /* Базовые цвета */
    --primary: #3b82f6;
    --primary-hover: #2563eb;
    --success: #10b981;
    --success-hover: #059669;
    --danger: #ef4444;
    --danger-hover: #dc2626;
    --warning: #f59e0b;
    --info: #0ea5e9;
    --purple: #8b5cf6;
    --purple-hover: #7c3aed;

    /* Фоны и Поверхности */
    --bg-main: #f8fafc;
    --surface: #ffffff;
    --surface-alt: #f1f5f9;
    --surface-hover: #e2e8f0;
    --card-bg: var(--surface);
    --sidebar-bg: #0f172a;
    --sidebar-text: #f1f5f9;

    /* Текст и Границы */
    --text-main: #1e293b;
    --text-muted: #64748b;
    --border: #e2e8f0;

    /* Семантические фоны */
    --success-bg: #f0fdf4;
    --success-border: #bbf7d0;
    --success-text: #166534;

    --warning-bg: #fffbeb;
    --warning-border: #fde68a;
    --warning-text: #92400e;

    --danger-bg: #fef2f2;
    --danger-border: #fecaca;
    --danger-text: #991b1b;

    /* Цвета для графиков */
    --chart-1: #3b82f6;
    --chart-2: #10b981;
    --chart-3: #f59e0b;
    --chart-4: #ef4444;
    --chart-5: #8b5cf6;
    --chart-6: #0ea5e9;
    --chart-7: #ec4899;

    /* Тени */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* 🌙 ТЕМНАЯ ТЕМА */
[data-theme="dark"] {
    /* Базовые цвета (чуть приглушеннее) */
    --primary: #60a5fa;
    --primary-hover: #3b82f6;
    --success: #34d399;
    --success-hover: #10b981;
    --danger: #f87171;
    --danger-hover: #ef4444;
    --warning: #fbbf24;
    --info: #38bdf8;
    --purple: #a78bfa;
    --purple-hover: #8b5cf6;

    /* Темные фоны */
    --bg-main: #0f172a;
    --surface: #1e293b;
    --surface-alt: #334155;
    --surface-hover: #475569;
    --card-bg: var(--surface);
    --sidebar-bg: #020617;
    --sidebar-text: #f1f5f9;

    /* Светлый текст и темные границы */
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --border: #334155;

    /* Семантические фоны адаптируем под темную тему (эффект стекла) */
    --success-bg: rgba(16, 185, 129, 0.25);
    --success-border: rgba(16, 185, 129, 0.2);
    --success-text: #34d399;

    --warning-bg: rgba(245, 158, 11, 0.1);
    --warning-border: rgba(245, 158, 11, 0.2);
    --warning-text: #fbbf24;

    --danger-bg: rgba(239, 68, 68, 0.1);
    --danger-border: rgba(239, 68, 68, 0.2);
    --danger-text: #f87171;

    /* Цвета для графиков */
    --chart-1: #60a5fa;
    --chart-2: #34d399;
    --chart-3: #fbbf24;
    --chart-4: #f87171;
    --chart-5: #a78bfa;
    --chart-6: #38bdf8;
    --chart-7: #f472b6;

    /* Тени для темной темы */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   0. UTILITY CLASSES (ГЛОБАЛЬНЫЕ)
   ========================================================================== */
/* Флекс-сетки */
.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.align-center {
    align-items: center;
    display: flex;
}

/* Отступы (Gaps) */
.gap-5 {
    gap: 5px;
}

.gap-10 {
    gap: 10px;
}

.gap-15 {
    gap: 15px;
}

.gap-20 {
    gap: 20px;
}

/* Отступы (Margins & Paddings) */
.m-0 {
    margin: 0 !important;
}

.mt-0 {
    margin-top: 0;
}

.mt-5 {
    margin-top: 5px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-15 {
    margin-top: 15px;
}

.mt-20 {
    margin-top: 20px;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-5 {
    margin-bottom: 5px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-15 {
    margin-bottom: 15px;
}

.mb-20 {
    margin-bottom: 20px;
}

.p-0 {
    padding: 0 !important;
}

.p-5 {
    padding: 5px;
}

.p-10 {
    padding: 10px;
}

.p-15 {
    padding: 15px;
}

.p-20 {
    padding: 20px;
}

/* Текст */
.text-center {
    text-align: center;
}

.text-right {
    text-align: right !important;
}

.text-left {
    text-align: left;
}

.text-main {
    color: var(--text-main);
}

.text-success {
    color: var(--success) !important;
}

.text-warning {
    color: var(--warning-text) !important;
}

.text-danger {
    color: var(--danger) !important;
}

.text-info {
    color: var(--info) !important;
}

.font-bold {
    font-weight: bold;
}

.font-600 {
    font-weight: 600;
}

.font-700 {
    font-weight: 700;
}

.font-900 {
    font-weight: 900;
}

.font-normal {
    font-weight: normal;
}

.font-11 {
    font-size: 11px;
}

.font-12 {
    font-size: 12px;
}

.font-13 {
    font-size: 13px;
}

.font-14 {
    font-size: 14px;
}

.font-15 {
    font-size: 15px;
}

.font-16 {
    font-size: 16px;
}

.font-18 {
    font-size: 18px;
}

.font-20 {
    font-size: 20px;
}

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

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

.font-bold-18 {
    font-size: 18px;
    font-weight: bold;
}

.cursor-pointer {
    cursor: pointer;
}

.align-start {
    align-items: flex-start;
}

.align-stretch {
    align-items: stretch;
}

.text-primary {
    color: var(--primary) !important;
}

.border-left-primary {
    border-left: 4px solid var(--primary);
}

.border-left-warning {
    border-left: 4px solid var(--warning);
}

.border-left-danger {
    border-left: 4px solid var(--danger);
}

.border-left-muted {
    border-left: 4px solid var(--border);
}

.label-sm {
    display: block;
    font-size: 11px;
    margin-bottom: 2px;
}

.text-italic {
    font-style: italic;
}

/* Ширина и Высота */
.w-5 { width: 5%; }
.w-10 { width: 10%; }
.w-12 { width: 12%; }
.w-15 { width: 15%; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-30 { width: 30%; }
.w-40 { width: 40%; }
.w-50 { width: 50%; }
.w-100 {
    width: 100%;
}

.h-100 {
    height: 100%;
}

.flex-grow-1 {
    flex-grow: 1;
}

/* Display */
.d-flex { display: flex; }
.d-none { display: none !important; }
.d-block { display: block; }
.d-inline-block { display: inline-block; }

/* Flex extensions */
.justify-between { justify-content: space-between; }
.align-baseline { align-items: baseline; }
.flex-wrap { flex-wrap: wrap; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-1 { flex: 1; }
.flex-08 { flex: 0.8; }
.flex-12 { flex: 1.2; }
.flex-15 { flex: 1.5; }

/* Text extensions */
.text-white { color: white !important; }
.text-muted { color: var(--text-muted) !important; }
.text-uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.5px; }
.font-italic { font-style: italic; }
.text-decoration-none { text-decoration: none; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Pixel dimensions */
.w-13 { width: 13%; }
.w-18 { width: 18%; }
.w-35 { width: 35%; }
.w-80p { width: 80px; }
.w-130p { width: 130px; }
.h-18p { height: 18px; }
.w-18p { width: 18px; }
.h-32p { height: 32px; }
.p-4-6 { padding: 4px 6px; }

/* Min/Max dimensions */
.min-w-90 { min-width: 90px; }
.min-w-110 { min-width: 110px; }
.min-w-120 { min-width: 120px; }
.min-w-140p { min-width: 140px; }
.min-w-180 { min-width: 180px; }
.min-w-180p { min-width: 180px; }
.min-w-190p { min-width: 190px; }
.max-h-50vh { max-height: 50vh; }
.max-h-70vh { max-height: 70vh; }
.max-h-350p { max-height: 350px; }

/* Spacing extras */
.mt-3 { margin-top: 3px; }
.mb-3 { margin-bottom: 3px; }
.mb-4 { margin-bottom: 4px; }
.mb-12 { margin-bottom: 12px; }
.mr-10 { margin-right: 10px; }
.pb-10 { padding-bottom: 10px; }
.p-12-15 { padding: 12px 15px; }
.p-12-16 { padding: 12px 16px; }
.px-15 { padding-left: 15px; padding-right: 15px; }
.pl-30 { padding-left: 30px; }

/* Border utilities */
.border-top { border-top: 1px solid var(--border); }
.border-bottom { border-bottom: 1px solid var(--border); }
.border-top-dotted { border-top: 1px dotted rgba(2, 132, 199, 0.3); }
.border-radius-4 { border-radius: 4px; }
.border-radius-6 { border-radius: 6px; }
.border-radius-md { border-radius: 8px; }
.border-none { border: none !important; }
.radius-md { border-radius: 6px; }

/* Shadow and background utilities */
.box-shadow-sm { box-shadow: var(--shadow-sm); }
.bg-surface { background: var(--surface); }

/* State utilities */
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }
.user-select-none { user-select: none; }

/* Table utilities */
.table-fixed { table-layout: fixed; }

/* Semantic backgrounds */
.bg-danger-light { background-color: var(--danger-bg) !important; }
.bg-warning-light { background-color: var(--warning-bg) !important; }
.bg-success-light { background-color: var(--success-bg) !important; }

/* Grid templates */
.grid-cols-5-auto { grid-template-columns: 2fr 2fr 2fr 2fr auto; }
.grid-cols-4-auto { grid-template-columns: 2fr 2fr 4fr auto; }

/* ==========================================================================
   1. БАЗОВЫЕ СТИЛИ (Сброс и типографика)
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    font-family: 'Inter', 'Segoe UI', sans-serif;
}

/* Оптимизированные транзиции только для нужных элементов */
body,
.card,
.sidebar,
.topbar,
.btn,
.input-modern,
.modal-content,
th,
td,
.expense-item {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-main);
    color: var(--text-main);
    display: flex;
    height: 100vh;
    overflow: hidden;
}

h2 {
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--text-main);
    font-size: 20px;
    font-weight: 600;
}

h3,
h4 {
    color: var(--text-main);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    to {
        transform: translateX(0);
    }
}

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


/* Custom Utilities */
.border-base { border: 1px solid var(--border-color, var(--border)); }
.border-warning-box { border: 1px solid var(--warning); }
.grid-cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); }
.flex-col { display: flex; flex-direction: column; }
.bg-success-lt { background-color: var(--success-bg) !important; color: var(--success-text) !important; }
.bg-danger-lt { background-color: var(--danger-bg) !important; color: var(--danger-text) !important; }
.radius-6 { border-radius: 6px; }