/* ============================================================================
   PM REPORTING COCKPIT (v18) — SCOPED STYLES
   Every rule is prefixed with `.pm-cockpit` so the cockpit's Wavestone-branded
   look renders faithfully WITHOUT affecting the rest of the Zenith Hub.
   Do not use these selectors unscoped.
   ========================================================================== */

.pm-cockpit{
  /* Wavestone brand palette (May 2024) */
  --vibrant-blue:#451DC7;
  --deep-blue:#250F6B;
  --energy-green:#04F06A;
  --white:#FFFFFF;
  --black:#000000;
  --grey-bg:#F7F7FA;
  --border:#E4E4EC;
  --muted:#5A5A66;

  font-family:"Inter","Segoe UI",Arial,Helvetica,sans-serif;
  color:var(--black);
  background:var(--grey-bg);
  line-height:1.6;
  font-size:15px;
  border:1px solid var(--border);
  border-radius:20px;
  overflow:hidden;
  margin-top:4px;
}
.pm-cockpit *{box-sizing:border-box;}
.pm-cockpit ul{list-style:disc;}
.pm-cockpit ol{list-style:decimal;}
.pm-cockpit a{text-decoration:none;}
.pm-cockpit .wrap{max-width:100%;margin:0 auto;padding:0 36px;}

/* ---------- HERO ---------- */
.pm-cockpit header{background:var(--vibrant-blue);color:var(--white);padding:52px 0 48px;}
.pm-cockpit .brand{font-size:12px;letter-spacing:3px;text-transform:uppercase;font-weight:600;opacity:.85;margin-bottom:22px;}
.pm-cockpit header h1{margin:0;font-size:38px;line-height:1.14;font-weight:700;letter-spacing:-1px;max-width:18ch;color:var(--white);}
.pm-cockpit header p.sub{margin:22px 0 0;font-size:17px;line-height:1.55;max-width:62ch;font-weight:400;opacity:.94;}
.pm-cockpit .meta{margin-top:30px;font-size:13px;letter-spacing:.4px;display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px;border:1px solid rgba(255,255,255,.35);border-radius:100px;}
.pm-cockpit .meta .dot{width:7px;height:7px;border-radius:50%;background:var(--energy-green);flex:none;}

/* ---------- SECTIONS ---------- */
.pm-cockpit section{padding:56px 0;}
.pm-cockpit section.alt{background:var(--grey-bg);}
.pm-cockpit .eyebrow{font-size:12px;letter-spacing:2.4px;text-transform:uppercase;font-weight:700;color:var(--vibrant-blue);margin:0 0 12px;}
.pm-cockpit h2{font-size:30px;margin:0 0 14px;color:var(--deep-blue);font-weight:700;letter-spacing:-.7px;}
.pm-cockpit h3.sub{font-size:15px;color:var(--deep-blue);margin:44px 0 18px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;padding-left:14px;border-left:3px solid var(--vibrant-blue);}
.pm-cockpit .lead{color:var(--muted);margin:0 0 36px;font-size:16px;max-width:72ch;}

/* ---------- CARDS ---------- */
.pm-cockpit .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px;}
.pm-cockpit .tile{border:1px solid var(--border);border-radius:16px;background:var(--white);
  padding:28px 26px 26px;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(37,15,107,.05);
  transition:box-shadow .2s ease,border-color .2s ease;}
.pm-cockpit .tile:hover{box-shadow:0 12px 32px rgba(37,15,107,.11);border-color:#CFCFE0;}
.pm-cockpit .tile .ref{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--vibrant-blue);font-weight:700;margin-bottom:10px;}
.pm-cockpit .tile h3{margin:0 0 16px;font-size:19px;color:var(--deep-blue);font-weight:700;letter-spacing:-.3px;}
.pm-cockpit .tile p{margin:0 0 22px;font-size:15px;color:var(--muted);flex:1;}
.pm-cockpit .tile .tags{margin-bottom:18px;display:flex;flex-wrap:wrap;gap:6px;}
.pm-cockpit .tile .actions{display:flex;gap:10px;flex-wrap:wrap;}

/* ---------- BUTTONS ---------- */
.pm-cockpit a.btn,.pm-cockpit button.btn{display:inline-block;text-decoration:none;
  background:var(--vibrant-blue);color:var(--white) !important;font-size:14px;font-weight:600;
  padding:12px 22px;border-radius:10px;text-align:center;cursor:pointer;border:1.5px solid var(--vibrant-blue);
  font-family:inherit;line-height:1.3;transition:background .15s ease;}
.pm-cockpit a.btn:hover,.pm-cockpit button.btn:hover{background:var(--deep-blue);border-color:var(--deep-blue);}
.pm-cockpit a.btn:visited{color:var(--white) !important;}
.pm-cockpit button.btn.ghost{background:var(--white);color:var(--vibrant-blue) !important;}
.pm-cockpit button.btn.ghost:hover{background:var(--vibrant-blue);color:var(--white) !important;}

/* ---------- TAGS ---------- */
.pm-cockpit .tag{display:inline-block;font-size:11px;font-weight:700;padding:5px 11px;border-radius:100px;
  text-transform:uppercase;letter-spacing:.7px;}
.pm-cockpit .tag-live{background:var(--energy-green);color:var(--deep-blue);}
.pm-cockpit .tag-rt{background:#FFFFFF;color:var(--vibrant-blue);border:1.5px solid var(--vibrant-blue);}
.pm-cockpit .tag-4h{background:#EFECFB;color:var(--deep-blue);}
.pm-cockpit .tag-incident{background:var(--white);color:#B4231A;border:1.5px solid #B4231A;}

/* ---------- TABLES ---------- */
.pm-cockpit .tablewrap{background:var(--white);border:1px solid var(--border);border-radius:16px;overflow:hidden;}
.pm-cockpit table{width:100%;border-collapse:collapse;font-size:14px;table-layout:fixed;}
.pm-cockpit th{background:var(--deep-blue);color:var(--white);text-align:left;padding:14px 16px;font-weight:600;
  font-size:12px;text-transform:uppercase;letter-spacing:1.1px;}
.pm-cockpit td{padding:14px 16px;border-bottom:1px solid var(--border);vertical-align:top;
  word-wrap:break-word;overflow-wrap:break-word;color:var(--black);}
.pm-cockpit tbody tr:last-child td{border-bottom:none;}
.pm-cockpit tbody tr:hover{background:#FAFAFD;}
.pm-cockpit td.center,.pm-cockpit th.center{text-align:center;}
.pm-cockpit td.num{color:var(--muted);font-variant-numeric:tabular-nums;}
.pm-cockpit .cov{font-weight:600;font-size:14px;}
.pm-cockpit .cov-ok{color:var(--deep-blue);}
.pm-cockpit .cov-inc{color:#B4231A;}
.pm-cockpit .cov-scope{color:var(--muted);font-weight:500;}
.pm-cockpit .cov-no{color:#B4231A;font-weight:500;}
.pm-cockpit .dotmark{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:1px;flex:none;}
.pm-cockpit .d-ok{background:var(--energy-green);}
.pm-cockpit .d-inc{background:#B4231A;}
.pm-cockpit .d-scope{background:#B9B9C8;}
.pm-cockpit .d-no{background:var(--black);}
.pm-cockpit .comment{color:var(--muted);font-size:13px;}
.pm-cockpit .badge{display:inline-block;font-size:11px;font-weight:700;padding:5px 12px;border-radius:100px;
  letter-spacing:.6px;text-transform:uppercase;}
.pm-cockpit .b-avail{background:var(--energy-green);color:var(--deep-blue);}
.pm-cockpit .b-p1{background:var(--vibrant-blue);color:var(--white);}
.pm-cockpit .b-p2{background:#EFECFB;color:var(--deep-blue);}
.pm-cockpit .b-p3{background:var(--white);color:var(--muted);border:1.5px solid var(--border);}

/* ---------- ROADMAP ---------- */
.pm-cockpit .road{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;}
.pm-cockpit .road .col{background:var(--white);border:1px solid var(--border);border-radius:16px;padding:28px 26px;}
.pm-cockpit .road .col.p1c{background:var(--vibrant-blue);border-color:var(--vibrant-blue);color:var(--white);}
.pm-cockpit .road .col.p1c h4{color:var(--white);}
.pm-cockpit .road .col.p1c .when{color:rgba(255,255,255,.8);}
.pm-cockpit .road .col.p1c li{color:rgba(255,255,255,.95);}
.pm-cockpit .road .col.p1c li::marker{color:var(--energy-green);}
.pm-cockpit .road .col h4{margin:0 0 6px;font-size:19px;color:var(--deep-blue);font-weight:700;letter-spacing:-.3px;}
.pm-cockpit .road .col .when{font-size:13px;color:var(--muted);margin-bottom:18px;display:block;letter-spacing:.3px;}
.pm-cockpit .road ul{margin:0;padding-left:20px;font-size:15px;}
.pm-cockpit .road li{margin-bottom:11px;}
.pm-cockpit .road li::marker{color:var(--vibrant-blue);}

/* ---------- LEGEND ---------- */
.pm-cockpit .legend{font-size:13.5px;color:var(--muted);margin-top:20px;display:flex;flex-wrap:wrap;gap:26px;}
.pm-cockpit .legend span{display:inline-flex;align-items:center;}

/* ---------- NOTE ---------- */
.pm-cockpit .note{background:var(--white);border:1px solid var(--border);border-left:4px solid var(--energy-green);
  padding:26px 30px;border-radius:16px;margin-top:34px;font-size:15px;}
.pm-cockpit .note h4{margin:0 0 14px;color:var(--deep-blue);font-size:17px;font-weight:700;}
.pm-cockpit .note p{margin:0 0 12px;color:var(--muted);}
.pm-cockpit .note p:last-child{margin-bottom:0;}
.pm-cockpit .note strong{color:var(--black);}

/* ---------- MODAL ---------- */
.pm-cockpit .overlay{display:none;position:fixed;inset:0;background:rgba(37,15,107,.6);z-index:1200;padding:48px 24px;overflow-y:auto;}
.pm-cockpit .overlay.open{display:block;}
.pm-cockpit .modal{background:var(--white);max-width:680px;margin:0 auto;border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.28);overflow:hidden;}
.pm-cockpit .modal .mhead{background:var(--vibrant-blue);color:var(--white);padding:22px 30px;display:flex;justify-content:space-between;align-items:center;gap:16px;}
.pm-cockpit .modal .mhead h3{margin:0;font-size:19px;font-weight:700;letter-spacing:-.3px;color:var(--white);}
.pm-cockpit .modal .mclose{background:none;border:none;color:var(--white);font-size:28px;line-height:1;cursor:pointer;padding:0 4px;}
.pm-cockpit .modal .mbody{padding:28px 30px 32px;font-size:15px;}
.pm-cockpit .modal .mbody ol{margin:0;padding-left:22px;}
.pm-cockpit .modal .mbody li{margin-bottom:14px;}
.pm-cockpit .modal .mbody li::marker{color:var(--vibrant-blue);font-weight:700;}
.pm-cockpit .modal .mbody h4{color:var(--deep-blue);font-size:16px;margin:26px 0 12px;font-weight:700;}
.pm-cockpit .modal code{background:var(--grey-bg);padding:2px 7px;border-radius:5px;font-size:13.5px;}
.pm-cockpit .modal .src{margin-top:26px;padding-top:18px;border-top:1px solid var(--border);font-size:13px;color:var(--muted);}

/* ---------- FOOTER ---------- */
.pm-cockpit footer{background:var(--deep-blue);color:var(--white);padding:40px 0;font-size:14px;}
.pm-cockpit .foot-flex{display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;}
.pm-cockpit footer .fl{opacity:.75;}
.pm-cockpit footer strong{color:var(--white);}

/* ---------- RESPONSIVE ---------- */
@media (max-width:720px){
  .pm-cockpit .wrap{padding:0 20px;}
  .pm-cockpit header{padding:44px 0 40px;}
  .pm-cockpit header h1{font-size:28px;letter-spacing:-.5px;}
  .pm-cockpit header p.sub{font-size:16px;}
  .pm-cockpit section{padding:44px 0;}
  .pm-cockpit h2{font-size:24px;}
  .pm-cockpit table{font-size:13px;}
  .pm-cockpit td,.pm-cockpit th{padding:11px 11px;}
}

/* ============================================================================
   DARK-MODE INTEGRATION — removes the white blocks inside the cockpit
   so it matches the Zenith Hub indigo background. Light theme untouched.
   ========================================================================== */
[data-theme="dark"] .pm-cockpit{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14)}
[data-theme="dark"] .pm-cockpit section{background:transparent}
[data-theme="dark"] .pm-cockpit section.alt{background:rgba(255,255,255,.035)}
[data-theme="dark"] .pm-cockpit h2,
[data-theme="dark"] .pm-cockpit h3.sub,
[data-theme="dark"] .pm-cockpit .tile h3,
[data-theme="dark"] .pm-cockpit .road .col h4,
[data-theme="dark"] .pm-cockpit .note h4{color:#E3E1F5}
[data-theme="dark"] .pm-cockpit .tile,
[data-theme="dark"] .pm-cockpit .tablewrap,
[data-theme="dark"] .pm-cockpit .note,
[data-theme="dark"] .pm-cockpit .road .col{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
[data-theme="dark"] .pm-cockpit .road .col.p1c{background:var(--vibrant-blue);border-color:var(--vibrant-blue)}
[data-theme="dark"] .pm-cockpit td{color:#E3E1F5;border-color:rgba(255,255,255,.12)}
[data-theme="dark"] .pm-cockpit tbody tr:hover{background:rgba(255,255,255,.04)}
[data-theme="dark"] .pm-cockpit .lead,
[data-theme="dark"] .pm-cockpit .comment,
[data-theme="dark"] .pm-cockpit .note p,
[data-theme="dark"] .pm-cockpit td.num,
[data-theme="dark"] .pm-cockpit .legend,
[data-theme="dark"] .pm-cockpit .cov-scope,
[data-theme="dark"] .pm-cockpit .road .col .when{color:#B8B4D9}
[data-theme="dark"] .pm-cockpit .note strong,
[data-theme="dark"] .pm-cockpit .cov-ok{color:#E3E1F5}
[data-theme="dark"] .pm-cockpit .cov-inc,
[data-theme="dark"] .pm-cockpit .cov-no{color:#FF8A80}
[data-theme="dark"] .pm-cockpit .eyebrow{color:#B9A6FF}
[data-theme="dark"] .pm-cockpit button.btn.ghost{background:transparent;color:#B9A6FF !important;border-color:#7C5CFC}
[data-theme="dark"] .pm-cockpit button.btn.ghost:hover{background:#7C5CFC;color:#fff !important}
[data-theme="dark"] .pm-cockpit .tag-rt{background:transparent;color:#B9A6FF;border-color:#7C5CFC}
[data-theme="dark"] .pm-cockpit .tag-4h{background:rgba(124,92,252,.18);color:#E3E1F5}
[data-theme="dark"] .pm-cockpit .tag-incident{background:transparent;color:#FF8A80;border-color:#FF8A80}
[data-theme="dark"] .pm-cockpit .b-p2{background:rgba(124,92,252,.18);color:#E3E1F5}
[data-theme="dark"] .pm-cockpit .b-p3{background:transparent;color:#B8B4D9;border-color:rgba(255,255,255,.2)}
[data-theme="dark"] .pm-cockpit .d-no{background:#B8B4D9}
[data-theme="dark"] .pm-cockpit .modal{background:#17102F}
[data-theme="dark"] .pm-cockpit .modal .mbody{color:#E3E1F5}
[data-theme="dark"] .pm-cockpit .modal .mbody h4{color:#B9A6FF}
[data-theme="dark"] .pm-cockpit .modal .mbody li::marker{color:#B9A6FF}
[data-theme="dark"] .pm-cockpit .modal code{background:rgba(255,255,255,.08);color:#E3E1F5}
[data-theme="dark"] .pm-cockpit .modal .src{color:#B8B4D9;border-color:rgba(255,255,255,.14)}