:root {
  color-scheme: dark;
  font-family: Inter, system-ui, -apple-system, sans-serif;

  --tbl-bg:        rgb(2, 6, 23);
  --tbl-bg-head:   rgb(15, 23, 42);
}

/* ── Critical: hidden before Tailwind loads ─────────────────────── */
.hidden { display: none !important; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.overflow-hidden { overflow: hidden; }
.w-full { width: 100%; }
.h-full { height: 100%; }

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* ── Modal overlay ──────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }

.modal-panel {
  transform: translateY(16px) scale(0.97);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-overlay.open .modal-panel { transform: translateY(0) scale(1); }

.modal-overlay .modal-panel { max-height: 92vh; }

/* ── Card / modal body scroll ───────────────────────────────────── */
.catalog-panel > .flex-1.overflow-auto,
.catalog-panel > .flex-1.overflow-y-auto { min-height: 0; }
.modal-panel.flex.flex-col > .flex-1 { min-height: 0; overflow-y: auto; }

/* ── Toast ──────────────────────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 6rem;          /* выше плавающей AI-кнопки (правый-нижний угол) */
  right: 1.5rem;
  z-index: 10090;        /* поверх всего, включая AI-панель */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  animation: toast-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.toast.out { animation: toast-out 0.25s ease forwards; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-8px) scale(0.95); }
}

/* ── Drop zone ──────────────────────────────────────────────────── */
.drop-zone {
  border: 2px dashed rgba(100, 116, 139, 0.4);
  transition: border-color 0.2s, background 0.2s;
}
.drop-zone.drag-over {
  border-color: rgb(34, 211, 238);
  background: rgba(34, 211, 238, 0.05);
}

/* ── Scrollbar ──────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,0.35); }

/* ── Color swatch ───────────────────────────────────────────────── */
.color-swatch {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
  flex-shrink: 0;
}

/* ── Focus ring ─────────────────────────────────────────────────── */
button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid rgb(34, 211, 238);
  outline-offset: 2px;
}

/* ── Line clamp ─────────────────────────────────────────────────── */
.line-clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Main action button ─────────────────────────────────────────── */
.main-action-btn:hover { box-shadow: 0 0 24px rgba(34, 211, 238, 0.2); }

/* ── Menu tiles ─────────────────────────────────────────────────── */
.menu-tile { position: relative; min-height: 120px; }
.menu-tile:hover {
  box-shadow: 0 0 0 1px rgba(34,211,238,0.15), 0 4px 24px rgba(0,0,0,0.3);
}
@keyframes soon-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
.menu-tile .soon-badge { animation: soon-pulse 2.5s ease-in-out infinite; }

/* ── Table row hover ────────────────────────────────────────────── */
table tbody tr { transition: background 0.15s ease; }

/* ── Touch-friendly action buttons ─────────────────────────────── */
@media (hover: none), (max-width: 640px) {
  table tbody tr .flex { opacity: 1 !important; }
}

/* ── Resizable column handles ───────────────────────────────────── */
.col-resize-handle { touch-action: none; }
body.col-resizing * {
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   SCROLL-КОНТЕЙНЕРЫ ДЛЯ ТАБЛИЦ
   ══════════════════════════════════════════════════════════════════
   Каждый контейнер таблицы должен иметь overflow:auto по обеим осям
   и ограниченную высоту — тогда sticky thead/tfoot работают корректно.
   Все sticky-ячейки получают непрозрачный фон через JS (frozen-table.js)
   или через CSS-правила ниже.
*/

/* Универсальный класс для обёртки таблицы */
.tbl-scroll {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 62vh;
  border-radius: 0.75rem;
  border: 1px solid rgba(255,255,255,0.1);
  scrollbar-gutter: stable;
}

/* ── Контейнеры конкретных таблиц ──────────────────────────────── */

/* Каталог */
#catalogTableWrap > div {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 62vh;
  scrollbar-gutter: stable;
}

/* Контракты — таблица позиций */
#contractItemsWrap > div {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 55vh;
  scrollbar-gutter: stable;
}

/* Заявки — таблица позиций */
#orderItemsWrap > div {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 55vh;
  scrollbar-gutter: stable;
}

/* Склад */
#warehouseStockWrap > div.overflow-x-auto,
#whItemsSection > div.overflow-x-auto {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 60vh;
  scrollbar-gutter: stable;
}

/* Таблица отгрузки (разнарядка) */
#shipmentTableWrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 62vh;
  scrollbar-gutter: stable;
}

#shipmentTableWrap table thead th {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgb(15, 23, 42);
}

#shipmentTableWrap table tbody tr {
  background: rgb(2, 6, 23);
}

/* Матрица потребностей */
#needsMatrixWrap > div {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 62vh;
  scrollbar-gutter: stable;
}

/* Таблица потребностей в карточке получателя */
#needsTableWrap {
  overflow-x: scroll !important;
  overflow-y: auto;
  max-height: 55vh;
  scrollbar-gutter: stable;
  /* Всегда показывать горизонтальный скроллбар */
  scrollbar-width: auto;
}
/* Webkit: принудительно показываем горизонтальный скроллбар */
#needsTableWrap::-webkit-scrollbar {
  width: 6px;
  height: 8px;  /* чуть толще для горизонтального */
}
#needsTableWrap::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 4px; }
#needsTableWrap::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.3); border-radius: 4px; }
#needsTableWrap::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,0.5); }
#needsTableWrap::-webkit-scrollbar-corner { background: transparent; }

/* ── Sticky thead — работает только внутри overflow-контейнера ─── */
/*
   ВАЖНО: background на th должен быть непрозрачным.
   Tailwind-класс bg-slate-900 = rgb(15,23,42) — используем его.
   Также задаём через inline-style в frozen-table.js для динамических таблиц.
*/

#catalogTableWrap table thead th,
#contractItemsWrap table thead th,
#orderItemsWrap table thead th,
#warehouseStockWrap table thead th,
#needsMatrixWrap table thead th,
#needsTableWrap table thead th,
#needsTableWrap thead th,
#whItemsSection table thead th,
.tbl-scroll table thead th,
.sticky-thead thead th {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgb(15, 23, 42);   /* slate-900 — непрозрачный! */
}

/* ── Sticky tfoot (итоги) ───────────────────────────────────────── */
#contractItemsWrap table tfoot td,
#orderItemsWrap table tfoot td,
.tbl-scroll table tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 15;
  background: rgb(15, 23, 42);
}

/* ── Фон строк tbody — нужен чтобы sticky-ячейки не просвечивали ─ */
#catalogTableWrap table tbody tr,
#contractItemsWrap table tbody tr,
#orderItemsWrap table tbody tr,
#warehouseStockWrap table tbody tr,
#needsMatrixWrap table tbody tr,
#needsTableWrap table tbody tr,
#needsTableWrap tbody tr,
.tbl-scroll table tbody tr {
  background: var(--tbl-bg);
}

/* ── Resizable table (таблицы позиций контракта, .items-sec-table) ── */
/* overflow:visible на th нужен для resize-handle; таблиц теперь несколько
   (секции по проектам/финансированиям, ТЗ 2026-07-08) */
#itemsTable thead th, .items-sec-table thead th { overflow: visible !important; }
#itemsTable td, .items-sec-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#itemsTable td.name-cell, .items-sec-table td.name-cell { overflow: visible !important; }

/* ── Подсказка о правом клике ───────────────────────────────────── */
/* Показываем tooltip при наведении на th таблиц с frozen-manager */
[data-frozen-key] thead th:first-child::after {
  content: '';
}
[data-frozen-key] thead th {
  cursor: context-menu;
}