/* ===========================================================
   Customer self-service portal — live dashboard embed
   Scoped under .cp-dash. Muted navy SaaS palette, sits inside
   the .rent-browser frame on the Rent page (Section 5).
   =========================================================== */
.cp-dash{
  --cp-ink:#232B36; --cp-slate:#4D5965; --cp-muted:#8A929E;
  --cp-bg:#FAFBFC; --cp-white:#FFFFFF; --cp-subtle:#EFF1F4;
  --cp-border:rgba(70,85,101,0.13); --cp-border2:rgba(70,85,101,0.20);
  --cp-accent:#3F4E6B; --cp-accent-tint:rgba(63,78,107,0.09);
  --cp-c1:#E8521A; --cp-c1-bg:rgba(232,82,26,0.12);
  --cp-c2:#F59E0B; --cp-c2-bg:rgba(245,158,11,0.14);
  --cp-c3:#E5E7EB; --cp-c3-bg:rgba(148,163,184,0.14);
  --cp-pin:#E8521A;
  --cp-ok:#4F7A5E; --cp-ok-bg:#EAF1EC; --cp-warn:#9A6B33; --cp-warn-bg:#F4EDE1;
  --cp-sans:'Hanken Grotesk',system-ui,sans-serif;
  --cp-disp:'Satoshi','Hanken Grotesk',sans-serif;
  background:var(--cp-white); color:var(--cp-ink); font-family:var(--cp-sans);
  text-align:left;
}
.cp-dash *{ box-sizing:border-box; }

/* top nav */
.cp-nav{ display:flex; align-items:center; gap:22px; padding:13px 24px; border-bottom:1px solid var(--cp-border); }
.cp-brand{ display:flex; align-items:center; gap:12px; }
.cp-mark{ width:38px; height:38px; border-radius:10px; background:linear-gradient(160deg,#46577A,#34425C); display:grid; place-items:center; flex-shrink:0; box-shadow:0 4px 10px -4px rgba(52,66,92,0.55); }
.cp-mark svg{ width:20px; height:20px; color:#fff; }
.cp-wm{ display:flex; flex-direction:column; line-height:1; }
.cp-wm b{ font-family:var(--cp-disp); font-weight:900; font-size:18px; letter-spacing:-0.02em; color:var(--cp-accent); }
.cp-wm span{ font-size:10px; font-weight:600; color:var(--cp-muted); letter-spacing:0.04em; margin-top:3px; }
.cp-bdiv{ width:1px; height:28px; background:var(--cp-border2); margin:0 3px; }
.cp-co{ font-size:13px; font-weight:700; letter-spacing:0.05em; color:var(--cp-ink); }
.cp-navr{ margin-left:auto; display:flex; align-items:center; gap:24px; }
.cp-link{ font-size:13px; font-weight:600; color:var(--cp-slate); text-decoration:none; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.cp-link.on{ color:var(--cp-ink); }
.cp-link svg{ width:15px; height:15px; color:var(--cp-muted); }
.cp-new{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; font-weight:600; font-size:13px; color:#fff; background:var(--cp-accent); padding:10px 17px; border-radius:9px; border:none; box-shadow:0 6px 16px -8px rgba(63,78,107,0.7); }
.cp-new svg{ width:14px; height:14px; }
.cp-user{ display:flex; align-items:center; gap:9px; }
.cp-av{ width:34px; height:34px; border-radius:50%; background:var(--cp-accent-tint); color:var(--cp-accent); display:grid; place-items:center; font-family:var(--cp-disp); font-weight:700; font-size:12px; }
.cp-nm{ font-size:13px; font-weight:600; color:var(--cp-ink); }
.cp-cv{ width:15px; height:15px; color:var(--cp-muted); }

/* body */
.cp-body{ padding:18px 24px 22px; background:var(--cp-bg); }
.cp-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.cp-htitle{ font-size:11px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--cp-muted); }
.cp-hsub{ font-size:12px; color:var(--cp-muted); font-weight:500; }

.cp-grid{ display:grid; grid-template-columns:1.42fr 1fr; gap:12px; height:362px; }
.cp-left{ display:flex; flex-direction:column; gap:12px; height:100%; }
.cp-left > .cp-summary{ flex:1.32; }
.cp-left > .cp-types{ flex:1; }
.cp-card{ background:var(--cp-white); border:1px solid var(--cp-border); border-radius:14px; padding:16px 18px; display:flex; flex-direction:column; }
.cp-cardh{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.cp-cardt{ font-size:10px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--cp-muted); }
.cp-cardtag{ font-size:11px; font-weight:600; color:var(--cp-slate); }

/* donut */
.cp-summary{ }
.cp-donutw{ display:flex; flex-wrap:nowrap; align-items:center; gap:16px; flex:1; }
.cp-donut{ position:relative; width:122px; height:122px; flex-shrink:0; }
.cp-donut svg{ width:100%; height:100%; transform:rotate(-90deg); }
.cp-ctr{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.cp-tot{ font-family:var(--cp-disp); font-weight:900; font-size:29px; letter-spacing:-0.03em; color:var(--cp-ink); line-height:1; }
.cp-totl{ font-size:9px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--cp-muted); margin-top:3px; }
.cp-legend{ display:flex; flex-direction:column; gap:10px; }
.cp-lg{ display:flex; align-items:center; gap:9px; }
.cp-lg i{ width:9px; height:9px; border-radius:3px; flex-shrink:0; }
.cp-lg .n{ font-size:12px; font-weight:500; color:var(--cp-slate); min-width:42px; }
.cp-lg .v{ font-family:var(--cp-disp); font-weight:900; font-size:15px; color:var(--cp-ink); letter-spacing:-0.02em; }
.cp-cardf{ margin-top:auto; padding-top:13px; }
.cp-dlink{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--cp-accent); text-decoration:none; }
.cp-dlink svg{ width:13px; height:13px; }

/* type summary */
.cp-types{ }
.cp-trow{ display:flex; gap:10px; flex:1; }
.cp-tcard{ flex:1; display:flex; flex-direction:column; gap:11px; align-items:flex-start; border:1px solid var(--cp-border); border-radius:11px; padding:14px 14px; }
.cp-tic{ width:36px; height:36px; border-radius:10px; flex-shrink:0; display:grid; place-items:center; }
.cp-tic svg{ width:18px; height:18px; }
.cp-ic1{ background:var(--cp-c1-bg); color:var(--cp-c1); }
.cp-ic2{ background:var(--cp-c2-bg); color:var(--cp-c2); }
.cp-ic3{ background:var(--cp-c3-bg); color:var(--cp-c3); }
.cp-tm{ display:flex; flex-direction:column; }
.cp-tl{ font-size:11px; font-weight:600; color:var(--cp-muted); }
.cp-tn{ font-family:var(--cp-disp); font-weight:900; font-size:22px; letter-spacing:-0.03em; color:var(--cp-ink); line-height:1.15; }

/* fleet map — tall, right column */
.cp-map{ padding:0; overflow:hidden; position:relative; }
.cp-maph{ position:absolute; top:0; left:0; right:0; z-index:3; display:flex; align-items:center; justify-content:space-between; padding:18px 20px; }
.cp-maph .cp-cardt{ color:var(--cp-slate); }
.cp-toggle{ display:flex; background:rgba(255,255,255,0.94); border:1px solid var(--cp-border); border-radius:8px; overflow:hidden; box-shadow:0 4px 12px -6px rgba(0,0,0,0.2); }
.cp-toggle span{ font-size:12px; font-weight:600; padding:6px 14px; color:var(--cp-muted); }
.cp-toggle span.on{ background:var(--cp-accent); color:#fff; }
.cp-mapc{
  position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(239,241,244,0.85), rgba(239,241,244,0.85)),
    radial-gradient(rgba(70,85,101,0.05) 1px, transparent 1px);
  background-size:auto, 22px 22px;
  display:grid; place-items:center;
}
.cp-mapc img{ height:300px; width:auto; opacity:0.95; }
.cp-pin{ position:absolute; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; width:27px; height:27px; border-radius:50% 50% 50% 3px; background:var(--cp-pin); color:#fff; font-family:var(--cp-disp); font-weight:700; font-size:11px; box-shadow:0 6px 14px -4px rgba(40,50,66,0.5); border:2px solid #fff; }
.cp-pin.sm{ width:22px; height:22px; font-size:10px; }

/* active rentals table */
.cp-tbl{ grid-column:1 / span 2; grid-row:2; background:var(--cp-white); border:1px solid var(--cp-border); border-radius:14px; overflow:hidden; }
.cp-tbltop{ display:flex; align-items:center; justify-content:space-between; padding:13px 20px 11px; }
.cp-tblt{ font-family:var(--cp-disp); font-weight:900; font-size:15px; letter-spacing:-0.02em; color:var(--cp-ink); }
.cp-tbll{ font-size:12px; font-weight:600; color:var(--cp-accent); text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.cp-tbll svg{ width:12px; height:12px; }
.cp-row{ display:grid; grid-template-columns:1.1fr 1.4fr 1.2fr 0.9fr 0.9fr; gap:14px; align-items:center; padding:11px 20px; border-top:1px solid var(--cp-border); font-size:13px; }
.cp-row.hd{ background:var(--cp-bg); font-size:9.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--cp-muted); }
.cp-row .reg{ font-weight:700; color:var(--cp-ink); }
.cp-row .typ{ color:var(--cp-ink); font-weight:500; }
.cp-row .typ span{ display:block; font-size:10.5px; color:var(--cp-muted); font-weight:400; margin-top:2px; }
.cp-row .dep{ color:var(--cp-slate); }
.cp-row .due{ color:var(--cp-slate); font-weight:500; }
.cp-badge{ font-size:10px; font-weight:700; letter-spacing:0.04em; padding:4px 11px; border-radius:20px; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; }
.cp-badge::before{ content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
.cp-b-ok{ background:var(--cp-ok-bg); color:var(--cp-ok); }
.cp-b-warn{ background:var(--cp-warn-bg); color:var(--cp-warn); }

@media (max-width: 920px){
  .cp-grid{ grid-template-columns:1fr; height:auto; }
  .cp-left > .cp-summary, .cp-left > .cp-types{ flex:none; }
  .cp-map{ height:340px; }
  .cp-trow{ flex-wrap:wrap; }
  .cp-navr .cp-link, .cp-user .cp-nm, .cp-user .cp-cv, .cp-co, .cp-bdiv{ display:none; }
}

/* ===========================================================
   PREMIUM MATCH — bring the Customer Portal in line with the
   Acquire "PO management" showcase (same warmth, depth, glow,
   light browser chrome, orange accent + drawn UK fleet map).
   Scoped to .cp-showcase so other .px-showcase bands are intact.
   =========================================================== */

/* 1 — Warm near-black stage + soft orange glow centred behind
   the browser window (the single most important depth cue). */
.cp-showcase{ background:#0F0D0A; }
.cp-showcase::before{
  top:24%; left:50%; right:auto;
  width:1180px; height:1180px;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(232,82,26,0.10) 0%, rgba(232,82,26,0.05) 32%, rgba(232,82,26,0) 62%);
}
.cp-showcase .px-showcase-gridbg{
  -webkit-mask-image:radial-gradient(ellipse 78% 64% at 50% 36%, #000, transparent 80%);
  mask-image:radial-gradient(ellipse 78% 64% at 50% 36%, #000, transparent 80%);
}

/* 2 — Light browser chrome (matches the PO console frame). The
   window floats: hairline border + layered warm shadow. */
.cp-showcase .rent-browser{
  border:1px solid rgba(0,0,0,0.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 60px 120px -42px rgba(0,0,0,0.72),
    0 34px 70px -46px rgba(232,82,26,0.30);
}
.cp-showcase .rent-browser-bar{
  background:#EBEBEB;
  border-bottom:1px solid rgba(0,0,0,0.08);
  padding:11px 16px;
}
.cp-showcase .rent-browser-bar .px-dot{ width:11px; height:11px; }
.cp-showcase .rent-browser-url{
  margin-left:14px; max-width:340px;
  background:#FCFCFC; border:1px solid rgba(0,0,0,0.09);
  color:#3A3A3A; font-weight:500;
}
.cp-showcase .rent-browser-url svg{ color:#9AA0A6; }

/* 3 — New Enquiry: solid orange pill, white text. */
.cp-dash .cp-new{
  background:#E8521A; border-radius:999px;
  padding:10px 18px;
  box-shadow:0 6px 16px -8px rgba(232,82,26,0.75);
}

/* 4 — Rental Type icons: muted orange OUTLINE only, no fill. */
.cp-dash .cp-tic,
.cp-dash .cp-ic1, .cp-dash .cp-ic2, .cp-dash .cp-ic3{
  background:transparent;
  border:1.4px solid rgba(232,82,26,0.40);
  color:#E8521A;
}

/* "View Rental Details" link → brand orange to match reference. */
.cp-dash .cp-dlink{ color:#E8521A; }

/* 5 — Floating tooltips: exact brand-orange uppercase tags. */
.cp-showcase .pxc .c-tag{ color:#E8521A; }

/* 6 — Drawn UK fleet map: grey landmass on a blue-tinted sea,
   orange cluster pins with white numbers. */
.cp-map .cp-maph{ padding:16px 18px; }
.cp-showcase .cp-toggle{
  background:rgba(255,255,255,0.96);
  border:1px solid rgba(0,0,0,0.10);
}
.cp-showcase .cp-toggle span.on{ background:#2A2D34; color:#fff; }
.cp-mapc{
  background:
    linear-gradient(0deg, rgba(232,239,245,0.55), rgba(232,239,245,0.55)),
    radial-gradient(rgba(90,120,150,0.10) 1px, transparent 1px) !important;
  background-color:#E8EFF5 !important;
  background-size:auto, 20px 20px !important;
}
.cp-ukmap{ width:100%; height:100%; display:block; padding:14px; }
.cp-uk-land{
  fill:#F0F0F0;
  stroke:#D5DAE0; stroke-width:1.2; stroke-linejoin:round;
}
.cp-uk-ire{ fill:#E9ECEF; stroke:#DCE0E5; stroke-width:1; }
.cp-mappin circle{ fill:#E8521A; stroke:#fff; stroke-width:2.2; }
.cp-mappin text{
  fill:#fff; text-anchor:middle;
  font-family:'Satoshi','Hanken Grotesk',sans-serif; font-weight:900;
  font-size:13px; letter-spacing:-0.02em;
}

/* ===========================================================
   REDESIGNED CUSTOMER PORTAL — multi-panel dashboard card
   Scoped under .np-card. Sits on the dark .cp-showcase band.
   =========================================================== */
.np-card{
  max-width:1100px; margin:0 auto;
  background:#fff; border:1px solid #E8E8E8; border-radius:12px;
  box-shadow:0 2px 16px rgba(0,0,0,0.06);
  overflow:hidden;
  font-family:'Hanken Grotesk',system-ui,sans-serif; color:#1A1A1A; text-align:left;
}
.np-card *{ box-sizing:border-box; }

/* top nav */
.np-nav{ display:flex; align-items:center; justify-content:space-between; padding:12px 18px; border-bottom:1px solid #EEE; }
.np-brand{ display:flex; align-items:center; gap:10px; }
.np-logo{ height:26px; width:auto; border-radius:0; background:none; flex-shrink:0; display:flex; align-items:center; }
.np-logo img{ height:26px; width:auto; display:block; }
.np-co{ font-weight:800; font-size:15px; color:#1A1A1A; }
.np-co-sub{ font-size:11px; font-weight:600; letter-spacing:0.04em; color:#9a9a9a; }
.np-nav-r{ display:flex; align-items:center; gap:18px; }
.np-link{ font-size:12.5px; font-weight:600; color:#666; text-decoration:none; white-space:nowrap; }
.np-link.active{ color:#1A1A1A; }
.np-new{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:#fff; background:#E8450A; border:none; border-radius:8px; padding:8px 14px; cursor:pointer; }
.np-new svg{ width:13px; height:13px; }
.np-status{ font-size:11px; color:#9a9a9a; text-align:right; padding:7px 18px 0; }

/* stat cards */
.np-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:10px 18px 10px; }
.np-stat{ display:flex; align-items:center; gap:10px; border:1px solid #EEE; border-radius:10px; padding:0 12px; height:56px; }
.np-stat.tint-blue{ background:#F0F9FF; border-color:#E2F1FB; }
.np-stat.tint-orange{ background:#FFF5F2; border-color:#FBE3DA; }
.np-stat.tint-green{ background:#F0FDF4; border-color:#DEF3E4; }
.np-stat-ic{ width:32px; height:32px; border-radius:9px; border:1.3px solid rgba(232,69,10,0.35); background:#fff; color:#E8450A; display:grid; place-items:center; flex-shrink:0; }
.np-stat-ic svg{ width:16px; height:16px; }
.np-stat-m{ display:flex; flex-direction:column; gap:0; }
.np-stat-l{ font-size:10px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:#999; }
.np-stat-n{ font-size:22px; font-weight:800; line-height:1.05; color:#1A1A1A; letter-spacing:-0.02em; }
.np-stat-s{ font-size:11px; color:#9a9a9a; }

/* main two-column */
.np-main{ display:grid; grid-template-columns:220px 1fr; gap:10px; padding:0 18px 12px; align-items:start; }
.np-col-l, .np-col-r{ display:flex; flex-direction:column; gap:10px; }
.np-panel{ border:1px solid #EEE; border-radius:10px; padding:10px; }
.np-ph{ display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; }
.np-plabel{ font-size:10px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:#999; }
.np-ptag{ font-size:11px; font-weight:600; color:#666; }
.np-link-sm{ font-size:11px; font-weight:600; color:#E8450A; text-decoration:none; }

/* rental summary — narrow standalone ring */
.np-rental{ text-align:center; }
.np-donut{ position:relative; width:118px; height:118px; margin:2px auto 0; }
.np-donut svg{ width:100%; height:100%; transform:rotate(-90deg); }
.np-seg{ cursor:pointer; transition:opacity .15s ease; }
.np-donut:hover .np-seg{ opacity:0.45; }
.np-donut:hover .np-seg:hover{ opacity:1; }
.np-donut-c{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; }
.np-donut-n{ font-size:24px; font-weight:800; letter-spacing:-0.02em; color:#1A1A1A; line-height:1; }
.np-donut-l{ font-size:9px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:#999; margin-top:2px; }
.np-donut-tip{ position:absolute; top:-6px; left:50%; transform:translate(-50%,-100%); background:#1A1D24; color:#fff; font-size:10.5px; font-weight:700; padding:4px 9px; border-radius:6px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .12s ease; z-index:4; }
.np-donut-tip.show{ opacity:1; }
.np-donut-tip::after{ content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:4px solid transparent; border-top-color:#1A1D24; }
.np-hire{ margin-top:12px; text-align:left; }
.np-hire-bar{ height:7px; border-radius:4px; background:#EDEDED; overflow:hidden; }
.np-hire-bar span{ display:block; height:100%; background:#E8450A; border-radius:4px; }
.np-hire-lab{ display:flex; justify-content:space-between; margin-top:5px; font-size:11px; color:#888; }
.np-hire-lab b{ color:#1A1A1A; font-weight:700; }
.np-hire-lab .off{ color:#aaa; }
.np-dlink{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color:#E8450A; text-decoration:none; margin-top:10px; }
.np-dlink svg{ width:12px; height:12px; }

/* utilisation panel — stacked bar + stat pills */
.np-util-bar{ display:flex; height:14px; border-radius:5px; overflow:hidden; background:#EDEDED; }
.np-us{ display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:800; color:#fff; min-width:0; }
.np-us-hire{ background:#E8450A; }
.np-us-avail{ background:#5C9A1F; }
.np-us-serv{ background:#F59E0B; }
.np-us-inact{ background:#C4C4C4; }
.np-util-pills{ display:grid; grid-template-columns:1fr 1fr; gap:5px 8px; margin-top:10px; }
.np-up{ display:flex; align-items:center; gap:6px; font-size:11px; color:#666; white-space:nowrap; }
.np-up i{ width:8px; height:8px; border-radius:3px; flex-shrink:0; }
.np-up b{ margin-left:auto; font-size:11px; font-weight:800; color:#1A1A1A; }

/* fleet map — Leaflet */
.np-map{ display:flex; flex-direction:column; }
.np-mtoggle{ display:flex; border:1px solid #E0E0E0; border-radius:7px; overflow:hidden; }
.np-mtoggle span{ font-size:10px; font-weight:600; padding:3px 10px; color:#888; }
.np-mtoggle .on{ background:#1A1D24; color:#fff; }
.np-mapc{ height:180px; border-radius:8px; overflow:hidden; background:#EEF1F3; }
/* hero map — no label/toggle, larger */
.np-map-hero .np-mapc{ height:240px; }
/* compact documents list for narrow left column */
.np-docs-compact .np-doc{ grid-template-columns:auto 1fr auto; gap:9px; height:34px; padding:0 2px; }
.np-docs-compact .np-doc-n{ font-size:12px; }
.np-mapc .leaflet-container{ background:#F4F5F6; font-family:'Hanken Grotesk',sans-serif; }
.np-leaf-marker{ background:none; border:none; }
.np-leaf-marker span{ display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:#E8450A; color:#fff; font-family:'Hanken Grotesk',sans-serif; font-size:12px; font-weight:800; border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,0.25); }
.np-mapf{ font-size:11px; color:#aaa; margin-top:7px; }

/* documents */
.np-doc-list{ display:flex; flex-direction:column; }
.np-doc{ display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:10px; padding:7px 4px; text-decoration:none; border-top:1px solid #F2F2F2; transition:background .15s ease; }
.np-doc:first-child{ border-top:none; }
.np-doc:hover{ background:#FFF5F2; }
.np-doc-ic{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; }
.np-doc-ic svg{ width:13px; height:13px; }
.np-doc-ic.ic-green{ background:#EAF3DE; color:#3B6D11; }
.np-doc-ic.ic-amber{ background:#FAEEDA; color:#9A6A12; }
.np-doc-ic.ic-blue{ background:#E2F1FB; color:#1E6FB0; }
.np-doc-ic.ic-orange{ background:#FCE5DC; color:#E8450A; }
.np-doc-n{ font-size:12px; font-weight:600; color:#333; }
.np-doc-d{ font-size:11px; color:#9a9a9a; white-space:nowrap; }
.np-doc-dl svg{ width:14px; height:14px; color:#c4c4c4; }
.np-doc:hover .np-doc-dl svg{ color:#E8450A; }

/* alerts & activity */
.np-tabs{ display:flex; gap:16px; border-bottom:1px solid #EEE; margin-bottom:8px; }
.np-tab{ font-size:12px; font-weight:600; color:#888; padding:0 0 8px; position:relative; display:inline-flex; align-items:center; gap:6px; }
.np-tab.active{ color:#1A1A1A; }
.np-tab.active::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:#E8450A; }
.np-cnt{ font-style:normal; font-size:9px; font-weight:700; background:#F2F2F2; color:#777; padding:1px 6px; border-radius:10px; }
.np-alert-list{ display:flex; flex-direction:column; }
.np-alert{ display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:9px; padding:7px 0; }
.np-al-m{ font-size:12px; color:#555; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.np-al-m b{ color:#1A1A1A; font-weight:700; margin-right:5px; }
.np-al-d{ font-size:11px; color:#9a9a9a; white-space:nowrap; }
.np-reg{ background:#FFD600; color:#1A1A1A; font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:11px; font-weight:700; padding:3px 7px; border-radius:4px; white-space:nowrap; }
.np-pill{ font-size:10px; font-weight:700; padding:3px 9px; border-radius:20px; white-space:nowrap; }
.np-pill.green{ background:#EAF3DE; color:#3B6D11; }
.np-pill.amber{ background:#FAEEDA; color:#854F0B; }
.np-pill.red{ background:#FCEBEB; color:#A32D2D; }

/* invoices */
.np-inv-list{ display:flex; flex-direction:column; gap:5px; }
.np-invrow{ display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:10px; padding:7px 9px; border-radius:6px; border-left:3px solid transparent; background:#FAFAFA; }
.np-invrow.paid{ border-left-color:#3B6D11; }
.np-invrow.queried{ border-left-color:#C98A12; }
.np-inv-r{ font-size:12px; font-weight:700; color:#1A1A1A; white-space:nowrap; }
.np-inv-p{ font-size:11px; color:#9a9a9a; }
.np-inv-s{ font-size:11px; font-weight:700; }
.np-inv-s.green{ color:#3B6D11; }
.np-inv-s.amber{ color:#854F0B; }
.np-inv-dl svg{ width:13px; height:13px; color:#c4c4c4; }

/* bottom strip */
.np-foot{ display:flex; align-items:center; background:#FAFAFA; border-top:1px solid #EEE; padding:11px 18px; }
.np-foot-i{ display:flex; align-items:center; gap:8px; font-size:11.5px; color:#888; flex:1; min-width:0; }
.np-foot-i svg{ width:15px; height:15px; color:#aaa; flex-shrink:0; }
.np-foot-i + .np-foot-i{ border-left:1px solid #E5E5E5; padding-left:18px; }
.np-raise{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:#fff; background:#E8450A; border:none; border-radius:8px; padding:8px 15px; margin-left:18px; white-space:nowrap; cursor:pointer; transition:box-shadow .15s ease, background .15s ease; }
.np-raise svg{ width:13px; height:13px; }
.np-raise.is-on{ box-shadow:0 0 0 3px rgba(232,69,10,0.32); background:#C83E10; }

@media (max-width:860px){
  .np-main{ grid-template-columns:1fr; }
  .np-stats{ grid-template-columns:1fr; }
  .np-co-sub{ display:none; }
  .np-foot{ flex-wrap:wrap; gap:10px; }
  .np-foot-i + .np-foot-i{ border-left:none; padding-left:0; }
  .np-raise{ margin-left:0; }
}