/*
 * admin-modern.css — refinements layered on top of admin-brand.css to match the
 * approved modern mockup. Loaded after admin-brand in every theme layout, so it
 * wins where they overlap. CSS-only over Metronic markup; no layout/JS changes.
 */

/* The admin is a deliberately light design (dark sidebar, light content). Tell the browser
   so Chrome's "Auto Dark Mode for Web Contents" doesn't invert it into unreadable dark-on-dark. */
:root { color-scheme: light; }

/* Modern system font across the whole admin shell */
body, .aside, .aside-menu, .header, .btn, .form-control, .subheader,
.card, table, table.dataTable, .modal {
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Airier page canvas + content rhythm */
.content { padding-top: 18px; }
body { -webkit-font-smoothing: antialiased; }

/* Emoji-led sidebar: every menu label now starts with an emoji, so the old monochrome
   flaticons are redundant noise — and three of them didn't render at all, which threw
   those rows out of alignment. Hide the icon slot; the emoji IS the icon. */
.aside-menu .menu-nav .menu-item .menu-link .menu-icon { display: none !important; }
.aside-menu .menu-nav .menu-item .menu-link .menu-text { padding-left: 4px; }

/* Sidebar: subtle section rhythm + quieter scrollbar */
.aside-menu .menu-nav > .menu-section .menu-text {
    color: #9aa4b8 !important;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.aside-menu::-webkit-scrollbar { width: 8px; }
.aside-menu::-webkit-scrollbar-thumb { background: #262b35; border-radius: 8px; }

/* Datatables toolbar: pill search + soft select */
.dataTables_wrapper .dataTables_filter input,
.dataTables_length select {
    border-radius: 10px !important;
    border: 1px solid #e2e7ef !important;
    padding: 8px 12px !important;
    background-color: #fff;
}
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: #46b7c5 !important;
    box-shadow: 0 0 0 3px rgba(70,183,197,.15) !important;
    outline: none;
}

/* Card headers a touch tighter; card titles crisp */
.card.card-custom > .card-header { padding-top: 12px; padding-bottom: 12px; }

/* Portlet stat numbers (dashboard widgets) read bigger + tabular */
.card .kt-widget24 .kt-widget24__stats,
.card [class*="font-size-h"] { font-variant-numeric: tabular-nums; letter-spacing: -.3px; }

/* Primary/secondary buttons: slightly larger hit area, crisp label */
.btn { font-weight: 600; letter-spacing: .1px; }
.btn.btn-sm { border-radius: 8px; }

/* Tabs: modern underline instead of boxed */
.nav.nav-tabs .nav-link.active {
    color: #1e7481 !important;
    border-color: transparent transparent #46b7c5 transparent !important;
    background: transparent !important;
    font-weight: 700;
}

/* Inputs & selects consistent radius */
.form-control, .select2-container--default .select2-selection--single {
    border-radius: 10px !important;
}

/* ---------- Modern hover / interaction polish (every page) ---------- */
/* Cards lift gently on hover */
.card.card-custom { transition: box-shadow .2s ease, transform .2s ease; }
.card.card-custom:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(16,24,40,.08), 0 18px 44px rgba(16,24,40,.1); }
/* Dashboard KPI + flag tiles lift + accent on hover */
.mpd-kpi, .mpd-flag, .mpd-card { transition: transform .16s ease, box-shadow .16s ease; }
.mpd-kpi:hover, .mpd-flag:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(16,24,40,.1), 0 20px 46px rgba(16,24,40,.12); }
.mpd-kpi:hover .chip { transform: scale(1.08); transition: transform .16s ease; }
/* Table rows: smooth hover highlight + a cyan cursor rail */
.table tbody tr, table.dataTable tbody tr { transition: background-color .12s ease, box-shadow .12s ease; }
.table.table-hover tbody tr:hover, table.dataTable tbody tr:hover { background-color: #f2fafc !important; box-shadow: inset 3px 0 0 #46b7c5; }
/* Buttons: smooth, primary/secondary lift a touch */
.btn { transition: background .15s ease, box-shadow .15s ease, transform .1s ease, filter .15s ease; }
.btn-primary:hover, .btn-light-primary:hover, .btn-success:hover, .btn-info:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) !important; }
.btn-icon:hover, .btn-sm:hover { filter: brightness(1.04); }
/* Row-action dropdown toggle + links */
.dropdown-toggle, td a { transition: color .12s ease, background-color .12s ease; }
/* Sidebar items slide-highlight smoothly (icons nudge on hover) */
.aside-menu .menu-nav > .menu-item > .menu-link { transition: background-color .14s ease, border-color .14s ease; }
.aside-menu .menu-nav > .menu-item > .menu-link:hover .menu-link-icon { transform: scale(1.12); transition: transform .14s ease; }
/* Links + clickable helpers */
a, .clickable-item { transition: color .12s ease, opacity .12s ease; }
/* Modals + popups animate in a touch softer */
.modal.fade .modal-dialog { transition: transform .22s ease, opacity .22s ease; }

/* ---------- Modern tooltips ---------- */
.tooltip .tooltip-inner {
    background: #1b1f28; color: #eef1f6; border-radius: 10px; padding: 8px 12px;
    font-size: 12.5px; font-weight: 500; box-shadow: 0 8px 24px rgba(16,24,40,.3); max-width: 340px;
    /* Long unbroken content (JSON parameters, user-agent strings) must wrap, not clip. */
    white-space: normal; overflow-wrap: anywhere; text-align: left;
}
.tooltip .arrow::before, .tooltip .tooltip-arrow::before,
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before { border-top-color: #1b1f28 !important; }
.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: #1b1f28 !important; }
.bs-tooltip-left .arrow::before { border-left-color: #1b1f28 !important; }
.bs-tooltip-right .arrow::before { border-right-color: #1b1f28 !important; }

/* ---------- Modern popups (SweetAlert2 — abp.message confirm/info/error) ---------- */
.swal2-popup { border-radius: 18px !important; box-shadow: 0 24px 64px rgba(16,24,40,.3) !important; padding: 24px !important; }
.swal2-title { font-size: 1.3rem !important; font-weight: 750 !important; color: #101216 !important; letter-spacing: -.2px; }
.swal2-html-container, .swal2-content { font-size: 14.5px !important; color: #5b6472 !important; }
.swal2-actions { gap: 8px; }
.swal2-styled.swal2-confirm, .swal2-confirm {
    border-radius: 10px !important; font-weight: 600 !important;
    background: linear-gradient(135deg,#46b7c5,#2e8fa3) !important; border: none !important;
    box-shadow: 0 4px 12px rgba(70,183,197,.35) !important;
}
.swal2-styled.swal2-cancel, .swal2-cancel {
    border-radius: 10px !important; font-weight: 600 !important;
    background: #eef2f7 !important; color: #5b6472 !important; border: none !important;
}

/* ---------- Toastr notifications (abp.notify) ---------- */
#toast-container > div {
    border-radius: 12px !important; box-shadow: 0 12px 32px rgba(16,24,40,.24) !important;
    opacity: 1 !important; padding: 15px 18px 15px 50px !important; font-size: 14px !important;
}
#toast-container > .toast-success { background-color: #1f9d6b !important; }
#toast-container > .toast-error { background-color: #d0524f !important; }
#toast-container > .toast-info { background-color: #2e8fa3 !important; }
#toast-container > .toast-warning { background-color: #c98a12 !important; }

/* ---------- Bootstrap popovers ---------- */
.popover { border: none !important; border-radius: 14px !important; box-shadow: 0 16px 40px rgba(16,24,40,.2) !important; }
.popover .popover-header { background: #f7f9fc; border-bottom: 1px solid #eef1f6; font-weight: 700; border-radius: 14px 14px 0 0; }
.popover .arrow::before, .popover .arrow::after { border-top-color: transparent; }

/* ---------- Dropdown menus (row actions etc.) ---------- */
.dropdown-menu { border: none; border-radius: 12px; box-shadow: 0 12px 32px rgba(16,24,40,.16); padding: 6px; }
.dropdown-menu .dropdown-item { border-radius: 8px; padding: 8px 12px; font-size: 13.5px; }
.dropdown-menu .dropdown-item:hover { background: #f2fafc; color: #1e7481; }

/* Per-user storage under the username in the Users grid */
.mp-uStorage { font-size: 12.5px; color: #2e8fa3; font-weight: 600; margin-top: 3px; }

/* Status filter chips (Pages grid) */
.mp-status-chips { display: flex; gap: 8px; margin: 0 0 16px; flex-wrap: wrap; }
.mp-chip { border: 1px solid #e2e7ef; background: #fff; color: #5b6472; border-radius: 999px; padding: 7px 16px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .14s ease; }
.mp-chip:hover { border-color: #46b7c5; color: #1e7481; }
.mp-chip.active { background: linear-gradient(135deg,#46b7c5,#2e8fa3); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(70,183,197,.3); }
/* Author avatar initials in the Pages grid */
.mp-pav { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 12px; margin-right: 8px; vertical-align: middle; }

/* ---------- Card-list look for EVERY admin grid (no longer a flat list) ---------- */
.content table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0 12px !important;
}
.content table.dataTable thead th {
    border: none !important;
    padding-bottom: 2px !important;
    color: #9aa2b1 !important;
}
.content table.dataTable tbody tr {
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 6px 18px rgba(16,24,40,.06) !important;
    transition: transform .16s ease, box-shadow .16s ease;
}
.content table.dataTable tbody tr:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(16,24,40,.09), 0 18px 44px rgba(16,24,40,.12) !important;
    background: #fff !important;
}
.content table.dataTable tbody td {
    border: none !important;
    background: transparent !important;
    padding: 14px 12px !important;
    vertical-align: middle;
}
.content table.dataTable tbody td:first-child { border-radius: 14px 0 0 14px; }
.content table.dataTable tbody td:last-child { border-radius: 0 14px 14px 0; }
/* Pages / Events: make the title column stand out */
#PagesTable tbody td:first-child, #eventsTable tbody td:first-child {
    font-weight: 700; font-size: 1.06rem; color: #101216;
}

/* ---------- Admin Pages ops badges (delivery status + at-risk flags) ---------- */
.mp-ops-line { margin-top: 4px; }
.mp-ops-claimed { font-size: 12px; color: #1f9d6b; font-weight: 600; }
.mp-ops-flag { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; margin-top: 2px; }
.mp-ops-flag.bad { background: #fbe9e8; color: #c0413e; }
.mp-ops-flag.warn { background: #fbf1dd; color: #a4740f; }
.mp-ops-badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; }
.mp-ops-badge.ok { background: #e5f5ee; color: #1f9d6b; }
.mp-ops-badge.wait { background: #eef2f7; color: #5b6472; }
.mp-ops-when { font-size: 12px; color: #8b93a1; margin-top: 3px; }

/* ---------- Larger, more readable type across the admin ----------
   Metronic sizes most chrome in rem off a 13px root; raise the root so the whole
   admin scales up uniformly (headings, labels, buttons, dashboard). */
html { font-size: 15px !important; }
body { font-size: 1rem !important; }
.aside-menu .menu-nav > .menu-item > .menu-link .menu-text { font-size: 1.16rem !important; }
.aside-menu .menu-nav .menu-submenu .menu-item > .menu-link .menu-text { font-size: 1.06rem !important; }
.content { font-size: 16px; }
.content p, .content label, .content .form-control, .content .form-label,
.content td, .content th, .content .btn, .content a, .content .list-group-item,
.content .dropdown-item, .content span { font-size: 16px; }
.table tbody td, table.dataTable tbody td { font-size: 16px !important; }
.table thead th, table.dataTable thead th { font-size: .9rem !important; }
.subheader .subheader-title, .subheader h1, .subheader h3 { font-size: 1.8rem !important; }
.card.card-custom > .card-header .card-title,
.card.card-custom > .card-header .card-label { font-size: 1.3rem !important; }
.modal .modal-title { font-size: 1.35rem !important; }
.modal .modal-body, .modal .modal-body td, .modal .modal-body th { font-size: 15.5px !important; }

/* ---------- Emoji menu icons (replace Metronic flaticons) ---------- */
.aside-menu .menu-nav .menu-link .menu-link-icon::before {
    font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif !important;
    font-size: 1.15rem !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1 !important;
    display: inline-block;
    vertical-align: middle;
}
.aside-menu .menu-nav .menu-link .menu-link-icon.flaticon-line-graph::before { content: "📊" !important; }
.aside-menu .menu-nav .menu-link .menu-link-icon.flaticon-list-3::before { content: "🏢" !important; }
.aside-menu .menu-nav .menu-link .menu-link-icon.flaticon-app::before { content: "🎫" !important; }
.aside-menu .menu-nav .menu-link .menu-link-icon.flaticon-interface-8::before { content: "⚙️" !important; }
.aside-menu .menu-nav .menu-link .menu-link-icon.flaticon-suitcase::before { content: "🧳" !important; }
.aside-menu .menu-nav .menu-link .menu-link-icon.flaticon-users::before { content: "👥" !important; }
.aside-menu .menu-nav .menu-link .menu-link-icon.flaticon-calendar::before { content: "🎁" !important; }
.aside-menu .menu-nav .menu-link .menu-link-icon.flaticon-book::before { content: "📄" !important; }
.aside-menu .menu-nav .menu-link .menu-link-icon.flaticon-email::before { content: "✉️" !important; }
.aside-menu .menu-nav .menu-link .menu-link-icon.flaticon-tabs::before { content: "🌐" !important; }
.aside-menu .menu-nav .menu-link .menu-link-icon.flaticon-folder-1::before { content: "🗂️" !important; }
.aside-menu .menu-nav .menu-link .menu-link-icon.flaticon-paper-plane::before { content: "✈️" !important; }
.aside-menu .menu-nav .menu-link .menu-link-icon.flaticon-lock::before { content: "🔧" !important; }
.aside-menu .menu-nav .menu-link .menu-link-icon.flaticon-medical::before { content: "🎨" !important; }
.aside-menu .menu-nav .menu-link .menu-link-icon.flaticon-settings::before { content: "⚙️" !important; }

/* Global page scrollbar, quiet */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: #cfd6e2; border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #b6bfce; background-clip: content-box; }

/* Separator between audit quick-chip groups */
.mp-chip-sep { width: 1px; align-self: stretch; background: #e2e7ef; margin: 4px 6px; }

/* ── Audit analytics panel ─────────────────────────────────────────── */
.mp-audit-analytics { margin: 4px 0 22px; }
.mp-aa-stats { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
.mp-aa-stat { flex: 1 1 160px; background: #fff; border: 1px solid #eef1f6; border-radius: 14px;
    padding: 16px 18px; box-shadow: 0 2px 8px rgba(20,30,60,.05); display: flex; flex-direction: column; gap: 4px; }
.mp-aa-num { font-size: 1.7rem; font-weight: 700; color: #1b2438; line-height: 1.1; }
.mp-aa-lbl { font-size: .9rem; color: #6b7688; font-weight: 500; }
.mp-aa-err .mp-aa-num { color: #d64550; }
.mp-aa-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.mp-aa-card { background: #fff; border: 1px solid #eef1f6; border-radius: 14px; padding: 16px 18px;
    box-shadow: 0 2px 8px rgba(20,30,60,.05); }
.mp-aa-title { font-size: 1rem; font-weight: 600; color: #2a3450; margin-bottom: 12px; }
.mp-aa-bars { display: flex; flex-direction: column; gap: 9px; }
.mp-aa-bar { display: grid; grid-template-columns: 34% 1fr auto; align-items: center; gap: 10px; }
.mp-aa-bname { font-size: .86rem; color: #45516a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-aa-track { height: 9px; background: #eef1f6; border-radius: 6px; overflow: hidden; }
.mp-aa-fill { display: block; height: 100%; border-radius: 6px;
    background: linear-gradient(90deg, #5b8def, #8f6fe6); transition: width .5s ease; }
.mp-aa-cnt { font-size: .84rem; font-weight: 600; color: #2a3450; font-variant-numeric: tabular-nums; }
.mp-aa-empty { font-size: .86rem; color: #9aa3b2; padding: 6px 0; }

/* Clickable analytics bars → filter the grid */
.mp-aa-click { cursor: pointer; padding: 2px 4px; margin: 0 -4px; border-radius: 7px; transition: background .15s ease; }
.mp-aa-click:hover { background: #f3f6fc; }
.mp-aa-click:hover .mp-aa-bname { color: #2a3450; }
.mp-aa-active { background: #eef3ff; }
.mp-aa-active .mp-aa-bname { color: #3a5bd0; font-weight: 600; }
.mp-aa-active .mp-aa-fill { background: linear-gradient(90deg, #3a5bd0, #6f4fd8); }

/* ── Compact modern filter bar (audit + reusable) ──────────────────── */
.mp-filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px;
    background: #f8fafd; border: 1px solid #eef1f6; border-radius: 14px; padding: 16px 18px; margin-bottom: 16px; }
.mp-filter-field { display: flex; flex-direction: column; gap: 5px; width: 180px; }
.mp-filter-field.mp-ff-lg { width: 240px; }
.mp-filter-field > label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
    font-weight: 600; color: #7a8699; margin: 0; }
.mp-filter-bar .form-control,
.mp-filter-bar select.form-control {
    height: 40px; font-size: .9rem; border-radius: 10px; border: 1px solid #e2e7ef;
    background-color: #fff; padding: 6px 12px; color: #2a3450; box-shadow: none; transition: border-color .15s, box-shadow .15s; }
.mp-filter-bar select.form-control {
    -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 30px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237a8699' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; }
.mp-filter-bar .form-control:focus {
    border-color: #5b8def; box-shadow: 0 0 0 3px rgba(91,141,239,.15); outline: none; }
@media (max-width: 600px) { .mp-filter-field, .mp-filter-field.mp-ff-lg { width: 100%; } }

/* Errors stat card is clickable → jumps to the error log */
.mp-aa-stat.mp-aa-err { cursor: pointer; transition: box-shadow .15s, transform .1s; }
.mp-aa-stat.mp-aa-err:hover { box-shadow: 0 4px 14px rgba(214,69,80,.18); transform: translateY(-1px); }
.mp-aa-stat.mp-aa-err::after { content: "🔎 view log"; font-size: .72rem; color: #d64550; font-weight: 600; margin-top: 2px; }

/* Clickable IP → ipinfo.io lookup */
.mp-ip-link { color: #3a5bd0; text-decoration: none; white-space: nowrap; }
.mp-ip-link:hover { text-decoration: underline; }
.mp-ip-link .mp-ip-go { opacity: .55; font-size: .85em; }
.mp-ip-link:hover .mp-ip-go { opacity: 1; }

/* Wide Top-IPs analytics card + geolocated IP bars */
.mp-aa-card.mp-aa-wide { grid-column: 1 / -1; }
.mp-aa-ipbars .mp-ipbar { grid-template-columns: 46% 1fr auto; }
.mp-ipbar .mp-aa-bname { display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.mp-ip-ipn { font-weight: 600; color: #2a3450; font-variant-numeric: tabular-nums; }
.mp-ip-geo2 { font-size: .76rem; color: #6b7688; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-ip-inline { margin-left: 6px; font-size: .82rem; color: #45516a; white-space: nowrap; }

/* Access map (proportional-symbol world map) */
.mp-aa-map { width: 100%; }
.mp-map-svg { width: 100%; height: auto; display: block; border-radius: 10px; }
.mp-map-bg { fill: #eef3f8; }
.mp-map-grat { stroke: #d7e0ea; stroke-width: .5; }
.mp-map-lbl { fill: #aeb8c6; font-size: 11px; font-weight: 600; text-anchor: middle; }
.mp-map-dot { fill: rgba(46,143,163,.55); stroke: #2e8fa3; stroke-width: 1; transition: fill .15s; cursor: default; }
.mp-map-dot:hover { fill: rgba(122,68,184,.7); }

/* IP detail popup */
.mp-ipd-overlay { position: fixed; inset: 0; background: rgba(20,30,60,.45); z-index: 10600; display: flex; align-items: center; justify-content: center; padding: 20px; }
.mp-ipd { background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(20,30,60,.3); width: 460px; max-width: 100%; max-height: 90vh; overflow: auto; position: relative; }
.mp-ipd-x { position: absolute; top: 10px; right: 12px; border: none; background: transparent; font-size: 24px; line-height: 1; color: #9aa3b2; cursor: pointer; }
.mp-ipd-title { font-size: 1.15rem; font-weight: 700; color: #1b2438; padding: 18px 20px 8px; }
.mp-ipd-body { padding: 0 20px 18px; }
.mp-ipd-row { display: grid; grid-template-columns: 130px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f1f4f8; font-size: .9rem; }
.mp-ipd-row:last-of-type { border-bottom: none; }
.mp-ipd-k { color: #8a97ab; font-weight: 600; }
.mp-ipd-v { color: #2a3450; word-break: break-word; }
.mp-ipd-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; }
.mp-ipd-links a { color: #3a5bd0; font-weight: 600; font-size: .88rem; text-decoration: none; }
.mp-ipd-links a:hover { text-decoration: underline; }

/* Leaflet access map container */
#AaMap { height: 440px; width: 100%; border-radius: 10px; overflow: hidden; z-index: 0; }
#AaMap .leaflet-container { border-radius: 10px; font: inherit; }

/* VPN / blacklist IP badges + popup warning */
.mp-ip-vpn { margin-left: 6px; font-size: .78rem; font-weight: 600; color: #c98a12; white-space: nowrap; }
.mp-ip-bl { margin-left: 6px; font-size: .82rem; }
/* Parameters cell: truncated one-liner that expands to a fully wrapped block on click */
.mp-params { cursor: pointer; }
.mp-params.open { display: block; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all; max-width: 460px; font-size: .8rem; background: #f6f8fb; border-radius: 8px; padding: 6px 9px; }

/* IP name chips: admin label (accent) vs auto-identified bot/company/internal (muted) */
.mp-ip-tag { margin-left: 6px; font-size: .74rem; font-weight: 600; color: #2563ab; background: #eaf2fb; border: 1px solid #cadbef; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.mp-ip-bot { margin-left: 6px; font-size: .74rem; color: #6b7688; background: #f2f4f8; border: 1px solid #dfe4ec; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.mp-ipd-warn { margin-top: 12px; padding: 8px 12px; background: #fdf9ef; border: 1px solid #f0e0bb; border-radius: 9px; color: #a8730c; font-size: .84rem; }
.mp-ipd-src { margin-top: 8px; font-size: .72rem; color: #b6bfce; }
.mp-ipd-links a.mp-ipd-bl { color: #d0524f; }
.mp-ipd-links a.mp-ipd-unbl { color: #1f9d6b; }

/* ⓘ "what does this do?" doc icon on service / action bars + its popup */
.mp-aa-doc { margin-left: 6px; color: #b0b9c9; cursor: help; font-size: .82rem; font-style: normal; transition: color .12s; }
.mp-aa-doc:hover { color: #3a5bd0; }

/* Hover popover — rich docs for services/actions + full IP details with live actions */
.mp-hover-pop { position: fixed; z-index: 1090; width: 400px; max-width: calc(100vw - 16px); max-height: 70vh; overflow-y: auto; background: #fff; border: 1px solid #e7ebf5; border-radius: 16px; box-shadow: 0 10px 26px rgba(16,24,40,.16), 0 28px 70px rgba(16,24,40,.2); padding: 16px 18px; animation: mp-pop-in .14s ease-out; }
@keyframes mp-pop-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.mp-hover-pop .mp-ipd-title { font-size: 1.02rem; font-weight: 700; color: #1b2438; margin-bottom: 10px; }
.mp-hover-pop .mp-ipd-links { flex-wrap: wrap; }
.mp-doc-hover { cursor: help; border-bottom: 1px dashed #cdd8f0; }
.mp-doc-hover:hover { color: #3a5bd0; border-bottom-color: #3a5bd0; }
.mp-doc-sec { font-size: .88rem; line-height: 1.55; color: #34405a; margin-bottom: 10px; }
.mp-doc-sec-k { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8a97ab; margin-bottom: 2px; }

/* Modern documentation card (service / action popup) */
.mp-doc { max-width: 460px; }
.mp-doc-head { display: flex; align-items: center; gap: 13px; margin: 2px 0 14px; }
.mp-doc-ic { width: 46px; height: 46px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 24px; background: linear-gradient(135deg, #eef3ff, #f3edfb); border-radius: 12px; box-shadow: inset 0 0 0 1px #e7ebf5; }
.mp-doc-htext { min-width: 0; }
.mp-doc-h1 { font-size: 1.12rem; font-weight: 700; color: #1b2438; line-height: 1.25; }
.mp-doc-badge { display: inline-block; margin-top: 5px; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #566079; background: #eef1f6; border-radius: 999px; padding: 3px 9px; }
.mp-doc-badge.acc-read { color: #1f7a52; background: #e6f6ee; }
.mp-doc-badge.acc-write { color: #a8730c; background: #fdf4e3; }
.mp-doc-desc { font-size: .95rem; line-height: 1.55; color: #34405a; margin-bottom: 12px; }
.mp-doc-note { font-size: .84rem; line-height: 1.5; color: #6b7688; background: #f7f9fc; border-left: 3px solid #cdd8f0; border-radius: 0 8px 8px 0; padding: 9px 12px; margin-bottom: 14px; }
.mp-doc-grid { display: flex; flex-direction: column; gap: 1px; background: #eef1f6; border: 1px solid #eef1f6; border-radius: 10px; overflow: hidden; }
.mp-doc-r { display: grid; grid-template-columns: 130px 1fr; gap: 10px; padding: 9px 13px; background: #fff; font-size: .88rem; }
.mp-doc-k { color: #8a97ab; font-weight: 600; }
.mp-doc-v { color: #26324a; }
.mp-doc-v code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; background: #f2f5fb; padding: 2px 6px; border-radius: 5px; color: #3a4a63; }
.mp-doc .mp-ipd-links { margin-top: 14px; }

/* Active-filter highlight: any dropdown / search box that's narrowing the grid
   (value ≠ "All"/empty) lights up so live filters are obvious at a glance. */
select.mp-filter-on, input.mp-filter-on {
    border-color: #2e8fa3 !important;
    background-color: #e9f8fb !important;
    box-shadow: inset 3px 0 0 #2e8fa3, 0 0 0 3px rgba(46,143,163,.1) !important;
    color: #135e6d !important;
    font-weight: 600;
}
select.mp-filter-on:focus, input.mp-filter-on:focus { box-shadow: inset 3px 0 0 #2e8fa3, 0 0 0 3px rgba(46,143,163,.22) !important; }