/* MedioScan 1.0 — WordPress plugin styles (scoped under .medioscan)
   Media Cyan #03EEFF · Signal Royal #2D6EF0 · Deep Navy #0A1B36 · Warm Ink #142630 · Pulse Amber #F5A623 · Mist #EAF3FA
   Adapted from the MedioScan reference dashboard. Unlike the standalone page,
   the sidebar lives inside the page flow (flex column) so it works inside any
   WordPress theme without overlapping theme headers. */
@font-face{font-family:'Archivo';src:url('../vendor/archivo-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Archivo';src:url('../vendor/archivo-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Archivo';src:url('../vendor/archivo-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Archivo';src:url('../vendor/archivo-800.woff2') format('woff2');font-weight:800;font-display:swap}

.medioscan{
  --ms-cyan:#03EEFF; --ms-royal:#2D6EF0; --ms-navy:#0A1B36; --ms-ink:#142630; --ms-amber:#F5A623; --ms-mist:#EAF3FA;
  --ms-paper:#F7FBFE; --ms-line:#D8E4F0; --ms-text:#142630; --ms-text2:#4A6070;
  --ms-grad:linear-gradient(120deg,#03EEFF 0%,#2D6EF0 100%);
  --ms-radius:12px;
  font:16px/1.55 'Archivo',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:var(--ms-text);background:var(--ms-paper);
  -webkit-font-smoothing:antialiased;
}
.medioscan *{box-sizing:border-box;margin:0;padding:0}
.medioscan :focus-visible{outline:2px solid var(--ms-royal);outline-offset:2px}
.medioscan button,.medioscan select,.medioscan input,.medioscan label.ms-sel{cursor:pointer;font-family:inherit}
.ms-skip{position:absolute;left:-999px;top:0;background:var(--ms-navy);color:#fff;padding:8px 16px;z-index:50}
.ms-skip:focus{left:8px;top:8px}

/* ---------- layout ---------- */
.ms-shell{display:flex;align-items:flex-start}
.ms-side{position:sticky;top:0;width:248px;flex:none;background:var(--ms-navy);color:#CFE3F5;display:flex;flex-direction:column;z-index:20;border-radius:var(--ms-radius) 0 0 var(--ms-radius);min-height:600px}
.ms-brand{display:block;padding:22px 20px 14px;border-bottom:1px solid rgba(207,227,245,.12);text-decoration:none}
.ms-brand:hover .ms-brand-mark{filter:brightness(1.15)}
.ms-back{display:inline-flex;align-items:center;gap:6px;margin:12px 20px 2px;padding:4px 12px 4px 8px;font-size:12px;font-weight:600;letter-spacing:.02em;color:#7FA3C4;text-decoration:none;border:1px solid rgba(207,227,245,.22);border-radius:999px}
.ms-back:hover{color:#fff;border-color:rgba(207,227,245,.5)}
.ms-brand-mark{font-weight:800;font-size:20px;letter-spacing:.06em;background:var(--ms-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ms-brand-mark.ms-sm{font-size:15px}
.ms-brand-mark span{color:transparent}
.ms-brand-sub{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#7FA3C4;margin-top:4px}
#ms-nav{flex:1;overflow-y:auto;padding:12px 0}
#ms-nav button{display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:none;border:0;color:#CFE3F5;padding:10px 20px;font-size:13.5px;font-weight:600;letter-spacing:.02em;border-left:3px solid transparent;transition:background .15s,color .15s,border-color .15s}
#ms-nav button:hover{background:rgba(3,238,255,.07);color:#fff}
#ms-nav button.on{background:rgba(45,110,240,.22);color:#fff;border-left-color:var(--ms-cyan)}
#ms-nav button .n{font-size:10px;color:#7FA3C4;width:18px;flex:none}
#ms-nav button.on .n{color:var(--ms-cyan)}
.ms-side-foot{padding:16px 20px;font-size:11px;line-height:1.7;color:#7FA3C4;border-top:1px solid rgba(207,227,245,.12)}

.ms-page{flex:1;min-width:0;min-height:600px;display:flex;flex-direction:column}
.ms-topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:16px;padding:14px 28px;background:rgba(247,251,254,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--ms-line)}
.ms-topbar-title h1{font-size:20px;font-weight:800;letter-spacing:-.01em}
.ms-topbar-title p{font-size:12.5px;color:var(--ms-text2)}
.ms-topbar-actions{margin-left:auto;display:flex;align-items:center;gap:12px}
.ms-ds-badge{font-size:11.5px;color:var(--ms-text2);background:#fff;border:1px solid var(--ms-line);border-radius:99px;padding:6px 12px;white-space:nowrap}
.ms-ds-badge.custom{background:#FFF4E0;border-color:#F0D29A;color:#8A5E10}
.ms-menu-btn{display:none;background:var(--ms-navy);color:#fff;border:0;border-radius:8px;padding:8px 12px;font-size:16px}
.ms-pdf-status{font-size:12px;color:var(--ms-text2);max-width:230px;line-height:1.35}
.ms-pdf-status.err{color:#C22E2E;font-weight:600}

.ms-content{flex:1;padding:24px 28px 40px;width:100%}
.ms-sec{display:none;animation:ms-fade .25s ease-out}
.ms-sec.on{display:block}
@keyframes ms-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.medioscan *{animation:none!important;transition:none!important}}

/* ---------- components ---------- */
.ms-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:18px}
.ms-kpi{background:var(--ms-navy);color:#fff;border-radius:var(--ms-radius);padding:16px 18px;position:relative;overflow:hidden}
.ms-kpi::after{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ms-grad)}
.ms-kpi.amber::after{background:var(--ms-amber)}
.ms-kpi .v{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.ms-kpi .l{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8FB4D6;margin-top:6px}
.ms-kpi .d{font-size:11.5px;color:#B9D2E8;margin-top:2px}
.ms-kpi .d.up{color:var(--ms-cyan)} .ms-kpi .d.down{color:var(--ms-amber)}

.ms-grid{display:grid;gap:16px;margin-bottom:16px}
.ms-grid > *, .ms-kpis > *{min-width:0}
.ms-g-2{grid-template-columns:1fr 1fr}
.ms-g-3{grid-template-columns:1fr 1fr 1fr}
.ms-card{background:#fff;border:1px solid var(--ms-line);border-radius:var(--ms-radius);padding:18px 20px;box-shadow:0 1px 2px rgba(10,27,54,.04)}
.ms-card h3{font-size:15px;font-weight:700;margin-bottom:12px}
.ms-card h3 .ms-hint{display:block;font-size:11.5px;font-weight:400;color:var(--ms-text2);margin-top:2px}
.ms-chart{width:100%;height:300px}
.ms-chart.ms-tall{height:420px}

.ms-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:16px}
.ms-seg{display:inline-flex;background:#fff;border:1px solid var(--ms-line);border-radius:9px;overflow:hidden}
.ms-seg button{border:0;background:none;padding:8px 16px;font-size:13px;font-weight:600;color:var(--ms-text2);transition:background .15s,color .15s}
.ms-seg button.on{background:var(--ms-navy);color:#fff}
.ms-sel{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ms-text2)}
.ms-sel select{padding:7px 10px;border:1px solid var(--ms-line);border-radius:8px;background:#fff;font-size:13px;font-weight:600;color:var(--ms-text);max-width:200px}
.ms-sel input[type=range]{accent-color:var(--ms-royal);width:130px}
.ms-sel b{color:var(--ms-royal);min-width:38px}
.ms-note{font-size:12.5px;color:var(--ms-text2);max-width:70ch}

.ms-tbl-wrap{overflow-x:auto;max-height:430px;overflow-y:auto;border:1px solid var(--ms-line);border-radius:9px}
.ms-tbl{width:100%;border-collapse:collapse;font-size:12.8px}
.ms-tbl th{position:sticky;top:0;background:var(--ms-mist);text-align:left;padding:8px 10px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#33506B;border-bottom:1px solid var(--ms-line);white-space:nowrap}
.ms-tbl td{padding:7px 10px;border-bottom:1px solid #EDF3F9;white-space:nowrap}
.ms-tbl tr:hover td{background:#F4F9FE}
.ms-tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.ms-tbl th.num{text-align:right}
.ms-pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.ms-pill.lead{background:#E3EEFF;color:#1D4FD1}
.ms-pill.fast{background:#D9FBFF;color:#047A8C}
.ms-pill.stag{background:#FFF1DC;color:#9A6208}
.ms-up{color:#0B8A4B;font-weight:700}.ms-down{color:#C22E2E;font-weight:700}

.ms-btn{display:inline-flex;align-items:center;gap:8px;border-radius:9px;padding:10px 18px;font-size:13.5px;font-weight:700;text-decoration:none;border:0;transition:transform .12s,box-shadow .12s}
.ms-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(10,27,54,.18)}
.ms-btn-amber{background:var(--ms-amber);color:var(--ms-ink)}
.ms-btn-royal{background:var(--ms-grad);color:#fff}
.ms-btn-ghost{background:#fff;border:1px solid var(--ms-line);color:var(--ms-text);margin-top:10px}

.ms-quads{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ms-quad{border-radius:10px;padding:14px;font-size:12.5px}
.ms-quad h4{font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
.ms-quad.star{background:#E9F0FF;border:1px solid #C9DBFF}.ms-quad.star h4{color:#1D4FD1}
.ms-quad.opp{background:#DFFBFF;border:1px solid #B3F0F7}.ms-quad.opp h4{color:#047A8C}
.ms-quad.def{background:#FFF1DC;border:1px solid #F0D29A}.ms-quad.def h4{color:#9A6208}
.ms-quad.dev{background:#F0F3F7;border:1px solid var(--ms-line)}.ms-quad.dev h4{color:#4A6070}
.ms-quad .states{font-weight:600}

.ms-jpj-intro p{font-size:13.5px;color:var(--ms-text2);max-width:95ch}
.ms-jpj-controls{background:#fff;border:1px solid var(--ms-line);border-radius:var(--ms-radius);padding:14px 18px}
.ms-studio p{font-size:13.5px;color:var(--ms-text2);margin-bottom:14px;max-width:60ch}
.ms-drop{display:flex;flex-direction:column;align-items:center;gap:8px;border:2px dashed var(--ms-line);border-radius:var(--ms-radius);padding:26px;font-size:13.5px;font-weight:600;color:var(--ms-text2);transition:border-color .15s,background .15s;cursor:pointer}
.ms-drop:hover,.ms-drop.drag{border-color:var(--ms-royal);background:#F2F7FF}
.ms-drop-ico{font-size:26px;color:var(--ms-royal)}

.ms-foot{border-top:1px solid var(--ms-line);padding:16px 28px;display:flex;gap:14px;align-items:center}
.ms-foot p{font-size:11px;color:var(--ms-text2)}

/* hidden offscreen stage used only while rendering deck charts for the PDF.
 * It must NOT sit far off to the left: on mobile (notably iOS Safari) content
 * parked thousands of pixels left expands the page's scrollable area, so the
 * dashboard renders shifted and the page scrolls sideways. position:fixed at
 * left:0 with visibility:hidden keeps an 820px measurable box for ECharts (it
 * can still paint the canvas for getDataURL) without adding any page overflow. */
#ms-deck-charts{position:fixed;left:0;top:0;width:820px;visibility:hidden;pointer-events:none}
#ms-deck-charts .ms-chart{height:340px}

/* ---------- mobile ---------- */
@media (max-width:1080px){.ms-g-3{grid-template-columns:1fr 1fr}}
@media (max-width:900px){
  .ms-shell{flex-direction:column}
  /* Side drawer, not a top strip: the sidebar slides in from the left. */
  .ms-side{position:fixed;top:0;left:0;bottom:0;width:min(300px,80vw);min-height:0;border-radius:0;z-index:1000;transform:translateX(-102%);transition:transform .28s ease;box-shadow:0 0 40px rgba(4,20,35,.45)}
  .ms-side.open{transform:translateX(0)}
  #ms-nav{display:none}
  .ms-side.open #ms-nav{display:block}
  .ms-side-foot{display:block}
  .ms-menu-btn{display:block}
  .ms-g-2,.ms-g-3{grid-template-columns:1fr}
  .ms-topbar{flex-wrap:wrap}
  .ms-ds-badge{display:none}
  .ms-content{padding:16px 16px 32px}
}
/* Backdrop behind the open drawer (mobile only). */
.ms-backdrop{position:fixed;inset:0;background:rgba(4,20,35,.5);z-index:990;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s}
.ms-backdrop.show{opacity:1;visibility:visible}
@media (min-width:901px){.ms-backdrop{display:none}}
body.ms-nav-open{overflow:hidden}
#ms-tbl-cmpContent th,#ms-tbl-cmpContent td{padding:6px 8px;font-size:11.5px}