/* 
  Платформа заявок и бланков — главный CSS файл
  Кастомные стили без внешних зависимостей
*/

/* Vue: скрыть корень приложения до компиляции шаблона (иначе мелькают «[[ ... ]]», жёлтые/синие цифры статистики) */
[v-cloak] {
  display: none !important;
}

@font-face {
  font-family: 'Muller';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/muller/Muller-Light.otf') format('opentype');
}

@font-face {
  font-family: 'Muller';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/muller/Muller-Medium.otf') format('opentype');
}

/* === CSS переменные (строгий корпоративный стиль) === */
:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-light: #3b82f6;
  --primary-alpha: rgba(37, 99, 235, 0.1);
  --primary-alpha-strong: rgba(37, 99, 235, 0.25);
  --accent: #0f172a;
  --success: #16a34a;
  --success-light: #34d399;
  --success-alpha: rgba(16, 185, 129, 0.12);
  --warning: #d97706;
  --warning-dark: #92400e;
  --warning-bg: #fef3c7;
  --warning-border: #fde68a;
  --warning-alpha: rgba(245, 158, 11, 0.14);
  --danger: #dc2626;
  --danger-light: #ef4444;
  --danger-bg: #fef2f2;
  --danger-alpha: rgba(239, 68, 68, 0.1);
  --bg: #f8fafc;
  --bg-card: #ffffff;
  --bg-input: #ffffff;
  --bg-dark: #f1f5f9;
  --border: #cbd5e1;
  --border-light: #e2e8f0;
  --text: #0f172a;
  --text-muted: #475569;
  --text-secondary: #64748b;
  --text-on-light: #1e293b;
  --secondary-bg: #f1f5f9;
  --surface-2: #e2e8f0;
  --info: #0284c7;
  --shadow: none;
  --radius: 4px;
  --radius-sm: 2px;
  --radius-lg: 16px;
  --transition: 0.1s ease;
  /* Z-index scale */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 1000;
  --z-modal: 10000;
  --z-chat-fab: 9000;
  --z-chat-panel: 9001;
  /* Кнопки: единая шкала (default / sm / compact) */
  --btn-font-weight: 500;
  --btn-letter-spacing: 0.02em;
  --btn-radius: 4px;
  --btn-gap: 6px;
  --btn-padding-y: 0.5rem;
  --btn-padding-x: 1rem;
  --btn-font-size: 0.875rem;
  --btn-line-height: 1.5;
  --btn-min-height: 2.25rem;
  --btn-sm-padding-y: 0.375rem;
  --btn-sm-padding-x: 0.75rem;
  --btn-sm-font-size: 0.8125rem;
  --btn-sm-min-height: 1.875rem;
  --btn-compact-padding-y: 0.25rem;
  --btn-compact-padding-x: 0.5rem;
  --btn-compact-font-size: var(--fs-xs);
  --btn-compact-min-height: 1.5rem;
  /* Типографика: единая шкала мелких размеров */
  --fs-xs: 0.75rem;
  --fs-sm: 0.85rem;
  --fs-md: 0.9rem;
  --fs-lg: 0.95rem;
  /* Отступы: единая шкала (используйте var(--space-*) вместо хардкода) */
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-base: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  /* Тени: 3 уровня высоты — флэт/карточка/модалка */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-card: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-elevated: 0 8px 24px rgba(15, 23, 42, 0.12);
  --shadow-modal: 0 20px 50px rgba(15, 23, 42, 0.18);
  /* Радиусы (--radius уже есть) — добавляем семейство */
  --radius-md: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;
  /* Точки перелома для @media (используются в JS через matchMedia) */
  --breakpoint-mobile: 640px;
  --breakpoint-tablet: 900px;
  --breakpoint-desktop: 1200px;
}

/* === Сброс стилей === */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-weight: 400;
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand,
.btn,
.role-pill,
.user-badge .role-pill,
.stat-number,
.filter-btn {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* Клиентский кабинет: чуть теплее фон (класс сохранён для шаблонов и кастомизаций) */
body.client-theme {
  --bg: #f8fafc;
  --surface-2: #f1f5f9;
}