/* portal.css — Portal-app layout glue on top of the RiverSync DS tokens.
   Only structural/atom styles the DS kit doesn't ship; all color/spacing via var(--*). */

/* ---- status dot --------------------------------------------------------- */
.pv-dot { display:inline-block; border-radius:50%; flex:none; position:relative; }
.pv-dot--pulse::after { content:""; position:absolute; inset:0; border-radius:50%; background:var(--pv-dot);
  animation:pvPulse 1.9s var(--rs-ease-out, ease-out) infinite; }
@keyframes pvPulse { 0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--pv-dot) 55%, transparent); }
  70%{ box-shadow:0 0 0 7px color-mix(in srgb, var(--pv-dot) 0%, transparent); }
  100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--pv-dot) 0%, transparent); } }
@media (prefers-reduced-motion:reduce){ .pv-dot--pulse::after{ animation:none; } }

/* ---- section label ------------------------------------------------------ */
.pv-seclabel { display:flex; align-items:center; gap:10px; margin:24px 0 12px; }
.pv-seclabel > span:first-child { font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--fg3); }
.pv-seclabel__a { margin-left:auto; }

/* ---- family chip (surface) --------------------------------------------- */
.pv-famchip { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; line-height:1;
  padding:3px 8px 3px 6px; border-radius:var(--r-xs); color:var(--fc); background:color-mix(in srgb, var(--fc) 11%, var(--surface));
  border:1px solid color-mix(in srgb, var(--fc) 30%, transparent); white-space:nowrap; }
.pv-famchip .rs-ic, .pv-famchip svg { width:13px; height:13px; }

/* ---- device line button ------------------------------------------------- */
.pv-devline { display:inline-flex; align-items:center; gap:8px; background:none; border:0; cursor:pointer;
  font:inherit; color:var(--fg2); padding:2px 0; }
.pv-devline b { color:var(--fg); }
.pv-devline:hover b { color:var(--accent); }
.pv-devline__m { font-size:12px; color:var(--fg2); }
.pv-devline__s { font-size:12px; color:var(--fg3); }

/* ---- lock note ---------------------------------------------------------- */
.pv-locknote { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--fg3); }
.pv-locknote .rs-ic, .pv-locknote svg { width:12px; height:12px; }

/* ---- role bar (in page head) ------------------------------------------- */
.pv-rolebar { display:inline-flex; align-items:center; gap:8px; }
.pv-rolebar__lbl { font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--fg3); }

/* ---- KPI tiles (realtime status) --------------------------------------- */
.pv-tiles { display:grid; gap:12px; }
.pv-tile { border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); padding:13px 15px; box-shadow:var(--shadow-sm); min-width:0; }
.pv-tile__l { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--fg3); font-weight:600; display:flex; align-items:center; gap:6px; }
.pv-tile__v { font-family:var(--rs-font-mono, monospace); font-variant-numeric:tabular-nums; font-size:25px; font-weight:600; color:var(--fg); line-height:1.05; margin-top:7px; }
.pv-tile__v u { font-size:13px; font-weight:500; color:var(--fg2); text-decoration:none; margin-left:3px; }
.pv-tile__s { font-size:11.5px; color:var(--fg3); margin-top:5px; line-height:1.45; }
.pv-tile--warning { border-color:var(--warning-border); background:var(--warning-soft); }
.pv-tile--warning .pv-tile__v { color:var(--warning); }
.pv-tile--danger { border-color:var(--danger-border); background:var(--danger-soft); }
.pv-tile--danger .pv-tile__v { color:var(--danger); }
.pv-tile__spark { margin-top:8px; height:26px; }

/* ---- dashboard grids ---------------------------------------------------- */
.pv-kpis { display:grid; grid-template-columns:repeat(5, 1fr); gap:16px; }
@media (max-width:1100px){ .pv-kpis{ grid-template-columns:repeat(2,1fr); } }
.pv-2col { display:grid; grid-template-columns:1.35fr 1fr; gap:18px; align-items:start; }
@media (max-width:1080px){ .pv-2col{ grid-template-columns:1fr; } }
.pv-mapfirst { display:grid; grid-template-columns:1.5fr 1fr; gap:18px; align-items:start; }
@media (max-width:1080px){ .pv-mapfirst{ grid-template-columns:1fr; } }
.pv-3col { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:1080px){ .pv-3col{ grid-template-columns:1fr; } }
.pv-rail { display:flex; flex-direction:column; gap:18px; }

/* ---- a generic bordered widget (when not using rs-card head/body) ------- */
.pv-widget { border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-sm); }
.pv-widget__h { display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--border); }
.pv-widget__h h3 { font-size:13.5px; font-weight:600; margin:0; color:var(--fg); }
.pv-widget__h .rs-sub { font-size:11.5px; color:var(--fg3); }
.pv-widget__b { padding:16px; }
.pv-widget__b--flush { padding:0; }

/* ---- list rows (alerts, renewals) -------------------------------------- */
.pv-row { display:flex; align-items:center; gap:12px; padding:11px 16px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .12s; }
.pv-row:last-child { border-bottom:0; }
.pv-row:hover { background:var(--surface-2); }
.pv-row__ic { width:30px; height:30px; border-radius:var(--r-md); display:grid; place-items:center; flex:none; }
.pv-row__m { min-width:0; flex:1; }
.pv-row__t { font-size:13px; font-weight:600; color:var(--fg); }
.pv-row__s { font-size:11.5px; color:var(--fg3); margin-top:1px; }
.pv-row__r { margin-left:auto; text-align:right; flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.pv-row__r .mono { font-size:11.5px; color:var(--fg2); }

/* ---- device detail ------------------------------------------------------ */
.pv-devhead { display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; }
.pv-devhead__id { display:flex; align-items:center; gap:11px; }
.pv-devhead__id h1 { margin:0; font-size:22px; font-weight:600; }
.pv-back { display:inline-flex; align-items:center; gap:5px; background:none; border:0; cursor:pointer; color:var(--fg3); font-size:12px; padding:0; margin-bottom:8px; }
.pv-back:hover { color:var(--accent); }
.pv-detail { display:grid; grid-template-columns:1fr 320px; gap:18px; align-items:start; }
@media (max-width:1080px){ .pv-detail{ grid-template-columns:1fr; } }
.pv-stack { display:flex; flex-direction:column; gap:18px; min-width:0; }

/* schema-resolution strip */
.pv-resolve { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.pv-chip { display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:var(--r-pill); font-size:11.5px; background:var(--surface-2); border:1px solid var(--border); color:var(--fg2); }
.pv-chip b { color:var(--fg); font-weight:600; }
.pv-chip--key { background:var(--accent-soft); border-color:var(--accent-border); color:var(--accent-press); }
.pv-arrow { color:var(--fg3); font-size:12px; }

/* twin reconciliation table */
.pv-twin { width:100%; border-collapse:collapse; font-size:12.5px; }
.pv-twin th { text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--fg3); font-weight:600; padding:0 10px 8px; }
.pv-twin td { padding:8px 10px; border-top:1px solid var(--border); vertical-align:middle; }
.pv-twin td.k { color:var(--fg2); }
.pv-twin td .mono { font-variant-numeric:tabular-nums; }
.pv-twin__ok { color:var(--success); } .pv-twin__drift { color:var(--warning); }

/* modules */
.pv-mods { display:flex; flex-direction:column; gap:8px; }
.pv-mod { display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); }
.pv-mod__id { font-family:var(--rs-font-mono, monospace); font-weight:600; font-size:12px; color:var(--fg); width:30px; }
.pv-mod__role { font-size:11px; color:var(--fg3); flex:1; }
.pv-mod__load { width:96px; }

/* uncataloged degraded state (PTL-7) */
.pv-degrade { border:1px dashed var(--neutral-border); border-radius:var(--r-lg); background:var(--neutral-soft);
  padding:22px; display:flex; gap:14px; align-items:flex-start; }
.pv-degrade__ic { width:40px; height:40px; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--border); display:grid; place-items:center; flex:none; color:var(--neutral); }

/* ---- messages ----------------------------------------------------------- */
.pv-msg { display:grid; grid-template-columns:300px 1fr; gap:0; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-sm); overflow:hidden; height:calc(100vh - 168px); min-height:520px; }
@media (max-width:900px){ .pv-msg{ grid-template-columns:1fr; } }
.pv-msg__list { border-right:1px solid var(--border); overflow-y:auto; }
.pv-msg__thread { display:flex; flex-direction:column; min-width:0; }
.pv-msg__item { display:flex; flex-direction:column; gap:3px; padding:13px 15px; border-bottom:1px solid var(--border); cursor:pointer; }
.pv-msg__item:hover { background:var(--surface-2); }
.pv-msg__item.is-active { background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent); }
.pv-msg__item h4 { margin:0; font-size:13px; font-weight:600; color:var(--fg); display:flex; align-items:center; gap:7px; }
.pv-msg__item p { margin:0; font-size:11.5px; color:var(--fg3); }
.pv-msg__head { display:flex; align-items:center; gap:11px; padding:14px 18px; border-bottom:1px solid var(--border); flex:none; }
.pv-msg__scroll { flex:1; overflow-y:auto; padding:8px 18px; }
.pv-msg__composer { border-top:1px solid var(--border); padding:12px 16px; flex:none; }

/* misc */
.pv-inline { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pv-muted { color:var(--fg3); }
.pv-divider { height:1px; background:var(--border); margin:2px 0; }
.pv-filters { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }

/* fleet map — fit the branded VectorMap inside its card box (it otherwise sizes
   to the bounds' aspect ratio and overflows). meet-fit keeps every pin visible. */
.pv-mapbox { position:relative; width:100%; overflow:hidden; border-radius:var(--r-md); }
.pv-mapbox .rs-map { height:100%; width:100%; }
.pv-mapbox .rs-map__canvas { height:100%; width:100%; }