/* ============================================================
   Service & Logistics — Cost Recovery dashboard (Phase 1 concept)
   All selectors are scoped under .sl-cost-recovery so nothing here
   leaks into the rest of the portal. CSS variables are scoped to the
   same wrapper so they cannot clobber the app theme's --text etc.
   ============================================================ */
.sl-cost-recovery{
  --orange:#F47920;
  --orange-soft:#FEF3E9;
  --ink:#161616;
  --sl-text:#1f2937;
  --muted:#6b7280;
  --muted-2:#9ca3af;
  --line:#e5e7eb;
  --line-soft:#f1f3f5;
  --card:#ffffff;
  --sl-bg:#ffffff;
  --green:#16a34a;
  --green-bar:#22c55e;
  --green-soft:#ecfdf3;
  --red:#dc2626;
  --red-bar:#ef4444;
  --red-soft:#fef2f2;
  --amber:#d97706;
  --amber-bar:#f59e0b;
  --purple:#6366f1;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --shadow-lg:0 10px 30px rgba(16,24,40,.12);
  --radius:14px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;

  color:var(--sl-text);
  background:var(--sl-bg);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
}
.sl-cost-recovery *{box-sizing:border-box}
.sl-cost-recovery button{font-family:inherit;cursor:pointer}
.sl-cost-recovery a{color:inherit}

/* page body */
.sl-cost-recovery .page{padding:22px 28px 60px;max-width:1480px;width:100%}
.sl-cost-recovery .head-row{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap}
.sl-cost-recovery h1{font-size:30px;margin:0 0 4px;letter-spacing:-.6px}
.sl-cost-recovery .sub{color:var(--muted);margin:0;font-size:15px}
.sl-cost-recovery .head-right{margin-left:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.sl-cost-recovery .live{display:flex;align-items:center;gap:7px;font-weight:600;font-size:14px;border:1px solid var(--line);border-radius:24px;padding:6px 13px}
.sl-cost-recovery .live .dot{width:9px;height:9px;border-radius:50%;background:var(--green-bar);box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.sl-cost-recovery .datechip{background:#f3f4f6;border-radius:24px;padding:7px 14px;font-weight:600;font-size:14px;color:#374151}
.sl-cost-recovery .refresh{display:flex;align-items:center;gap:8px;border:1.5px solid var(--purple);color:var(--purple);background:#fff;border-radius:10px;padding:8px 14px;font-weight:700;font-size:13px;letter-spacing:.4px}
.sl-cost-recovery .refresh:hover{background:#f5f3ff}
.sl-cost-recovery .refresh svg{width:15px;height:15px}

/* controls bar */
.sl-cost-recovery .controls{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:22px 0 6px}
.sl-cost-recovery .seg{display:inline-flex;background:#f3f4f6;border-radius:11px;padding:4px}
.sl-cost-recovery .seg button{border:none;background:transparent;padding:8px 16px;border-radius:8px;font-weight:600;font-size:13.5px;color:var(--muted)}
.sl-cost-recovery .seg button.on{background:#fff;color:var(--ink);box-shadow:var(--shadow)}
.sl-cost-recovery .custom-dates{display:none;align-items:center;gap:8px}
.sl-cost-recovery .custom-dates.show{display:inline-flex}
.sl-cost-recovery .custom-dates input{border:1px solid var(--line);border-radius:9px;padding:7px 10px;font-family:inherit;font-size:13px;color:var(--sl-text)}
.sl-cost-recovery .ctrl-label{font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted-2)}

.sl-cost-recovery .view-toggle{margin-left:auto;display:flex;align-items:center;gap:12px}
.sl-cost-recovery .toggle{position:relative;display:inline-flex;background:#f3f4f6;border-radius:11px;padding:4px}
.sl-cost-recovery .toggle button{border:none;background:transparent;padding:8px 18px;border-radius:8px;font-weight:700;font-size:13.5px;color:var(--muted);display:flex;align-items:center;gap:7px}
.sl-cost-recovery .toggle button.on{background:var(--ink);color:#fff}
.sl-cost-recovery .toggle button.on.excpt{background:var(--orange)}

/* KPI strip */
.sl-cost-recovery .kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin:20px 0 8px}
.sl-cost-recovery .kpi{background:var(--card);border:1px solid var(--line);border-left-width:5px;border-radius:var(--radius);padding:16px 16px 15px;box-shadow:var(--shadow)}
.sl-cost-recovery .kpi.good{border-left-color:var(--green-bar)}
.sl-cost-recovery .kpi.warn{border-left-color:var(--amber-bar)}
.sl-cost-recovery .kpi.bad{border-left-color:var(--red-bar)}
.sl-cost-recovery .kpi.neutral{border-left-color:#cbd5e1}
.sl-cost-recovery .kpi .k-label{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12.5px;font-weight:600}
.sl-cost-recovery .kpi .k-label svg{width:15px;height:15px;color:var(--orange)}
.sl-cost-recovery .kpi .k-val{font-size:27px;font-weight:800;letter-spacing:-.6px;margin-top:10px;line-height:1}
.sl-cost-recovery .kpi .k-val.pos{color:var(--green)}
.sl-cost-recovery .kpi .k-val.neg{color:var(--red)}
.sl-cost-recovery .kpi .k-sub{font-size:12px;color:var(--muted);margin-top:7px}
.sl-cost-recovery .chip{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px}
.sl-cost-recovery .chip.up{background:var(--green-soft);color:var(--green)}
.sl-cost-recovery .chip.down{background:var(--red-soft);color:var(--red)}

/* table card */
.sl-cost-recovery .panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-top:18px;overflow:hidden}
.sl-cost-recovery .panel-head{display:flex;align-items:center;gap:12px;padding:18px 20px 14px}
.sl-cost-recovery .panel-head h2{font-size:21px;margin:0;display:flex;align-items:center;gap:10px;letter-spacing:-.3px}
.sl-cost-recovery .panel-head h2 svg{width:22px;height:22px;color:var(--orange)}
.sl-cost-recovery .count-pill{color:var(--muted);font-weight:600}
.sl-cost-recovery .panel-head .link{margin-left:auto;color:var(--muted);font-weight:700;font-size:13px;letter-spacing:.4px;text-decoration:none;display:flex;align-items:center;gap:6px}
.sl-cost-recovery .panel-head .link svg{width:14px;height:14px}

.sl-cost-recovery table{width:100%;border-collapse:collapse}
.sl-cost-recovery thead th{text-align:left;font-size:11.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted-2);font-weight:700;padding:10px 16px;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);cursor:pointer;user-select:none;white-space:nowrap}
.sl-cost-recovery thead th.num{text-align:right}
.sl-cost-recovery thead th .arrow{font-size:9px;color:var(--muted)}
.sl-cost-recovery tbody td{padding:13px 16px;font-size:14px;border-bottom:1px solid var(--line-soft)}
.sl-cost-recovery tbody td.num{text-align:right;font-variant-numeric:tabular-nums}
.sl-cost-recovery tbody tr{cursor:pointer}
.sl-cost-recovery tbody tr:hover{background:#fafafa}
.sl-cost-recovery tbody tr:last-child td{border-bottom:none}
.sl-cost-recovery .bu-name{font-weight:600;color:var(--ink)}
.sl-cost-recovery .bu-code{color:var(--muted-2);font-size:12px;font-weight:500}
.sl-cost-recovery .status{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:12.5px;padding:3px 10px;border-radius:20px}
.sl-cost-recovery .status.ok{background:var(--green-soft);color:var(--green)}
.sl-cost-recovery .status.miss{background:var(--red-soft);color:var(--red)}
.sl-cost-recovery .status.close{background:#fffbeb;color:var(--amber)}
.sl-cost-recovery .money.pos{color:var(--green);font-weight:600}
.sl-cost-recovery .money.neg{color:var(--red);font-weight:600}
.sl-cost-recovery .chev{color:var(--muted-2)}
.sl-cost-recovery .empty{display:flex;flex-direction:column;align-items:center;gap:14px;padding:54px 20px;color:var(--muted)}
.sl-cost-recovery .empty svg{width:56px;height:56px;color:var(--green-bar)}

.sl-cost-recovery .footnote{color:var(--muted-2);font-size:12.5px;margin-top:26px}

/* drill-down slide-over */
.sl-cost-recovery .scrim{position:fixed;inset:0;background:rgba(16,24,40,.35);opacity:0;pointer-events:none;transition:opacity .2s;z-index:1400}
.sl-cost-recovery .scrim.show{opacity:1;pointer-events:auto}
.sl-cost-recovery .drawer{position:fixed;top:0;right:0;height:100vh;width:560px;max-width:92vw;background:#fff;box-shadow:var(--shadow-lg);transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.1,1);z-index:1401;display:flex;flex-direction:column}
.sl-cost-recovery .drawer.show{transform:translateX(0)}
.sl-cost-recovery .drawer-head{padding:22px 26px 18px;border-bottom:1px solid var(--line);position:relative}
.sl-cost-recovery .drawer-head .close{position:absolute;top:18px;right:20px;border:none;background:#f3f4f6;width:34px;height:34px;border-radius:50%;font-size:18px;color:#374151;line-height:1}
.sl-cost-recovery .drawer-head .eyebrow{font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--orange)}
.sl-cost-recovery .drawer-head h3{margin:6px 0 2px;font-size:23px;letter-spacing:-.4px}
.sl-cost-recovery .drawer-head .meta{color:var(--muted);font-size:13.5px}
.sl-cost-recovery .drawer-body{padding:22px 26px 40px;overflow:auto}
.sl-cost-recovery .dd-headline{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:22px}
.sl-cost-recovery .dd-stat{border:1px solid var(--line);border-radius:12px;padding:13px 14px}
.sl-cost-recovery .dd-stat .l{font-size:11.5px;color:var(--muted);font-weight:600}
.sl-cost-recovery .dd-stat .v{font-size:21px;font-weight:800;margin-top:6px;letter-spacing:-.4px}
.sl-cost-recovery .dd-stat .v.pos{color:var(--green)} .sl-cost-recovery .dd-stat .v.neg{color:var(--red)}
.sl-cost-recovery .dd-section{margin-top:8px}
.sl-cost-recovery .dd-section h4{font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted-2);margin:22px 0 10px}
.sl-cost-recovery .bar-row{display:flex;align-items:center;gap:12px;margin:9px 0;font-size:13.5px}
.sl-cost-recovery .bar-row .bl{width:150px;color:var(--sl-text)}
.sl-cost-recovery .bar-track{flex:1;height:9px;background:#f1f3f5;border-radius:6px;overflow:hidden}
.sl-cost-recovery .bar-fill{height:100%;border-radius:6px}
.sl-cost-recovery .bar-row .bv{width:84px;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.sl-cost-recovery .meter{margin:14px 0 4px}
.sl-cost-recovery .meter-track{position:relative;height:14px;background:#f1f3f5;border-radius:8px}
.sl-cost-recovery .meter-actual{position:absolute;left:0;top:0;height:100%;border-radius:8px}
.sl-cost-recovery .meter-target{position:absolute;top:-5px;width:3px;height:24px;background:var(--ink);border-radius:2px}
.sl-cost-recovery .meter-legend{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:8px}
.sl-cost-recovery .trend{display:flex;align-items:flex-end;gap:6px;height:64px;margin-top:6px}
.sl-cost-recovery .trend .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px}
.sl-cost-recovery .trend .stick{width:100%;border-radius:4px 4px 0 0}
.sl-cost-recovery .trend .lbl{font-size:10px;color:var(--muted-2)}
.sl-cost-recovery .insight{background:var(--orange-soft);border-radius:12px;padding:14px 16px;font-size:13.5px;color:#7c3a0c;margin-top:22px;line-height:1.5}
.sl-cost-recovery .insight b{color:#7c3a0c}

@media(max-width:1200px){.sl-cost-recovery .kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.sl-cost-recovery .kpis{grid-template-columns:repeat(2,1fr)}.sl-cost-recovery .page{padding:18px 16px 50px}}