/* ==========================================================================
   admin-modern.css — Light SaaS (Linear/Vercel) theme overlay for 3Kota admin.
   Loaded LAST in base.html, so it overrides Tabler + admin-tailwind.css.
   PURE COSMETICS: no layout/transform changes that affect behaviour, only
   colors, borders, radii, spacing, typography. Fully reversible (remove the
   <link> to revert).
   ========================================================================== */

:root {
  --m-bg: #f6f7f9;
  --m-surface: #ffffff;
  --m-surface-2: #fafbfc;
  --m-border: #e7e9ee;
  --m-border-strong: #dadde3;
  --m-text: #1b2333;
  --m-text-muted: #687087;
  --m-text-subtle: #6b7280; /* darkened from #98a0b0 → ~4.6:1 on white (WCAG AA) */
  --m-accent: #4f46e5;
  --m-accent-hover: #4338ca;
  --m-accent-ink: #ffffff;
  --m-accent-soft: rgba(79, 70, 229, 0.08);
  --m-accent-soft-2: rgba(79, 70, 229, 0.12);
  --m-ring: rgba(79, 70, 229, 0.22);
  --m-radius: 12px;
  --m-radius-sm: 9px;
  --m-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --m-shadow: 0 1px 3px rgba(16, 24, 40, 0.07), 0 1px 2px rgba(16, 24, 40, 0.04);
  --m-shadow-pop: 0 12px 32px rgba(16, 24, 40, 0.12);
  --m-green: #16a34a;
  --m-red: #dc2626;
  --m-amber: #d97706;

  /* Re-point the legacy admin-tailwind tokens to the light theme. */
  --admin-bg: var(--m-bg);
  --admin-card-bg: var(--m-surface);
  --admin-border: var(--m-border);
  --admin-shadow: var(--m-shadow);
  --admin-shadow-soft: var(--m-shadow-sm);
  --admin-accent: var(--m-accent);
}

body {
  background: var(--m-bg);
  color: var(--m-text);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ===================== Sidebar: light ==================================== */
.admin-sidebar {
  background: var(--m-surface) !important;
  border-right: 1px solid var(--m-border);
  box-shadow: none !important;
}

.admin-sidebar-header {
  border-bottom: 1px solid var(--m-border);
  padding-bottom: 14px;
}

.admin-sidebar .navbar-brand h3,
.admin-sidebar .admin-title {
  color: var(--m-text) !important;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Kill the cheap yellow brand title. */
.admin-title {
  color: var(--m-accent) !important;
  text-shadow: none !important;
}

.admin-sidebar .navbar-brand-image {
  border-radius: 10px;
  box-shadow: var(--m-shadow-sm);
}

/* Section labels (dropdown toggles used as group headings). */
.admin-sidebar .nav-item.dropdown > .nav-link.dropdown-toggle {
  color: var(--m-text-subtle) !important;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
}

.admin-sidebar .nav-link {
  color: var(--m-text-muted) !important;
  border-radius: 10px;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}

.admin-sidebar .nav-link .nav-link-title {
  font-weight: 500;
  letter-spacing: 0;
}

.admin-sidebar .nav-link .nav-link-icon,
.admin-sidebar .nav-link i {
  color: var(--m-text-subtle) !important;
}

.admin-sidebar .nav-link:hover {
  background: var(--m-surface-2) !important;
  color: var(--m-text) !important;
}

.admin-sidebar .nav-link:hover .nav-link-icon,
.admin-sidebar .nav-link:hover i {
  color: var(--m-text-muted) !important;
}

.admin-sidebar .nav-link.active {
  background: var(--m-accent-soft) !important;
  color: var(--m-accent-hover) !important;
  font-weight: 600;
}

.admin-sidebar .nav-link.active .nav-link-icon,
.admin-sidebar .nav-link.active i {
  color: var(--m-accent) !important;
}

/* Sidebar collapse toggle (was light-on-dark). */
.admin-sidebar .btn-ghost {
  color: var(--m-text-muted) !important;
  border: 1px solid var(--m-border) !important;
  background: var(--m-surface) !important;
  border-radius: 10px;
}

.admin-sidebar .btn-ghost:hover {
  background: var(--m-surface-2) !important;
  color: var(--m-text) !important;
}

/* Logout button. */
.admin-logout {
  border-radius: 10px;
  border: 1px solid var(--m-border) !important;
  background: var(--m-surface) !important;
  color: var(--m-text-muted) !important;
  font-weight: 600;
}

.admin-logout:hover {
  background: rgba(220, 38, 38, 0.06) !important;
  border-color: rgba(220, 38, 38, 0.28) !important;
  color: var(--m-red) !important;
}

/* ===================== Page header ====================================== */
.page-wrapper {
  background: transparent;
}

.page-title {
  color: var(--m-text);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.page-pretitle {
  color: var(--m-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  font-weight: 600;
}

.admin-mobile-toggle {
  background: var(--m-accent) !important;
  border-color: var(--m-accent) !important;
  color: #fff !important;
  box-shadow: var(--m-shadow) !important;
}

/* ===================== Cards ============================================ */
.card {
  background: var(--m-surface);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow-sm);
}

.card-header {
  border-bottom: 1px solid var(--m-border);
  background: transparent;
  padding-top: 16px;
  padding-bottom: 16px;
}

.card-title,
.card-header .card-title {
  font-weight: 700;
  color: var(--m-text);
  letter-spacing: -0.01em;
}

.card-footer {
  border-top: 1px solid var(--m-border);
  background: transparent;
}

/* Stat / KPI cards subtle accent on top. */
.card .subheader,
.text-muted,
.text-secondary {
  color: var(--m-text-muted) !important;
}

/* ===================== Buttons ========================================= */
.btn {
  border-radius: var(--m-radius-sm);
  font-weight: 600;
  border-color: var(--m-border-strong);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.04s ease;
}

.btn:active {
  transform: translateY(0.5px);
}

.btn-primary {
  background: var(--m-accent);
  border-color: var(--m-accent);
  color: var(--m-accent-ink);
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--m-accent-hover);
  border-color: var(--m-accent-hover);
  box-shadow: 0 0 0 3px var(--m-ring);
}

.btn-secondary,
.btn-white,
.btn-light,
.btn-default {
  background: var(--m-surface);
  border-color: var(--m-border-strong);
  color: var(--m-text);
}

.btn-secondary:hover,
.btn-white:hover,
.btn-light:hover,
.btn-default:hover {
  background: var(--m-surface-2);
  border-color: var(--m-text-subtle);
  color: var(--m-text);
}

.btn-outline-primary {
  border-color: rgba(79, 70, 229, 0.45);
  color: var(--m-accent-hover);
}

.btn-outline-primary:hover {
  background: var(--m-accent);
  border-color: var(--m-accent);
  color: #fff;
}

.btn-success { background: var(--m-green); border-color: var(--m-green); }
.btn-danger { background: var(--m-red); border-color: var(--m-red); }
.btn-warning { background: var(--m-amber); border-color: var(--m-amber); color: #fff; }

.btn-outline-danger {
  border-color: rgba(220, 38, 38, 0.4);
  color: var(--m-red);
}
.btn-outline-danger:hover {
  background: var(--m-red);
  border-color: var(--m-red);
  color: #fff;
}

/* ===================== Tables ========================================== */
.card > .table-responsive {
  border-radius: var(--m-radius);
}

.table {
  color: var(--m-text);
  margin-bottom: 0;
}

.table thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--m-text-subtle);
  font-weight: 600;
  background: var(--m-surface-2);
  border-bottom: 1px solid var(--m-border);
  padding-top: 12px;
  padding-bottom: 12px;
}

.table tbody td {
  border-top: 1px solid var(--m-border);
  vertical-align: middle;
  padding-top: 11px;
  padding-bottom: 11px;
}

.table tbody tr:hover {
  background: var(--m-accent-soft);
}

.table tbody tr:hover td {
  background: transparent;
}

/* Links inside tables. */
.table a {
  color: var(--m-accent-hover);
  text-decoration: none;
  font-weight: 500;
}
.table a:hover {
  color: var(--m-accent);
  text-decoration: underline;
}

/* ===================== Badges / pills =================================== */
.badge {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.34em 0.7em;
}

.badge.bg-blue,
.badge.bg-primary {
  background: var(--m-accent-soft-2) !important;
  color: var(--m-accent-hover) !important;
}
.badge.bg-green,
.badge.bg-success {
  background: rgba(22, 163, 74, 0.12) !important;
  color: #15803d !important;
}
.badge.bg-red,
.badge.bg-danger {
  background: rgba(220, 38, 38, 0.12) !important;
  color: #b91c1c !important;
}
.badge.bg-yellow,
.badge.bg-warning {
  background: rgba(217, 119, 6, 0.14) !important;
  color: #b45309 !important;
}

/* ===================== Forms / inputs =================================== */
.form-label {
  color: var(--m-text);
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
}

.form-control,
.form-select {
  border-radius: var(--m-radius-sm);
  border: 1px solid var(--m-border-strong);
  color: var(--m-text);
  background: var(--m-surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control::placeholder {
  color: var(--m-text-subtle);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--m-accent);
  box-shadow: 0 0 0 3px var(--m-ring);
}

.form-hint,
.form-text {
  color: var(--m-text-muted);
}

.input-group-text {
  background: var(--m-surface-2);
  border-color: var(--m-border-strong);
  color: var(--m-text-muted);
  border-radius: var(--m-radius-sm);
}

/* Checkboxes / switches accent. */
.form-check-input:checked {
  background-color: var(--m-accent);
  border-color: var(--m-accent);
}
.form-check-input:focus {
  border-color: var(--m-accent);
  box-shadow: 0 0 0 3px var(--m-ring);
}

/* Select2 to match. */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border-radius: var(--m-radius-sm) !important;
  border: 1px solid var(--m-border-strong) !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--m-accent) !important;
  box-shadow: 0 0 0 3px var(--m-ring);
}
.select2-dropdown {
  border-color: var(--m-border-strong);
  border-radius: var(--m-radius-sm);
  box-shadow: var(--m-shadow-pop);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--m-accent) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--m-accent-soft) !important;
  border: 1px solid rgba(79, 70, 229, 0.25) !important;
  color: var(--m-accent-hover) !important;
  border-radius: 999px !important;
}

/* ===================== Dropdown menus ================================== */
.dropdown-menu {
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow-pop);
  padding: 6px;
}
.dropdown-item {
  border-radius: 8px;
  color: var(--m-text);
  font-weight: 500;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--m-surface-2);
  color: var(--m-text);
}
.dropdown-item.active,
.dropdown-item:active {
  background: var(--m-accent);
  color: #fff;
}

/* ===================== Pagination ===================================== */
.page-link {
  color: var(--m-text-muted);
  border-radius: 8px;
  border: 1px solid transparent;
  margin: 0 2px;
}
.page-link:hover {
  background: var(--m-surface-2);
  color: var(--m-text);
}
.page-item.active .page-link {
  background: var(--m-accent);
  border-color: var(--m-accent);
  color: #fff;
}

/* ===================== Alerts ========================================== */
.alert {
  border-radius: var(--m-radius);
  border: 1px solid var(--m-border);
}
.alert-success { background: rgba(22, 163, 74, 0.08); border-color: rgba(22, 163, 74, 0.25); color: #166534; }
.alert-danger { background: rgba(220, 38, 38, 0.07); border-color: rgba(220, 38, 38, 0.25); color: #991b1b; }
.alert-warning { background: rgba(217, 119, 6, 0.08); border-color: rgba(217, 119, 6, 0.25); color: #92400e; }
.alert-info { background: var(--m-accent-soft); border-color: rgba(79, 70, 229, 0.22); color: var(--m-accent-hover); }

/* ===================== Modals ========================================= */
.modal-content {
  border: 1px solid var(--m-border);
  border-radius: 16px;
  box-shadow: var(--m-shadow-pop);
}
.modal-header,
.modal-footer {
  border-color: var(--m-border);
}

/* ===================== Login page ===================================== */
body:has(form.card[action*="login"]) {
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(79, 70, 229, 0.10), transparent 60%),
    var(--m-bg);
}

form.card[action*="login"] {
  border-radius: 18px;
  box-shadow: var(--m-shadow-pop);
  border: 1px solid var(--m-border);
}

form.card[action*="login"] .card-title {
  letter-spacing: -0.02em;
}

/* ===================== Mobile (≤991.98px) color fixes ================== */
/* admin-tailwind.css styles the mobile drawer for a DARK sidebar; recolor
   it for the light theme. Layout/transform rules are left untouched. */
@media (max-width: 991.98px) {
  .admin-sidebar {
    box-shadow: 0 24px 60px rgba(16, 24, 40, 0.18) !important;
  }
  .admin-sidebar .admin-sidebar-header {
    border-bottom: 1px solid var(--m-border);
  }
  .admin-sidebar .admin-sidebar-header .btn-ghost {
    border-color: var(--m-border) !important;
    background: var(--m-surface) !important;
    color: var(--m-text-muted) !important;
  }
  .admin-sidebar .nav-link {
    background: var(--m-surface-2) !important;
    color: var(--m-text-muted) !important;
    box-shadow: inset 0 0 0 1px var(--m-border) !important;
  }
  .admin-sidebar .nav-link:hover {
    background: #f0f1f4 !important;
    color: var(--m-text) !important;
  }
  .admin-sidebar .nav-link.active {
    background: var(--m-accent-soft) !important;
    color: var(--m-accent-hover) !important;
    box-shadow: inset 0 0 0 1px rgba(79, 70, 229, 0.3) !important;
  }
  .admin-sidebar .nav-item.dropdown > .nav-link.dropdown-toggle,
  .admin-sidebar .nav-item.dropdown > .nav-link.dropdown-toggle:hover,
  .admin-sidebar .nav-item.dropdown > .nav-link.dropdown-toggle.active {
    background: transparent !important;
    color: var(--m-text-subtle) !important;
    box-shadow: none !important;
  }
  .admin-sidebar .admin-logout {
    background: rgba(220, 38, 38, 0.05) !important;
    border-color: rgba(220, 38, 38, 0.22) !important;
    color: var(--m-red) !important;
  }
}

/* ==========================================================================
   COMPONENT REWORK — structure, not just color.
   ========================================================================== */

/* ---- Variant-less .btn (bare class="btn": "Найти", "Назад", "Отмена",
   reset). Bootstrap base .btn is transparent → looked broken. Give it a real
   secondary appearance. Buttons WITH a variant (btn-primary, btn-close, …)
   contain "btn-" and are excluded. -------------------------------------- */
.btn:not([class*="btn-"]) {
  background: var(--m-surface);
  border-color: var(--m-border-strong);
  color: var(--m-text);
}
.btn:not([class*="btn-"]):hover,
.btn:not([class*="btn-"]):focus {
  background: var(--m-surface-2);
  border-color: var(--m-text-subtle);
  color: var(--m-text);
}

/* ---- Row action icons → real icon-buttons ----------------------------- */
.admin-row-actions {
  white-space: nowrap;
}
.admin-row-actions > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: 5px;
  border-radius: 8px;
  border: 1px solid var(--m-border);
  background: var(--m-surface);
  color: var(--m-text-muted);
  vertical-align: middle;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}
.admin-row-actions > a:first-of-type {
  margin-left: 0;
}
.admin-row-actions > a > span,
.admin-row-actions > a .me-1 {
  margin: 0 !important;
  display: inline-flex;
}
.admin-row-actions > a i {
  font-size: 13px;
  line-height: 1;
}
.admin-row-actions > a:hover {
  background: var(--m-surface-2);
  color: var(--m-text);
  border-color: var(--m-border-strong);
  box-shadow: var(--m-shadow-sm);
}
/* Colour-coded by action (progressive enhancement; degrades to neutral). */
.admin-row-actions > a:has(.fa-eye):hover {
  color: #0284c7;
  border-color: rgba(2, 132, 199, 0.4);
  background: rgba(2, 132, 199, 0.07);
}
.admin-row-actions > a:has(.fa-pen-to-square):hover {
  color: var(--m-accent);
  border-color: rgba(79, 70, 229, 0.4);
  background: var(--m-accent-soft);
}
.admin-row-actions > a:has(.fa-trash):hover {
  color: var(--m-red);
  border-color: rgba(220, 38, 38, 0.4);
  background: rgba(220, 38, 38, 0.06);
}
/* Fixed-layout tables (broadcast) collapsed the actions column to ~1% and
   main.css forces white-space:normal on every cell → the 32px icon-buttons
   wrapped/clipped and looked invisible. Force the actions column to stay on
   one line and reserve room (higher specificity than the main.css td rule). */
.table-responsive table[data-model] td.admin-row-actions {
  white-space: nowrap !important;
  text-align: right;
  overflow: visible;
}
.table-responsive table[data-model="broadcast"] thead th:first-child,
.table-responsive table[data-model="broadcasts"] thead th:first-child {
  width: 40px !important;
}
.table-responsive table[data-model="broadcast"] thead th:nth-child(2),
.table-responsive table[data-model="broadcasts"] thead th:nth-child(2) {
  width: 124px !important;
}

/* Drag handle stays a plain grip, not a button. */
.admin-row-actions .category-drag-handle {
  width: auto;
  height: auto;
  border: 0;
  background: transparent;
  color: var(--m-text-subtle);
  margin-right: 6px !important;
}

/* ---- List toolbar: "Действия" + search aligned -------------------------- */
.admin-list-toolbar {
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.admin-list-actions .btn,
.admin-list-actions .dropdown-toggle {
  min-width: 150px;
  justify-content: space-between;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ---- Search input group ------------------------------------------------- */
.admin-list-search .input-group {
  box-shadow: var(--m-shadow-sm);
  border-radius: var(--m-radius-sm);
}
.admin-list-search .form-control {
  border-right: 0;
}
.admin-list-search #search-button {
  background: var(--m-accent);
  border-color: var(--m-accent);
  color: #fff;
  font-weight: 600;
}
.admin-list-search #search-button:hover {
  background: var(--m-accent-hover);
  border-color: var(--m-accent-hover);
  color: #fff;
}
.admin-list-search #search-reset {
  background: var(--m-surface);
  border-color: var(--m-border-strong);
  color: var(--m-text-muted);
}
.admin-list-search #search-reset:hover {
  background: rgba(220, 38, 38, 0.06);
  border-color: rgba(220, 38, 38, 0.3);
  color: var(--m-red);
}

/* ---- Inline filter row (product / product-key) -------------------------- */
form[data-admin-filter] .form-label {
  font-size: 12px;
}

/* ---- Filters sidebar ---------------------------------------------------- */
.admin-filter-column .card-header {
  padding-top: 14px;
  padding-bottom: 14px;
}
.admin-filter-column .list-group-item {
  border: 0;
  border-bottom: 1px solid var(--m-border);
  padding: 10px 12px;
}
.admin-filter-column .list-group-item:last-child {
  border-bottom: 0;
}
.admin-filter-column .list-group-item > .p-2 {
  padding: 0 !important;
}
.admin-filter-column .list-group-item .fw-bold {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--m-text-subtle);
  margin-bottom: 6px;
  font-weight: 700 !important;
}
.admin-filter-column .list-group-item a {
  display: block;
  padding: 6px 10px;
  margin: 1px 0;
  border-radius: 8px;
  color: var(--m-text-muted);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}
.admin-filter-column .list-group-item a:hover {
  background: var(--m-accent-soft);
  color: var(--m-accent-hover);
}

/* ---- Pagination footer -------------------------------------------------- */
.admin-pagination-footer {
  gap: 14px;
}
.admin-pagination-footer .dropdown .btn {
  border-radius: 8px;
}

/* ---- Details page ------------------------------------------------------- */
.admin-details-table.table-bordered,
.admin-details-table.table-bordered > :not(caption) > * > * {
  border-color: var(--m-border);
}
.admin-details-table thead th {
  background: var(--m-surface-2);
}
.admin-details-table td:first-child {
  color: var(--m-text-muted);
  font-weight: 600;
  width: 240px;
}
.admin-details-table tbody tr:hover td {
  background: var(--m-surface-2);
}
.admin-detail-actions .btn {
  min-height: 40px;
}

/* ---- Modals: tidy footer two-button layout ------------------------------ */
.modal-content {
  overflow: hidden;
}
.modal-status {
  height: 4px;
}
.modal-body h3 {
  font-weight: 700;
  letter-spacing: -0.01em;
}
.modal-footer .btn {
  min-height: 40px;
  font-weight: 600;
}

/* ---- Collapsible <details> card (translations settings) ----------------- */
details.card > summary {
  list-style: none;
  display: flex;
  align-items: center;
  user-select: none;
}
details.card > summary::-webkit-details-marker {
  display: none;
}
details.card > summary::after {
  content: "\25BE";
  margin-left: auto;
  color: var(--m-text-subtle);
  transition: transform 0.15s ease;
}
details.card[open] > summary::after {
  transform: rotate(180deg);
}
details.card > summary:hover {
  background: var(--m-surface-2);
}

/* ---- Form pages (create/edit): readable two-column rows ----------------- */
.admin-form .form-label.col-form-label {
  color: var(--m-text);
  font-weight: 600;
}
.admin-form .form-fieldset {
  background: var(--m-surface);
}
textarea.form-control {
  border-radius: var(--m-radius-sm);
}

/* ---- Audit fixes (15.06.2026) ------------------------------------------- */

/* D3: Tabler "light" badges used on the proxy page (bg-*-lt) were not covered
   by the skin → they rendered in raw Tabler styling ("two different apps"
   seam). Give them the same soft-pill treatment as the solid badges. */
.badge.bg-green-lt,
.badge.bg-success-lt {
  background: rgba(22, 163, 74, 0.12) !important;
  color: #166534 !important;
  border: 1px solid rgba(22, 163, 74, 0.22);
}
.badge.bg-red-lt,
.badge.bg-danger-lt {
  background: rgba(220, 38, 38, 0.12) !important;
  color: #b91c1c !important;
  border: 1px solid rgba(220, 38, 38, 0.22);
}
.badge.bg-orange-lt,
.badge.bg-warning-lt,
.badge.bg-yellow-lt {
  background: rgba(217, 119, 6, 0.14) !important;
  color: #b45309 !important;
  border: 1px solid rgba(217, 119, 6, 0.24);
}
.badge.bg-secondary-lt,
.badge.bg-muted-lt {
  background: var(--m-surface-2) !important;
  color: var(--m-text-muted) !important;
  border: 1px solid var(--m-border);
}

/* D1: destructive bulk actions in the "Действия" dropdown render red. */
.dropdown-item.text-danger { color: var(--m-red) !important; }
.dropdown-item.text-danger:hover,
.dropdown-item.text-danger:focus {
  background: rgba(220, 38, 38, 0.08) !important;
  color: #b91c1c !important;
}

/* Keyboard-accessibility: visible focus ring on interactive elements the skin
   previously only gave hover styling (icon row-actions, pagination, menu items). */
.admin-row-actions > a:focus-visible,
.page-link:focus-visible,
.dropdown-item:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--m-accent);
  outline-offset: 2px;
}