/* Shared styles for platform features: notifications, billing, pricing, launcher, accessibility. */
.skip-link { position: absolute; left: 1rem; top: .5rem; z-index: 2000; background: #0b3d91; color: #fff; padding: .5rem 1rem; border-radius: .375rem; }
.skip-link:focus { color: #fff; }
:focus-visible { outline: 3px solid #1a73e8; outline-offset: 2px; }

.notification-dot { position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #d93025; color: #fff; font-size: 11px; line-height: 18px; text-align: center; font-weight: 600; }
.notification-item { display: flex; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid var(--bs-border-color); }
.notification-item.unread { background: rgba(26, 115, 232, .06); }
.notification-item .bi { font-size: 1.25rem; color: #1a73e8; }

.status-pill { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; background: #eef1f6; color: #34425a; }
.status-pill.ok { background: #e6f4ea; color: #1e7e34; }
.status-pill.warn { background: #fff4e5; color: #9a5b00; }
.status-pill.bad { background: #fdecea; color: #b42318; }

.metric-tile { border: 1px solid var(--bs-border-color); border-radius: .75rem; padding: 1rem 1.15rem; background: var(--bs-body-bg); height: 100%; }
.metric-tile small { display: block; color: var(--bs-secondary-color); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.metric-tile strong { display: block; font-size: 1.5rem; font-variant-numeric: tabular-nums; margin-top: .25rem; }

.price-toggle .btn { min-width: 110px; }
.plan-compare th, .plan-compare td { vertical-align: middle; text-align: center; }
.plan-compare th:first-child, .plan-compare td:first-child { text-align: left; }
.plan-compare .recommended { background: rgba(26, 115, 232, .06); }

.app-tile { display: flex; flex-direction: column; gap: .5rem; border: 1px solid var(--bs-border-color); border-radius: .85rem; padding: 1.1rem; height: 100%; background: var(--bs-body-bg); }
.app-tile .app-icon { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: #0b3d91; color: #fff; font-weight: 700; }
.app-tile .btn { margin-top: auto; }

.filter-panel .form-check { margin-bottom: .35rem; }
.document-paper { max-width: 900px; margin: 0 auto; background: #fff; color: #17253d; padding: 2.5rem; border: 1px solid #dfe6f2; }
.document-paper table { width: 100%; }
@media print { .portal-sidebar, .portal-topbar, .no-print { display: none !important; } .portal-content { padding: 0 !important; } .document-paper { border: 0; } }

.consent-banner { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 1900; max-width: 760px; margin: 0 auto; background: #101d33; color: #e8eef8; border-radius: .85rem; padding: 1rem 1.25rem; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.consent-banner a { color: #9cc3ff; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Drilldown panel: 85% of the content area to the right of the sidebar (width set by drilldown.js). */
.drill-panel { max-width: 100vw; }
.drill-panel-header { display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem; border-bottom: 1px solid var(--bs-border-color); background: var(--portal-panel, #fff); }
.drill-frame { width: 100%; height: calc(100vh - 54px); border: 0; background: var(--portal-bg, #f4f7fb); }
table.booknip-data-table tbody tr, table[data-drill-rows] tbody tr { cursor: pointer; }
[data-drill] { cursor: pointer; }

/* Pages shown inside the drilldown panel: no top bar, sidebar or cookie banner. */
.portal-embedded .portal-topbar, .portal-embedded .portal-sidebar, .portal-embedded [aria-label="Cookie choice"], .portal-embedded .skip-link { display: none !important; }
.portal-embedded .portal-frame { display: block; min-height: 0; }
.portal-embedded .portal-content { padding: 16px; }

/* Dashboards */
.kpi-tile { display: block; border: 1px solid var(--bs-border-color); border-radius: .85rem; padding: 1rem 1.1rem; background: var(--portal-panel, #fff); color: inherit; text-decoration: none; height: 100%; transition: box-shadow .15s, transform .15s; }
.kpi-tile:hover { box-shadow: 0 6px 18px rgba(20, 50, 100, .12); transform: translateY(-1px); color: inherit; }
.kpi-tile small { display: block; color: var(--bs-secondary-color); font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 700; }
.kpi-tile strong { display: block; font-size: 1.55rem; font-variant-numeric: tabular-nums; margin-top: .2rem; }
.kpi-tile em { font-style: normal; font-size: .8rem; color: var(--bs-secondary-color); }
.kpi-tile.rag-green { border-left: 6px solid #1e7e34; } .kpi-tile.rag-amber { border-left: 6px solid #d18b00; } .kpi-tile.rag-red { border-left: 6px solid #b42318; }
.filter-bar { background: var(--portal-panel, #fff); border: 1px solid var(--bs-border-color); border-radius: .85rem; padding: .85rem; margin-bottom: 1rem; }
.filter-bar .form-label { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--bs-secondary-color); margin-bottom: .2rem; }
.chart-card { background: var(--portal-panel, #fff); border: 1px solid var(--bs-border-color); border-radius: .85rem; padding: 1rem; height: 100%; }
.chart-card canvas { cursor: pointer; }
.rag { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; vertical-align: middle; }
.rag.green { background: #1e7e34; } .rag.amber { background: #d18b00; } .rag.red { background: #b42318; }
.rag-bar { display: flex; height: .6rem; border-radius: 999px; overflow: hidden; background: #e9edf3; }
.rag-bar span { display: block; height: 100%; }
.rag-bar a { display: block; height: 100%; } .chart-card .rag-bar { height: .9rem; }
.rag.grey { background: #8a94a6; } .kpi-tile.rag-grey { border-left: 6px solid #8a94a6; }
.rag.excluded { background: #8a94a6; }

/* Drilldown panel v2: sidebar stays visible; resize handle; breadcrumb. */
.drill-panel { box-shadow: -12px 0 32px rgba(20, 40, 80, .18); transition: transform .3s ease-in-out, width .15s ease; z-index: 1046; }
.drill-shade { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(15, 25, 45, .28); z-index: 1044; opacity: 0; pointer-events: none; transition: opacity .2s; }
body.drill-open .drill-shade { opacity: 1; pointer-events: auto; }
.drill-resize { position: absolute; left: -4px; top: 0; bottom: 0; width: 8px; cursor: ew-resize; z-index: 2; }
.drill-resize:hover, .drill-resize:active { background: linear-gradient(90deg, transparent 3px, var(--portal-primary, #1459c7) 3px, var(--portal-primary, #1459c7) 5px, transparent 5px); }
.drill-titles { min-width: 0; display: flex; flex-direction: column; }
.drill-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; font-size: .72rem; color: var(--bs-secondary-color); line-height: 1.2; }
.drill-crumbs > * + *::before { content: "›"; margin: 0 4px; color: var(--bs-secondary-color); }
.drill-crumb { border: 0; background: none; padding: 0; color: var(--portal-primary, #1459c7); font-size: .72rem; max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drill-crumb:hover { text-decoration: underline; }
.drill-crumb-root { font-weight: 600; }
.drill-frame { height: calc(100vh - 62px); }
@media (min-width: 992px) { body.drill-open .portal-sidebar { position: sticky; z-index: 1047; } }
.metric-cards a, .dashboard-links a { cursor: pointer; }

/* Dashboard switcher: every dashboard one click away, collapsible. */
.dash-switcher { background: var(--portal-panel, #fff); border: 1px solid var(--bs-border-color); border-radius: .85rem; margin-bottom: 1rem; }
.dash-switcher-toggle { display: flex; align-items: center; gap: .5rem; width: 100%; border: 0; background: none; padding: .7rem 1rem; font-weight: 700; color: inherit; text-align: left; }
.dash-switcher-toggle[aria-expanded="false"] .dash-chevron { transform: rotate(-90deg); }
.dash-chevron { transition: transform .15s; }
.dash-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .5rem; padding: 0 .75rem .75rem; }
.dash-tile { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem .7rem; border: 1px solid var(--bs-border-color); border-radius: .7rem; color: inherit; text-decoration: none; }
.dash-tile > i { font-size: 1.15rem; color: var(--portal-primary, #1459c7); margin-top: .1rem; }
.dash-tile small { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--bs-secondary-color); }
.dash-tile strong { display: block; font-size: 1.15rem; line-height: 1.2; }
.dash-tile em { font-style: normal; font-size: .74rem; color: var(--bs-secondary-color); }
.dash-tile:hover { background: var(--portal-hover, #edf4ff); color: inherit; }
.dash-tile.current { border-color: var(--portal-primary, #1459c7); background: var(--portal-hover, #edf4ff); box-shadow: inset 3px 0 0 var(--portal-primary, #1459c7); }

/* Country and solution switchers */
.scope-switchers { gap: .4rem; align-items: center; }
.scope-chip { border: 1px solid var(--portal-border, #dde5ef); border-radius: 999px; color: var(--portal-text); background: var(--portal-panel, #fff); font-weight: 600; max-width: 15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scope-chip.on { border-color: var(--portal-primary); color: var(--portal-primary); background: var(--portal-hover); }
.scope-menu { max-height: 60vh; overflow-y: auto; min-width: 16rem; }
.scope-menu .dropdown-item small { margin-left: .35rem; }

/* Access control */
.access-matrix th, .access-matrix td { white-space: nowrap; }
.access-matrix td:first-child { white-space: normal; min-width: 16rem; }
.access-matrix .matrix-group th { background: var(--portal-hover, #edf4ff); color: var(--portal-primary, #1459c7); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.access-matrix thead th { position: sticky; top: 0; background: var(--portal-panel, #fff); z-index: 1; }
.matrix-wrap { max-height: 70vh; }
.matrix-save { position: sticky; bottom: 0; background: var(--portal-bg, #f4f7fb); padding: .75rem 0; margin-top: .75rem; }
.check-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--bs-border-color); border-radius: .6rem; padding: .5rem .75rem; }
.check-group { margin-bottom: .5rem; }
.check-group .form-check { margin-left: 1.25rem; margin-bottom: 0; }
.guide-box { background: var(--portal-panel, #fff); border: 1px solid var(--bs-border-color); border-left: 4px solid var(--portal-primary, #1459c7); border-radius: .6rem; padding: .6rem .9rem; }
.guide-box summary { cursor: pointer; font-weight: 600; color: var(--portal-primary, #1459c7); }
.guide-box ol, .guide-box ul { margin-top: .5rem; }

/* Favourites and saved filters */
.fav-star { color: #d4a017; font-size: 1.1rem; vertical-align: middle; }
.fav-star:hover { color: #b8860b; }
.saved-filters { font-size: .85rem; }
.saved-filter-chip { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--bs-border-color); border-radius: 999px; padding: 1px 4px 1px 10px; background: var(--portal-panel, #fff); }
.saved-filter-chip.on { border-color: var(--portal-primary); background: var(--portal-hover); }
.saved-filter-chip a { text-decoration: none; color: inherit; font-weight: 600; }
.saved-filter-chip button { border: 0; background: none; color: var(--bs-secondary-color); padding: 0 3px; }
.saved-filter-chip button:hover { color: var(--portal-primary); }
.bn-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #142033; color: #fff; padding: .6rem 1rem; border-radius: .6rem; z-index: 2000; box-shadow: 0 8px 24px rgba(0,0,0,.25); font-size: .9rem; }
.rag-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .3rem; vertical-align: middle; } .rag-dot.rag-green { background: #1e7e34; } .rag-dot.rag-amber { background: #d18b00; } .rag-dot.rag-red { background: #b42318; }
/* In-page user guides */
.page-guide-panel { --bs-offcanvas-width: min(560px, 100vw); }
.page-guide-purpose { font-size: 1.02rem; }
.page-guide-heading { font-size: .95rem; font-weight: 700; margin: 1rem 0 .5rem; }
.page-guide-steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.page-guide-steps li { counter-increment: step; position: relative; padding: .45rem 0 .45rem 2.4rem; border-top: 1px solid var(--bs-border-color); }
.page-guide-steps li::before { content: counter(step); position: absolute; left: 0; top: .4rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--portal-primary, #1459c7); color: #fff; font-weight: 700; font-size: .85rem; display: grid; place-items: center; }
.page-guide-dos, .page-guide-donts { border-radius: .6rem; padding: .25rem 1rem .6rem; margin-top: .75rem; }
.page-guide-dos { background: rgba(30,126,52,.08); border: 1px solid rgba(30,126,52,.35); } .page-guide-dos .page-guide-heading { color: #1e7e34; }
.page-guide-donts { background: rgba(180,35,24,.07); border: 1px solid rgba(180,35,24,.35); } .page-guide-donts .page-guide-heading { color: #b42318; }
.page-guide-dos ul, .page-guide-donts ul { margin: 0; padding-left: 1.1rem; } .page-guide-dos li, .page-guide-donts li { margin: .25rem 0; }
.page-guide-shot { margin: 0 0 .5rem; } .page-guide-shot img { width: 100%; border: 1px solid var(--bs-border-color); border-radius: .5rem; box-shadow: 0 4px 14px rgba(15,23,42,.12); }
.page-guide-shot figcaption { font-size: .75rem; color: var(--bs-secondary-color); margin-top: .3rem; }
.portal-guide-button { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--portal-primary, #1459c7); color: var(--portal-primary, #1459c7); background: transparent; border-radius: 999px; padding: .2rem .7rem; font-size: .85rem; font-weight: 600; }
.portal-guide-button:hover { background: var(--portal-primary, #1459c7); color: #fff; }
.guide-nudge { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1040; max-width: 320px; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-left: 5px solid var(--portal-primary, #1459c7); border-radius: .6rem; box-shadow: 0 8px 24px rgba(15,23,42,.18); padding: .75rem 1rem; font-size: .9rem; }
.guide-card { display: block; height: 100%; padding: .75rem 1rem; border: 1px solid var(--bs-border-color); border-radius: .6rem; text-decoration: none; color: inherit; background: var(--bs-body-bg); }
.guide-card:hover { border-color: var(--portal-primary, #1459c7); box-shadow: 0 4px 12px rgba(15,23,42,.08); }
.guide-card strong { display: block; color: var(--portal-primary, #1459c7); } .guide-card span { font-size: .85rem; color: var(--bs-secondary-color); }
@media print { .portal-topbar, .portal-sidebar, .portal-page-heading .btn, .guide-nudge { display: none !important; } }
/* Liability disclaimer */
.disclaimer-doc { max-height: 52vh; overflow-y: auto; border: 1px solid var(--bs-border-color); border-radius: .6rem; padding: 1rem 1.25rem; background: var(--bs-body-bg); line-height: 1.6; }
.disclaimer-doc-full { max-height: none; }
.disclaimer-doc h2 { font-size: 1.15rem; margin-top: .5rem; } .disclaimer-doc h3 { font-size: 1rem; margin-top: 1rem; }
.disclaimer-doc[dir="rtl"] { font-family: "Cairo", "Noto Naskh Arabic", "Segoe UI", sans-serif; }
.disclaimer-schedule { border-top: 2px solid var(--portal-primary, #1459c7); margin-top: 1.25rem; padding-top: .5rem; }
.disclaimer-missing { background: #fff3cd; color: #7a4f00; padding: 0 .2rem; border-radius: .2rem; }
.disclaimer-steps { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.disclaimer-steps li { color: var(--bs-secondary-color); } .disclaimer-steps li.current { color: var(--portal-primary, #1459c7); font-weight: 600; } .disclaimer-steps li.done { color: #1e7e34; }
@media print { .disclaimer-doc { max-height: none; overflow: visible; border: 0; } }