/* MandalaMine ERP — Operational & Lab Cockpit (PHASE 2)
   Premium KPI panel di Home, data 100% LIVE dari /api/cockpit/summary.
   Theme-aware: default gelap, override terang utk skin Pro. Additive & reversible. */

#cockpit-panel{margin:4px 0 18px;border:1px solid #243154;border-radius:14px;
  background:linear-gradient(180deg,#101a33,#0d1628);padding:16px 16px 18px;
  box-shadow:0 6px 22px rgba(0,0,0,.28)}
html[data-theme="light"] #cockpit-panel{border-color:#e2e8f4;
  background:linear-gradient(180deg,#ffffff,#f6f9ff);box-shadow:0 8px 26px rgba(8,33,63,.07)}

.ck-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.ck-title{font-size:15px;font-weight:850;letter-spacing:.3px;color:#e7edff;display:flex;align-items:center;gap:7px}
html[data-theme="light"] .ck-title{color:#08213F}
.ck-sub{font-size:11px;color:#7e8cb4;margin-top:2px}
html[data-theme="light"] .ck-sub{color:#7a86a8}
.ck-tools{display:flex;align-items:center;gap:7px}
.ck-tools select{background:#0f1830;color:#cdd6f4;border:1px solid #2b3a66;border-radius:8px;padding:6px 9px;font-size:12px;font-weight:600;cursor:pointer}
html[data-theme="light"] .ck-tools select{background:#fff;color:#08213F;border-color:#d4dcec}
.ck-tools button{background:#16213d;color:#cdd6f4;border:1px solid #2b3a66;border-radius:8px;padding:6px 10px;font-size:12px;cursor:pointer}
html[data-theme="light"] .ck-tools button{background:#fff;color:#08213F;border-color:#d4dcec}

/* KPI strip */
.ck-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:10px}
.ck-kpi{position:relative;border:1px solid #233056;border-radius:12px;padding:12px 13px;
  background:linear-gradient(160deg,#13203c,#0f1a31);overflow:hidden}
html[data-theme="light"] .ck-kpi{border-color:#e7edf7;background:linear-gradient(160deg,#fbfdff,#f1f6ff)}
.ck-kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#E2BE69,#C99A2E)}
.ck-kpi .kpi-l{font-size:11px;font-weight:700;color:#8b97bd;display:flex;align-items:center;gap:5px}
html[data-theme="light"] .ck-kpi .kpi-l{color:#6b779b}
.ck-kpi .kpi-v{font-size:25px;font-weight:850;line-height:1.12;margin-top:5px;color:#eef2ff;letter-spacing:-.5px}
html[data-theme="light"] .ck-kpi .kpi-v{color:#08213F}
.ck-kpi .kpi-u{font-size:10.5px;color:#74809f;margin-top:3px;line-height:1.4}
html[data-theme="light"] .ck-kpi .kpi-u{color:#8590ad}
.ck-kpi.gold .kpi-v{color:#E2BE69}
/* kartu KPI klik-able → loncat ke tab terkait */
.ck-kpi.ck-clk{cursor:pointer;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}
.ck-kpi.ck-clk:hover{transform:translateY(-2px);border-color:#C99A2E;box-shadow:0 6px 18px rgba(0,0,0,.28)}
html[data-theme="light"] .ck-kpi.ck-clk:hover{box-shadow:0 6px 18px rgba(14,42,79,.12)}
.ck-kpi .ck-go{position:absolute;top:9px;right:10px;font-size:13px;font-weight:800;color:#6b779b;opacity:0;transition:opacity .12s ease,transform .12s ease}
.ck-kpi.ck-clk:hover .ck-go{opacity:1;transform:translateX(2px);color:#C99A2E}
/* link "Buka …" di judul kartu Lab/Inbox */
.ck-cardgo{float:right;font-size:10.5px;font-weight:800;color:#C99A2E;cursor:pointer;text-decoration:none;letter-spacing:0}
.ck-cardgo:hover{text-decoration:underline}
.ck-chip{font-size:10.5px;font-weight:800;padding:1px 6px;border-radius:20px;display:inline-block}
.ck-chip.up{color:#6fe39a;background:rgba(111,227,154,.12)}
.ck-chip.dn{color:#e88f8f;background:rgba(232,143,143,.12)}
.ck-chip.flat{color:#8b97bd;background:rgba(139,151,189,.12)}

/* lower grid */
.ck-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:12px;margin-top:14px}
@media(max-width:1100px){.ck-grid{grid-template-columns:1fr}}
.ck-card{border:1px solid #223052;border-radius:12px;background:#0f1830;padding:12px}
html[data-theme="light"] .ck-card{border-color:#e7edf7;background:#fff}
.ck-card-t{font-size:12px;font-weight:800;color:#cbd5f0;margin-bottom:9px;letter-spacing:.2px}
html[data-theme="light"] .ck-card-t{color:#08213F}

/* trend bars */
.ck-tr{display:flex;align-items:center;gap:8px;margin:6px 0}
.ck-tr .tl{width:54px;font-size:10.5px;color:#8b97bd;flex:none}
html[data-theme="light"] .ck-tr .tl{color:#6b779b}
.ck-tr .tb-wrap{flex:1;display:flex;flex-direction:column;gap:3px}
.ck-bar{height:7px;border-radius:5px;min-width:2px}
.ck-bar.s{background:linear-gradient(90deg,#3b6fd4,#5b8def)}
.ck-bar.h{background:linear-gradient(90deg,#C99A2E,#E2BE69)}
.ck-tr .tv{width:74px;text-align:right;font-size:10px;color:#9aa6c9;flex:none}
html[data-theme="light"] .ck-tr .tv{color:#7a86a8}
.ck-legend{font-size:10px;color:#74809f;margin-top:6px;display:flex;gap:12px}
.ck-legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:4px;vertical-align:middle}

/* tables */
.ck-tbl{width:100%;border-collapse:collapse;font-size:11px}
.ck-tbl th{text-align:left;color:#7e8cb4;font-weight:700;padding:4px 6px;border-bottom:1px solid #233056;font-size:10px;text-transform:uppercase;letter-spacing:.3px}
html[data-theme="light"] .ck-tbl th{color:#8590ad;border-bottom-color:#e7edf7}
.ck-tbl td{padding:5px 6px;border-bottom:1px solid #1a2440;color:#c2cbe8}
html[data-theme="light"] .ck-tbl td{border-bottom-color:#eef2f9;color:#33415f}
.ck-tbl tr:last-child td{border-bottom:none}
.ck-st{font-size:9.5px;font-weight:800;padding:1px 7px;border-radius:20px;white-space:nowrap}
.ck-st.ok{color:#6fe39a;background:rgba(111,227,154,.13)}
.ck-st.run{color:#E2BE69;background:rgba(226,190,105,.13)}
.ck-st.wait{color:#e8a25b;background:rgba(232,162,91,.13)}
.ck-empty{color:#74809f;font-size:11px;padding:14px;text-align:center}
.ck-note{font-size:10px;color:#8590ad;margin-top:8px;line-height:1.5}

/* baris inbox klik-able → loncat ke kapal di tab Pengapalan */
.ck-tbl tr.ck-row{cursor:pointer;transition:background .12s ease}
.ck-tbl tr.ck-row:hover{background:rgba(201,154,46,.10)}
html[data-theme="light"] .ck-tbl tr.ck-row:hover{background:rgba(201,154,46,.12)}
/* sorot baris tujuan setelah loncat */
@keyframes ck-flash-kf{0%{background:rgba(201,154,46,.42)}100%{background:transparent}}
tr.ck-flash,tr.ck-flash td{animation:ck-flash-kf 2.2s ease-out;}
tr.ck-flash td{box-shadow:inset 0 0 0 9999px rgba(201,154,46,.10)}