/* ═══════════════════════════════════════════════════════════════
   Комитет Design Token System v3.0 — Ultra Topˆ
   Гибрид: warm neutrals (Claude) + а11y (Apple HIG / WCAG 2.1 AA)
   + editorial pacing + ring-shadow language.
   Аудитория: пожилые, ветераны, инвалиды → шрифт ≥17, тач ≥48.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Onest:wght@300..900&family=PT+Serif:wght@400;700&display=swap');

/* ── LIGHT MODE ────────────────────────────────────────────── */
:root {
  color-scheme: light dark;

  /* Brand (РТ-зелёный) */
  --color-primary:        #137547;
  --color-primary-hover:  #0f613a;
  --color-primary-light:  #e7f3ed;
  --color-secondary:      #2F6BFF;
  --color-secondary-hover:#1e54db;
  --color-secondary-light:#eff4ff;
  --color-accent:         #F4B740;

  /* Org accent override */
  --color-org-accent:       var(--color-primary);
  --color-org-accent-hover: var(--color-primary-hover);
  --color-org-accent-light: var(--color-primary-light);

  /* Semantic */
  --color-success:        #16a34a;
  --color-success-hover:  #15803d;
  --color-success-bg:     #f0fdf4;
  --color-success-border: #86efac;
  --color-danger:         #dc2626;
  --color-danger-hover:   #b91c1c;
  --color-danger-bg:      #fef2f2;
  --color-danger-border:  #fca5a5;
  --color-warning:        #d97706;
  --color-warning-bg:     #fffbeb;
  --color-warning-border: #fde68a;

  /* Status badges */
  --color-status-pending:     #d97706;
  --color-status-pending-bg:  #fffbeb;
  --color-status-approved:    #16a34a;
  --color-status-approved-bg: #f0fdf4;
  --color-status-rejected:    #dc2626;
  --color-status-rejected-bg: #fef2f2;
  --color-status-neutral:     #6b6b66;
  --color-status-neutral-bg:  #f1f0eb;

  /* Surfaces — warm neutrals (Claude-influence, но российский тон) */
  --color-bg:           #f7f7f5;   /* warm off-white */
  --color-surface:      #ffffff;   /* card surface */
  --color-surface-2:    #f1f1ee;   /* раздел/subtle bg */
  --color-border:       #e2e2dd;   /* warm border */
  --color-border-subtle:#ebebe6;   /* нежная разделительная */
  --color-border-focus: var(--color-primary);

  /* Text — warm grays */
  --color-text-primary:   #18181a;   /* warm near-black */
  --color-text-secondary: #58585a;   /* olive gray */
  --color-text-muted:     #888888;   /* stone gray */
  --color-text-on-accent: #ffffff;

  /* Ring shadows (новый язык глубины) */
  --ring-1: 0 0 0 1px var(--color-border);
  --ring-2: 0 0 0 1px var(--color-border-subtle), 0 1px 2px rgba(15,15,12,.04);
  --ring-3: 0 0 0 1px var(--color-border), 0 4px 12px -2px rgba(15,15,12,.06);
  --ring-hover: 0 0 0 1px var(--color-org-accent-light), 0 10px 24px -6px rgba(15,15,12,.10);

  /* Drop shadows (используем редко) */
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.04);
  --shadow-md: 0 2px 8px -1px rgba(15,15,12,.06);
  --shadow-lg: 0 10px 24px -6px rgba(15,15,12,.10);
  --shadow-xl: 0 20px 40px -8px rgba(15,15,12,.12);
  --glow-primary: 0 0 24px rgba(19,117,71,.15);

  /* Motion */
  --ease-premium:    cubic-bezier(0.32, 0.72, 0, 1);
  --duration-fast:   140ms;
  --duration-normal: 220ms;
  --duration-slow:   380ms;

  /* A11y */
  --focus-ring: 0 0 0 3px rgba(19,117,71,.30);
  --min-touch:  48px;

  --safe-area-bottom: env(safe-area-inset-bottom, 20px);

  /* Radius scale (Claude-influence, более щедрая) */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-2xl: 20px;

  /* Type scale */
  --font-body:    'Onest', system-ui, -apple-system, sans-serif;
  --font-display: 'Onest', system-ui, -apple-system, sans-serif;
  --fz-xs:    12px;
  --fz-sm:    13px;
  --fz-base:  16px;
  --fz-md:    17px;
  --fz-lg:    18px;
  --fz-xl:    20px;
  --fz-2xl:   24px;
  --fz-3xl:   32px;
  --fz-display: 44px;
}

/* ── DARK MODE ─────────────────────────────────────────────── */
.dark {
  --color-primary:        #1aa665;
  --color-primary-hover:  #137547;
  --color-primary-light:  #064e2e;
  --color-secondary:      #3b82f6;
  --color-secondary-hover:#2563eb;
  --color-secondary-light:#1e3a8a;
  --color-accent:         #fbbf24;

  --color-success-bg:     #052e16;
  --color-success-border: #166534;
  --color-danger-bg:      #450a0a;
  --color-danger-border:  #7f1d1d;
  --color-warning-bg:     #431407;
  --color-warning-border: #92400e;

  --color-status-pending-bg:  #431407;
  --color-status-approved-bg: #052e16;
  --color-status-rejected-bg: #450a0a;
  --color-status-neutral-bg:  #1e293b;

  --color-bg:           #0f0f0d;   /* warm near-black */
  --color-surface:      #1a1a17;
  --color-surface-2:    #25241f;
  --color-border:       #30302e;
  --color-border-subtle:#25241f;

  --color-text-primary:   #f7f6f1;
  --color-text-secondary: #a8a7a0;
  --color-text-muted:     #6f6e68;

  --ring-1: 0 0 0 1px var(--color-border);
  --ring-2: 0 0 0 1px var(--color-border), 0 1px 2px rgba(0,0,0,.4);
  --ring-3: 0 0 0 1px var(--color-border), 0 4px 12px -2px rgba(0,0,0,.45);
  --ring-hover: 0 0 0 1px var(--color-org-accent), 0 10px 24px -6px rgba(0,0,0,.55);

  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.4);
  --shadow-md: 0 2px 8px -1px rgba(0,0,0,.5);
  --shadow-lg: 0 10px 24px -6px rgba(0,0,0,.55);
  --glow-primary: 0 0 24px rgba(26,166,101,.18);
  --focus-ring: 0 0 0 3px rgba(26,166,101,.4);
}

/* ── BASE ──────────────────────────────────────────────────── */
* {
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

html, body { overflow-x: hidden; }
body {
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--fz-md);
  line-height: 1.55;
  /* sticky-action-footer высота + safe area */
  padding-bottom: calc(80px + var(--safe-area-bottom));
}

h1, h2, h3, h4, .font-display {
  font-family: var(--font-display);
  letter-spacing: -0.015em;
  line-height: 1.2;
  font-weight: 700;
  color: var(--color-text-primary);
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

::selection {
  background: var(--color-org-accent-light);
  color: var(--color-text-primary);
}

/* ── BUTTONS ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 22px; border-radius: var(--radius-md); border: none;
  font-family: var(--font-body);
  font-size: var(--fz-md); font-weight: 600; cursor: pointer;
  min-height: var(--min-touch);
  transition: transform var(--duration-fast) var(--ease-premium),
              box-shadow var(--duration-normal) var(--ease-premium),
              background var(--duration-fast) var(--ease-premium);
  text-decoration: none; gap: 8px;
  letter-spacing: -0.005em;
}
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: var(--ring-1) !important; }

.btn-primary {
  background: var(--color-org-accent);
  color: var(--color-text-on-accent);
  box-shadow: 0 0 0 1px var(--color-org-accent), 0 4px 14px -2px rgba(15,15,12,.12);
}
.btn-primary:hover:not(:disabled) {
  background: var(--color-org-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px var(--color-org-accent-hover), 0 8px 20px -4px rgba(15,15,12,.18);
}
.btn-primary:active:not(:disabled) { transform: translateY(0); }

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: var(--ring-2);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--color-surface-2);
  box-shadow: var(--ring-3);
  transform: translateY(-1px);
}

.btn-success { background: var(--color-success); color: var(--color-text-on-accent); box-shadow: 0 0 0 1px var(--color-success), 0 4px 12px -3px rgba(22,163,74,.25); }
.btn-success:hover:not(:disabled) { background: var(--color-success-hover); }
.btn-danger  { background: var(--color-danger);  color: var(--color-text-on-accent); box-shadow: 0 0 0 1px var(--color-danger), 0 4px 12px -3px rgba(220,38,38,.25); }
.btn-danger:hover:not(:disabled) { background: var(--color-danger-hover); }

.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--fz-sm); padding: 8px 14px; min-height: 36px;
  box-shadow: var(--ring-1);
}
.btn-ghost:hover:not(:disabled) {
  color: var(--color-text-primary);
  background: var(--color-surface-2);
}

.btn-lg { font-size: var(--fz-lg); padding: 16px 28px; min-height: 56px; border-radius: var(--radius-lg); }

/* ── CARDS ─────────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--ring-2);
  transition: box-shadow var(--duration-normal) var(--ease-premium),
              transform var(--duration-normal) var(--ease-premium);
}

.card-premium {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--ring-2);
  transition: box-shadow var(--duration-normal) var(--ease-premium),
              transform var(--duration-normal) var(--ease-premium);
  position: relative; overflow: hidden;
}
.card-premium:hover {
  transform: translateY(-3px);
  box-shadow: var(--ring-hover);
}
.card-premium::after {
  content: '';
  position: absolute; bottom: 0; left: 0;
  height: 3px; width: 0;
  background: var(--color-org-accent);
  transition: width var(--duration-normal) var(--ease-premium);
}
.card-premium:hover::after { width: 100%; }

/* ── FORM ──────────────────────────────────────────────────── */
.form-group { margin-bottom: 18px; }

.form-label {
  display: block;
  font-size: var(--fz-xs); font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--fz-md);
  outline: none;
  box-shadow: var(--ring-2);
  transition: box-shadow var(--duration-fast) var(--ease-premium);
  min-height: var(--min-touch);
}
.form-textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  box-shadow: 0 0 0 2px var(--color-org-accent), var(--focus-ring);
}
.form-input::placeholder, .form-textarea::placeholder {
  color: var(--color-text-muted);
}

/* ── BADGES ────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: 4px 11px; border-radius: 999px;
  font-size: var(--fz-xs); font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.badge-pending  { background: var(--color-status-pending-bg);  color: var(--color-status-pending);  box-shadow: inset 0 0 0 1px var(--color-warning-border); }
.badge-approved { background: var(--color-status-approved-bg); color: var(--color-status-approved); box-shadow: inset 0 0 0 1px var(--color-success-border); }
.badge-rejected { background: var(--color-status-rejected-bg); color: var(--color-status-rejected); box-shadow: inset 0 0 0 1px var(--color-danger-border); }
.badge-neutral  { background: var(--color-status-neutral-bg);  color: var(--color-status-neutral);  box-shadow: inset 0 0 0 1px var(--color-border); }

/* ── ALERTS ────────────────────────────────────────────────── */
.alert {
  border-radius: var(--radius-lg); padding: 16px 18px;
  font-size: var(--fz-base); line-height: 1.55;
  box-shadow: var(--ring-1);
}
.alert-success { background: var(--color-success-bg); color: var(--color-success); box-shadow: inset 0 0 0 1px var(--color-success-border); }
.alert-danger  { background: var(--color-danger-bg);  color: var(--color-danger);  box-shadow: inset 0 0 0 1px var(--color-danger-border); }
.alert-warning { background: var(--color-warning-bg); color: var(--color-warning); box-shadow: inset 0 0 0 1px var(--color-warning-border); }

/* ── TABS ──────────────────────────────────────────────────── */
.tabs-bar {
  display: flex; gap: 4px;
  background: var(--color-surface);
  border-radius: var(--radius-lg); padding: 5px;
  overflow-x: auto;
  box-shadow: var(--ring-2);
  scrollbar-width: none;
}
.tabs-bar::-webkit-scrollbar { display: none; }
.tab-btn {
  flex: 0 0 auto; padding: 10px 16px;
  border-radius: var(--radius-md); border: none; cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600; font-size: var(--fz-sm); white-space: nowrap;
  background: transparent; color: var(--color-text-secondary);
  transition: color var(--duration-fast) var(--ease-premium),
              background var(--duration-fast) var(--ease-premium),
              box-shadow var(--duration-fast) var(--ease-premium);
  min-height: 42px;
  letter-spacing: -0.005em;
}
.tab-btn:hover { color: var(--color-text-primary); background: var(--color-surface-2); }
.tab-btn.active {
  background: var(--color-org-accent);
  color: var(--color-text-on-accent);
  box-shadow: 0 2px 8px -2px rgba(15,15,12,.18);
}

/* ── SECTION TITLE ─────────────────────────────────────────── */
.section-title {
  font-family: var(--font-display);
  font-size: var(--fz-xl); font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
  margin-bottom: 14px;
}

.divider {
  border: none;
  border-top: 1px solid var(--color-border-subtle);
  margin: 16px 0;
}

/* ── MONO ──────────────────────────────────────────────────── */
.mono {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', 'Fira Code', monospace;
  font-size: var(--fz-sm);
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  color: var(--color-text-primary);
  word-break: break-all;
  box-shadow: var(--ring-1);
}

/* ── LEGACY ALIASES ────────────────────────────────────────── */
.input-premium { /* старые компоненты */
  background: var(--color-surface);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  box-shadow: var(--ring-2);
  transition: box-shadow var(--duration-fast) var(--ease-premium);
  padding: 14px 16px;
}
.input-premium:focus { box-shadow: 0 0 0 2px var(--color-org-accent), var(--focus-ring); outline: none; }

.nav-capsule-active {
  background: var(--color-org-accent-light);
  color: var(--color-org-accent);
  font-weight: 600;
}
.dark .nav-capsule-active {
  background: rgba(26,166,101,.15);
  color: var(--color-primary);
}

/* ── MOBILE ────────────────────────────────────────────────── */
.sticky-action-footer {
  position: fixed; bottom: 0; left: 0; right: 0;
  padding-bottom: var(--safe-area-bottom); z-index: 50;
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--color-border-subtle);
}

.bottom-sheet-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  backdrop-filter: blur(6px); z-index: 60;
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.bottom-sheet-backdrop.open { opacity: 1; pointer-events: auto; }

.bottom-sheet {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--color-surface);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; padding: 24px;
  padding-bottom: calc(24px + var(--safe-area-bottom)); z-index: 70;
  transform: translateY(100%); transition: transform .35s var(--ease-premium);
  box-shadow: 0 -16px 48px -8px rgba(0,0,0,.18);
}
.bottom-sheet.open { transform: translateY(0); }

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

.glass {
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* ── ANIMATIONS ────────────────────────────────────────────── */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse-soft {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: .85; transform: scale(.985); }
}
.animate-fade-in-up { animation: fade-in-up .35s var(--ease-premium) forwards; }
.animate-pulse-soft { animation: pulse-soft 3s ease-in-out infinite; }

.font-body  { font-family: var(--font-body); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   LEGACY SKIN — глобальные правила для chairman/team/crm
   Низкая специфика (теги) — не ломают свои классы, но придают
   платформенный вид нестилизованным элементам.
   ═══════════════════════════════════════════════════════════════ */

/* Body шрифт для всех фронтов */
body, html {
  font-family: var(--font-body) !important;
}

/* Заголовки везде на display-шрифт */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* Кнопки (нестилизованные) — мин-таргет 44px, radius платформы */
button:not([class*="bg-"]):not([class*="btn-"]):not([class]) {
  min-height: 44px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
}

/* Inputs/textareas — общий стиль */
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([class*="form-"]):not([class*="border-"]),
textarea:not([class*="form-"]):not([class*="border-"]),
select:not([class*="form-"]):not([class*="border-"]) {
  font-family: var(--font-body);
  font-size: var(--fz-base);
  min-height: 44px;
  border-radius: var(--radius-md);
}
input:focus, textarea:focus, select:focus {
  outline: none;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  box-shadow: 0 0 0 2px var(--color-primary), 0 0 0 5px rgba(19,117,71,.18);
}

/* Линки */
a { color: inherit; }

/* Скроллбары */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* Selection */
::selection {
  background: rgba(19,117,71,.18);
  color: var(--color-text-primary);
}


/* Tabs-bar: визуальный fade с правого края если есть скролл */
.tabs-bar {
  position: relative;
  -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, black 90%, transparent 100%);
}
@media (min-width: 720px) {
  .tabs-bar { -webkit-mask-image: none; mask-image: none; }
}

/* ── A11y: тач-таргеты в навигации ────────────────────────── */
header button, header a[href], nav button, nav a[href] {
  min-height: 40px;
}
@media (max-width: 768px) {
  header button, header a[href], nav button, nav a[href] {
    min-height: 44px;
  }
}
/* Чтобы маленькие language toggle / nav links не были меньше 44px */
header button[class*="text-xs"],
header button[class*="text-sm"][class*="text-slate"] {
  min-height: 40px;
  min-width: 44px;
  padding: 8px 14px;
}