/**
 * ЕИСЖС Design System — Components
 * Зависит от: tokens.css, fonts.css
 * Источник: Figma dUmj0n0LAZ8SUfM3sY2Eub, eiszs-ds.md
 */

/* ── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-family);
  font-size: var(--text-p2);
  line-height: var(--lh-p2);
  color: var(--color-g1);
  background: var(--color-page-bg);
  min-height: 100vh;
}

/* ── TYPOGRAPHY ─────────────────────────────────────────────── */
.h1 { font-size: var(--text-h1); font-weight: 700; line-height: var(--lh-h1); }
.h2 { font-size: var(--text-h2); font-weight: 700; line-height: var(--lh-h2); }
.h3 { font-size: var(--text-h3); font-weight: 700; line-height: var(--lh-h3); }
.h4 { font-size: var(--text-h4); font-weight: 700; line-height: var(--lh-h4); }
.h5 { font-size: var(--text-h5); font-weight: 700; line-height: var(--lh-h5); }

.p1        { font-size: var(--text-p1); font-weight: 400; line-height: var(--lh-p1); }
.p1-bold   { font-size: var(--text-p1); font-weight: 700; line-height: var(--lh-p1); }
.p2        { font-size: var(--text-p2); font-weight: 400; line-height: var(--lh-p2); }
.p2-bold   { font-size: var(--text-p2); font-weight: 700; line-height: var(--lh-p2); }
.p2c       { font-size: var(--text-p2c); font-weight: 400; line-height: var(--lh-p2c); }
.caption   { font-size: var(--text-caption); font-weight: 500; line-height: var(--lh-caption); }

.text-secondary { color: var(--color-m1); }
.text-muted     { color: var(--color-g2); }

/* ── LINK ───────────────────────────────────────────────────── */
/* Figma node 14739:19414 — Default #78B02F, Hover #072833 */
.link {
  color: var(--color-green-hover);   /* #78B02F */
  text-decoration: underline;
  cursor: pointer;
  transition: color var(--transition-fast);
}
.link:hover { color: var(--color-g1); }  /* #072833 */

/* ── DIVIDER ────────────────────────────────────────────────── */
.divider { height: 1px; background: var(--color-m4); width: 100%; flex-shrink: 0; }

/* ── BUTTONS ────────────────────────────────────────────────── */

/* Общие для всех кнопок с текстом */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-family);
  font-size: var(--text-btn);
  font-weight: 700;
  line-height: var(--lh-btn);
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: var(--radius-xs);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}

/* Primary */
.btn.btn-primary {
  background: var(--color-green-main);
  color: var(--color-white);
  border-color: var(--color-green-main);
  transition: background var(--transition-fast);
}
.btn.btn-primary:hover { background: var(--color-green-hover); border-color: var(--color-green-hover); }
.btn.btn-primary:disabled { background: var(--color-m4); color: var(--color-m2); border-color: var(--color-m4); cursor: not-allowed; }

/* Secondary */
.btn.btn-secondary {
  background: transparent;
  color: var(--color-g1);
  border-color: var(--color-m1);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.btn.btn-secondary:hover { background: var(--color-m1); border-color: var(--color-m1); color: var(--color-white); }
.btn.btn-secondary:hover svg { color: var(--color-white); }
.btn.btn-secondary:disabled { border-color: var(--color-m4); color: var(--color-m2); cursor: not-allowed; }

/* Destructive */
.btn.btn-destructive {
  background: transparent;
  color: var(--color-red);
  border-color: var(--color-red);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.btn.btn-destructive:hover { background: var(--color-red); color: var(--color-white); }

/* Text */
.btn-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: none;
  color: var(--color-g1);
  padding: 0;
  font-family: var(--font-family);
  font-size: var(--text-btn);
  font-weight: 700;
  line-height: var(--lh-btn);
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--transition-fast);
}
.btn-text:hover { color: var(--color-green-main); }
.btn-text:hover svg { color: var(--color-green-main); }
.btn-text:disabled { color: var(--color-m2); cursor: not-allowed; }

/* Icon button (40×40) */
.btn-icon {
  width: 40px;
  height: 40px;
  padding: var(--space-2);
  background: none;
  border: none;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
}
.btn-icon svg {
  color: var(--color-m1);
  display: block;
}
.btn-icon svg path,
.btn-icon svg circle {
  transition: fill var(--transition-normal);
}
.btn-icon:hover svg { color: var(--color-green-hover); }

/* ── BADGE / COUNTER ────────────────────────────────────────── */
.badge {
  position: absolute;
  top: 0;
  left: 23px;
  width: 17px;
  height: 17px;
  background: var(--color-red);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-size: 10px;
  font-weight: 500;
  color: var(--color-white);
  line-height: 1;
  pointer-events: none;
}

/* ── STATUS BADGE ───────────────────────────────────────────── */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: rgba(155, 169, 173, 0.15);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1);
}
.status-badge-text {
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--color-g1);
  opacity: 0.6;
  line-height: var(--lh-p2c);
  white-space: nowrap;
}

/* ── FIELD (01. Text Field) ─────────────────────────────────── */
/*
 * Структура:
 *   <div class="field">
 *     <label class="field__label">…</label>
 *     <input class="field__input" />          ← или .field__wrap > input для кнопки внутри
 *     <span class="field__caption">…</span>   ← опционально, для ошибки/подсказки
 *   </div>
 *
 * Модификаторы:
 *   .field--error  → красная рамка + красный caption
 */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);   /* 4px между label и input */
}

.field__label {
  font-size: var(--text-p2);       /* 14px */
  font-weight: 400;
  line-height: var(--lh-p2c);     /* 16px compact */
  color: var(--color-m1);          /* #7C8C90 */
}

.field__input {
  width: 100%;
  height: 40px;
  padding: 12px var(--space-3);    /* 12px vertical, 16px horizontal */
  background: var(--color-white);
  border: 1px solid var(--color-m2);   /* #C9D0D2 */
  border-radius: var(--radius-xs);     /* 1px */
  font-family: var(--font-family);
  font-size: var(--text-p2);           /* 14px */
  font-weight: 400;
  line-height: var(--lh-p2c);         /* 16px */
  color: var(--color-g1);
  outline: none;
  transition: border-color var(--transition-fast);
}
.field__input::placeholder {
  color: var(--color-m1);
}
.field__input:hover:not(:disabled) {
  border-color: var(--color-g1);       /* усилена → #072833 */
}
.field__input:focus:not(:disabled) {
  border-color: var(--color-green-main);  /* #8BC540 — Active/Focus */
}
.field__input:disabled {
  background: var(--color-m4);         /* #E4E7E8 — нет border */
  border-color: transparent;
  color: var(--color-m1);
  cursor: not-allowed;
}

/* Error state */
.field--error .field__input {
  border-color: var(--color-red);
}

/* Caption под полем (gap от input задаётся через .field gap) */
.field__caption {
  font-size: var(--text-caption);  /* 12px */
  font-weight: 500;                /* Medium */
  line-height: var(--lh-caption);  /* 16px */
  color: var(--color-m1);
}
.field--error .field__caption {
  color: var(--color-red);
}

/* Обёртка для поля с иконкой внутри (напр. показ пароля) */
.field__wrap {
  position: relative;
}
.field__wrap .field__input {
  padding-right: 40px;
}
.field__wrap-btn {
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-m1);
  transition: color var(--transition-fast);
}
.field__wrap-btn:hover { color: var(--color-g2); }

/* ── CARD ───────────────────────────────────────────────────── */
.card {
  background: var(--color-white);
  padding: var(--space-5);
}

/* ── HEADER ─────────────────────────────────────────────────── */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-m4);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-inner {
  width: var(--layout-width);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--layout-margin-right) 0 var(--layout-margin);
}
.header-left { display: flex; align-items: center; gap: var(--space-8); }
.header-icons { display: flex; align-items: center; gap: var(--space-2); height: var(--header-height); }

/* ── LOGO BLOCK ─────────────────────────────────────────────── */
.logo-block { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.logo-name {
  font-size: var(--text-p2c);
  font-weight: 400;
  line-height: 18px;
  color: var(--color-g1);
  white-space: nowrap;
}

/* ── TABS ───────────────────────────────────────────────────── */
.tabs { display: flex; gap: var(--space-5); height: var(--header-height); align-items: stretch; }

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  white-space: nowrap;
}
.tab-label {
  font-size: var(--text-p2c);
  line-height: var(--lh-p2c);
  color: var(--color-g1);
  padding: 2px 0;
  font-weight: 400;
}
.tab-label--active { font-weight: 700; }
.tab-underline {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-green-main);
}
/* Hover — серая черта (только у неактивных) */
.tab:not(.tab--active):hover::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-m2);
}

/* ── PAGE LAYOUT ────────────────────────────────────────────── */
.page-wrap {
  width: var(--layout-width);
  margin: 0 auto;
  position: relative;
}
.page-content {
  padding-top: calc(var(--header-height) + 54px);
  padding-left: var(--layout-margin);
  padding-bottom: var(--space-7);
  display: flex;
  gap: var(--layout-gap);
  align-items: flex-start;
}

/* ── TABLE ──────────────────────────────────────────────────── */
.table-wrap { display: flex; flex-direction: column; gap: var(--space-2); }

.table-header { position: relative; height: 16px; }
.th-cell { position: absolute; display: flex; align-items: center; gap: var(--space-2); top: 0; }
.th-text {
  font-size: var(--text-p2c);
  font-weight: 400;
  line-height: var(--lh-p2c);
  color: var(--color-m1);
  white-space: nowrap;
}

.table-rows { display: flex; flex-direction: column; }
.tr {
  background: var(--color-white);
  height: 50px;
  position: relative;
  display: flex;
  align-items: center;
  transition: background var(--transition-fast);
}
.tr + .tr { border-top: 1px solid var(--color-m4); }
.tr:hover { background: var(--color-m6); }

.td {
  position: absolute;
  font-size: var(--text-p2c);
  font-weight: 400;
  line-height: var(--lh-p2c);
  color: var(--color-g1);
  white-space: nowrap;
}

/* ── COLLAPSE PANEL ─────────────────────────────────────────── */
.collapse-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: var(--space-3) 0;
}
.collapse-header:hover { color: var(--color-green-hover); }

/* ── TABLE GRID (реестровый вариант, 64px строки) ───────────── */
/*
 * Структура:
 *   <div class="tg-wrap">
 *     <div class="tg-controls">…заголовки колонок…</div>
 *     <div class="tg-rows">
 *       <div class="tg-row">
 *         <div class="tg-cell tg-cell--status-bar"><div class="tg-bar tg-bar--yellow"></div></div>
 *         <div class="tg-cell" style="width:Xpx">…</div>
 *       </div>
 *     </div>
 *   </div>
 */
.tg-wrap  { display: flex; flex-direction: column; }
.tg-rows  { display: flex; flex-direction: column; gap: 4px; }

.tg-row {
  background: var(--color-white);
  display: flex;
  align-items: stretch;
  min-height: 64px;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.tg-row:hover { background: var(--color-m6); }

/* Ячейка */
.tg-cell {
  display: flex;
  align-items: center;
  padding: var(--space-2) 12px;
  font-size: var(--text-p2c);
  font-weight: 400;
  line-height: var(--lh-p2c);
  color: var(--color-g1);
  flex-shrink: 0;
}
.tg-cell--pad-first { padding-left: 16px; }
.tg-cell--grow { flex: 1 0 0; }

/* Цветная полоска слева */
.tg-cell--bar { width: 4px; padding: 0; }
.tg-bar--yellow { background: var(--color-yellow); width: 4px; align-self: stretch; }

/* Двухстрочный текст в ячейке */
.tg-cell-sub { display: flex; flex-direction: column; gap: 0; }
.tg-cell-sub .tg-main  { font-size: var(--text-p2c); line-height: var(--lh-p2c); color: var(--color-g1); }
.tg-cell-sub .tg-sub   { font-size: var(--text-caption); line-height: var(--lh-caption); color: var(--color-m1); }

/* Статус в последней колонке */
.tg-status { display: flex; align-items: center; gap: var(--space-2); }
.tg-status-text { font-size: var(--text-caption); font-weight: 500; line-height: var(--lh-caption); color: var(--color-m1); white-space: nowrap; }

/* Заголовки колонок */
.tg-controls {
  display: flex;
  align-items: flex-start;
  padding: 0 0 16px 20px;
  gap: 12px;
}
.tg-th {
  font-size: var(--text-p2c);
  font-weight: 400;
  line-height: var(--lh-p2c);
  color: var(--color-m1);
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
}
.tg-th--sort { color: var(--color-green-main); }

/* ── PAGINATION ──────────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
}
.pagination-counter {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-p2);
  line-height: var(--lh-p2);
  white-space: nowrap;
}
.pagination-counter__label { color: var(--color-m1); font-weight: 400; }
.pagination-counter__val   { color: var(--color-g2); font-weight: 700; }
.pagination-counter__val--active { opacity: 1; }
.pagination-counter__val--dim    { opacity: 0.2; }

.pagination-nav { display: flex; align-items: center; gap: var(--space-5); }
.pagination-nav-group { display: flex; align-items: center; gap: var(--space-2); }
.pagination-btn {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--color-m1);
  transition: color var(--transition-fast);
}
.pagination-btn:hover { color: var(--color-green-main); }
.pagination-btn:disabled { color: var(--color-m4); cursor: not-allowed; }

.pagination-page-input {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: var(--text-p2); line-height: var(--lh-p2);
  color: var(--color-m1);
}
.pagination-page-input__field {
  width: 64px; height: 40px;
  border: 1px solid var(--color-m2);
  background: var(--color-white);
  text-align: center;
  font-family: var(--font-family);
  font-size: var(--text-p2c);
  color: var(--color-g2);
  outline: none;
}

.pagination-info { color: var(--color-m1); font-size: var(--text-p2); white-space: nowrap; }

/* ── TOOLTIP ────────────────────────────────────────────────── */
.tooltip {
  background: var(--color-white);
  padding: var(--space-3);
  box-shadow: var(--shadow-2);
  font-size: var(--text-p2);
  line-height: var(--lh-p2);
  color: var(--color-g2);
  max-width: 356px;
}

/* Inline tooltip trigger + popup (hover) */
.tooltip-wrap { position: relative; display: inline-flex; }
.tooltip-box {
  display: none;
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-white);
  box-shadow: var(--shadow-2);
  padding: var(--space-3);
  z-index: 300;
  width: 220px;
  font-family: var(--font-family);
  font-size: var(--text-p2);
  line-height: var(--lh-p2);
  color: var(--color-g2);
  white-space: normal;
  pointer-events: none;
}
.tooltip-box::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--color-white);
}
.tooltip-wrap:hover .tooltip-box { display: block; }

/* ── CHECKBOX ───────────────────────────────────────────────── */
/*
 * Источник: eisgs-lib Checkbox (EISGS theme)
 * Box: 20×20px, border-radius 2px, border 1px M2
 * Checked: background greenMain, border transparent
 * Icon: DoneIcon size=13 color=white (имитируется через ::after)
 * Wrapper: display flex, gap 16px (margin-right на Box)
 * Источник бандла: W.Box, W.Wrapper, W.Checkbox
 */
.checkbox-wrap {
  display: flex;
  align-items: flex-start;
  gap: 0;
  cursor: pointer;
  font-family: var(--font-family);
  font-size: var(--text-p2);
  line-height: var(--lh-p2c);
  color: var(--color-g1);
}
.checkbox-wrap:hover .checkbox-box { border-color: var(--color-green-main); }
.checkbox-box {
  width: 20px; height: 20px;
  min-width: 20px; min-height: 20px;
  margin-right: 16px;
  border: 1px solid var(--color-m2);
  border-radius: 2px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-white);
  transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.checkbox-box--checked {
  background: var(--color-green-main);
  border-color: transparent;
}
/* Внутрь .checkbox-box--checked вставлять DoneIcon SVG через JS:
   <svg width="13" height="9" viewBox="0 0 18 13" fill="white">
     <path d="M6.802 12.428a.997.997 0 01-1.328-.075L.292 7.156..."/>
   </svg>
*/
.checkbox-box--disabled {
  background: var(--color-m4);
  border-color: var(--color-m4);
  cursor: not-allowed;
}
.checkbox-box--disabled.checkbox-box--checked {
  background: var(--color-m1);
}

/* ── MODAL ──────────────────────────────────────────────────── */
/*
 * Источник: Figma node 52147:104580
 * Overlay: fixed, rgba(G1, 0.5), z-index 200
 * Modal: white, 500px, padding 32px, shadow-3, gap 32px между секциями
 */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 40, 51, 0.5);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
}
.modal-overlay.modal--open { display: flex; }

.modal {
  background: var(--color-white);
  width: 500px;
  padding: var(--space-5);
  box-shadow: var(--shadow-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: relative;
}
.modal__head { position: relative; padding-right: 32px; }
.modal__title {
  font-family: var(--font-family);
  font-size: var(--text-p1);
  font-weight: 700;
  line-height: var(--lh-p1);
  color: var(--color-g1);
}
.modal__close {
  position: absolute; top: 0; right: 0;
  background: none; border: none; cursor: pointer;
  color: var(--color-m1);
  display: flex; align-items: center; padding: 0;
}
.modal__close:hover { color: var(--color-g1); }
.modal__actions { display: flex; align-items: center; gap: var(--space-3); }

/* Modal field */
.modal-field { display: flex; flex-direction: column; gap: var(--space-2); }
.modal-field__label-row { display: flex; align-items: center; gap: 4px; }
.modal-field__label {
  font-family: var(--font-family);
  font-size: var(--text-p2);
  line-height: var(--lh-p2c);
  color: var(--color-m1);
}
.modal-field__input {
  display: flex; align-items: center; gap: var(--space-2);
  border: 1px solid var(--color-m2);
  border-radius: var(--radius-xs);
  background: var(--color-white);
  padding: 12px var(--space-3);
  cursor: pointer;
  transition: border-color 0.2s ease-in-out;
}
.modal-field__input:hover,
.modal-field__input:focus-within { border-color: var(--color-green-main); }
.modal-field__input-text {
  flex: 1;
  font-family: var(--font-family);
  font-size: var(--text-p2);
  line-height: var(--lh-p2c);
  color: var(--color-g1);
  border: none; outline: none; background: transparent;
}
.modal-field__input svg { flex-shrink: 0; color: var(--color-m1); }
.modal-field__clear {
  background: none; border: none; cursor: pointer;
  color: var(--color-m1); display: flex; align-items: center; padding: 0; flex-shrink: 0;
}
.modal-field__clear:hover { color: var(--color-g1); }

/* ── MULTISELECT (DropdownMultiple) ─────────────────────────── */
/*
 * Источник: eisgs-lib DropdownMultiple (EISGS/IGS theme)
 * Option padding (IGS): 12px 20px 12px 12px
 * Checkbox: 20×20px (см. .checkbox-box)
 * "Выбрать все" — первый пункт, отделён от остальных divider (2px solid G3)
 * Trigger: modal-field__input с ×-кнопкой и chevron
 */
.multiselect { position: relative; }
.multiselect__trigger {
  display: flex; align-items: center; gap: var(--space-2);
  border: 1px solid var(--color-m2);
  border-radius: var(--radius-xs);
  background: var(--color-white);
  padding: 12px var(--space-3);
  cursor: pointer;
  transition: border-color 0.2s ease-in-out;
  font-family: var(--font-family);
  font-size: var(--text-p2);
  line-height: var(--lh-p2c);
  color: var(--color-g1);
}
.multiselect__trigger:hover { border-color: var(--color-green-main); }
.multiselect__dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0; right: 0;
  background: var(--color-white);
  box-shadow: var(--shadow-2);
  z-index: 10;
  display: none;
  max-height: 320px;
  overflow-y: auto;
}
.multiselect__dropdown.open { display: block; }
.multiselect__option {
  display: flex; align-items: center;
  padding: 12px 20px 12px 12px;
  font-family: var(--font-family);
  font-size: var(--text-p2);
  line-height: var(--lh-p2c);
  color: var(--color-g1);
  cursor: pointer;
}
.multiselect__option:hover { background: var(--color-m6); }
.multiselect__divider {
  height: 2px;
  background: var(--color-g3, #BABCD1);
  margin: 0 12px;
}