/* ════════════════════════════════════════════════════════════════════
   VirPhone console page skin v2 — carries the DID Repository design
   system (light cards, teal/blue actions, colored pills, Manrope)
   across every ActiveAdmin page. Loaded after the base skin.
   ════════════════════════════════════════════════════════════════════ */

/* page background */
body.active_admin.logged_in { background: #f7f8fb !important; }
#vp-ws { padding-bottom: 30px; }

/* ── page header (title bar) ── */
body.active_admin #title_bar {
  background: transparent !important;
  padding: 6px 2px 12px !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.active_admin #title_bar h2 {
  font-family: "Outfit", "Manrope", sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 750 !important;
  letter-spacing: -0.02em !important;
  color: #2c3645 !important;
  text-shadow: none !important;
}
body.active_admin #title_bar .breadcrumb { font-size: 0.74rem !important; color: #8494a8 !important; }
body.active_admin #title_bar .breadcrumb a, body.active_admin #title_bar .breadcrumb span.sep { color: #98a6b8 !important; }

/* ── buttons ── */
body.active_admin #active_admin_content a.button,
body.active_admin #active_admin_content button.button,
body.active_admin #title_bar a.button,
body.active_admin #title_bar .action_items a,
body.active_admin .index_footer a.button,
body.active_admin form .buttons button,
body.active_admin form .buttons input[type=submit],
body.active_admin form.filter_form input[type=submit],
body.active_admin form.filter_form a.clear_filters_btn {
  font-family: "Manrope", sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  border-radius: 9px !important;
  padding: 8px 14px !important;
  border: 0 !important;
  text-shadow: none !important;
  background-image: none !important;
  cursor: pointer;
  transition: filter .12s ease;
}
/* primary/new actions → teal */
body.active_admin #title_bar a.button,
body.active_admin #title_bar .action_items a { background: #0d9488 !important; color: #fff !important; box-shadow: 0 1px 0 rgba(6,78,74,.25) !important; }
body.active_admin #title_bar a.button:hover, body.active_admin #title_bar .action_items a:hover { filter: brightness(1.07); }
/* destructive → red */
body.active_admin a.button.red, body.active_admin .action_items a.red,
body.active_admin a.button[data-method=delete] { background: #e74c3c !important; color: #fff !important; }
/* default content buttons → blue */
body.active_admin #active_admin_content a.button:not(.red),
body.active_admin .index_footer a.button,
body.active_admin form .buttons input[type=submit],
body.active_admin form.filter_form input[type=submit] { background: #2563eb !important; color: #fff !important; box-shadow: 0 1px 0 rgba(30,64,175,.25) !important; }
body.active_admin #active_admin_content a.button:not(.red):hover,
body.active_admin form .buttons input[type=submit]:hover { filter: brightness(1.07); }
/* clear filters → neutral */
body.active_admin form.filter_form a.clear_filters_btn { background: #c5ccd6 !important; color: #fff !important; }

/* ── cards: panels, tables, sidebar filters ── */
body.active_admin .index_as_table,
body.active_admin table.index_table,
body.active_admin .panel,
body.active_admin .attributes_table,
body.active_admin #active_admin_content .paginated_collection > .index_content,
body.active_admin form.filter_form {
  background: #fff !important;
  border: 1px solid #e9ecf2 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
body.active_admin .index_as_table { overflow: hidden; border-spacing: 0; }
body.active_admin .paginated_collection { box-shadow: none !important; }
body.active_admin .sidebar_section_panel, body.active_admin .panel > h3 { border-radius: 12px; }

/* ── index tables → dr-table style ── */
body.active_admin table.index_table { width: 100%; border: 0; }
body.active_admin table.index_table thead th {
  background: #f8fafc !important;
  font-size: 0.68rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  color: #7c8899 !important;
  font-weight: 700 !important;
  padding: 11px 12px !important;
  border-bottom: 1px solid #e9ecf2 !important;
  text-shadow: none !important;
}
body.active_admin table.index_table td {
  padding: 10px 12px !important;
  border-bottom: 1px solid #f0f2f6 !important;
  color: #334155 !important;
  font-size: 0.84rem !important;
}
body.active_admin table.index_table tbody tr:last-child td { border-bottom: 0 !important; }
body.active_admin table.index_table tbody tr:hover td { background: #f7fcfb !important; }
body.active_admin table.index_table a { color: #1447e6 !important; text-decoration: none !important; }
body.active_admin table.index_table a:hover { text-decoration: underline !important; }

/* ── status tags → dr-pills ── */
body.active_admin .status_tag {
  border-radius: 999px !important;
  font-size: 0.7rem !important;
  font-weight: 750 !important;
  padding: 3px 10px !important;
  border: 1px solid transparent !important;
  text-shadow: none !important;
  background: #f1f5f9 !important; color: #64748b !important; border-color: #e2e8f0 !important;
}
body.active_admin .status_tag.ok, body.active_admin .status_tag.yes, body.active_admin .status_tag.published { background: #e8f8f2 !important; color: #0a6b52 !important; border-color: #b8ebda !important; }
body.active_admin .status_tag.error, body.active_admin .status_tag.no, body.active_admin .status_tag.red { background: #fdeceb !important; color: #b91c1c !important; border-color: #f9c6c2 !important; }
body.active_admin .status_tag.warn, body.active_admin .status_tag.warning, body.active_admin .status_tag.pending { background: #fff7e8 !important; color: #b45309 !important; border-color: #fde68a !important; }
body.active_admin .status_tag.blue { background: #e8f1ff !important; color: #1d4ed8 !important; border-color: #bfdbfe !important; }

/* ── sidebar filters → dr-filter-panel look ── */
body.active_admin #sidebar {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
body.active_admin #sidebar .sidebar_section {
  background: linear-gradient(180deg, #f8fafc, #f1f5f9) !important;
  border: 1px solid #e5eaf2 !important;
  border-radius: 12px !important;
  padding: 14px !important;
  box-shadow: none !important;
}
body.active_admin #sidebar .sidebar_section h3 {
  font-size: 0.78rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #64748b !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding-bottom: 8px !important;
  margin-bottom: 10px !important;
  text-shadow: none !important;
}
body.active_admin #sidebar label { font-size: 0.76rem !important; color: #4b5565 !important; font-weight: 650 !important; }
body.active_admin form.filter_form fieldset { border: 0 !important; }

/* ── inputs ── */
body.active_admin input[type=text], body.active_admin input[type=search], body.active_admin input[type=email],
body.active_admin input[type=number], body.active_admin input[type=password], body.active_admin input[type=url],
body.active_admin select, body.active_admin textarea {
  border: 1px solid #cfd7e2 !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  font-size: 0.84rem !important;
  color: #1f2937 !important;
  background: #fff !important;
  box-shadow: none !important;
}
body.active_admin input:focus, body.active_admin select:focus, body.active_admin textarea:focus {
  border-color: #2f6bf5 !important;
  outline: 2px solid rgba(47,107,245,.15) !important;
}

/* ── pagination ── */
body.active_admin .pagination { font-size: 0.78rem; }
body.active_admin .pagination a, body.active_admin .pagination span {
  border-radius: 8px !important;
  border: 1px solid #e5eaf2 !important;
  margin: 0 2px !important;
  padding: 5px 10px !important;
  color: #374151 !important;
  background: #fff !important;
}
body.active_admin .pagination span.current { background: #0e1b33 !important; color: #fff !important; border-color: #0e1b33 !important; }
body.active_admin .pagination_information { color: #8494a8 !important; font-size: 0.76rem !important; }

/* ── flash messages → toasts ── */
body.active_admin .flash {
  border-radius: 10px !important;
  border: 1px solid #b8ebda !important;
  background: #e8f8f2 !important;
  color: #0a6b52 !important;
  font-weight: 650 !important;
  padding: 11px 14px !important;
  text-shadow: none !important;
  box-shadow: 0 4px 14px rgba(15,23,42,.06) !important;
}
body.active_admin .flash.flash_error { border-color: #f9c6c2 !important; background: #fdeceb !important; color: #b91c1c !important; }

/* ── forms (new/edit pages) ── */
body.active_admin fieldset.inputs {
  background: #fff !important;
  border: 1px solid #e9ecf2 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
body.active_admin fieldset.inputs legend {
  font-size: 0.78rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #64748b !important;
  font-weight: 750 !important;
}
body.active_admin fieldset.actions, body.active_admin .form-actions { background: transparent !important; border: 0 !important; box-shadow: none !important; }

/* ── dropdown menus in tables ── */
body.active_admin .index_table .dropdown_menu ul { border-radius: 10px !important; border: 1px solid #e5eaf2 !important; box-shadow: 0 12px 30px rgba(11,18,32,.14) !important; }
body.active_admin .dropdown_menu_button { border-radius: 8px !important; border: 1px solid #e5eaf2 !important; background: #fff !important; font-size: 0.78rem !important; }

/* higher-specificity title action (base skin override) */
body.active_admin.logged_in #title_bar a.button,
body.active_admin.logged_in #title_bar .action_items a,
body.active_admin.logged_in #title_bar .action_items a.button { background: #0d9488 !important; }
body.active_admin.logged_in:not(.dashboard,.remote_stats) #title_bar a.button,
body.active_admin.logged_in:not(.dashboard,.remote_stats) #title_bar .action_items a,
body.active_admin.logged_in:not(.dashboard,.remote_stats) #title_bar .action_items a.button { background: #0d9488 !important; }

/* ── structural page redesign (vpp layout) ─────────────────────────── */
#vp-ws { padding: 0 !important; }
.vpp { display: grid; gap: 12px; }
.vpp-crumb { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: #7a8799; font-weight: 600; }
.vpp-crumb .tl-crumb-sep { color: #a8b3c2; }
.vpp-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 2px; }
.vpp-head .tl-title { margin: 0; font-family: "Outfit", "Manrope", sans-serif; font-size: 1.5rem; font-weight: 750; letter-spacing: -.02em; color: #2c3645; }
.vpp-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vpp-actions .action_items { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.vpp-actions .action_items a,
.vpp-actions .table_tools a, .vpp-actions .table_tools button { margin: 0 !important; }
.vpp-actions .action_items a { font: inherit; }
.vpp-btn-teal, .vpp-btn-blue, .vpp-btn-clear {
  display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 9px;
  padding: 9px 15px; font-size: .82rem; font-weight: 700; cursor: pointer; color: #fff !important;
  text-decoration: none !important; text-shadow: none !important; transition: filter .12s ease;
}
.vpp-btn-teal { background: #0d9488; box-shadow: 0 1px 0 rgba(6,78,74,.25); }
.vpp-btn-blue { background: #2563eb; box-shadow: 0 1px 0 rgba(30,64,175,.25); }
.vpp-btn-clear { background: #c5ccd6; }
.vpp-btn-teal:hover, .vpp-btn-blue:hover, .vpp-btn-clear:hover { filter: brightness(1.07); }

/* filter drawer (collapsed by default, grid of fields) */
.vpp-filter { display: none; border: 1px solid #e5eaf2; border-radius: 12px; padding: 14px 16px; background: linear-gradient(180deg, #f8fafc, #f1f5f9); }
.vpp-filter.open { display: block; }
.vpp-filter form.filter_form { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px 18px; align-items: end; }
.vpp-filter form.filter_form > .filter_form_field { margin: 0 !important; min-width: 0; }
.vpp-filter form.filter_form .filter_form_field label { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #64748b; margin-bottom: 5px; }
.vpp-filter form.filter_form .filter_form_field input[type=text],
.vpp-filter form.filter_form .filter_form_field input[type=search],
.vpp-filter form.filter_form .filter_form_field input[type=number],
.vpp-filter form.filter_form .filter_form_field select { width: 100%; }
.vpp-filter form.filter_form .filter_form_field ul,
.vpp-filter form.filter_form .filter_form_field fieldset { max-height: 108px; overflow: auto; margin: 0; list-style: none; padding: 0 4px 0 0; }
.vpp-filter form.filter_form .filter_form_field ul label,
.vpp-filter form.filter_form .filter_form_field fieldset label { text-transform: none; font-size: .78rem; font-weight: 600; color: #374151; display: flex; align-items: center; gap: 6px; margin: 3px 0; }
.vpp-filter form.filter_form .buttons,
.vpp-filter form.filter_form .actions { grid-column: 1 / -1; justify-self: end; display: flex; gap: 8px; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
.vpp-fbtn { order: -1; }

/* body cards */
.vpp-body { display: grid; gap: 12px; }
.vpp-body .paginated_collection { box-shadow: none !important; overflow: hidden; border-radius: 12px; }
.vpp-body .index_content { padding: 0 !important; }
.vpp-body .table_tools { margin: 0; }
.vpp-body form fieldset.inputs { margin: 0; }

/* footer row */
.vpp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vpp-foot .pagination { margin: 0; }
.vpp-foot .download_links { font-size: .76rem; color: #8494a8; }
.vpp-foot .download_links a { color: #1447e6; }

/* mobile */
@media (max-width: 720px) {
  .vpp-head { flex-direction: column; align-items: flex-start; }
  .vpp-filter form.filter_form fieldset, .vpp-filter form.filter_form fieldset ol { flex-direction: column; align-items: stretch; }
  .vpp-ffield input, .vpp-ffield select { width: 100%; min-width: 0; }
}

/* ── Companies-pattern scope pills for every index page ────────────── */
.vpp-scopes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vpp-tabletools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; box-shadow: none !important; }
.vpp-tabletools ul { display: contents; list-style: none; margin: 0; padding: 0; }
.vpp-tabletools .scopes { display: contents; }
.vpp-tabletools .scope a,
.vpp-tabletools .scope {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #d5dde8; background: #f4f7fa; color: #4b5563;
  border-radius: 999px; padding: 5px 13px; font-size: .78rem; font-weight: 700;
  text-decoration: none !important; cursor: pointer; text-shadow: none !important;
}
.vpp-tabletools .scope a:hover, .vpp-tabletools .scope:hover { border-color: #0d9488; color: #0a6b52; }
.vpp-tabletools .scope.selected a, .vpp-tabletools .scope.selected,
.vpp-tabletools .scope.selected a span.count {
  background: #0d9488; border-color: #0d9488; color: #fff;
}
.vpp-tabletools .scope a span.count, .vpp-tabletools .scope span.count {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 999px;
  padding: 0 7px; font-size: .72rem; color: #64748b; font-weight: 700;
}
.vpp-tabletools .scope.selected a span.count, .vpp-tabletools .scope.selected span.count {
  background: rgba(255,255,255,.22); border-color: transparent; color: #fff;
}
/* batch-action dropdown as a pill */
.vpp-tabletools .dropdown_menu { display: inline-flex; }
.vpp-tabletools .dropdown_menu_button {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #d5dde8; background: #f4f7fa; color: #4b5563;
  border-radius: 8px; padding: 5px 13px; font-size: .78rem; font-weight: 700;
  cursor: pointer; text-shadow: none !important; box-shadow: none !important;
}
.vpp-tabletools .dropdown_menu_button:hover { border-color: #93c5fd; color: #1d4ed8; }
.vpp-tabletools .dropdown_menu ul { display: none; position: absolute; background: #fff; border: 1px solid #e5eaf2; border-radius: 10px; box-shadow: 0 12px 30px rgba(11,18,32,.14); padding: 6px; z-index: 60; margin-top: 4px; }
.vpp-tabletools .dropdown_menu.open ul { display: block; }
.vpp-tabletools .dropdown_menu ul li { display: block; }
.vpp-tabletools .dropdown_menu ul a { display: block; padding: 8px 12px; border-radius: 7px; font-size: .8rem; color: #374151 !important; text-decoration: none !important; white-space: nowrap; }
.vpp-tabletools .dropdown_menu ul a:hover { background: #f1f5f9; }

/* table density to match the Companies list */
.vpp-body table.index_table td { padding: 9px 10px !important; }
.vpp-body table.index_table th { padding: 10px 10px !important; }

/* per-page + pagination footer like Companies */
.vpp-foot select { border: 1px solid #cfd7e2 !important; border-radius: 8px !important; padding: 5px 8px !important; font-size: .8rem !important; background: #fff !important; }