/* ============================================================
   SP ERP styles.
   Base: the CLOTH ERP design system (src/web/static/css/erp.css) —
   tokens, card, buttons, segmented control, chips, alerts, form
   elements, default table. Shop-specific blocks are not taken.
   Below the marked line: SP ERP's own layout (header, tiles).
   ============================================================ */

:root {
  /* Цвета — primary смещен до #2563eb (WCAG AA 4.83:1 на белом) */
  --c-primary: #2563eb;
  --c-primary-strong: #1e40af;
  --c-text: #111827;
  --c-muted: #6b7280;
  --c-border: #e5e7eb;
  --c-surface: #f3f4f6;
  --c-surface-soft: #f9fafb;
  --c-bg: #f6f7fb;
  --c-danger: #dc2626;
  --c-warning: #d97706;
  --c-success: #16a34a;
  --c-info: #2563eb;

  /* Мягкие фоны и текст состояний (F-502). Пары уже повторены в .chip-*,
     .alert-*, .btn.danger:hover — новые элементы берут их отсюда; старые
     правила переводятся отдельной правкой, а не заодно. */
  --c-surface-0: #fff;
  --c-border-strong: #d1d5db;
  --c-primary-soft: #eff6ff;
  --c-primary-line: #bfdbfe;
  --c-success-soft: #d1fae5;
  --c-success-ink: #065f46;
  --c-danger-soft: #fee2e2;
  --c-danger-ink: #991b1b;

  /* Радиусы */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-pill: 999px;

  /* Расстояния */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;

  /* Шрифты */
  --font-body: 14px;
  --font-sm: 13px;
  --font-xs: 12px;

  /* Высота элементов управления в строке фильтров.
     Одно число на всю систему: сегментные полоски, кнопки-фильтры и
     все, что стоит с ними в один ряд. Раньше высота получалась сама
     собой из шрифта и отступов — и полоска оказывалась выше соседей. */
  --h-control: 28px;
  --h-control-sm: 24px;

  /* Focus */
  --focus-ring: 2px solid var(--c-primary);
  --focus-offset: 2px;
}

/* ---------- Universal focus-visible ----------
   Применяется ко всему интерактивному.
   Шаблоны не могут «забыть» про фокус. */
*:focus { outline: none; }
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ---------- Card ---------- */
.card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 14px;
  margin-bottom: 14px;
}

/* ---------- Buttons ----------
   Состояния: default / hover / focus-visible (универсал) / :active / :disabled */
.btn {
  display: inline-block;
  padding: 8px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--c-text);
  background: var(--c-text);
  color: #fff;
  cursor: pointer;
  font: inherit;
  line-height: 1.2;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn:hover { background: #000; border-color: #000; }
.btn:active { transform: translateY(1px); }
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn.secondary {
  background: #fff;
  color: var(--c-text);
}
.btn.secondary:hover { background: var(--c-surface); }

.btn.primary {
  background: var(--c-primary-strong);
  border-color: var(--c-primary-strong);
  color: #fff;
}
.btn.primary:hover { background: #1e3a8a; border-color: #1e3a8a; }

.btn.danger {
  background: #fff;
  color: var(--c-danger);
  border: 1.5px solid var(--c-danger);
}
.btn.danger:hover { background: #fee2e2; }

.btn.danger-solid {
  background: var(--c-danger);
  border-color: var(--c-danger);
  color: #fff;
}
.btn.danger-solid:hover { background: #b91c1c; border-color: #b91c1c; }

.btn.sm {
  padding: 4px 10px;
  font-size: var(--font-sm);
  border-radius: var(--r-sm);
}

/* ---------- Segmented Control ----------
   Семантика:
     <div class="seg-group">
       <a class="seg-btn" href="?p=week">7 дней</a>
       <a class="seg-btn active" href="?p=month" aria-current="page">28 дней</a>
       <a class="seg-btn" href="?p=custom">Произвольный</a>
     </div>
   Скругление и склейка границ — забота CSS.
   Активный сегмент обязан нести aria-current="page" (ссылка) или
   aria-pressed="true" (button) — фиксируется в шаблонах. */
.seg-group {
  display: inline-flex;
  align-items: stretch;
  flex-wrap: nowrap;
}

.seg-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: var(--h-control);
  padding: 0 14px;
  font-size: var(--font-sm);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  color: #374151;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
/* Высота задана рамкой, а не отступами: страничные правила меняют
   шрифт и padding сегментов как им удобно, и полоска все равно
   остается ровно такой же, как соседние кнопки-фильтры. */
.seg-btn.sm {
  height: var(--h-control-sm);
  padding: 0 8px;
  font-size: var(--font-xs);
}
.seg-group > .seg-btn:first-child {
  border-left: 1px solid var(--c-border);
  border-top-left-radius: var(--r-sm);
  border-bottom-left-radius: var(--r-sm);
}
.seg-group > .seg-btn:last-child {
  border-top-right-radius: var(--r-sm);
  border-bottom-right-radius: var(--r-sm);
}
.seg-btn:hover { background: #e5e7eb; }
.seg-btn.active,
.seg-btn[aria-current="page"],
.seg-btn[aria-pressed="true"] {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}
.seg-btn:focus-visible {
  position: relative;
  z-index: 1;
}
.seg-btn:disabled,
.seg-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------- Chips / Badges (статические) ---------- */
.chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-lg);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: var(--font-xs);
  line-height: 1.4;
  white-space: nowrap;
}
.chip.chip-info    { background: #eff6ff; color: var(--c-primary-strong); }
.chip.chip-success { background: #d1fae5; color: #065f46; }
.chip.chip-warning { background: #fef3c7; color: #92400e; }
.chip.chip-danger  { background: #fee2e2; color: #991b1b; }


/* ---------- Alerts / Flash messages ----------
   Используется для get_flashed_messages в base.html
   и для inline-баннеров на страницах. */
.alert {
  padding: 10px 14px;
  border-radius: var(--r-md);
  margin-bottom: 10px;
  font-size: var(--font-body);
  background: var(--c-surface);
  color: var(--c-text);
}
.alert.alert-info    { background: #dbeafe; color: var(--c-primary-strong); }
.alert.alert-success { background: #d1fae5; color: #065f46; }
.alert.alert-warning { background: #fef3c7; color: #92400e; }
.alert.alert-danger  { background: #fee2e2; color: #991b1b; }

/* ---------- Form elements ----------
   Видимые лейблы обязательны (WCAG 3.3.2).
   .form-error связывается с .form-input через aria-describedby. */
.form-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.form-label {
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--c-text);
}
.form-label .required { color: var(--c-danger); margin-left: 2px; }

.form-input,
.form-select,
.form-textarea {
  padding: 6px 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  font-size: var(--font-body);
  background: #fff;
  color: var(--c-text);
  line-height: 1.4;
  font: inherit;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  background: var(--c-surface);
  color: var(--c-muted);
  cursor: not-allowed;
}
.form-input[aria-invalid="true"],
.form-select[aria-invalid="true"],
.form-textarea[aria-invalid="true"] {
  border-color: var(--c-danger);
}
.form-input[aria-invalid="true"]:focus,
.form-select[aria-invalid="true"]:focus,
.form-textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15);
}

.form-help  { font-size: var(--font-xs); color: var(--c-muted); }
.form-error { font-size: var(--font-xs); color: var(--c-danger); }

/* ---------- Default table ----------
   Применяется явным классом — старые таблицы не ломаются.
   Sticky thead требует overflow: clip на .card (не hidden!). */
.table-default {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-sm);
}
.table-default thead th {
  background: var(--c-surface-soft);
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px;
  text-align: left;
  font-weight: 600;
  /* Граница шапки — тенью внутрь, а не border: при border-collapse: collapse
     схлопнутая граница остается в потоке таблицы и при прокрутке отрывается
     от липкой шапки — линия уезжает вниз, шапка висит без низа. */
  box-shadow: inset 0 -2px 0 var(--c-border);
}
.table-default tbody td {
  padding: 8px;
  border-bottom: 1px solid var(--c-surface);
}
.table-default tbody tr {
  transition: background 0.1s;
}
.table-default tbody tr:hover {
  background: var(--c-surface);
}
.table-default td.num,
.table-default th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.table-default td.neg { color: var(--c-danger); }

/* ============================================================
   SP ERP layout
   ============================================================ */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--font-body);
  line-height: 1.45;
}
a { color: var(--c-primary); }
h1 { font-size: 20px; margin: 0 0 4px; }
h2 { font-size: 16px; margin: 0 0 10px; }

/* ---------- Header ---------- */
.top {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 8px 20px;
  background: #fff;
  border-bottom: 1px solid var(--c-border);
}
.top .brand { font-weight: 700; font-size: 15px; color: var(--c-text); text-decoration: none; }
.top nav { display: flex; gap: 4px; }
.top nav a {
  padding: 4px 10px;
  border-radius: var(--r-sm);
  color: var(--c-muted);
  text-decoration: none;
}
.top nav a:hover { background: var(--c-surface); color: var(--c-text); }
.top nav a.on { background: var(--c-surface); color: var(--c-text); font-weight: 600; }
.top .who { margin-left: auto; display: flex; align-items: center; gap: 10px; color: var(--c-muted); font-size: var(--font-sm); }
.top .who form { margin: 0; }
.top .who a { color: var(--c-muted); }

.page { max-width: 1180px; margin: 0 auto; padding: 18px 20px 40px; }
.page-head {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.page-head .sub { color: var(--c-muted); font-size: var(--font-sm); }
.page-head .seg-group { margin-left: auto; }

/* ---------- Tiles ---------- */
.grp-title {
  margin: 14px 0 6px;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 12px 14px;
}
.tile .t-title { color: var(--c-text); font-size: var(--font-sm); }
.tile .t-value {
  font-size: 24px;
  line-height: 30px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
}
.tile .t-note, .tile .t-goal { font-size: var(--font-xs); color: var(--c-muted); }
.tile .t-foot {
  margin-top: auto;
  padding-top: 6px;
  font-size: var(--font-xs);
  color: var(--c-muted);
}
.tile .t-warn { font-size: var(--font-xs); color: var(--c-warning); }
.tile.money { border-color: var(--c-primary-line); background: var(--c-primary-soft); }
.tile.off .t-value, .tile.empty .t-value { color: var(--c-border-strong); }
.tile.off { background: var(--c-surface-soft); }

/* ---------- Day table ---------- */
.days { margin-top: 18px; }
.card.flush, .days .card { padding: 0; overflow: clip; }
.days .table-default th.off, .days .table-default td.off { color: var(--c-border-strong); }
.table-default caption { caption-side: top; text-align: left; padding: 12px 14px 6px; font-weight: 600; }

/* ---------- Forms on narrow pages ---------- */
.narrow { max-width: 420px; margin: 48px auto; }
.narrow .card { padding: 22px 24px; }
.form-input { width: 100%; }
.row-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.row-actions form { margin: 0; display: inline-flex; gap: 6px; align-items: center; }
.inline-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.inline-form .form-row { margin: 0; min-width: 160px; }

@media (max-width: 640px) {
  .top { padding: 8px 12px; }
  .page { padding: 14px 12px 32px; }
  .page-head .seg-group { margin-left: 0; overflow-x: auto; max-width: 100%; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .tile .t-value { font-size: 20px; }
}

/* ---------- Weekly manual input ---------- */
.input-blocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  align-items: start;
}
.input-block { padding: 14px 16px; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.input-block .form-help { margin: 0 0 6px; }
.input-block .btn { align-self: flex-start; margin-top: 4px; }
.page-head .input-link { font-size: var(--font-sm); }
.muted { color: var(--c-muted); }