/* ==========================================================================
   Regional BD Dashboard: local layer on top of the Platinumlist Design System.
   Rules: semantic tokens only (no hex, no primitives, no --brand-*).
   `.od-*` = local entities the DS doesn't have yet (see missing-entities.md).
   ========================================================================== */

/* ---- Shell ------------------------------------------------------------- */
.od-topbar { background: var(--bg-default); border-block-end: 1px solid var(--bg-border); position: sticky; inset-block-start: 0; z-index: 20; }
.od-topbar .pl-header { max-inline-size: 1360px; margin-inline: auto; padding-inline: var(--space-8); padding-block-end: var(--space-3); }
.od-topbar .pl-header-logo img { block-size: 32px; }
.od-tabs.pl-cat-tabs { padding: 0; margin: 0; gap: var(--spacing-8); overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.od-tabs .pl-tag svg { inline-size: 16px; block-size: 16px; }
.od-fresh { color: var(--content-secondary); }
.od-fresh b { color: var(--content-primary); font-weight: var(--font-weight-semibold); }

.od-page { max-inline-size: 1360px; margin-inline: auto; padding: var(--space-8) var(--space-8) var(--space-16); }
.od-stack > * + * { margin-block-start: var(--space-6); }

/* ---- Page heading ------------------------------------------------------ */
.od-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.od-head-title { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.od-head-title svg { inline-size: 28px; block-size: 28px; }
.od-head-sub { color: var(--content-secondary); margin-block-start: var(--space-2); max-inline-size: 860px; }
.od-head-sub b { color: var(--content-primary); font-weight: var(--font-weight-semibold); }
.od-period { display: grid; gap: var(--space-2); justify-items: end; }
.od-period-caption { color: var(--content-secondary); }

/* ---- Grids --------------------------------------------------------------- */
.od-grid { display: grid; gap: var(--space-5); }
.od-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.od-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.od-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.od-g-main { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
@media (max-width: 1100px) { .od-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .od-g3, .od-g2, .od-g-main { grid-template-columns: 1fr; } }

/* ---- Card internals (on top of .pl-card) -------------------------------- */
.od-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-block-end: var(--space-4); flex-wrap: wrap; }
.od-card-head p { color: var(--content-secondary); margin-block-start: var(--space-1); }
.od-chips { display: flex; gap: var(--spacing-6); flex-wrap: wrap; }

/* ---- KPI tile (missing entity) ------------------------------------------ */
.od-kpi-label { color: var(--content-secondary); display: flex; align-items: center; gap: var(--space-2); }
.od-kpi-label svg { inline-size: 16px; block-size: 16px; }
.od-kpi-value { margin-block: var(--space-2) var(--space-3); font-variant-numeric: tabular-nums; }
.od-kpi-value small { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--content-secondary); margin-inline-start: var(--space-1); }
.od-kpi-rows { display: grid; gap: var(--space-1); }
.od-kpi-row { display: flex; justify-content: space-between; gap: var(--space-3); color: var(--content-secondary); }

/* ---- Delta ------------------------------------------------------------- */
.od-delta { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.od-delta svg { inline-size: 12px; block-size: 12px; }
.od-delta--up { color: var(--accent-success); }
.od-delta--down { color: var(--accent-alert); }
.od-delta--flat { color: var(--content-secondary); }

/* ---- Meter (missing entity) -------------------------------------------- */
.od-meter { position: relative; block-size: var(--space-2); border-radius: var(--radius-pill); background: var(--bg-secondary); margin-block: var(--space-3) var(--space-2); }
.od-meter > i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: var(--radius-pill); background: var(--content-primary); }
.od-meter > i.od-meter--success { background: var(--accent-success); }
.od-meter > i.od-meter--caution { background: var(--accent-warning); }
.od-meter > i.od-meter--alert { background: var(--accent-alert); }
.od-meter > s { position: absolute; inset-block: calc(var(--spacing-4) * -1); inline-size: 2px; border-radius: var(--radius-pill); background: var(--content-primary); }

/* ---- Country card -------------------------------------------------------- */
.od-country-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.od-country-name { display: flex; align-items: center; gap: var(--space-2); }
.od-country-name svg { inline-size: 20px; block-size: 20px; }
.od-code { display: inline-flex; align-items: center; justify-content: center; inline-size: 20px; block-size: 20px; border-radius: var(--radius-pill); background: var(--bg-secondary); color: var(--content-secondary); font-size: var(--font-size-xs); line-height: 1; font-weight: var(--font-weight-bold); transform: scale(.75); }
.od-spark { block-size: 48px; margin-block-start: var(--space-3); }

/* ---- Lists (movers / to-do / coming up) --------------------------------- */
.od-list { display: grid; }
.od-list-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-4); padding-block: var(--space-3); border-block-end: 1px solid var(--bg-border); align-items: center; }
.od-list-item:last-child { border-block-end: 0; }
.od-list-title { font-weight: var(--font-weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-list-meta { color: var(--content-secondary); grid-column: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-list-side { text-align: end; grid-row: 1 / span 2; grid-column: 2; display: grid; gap: var(--space-1); justify-items: end; }
.od-list-section { color: var(--content-secondary); padding-block: var(--space-4) var(--space-1); }
.od-list-section:first-child { padding-block-start: 0; }
.od-todo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); padding-block: var(--space-3); border-block-end: 1px solid var(--bg-border); align-items: start; }
.od-todo:last-child { border-block-end: 0; }
.od-todo-icon { inline-size: 32px; block-size: 32px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; background: var(--bg-secondary); color: var(--content-primary); }
.od-todo-icon svg { inline-size: 16px; block-size: 16px; }
.od-todo-icon--alert { background: var(--accent-alert-light); color: var(--accent-alert); }
.od-todo-icon--caution { background: var(--accent-warning-light); color: var(--accent-warning); }
.od-todo-icon--success { background: var(--accent-success-light); color: var(--accent-success); }
.od-todo p { color: var(--content-secondary); margin-block-start: var(--space-1); }
.od-empty { color: var(--content-secondary); padding-block: var(--space-4); }
.od-mini-meter { inline-size: 96px; block-size: var(--space-1); border-radius: var(--radius-pill); background: var(--bg-secondary); position: relative; }
.od-mini-meter > i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: var(--radius-pill); background: var(--content-primary); }
.od-mini-meter > s { position: absolute; inset-block: calc(var(--spacing-2) * -1.5); inline-size: 2px; background: var(--content-secondary); }

/* ---- Chart ------------------------------------------------------------- */
.od-chart { position: relative; block-size: 300px; }
.od-chart--sm { block-size: 200px; }
.od-legend { display: flex; gap: var(--space-4); flex-wrap: wrap; color: var(--content-secondary); margin-block-start: var(--space-3); }
.od-legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
.od-legend i { inline-size: 12px; block-size: 12px; border-radius: var(--radius-xs); display: inline-block; }
.od-legend i.od-l-cur { background: var(--content-primary); }
.od-legend i.od-l-ly { background: var(--content-highlight); }
.od-legend i.od-l-budget { background: transparent; border: 2px dashed var(--accent-warning); }
.od-legend i.od-l-traffic { background: var(--link-base); }

/* ---- Stat pairs (traffic) --------------------------------------------- */
.od-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-block-end: var(--space-4); }
.od-stat-label { color: var(--content-secondary); }
.od-stat-value { margin-block: var(--space-1); font-variant-numeric: tabular-nums; }

/* ---- Disclosure (missing entity) --------------------------------------- */
details.od-details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
details.od-details > summary::-webkit-details-marker { display: none; }
details.od-details > summary .od-chev { transition: transform var(--duration-base) var(--ease-out); color: var(--content-secondary); display: inline-flex; }
details.od-details > summary .od-chev svg { inline-size: 24px; block-size: 24px; }
details.od-details[open] > summary .od-chev { transform: rotate(180deg); }
details.od-details > summary p { color: var(--content-secondary); margin-block-start: var(--space-1); }
.od-details-body { margin-block-start: var(--space-5); }

/* ---- Table (missing entity) --------------------------------------------- */
.od-table-wrap { overflow-x: auto; }
.od-table { inline-size: 100%; border-collapse: collapse; font-size: var(--font-size-sm); line-height: var(--font-line-height-xs); }
.od-table th { text-align: start; font-size: var(--font-size-xs); line-height: var(--font-line-height-2xs); font-weight: var(--font-weight-semibold); color: var(--content-secondary); padding: var(--space-2) var(--space-3); border-block-end: 1px solid var(--bg-border); white-space: nowrap; }
.od-table td { padding: var(--space-3); border-block-end: 1px solid var(--bg-border); vertical-align: top; }
.od-table .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.od-table tr.od-row-muted td { color: var(--content-highlight); }
.od-table tr.od-row-current td { background: var(--bg-hover); }
.od-table tr.od-row-total td { font-weight: var(--font-weight-semibold); border-block-start: 1px solid var(--bg-border-hover); }
.od-table tr.od-row-click { cursor: pointer; }
.od-table tr.od-row-click:hover td { background: var(--bg-hover); }
.od-table .od-sub { display: block; color: var(--content-secondary); font-size: var(--font-size-xs); line-height: var(--font-line-height-2xs); }

/* ---- Notes / alerts ---------------------------------------------------- */
.od-note { background: var(--bg-secondary); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); color: var(--content-secondary); }
.od-note--alert { background: var(--accent-alert-light); color: var(--accent-alert); }
.od-note--success { background: var(--accent-success-light); color: var(--content-primary); }
.od-note b { color: var(--content-primary); }

/* ---- Misc -------------------------------------------------------------- */
.od-muted { color: var(--content-secondary); }
.od-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.od-spacer { flex: 1; }
.od-icon-inline { display: inline-flex; }
.od-icon-inline svg { inline-size: 16px; block-size: 16px; }
.od-loading { display: grid; place-items: center; min-block-size: 60vh; text-align: center; color: var(--content-secondary); }
.od-spinner { inline-size: 32px; block-size: 32px; border-radius: var(--radius-pill); border: 3px solid var(--bg-secondary); border-block-start-color: var(--content-primary); animation: od-spin 0.9s linear infinite; margin: 0 auto var(--space-4); }
@keyframes od-spin { to { transform: rotate(360deg); } }
.od-hidden { display: none !important; }
.od-defs { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-3) var(--space-5); }
.od-defs dt { font-weight: var(--font-weight-semibold); }
.od-defs dd { margin: 0; color: var(--content-secondary); }
.od-defs code, .od-code-inline { font-size: var(--font-size-xs); background: var(--bg-secondary); padding: 1px var(--space-1); border-radius: var(--radius-xs); overflow-wrap: anywhere; }
.od-footer { color: var(--content-secondary); padding-block: var(--space-8); text-align: center; }
.od-footer button { color: var(--link-base); font-weight: var(--font-weight-semibold); }
.od-modal-body { max-block-size: 70vh; overflow-y: auto; }
.pl-modal-overlay.od-hidden { display: none; }
.od-modal-wide { max-inline-size: 880px; inline-size: 100%; }