/* ============================================================
   GeoRisk — minimal additions on top of the IM design system.
   Only components that have NO IM equivalent live here:
     1. role-pill (header role badge — multi-role demo only)
     2. geo-map  (stylised UAE map markers — VP-only feature)
     3. q-card / yn-toggle (checklist question with Yes/No)
   Everything else MUST use stock IM classes from style.css.
   ============================================================ */

/* ── 1. Role pill in header (multi-role demo) ── */
.role-pill {
    display:inline-flex; align-items:center;
    padding:5px 12px; font-size:11px; font-weight:600;
    letter-spacing:.02em; border-radius:9999px;
    white-space:nowrap; margin-right:var(--sp-1);
}
.role-pill.role-badge-blue   { background:var(--info-50);    color:var(--info-600); }
.role-pill.role-badge-cyan   { background:var(--teal-50);    color:var(--teal-700); }
.role-pill.role-badge-red    { background:var(--danger-50);  color:var(--danger-600); }
.role-pill.role-badge-amber  { background:var(--warning-50); color:var(--warning-700); }
.role-pill.role-badge-white  { background:#fff; color:var(--adnoc-700); border:1px solid var(--n-200); }

/* ── 2. Stylised UAE risk map (VP / Control Room only) ── */
.geo-map {
    position:relative; height:520px;
    border-radius:var(--r-lg); overflow:hidden;
    border:1px solid var(--n-200);
    background:
        radial-gradient(ellipse at 30% 60%, rgba(59,130,246,.10) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 40%, rgba(245,158,11,.08) 0%, transparent 60%),
        linear-gradient(135deg, #E0F2FE 0%, #DBEAFE 60%, #E0E7FF 100%);
}
.geo-map::after {
    content:''; position:absolute; inset:0; pointer-events:none;
    background-image:
        linear-gradient(rgba(15,42,82,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,42,82,.05) 1px, transparent 1px);
    background-size:40px 40px;
}
.geo-marker {
    position:absolute; transform:translate(-50%,-50%);
    width:38px; height:38px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:10px; font-weight:700; color:#fff;
    border:3px solid #fff;
    box-shadow:0 4px 14px rgba(0,0,0,.18);
    cursor:pointer; transition:transform 150ms; z-index:2;
}
.geo-marker:hover { transform:translate(-50%,-50%) scale(1.1); }
.geo-marker.high   { background:var(--danger-500); }
.geo-marker.medium { background:var(--warning-500); }
.geo-marker.clear  { background:var(--success-500); }
.geo-marker.no-data{ background:var(--n-400); }
.geo-marker.active::after {
    content:''; position:absolute; inset:-8px;
    border-radius:50%; border:2px solid currentColor;
    animation:geoPulseRing 1.6s infinite;
}
@keyframes geoPulseRing { 0%{transform:scale(1);opacity:.8} 100%{transform:scale(1.4);opacity:0} }
.geo-legend {
    position:absolute; bottom:14px; left:14px; z-index:3;
    background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
    border:1px solid var(--n-200); border-radius:var(--r-md);
    padding:10px 14px;
    display:flex; flex-direction:column; gap:5px;
    font-size:11.5px; color:var(--n-700);
}
.geo-legend .lg-row { display:flex; align-items:center; gap:8px; }
.geo-legend .lg-dot { width:10px; height:10px; border-radius:50%; }
.geo-zoom {
    position:absolute; bottom:14px; right:14px; z-index:3;
    display:flex; flex-direction:column; gap:1px;
    background:#fff; border:1px solid var(--n-200);
    border-radius:var(--r-md); overflow:hidden;
}
.geo-zoom button {
    width:34px; height:34px; border:none; background:transparent;
    cursor:pointer; color:var(--n-700); font-size:14px;
}
.geo-zoom button:hover { background:var(--n-50); }

/* ── Decision buttons on review pages (Approve / Reject / Clarify).
       Big block-style buttons with title + sub-description. ── */
.decision-btn {
    width:100%; padding:14px 16px;
    border:1.5px solid var(--n-200); border-radius:var(--r-md);
    background:#fff; cursor:pointer; text-align:left;
    transition:all 150ms;
    display:block;
    color:var(--n-700);
    font-family:inherit;
}
.decision-btn:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.06); }
.decision-btn .db-title {
    font-size:14px; font-weight:600;
    display:flex; align-items:center; gap:8px;
}
.decision-btn .db-sub {
    font-size:12px; color:var(--n-500);
    margin-top:4px; line-height:1.4;
}

.decision-btn.approve { border-color:var(--success-300, #86EFAC); color:var(--success-700); }
.decision-btn.approve:hover  { background:var(--success-50); border-color:var(--success-500); }
.decision-btn.approve.selected {
    background:var(--success-500); color:#fff; border-color:var(--success-500);
    box-shadow:0 4px 14px rgba(34,197,94,.30);
}
.decision-btn.approve.selected .db-sub { color:rgba(255,255,255,0.9); }

.decision-btn.reject { border-color:var(--danger-300, #FCA5A5); color:var(--danger-700, #B91C1C); }
.decision-btn.reject:hover  { background:var(--danger-50); border-color:var(--danger-500); }
.decision-btn.reject.selected {
    background:var(--danger-500); color:#fff; border-color:var(--danger-500);
    box-shadow:0 4px 14px rgba(239,68,68,.30);
}
.decision-btn.reject.selected .db-sub { color:rgba(255,255,255,0.9); }

.decision-btn.clarify { border-color:var(--violet-300, #C4B5FD); color:var(--violet-700, #6D28D9); }
.decision-btn.clarify:hover  { background:var(--violet-50, #F5F3FF); border-color:var(--violet-500, #8B5CF6); }
.decision-btn.clarify.selected {
    background:var(--violet-500, #8B5CF6); color:#fff; border-color:var(--violet-500, #8B5CF6);
    box-shadow:0 4px 14px rgba(139,92,246,.30);
}
.decision-btn.clarify.selected .db-sub { color:rgba(255,255,255,0.9); }

/* When one is selected, dim the others */
.card-body:has(.decision-btn.selected) .decision-btn:not(.selected) {
    opacity:0.55;
}

/* ── 3. Checklist Q card (Yes/No question with optional comment) ── */
.q-card {
    border:1px solid var(--n-200); border-radius:var(--r-md);
    padding:14px 16px; margin-bottom:10px;
    background:#fff;
}
.q-card.answered { border-color:var(--n-300); background:var(--n-25, #FAFBFC); }
.q-card .q-head { display:flex; gap:10px; align-items:flex-start; margin-bottom:10px; }
.q-card .q-num {
    flex-shrink:0; width:24px; height:24px; border-radius:50%;
    background:var(--brand-500); color:#fff;
    font-size:12px; font-weight:600;
    display:flex; align-items:center; justify-content:center;
}
.q-card .q-text { font-size:13.5px; color:var(--n-800); line-height:1.45; }
.q-card.q-no { border-color:var(--danger-200); background:var(--danger-50); }
.q-card.q-no .q-num { background:var(--danger-500); }
.q-card .q-comment.is-error-pending {
    border-color:var(--warning-300, #FCD34D);
    background:var(--warning-50);
}

.yn-toggle {
    display:inline-flex; border:1px solid var(--n-300);
    border-radius:var(--r-md); overflow:hidden;
}
.yn-toggle button {
    padding:6px 18px; font-size:12.5px; font-weight:600;
    background:#fff; color:var(--n-500);
    border:none; cursor:pointer;
    transition:all 120ms;
}
.yn-toggle button + button { border-left:1px solid var(--n-300); }
.yn-toggle button.yes.on { background:var(--success-500); color:#fff; }
.yn-toggle button.no.on  { background:var(--danger-500);  color:#fff; }
.yn-toggle button:hover:not(.on) { background:var(--n-50); }

/* ── Chart canvas container — drop IM's flex centering so
       Chart.js can size the canvas inside a fixed-height parent. ── */
.chart-area {
    position:relative !important;
    display:block !important;
    width:100% !important;
    min-height:0 !important;
}
.chart-area canvas { display:block; }

/* ── Listing filter-card / table-card merge — automatic via :has().
       Replicates IM's #filterCard treatment without per-page id. ── */
.card:has(> .card-body > .def-filter-bar) {
    margin-bottom:0 !important;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
    border-bottom:none;
}
.card:has(> .card-body > .def-filter-bar) + .card {
    margin-top:-1px;
    border-top-left-radius:0;
    border-top-right-radius:0;
}

/* ── Icon spacing inside IM .sla-badge / .badge / .status pills.
       IM's pills don't define a gap, so icons and text touch when both
       are present. Add a flex gap and a tiny right margin on legacy
       inline icons so spacing is consistent everywhere. ── */
.sla-badge { gap:6px; }
.sla-badge > i { font-size:11px; flex-shrink:0; }

.badge { gap:5px; }
.badge > i:not(:only-child) { font-size:10px; flex-shrink:0; }

.status { gap:6px; }
.status > i { font-size:11px; flex-shrink:0; }

/* ── Tab badge fallback for compact counters inside tabs ── */
.tabs .tab-item .tab-badge,
.tab-pills > button .tab-badge {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:22px; height:20px; padding:0 6px;
    border-radius:var(--r-full);
    background:var(--n-100); color:var(--n-600);
    font-size:11px; font-weight:600;
    margin-left:4px;
}
.tabs .tab-item.active .tab-badge,
.tab-pills > button.active .tab-badge {
    background:var(--brand-100); color:var(--brand-700);
}

/* ── Sidebar nav-badge color modifiers (IM ships only the default amber-ish). ── */
.nav-badge.nav-badge-amber { background:var(--warning-500) !important; color:#fff !important; }
.nav-badge.nav-badge-red   { background:var(--danger-500)  !important; color:#fff !important; }

/* ── KPI card variant — violet (IM ships blue/green/red/amber, Pending Clarification needs violet). ── */
.kpi-card.violet { border-top-color:var(--violet-500, #8B5CF6); background:linear-gradient(135deg, var(--violet-50, #F5F3FF) 0%, var(--n-0) 100%); }
.kpi-card.violet .kpi-card-icon { background:var(--violet-100, #EDE9FE); color:var(--violet-600, #7C3AED); }
.kpi-card.violet .kpi-card-value { color:var(--violet-700, #6D28D9); }

/* ── Site popup on Geopolitical Risk Map ── */
.site-popup {
    position:absolute;
    z-index:50;
    background:#fff;
    border:1px solid var(--n-200);
    border-radius:12px;
    box-shadow:0 18px 50px -8px rgba(15,23,42,0.28), 0 6px 16px -4px rgba(15,23,42,0.10);
    padding:14px 14px 12px;
    width:280px;
    max-width:80%;
}
.site-popup-close {
    position:absolute; top:8px; right:8px;
    width:24px; height:24px; border-radius:6px; border:0; background:transparent;
    color:var(--n-500); cursor:pointer; font-size:13px;
    display:inline-flex; align-items:center; justify-content:center;
}
.site-popup-close:hover { background:var(--n-100); color:var(--n-700); }
.site-popup-head {
    display:flex; flex-direction:column; gap:6px;
    padding-bottom:10px; border-bottom:1px solid var(--n-100); margin-bottom:10px;
}
.site-popup-title { font-weight:700; color:var(--n-800); font-size:14px; line-height:1.25; padding-right:24px; }
.site-popup-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
.site-popup-stat { background:var(--n-50); border-radius:8px; padding:8px 10px; }
.sp-label { font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--n-500); font-weight:600; }
.sp-val   { font-size:18px; font-weight:700; color:var(--n-800); margin-top:2px; line-height:1; }
.sp-val.danger { color:var(--danger-600); }
.site-popup-meta { font-size:11.5px; color:var(--n-600); margin-bottom:10px; }
.sp-meta-label { color:var(--n-500); margin-right:4px; }
.site-popup-actions { display:flex; gap:8px; }
.site-popup-actions .btn { flex:1; }

/* ── Platform Alerts row actions (Role 5 / Role 6) ── */
.recent-item.alert-row { align-items:center; }
.recent-item .alert-actions { display:flex; gap:6px; flex-shrink:0; margin-left:auto; }
.recent-item .alert-actions .btn { white-space:nowrap; }

/* ── Form-select small variant for inline filters ── */
.form-select.form-select-sm { padding-top:6px; padding-bottom:6px; font-size:13px; }

/* ── Dark mode Yes/No toggle visibility fix ── */
@media (prefers-color-scheme: dark){
    .yn-toggle button { color:var(--n-700); }
    .yn-toggle button.on.yes { background:var(--success-500); color:#fff; }
    .yn-toggle button.on.no  { background:var(--danger-500);  color:#fff; }
}
body.dark .yn-toggle button,
[data-theme="dark"] .yn-toggle button { color:var(--n-700); background:var(--n-50); }
body.dark .yn-toggle button.on.yes,
[data-theme="dark"] .yn-toggle button.on.yes { background:var(--success-500); color:#fff; }
body.dark .yn-toggle button.on.no,
[data-theme="dark"] .yn-toggle button.on.no { background:var(--danger-500); color:#fff; }

/* ── Inverse Q-card (e.g. Q7 visitors): Yes is the negative answer, so flip colors. ── */
.q-card.q-inverse .yn-toggle button.on.yes { background:var(--danger-500) !important; color:#fff !important; border-color:var(--danger-500) !important; }
.q-card.q-inverse .yn-toggle button.on.no  { background:var(--success-500) !important; color:#fff !important; border-color:var(--success-500) !important; }
.q-card.q-inverse .yn-toggle button.yes:hover { color:var(--danger-700); border-color:var(--danger-300); }
.q-card.q-inverse .yn-toggle button.no:hover  { color:var(--success-700); border-color:var(--success-300); }
.q-card.q-inverse.q-no { border-color:var(--danger-200); background:var(--danger-50); }