/* ============================================================
   Customer self-service portal — Breakdowns view (live recreation)
   All rules namespaced under .cp-dash to avoid collisions.
   Built at a 1900px design width; scaled to fit via .pf-vendor-scale.
   ============================================================ */
.pf-vendor-shot--cp { aspect-ratio:1900 / 1126; }
.cp-dash, .cp-dash * { margin:0; padding:0; box-sizing:border-box; -webkit-font-smoothing:antialiased; }
.cp-dash {
  width:1900px;
  background:#f4f5f8;
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  color:#2a3142;
}

/* ---- top header bar ---- */
.cp-dash .cp-top { display:flex; align-items:center; gap:30px; padding:18px 30px; background:#fff; border-bottom:1px solid #e8eaee; }
.cp-dash .cp-brand { display:flex; align-items:center; gap:16px; }
.cp-dash .cp-logo { width:56px; height:56px; flex:none; position:relative; border-radius:50%;
  background:linear-gradient(150deg,#39a7e6 0%,#2b5fd0 48%,#1c2a86 100%); overflow:hidden; }
.cp-dash .cp-logo::before { content:""; position:absolute; left:50%; top:30%; transform:translate(-50%,-50%); width:18px; height:18px; border-radius:50%; background:#eef3fb; }
.cp-dash .cp-logo::after { content:""; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); width:38px; height:34px; border-radius:50%; background:#eef3fb; }
.cp-dash .cp-brand-name { line-height:1.05; }
.cp-dash .cp-brand-name .b1 { font-size:30px; font-weight:800; color:#1b2a78; letter-spacing:-.4px; }
.cp-dash .cp-brand-name .b2 { font-size:16px; font-weight:600; color:#5b6270; margin-top:3px; }
.cp-dash .cp-burger { display:flex; flex-direction:column; gap:5px; margin-left:6px; }
.cp-dash .cp-burger span { display:block; width:26px; height:2.5px; border-radius:2px; background:#5b6270; }
.cp-dash .cp-burger span:nth-child(2){ width:20px; }

.cp-dash .cp-topright { margin-left:auto; display:flex; align-items:stretch; }
.cp-dash .cp-tmeta { padding:4px 30px; text-align:right; border-left:1px solid #e8eaee; display:flex; flex-direction:column; justify-content:center; }
.cp-dash .cp-tmeta .tn { font-size:18px; font-weight:700; color:#1b2a78; white-space:nowrap; letter-spacing:.2px; }
.cp-dash .cp-tmeta .tl { font-size:15px; font-weight:500; color:#8a90a0; margin-top:4px; }
.cp-dash .cp-tmeta.left { text-align:left; }
.cp-dash .cp-user { display:flex; align-items:center; gap:12px; padding:4px 6px 4px 30px; border-left:1px solid #e8eaee; }
.cp-dash .cp-user .av { width:30px; height:30px; border-radius:50%; border:2px solid #5b6270; display:flex; align-items:center; justify-content:center; flex:none; }
.cp-dash .cp-user .av svg { width:18px; height:18px; color:#5b6270; }
.cp-dash .cp-user .un { font-size:19px; font-weight:600; color:#2a3142; white-space:nowrap; }
.cp-dash .cp-user .cv { font-size:16px; color:#8a90a0; margin-left:2px; }

/* ---- body: sidebar + main + map ---- */
.cp-dash .cp-body { display:flex; align-items:stretch; min-height:920px; }

.cp-dash .cp-side { width:300px; flex:none; background:#27308f; padding:18px 0 40px; }
.cp-dash .cp-nav { display:flex; flex-direction:column; }
.cp-dash .cp-nav-item { display:flex; align-items:center; gap:16px; padding:16px 26px; font-size:21px; font-weight:600; color:#eef0ff; }
.cp-dash .cp-nav-item svg { width:24px; height:24px; flex:none; color:#cdd2f5; }
.cp-dash .cp-nav-item .chev { margin-left:auto; width:18px; height:18px; }
.cp-dash .cp-subnav { display:flex; flex-direction:column; }
.cp-dash .cp-sub { display:flex; align-items:center; gap:14px; padding:13px 26px 13px 30px; font-size:19px; font-weight:500; color:#dfe2fb; }
.cp-dash .cp-sub .dots { color:#9aa1e6; font-size:18px; letter-spacing:1px; width:14px; flex:none; }
.cp-dash .cp-sub.active { color:#fff; font-weight:700; }

.cp-dash .cp-main { flex:1; min-width:0; padding:34px 30px 30px 40px; }
.cp-dash .cp-h1 { font-size:34px; font-weight:800; color:#3b4150; letter-spacing:-.4px; margin-bottom:30px; }

.cp-dash .cp-stats { display:grid; grid-template-columns:1fr 1fr; gap:34px; margin-bottom:34px; }
.cp-dash .cp-stat-label { font-size:23px; font-weight:700; color:#8a90a0; margin-bottom:16px; }
.cp-dash .cp-card { background:#fff; border-radius:16px; box-shadow:0 18px 40px -28px rgba(20,28,48,.45); }
.cp-dash .cp-stat-card { display:flex; align-items:stretch; padding:30px 0; }
.cp-dash .cp-stat-main { padding:0 36px; display:flex; align-items:center; border-right:1px solid #edeef2; }
.cp-dash .cp-stat-main .big { font-size:34px; font-weight:800; color:#1b2130; letter-spacing:-.5px; white-space:nowrap; }
.cp-dash .cp-stat-sub { flex:1; padding:0 30px; display:flex; flex-direction:column; justify-content:center; }
.cp-dash .cp-stat-sub:not(:last-child){ border-right:1px solid #edeef2; }
.cp-dash .cp-stat-sub .v { font-size:23px; font-weight:700; color:#2a3142; white-space:nowrap; }
.cp-dash .cp-stat-sub .k { font-size:19px; color:#8a90a0; margin-top:4px; }

.cp-dash .cp-tabs { display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.cp-dash .cp-tab { font-size:21px; font-weight:600; color:#8a90a0; padding:12px 28px; border-radius:24px; }
.cp-dash .cp-tab.active { background:#27308f; color:#fff; box-shadow:0 10px 22px -12px rgba(39,48,143,.7); }

.cp-dash .cp-table-card { padding:28px 30px 22px; }
.cp-dash .cp-search { display:flex; align-items:center; gap:14px; border:1px solid #e2e5ea; border-radius:10px; padding:16px 20px; color:#9aa1ac; font-size:19px; margin-bottom:24px; }
.cp-dash .cp-search svg { width:22px; height:22px; }

.cp-dash table { width:100%; border-collapse:collapse; table-layout:fixed; }
.cp-dash thead th { background:#eef0f3; text-align:left; font-size:16px; font-weight:700; color:#3b4150; padding:18px 14px; white-space:nowrap; }
.cp-dash thead th:first-child { padding-left:22px; border-radius:8px 0 0 8px; }
.cp-dash thead th:last-child { border-radius:0 8px 8px 0; }
.cp-dash .th-in { display:inline-flex; align-items:center; gap:7px; }
.cp-dash .th-in svg { width:15px; height:15px; color:#aab0bd; }
.cp-dash tbody td { font-size:17px; color:#2a3142; padding:22px 14px; border-bottom:1px solid #eef0f3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cp-dash tbody td:first-child { padding-left:22px; font-weight:600; }
.cp-dash tbody td.depot { color:#2a4bd0; }
/* column widths (sum = 100%) */
.cp-dash col.c-reg   { width:11%; }
.cp-dash col.c-case  { width:13%; }
.cp-dash col.c-depot { width:31%; }
.cp-dash col.c-type  { width:8%; }
.cp-dash col.c-date  { width:14%; }
.cp-dash col.c-stat  { width:10%; }
.cp-dash col.c-loc   { width:13%; }

.cp-dash .cp-pager { display:flex; align-items:center; justify-content:space-between; padding:24px 6px 4px; }
.cp-dash .cp-pager .entries { font-size:18px; color:#8a90a0; }
.cp-dash .cp-pages { display:flex; align-items:center; gap:8px; }
.cp-dash .cp-pg { min-width:36px; height:36px; padding:0 8px; display:flex; align-items:center; justify-content:center; border-radius:50%; font-size:17px; font-weight:600; color:#5b6270; }
.cp-dash .cp-pg.active { background:#27308f; color:#fff; }
.cp-dash .cp-pg.arr { color:#aab0bd; }
.cp-dash .cp-perpage { display:flex; align-items:center; gap:10px; border:1px solid #d7dbe2; border-radius:8px; padding:9px 16px; font-size:17px; color:#5b6270; }
.cp-dash .cp-perpage svg { width:16px; height:16px; color:#9aa1ac; }

/* ---- map column ---- */
.cp-dash .cp-mapcol { width:470px; flex:none; padding:34px 40px 30px 16px; }
.cp-dash .cp-map-card { padding:26px 26px 0; height:100%; display:flex; flex-direction:column; }
.cp-dash .cp-map-card h2 { font-size:26px; font-weight:800; color:#3b4150; margin-bottom:22px; }
.cp-dash .cp-map { position:relative; flex:1; min-height:620px; border-radius:0 0 16px 16px; overflow:hidden;
  background:
    radial-gradient(120px 90px at 70% 22%, #cfe2c7 0%, transparent 60%),
    radial-gradient(180px 140px at 38% 55%, #d4e7cd 0%, transparent 65%),
    radial-gradient(160px 120px at 60% 78%, #d0e3c9 0%, transparent 62%),
    linear-gradient(160deg, #c9def0 0%, #d9eaf3 100%); }
.cp-dash .cp-map .ctrl { position:absolute; display:flex; }
.cp-dash .cp-map .toggle { top:18px; left:18px; background:#fff; border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,.2); font-size:16px; font-weight:600; color:#444; overflow:hidden; }
.cp-dash .cp-map .toggle span { display:inline-block; padding:9px 16px; }
.cp-dash .cp-map .toggle span.on { color:#1b2a78; }
.cp-dash .cp-map .full { top:18px; right:18px; width:38px; height:38px; background:#fff; border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,.2); align-items:center; justify-content:center; }
.cp-dash .cp-map .full svg { width:20px; height:20px; color:#555; }
.cp-dash .cp-map .pin { position:absolute; width:18px; height:18px; background:#e8521a; border-radius:50% 50% 50% 0; transform:rotate(-45deg); box-shadow:0 2px 4px rgba(0,0,0,.3); }
.cp-dash .cp-map .pin::after { content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:7px; height:7px; border-radius:50%; background:#fff; }
.cp-dash .cp-map .gattr { position:absolute; left:14px; bottom:10px; font-size:14px; color:#5b6270; font-weight:600; }
.cp-dash .cp-map .gterms { position:absolute; right:14px; bottom:10px; font-size:12px; color:#7a8190; }