/* =============================================================================
   «Содружество» — единая дизайн-система (v2, светло-синий минимализм).
   Раздаётся шлюзом по /assets/sd.css БЕЗ авторизации.
   Подключение в любом приложении:  <link rel="stylesheet" href="/assets/sd.css">

   Доводка v2: шапка с размытием и «пилюлей» активного раздела, сетка 8pt,
   кнопки 36px / поля 38px, фокус-кольцо, motion 150–200 мс,
   уважение prefers-reduced-motion. Без градиентов и декоративных анимаций.
   ========================================================================== */

:root {
  --sd-bg: #f4f7fb;
  --sd-surface: #ffffff;
  --sd-border: #dbe4f0;
  --sd-primary: #3b82f6;
  --sd-primary-600: #2563eb;
  --sd-primary-soft: #e8f0fe;
  --sd-text: #1f2a3d;
  --sd-muted: #5b6b84;
  --sd-success: #15803d;
  --sd-danger: #dc2626;
  --sd-warning: #b45309;
  --sd-radius: 10px;
  --sd-shadow: 0 1px 3px rgba(30, 58, 110, .08);
  --sd-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* производные (не отменяют канон выше) */
  --sd-radius-sm: 8px;
  --sd-radius-pill: 999px;
  --sd-shell-h: 52px;
  --sd-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sd-success-soft: #e7f6ec;
  --sd-danger-soft: #fdeaea;
  --sd-warning-soft: #fdf2e2;
  --sd-hover: rgba(31, 42, 61, .05);
  --sd-hairline: rgba(31, 42, 61, .10);
  --sd-shadow-float: 0 10px 30px rgba(30, 58, 110, .14);
  --sd-ring: 0 0 0 3px var(--sd-primary-soft);
  --sd-motion: 170ms;
  --sd-ease: cubic-bezier(.2, .7, .3, 1);

  /* сетка 8pt */
  --sd-space-1: 8px;
  --sd-space-2: 16px;
  --sd-space-3: 24px;
  --sd-space-4: 32px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- База ----------------------------------------------------------------- */

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--sd-bg);
  color: var(--sd-text);
  font-family: var(--sd-font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 { font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 17px; }

button, input, select, textarea { font-family: inherit; }

body.sd-has-shell { padding-top: var(--sd-shell-h); }

a { color: var(--sd-primary-600); text-decoration: none; transition: color var(--sd-motion) var(--sd-ease); }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--sd-primary-soft); outline-offset: 2px; }

*, *::before, *::after { box-sizing: border-box; }

.sd-muted { color: var(--sd-muted); }
.sd-mono { font-family: var(--sd-mono); }
.sd-small { font-size: 12.5px; }
.sd-hidden { display: none !important; }

/* --- Верхняя панель (внедряется shell.js) --------------------------------- */

.sd-shell {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 9000;
  height: var(--sd-shell-h);
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: 0 18px;
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--sd-hairline);
  font-family: var(--sd-font);
  font-size: 14px;
  color: var(--sd-text);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sd-shell { background: var(--sd-surface); }
}

.sd-shell__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  color: var(--sd-text);
  text-decoration: none;
  white-space: nowrap;
}

.sd-shell__mark {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--sd-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sd-shell__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* min-width по умолчанию = auto = ширина содержимого: без нуля overflow-x
     не работает и шапка рвёт вьюпорт на телефоне. */
  min-width: 0;
  flex: 1 1 auto;
}
.sd-shell__nav::-webkit-scrollbar { display: none; }

.sd-shell__link {
  padding: 7px 12px;
  border-radius: var(--sd-radius-pill);
  color: var(--sd-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--sd-motion) var(--sd-ease), color var(--sd-motion) var(--sd-ease);
}
.sd-shell__link:hover { background: var(--sd-hover); color: var(--sd-text); text-decoration: none; }
/* активный инструмент — «пилюля» */
.sd-shell__link.is-active { background: var(--sd-primary-soft); color: var(--sd-primary-600); font-weight: 600; }

.sd-shell__spacer { flex: 1 1 auto; }

.sd-shell__user {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-align: right;
  color: var(--sd-text);
  text-decoration: none;
  white-space: nowrap;
}
.sd-shell__user:hover { text-decoration: none; }
.sd-shell__user b { font-weight: 600; }
.sd-shell__role { font-size: 11.5px; color: var(--sd-muted); }

.sd-shell__logout {
  padding: 6px 12px;
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-sm);
  background: var(--sd-surface);
  color: var(--sd-muted);
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.sd-shell__logout:hover { border-color: var(--sd-primary); color: var(--sd-primary-600); }

.sd-shell__brand,
.sd-shell__mark,
.sd-shell__logout { flex: 0 0 auto; }

/* Брейкпоинт и селекторы держим ровно теми же, что в shell.js: иначе шапка,
   собранная разметкой, и шапка, внедрённая скриптом, разъедутся незаметно. */
@media (max-width: 860px) {
  .sd-shell { gap: 8px; padding: 0 10px; }
  .sd-shell__title { display: none; }
  .sd-shell__brand span:not(.sd-shell__mark) { display: none; } /* запасной селектор для старой разметки */
  .sd-shell__user { display: none; }
}

@media (max-width: 480px) {
  .sd-shell {
    gap: 6px;
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
  }
  .sd-shell__link { padding: 9px 10px; }
  .sd-shell__logout { padding: 8px 10px; font-size: 13px; }
}

/* --- Кнопки --------------------------------------------------------------- */

.sd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--sd-radius);
  background: var(--sd-primary);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--sd-motion) var(--sd-ease),
              border-color var(--sd-motion) var(--sd-ease),
              color var(--sd-motion) var(--sd-ease);
}
.sd-btn:hover { background: var(--sd-primary-600); color: #fff; text-decoration: none; }
.sd-btn:disabled, .sd-btn[disabled] { opacity: .5; cursor: not-allowed; }
.sd-btn:focus-visible { outline: 2px solid var(--sd-primary-soft); outline-offset: 2px; }

/* тихая вторичная кнопка: серо-голубой фон при наведении */
.sd-btn--ghost { background: var(--sd-surface); border-color: var(--sd-border); color: var(--sd-muted); }
.sd-btn--ghost:hover { background: var(--sd-primary-soft); border-color: #cddffb; color: var(--sd-primary-600); }

.sd-btn--danger { background: var(--sd-surface); border-color: #f0c9c9; color: var(--sd-danger); }
.sd-btn--danger:hover { background: var(--sd-danger-soft); border-color: var(--sd-danger); color: var(--sd-danger); }

.sd-btn--sm { height: 30px; padding: 0 12px; font-size: 13px; }
.sd-btn--block { width: 100%; }

/* --- Поля ввода ----------------------------------------------------------- */

.sd-field { margin-bottom: 14px; }
.sd-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--sd-muted); }

.sd-input, .sd-select, .sd-textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-sm);
  background: var(--sd-surface);
  color: var(--sd-text);
  font: inherit;
  font-size: 15px;
  transition: border-color var(--sd-motion) var(--sd-ease), box-shadow var(--sd-motion) var(--sd-ease);
}
.sd-input::placeholder { color: #a8b4c6; }
.sd-input:focus, .sd-select:focus, .sd-textarea:focus {
  outline: none;
  border-color: var(--sd-primary);
  box-shadow: var(--sd-ring);
}

input[type="checkbox"], input[type="radio"] { accent-color: var(--sd-primary); }

/* --- Карточки ------------------------------------------------------------- */

.sd-card {
  background: var(--sd-surface);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius);
  padding: 24px;
}
/* тень — только там, где элемент «парит» */
.sd-float { box-shadow: var(--sd-shadow-float); }
.sd-card__head { margin-bottom: 16px; }
.sd-card__head h1, .sd-card__head h2, .sd-card__head h3 { margin: 0 0 4px; }

/* --- Таблицы -------------------------------------------------------------- */

.sd-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.sd-table th {
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--sd-muted);
  background: var(--sd-bg);
  border-bottom: 1px solid var(--sd-border);
  white-space: nowrap;
}
.sd-table td { padding: 11px 12px; border-bottom: 1px solid var(--sd-hairline); vertical-align: middle; }
.sd-table tbody tr:last-child td { border-bottom: none; }
.sd-table tbody tr { transition: background var(--sd-motion) var(--sd-ease); }
.sd-table tbody tr:hover { background: #f7faff; }

/* --- Бейджи --------------------------------------------------------------- */

.sd-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  background: var(--sd-bg);
  color: var(--sd-muted);
  border: 1px solid var(--sd-border);
}
.sd-badge--primary { background: var(--sd-primary-soft); color: var(--sd-primary-600); border-color: #cddffb; }
.sd-badge--ok { background: var(--sd-success-soft); color: var(--sd-success); border-color: #c6e6d2; }
.sd-badge--danger { background: var(--sd-danger-soft); color: var(--sd-danger); border-color: #f4cccc; }
.sd-badge--warn { background: var(--sd-warning-soft); color: var(--sd-warning); border-color: #f0dcb8; }

/* --- Баннеры -------------------------------------------------------------- */

.sd-banner {
  padding: 11px 14px;
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-sm);
  background: var(--sd-surface);
  color: var(--sd-text);
  margin-bottom: 16px;
  font-size: 13.5px;
}
.sd-banner--info { background: var(--sd-primary-soft); border-color: #cddffb; color: #1e478f; }
.sd-banner--ok { background: var(--sd-success-soft); border-color: #c6e6d2; color: var(--sd-success); }
.sd-banner--warn { background: var(--sd-warning-soft); border-color: #f0dcb8; color: var(--sd-warning); }
.sd-banner--error { background: var(--sd-danger-soft); border-color: #f4cccc; color: var(--sd-danger); }

/* --- Пустые состояния ------------------------------------------------------ */

.sd-empty {
  padding: var(--sd-space-4) var(--sd-space-3);
  text-align: center;
  color: var(--sd-muted);
}
.sd-empty h3 { margin: 12px 0 4px; color: var(--sd-text); font-size: 17px; }
.sd-empty p { margin: 0 auto 16px; max-width: 380px; font-size: 14px; }

/* --- Всплывающие панели (единственное место с «парящей» тенью) ------------- */

.sd-menu {
  background: var(--sd-surface);
  border: 1px solid var(--sd-border);
  border-radius: 12px;
  box-shadow: var(--sd-shadow-float);
  overflow: hidden;
  transition: opacity var(--sd-motion) var(--sd-ease), transform var(--sd-motion) var(--sd-ease);
}
.sd-menu__item {
  display: flex;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--sd-hairline);
  color: inherit;
  text-decoration: none;
  transition: background var(--sd-motion) var(--sd-ease);
}
.sd-menu__item:last-child { border-bottom: 0; }
.sd-menu__item:hover { background: #f7faff; text-decoration: none; }

/* --- Телефоны и планшеты (общее для всех инструментов) --------------------- */

/* Картинки, схемы и графики не распирают экран. */
img, svg, canvas, video, iframe { max-width: 100%; }

.sd-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

@media (max-width: 768px) {
  /* iOS Safari зумит страницу при фокусе на поле с font-size < 16px, и обратно
     масштаб сам не возвращается — после этого скроллится вся страница. */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  select,
  textarea,
  .sd-input,
  .sd-select,
  .sd-textarea { font-size: 16px; }

  /* Тап-таргеты под палец. */
  .sd-btn { height: 42px; padding: 0 18px; }
  .sd-btn--sm { height: 36px; padding: 0 14px; }
}

@media (max-width: 480px) {
  .sd-card { padding: 16px; }
  .sd-empty { padding: var(--sd-space-3) var(--sd-space-2); }
}