/* tamgo-ui v1: общие цвета, размеры и элементы для всех микросервисов tamgo.
   Обычный CSS, без сборки: работает и рядом с Tailwind, и без него.
   Классы с приставкой t-, чтобы не пересекаться с Tailwind и стилями сервисов.
   Цвета сняты с Информера (slate + blue-600), чтобы привычный вид не менялся. */

:root {
  /* основной (действие) */
  --t-primary: #2563eb;        /* blue-600 */
  --t-primary-hover: #1d4ed8;  /* blue-700 */
  --t-primary-soft: #eff6ff;   /* blue-50 */
  --t-focus: #3b82f6;          /* blue-500 */
  /* смысловые */
  --t-danger: #dc2626;  --t-danger-hover: #b91c1c;  --t-danger-soft: #fef2f2;  --t-danger-line: #fecaca;
  --t-ok: #047857;      --t-ok-soft: #ecfdf5;       --t-ok-line: #a7f3d0;
  --t-warn: #92400e;    --t-warn-soft: #fffbeb;     --t-warn-line: #fde68a;
  --t-info: #1d4ed8;    --t-info-soft: #eff6ff;     --t-info-line: #bfdbfe;
  /* нейтральные (slate) */
  --t-text: #1e293b;           /* 800 */
  --t-text-2: #475569;         /* 600 */
  --t-muted: #64748b;          /* 500 */
  --t-faint: #94a3b8;          /* 400 */
  --t-line: #cbd5e1;           /* 300: рамки полей */
  --t-line-soft: #e2e8f0;      /* 200: разделители */
  --t-bg: #f8fafc;             /* 50: фон страницы */
  --t-bg-2: #f1f5f9;           /* 100: фон шапки таблицы, наведение */
  --t-surface: #ffffff;
  --t-header: #0f172a;         /* 900: шапка сайта */
  /* перетаскивание файлов: цвет подсветки как в РД (permits) */
  --t-drop: #1f5fa8;
  --t-drop-soft: rgba(31, 95, 168, .14);
  /* размеры */
  --t-radius: 8px;
  --t-radius-sm: 4px;
  --t-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --t-text-sm: 14px;
  --t-text-xs: 12px;
  --t-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .06);
  --t-shadow-lg: 0 10px 25px rgba(15, 23, 42, .18);
}

/* ---------- кнопки ---------- */
.t-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: 500 var(--t-text-sm)/1.25 var(--t-font);
  padding: 8px 14px; border-radius: var(--t-radius); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .12s, border-color .12s, color .12s;
}
.t-btn:focus-visible { outline: 2px solid var(--t-focus); outline-offset: 2px; }
.t-btn:disabled, .t-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.t-btn-primary   { background: var(--t-primary); color: #fff; }
.t-btn-primary:hover:not(:disabled)   { background: var(--t-primary-hover); }
.t-btn-secondary { background: var(--t-surface); color: var(--t-text); border-color: var(--t-line); }
.t-btn-secondary:hover:not(:disabled) { background: var(--t-bg-2); }
.t-btn-danger    { background: var(--t-danger); color: #fff; }
.t-btn-danger:hover:not(:disabled)    { background: var(--t-danger-hover); }
.t-btn-ghost     { background: transparent; color: var(--t-primary); }
.t-btn-ghost:hover:not(:disabled)     { background: var(--t-primary-soft); }
.t-btn-sm  { padding: 4px 10px; font-size: var(--t-text-xs); border-radius: var(--t-radius-sm); }
.t-btn-block { width: 100%; }

/* ---------- поля ---------- */
.t-field { display: flex; flex-direction: column; gap: 4px; }
.t-label { font: var(--t-text-sm) var(--t-font); color: var(--t-text-2); }
.t-hint  { font: var(--t-text-xs) var(--t-font); color: var(--t-faint); }
.t-input, .t-select, .t-textarea {
  font: var(--t-text-sm)/1.4 var(--t-font); color: var(--t-text);
  background: var(--t-surface); border: 1px solid var(--t-line); border-radius: var(--t-radius);
  padding: 8px 12px; width: 100%; box-sizing: border-box;
}
.t-input:focus, .t-select:focus, .t-textarea:focus {
  outline: none; border-color: var(--t-focus); box-shadow: 0 0 0 3px rgba(59, 130, 246, .25);
}
.t-input[aria-invalid="true"] { border-color: var(--t-danger); }
.t-input-sm { padding: 4px 8px; font-size: var(--t-text-xs); border-radius: var(--t-radius-sm); }
.t-check { accent-color: var(--t-primary); width: 16px; height: 16px; }

/* ---------- карточка ---------- */
.t-card { background: var(--t-surface); border-radius: var(--t-radius); box-shadow: var(--t-shadow); padding: 20px; }
.t-card-title { font: 600 18px/1.3 var(--t-font); color: var(--t-text); margin: 0 0 12px; }

/* ---------- таблица ---------- */
.t-table-wrap { background: var(--t-surface); border-radius: var(--t-radius); box-shadow: var(--t-shadow); overflow: auto; }
.t-table { width: 100%; border-collapse: collapse; font: var(--t-text-sm)/1.4 var(--t-font); color: var(--t-text); }
.t-table th {
  text-align: left; font-weight: 500; color: var(--t-muted); background: var(--t-bg);
  padding: 8px 12px; border-bottom: 1px solid var(--t-line-soft); white-space: nowrap;
}
.t-table td { padding: 8px 12px; border-bottom: 1px solid var(--t-bg-2); vertical-align: top; }
.t-table tbody tr:hover { background: var(--t-bg); }
.t-table .t-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- метки ---------- */
.t-badge {
  display: inline-block; font: 500 var(--t-text-xs)/1.4 var(--t-font);
  padding: 1px 8px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
.t-badge-ok    { color: var(--t-ok);     background: var(--t-ok-soft);     border-color: var(--t-ok-line); }
.t-badge-warn  { color: var(--t-warn);   background: var(--t-warn-soft);   border-color: var(--t-warn-line); }
.t-badge-err   { color: var(--t-danger); background: var(--t-danger-soft); border-color: var(--t-danger-line); }
.t-badge-info  { color: var(--t-info);   background: var(--t-info-soft);   border-color: var(--t-info-line); }
.t-badge-muted { color: var(--t-muted);  background: var(--t-bg-2);        border-color: var(--t-line-soft); }

/* ---------- сообщения ---------- */
.t-alert { font: var(--t-text-sm)/1.45 var(--t-font); padding: 10px 14px; border-radius: var(--t-radius); border: 1px solid; }
.t-alert-ok   { color: var(--t-ok);     background: var(--t-ok-soft);     border-color: var(--t-ok-line); }
.t-alert-warn { color: var(--t-warn);   background: var(--t-warn-soft);   border-color: var(--t-warn-line); }
.t-alert-err  { color: var(--t-danger); background: var(--t-danger-soft); border-color: var(--t-danger-line); }
.t-alert-info { color: var(--t-info);   background: var(--t-info-soft);   border-color: var(--t-info-line); }

/* ---------- окно (модальное) ---------- */
.t-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 1000; }
.t-modal { background: var(--t-surface); border-radius: 12px; box-shadow: var(--t-shadow-lg); width: 100%; max-width: 440px; padding: 20px; font-family: var(--t-font); }
.t-modal-title { font: 600 16px/1.3 var(--t-font); color: var(--t-text); margin: 0 0 8px; }
.t-modal-body  { font: var(--t-text-sm)/1.5 var(--t-font); color: var(--t-text-2); margin-bottom: 16px; }
.t-modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- вкладки ---------- */
.t-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--t-line); margin-bottom: 20px; flex-wrap: wrap; }
.t-tab {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 var(--t-text-sm)/1.25 var(--t-font); color: var(--t-muted);
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 10px 14px; cursor: pointer;
}
.t-tab:hover { color: var(--t-text); }
.t-tab:focus-visible { outline: 2px solid var(--t-focus); outline-offset: -2px; border-radius: var(--t-radius-sm); }
.t-tab[aria-selected="true"] { color: var(--t-primary); border-bottom-color: var(--t-primary); }
.t-tab .t-badge { font-size: 11px; padding: 0 6px; }
.t-panel[hidden] { display: none; }

/* ---------- всплывающее сообщение (tamgo.toast) ---------- */
.t-toast {
  position: fixed; right: 16px; bottom: 16px; z-index: 2000;   /* внизу справа — решение пользователя 23.10.2026 */
  max-width: min(460px, calc(100vw - 32px)); box-sizing: border-box;
  background: var(--t-header); color: #fff; font: var(--t-text-sm)/1.45 var(--t-font);
  padding: 10px 18px; border-radius: var(--t-radius); box-shadow: var(--t-shadow-lg);
  cursor: pointer; white-space: pre-line;
}
.t-toast-err { background: var(--t-danger-hover); }
.t-toast[hidden] { display: none; }

/* ---------- зона перетаскивания: подсветка, пока над ней тянут файл ---------- */
.t-drop-on { outline: 3px dashed var(--t-drop); outline-offset: 2px; background-color: var(--t-drop-soft); }

/* ---------- страница и шапка ---------- */
.t-page { background: var(--t-bg); color: var(--t-text); font-family: var(--t-font); margin: 0; min-height: 100vh; }
.t-main { max-width: 1100px; margin: 0 auto; padding: 20px 16px; }
.t-h1 { font: 700 24px/1.25 var(--t-font); margin: 0 0 16px; }
.t-h2 { font: 600 18px/1.3 var(--t-font); margin: 0 0 12px; }
.t-header { background: var(--t-header); color: #fff; }
.t-header-in { max-width: 1100px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 16px; font: var(--t-text-sm) var(--t-font); }
.t-header a { color: #e2e8f0; text-decoration: none; }
.t-header a:hover { color: #fff; }
.t-header .t-brand { font-weight: 700; font-size: 18px; color: #fff; }
.t-link { color: var(--t-primary); text-decoration: none; }
.t-link:hover { text-decoration: underline; }
.t-muted { color: var(--t-muted); }