/* ==========================================================================
   FINANCE APP — PREMIUM DESIGN SYSTEM
   Централизованное хранилище всех CSS-переменных и стилей
   ========================================================================== */

/* Golos Text — основной шрифт (Google Fonts) */
/* Разработан для Госуслуг РФ: стабильность, надёжность, отличные цифры и кириллица */
@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700&display=swap');

:root {
  /* =========================================
     ЦВЕТОВАЯ ПАЛИТРА
     ========================================= */

  /* Primary — Emerald (зелёный для доходов, позитивных действий) */
  --color-emerald-50: #ecfdf5;
  --color-emerald-100: #d1fae5;
  --color-emerald-200: #a7f3d0;
  --color-emerald-300: #6ee7b7;
  --color-emerald-400: #34d399;
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;
  --color-emerald-700: #047857;
  --color-emerald-800: #065f46;
  --color-emerald-900: #064e3b;

  /* Secondary — Blue (синий для акцентов, переводов) */
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;

  /* Danger — Red (красный для расходов, удалений) */
  --color-red-50: #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-200: #fecaca;
  --color-red-300: #fca5a5;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;
  --color-red-800: #991b1b;
  --color-red-900: #7f1d1d;

  /* Warning — Amber (жёлтый для предупреждений) */
  --color-amber-50: #fffbeb;
  --color-amber-100: #fef3c7;
  --color-amber-200: #fde68a;
  --color-amber-300: #fcd34d;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-amber-700: #b45309;
  --color-amber-800: #92400e;
  --color-amber-900: #78350f;

  /* Neutrals — Gray (серый для текста, бордеров, фонов) */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* Semantic colors */
  --color-white: #ffffff;
  --color-black: #000000;

  /* =========================================
     ГРАДИЕНТЫ
     ========================================= */

  /* Фон страницы — тонкий градиент серый → белый */
  --gradient-bg-page: linear-gradient(to bottom, #f9fafb 0%, #ffffff 100%);

  /* Hero-секция — emerald → blue диагональный градиент */
  --gradient-hero: linear-gradient(135deg, #047857 0%, #1d4ed8 100%);

  /* Subtle gradient для карточек */
  --gradient-card: linear-gradient(to bottom, #ffffff 0%, #f9fafb 100%);

  /* =========================================
     ТЕНИ (4 уровня)
     ========================================= */

  --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), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Премиальные тени с цветом */
  --shadow-emerald: 0 10px 15px -3px rgba(4, 120, 87, 0.15), 0 4px 6px -2px rgba(4, 120, 87, 0.08);
  --shadow-blue: 0 10px 15px -3px rgba(29, 78, 216, 0.15), 0 4px 6px -2px rgba(29, 78, 216, 0.08);

  /* =========================================
     ТИПОГРАФИКА
     ========================================= */

  /* Font family */
  --font-sans: 'Golos Text', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Font sizes — стандартные размеры для sans-serif */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.25rem;      /* 20px */
  --text-2xl: 1.5rem;      /* 24px */
  --text-3xl: 1.875rem;    /* 30px */
  --text-4xl: 2.25rem;     /* 36px */
  --text-5xl: 3rem;        /* 48px */

  /* Font weights */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Line heights */
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* =========================================
     SPACING (система отступов)
     ========================================= */

  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  /* =========================================
     СКРУГЛЕНИЯ (border radius)
     ========================================= */

  --radius-sm: 0.5rem;    /* 8px */
  --radius-md: 0.75rem;   /* 12px */
  --radius-lg: 1rem;      /* 16px */
  --radius-xl: 1.5rem;    /* 24px */
  --radius-full: 9999px;  /* полный круг */

  /* =========================================
     АНИМАЦИИ (durations & easings)
     ========================================= */

  /* Durations */
  --duration-fast: 150ms;
  --duration-normal: 320ms;
  --duration-slow: 500ms;

  /* Easings */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* =========================================
     Z-INDEX (слои)
     ========================================= */

  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-tooltip: 700;

  /* =========================================
     TOUCH TARGETS
     ========================================= */

  --touch-target: 44px; /* минимальный размер для touch */

  /* =========================================
     BREAKPOINTS (для CSS container queries)
     ========================================= */

  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;

  /* =========================================
     LAYOUT
     ========================================= */

  --page-max-width: 1280px;
}

/* =========================================
   БАЗОВЫЕ СТИЛИ
   ========================================= */

body {
  font-family: var(--font-sans);
  font-weight: var(--font-normal);
  color: var(--color-gray-900);
  line-height: var(--leading-normal);
  font-variant-numeric: tabular-nums lining-nums; /* Моноширинные цифры для таблиц */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-y: scroll; /* Всегда показывать scrollbar */
}

/* Tabular nums для чисел */
.tabular-nums {
  font-variant-numeric: tabular-nums lining-nums;
}

/* =========================================
   UTILITY CLASSES
   ========================================= */

/* Фон страницы с градиентом */
.bg-page {
  background: var(--gradient-bg-page);
}

/* Hero gradient */
.bg-hero {
  background: var(--gradient-hero);
}

/* Премиальные тени */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-emerald { box-shadow: var(--shadow-emerald); }
.shadow-blue { box-shadow: var(--shadow-blue); }

/* Скругления */
.radius-sm { border-radius: var(--radius-sm); }
.radius-md { border-radius: var(--radius-md); }
.radius-lg { border-radius: var(--radius-lg); }
.radius-xl { border-radius: var(--radius-xl); }
.radius-full { border-radius: var(--radius-full); }

/* Transitions */
.transition-fast { transition: all var(--duration-fast) var(--ease-out); }
.transition-normal { transition: all var(--duration-normal) var(--ease-out); }
.transition-slow { transition: all var(--duration-slow) var(--ease-in-out); }

/* =========================================
   ПРЕМИАЛЬНАЯ ТИПОГРАФИКА
   ========================================= */

/* Заголовки (H1) - максимально премиально */
.heading-premium {
  font-family: var(--font-sans);
  font-weight: var(--font-bold);
  letter-spacing: -0.03em;
  line-height: var(--leading-tight);
}

/* Подзаголовки (H2-H3) - полужирный */
.subheading-premium {
  font-family: var(--font-sans);
  font-weight: var(--font-semibold);
  letter-spacing: -0.02em;
  line-height: var(--leading-snug);
}

/* Текст и лейблы - средний вес */
.text-premium {
  font-family: var(--font-sans);
  font-weight: var(--font-medium);
  letter-spacing: -0.01em;
}

/* =========================================
   PAGE CONTAINER
   ========================================= */

.page-container {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* ==========================================================================
   CATEGORY FILTER STYLES
   Цветные фоны для категорий в dropdown фильтре (как badges)
   ========================================================================== */

/* Родительские категории расходов - как badge-expense */
.category-expense-parent {
  background-color: rgba(220, 38, 38, 0.1);
  color: var(--color-red-700);
  border: 1px solid rgba(220, 38, 38, 0.2);
}

.category-expense-parent:hover {
  background-color: rgba(220, 38, 38, 0.15);
}

/* Подкатегории расходов - более светлый вариант */
.category-expense-child {
  background-color: rgba(220, 38, 38, 0.05);
  color: var(--color-red-700);
  border: 1px solid rgba(220, 38, 38, 0.1);
}

.category-expense-child:hover {
  background-color: rgba(220, 38, 38, 0.1);
}

/* Родительские категории доходов - как badge-income */
.category-income-parent {
  background-color: rgba(4, 120, 87, 0.1);
  color: var(--color-emerald-700);
  border: 1px solid rgba(4, 120, 87, 0.2);
}

.category-income-parent:hover {
  background-color: rgba(4, 120, 87, 0.15);
}

/* Подкатегории доходов - более светлый вариант */
.category-income-child {
  background-color: rgba(4, 120, 87, 0.05);
  color: var(--color-emerald-700);
  border: 1px solid rgba(4, 120, 87, 0.1);
}

.category-income-child:hover {
  background-color: rgba(4, 120, 87, 0.1);
}

/* ==========================================================================
   UTILITY CLASSES FOR INLINE STYLE REPLACEMENT
   Added as part of REFACTORING-001
   ========================================================================== */

/* TEXT COLORS */
.text-var-red-500 { color: var(--color-red-500); }
.text-var-red-600 { color: var(--color-red-600); }
.text-var-red-700 { color: var(--color-red-700); }
.text-var-red-800 { color: var(--color-red-800); }
.text-var-emerald-600 { color: var(--color-emerald-600); }
.text-var-emerald-700 { color: var(--color-emerald-700); }
.text-var-blue-600 { color: var(--color-blue-600); }
.text-var-blue-700 { color: var(--color-blue-700); }
.text-var-amber-600 { color: var(--color-amber-600); }
.text-var-green-600 { color: var(--color-green-600); }
.text-var-gray-500 { color: var(--color-gray-500); }
.text-var-gray-600 { color: var(--color-gray-600); }
.text-var-gray-700 { color: var(--color-gray-700); }
.text-var-gray-800 { color: var(--color-gray-800); }
.text-var-neutral-300 { color: var(--color-neutral-300); }
.text-var-neutral-400 { color: var(--color-neutral-400); }
.text-var-neutral-500 { color: var(--color-neutral-500); }
.text-var-neutral-600 { color: var(--color-neutral-600); }
.text-var-neutral-700 { color: var(--color-neutral-700); }
.text-var-neutral-800 { color: var(--color-neutral-800); }
.text-var-neutral-900 { color: var(--color-neutral-900); }
.text-white-80 { color: rgba(255, 255, 255, 0.8); }
.text-white-70 { color: rgba(255, 255, 255, 0.7); }

/* BACKGROUND COLORS */
.bg-var-red-50 { background-color: var(--color-red-50); }
.bg-var-red-100 { background-color: var(--color-red-100); }
.bg-var-red-600 { background-color: var(--color-red-600); }
.bg-var-emerald-100 { background-color: var(--color-emerald-100); }
.bg-var-emerald-600 { background-color: var(--color-emerald-600); }
.bg-var-emerald-700 { background-color: var(--color-emerald-700); }
.bg-var-blue-100 { background-color: var(--color-blue-100); }
.bg-var-blue-600 { background-color: var(--color-blue-600); }
.bg-var-blue-700 { background-color: var(--color-blue-700); }
.bg-var-amber-500 { background-color: var(--color-amber-500); }
.bg-var-gray-700 { background-color: var(--color-gray-700); }
.bg-var-neutral-50 { background-color: var(--color-neutral-50); }
.bg-var-neutral-100 { background-color: var(--color-neutral-100); }
.bg-var-neutral-200 { background-color: var(--color-neutral-200); }
.bg-var-neutral-300 { background-color: var(--color-neutral-300); }
.bg-var-neutral-800 { background-color: var(--color-neutral-800); }
.bg-red-10 { background-color: rgba(220, 38, 38, 0.1); }
.bg-emerald-10 { background-color: rgba(4, 120, 87, 0.1); }
.bg-blue-10 { background-color: rgba(29, 78, 216, 0.1); }
.bg-gradient-red-badge { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
.bg-gradient-red-subtle { background: linear-gradient(135deg, rgba(220, 38, 38, 0.15) 0%, rgba(220, 38, 38, 0.05) 100%); }
.bg-gradient-amber-subtle { background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%); }
.bg-gradient-gray-subtle { background: linear-gradient(135deg, var(--color-gray-100) 0%, var(--color-gray-50) 100%); }
.bg-purple-600 { background: #9333ea; }

/* BORDERS */
.border-var-gray-50 { border-color: var(--color-gray-50); }
.border-var-gray-100 { border-color: var(--color-gray-100); }
.border-var-gray-200 { border-color: var(--color-gray-200); }
.border-var-gray-300 { border-color: var(--color-gray-300); }
.border-var-neutral-100 { border-color: var(--color-neutral-100); }
.border-var-neutral-200 { border-color: var(--color-neutral-200); }
.border-var-neutral-300 { border-color: var(--color-neutral-300); }
.border-var-red-200 { border-color: var(--color-red-200); }
.border-var-red-300 { border-color: var(--color-red-300); }
.border-var-amber-300 { border-color: var(--color-amber-300); }
.border-var-emerald-600 { border-color: var(--color-emerald-600); }
.border-2-neutral-200 { border: 2px solid var(--color-neutral-200); }
.border-t-neutral-100 { border-top: 1px solid var(--color-neutral-100); }
.border-b-neutral-100 { border-bottom: 1px solid var(--color-neutral-100); }
.border-l-4-emerald { border-left: 4px solid var(--color-emerald-600); }
.border-l-4-red { border-left: 4px solid var(--color-red-600); }

/* SHADOWS */
.shadow-top { box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1); }

/* COMBINED STYLES */
.card-styled { font-family: var(--font-sans); box-shadow: var(--shadow-md); border-radius: var(--radius-xl); }
.toast-success { font-family: var(--font-sans); box-shadow: var(--shadow-xl); border-radius: var(--radius-lg); border-left: 4px solid var(--color-emerald-600); }
.toast-error { font-family: var(--font-sans); box-shadow: var(--shadow-xl); border-radius: var(--radius-lg); border-left: 4px solid var(--color-red-600); }
.bottom-sheet { font-family: var(--font-sans); box-shadow: var(--shadow-xl); border-radius: var(--radius-xl) var(--radius-xl) 0 0; transition: transform 320ms var(--ease-out); }
.modal-dialog { font-family: var(--font-sans); box-shadow: var(--shadow-xl); border-radius: var(--radius-lg); transition: all 500ms var(--ease-out); }
.backdrop-blur-light { backdrop-filter: blur(2px); transition: opacity 320ms var(--ease-out); }
.backdrop-blur-medium { backdrop-filter: blur(4px); transition: opacity 500ms var(--ease-out); }
.z-modal { z-index: var(--z-modal); }
.z-toast { z-index: var(--z-toast); }

/* ERROR BOXES */
.error-box { background: rgba(220, 38, 38, 0.05); border: 1px solid var(--color-red-300); border-radius: var(--radius-xl); }
.error-box-alt { background-color: rgba(220, 38, 38, 0.05); border: 2px solid rgba(220, 38, 38, 0.2); border-radius: var(--radius-xl); }
.error-banner { background-color: var(--color-red-50); border: 2px solid var(--color-red-200); color: var(--color-red-800); }

/* WARNING BOXES */
.warning-box { background: rgba(245, 158, 11, 0.1); border: 1px solid var(--color-amber-300); }

/* TRANSACTION TYPE BUTTONS */
.btn-expense-active { background: var(--color-red-600); box-shadow: var(--shadow-sm); color: white; }
.btn-income-active { background: var(--color-emerald-700); box-shadow: var(--shadow-sm); color: white; }
.btn-type-inactive { color: var(--color-neutral-700); }

/* TYPOGRAPHY */
.text-2xl-semibold { font-size: var(--text-2xl); font-weight: var(--font-semibold); }
.text-xl-bold { font-size: var(--text-xl); font-weight: var(--font-bold); }
.text-base-normal { font-size: var(--text-base); }
.text-sm-normal { font-size: var(--text-sm); }
.text-xs-normal { font-size: var(--text-xs); }

/* LAYOUT */
.transaction-panel { display: flex; max-height: calc(100vh - 6rem); }
.transaction-panel-inner { max-height: calc(100vh - 6rem); min-height: 0; }
.notifications-dropdown { width: 600px; max-height: 500px; }

/* FILTER BUTTONS */
.filter-btn { background-color: white; border: 1px solid var(--color-gray-300); box-shadow: var(--shadow-sm); }
.filter-btn-active { background-color: var(--color-emerald-50); border: 1px solid var(--color-emerald-600); box-shadow: var(--shadow-sm); }
.filter-btn-icon { color: var(--color-gray-500); }
.filter-btn-icon-active { color: var(--color-emerald-600); }
.filter-btn-text { color: var(--color-gray-700); }
.filter-btn-text-active { color: var(--color-emerald-600); font-weight: 500; }

/* TOOLTIP */
.tooltip-box { background: var(--color-neutral-800); }
.tooltip-arrow { background: var(--color-neutral-800); }

/* SPLITS */
.splits-container { background: var(--color-neutral-50); }
.splits-remove-btn { color: var(--color-neutral-400); }
.splits-add-btn { border-color: var(--color-neutral-300); color: var(--color-neutral-500); }

.text-var-purple-600 { color: #9333ea; }