/* ═══════════════════════════════════════════════════════════════════
   VirPhone Switch Skin v5 — modern overlay for Yeti-web (ActiveAdmin).
   Layout mechanics are NEVER overridden on app-owned elements — only
   colors, typography, borders, radii, shadows, padding.
   Real header DOM: #header > h1#site_title, ul#tabs (li.menu_item, five
   li.has_nested carry ul.menu dropdowns), ul#utility_nav.
   Login pages (.logged_out) untouched. The dashboard page gets the full
   custom overlay (see bottom + vp-dashboard.js).
   ═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --vp-bg: #f7f8fa;
  --vp-card: #ffffff;
  --vp-border: #e5e7eb;
  --vp-border-soft: #f1f5f9;
  --vp-ink: #1e293b;
  --vp-body: #374151;
  --vp-muted: #64748b;
  --vp-faint: #94a3b8;
  --vp-accent: #2563eb;
  --vp-accent-ink: #1d4ed8;
  --vp-accent-soft: #eff6ff;
  --vp-ok: #059669;      --vp-ok-bg: #ecfdf5;
  --vp-warn: #d97706;    --vp-warn-bg: #fffbeb;
  --vp-bad: #dc2626;     --vp-bad-bg: #fef2f2;
  --vp-dark: #0f172a;
  --vp-dark-2: #111c33;
  --vp-radius: 12px;
  --vp-radius-sm: 8px;
  --vp-shadow: 0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
  --vp-shadow-lg: 0 12px 32px rgba(16,24,40,.14);
  --vp-font: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --vp-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ── global (login pages are .logged_out — untouched) ───────────── */
body.active_admin.logged_in,
body.active_admin.logged_in #footer,
body.active_admin.logged_in .paginated_collection,
body.active_admin.logged_in #active_admin_content,
body.active_admin.logged_in #main_content_wrapper,
body.active_admin.logged_in #main_content {
  font-family: var(--vp-font) !important;
  background: var(--vp-bg) !important;
  color: var(--vp-body);
  font-size: 14px;
}
body.active_admin.logged_in a { color: var(--vp-accent); }
body.active_admin .mono, body.active_admin code { font-family: var(--vp-mono); font-size: .92em; }

/* ── TOP BAR — colors only; structure/positioning owned by the app ── */
body.active_admin.logged_in #header {
  background: #ffffff !important;
  background-image: none !important;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(16,24,40,.06);
}
body.active_admin.logged_in #header,
body.active_admin.logged_in #header a { text-shadow: none !important; }
body.active_admin #site_title img,
body.active_admin h1.site_title img { height: 32px !important; width: auto !important; }

/* top-level items (#tabs > li) — font + color only */
body.active_admin #header #tabs > li > a {
  color: #374151 !important;
  font-family: var(--vp-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
body.active_admin #header #tabs > li > a:hover,
body.active_admin #header #tabs > li:hover > a,
body.active_admin #header #tabs > li.current > a,
body.active_admin #header #tabs > li.has-current > a {
  color: var(--vp-accent) !important;
}
body.active_admin #header #tabs > li#servertime {
  color: var(--vp-faint) !important;
  font-family: var(--vp-mono) !important;
  font-size: 12px !important;
}

/* dropdown panels (li.has_nested > ul.menu): visual skin only */
body.active_admin #header #tabs > li > ul.menu {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 32px rgba(16,24,40,.14) !important;
}
body.active_admin #header #tabs > li > ul.menu li a {
  color: #374151 !important;
  font-family: var(--vp-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-shadow: none !important;
}
body.active_admin #header #tabs > li > ul.menu li a:hover {
  background: var(--vp-accent-soft) !important;
  color: var(--vp-accent) !important;
}
body.active_admin #header #tabs > li > ul.menu li.current > a {
  background: var(--vp-accent-soft) !important;
  color: var(--vp-accent) !important;
  font-weight: 600 !important;
}
/* group label rows inside dropdowns (plain divs, no links) */
body.active_admin #header #tabs > li > ul.menu li > div {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--vp-faint) !important;
}

/* right side: clock + user links */
body.active_admin #utility_nav a { color: var(--vp-muted) !important; font-family: var(--vp-font) !important; font-size: 13px !important; font-weight: 500; text-shadow: none !important; }
body.active_admin #utility_nav a:hover { color: var(--vp-accent) !important; }
body.active_admin #utility_nav li.mono,
body.active_admin #utility_nav #logged_as { color: var(--vp-faint); font-size: 12px; font-family: var(--vp-mono); }

/* menu icons injected by vp-skin.js */
.vp-ico {
  width: 13px; height: 13px;
  margin-right: 6px;
  vertical-align: -2px;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .8;
}

/* ── title bar / breadcrumbs / actions ──────────────────────────── */
body.active_admin #title_bar {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  font-family: var(--vp-font) !important;
}
body.active_admin #title_bar h2 {
  color: var(--vp-ink) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  font-family: var(--vp-font) !important;
  text-shadow: none !important;
}
body.active_admin #title_bar .breadcrumb { font-size: 12.5px; }
body.active_admin #title_bar .breadcrumb a,
body.active_admin #title_bar .breadcrumb span { color: var(--vp-muted) !important; }
body.active_admin .action_items a,
body.active_admin a.button,
body.active_admin button.button,
body.active_admin input[type=submit].button {
  display: inline-block;
  padding: 7px 13px !important;
  border-radius: var(--vp-radius-sm) !important;
  border: 1px solid var(--vp-border) !important;
  background: #ffffff !important;
  background-image: none !important;
  color: var(--vp-body) !important;
  font: 600 13px var(--vp-font) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  cursor: pointer;
}
body.active_admin .action_items a:hover,
body.active_admin a.button:hover { background: #f8fafc !important; border-color: #d1d5db !important; }
body.active_admin a.button.danger { color: var(--vp-bad) !important; border-color: #fecaca !important; }
body.active_admin a.delete { color: var(--vp-bad) !important; }

/* ── data tables ────────────────────────────────────────────────── */
body.active_admin .paginated_collection {
  background: var(--vp-card) !important;
  border: 1px solid var(--vp-border) !important;
  border-radius: var(--vp-radius) !important;
  box-shadow: var(--vp-shadow) !important;
}
body.active_admin .paginated_collection > .index_content,
body.active_admin .index_content { overflow-x: auto; }
body.active_admin .pagination_information {
  padding: 11px 16px !important;
  font: 500 12.5px var(--vp-font) !important;
  color: var(--vp-muted) !important;
}
body.active_admin table.index_table { font-family: var(--vp-font) !important; }
body.active_admin table.index_table th {
  background: #f9fafb !important;
  background-image: none !important;
  border-bottom: 1px solid var(--vp-border-soft) !important;
  padding: 10px 14px !important;
  font: 600 11px var(--vp-font) !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--vp-muted) !important;
  text-align: left;
  white-space: nowrap;
}
body.active_admin table.index_table th a { color: var(--vp-muted) !important; font: inherit !important; text-decoration: none; }
body.active_admin table.index_table th a:hover { color: var(--vp-accent) !important; }
body.active_admin table.index_table th.sorted-asc a::after { content: ' ↑'; color: var(--vp-accent); }
body.active_admin table.index_table th.sorted-desc a::after { content: ' ↓'; color: var(--vp-accent); }
body.active_admin table.index_table td {
  border-top: 1px solid var(--vp-border-soft) !important;
  padding: 10px 14px !important;
  font: 400 13.5px var(--vp-font) !important;
  color: var(--vp-body);
  vertical-align: middle;
}
body.active_admin table.index_table tr:hover td { background: #f8fafc !important; }
body.active_admin table.index_table td.id, body.active_admin table.index_table td.integer { font-family: var(--vp-mono); font-size: 12.5px; }
body.active_admin table.index_table a { font-weight: 600; }

/* status / boolean pills */
.vp-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font: 700 11px var(--vp-font); letter-spacing: .02em; text-transform: uppercase;
  white-space: nowrap;
}
.vp-pill::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.vp-pill.yes { background: var(--vp-ok-bg); color: var(--vp-ok); }
.vp-pill.no  { background: #f1f5f9; color: var(--vp-faint); }
.vp-pill.warn{ background: var(--vp-warn-bg); color: var(--vp-warn); }
.vp-pill.bad { background: var(--vp-bad-bg); color: var(--vp-bad); }

/* pagination footer */
body.active_admin .pagination {
  padding: 11px 16px !important;
  font-family: var(--vp-font) !important;
  border-top: 1px solid var(--vp-border-soft);
}
body.active_admin .pagination a,
body.active_admin .pagination span {
  border: 1px solid var(--vp-border) !important;
  background: #fff !important;
  border-radius: var(--vp-radius-sm) !important;
  padding: 4px 10px !important;
  color: var(--vp-body) !important;
  font: 500 12.5px var(--vp-font) !important;
  margin: 0 2px 0 0 !important;
}
body.active_admin .pagination a:hover { background: var(--vp-accent-soft) !important; color: var(--vp-accent) !important; }
body.active_admin .pagination .current {
  background: var(--vp-accent) !important;
  border-color: var(--vp-accent) !important;
  color: #fff !important;
  font-weight: 700;
}
body.active_admin .pagination .page.gap, body.active_admin .pagination span.gap { border: none !important; }

/* ── sidebar / filters — visual card skin only ── */
body.active_admin #sidebar {
  background: var(--vp-card) !important;
  border: 1px solid var(--vp-border) !important;
  border-radius: var(--vp-radius) !important;
  box-shadow: var(--vp-shadow) !important;
  font-family: var(--vp-font) !important;
}
body.active_admin #sidebar h3 {
  background: #f9fafb !important;
  background-image: none !important;
  border-bottom: 1px solid var(--vp-border-soft) !important;
  color: var(--vp-ink) !important;
  font: 700 14px var(--vp-font) !important;
  text-shadow: none !important;
}
body.active_admin form.filter_form { background: transparent !important; border: none !important; box-shadow: none !important; }
body.active_admin form.filter_form fieldset { border: none !important; }
body.active_admin form.filter_form label { color: var(--vp-muted) !important; font: 600 12px var(--vp-font) !important; }
body.active_admin .filter_form_field select,
body.active_admin .filter_form_field input {
  border: 1px solid var(--vp-border) !important;
  border-radius: var(--vp-radius-sm) !important;
  font: 400 13px var(--vp-font) !important;
  color: var(--vp-ink) !important;
  background: #fff !important;
  box-shadow: none !important;
  min-height: 36px;
}
body.active_admin form.filter_form .buttons input[type=submit] {
  background: var(--vp-accent) !important;
  border: 1px solid var(--vp-accent) !important;
  color: #fff !important;
  border-radius: var(--vp-radius-sm) !important;
  font: 600 13px var(--vp-font) !important;
  text-shadow: none !important;
  padding: 7px 13px !important;
}
body.active_admin .filter-actions a.clear_filters_btn,
body.active_admin a.clear_filters_btn {
  background: #fff !important;
  border: 1px solid var(--vp-border) !important;
  color: var(--vp-muted) !important;
  border-radius: var(--vp-radius-sm) !important;
  font: 600 12.5px var(--vp-font) !important;
  text-shadow: none !important;
  padding: 7px 12px !important;
}

/* ── forms (new/edit) ───────────────────────────────────────────── */
body.active_admin form.formtastic {
  background: var(--vp-card) !important;
  border: 1px solid var(--vp-border) !important;
  border-radius: var(--vp-radius) !important;
  box-shadow: var(--vp-shadow) !important;
}
body.active_admin form.formtastic fieldset { border: none !important; }
/* Yeti renders each section legend as a full-width blue bar — restyle to a
   quiet uppercase section label */
body.active_admin form.formtastic legend,
body.active_admin form.formtastic legend span,
#vp-dash .vpm-inner form.formtastic legend,
#vp-dash .vpm-inner form.formtastic legend span {
  background: transparent !important;
  background-image: none !important;
  color: var(--vp-ink) !important;
  font: 700 12px var(--vp-font) !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 0 !important;
  margin: 0 !important;
  width: auto !important;
  display: inline-block;
  text-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.active_admin form.formtastic legend { color: var(--vp-ink) !important; font: 700 14px var(--vp-font) !important; }
body.active_admin form.formtastic label { color: var(--vp-ink) !important; font: 600 12.5px var(--vp-font) !important; }
body.active_admin form.formtastic label abbr { color: var(--vp-bad); }
body.active_admin form.formtastic input[type=text],
body.active_admin form.formtastic input[type=password],
body.active_admin form.formtastic input[type=email],
body.active_admin form.formtastic input[type=number],
body.active_admin form.formtastic input[type=date],
body.active_admin form.formtastic textarea,
body.active_admin form.formtastic select,
body.active_admin .formtastic select {
  border: 1px solid var(--vp-border) !important;
  border-radius: var(--vp-radius-sm) !important;
  font: 400 13.5px var(--vp-font) !important;
  color: var(--vp-ink) !important;
  background: #fff !important;
  box-shadow: none !important;
}
body.active_admin form.formtastic input:focus,
body.active_admin form.formtastic select:focus,
body.active_admin form.formtastic textarea:focus {
  outline: 2px solid #bfdbfe !important;
  border-color: var(--vp-accent) !important;
}
body.active_admin form.formtastic p.inline-hints,
body.active_admin form.formtastic p.errors { font: 400 12px var(--vp-font) !important; color: var(--vp-muted) !important; }
body.active_admin form.formtastic input[type=submit] {
  background: var(--vp-accent) !important;
  background-image: none !important;
  border: 1px solid var(--vp-accent) !important;
  color: #fff !important;
  border-radius: var(--vp-radius-sm) !important;
  font: 600 13px var(--vp-font) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  padding: 8px 15px !important;
}

/* ── panels / dashboard boxes — skin only ── */
body.active_admin .panel,
body.active_admin section.panel {
  background: var(--vp-card) !important;
  border: 1px solid var(--vp-border) !important;
  border-radius: var(--vp-radius) !important;
  box-shadow: var(--vp-shadow) !important;
}
body.active_admin .panel h3,
body.active_admin section.panel h3 {
  background: #f9fafb !important;
  background-image: none !important;
  color: var(--vp-ink) !important;
  font: 700 14px var(--vp-font) !important;
  border-bottom: 1px solid var(--vp-border-soft) !important;
  text-shadow: none !important;
}
body.active_admin .panel table th,
body.active_admin .panel table td {
  border-top: 1px solid var(--vp-border-soft) !important;
  font: 400 13px var(--vp-font) !important;
}
body.active_admin .panel table tr:first-child td { border-top: none !important; }

/* tabs (chart tabs etc.) — colors only */
body.active_admin .ui-tabs-nav,
body.active_admin ul.ui-tabs-nav {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  font-family: var(--vp-font) !important;
}
body.active_admin .ui-tabs-nav li { border: none !important; background: transparent !important; }
body.active_admin .ui-tabs-nav li a {
  background: transparent !important;
  background-image: none !important;
  color: var(--vp-muted) !important;
  font: 600 13px var(--vp-font) !important;
}
body.active_admin .ui-tabs-nav li.ui-tabs-selected a,
body.active_admin .ui-tabs-nav li.ui-tabs-active a {
  color: var(--vp-accent) !important;
  background: transparent !important;
}

/* ── flash messages ─────────────────────────────────────────────── */
body.active_admin.logged_in .flash {
  border-radius: var(--vp-radius-sm) !important;
  border: 1px solid var(--vp-border) !important;
  box-shadow: var(--vp-shadow) !important;
  font: 500 13px var(--vp-font) !important;
  text-shadow: none !important;
  background-image: none !important;
}
body.active_admin.logged_in .flash.flash_notice { background: var(--vp-ok-bg) !important; color: var(--vp-ok) !important; border-color: #a7f3d0 !important; }
body.active_admin.logged_in .flash.flash_alert, body.active_admin.logged_in .flash.flash_error { background: var(--vp-bad-bg) !important; color: var(--vp-bad) !important; border-color: #fecaca !important; }
body.active_admin.logged_in .flash.flash_warning { background: var(--vp-warn-bg) !important; color: var(--vp-warn) !important; border-color: #fde68a !important; }

/* ── footer ─────────────────────────────────────────────────────── */
body.active_admin.logged_in #footer,
body.active_admin.logged_in .footer {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--vp-faint) !important;
  font: 400 12px var(--vp-font) !important;
  text-shadow: none !important;
}
body.active_admin #footer p, body.active_admin .footer p { color: var(--vp-faint) !important; }

/* ── misc widgets ───────────────────────────────────────────────── */
body.active_admin .ts-wrapper .ts-control,
body.active_admin .ts-control {
  border: 1px solid var(--vp-border) !important;
  border-radius: var(--vp-radius-sm) !important;
  font: 400 13px var(--vp-font) !important;
}
body.active_admin .ts-dropdown { border-radius: var(--vp-radius-sm); border-color: var(--vp-border); box-shadow: var(--vp-shadow-lg); font-family: var(--vp-font); }
body.active_admin .ts-dropdown .active { background: var(--vp-accent-soft); color: var(--vp-accent); }
body.active_admin .ui-datepicker { border-radius: var(--vp-radius-sm) !important; font-family: var(--vp-font) !important; box-shadow: var(--vp-shadow-lg) !important; }
body.active_admin .dropdown_menu_button,
body.active_admin .dropdown_menu li a { font-family: var(--vp-font) !important; }
body.active_admin .index_table td.col-actions a,
body.active_admin td .member_link { margin-right: 8px; }
body.active_admin hr { border: none; border-top: 1px solid var(--vp-border-soft); }
body.active_admin .blank_slate { background: transparent !important; border: none !important; box-shadow: none !important; color: var(--vp-faint); font-family: var(--vp-font); }
body.active_admin .vp-filter-toggle {
  background: #fff !important;
  border: 1px solid var(--vp-border) !important;
  border-radius: var(--vp-radius-sm) !important;
  font: 600 13px var(--vp-font) !important;
  color: var(--vp-body) !important;
  text-shadow: none !important;
}

/* ── login-page banners: make auth errors/notes impossible to miss ── */
body.active_admin.logged_out .flash {
  position: fixed !important;
  top: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 100 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 26px !important;
  min-width: 280px;
  max-width: min(560px, 90vw);
  font: 600 14.5px var(--vp-font) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 30px rgba(2, 6, 23, .25) !important;
  white-space: normal;
  text-align: center;
}
body.active_admin.logged_out .flash::before {
  font-size: 15px;
  line-height: 1;
}
body.active_admin.logged_out .flash.flash_alert {
  background: #dc2626 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1px solid #b91c1c !important;
  text-shadow: none !important;
}
body.active_admin.logged_out .flash.flash_alert::before { content: '⚠'; }
body.active_admin.logged_out .flash.flash_notice {
  background: #059669 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1px solid #047857 !important;
  text-shadow: none !important;
}
body.active_admin.logged_out .flash.flash_notice::before { content: '✓'; }
body.active_admin.logged_out .flash.flash_warning {
  background: #d97706 !important;
  color: #fff !important;
  border: 1px solid #b45309 !important;
}

@media (max-width: 1560px) {
  #vp-dash .vpn-tag { display: none; }
  #vp-dash .vpn-clock { font-size: 11.5px; }
  #vp-dash .vpn-avatar { width: 24px; height: 24px; }
}

/* ── desktop sidebar: permanently visible (collapse option removed) ── */

/* ═══════════════════════════════════════════════════════════════
   PAGE POLISH — scopes, status pills, attribute tables, forms,
   flash messages inside the workspace
   ═══════════════════════════════════════════════════════════════ */

/* scope chips (All / Successful / Short / …) */
body.active_admin .scopes {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 14px !important; padding: 0 !important;
}
body.active_admin .scopes li { margin: 0 !important; }
body.active_admin .scopes a, body.active_admin .scopes button {
  display: inline-block; padding: 5px 13px !important;
  border-radius: 999px !important;
  border: 1px solid var(--vp-border) !important;
  background: #ffffff !important;
  color: var(--vp-muted) !important;
  font: 600 12px var(--vp-font) !important;
  text-decoration: none;
  box-shadow: none !important;
}
body.active_admin .scopes a:hover, body.active_admin .scopes button:hover {
  color: var(--vp-accent) !important;
  border-color: #bfdbfe !important;
  background: var(--vp-accent-soft) !important;
}
body.active_admin .scopes li.selected a,
body.active_admin .scopes li.current a,
body.active_admin .scopes a.current, body.active_admin .scopes a.selected {
  background: var(--vp-accent) !important;
  border-color: var(--vp-accent) !important;
  color: #ffffff !important;
}
body.active_admin .scopes li.disabled a { opacity: .5; cursor: default; }

/* status tags → pills */
body.active_admin .status_tag, body.active_admin span.tag {
  display: inline-block; padding: 3px 11px !important; border-radius: 999px !important;
  font: 700 11px var(--vp-font) !important; text-transform: uppercase; letter-spacing: .03em;
  background: #eef2f7 !important; color: var(--vp-muted) !important;
  border: 1px solid transparent !important;
}
body.active_admin .status_tag.yes, body.active_admin .status_tag.ok,
body.active_admin .status_tag.complete, body.active_admin .status_tag.positive {
  background: var(--vp-ok-bg) !important; color: var(--vp-ok) !important;
}
body.active_admin .status_tag.no, body.active_admin .status_tag.error,
body.active_admin .status_tag.failed, body.active_admin .status_tag.negative {
  background: var(--vp-bad-bg) !important; color: var(--vp-bad) !important;
}
body.active_admin .status_tag.warn, body.active_admin .status_tag.pending {
  background: var(--vp-warn-bg) !important; color: var(--vp-warn) !important;
}

/* show pages: attributes table as a clean card (class sits on a wrapper div) */
body.active_admin .attributes_table {
  background: var(--vp-card) !important;
  border: 1px solid var(--vp-border) !important;
  border-radius: var(--vp-radius) !important;
  box-shadow: var(--vp-shadow) !important;
  overflow: hidden;
  margin: 0 0 18px !important;
}
body.active_admin .attributes_table table { width: 100% !important; border-collapse: collapse !important; margin: 0 !important; }
body.active_admin .attributes_table th, body.active_admin table.attributes_table th {
  background: #f9fafb !important;
  color: var(--vp-muted) !important;
  font: 600 12px var(--vp-font) !important;
  text-align: left !important;
  padding: 10px 16px !important;
  width: 220px;
  border: none !important;
  border-bottom: 1px solid var(--vp-border-soft) !important;
  border-right: 1px solid var(--vp-border-soft) !important;
  vertical-align: top;
}
body.active_admin .attributes_table td, body.active_admin table.attributes_table td {
  padding: 10px 16px !important;
  font: 400 13.5px var(--vp-font) !important;
  color: var(--vp-body) !important;
  border: none !important;
  border-bottom: 1px solid var(--vp-border-soft) !important;
}
body.active_admin .attributes_table tr:last-child th, body.active_admin .attributes_table tr:last-child td,
body.active_admin table.attributes_table tr:last-child th, body.active_admin table.attributes_table tr:last-child td {
  border-bottom: none !important;
}

/* forms: each fieldset becomes a section card; inputs capped */
body.active_admin form.formtastic fieldset {
  border: 1px solid var(--vp-border) !important;
  border-radius: var(--vp-radius) !important;
  background: var(--vp-card) !important;
  box-shadow: var(--vp-shadow) !important;
  padding: 12px 20px 16px !important;
  margin: 0 0 14px !important;
}
body.active_admin form.formtastic input[type=text],
body.active_admin form.formtastic input[type=password],
body.active_admin form.formtastic input[type=email],
body.active_admin form.formtastic input[type=number],
body.active_admin form.formtastic input[type=date],
body.active_admin form.formtastic select,
body.active_admin .formtastic select { max-width: 620px !important; }
body.active_admin form.formtastic textarea { max-width: 860px !important; min-height: 90px; }
body.active_admin form.formtastic li { padding: 7px 0 !important; }

/* flash messages inside the workspace (after saves etc.) */
#vp-dash .vpm-inner .flash {
  position: static !important; transform: none !important;
  margin: 0 0 14px !important;
  display: block;
  padding: 12px 18px !important;
  border-radius: var(--vp-radius-sm) !important;
  border: 1px solid var(--vp-border) !important;
  box-shadow: var(--vp-shadow) !important;
  font: 600 13.5px var(--vp-font) !important;
  text-shadow: none !important;
  background-image: none !important;
}
#vp-dash .vpm-inner .flash.flash_notice { background: var(--vp-ok-bg) !important; color: var(--vp-ok) !important; border-color: #a7f3d0 !important; }
#vp-dash .vpm-inner .flash.flash_alert, #vp-dash .vpm-inner .flash.flash_error { background: var(--vp-bad-bg) !important; color: var(--vp-bad) !important; border-color: #fecaca !important; }

/* empty states */
body.active_admin .blank_slate { padding: 44px 20px !important; text-align: center; }

/* ── MOBILE (≤720px): stacked table cards ── */
@media (max-width: 720px) {
  body.active_admin .vp-table-stack table.index_table thead { display: none; }
  body.active_admin .vp-table-stack table.index_table,
  body.active_admin .vp-table-stack table.index_table tbody,
  body.active_admin .vp-table-stack table.index_table tr,
  body.active_admin .vp-table-stack table.index_table td {
    display: block; width: 100%;
  }
  body.active_admin .vp-table-stack table.index_table tr {
    border: 1px solid var(--vp-border);
    border-radius: var(--vp-radius-sm);
    margin: 10px 6px;
    background: #fff;
    padding: 4px 0;
    box-shadow: var(--vp-shadow);
  }
  body.active_admin .vp-table-stack table.index_table td {
    border: none !important;
    border-top: 1px dashed var(--vp-border-soft) !important;
    padding: 8px 12px !important;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    text-align: right;
  }
  body.active_admin .vp-table-stack table.index_table td:first-child { border-top: none !important; }
  body.active_admin .vp-table-stack table.index_table td::before {
    content: attr(data-vp-label);
    font: 600 11px var(--vp-font);
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--vp-muted);
    text-align: left;
    flex: 0 0 40%;
  }
  body.active_admin .vp-table-stack .pagination_information { text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════════
   CUSTOM DASHBOARD OVERLAY (dashboard page only, injected by vp-dashboard.js)
   Matches the approved Class4_New_Dash mockup: dark navbar, dark sidebar,
   KPI cards, traffic chart, alerts, live tables, mini cards.
   ═══════════════════════════════════════════════════════════════════ */
body.vp-dashboard, body.vp-page { background: #eef1f6 !important; }
/* fixed to the viewport so the main column always has a bounded height and
   scrolls internally — the app page behind it is fully hidden */
#vp-dash { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; font-family: var(--vp-font); }
#vp-dash * { box-sizing: border-box; }
#vp-dash .mono { font-family: var(--vp-mono); }

/* adopted app pages (every page except the dashboard) */
body.vp-page #header { display: none !important; }
#vp-dash .vpm-inner { min-height: 100%; }
#vp-dash .vpm-inner #title_bar {
  padding: 0 0 6px !important;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
}
/* action buttons: the app JS hardcodes an inline left offset for the old
   full-viewport title bar — neutralize it so buttons flow inside the flex
   title bar (CSS !important outranks its inline style) */
#vp-dash .vpm-inner #titlebar_right {
  position: static !important;
  left: auto !important; right: auto !important; top: auto !important;
}
#vp-dash .vpm-inner .action_items {
  float: none !important; position: static !important; margin: 0 !important;
  display: flex; flex-wrap: wrap; gap: 8px;
}
/* the app's floating table-header clone positions against the window —
   inside the workspace it lands wrong; keep the in-table header instead */
#vp-dash .vpm-inner .tableFloatingHeader { display: none !important; }
#vp-dash .vpm-inner .tableFloatingHeaderOriginal { visibility: visible !important; }
#vp-dash .vpm-inner #active_admin_content { padding: 14px 0 0 !important; }
#vp-dash .vpm-inner #footer { margin: 16px 0 0; }

/* navbar */
#vp-dash .vpn {
  min-height: 56px; flex: 0 0 auto;
  background: linear-gradient(180deg, #0f172a 0%, #0b1220 100%);
  color: #cbd5e1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  padding: 0 20px;
  box-shadow: 0 2px 10px rgba(2, 6, 23, .45);
  position: relative; z-index: 5000;
}
#vp-dash .vpn-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex-shrink: 0; }
#vp-dash .vpn-logo { height: 26px; width: auto; display: block; }
#vp-dash .vpn-word { font-weight: 800; letter-spacing: .18em; color: #fff; font-size: 15px; }
#vp-dash .vpn-tag {
  font-size: 9px; font-weight: 700; letter-spacing: .22em;
  color: #60a5fa; border: 1px solid #1e3a8a; background: #0c2038;
  padding: 3px 7px; border-radius: 5px;
}
#vp-dash .vpn-nav { display: flex; align-items: center; gap: 0px; flex: 1; justify-content: center; min-width: 200px; flex-wrap: wrap; /* never a scroll container — dropdown panels must be able to descend below the bar */ }
#vp-dash .vpn-nav::-webkit-scrollbar { display: none; }
#vp-dash .vpn-item {
  display: inline-flex; align-items: center; gap: 5px;
  color: #9fb0c8; text-decoration: none;
  font-size: 12.5px; font-weight: 500;
  padding: 6px 7px; border-radius: 8px;
  white-space: nowrap;
}
#vp-dash .vpn-item:hover { color: #fff; background: rgba(59, 130, 246, .12); }
#vp-dash .vpn-item.active { color: #fff; background: rgba(59, 130, 246, .22); }
#vp-dash .vpn-item .vpi { width: 14px; height: 14px; }
/* full-menu dropdowns (cloned from the app menu — complete, nothing dropped) */
#vp-dash .vpn-group { position: relative; }
#vp-dash .vpn-caret { display: inline-block; width: 0; height: 0; margin-left: 5px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid currentColor; opacity: .6; }
#vp-dash .vpn-drop {
  display: none; position: absolute; top: calc(100% + 18px); left: 0;
  min-width: 280px; max-width: 360px; max-height: calc(100vh - 96px); overflow-y: auto;
  background: #0f1a30; border: 1px solid #223350; border-radius: 10px;
  box-shadow: 0 18px 40px rgba(2, 6, 23, .55);
  padding: 6px; z-index: 5100;
}
#vp-dash .vpn-drop::-webkit-scrollbar { width: 9px; }
#vp-dash .vpn-drop::-webkit-scrollbar-thumb { background: #2b4a75; border-radius: 8px; }
#vp-dash .vpn-drop::-webkit-scrollbar-thumb:hover { background: #3b6bb0; }
#vp-dash .vpn-drop::-webkit-scrollbar-track { background: transparent; }
#vp-dash .vpn-drop { scrollbar-width: thin; scrollbar-color: #2b4a75 transparent; }
#vp-dash .vpn-group.vp-open .vpn-drop { display: block; }
#vp-dash .vpn-drop-item {
  display: flex; align-items: center; gap: 9px;
  color: #b7c4d8; text-decoration: none; font-size: 12.5px; font-weight: 500;
  padding: 7px 10px; border-radius: 7px; white-space: nowrap;
}
#vp-dash .vpn-drop-item:hover { background: rgba(59, 130, 246, .14); color: #fff; }
#vp-dash .vpn-drop-item.sub { padding-left: 28px; font-size: 12px; color: #8ea0ba; }
#vp-dash .vpn-drop-item .vpi { width: 13px; height: 13px; opacity: .75; flex: 0 0 13px; }

#vp-dash .vpn-drop-head {
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #5b6b84; padding: 9px 10px 3px;
}
#vp-dash .vpn-right { display: flex; align-items: center; gap: 14px; }
#vp-dash .vpn-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: #a7f3d0; background: rgba(5, 150, 105, .12); border: 1px solid rgba(5, 150, 105, .35); padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
#vp-dash .vpn-status .dot { width: 7px; height: 7px; border-radius: 999px; background: #34d399; box-shadow: 0 0 6px #34d399; }
#vp-dash .vpn-status .dot.warn { background: #fbbf24; box-shadow: 0 0 6px #fbbf24; }
#vp-dash .vpn-clock { font-size: 12px; color: #a9b8cf; white-space: nowrap; }
/* compact account chip + logout (kept subtle on purpose) */
#vp-dash .vpn-user { display: inline-flex; align-items: center; }
#vp-dash .vpn-avatar {
  width: 26px; height: 26px; border-radius: 999px;
  background: #16233c; border: 1px solid #2b4a75; color: #9db8e0;
  font: 700 10px var(--vp-font); letter-spacing: .04em;
  display: inline-flex; align-items: center; justify-content: center;
}
#vp-dash .vpn-out {
  color: #7d8ea8; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
}
#vp-dash .vpn-out:hover { color: #fca5a5; background: rgba(248, 113, 113, .12); }
#vp-dash .vpn-out .vpi { width: 15px; height: 15px; }
#vp-dash .vpn-burger {
  display: none; background: rgba(59, 130, 246, .16); border: 1px solid #2b4a75;
  border-radius: 8px; width: 38px; height: 38px; color: #cfe0f7; cursor: pointer;
  align-items: center; justify-content: center; padding: 0;
}
#vp-dash .vpn-burger:hover { background: rgba(59, 130, 246, .3); }
#vp-dash .vpn-burger svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; }

/* body: sidebar + main */
#vp-dash .vp-body { flex: 1; display: flex; min-height: 0; }
/* sidebar exists ONLY as the mobile/narrow drawer — hidden on desktop,
   where the navbar dropdowns are the menu */
#vp-dash .vps {
  display: none;
  width: 232px; flex: 0 0 232px;
  background: #0b1220;
  color: #9fb0c8;
  padding: 14px 10px;
  overflow-y: auto;
  flex-direction: column; gap: 4px;
}
#vp-dash .vps-group { margin-bottom: 4px; }
#vp-dash .vps-label { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #5b6b84; padding: 7px 10px 3px; }
/* collapsible group header */
#vp-dash .vps-grouph {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; cursor: pointer; text-align: left;
  color: #b7c4d8; font: 600 13px var(--vp-font);
  padding: 9px 10px; border-radius: 8px;
}
#vp-dash .vps-grouph:hover { background: rgba(59, 130, 246, .12); color: #fff; }
#vp-dash .vps-grouph .vpi { width: 14px; height: 14px; opacity: .85; }
#vp-dash .vps-caret {
  margin-left: auto; width: 0; height: 0; flex: 0 0 auto;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 4px solid currentColor; opacity: .6; transition: transform .15s ease;
}
#vp-dash .vps-group.vps-open > .vps-grouph .vps-caret { transform: rotate(180deg); }
#vp-dash .vps-groupitems { display: none; padding: 0 0 6px 8px; }
#vp-dash .vps-group.vps-open > .vps-groupitems { display: block; }
#vp-dash .vps-subwrap .vps-sublist { display: none; padding-left: 10px; }
#vp-dash .vps-subwrap.vps-subopen .vps-sublist { display: block; }
#vp-dash .vps-subtoggle { background: none; border: none; cursor: pointer; width: 100%; text-align: left; font-family: inherit; }
#vp-dash .vps-item { display: flex; align-items: center; gap: 10px; color: #9fb0c8; text-decoration: none; font-size: 13px; font-weight: 500; padding: 7px 10px; border-radius: 8px; }
#vp-dash .vps-item:hover { background: rgba(59, 130, 246, .12); color: #fff; }
#vp-dash .vps-item.active { background: rgba(59, 130, 246, .22); color: #fff; }
#vp-dash .vps-item .vpi { width: 14px; height: 14px; opacity: .8; }
#vp-dash .vps-item.sub { padding-left: 28px; font-size: 12.5px; color: #8ea0ba; }
#vp-dash .vps-subhead { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #5b6b84; padding: 8px 10px 2px; }
#vp-dash .vps-foot { position: sticky; bottom: 0; margin-top: auto; background: #0b1220; border-top: 1px solid #1c2942; padding-top: 8px; }
#vp-dash .vps-item.out { color: #f87171; }
#vp-dash .vps-item.out:hover { background: rgba(248, 113, 113, .1); color: #fca5a5; }

/* main column */
#vp-dash .vpm { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 22px 24px 30px; background: #eef1f6; }
#vp-dash .vpm-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
#vp-dash .vpm-head h1 { margin: 0; font-size: 24px; font-weight: 800; color: #0f172a; letter-spacing: -0.02em; }
#vp-dash .vpm-sub { margin: 3px 0 0; font-size: 12.5px; color: #64748b; }
#vp-dash .vp-btn { display: inline-flex; align-items: center; gap: 8px; background: #1d4ed8; color: #fff; border: none; border-radius: 9px; padding: 9px 16px; font: 600 13px var(--vp-font); cursor: pointer; box-shadow: 0 1px 3px rgba(29, 78, 216, .4); }
#vp-dash .vp-btn:hover { background: #1e40af; }
#vp-dash .vp-btn.busy { opacity: .6; pointer-events: none; }
#vp-dash .vp-btn .vpi { width: 13px; height: 13px; }

/* KPI cards */
#vp-dash .vp-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
#vp-dash .vp-kpi {
  position: relative;
  background: #fff; border: 1px solid #e5e9f2; border-radius: 12px;
  padding: 14px 16px; box-shadow: 0 1px 3px rgba(16, 24, 40, .05);
  min-height: 92px;
}
#vp-dash .vp-kpi-ico {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px; border-radius: 8px;
  background: #eff6ff; color: #2563eb;
  display: inline-flex; align-items: center; justify-content: center;
}
#vp-dash .vp-kpi-ico .vpi { width: 16px; height: 16px; stroke-width: 2.2; color: #2563eb; }
#vp-dash .vp-kpi-val { font-size: 26px; font-weight: 800; color: #0f172a; letter-spacing: -0.02em; line-height: 1.1; }
#vp-dash .vp-kpi-label { font-size: 12px; font-weight: 600; color: #64748b; margin-top: 2px; }
#vp-dash .vp-kpi-sub { font-size: 11px; color: #94a3b8; margin-top: 6px; }

/* rows/cards */
#vp-dash .vp-row { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; margin-bottom: 14px; }
#vp-dash .vp-row > .vp-card:last-child:nth-child(1) { grid-column: 1 / -1; }
#vp-dash .vp-card {
  background: #fff; border: 1px solid #e5e9f2; border-radius: 12px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .05);
  padding: 16px 18px; min-width: 0;
}
#vp-dash .vp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
#vp-dash .vp-card-head h2 { margin: 0; font-size: 15px; font-weight: 700; color: #0f172a; display: flex; align-items: center; gap: 8px; }
#vp-dash .vp-chip { font-size: 10.5px; font-weight: 600; color: #2563eb; background: #eff6ff; padding: 2px 8px; border-radius: 999px; }
#vp-dash .vp-link { font-size: 12px; font-weight: 600; color: #2563eb; text-decoration: none; }
#vp-dash .vp-link:hover { text-decoration: underline; }
#vp-dash .vpi.dim { color: #94a3b8; width: 16px; height: 16px; }

/* chart */
#vp-dash .vp-chart { position: relative; height: 228px; overflow: hidden; }
#vp-dash .vpc-svg { width: 100%; height: 100%; display: block; }
#vp-dash .vpc-grid { stroke: #eef2f7; stroke-width: 1; }
#vp-dash .vpc-ylabel { font: 500 10px var(--vp-font); fill: #94a3b8; }
#vp-dash .vpc-xlabel { font: 500 10px var(--vp-font); fill: #94a3b8; }
#vp-dash .vp-legend { display: flex; gap: 14px; font-size: 11.5px; color: #64748b; font-weight: 600; }
#vp-dash .vp-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
#vp-dash .sw-blue { background: #3b82f6; }
#vp-dash .sw-green { background: #10b981; }
#vp-dash .vpc-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 12.5px; font-weight: 600; pointer-events: none; }

/* alerts */
#vp-dash .vp-alert { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed #eef2f7; }
#vp-dash .vp-alert:last-child { border-bottom: none; }
#vp-dash .vp-alert-label { font-size: 13px; font-weight: 600; color: #1e293b; }
#vp-dash .vp-alert-detail { font-size: 11.5px; color: #94a3b8; margin-left: auto; text-align: right; }
#vp-dash .vp-alerts-foot { margin-top: 12px; font-size: 12px; font-weight: 600; color: #059669; }

/* tables */
#vp-dash .vp-table-wrap { overflow-x: auto; }
#vp-dash .vp-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
#vp-dash .vp-table th { text-align: left; font: 600 10.5px var(--vp-font); text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; padding: 8px 10px; border-bottom: 1px solid #eef2f7; white-space: nowrap; }
#vp-dash .vp-table td { padding: 9px 10px; border-bottom: 1px solid #f4f7fb; color: #374151; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
#vp-dash .vp-table tr:last-child td { border-bottom: none; }
#vp-dash .vp-table a { color: #2563eb; font-weight: 600; text-decoration: none; }
#vp-dash .vp-empty, #vp-dash .vp-card .vp-empty { padding: 26px 0; text-align: center; color: #94a3b8; font-size: 12.5px; font-weight: 600; }

/* mini cards row */
#vp-dash .vp-row-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
#vp-dash .vp-mini { background: #fff; border: 1px solid #e5e9f2; border-radius: 12px; box-shadow: 0 1px 3px rgba(16,24,40,.05); padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
#vp-dash .vp-mini .vp-kpi-ico { position: static; flex: 0 0 34px; width: 34px; height: 34px; }
#vp-dash .vp-mini .vp-kpi-ico .vpi { width: 16px; height: 16px; }
#vp-dash .vp-mini-val { font-size: 20px; font-weight: 800; color: #0f172a; }

/* footer */
#vp-dash .vp-foot { margin-top: 20px; font-size: 11.5px; color: #94a3b8; text-align: center; }

/* skeleton */
#vp-dash .vp-skeleton { height: 160px; border-radius: 8px; background: linear-gradient(90deg, #f1f5f9 25%, #e7edf5 50%, #f1f5f9 75%); background-size: 200% 100%; animation: vpshimmer 1.3s infinite; }
@keyframes vpshimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* icons */
#vp-dash .vpi { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* dashboard responsive */
@media (max-width: 1200px) {
  #vp-dash .vp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #vp-dash .vp-row { grid-template-columns: 1fr; }
  #vp-dash .vp-row-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* drawer scrim: dark backdrop while the mobile menu is open */
#vp-dash .vps-scrim { display: none; }
@media (max-width: 1450px) {
  #vp-dash.vp-side-open .vps-scrim {
    display: block; position: fixed; inset: 0; top: 56px; z-index: 44;
    background: rgba(2, 6, 23, .55); backdrop-filter: blur(1px);
  }
}
@media (max-width: 1450px) {
  #vp-dash .vpn { gap: 10px; padding: 0 12px; }
  #vp-dash .vpn-nav { display: none; }
  #vp-dash .vpn-burger { display: inline-flex; }
  #vp-dash .vps {
    display: flex;
    position: fixed; top: 56px; bottom: 0; left: 0; z-index: 45;
    transform: translateX(-100%); /* no transition: instant open/close, no wedged states */
    box-shadow: 8px 0 24px rgba(2, 6, 23, .35);
  }
  #vp-dash.vp-side-open .vps { transform: translateX(0) !important; }
  #vp-dash .vpm { padding: 16px 12px 24px; }
}
@media (max-width: 560px) {
  #vp-dash .vp-kpis { grid-template-columns: 1fr; }
  #vp-dash .vp-row-cards { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   V6 CONTENT REDESIGN (2026-09-04) — structural overhaul of data pages.
   Scope: body.active_admin.logged_in:not(.dashboard,.remote_stats)
   Menu (#header), dashboard, and login pages are untouched.
   Every button sets background AND color together — no invisible states.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── V6.1 page title toolbar ─────────────────────────────────────── */
body.active_admin.logged_in:not(.dashboard,.remote_stats) #title_bar {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding: 22px 30px 6px !important;
  min-height: 0 !important;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) #title_bar h2 {
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--vp-dark) !important;
}

/* ── V6.2 button system — explicit pairs ─────────────────────────── */
/* primary CTA (New X / Import X) */
body.active_admin.logged_in:not(.dashboard,.remote_stats) #title_bar .action_items a {
  background: var(--vp-accent) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  padding: 10px 18px !important;
  border-radius: 10px !important;
  font: 600 13.5px/1 var(--vp-font) !important;
  box-shadow: 0 1px 3px rgba(37,99,235,.35) !important;
  text-shadow: none !important;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) #title_bar .action_items a:hover {
  background: var(--vp-accent-ink) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(37,99,235,.45) !important;
}
/* form save/update */
body.active_admin.logged_in:not(.dashboard,.remote_stats) form.formtastic input[type=submit],
body.active_admin.logged_in:not(.dashboard,.remote_stats) form input[type=submit].button {
  background: var(--vp-accent) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  padding: 10px 22px !important;
  border-radius: 10px !important;
  font: 600 14px/1 var(--vp-font) !important;
  box-shadow: 0 1px 3px rgba(37,99,235,.35) !important;
  text-shadow: none !important;
  cursor: pointer;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) form.formtastic input[type=submit]:hover {
  background: var(--vp-accent-ink) !important;
  color: #ffffff !important;
}
/* filter submit */
body.active_admin.logged_in:not(.dashboard,.remote_stats) form.filter_form .buttons input[type=submit] {
  background: var(--vp-accent) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 9px !important;
  padding: 9px 0 !important;
  width: 100% !important;
  font: 600 13px/1 var(--vp-font) !important;
  text-shadow: none !important;
  cursor: pointer;
}
/* clear filters / secondary */
body.active_admin.logged_in:not(.dashboard,.remote_stats) form.filter_form a.clear_filters_btn,
body.active_admin.logged_in:not(.dashboard,.remote_stats) form.filter_form .buttons a,
body.active_admin.logged_in:not(.dashboard,.remote_stats) a.button:not(.danger),
body.active_admin.logged_in:not(.dashboard,.remote_stats) button.button {
  background: #ffffff !important;
  background-image: none !important;
  color: var(--vp-ink) !important;
  border: 1px solid var(--vp-border) !important;
  border-radius: 9px !important;
  padding: 9px 14px !important;
  font: 600 13px/1 var(--vp-font) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) a.button:not(.danger):hover,
body.active_admin.logged_in:not(.dashboard,.remote_stats) form.filter_form a.clear_filters_btn:hover {
  background: #f8fafc !important;
  color: var(--vp-dark) !important;
}
/* danger */
body.active_admin.logged_in:not(.dashboard,.remote_stats) a.button.danger {
  background: #fef2f2 !important;
  color: var(--vp-bad) !important;
  border: 1px solid #fecaca !important;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) a.button.danger:hover {
  background: var(--vp-bad) !important;
  color: #ffffff !important;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) a.delete,
body.active_admin.logged_in:not(.dashboard,.remote_stats) table.index_table td a[data-method=delete] {
  color: var(--vp-bad) !important;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) a.delete:hover {
  background: #fef2f2 !important;
  color: var(--vp-bad) !important;
}
/* batch actions chip */
body.active_admin.logged_in:not(.dashboard,.remote_stats) .table_tools a.dropdown_menu_button {
  background: #ffffff !important;
  color: var(--vp-ink) !important;
  border: 1px solid var(--vp-border) !important;
  border-radius: 9px !important;
  padding: 7px 14px !important;
  font: 600 12.5px/1 var(--vp-font) !important;
  text-shadow: none !important;
}

/* ── V6.3 segmented scope control ────────────────────────────────── */
body.active_admin.logged_in:not(.dashboard,.remote_stats) .table_tools {
  padding: 0 !important;
  margin: 14px 0 12px !important;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) .table_tools .scopes,
body.active_admin.logged_in:not(.dashboard,.remote_stats) .table_tools ul.scopes {
  display: inline-flex !important;
  flex-wrap: wrap;
  gap: 2px !important;
  padding: 3px !important;
  background: #e9edf3 !important;
  border: 1px solid var(--vp-border-soft) !important;
  border-radius: 10px !important;
  list-style: none !important;
  margin: 0 !important;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) .table_tools a.scope,
body.active_admin.logged_in:not(.dashboard,.remote_stats) .table_tools li.scope a {
  background: transparent !important;
  border: none !important;
  padding: 7px 14px !important;
  border-radius: 7px !important;
  color: var(--vp-muted) !important;
  font: 600 12.5px/1 var(--vp-font) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) .table_tools a.scope:hover {
  color: var(--vp-ink) !important;
  background: rgba(255,255,255,.65) !important;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) .table_tools a.scope.current,
body.active_admin.logged_in:not(.dashboard,.remote_stats) .table_tools li.scope.current a,
body.active_admin.logged_in:not(.dashboard,.remote_stats) .table_tools li.scope a.current {
  background: #ffffff !important;
  color: var(--vp-accent-ink) !important;
  box-shadow: 0 1px 3px rgba(16,24,40,.14) !important;
}

/* ── V6.4 table card ─────────────────────────────────────────────── */
body.active_admin.logged_in:not(.dashboard,.remote_stats) .paginated_collection {
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid var(--vp-border) !important;
  box-shadow: var(--vp-shadow) !important;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) table.index_table {
  margin: 0 !important;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) table.index_table th {
  background: #fbfcfe !important;
  border-bottom: 1px solid var(--vp-border-soft) !important;
  border-right: none !important;
  padding: 12px 14px !important;
  font: 700 10.5px/1.2 var(--vp-font) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--vp-faint) !important;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) table.index_table th a {
  color: var(--vp-faint) !important;
  text-decoration: none !important;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) table.index_table th a:hover {
  color: var(--vp-accent-ink) !important;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) table.index_table td {
  padding: 11px 14px !important;
  font-size: 13.5px !important;
  color: var(--vp-body) !important;
  border-bottom: 1px solid var(--vp-border-soft) !important;
  border-right: none !important;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) table.index_table tbody tr:hover td {
  background: var(--vp-accent-soft) !important;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) table.index_table tbody tr:last-child td {
  border-bottom: none !important;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) table.index_table td a {
  color: var(--vp-accent-ink) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  margin-right: 8px;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) table.index_table td a:hover {
  text-decoration: underline !important;
}

/* ── V6.5 sticky filter drawer + 2-col filter grid ──────────────── */
body.active_admin.logged_in:not(.dashboard,.remote_stats) #sidebar {
  width: 304px !important;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) #filters {
  position: sticky !important;
  top: 14px !important;
  max-height: calc(100vh - 28px) !important;
  overflow-y: auto !important;
  border-radius: 14px !important;
  border: 1px solid var(--vp-border) !important;
  box-shadow: var(--vp-shadow) !important;
  background: #ffffff !important;
  padding: 16px !important;
  margin: 14px 0 0 !important;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) #filters form.filter_form fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) #filters form.filter_form fieldset ol {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px 12px !important;
  margin: 0 !important;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) #filters li.input {
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) #filters label {
  font: 700 10px/1.2 var(--vp-font) !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  color: var(--vp-faint) !important;
  margin-bottom: 4px !important;
  display: block !important;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) #filters input[type=text],
body.active_admin.logged_in:not(.dashboard,.remote_stats) #filters select,
body.active_admin.logged_in:not(.dashboard,.remote_stats) #filters textarea {
  width: 100% !important;
  max-width: none !important;
  font-size: 13px !important;
  border-radius: 8px !important;
  border: 1px solid var(--vp-border) !important;
  padding: 8px 10px !important;
  box-shadow: none !important;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) #filters .buttons {
  display: flex !important;
  gap: 8px !important;
  margin: 14px 0 0 !important;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) #filters .buttons li {
  flex: 1 !important;
}

/* ── V6.6 responsive 2-column forms ──────────────────────────────── */
body.active_admin.logged_in:not(.dashboard,.remote_stats) form.formtastic fieldset.inputs {
  border: 1px solid var(--vp-border) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: var(--vp-shadow) !important;
  padding: 18px 20px 8px !important;
  margin-bottom: 18px !important;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) form.formtastic fieldset.inputs > ol {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 2px 30px !important;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) form.formtastic fieldset.inputs > ol > li.input {
  width: auto !important;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) form.formtastic li.input:has(textarea),
body.active_admin.logged_in:not(.dashboard,.remote_stats) form.formtastic li.input:has(iframe),
body.active_admin.logged_in:not(.dashboard,.remote_stats) form.formtastic li.input:has(table) {
  grid-column: 1 / -1 !important;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) form.formtastic li.input label {
  font: 700 10.5px/1.2 var(--vp-font) !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  color: var(--vp-faint) !important;
  margin-bottom: 5px !important;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) form.formtastic input[type=text],
body.active_admin.logged_in:not(.dashboard,.remote_stats) form.formtastic input[type=password],
body.active_admin.logged_in:not(.dashboard,.remote_stats) form.formtastic input[type=number],
body.active_admin.logged_in:not(.dashboard,.remote_stats) form.formtastic input[type=email],
body.active_admin.logged_in:not(.dashboard,.remote_stats) form.formtastic textarea,
body.active_admin.logged_in:not(.dashboard,.remote_stats) form.formtastic select {
  width: 100% !important;
  max-width: none !important;
  font-size: 13.5px !important;
  border-radius: 9px !important;
  border: 1px solid var(--vp-border) !important;
  padding: 9px 12px !important;
  box-shadow: none !important;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) form.formtastic li.input input:focus,
body.active_admin.logged_in:not(.dashboard,.remote_stats) form.formtastic li.input select:focus,
body.active_admin.logged_in:not(.dashboard,.remote_stats) form.formtastic li.input textarea:focus {
  border-color: var(--vp-accent) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.14) !important;
  outline: none !important;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) fieldset.actions {
  background: transparent !important;
  border: none !important;
  padding: 8px 0 0 !important;
}

/* ── V6.7 index footer toolbar ────────────────────────────────────── */
body.active_admin.logged_in:not(.dashboard,.remote_stats) #index_footer {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap;
  gap: 6px 18px !important;
  padding: 12px 4px 0 !important;
  margin: 0 !important;
  font-size: 13px !important;
  color: var(--vp-muted) !important;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) #index_footer form.per_page {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) #index_footer form.per_page select,
body.active_admin.logged_in:not(.dashboard,.remote_stats) .paginated_collection_footer select {
  border: 1px solid var(--vp-border) !important;
  border-radius: 8px !important;
  padding: 5px 8px !important;
  font-size: 12.5px !important;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) #index_footer a,
body.active_admin.logged_in:not(.dashboard,.remote_stats) .pagination_information + a {
  color: var(--vp-accent-ink) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) .pagination_information {
  margin-left: auto !important;
}

/* ── V6.8 pagination chips ───────────────────────────────────────── */
body.active_admin.logged_in:not(.dashboard,.remote_stats) .pagination {
  display: flex !important;
  gap: 5px !important;
  margin: 14px 0 0 !important;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) .pagination a,
body.active_admin.logged_in:not(.dashboard,.remote_stats) .pagination span {
  display: inline-block !important;
  min-width: 34px !important;
  text-align: center !important;
  padding: 6px 11px !important;
  border-radius: 8px !important;
  border: 1px solid var(--vp-border) !important;
  background: #ffffff !important;
  color: var(--vp-muted) !important;
  font: 600 12.5px/1 var(--vp-font) !important;
  text-shadow: none !important;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) .pagination a:hover {
  background: #f1f5f9 !important;
  color: var(--vp-ink) !important;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) .pagination span.current,
body.active_admin.logged_in:not(.dashboard,.remote_stats) .pagination em.current {
  background: var(--vp-accent) !important;
  border-color: var(--vp-accent) !important;
  color: #ffffff !important;
  font-style: normal !important;
}

/* ── V6.9 flash ───────────────────────────────────────────────────── */
body.active_admin.logged_in:not(.dashboard,.remote_stats) .flash {
  border-radius: 12px !important;
  border: 1px solid !important;
  padding: 12px 18px !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) .flash.flash_notice {
  background: var(--vp-ok-bg) !important;
  border-color: #a7f3d0 !important;
  color: var(--vp-ok) !important;
}
body.active_admin.logged_in:not(.dashboard,.remote_stats) .flash.flash_alert,
body.active_admin.logged_in:not(.dashboard,.remote_stats) .flash.flash_error {
  background: var(--vp-bad-bg) !important;
  border-color: #fecaca !important;
  color: var(--vp-bad) !important;
}