/* АВТО-255 Admin — переиспользуемые компоненты:
 * карточки, статус-бейджи, иконочные плитки, кнопки, модули Django. */

/* ── Карточка-поверхность ─────────────────────────────────────────────── */

.av-card {
  background: var(--av-surface);
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius-lg);
  box-shadow: var(--av-shadow-sm);
}

.av-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
}

.av-card__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--av-text);
  letter-spacing: -0.01em;
}

.av-card__subtitle {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--av-text-muted);
}

.av-card__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--av-accent) !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.av-card__link:hover { text-decoration: underline !important; }

/* ── Иконочная плитка раздела ─────────────────────────────────────────── */

.av-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: var(--av-radius-sm);
  color: var(--av-tile-fg);
  background: var(--av-tile-violet);
}
.av-tile svg { width: 19px; height: 19px; }
.av-tile--lg { width: 44px; height: 44px; border-radius: var(--av-radius); }
.av-tile--lg svg { width: 22px; height: 22px; }
.av-tile--sm { width: 30px; height: 30px; border-radius: var(--av-radius-sm); }
.av-tile--sm svg { width: 16px; height: 16px; }

.av-tile--violet { background: var(--av-tile-violet); }
.av-tile--green  { background: var(--av-tile-green); }
.av-tile--amber  { background: var(--av-tile-amber); }
.av-tile--blue   { background: var(--av-tile-blue); }
.av-tile--pink   { background: var(--av-tile-pink); }
.av-tile--cyan   { background: var(--av-tile-cyan); }
.av-tile--red    { background: var(--av-tile-red); }
.av-tile--indigo { background: var(--av-tile-indigo); }

/* ── Статус-бейджи (единые для заказов, заявок, статей, мониторинга) ──── */

.av-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--av-radius-pill);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid transparent;
}
.av-badge--new,
.av-badge--accent {
  background: var(--av-accent-soft);
  color: var(--av-accent);
  border-color: var(--av-accent-soft);
}
.av-badge--success,
.av-badge--processed {
  background: var(--av-success-bg);
  color: var(--av-success-text);
  border-color: var(--av-success-bg);
}
.av-badge--danger,
.av-badge--cancelled {
  background: var(--av-danger-bg);
  color: var(--av-danger-text);
  border-color: var(--av-danger-bg);
}
.av-badge--warning {
  background: var(--av-warning-bg);
  color: var(--av-warning-text);
  border-color: var(--av-warning-bg);
}
.av-badge--info {
  background: var(--av-info-bg);
  color: var(--av-info-text);
  border-color: var(--av-info-bg);
}
.av-badge--muted,
.av-badge--neutral {
  background: var(--av-neutral-bg);
  color: var(--av-neutral-text);
}

/* Счётчик-пилюля рядом с заголовком. */
.av-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--av-radius-pill);
  background: var(--av-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.av-count--muted { background: var(--av-neutral-bg); color: var(--av-text); }

/* Точка состояния в списках. */
.av-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--av-text-muted);
}
.av-dot--new { background: var(--av-accent); }
.av-dot--done { background: var(--av-success); }

/* Дельта «+3 / −2» у KPI. */
.av-delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 600;
}
.av-delta--up { color: var(--av-success-text); }
.av-delta--down { color: var(--av-danger-text); }
.av-delta--flat { color: var(--av-text-muted); }

/* ── Кнопки новой оболочки ────────────────────────────────────────────── */

.av-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--av-radius-sm);
  border: 1px solid transparent;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none !important;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.av-btn:active { transform: translateY(1px); }

.av-btn--primary {
  background: var(--av-accent-gradient);
  color: #fff !important;
  box-shadow: var(--av-shadow-accent);
}
.av-btn--primary:hover { filter: brightness(1.06); color: #fff !important; }

.av-btn--ghost {
  background: var(--av-surface);
  border-color: var(--av-border);
  color: var(--av-text) !important;
}
.av-btn--ghost:hover { background: var(--av-surface-hover); border-color: var(--av-border-strong); }

/* Modules / tables — без вложенных рамок */
.module {
  background: var(--admin-surface) !important;
  border: 1px solid var(--admin-border) !important;
  border-radius: var(--admin-radius) !important;
  overflow: visible !important;
  margin-bottom: 16px !important;
}

.module table {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  width: 100% !important;
}

.module h2,
.module caption {
  background: var(--admin-surface-hover) !important;
  color: var(--admin-text) !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--admin-border) !important;
}

.module th,
.module td {
  border-color: var(--admin-border) !important;
  color: var(--admin-text-secondary) !important;
}

.module a { color: var(--admin-text) !important; }
.module a:hover { color: var(--admin-accent) !important; }

#changelist,
#changelist .results,
.change-list .filtered,
#changelist-form,
.change-list #content-main {
  background: var(--admin-bg) !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#changelist .results {
  overflow-x: auto !important;
}

.paginator,
#changelist .paginator,
.change-list .paginator {
  background: var(--admin-surface) !important;
  color: var(--admin-text-secondary) !important;
  border: 1px solid var(--admin-border) !important;
  border-radius: var(--admin-radius) !important;
  padding: 10px 14px !important;
}

#result_list {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
}

#result_list thead th {
  background: var(--admin-surface-hover) !important;
  color: var(--admin-text) !important;
  font-weight: 600 !important;
  border: none !important;
  border-bottom: 1px solid var(--admin-border-strong) !important;
}

#result_list tbody tr {
  background: var(--admin-surface) !important;
  color: var(--admin-text-secondary) !important;
}

#result_list tbody tr:nth-child(even) { background: var(--admin-bg-alt) !important; }
#result_list tbody tr:hover { background: var(--admin-surface-hover) !important; }
#result_list tbody tr.selected { background: var(--admin-accent-soft) !important; }
#result_list a { color: var(--admin-text) !important; }
#result_list a:hover { color: var(--admin-accent) !important; }

#changelist-filter {
  background: var(--admin-surface) !important;
  border: 1px solid var(--admin-border) !important;
  border-radius: var(--admin-radius) !important;
}

#changelist-filter h2 {
  background: var(--admin-surface-hover) !important;
  color: var(--admin-text) !important;
  border-bottom: 1px solid var(--admin-border) !important;
}

#changelist-filter h3,
#changelist-filter li { color: var(--admin-text-secondary) !important; }
#changelist-filter a { color: var(--admin-text-secondary) !important; }
#changelist-filter li.selected a { color: var(--admin-accent) !important; }

/* Django action links */
a.addlink,
.addlink {
  color: var(--admin-accent) !important;
  background: transparent !important;
  padding-left: 0 !important;
}

#nav-sidebar a.addlink {
  color: var(--admin-accent) !important;
  font-size: 12px !important;
  padding: 4px 10px !important;
  opacity: 0.9;
}

#nav-sidebar a.addlink:hover {
  background: var(--admin-accent-softer) !important;
  opacity: 1;
}

a.changelink { color: var(--admin-text-secondary) !important; }
a.deletelink {
  color: var(--admin-danger) !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

a.deletelink:hover {
  color: #b91c1c !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}
/* ── Кнопки (фиолетовые, как на сайте) ── */
.button,
input[type="submit"],
input[type="button"],
.submit-row input,
a.button,
#toolbar form input[type="submit"],
.actions input[type="submit"],
.actions .button,
.object-tools a.addlink {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--admin-btn-gradient) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--admin-radius) !important;
  padding: 10px 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  text-transform: none !important;
  box-shadow: var(--admin-btn-shadow) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
}

.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.submit-row input:hover,
a.button:hover,
#toolbar form input[type="submit"]:hover,
.actions input[type="submit"]:hover {
  background: linear-gradient(135deg, #b49bfc 0%, #9b7bf7 45%, #8b5cf6 100%) !important;
  color: #fff !important;
  box-shadow: var(--admin-btn-shadow-hover) !important;
  transform: translateY(-1px) !important;
  filter: brightness(1.03) !important;
}

.button:active,
input[type="submit"]:active,
.object-tools a.addlink:active,
#toolbar form input[type="submit"]:active,
.actions input[type="submit"]:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 10px rgba(139, 92, 246, 0.28) !important;
}

.deletelink-box a,
input[type="submit"].deletelink,
.submit-row input.deletelink {
  background: linear-gradient(135deg, #ef5350 0%, #c62828 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(198, 40, 40, 0.28) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  min-width: 120px;
}

.deletelink-box a:hover,
input[type="submit"].deletelink:hover,
.submit-row input.deletelink:hover {
  background: linear-gradient(135deg, #f87171 0%, #dc2626 100%) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(198, 40, 40, 0.34) !important;
  transform: translateY(-1px) !important;
  filter: brightness(1.03) !important;
}

.submit-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  background: var(--admin-surface) !important;
  border: 1px solid var(--admin-border) !important;
  border-radius: var(--admin-radius) !important;
  padding: 12px 14px !important;
  color: var(--admin-text) !important;
}

.submit-row .deletelink-box {
  margin-left: auto !important;
}

.submit-row .deletelink-box form {
  margin: 0 !important;
}

.object-tools {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  float: none !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.object-tools li {
  float: none !important;
  margin: 0 !important;
  height: auto !important;
}

.object-tools a.historylink,
.object-tools a.viewsitelink {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--admin-surface) !important;
  color: var(--admin-text-secondary) !important;
  border: 1px solid var(--admin-border-strong) !important;
  border-radius: var(--admin-radius) !important;
  padding: 9px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  cursor: pointer !important;
}

.object-tools a.historylink:hover,
.object-tools a.viewsitelink:hover {
  color: var(--admin-accent) !important;
  border-color: rgba(139, 92, 246, 0.45) !important;
  background: var(--admin-accent-softer) !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}

body.change-form #content-main > .object-tools {
  position: static !important;
  display: flex !important;
  justify-content: flex-end !important;
  width: 100% !important;
  margin: 4px 0 24px !important;
  padding: 0 !important;
  float: none !important;
}

body.change-form #content > h1 {
  margin-bottom: 12px !important;
}

.object-tools a.addlink {
  /* Убираем спрайт Django, но оставляем градиент кнопки. */
  background: var(--av-accent-gradient) !important;
  padding-left: 20px !important;
}

.object-tools a.addlink::before {
  content: "+ ";
  font-weight: 700;
}

#nav-sidebar a.addlink {
  display: inline-block !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  color: var(--admin-accent) !important;
  transform: none !important;
}

#nav-sidebar a.addlink:hover {
  background: var(--admin-accent-softer) !important;
  box-shadow: none !important;
  transform: none !important;
}

.paginator { color: var(--admin-text-muted) !important; }
.paginator a { color: var(--admin-text-secondary) !important; }
.paginator a:hover { color: var(--admin-accent) !important; }

#changelist .submit-row,
.change-list .submit-row,
.paginator + .submit-row {
  margin-top: 12px !important;
}

#toolbar,
#changelist-search {
  background: var(--admin-bg-alt) !important;
  color: var(--admin-text) !important;
}

#changelist-search input,
#toolbar #searchbar {
  background: var(--admin-surface) !important;
  color: var(--admin-text) !important;
  border: 1px solid var(--admin-border-strong) !important;
  box-shadow: none !important;
}

#changelist #toolbar {
  border: 1px solid var(--admin-border) !important;
  border-radius: var(--admin-radius-lg) !important;
  padding: 12px 14px !important;
  margin-bottom: 16px !important;
  background: var(--admin-bg-alt) !important;
  box-shadow: none !important;
}

.quiet, .mini.quiet { color: var(--admin-text-muted) !important; }
/* Счётчик на отдельной строке — не обрезается справа */
.actions .action-counter,
#changelist .actions span.action-counter,
#changelist .actions span.all,
#changelist .actions span.clear,
#changelist .actions span.question {
  display: block !important;
  flex: 1 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  order: 99 !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: var(--admin-text-muted) !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  text-align: left !important;
  word-break: normal !important;
  box-sizing: border-box !important;
}