/* ── Bootstrap overrides for dark theme ─────────────────────────────── */
.text-muted { color: var(--color-text-secondary) !important; }
.text-sm    { font-size: 0.8125rem; }
.text-xs    { font-size: 0.75rem; }
.nowrap     { white-space: nowrap; }
.text-right { text-align: right; }

/* ── Notice banner (archived / deleted state) ────────────────────────── */
.notice {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-size: 14px;
  border: 1px solid;
  margin-bottom: 1.25rem;
}
.notice--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border-color: var(--color-warning-border);
}
.notice--info {
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-card));
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.notice a { color: inherit; text-decoration: underline; }

/* ── Page header ─────────────────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.page-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 0.15rem;
  color: var(--color-text);
}

.page-subtitle {
  color: var(--color-text-muted);
  font-size: 13px;
  margin: 0;
}

.breadcrumb {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.breadcrumb a { color: var(--color-text-secondary); }
.breadcrumb a:hover { color: var(--color-accent); text-decoration: none; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: var(--color-accent-button);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
  white-space: nowrap;
}
.btn-primary:hover { background: var(--color-accent-button-hover); color: #fff; text-decoration: none; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
  white-space: nowrap;
}
.btn-secondary:hover { border-color: var(--color-border-hover); color: var(--color-text); text-decoration: none; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: transparent;
  color: var(--color-text-secondary);
  border: none;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
}
.btn-ghost:hover { background: var(--color-neutral-bg); color: var(--color-text); text-decoration: none; }

.btn-danger-ghost { color: var(--color-danger); }
.btn-danger-ghost:hover { background: var(--color-danger-bg); }

.btn-xs {
  padding: 0.25rem 0.6rem;
  font-size: 12px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: none;
  cursor: pointer;
  font-weight: 500;
  text-decoration: none;
  transition: var(--transition);
}
.btn-xs.btn-success {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success-border);
}
.btn-xs.btn-success:hover { background: var(--color-success); color: #fff; }
.btn-xs.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}
.btn-xs.btn-secondary:hover { border-color: var(--color-accent); color: var(--color-accent); }

.btn-icon {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  text-decoration: none;
  transition: var(--transition);
}
.btn-icon:hover { color: var(--color-accent); text-decoration: none; }

.btn-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-link-sm {
  font-size: 12px;
  color: var(--color-accent);
  text-decoration: none;
}
.btn-link-sm:hover { text-decoration: underline; }

/* ── Tags / badges ───────────────────────────────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 500;
  background: var(--color-neutral-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.tag-success { background: #059669; border-color: #059669; color: #fff; }
.tag-warning { background: #d97706; border-color: #d97706; color: #fff; }
.tag-danger  { background: #dc2626; border-color: #dc2626; color: #fff; }
.tag-info    { background: #2563eb; border-color: #2563eb; color: #fff; }
.tag-muted   { background: #374151; border-color: #6b7280; color: #d1d5db; }

/* ── Status badges — qualpal-inspired distinct hues ─────────────────── */
/* Hues evenly spaced: 0°(red) 38°(amber) 142°(green) 175°(teal)       */
/*                     195°(cyan) 215°(blue) 258°(violet) neutral(gray) */
.bill-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.65rem;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid;
  letter-spacing: 0.01em;
}
/* Ожидается — gray */
.bill-status-expected  { background:#374151; border-color:#374151; color:#e5e7eb; }
/* Ждём счёт — amber */
.bill-status-waiting   { background:#b45309; border-color:#b45309; color:#fff; }
/* Счёт загружен — blue */
.bill-status-uploaded  { background:#1d4ed8; border-color:#1d4ed8; color:#fff; }
/* Готов к отправке — violet */
.bill-status-ready     { background:#7c3aed; border-color:#7c3aed; color:#fff; }
/* Отправлен — teal */
.bill-status-sent      { background:#0d9488; border-color:#0d9488; color:#fff; }
/* Оплачен — green */
.bill-status-paid      { background:#059669; border-color:#059669; color:#fff; }
/* Просрочен — red */
.bill-status-overdue   { background:#dc2626; border-color:#dc2626; color:#fff; }
/* Пропущен — cool gray */
.bill-status-skipped   { background:#6b7280; border-color:#6b7280; color:#fff; }
/* Отменён — stone */
.bill-status-cancelled { background:#57534e; border-color:#57534e; color:#fff; }
/* Неизвестен */
.bill-status-unknown   { background:#374151; border-color:#4b5563; color:#9ca3af; }

/* ── Action badges — qualpal-inspired distinct hues ─────────────────── */
.action-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.65rem;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid;
  letter-spacing: 0.01em;
}
/* Создание — blue 215° */
.action-create   { background:#dbeafe; border-color:#93c5fd; color:#1e3a8a; }
/* Изменение — indigo 238° */
.action-update   { background:#e0e7ff; border-color:#a5b4fc; color:#312e81; }
/* Удаление — red 0° */
.action-delete   { background:#fee2e2; border-color:#fca5a5; color:#7f1d1d; }
/* Архивирование — warm stone */
.action-archive  { background:#f5f5f4; border-color:#d6d3d1; color:#44403c; }
/* Смена статуса — violet 258° */
.action-status   { background:#ede9fe; border-color:#c4b5fd; color:#2e1065; }
/* Загрузка — orange 25° */
.action-upload   { background:#ffedd5; border-color:#fdba74; color:#7c2d12; }
/* Скачивание — cyan 195° */
.action-download { background:#cffafe; border-color:#67e8f9; color:#164e63; }
/* Комментарий — slate neutral */
.action-comment  { background:#f1f5f9; border-color:#94a3b8; color:#334155; }
/* Календарь — teal 175° */
.action-calendar { background:#ccfbf1; border-color:#5eead4; color:#134e4a; }
/* Бюджет — green 142° */
.action-budget   { background:#dcfce7; border-color:#86efac; color:#14532d; }
/* Импорт — amber 38° */
.action-import   { background:#fef9c3; border-color:#fde047; color:#713f12; }
/* Неизвестное */
.action-unknown  { background:#f8fafc; border-color:#e2e8f0; color:#94a3b8; }

/* ── Filters ─────────────────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  padding: 0.875rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.filter-input {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  background: var(--color-bg);
  color: var(--color-text);
  transition: var(--transition);
  min-width: 180px;
}
.filter-input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 2px rgba(37,99,235,.12); }

.filter-select {
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  transition: var(--transition);
}
.filter-select:focus { outline: none; border-color: var(--color-accent); }

.filter-check {
  font-size: 13px;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
}

.form-label-inline {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* ── Tables ──────────────────────────────────────────────────────────── */
.table-wrapper {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table th {
  padding: 0.65rem 1rem;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  background: var(--color-surface-raised);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.data-table td {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  color: var(--color-text);
}

.data-table tbody tr:last-child td { border-bottom: none; }

.data-table tbody tr:hover { background: var(--color-surface-raised); }

.data-table-sm td,
.data-table-sm th { padding: 0.5rem 0.75rem; font-size: 12px; }

/* ── Cards ───────────────────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--color-text);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-raised);
}

.card-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  color: var(--color-text);
}

.card-body {
  padding: 1rem;
}

/* ── Stat cards ──────────────────────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  border-left: 4px solid;
}

.stat-card-danger  { border-left-color: var(--color-danger); }
.stat-card-warning { border-left-color: var(--color-warning); }
.stat-card-info    { border-left-color: var(--color-info); }
.stat-card-success { border-left-color: var(--color-success); }
.stat-card-neutral { border-left-color: var(--color-border); }

.stat-card-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.stat-card-danger  .stat-card-icon { color: var(--color-danger); }
.stat-card-warning .stat-card-icon { color: var(--color-warning); }
.stat-card-info    .stat-card-icon { color: var(--color-info); }
.stat-card-success .stat-card-icon { color: var(--color-success); }
.stat-card-neutral .stat-card-icon { color: var(--color-text-muted); }

.stat-card-value {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text);
}

.stat-card-label {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 0.2rem;
}

/* ── Dashboard grid ──────────────────────────────────────────────────── */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
  gap: 1.25rem;
}

.dash-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.dash-section-danger { border-top: 3px solid var(--color-danger); }

.dash-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-raised);
}

.dash-section-title {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.dash-section .data-table th,
.dash-section .data-table td { padding: 0.5rem 0.875rem; }

/* ── Forms ───────────────────────────────────────────────────────────── */
.form-page {
  max-width: 860px;
}

.form-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.form-section {
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}
.form-section:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.form-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 1rem;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.form-group.has-error .form-control { border-color: var(--color-danger); }

.form-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.required { color: var(--color-danger); }

.form-control {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text);
  transition: var(--transition);
  width: 100%;
}
.form-control:focus {
  outline: none;
  border-color: var(--color-accent);
  color: var(--color-text);
  background: var(--color-surface);
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.form-control:disabled { background: var(--color-bg); color: var(--color-text-muted); cursor: not-allowed; }
.form-control::placeholder { color: var(--color-text-muted); opacity: 1; }

textarea.form-control { resize: vertical; min-height: 80px; }

select.form-control { cursor: pointer; }

.form-control-sm { padding: 0.35rem 0.6rem; font-size: 12px; }

.form-error { font-size: 12px; color: var(--color-danger); margin-top: 0.2rem; }
.form-hint  { font-size: 12px; color: var(--color-text-muted); margin-top: 0.2rem; }

/* ── Flatpickr alt-input integration ─────────────────────────────────── */
.flatpickr-input.form-control[readonly] { background: var(--color-surface); cursor: pointer; }
.flatpickr-input.form-control.active   { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.flatpickr-calendar {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 13px;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover     { background: var(--color-accent); border-color: var(--color-accent); }
.flatpickr-day:hover               { background: var(--color-bg); }
.flatpickr-months .flatpickr-month,
.flatpickr-weekdays,
span.flatpickr-weekday             { background: var(--color-surface); color: var(--color-text); }
.flatpickr-current-month           { color: var(--color-text); }
.flatpickr-day                     { color: var(--color-text); }
.flatpickr-day.flatpickr-disabled  { color: var(--color-text-muted); }
.numInputWrapper span              { border-color: var(--color-border); }
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month { color: var(--color-text-secondary); fill: var(--color-text-secondary); }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--color-accent); }

.form-check-input { width: 14px; height: 14px; cursor: pointer; }
.form-check-label { font-size: 13px; display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }

.form-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
  margin-top: 1.5rem;
}

/* ── Detail layout ───────────────────────────────────────────────────── */
.detail-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 1.25rem;
  align-items: start;
}

.detail-main { display: flex; flex-direction: column; gap: 1.25rem; }
.detail-aside { display: flex; flex-direction: column; gap: 1rem; }

/* ── Info list (dl) ──────────────────────────────────────────────────── */
.info-list {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.1rem 1rem;
  padding: 1rem;
  font-size: 13px;
}

.info-list dt {
  color: var(--color-text-muted);
  font-weight: 500;
  padding: 0.3rem 0;
  white-space: nowrap;
}

.info-list dd {
  color: var(--color-text);
  margin: 0;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--color-border);
}

/* ── Log list ────────────────────────────────────────────────────────── */
.log-list {
  list-style: none;
  margin: 0;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.log-entry {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  font-size: 12px;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--color-border);
}
.log-entry:last-child { border-bottom: none; }

.log-time { color: var(--color-text-muted); white-space: nowrap; min-width: 68px; }
.log-summary { color: var(--color-text-muted); font-size: 11px; flex: 1; min-width: 0; }

.action-code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--color-surface-raised);
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  color: var(--color-text-secondary);
}

/* ── Pagination ──────────────────────────────────────────────────────── */
.pagination-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 13px;
}

.pagination-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.25rem;
}

.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 13px;
  text-decoration: none;
  transition: var(--transition);
}
.page-btn:hover { border-color: var(--color-accent); color: var(--color-accent); text-decoration: none; }
.page-btn.active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.page-ellipsis { color: var(--color-text-muted); padding: 0 0.25rem; line-height: 30px; }
.pagination-info { margin-left: auto; color: var(--color-text-muted); font-size: 12px; }

/* ── Empty state ─────────────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  gap: 0.75rem;
  color: var(--color-text-muted);
  text-align: center;
}

.empty-state-icon { font-size: 3rem; color: var(--color-border); }
.empty-state p { margin: 0; font-size: 14px; }

.empty-state-inline {
  padding: 1.5rem;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 13px;
}

/* ── Misc ────────────────────────────────────────────────────────────── */
.row-muted { opacity: 0.55; }

.file-link {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 12px;
  color: var(--color-accent);
  text-decoration: none;
}
.file-link:hover { text-decoration: underline; }

.inline-form { display: inline; }
.inline-input-group { display: flex; align-items: center; gap: 0.35rem; }

.status-form { padding: 1rem; }

code { font-family: var(--font-mono); font-size: 12px; color: var(--color-info); background: transparent; padding: 0; }

/* ── Button variants (outline / warning / danger) ───────────────────── */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
  white-space: nowrap;
}
.btn-outline:hover { border-color: var(--color-border-hover); color: var(--color-text); text-decoration: none; }

.btn-warning {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: rgba(217,119,6,0.18);
  color: var(--color-warning);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
  white-space: nowrap;
}
.btn-warning:hover { background: rgba(217,119,6,0.28); color: var(--color-warning); text-decoration: none; }

.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: rgba(220,38,38,0.16);
  color: var(--color-danger);
  border: 1px solid var(--color-danger-border);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
  white-space: nowrap;
}
.btn-danger:hover { background: rgba(220,38,38,0.28); color: var(--color-danger); text-decoration: none; }

/* Sizes */
.btn-sm { padding: 0.35rem 0.75rem; font-size: 12px; }

/* ── Status badge shorthand (used in admin templates) ───────────────── */
/* Base */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid;
  letter-spacing: 0.01em;
}
/* Shortcuts map to bill-status palette */
.status-expected   { background:#374151; border-color:#374151; color:#e5e7eb; }
.status-waiting    { background:#b45309; border-color:#b45309; color:#fff; }
.status-uploaded   { background:#1d4ed8; border-color:#1d4ed8; color:#fff; }
.status-ready      { background:#7c3aed; border-color:#7c3aed; color:#fff; }
.status-sent       { background:#0d9488; border-color:#0d9488; color:#fff; }
.status-paid       { background:#059669; border-color:#059669; color:#fff; }
.status-overdue    { background:#dc2626; border-color:#dc2626; color:#fff; }
.status-skipped    { background:#6b7280; border-color:#6b7280; color:#fff; }
.status-cancelled  { background:#57534e; border-color:#57534e; color:#fff; }

/* ── Modal overlay ───────────────────────────────────────────────────── */
.bt-modal {
  display: flex !important;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 1050;
  align-items: center;
  justify-content: center;
}
.bt-modal--hidden { display: none !important; }

/* ── Log Feed ────────────────────────────────────────────────────────── */
.log-feed { display: flex; flex-direction: column; gap: 4px; }

.log-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: background var(--transition);
}
.log-item:hover { background: var(--color-surface-raised); }

.log-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.log-icon.log-success { background: #059669; color: #fff; }
.log-icon.log-info    { background: #2b55b0; color: #fff; }
.log-icon.log-warning { background: #D97706; color: #fff; }
.log-icon.log-danger  { background: #DC2626; color: #fff; }
.log-icon.log-muted   { background: #4b5563; color: #d1d5db; }

.log-body { flex: 1; min-width: 0; }

.log-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

.log-action-label {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  color: #fff;
}
.log-action-label.log-success { background: #059669; }
.log-action-label.log-info    { background: #2b55b0; }
.log-action-label.log-warning { background: #D97706; }
.log-action-label.log-danger  { background: #DC2626; }
.log-action-label.log-muted   { background: #4b5563; }

.log-time {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--color-text-muted);
  margin-left: auto;
  white-space: nowrap;
}

.log-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.log-user, .log-object {
  display: flex;
  align-items: center;
  gap: 4px;
}
.log-summary {
  color: var(--color-text-muted);
  font-size: 12px;
  word-break: break-word;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .detail-layout { grid-template-columns: 1fr; }
  .detail-aside { grid-row: 1; }
}

@media (max-width: 768px) {
  /* Content padding */
  :root { --content-padding: 1rem; }

  /* Grids */
  .form-grid-2        { grid-template-columns: 1fr; }
  .stat-grid          { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid     { grid-template-columns: 1fr; }

  /* Page header: stack on mobile */
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .page-header .btn-primary,
  .page-header .btn-secondary {
    width: 100%;
    justify-content: center;
  }

  /* Filter bar: stack filters */
  .filter-bar {
    flex-direction: column;
    gap: 0.5rem;
  }
  .filter-bar select,
  .filter-bar input[type=text],
  .filter-bar input[type=search] {
    width: 100%;
  }

  /* Tables: horizontal scroll on small screens */
  .data-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .data-table {
    min-width: 560px;
  }

  /* Cards */
  .card { border-radius: var(--radius); }

  /* Breadcrumb: shorten on mobile */
  .breadcrumb { font-size: 12px; }

  /* Detail layout sidebar moves to top */
  .detail-aside { order: -1; }
}

@media (max-width: 480px) {
  /* Stat grid: 1 column on very small screens */
  .stat-grid { grid-template-columns: 1fr; }

  /* Smaller page title */
  .page-title { font-size: 18px; }

  /* Buttons full-width in form actions */
  .form-actions {
    flex-direction: column;
  }
  .form-actions .btn-primary,
  .form-actions .btn-secondary {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* Status & action badges smaller on mobile */
  .bill-status,
  .action-badge { font-size: 10px; padding: 0.15rem 0.5rem; }
}

/* ── Delete modal box ────────────────────────────────────────────────── */
.modal-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 10px);
  width: 100%;
  max-width: 440px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  overflow: hidden;
}
.modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
}
.modal-header .modal-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(220,38,38,.15);
  border: 1px solid var(--color-danger-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-danger);
  font-size: 16px;
  flex-shrink: 0;
}
.modal-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}
.modal-body {
  padding: 16px 20px;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.55;
}
.modal-body strong { color: var(--color-text); }
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-2);
}

/* ── Deleted value display in forms / detail pages ───────────────────── */
.deleted-value {
  text-decoration: line-through;
  color: var(--color-text-muted);
  opacity: .7;
}
.deleted-value::after {
  content: ' (удалён)';
  text-decoration: none;
  font-size: 11px;
  font-style: italic;
  opacity: .85;
}
.deleted-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.1rem 0.5rem;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 500;
  background: rgba(107,114,128,.15);
  border: 1px solid rgba(107,114,128,.3);
  color: var(--color-text-muted);
}

/* ── Utility: inline style replacements ─────────────────────────────── */

/* Log feed icons */
.log-icon-sm { font-size: 11px; }
.log-user--system { color: var(--color-text-muted); font-style: italic; }

/* Inline add-period form panel */
.add-period-form {
  display: none;
  padding: 16px;
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
}
.add-period-form--open { display: block; }

/* Form group modifiers */
.form-group--no-mb { margin-bottom: 0; }
.form-group--hidden { display: none; }

/* Inline button row */
.btn-row { display: flex; gap: 8px; }

/* Narrow input (e.g. days-before, amount) */
.input-narrow { max-width: 120px; }

/* Settings layout */
.settings-card { max-width: 640px; margin-bottom: 20px; }
.settings-card--last { max-width: 640px; }

/* Icon with right margin in card titles */
.icon-mr { margin-right: 6px; }

/* Form actions with wrap */
.form-actions--wrap { flex-wrap: wrap; gap: 8px; }

/* Card footer */
.card-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--color-border);
}

/* Inline form (no margins) */
.form-inline { display: inline; }

/* Form hint with top spacing */
.form-hint--spaced { margin-top: 8px; margin-bottom: 0; }

/* Info list with padding */
.info-list--padded { padding: 16px 20px; }

/* Card body with standard padding */
.card-body--padded { padding: 16px 20px; }

/* Small muted hint text */
.text-hint {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  margin-bottom: 16px;
}

/* Delete modal form (no margin) */
.delete-form-inline { margin: 0; }

/* ── Admin layout helpers ─────────────────────────────────────────── */

/* Page header with actions */
.admin-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* Admin search form width */
.admin-search { max-width: 360px; }

/* Search input row */
.search-row { display: flex; gap: 8px; }

/* Page header with back button */
.page-header-with-back { display: flex; align-items: center; gap: 12px; }

/* User edit layout */
.user-edit-layout {
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* User status row */
.user-status-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

/* Status label */
.status-label { font-size: 0.875rem; font-weight: 500; }

/* Status badge with left margin */
.status-badge--ml { margin-left: 6px; }

/* Form actions row with top margin */
.form-actions-row {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

/* Card hint text */
.card-text-hint {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  margin-bottom: 16px;
}

/* ── Admin users table helpers ───────────────────────────────────────── */

/* Table card with horizontal scroll */
.table-overflow { overflow-x: auto; }

/* User cell layout (avatar + name) */
.user-cell { display: flex; align-items: center; gap: 10px; }
.user-avatar-sm { width: 32px; height: 32px; font-size: 0.85rem; flex-shrink: 0; }
.user-display-name { font-weight: 500; }
.user-sub-label { font-size: 0.78rem; color: var(--color-text-muted); }

/* Small muted table cells */
.td-muted { font-size: 0.875rem; color: var(--color-text-muted); }

/* Inline action buttons cell */
.actions-cell { display: flex; gap: 6px; }

/* Empty-state table row */
.table-empty-cell { text-align: center; color: var(--color-text-muted); padding: 32px; }

/* Modal inner card (create user popup) */
.modal-inner-card { width: 100%; max-width: 480px; margin: 16px; padding: 10px; }

/* Utility: hide element via class (JS toggle) */
.btn--hidden { display: none; }

/* ── Spacing utilities ───────────────────────────────────────────────── */
.mb-3 { margin-bottom: 12px; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }