/* SLCMC MIS - CEO portal */
:root{
  --side:#0f2742; --side2:#163a5f; --accent:#f2a900; --bg:#f2f5f9; --card:#ffffff; --ink:#1d2939; --muted:#667085; --line:#e4e8ee;
  --ok:#16a34a; --okbg:#e8f7ee; --del:#dc2626; --delbg:#fdecec; --can:#c2410c; --canbg:#fff1e6; --edit:#7c3aed; --editbg:#f2ecff;
  --run:#0284c7; --runbg:#e6f4fb; --late:#a16207; --latebg:#fdf6dc;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;font-size:14px}
a{color:#1d4ed8;text-decoration:none} a:hover{text-decoration:underline}
.mis-shell{display:flex;min-height:100vh}

/* sidebar */
.mis-side{width:250px;flex:0 0 250px;background:linear-gradient(180deg,var(--side),var(--side2));color:#cfd9e6;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;z-index:1040}
.brand{display:flex;gap:12px;align-items:center;padding:18px 18px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.brand .logo{width:40px;height:40px;border-radius:10px;background:var(--accent);color:#1b2a3a;display:grid;place-items:center;font-size:18px}
.brand .b1{color:#fff;font-weight:800;letter-spacing:.3px}
.brand .b2{font-size:11.5px;color:#9fb3c8}
.mis-side nav{padding:10px 10px;overflow-y:auto;flex:1}
.nav-sec{font-size:10.5px;text-transform:uppercase;letter-spacing:1px;color:#7f97b2;padding:14px 10px 6px}
.mis-side .nav-link{display:flex;gap:11px;align-items:center;padding:9px 12px;border-radius:8px;color:#d6e0eb;font-weight:500;margin-bottom:2px}
.mis-side .nav-link i{width:18px;text-align:center;color:#8fb0d1}
.mis-side .nav-link:hover{background:rgba(255,255,255,.07);text-decoration:none;color:#fff}
.mis-side .nav-link.active{background:rgba(242,169,0,.16);color:#fff;box-shadow:inset 3px 0 0 var(--accent)}
.mis-side .nav-link.active i{color:var(--accent)}
.side-foot{font-size:11px;color:#7f97b2;padding:12px 18px;border-top:1px solid rgba(255,255,255,.08)}
.mis-backdrop{display:none}

/* main */
.mis-main{flex:1;min-width:0;display:flex;flex-direction:column}
.mis-top{display:flex;align-items:center;gap:12px;padding:12px 22px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1030}
.top-title{flex:1;min-width:0}
.top-title h1{font-size:19px;font-weight:800;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-title .sub{font-size:12px;color:var(--muted)}
.btn-icon{border:1px solid var(--line);background:#fff;width:38px;height:38px;border-radius:9px}
.btn-user{border:1px solid var(--line);background:#fff;border-radius:20px;padding:6px 12px;font-weight:600}
.sync-pill{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;padding:6px 11px;border-radius:20px;white-space:nowrap}
.sync-pill:hover{text-decoration:none}
.sync-pill i{font-size:8px}
.sync-pill.ok{background:var(--okbg);color:var(--ok)} .sync-pill.warn{background:var(--latebg);color:var(--late)} .sync-pill.bad{background:var(--delbg);color:var(--del)}
.mis-content{padding:18px 22px;flex:1}
.mis-foot{padding:14px 22px;color:var(--muted);font-size:12px}

/* filter bar */
.filter-bar{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin-bottom:16px}
.fb-dates{display:flex;flex-wrap:wrap;gap:8px;align-items:end}
.fb-dates label{display:flex;flex-direction:column;font-size:11px;color:var(--muted);font-weight:600}
.fb-dates input,.f-in{border:1px solid #cfd6df;border-radius:8px;padding:5px 8px;font-size:13px;height:32px;background:#fff}
.fb-quick{display:flex;flex-wrap:wrap;gap:6px}
.fb-quick .q{font-size:12px;padding:5px 10px;border-radius:16px;background:#f1f4f8;color:#344054;font-weight:600}
.fb-quick .q:hover{text-decoration:none;background:#e4e9f0}
.fb-quick .q.on{background:var(--side);color:#fff}
.fb-range{margin-left:auto;font-weight:700;color:var(--side)}

/* KPI */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:14px;margin-bottom:18px}
.kpi{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;color:var(--ink);position:relative;overflow:hidden}
a.kpi:hover{text-decoration:none;box-shadow:0 6px 18px rgba(16,24,40,.08);transform:translateY(-1px)}
.kpi::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--tone)}
.kpi-ic{width:44px;height:44px;flex:0 0 44px;border-radius:12px;display:grid;place-items:center;font-size:18px;color:var(--tone);background:var(--tonebg)}
.kpi-label{font-size:12px;color:var(--muted);font-weight:600}
.kpi-value{font-size:24px;font-weight:800;line-height:1.15}
.kpi-note{font-size:11.5px;color:var(--muted)}
.tone-blue{--tone:#2563eb;--tonebg:#e8efff} .tone-green{--tone:#16a34a;--tonebg:#e8f7ee} .tone-teal{--tone:#0d9488;--tonebg:#e1f5f2}
.tone-amber{--tone:#d97706;--tonebg:#fdf3e1} .tone-red{--tone:#dc2626;--tonebg:#fdecec} .tone-purple{--tone:#7c3aed;--tonebg:#f2ecff}
.tone-slate{--tone:#475569;--tonebg:#eef1f5} .tone-orange{--tone:#ea580c;--tonebg:#fff0e6} .tone-sky{--tone:#0284c7;--tonebg:#e6f4fb}

/* cards / tables */
.card-x{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:18px}
.card-x .hd{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.card-x .hd h2{font-size:15px;font-weight:800;margin:0;flex:1}
.card-x .hd .hint{font-size:12px;color:var(--muted)}
.card-x .bd{padding:14px 16px}
.card-x .bd.p0{padding:0}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{background:#f7f9fc;color:#475467;font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.3px;padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap;text-align:left}
.tbl td{padding:9px 10px;border-bottom:1px solid #eef1f5;vertical-align:top}
.tbl tr:hover td{background:#fafbfd}
.tbl .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tbl tfoot td{font-weight:800;background:#f7f9fc}
.tbl .nowrap{white-space:nowrap}
.tbl .tk{font-weight:800;color:var(--side);white-space:nowrap}
.tbl .orig{display:block;font-size:11px;color:var(--muted);font-weight:500}
.tbl .muted{color:var(--muted);font-size:12px}
.tbl-wrap{overflow-x:auto}
.empty{padding:28px;text-align:center;color:var(--muted)}
.chip{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:12px;white-space:nowrap}
.st-ok{background:var(--okbg);color:var(--ok)} .st-del{background:var(--delbg);color:var(--del)} .st-can{background:var(--canbg);color:var(--can)}
.st-edit{background:var(--editbg);color:var(--edit)} .st-run{background:var(--runbg);color:var(--run)} .st-late{background:var(--latebg);color:var(--late)} .st-other{background:#eef1f5;color:#475569}
.chg{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12.5px}
.chg .f{font-weight:700;color:#344054}
.chg .b{color:var(--del);text-decoration:line-through} .chg .a{color:var(--ok);font-weight:700}
.chg .key{background:#fff6d6;border-radius:6px;padding:0 5px}
.delta-up{color:var(--ok);font-weight:800} .delta-dn{color:var(--del);font-weight:800}
.alert-x{display:flex;gap:12px;align-items:flex-start;border-radius:12px;padding:12px 14px;margin-bottom:16px;border:1px solid}
.alert-x.red{background:#fff5f5;border-color:#f6c9c9;color:#8a1c1c} .alert-x.amber{background:#fffaeb;border-color:#f5dca0;color:#7a4b00} .alert-x.green{background:#f2fbf5;border-color:#bfe8cd;color:#14532d}
.alert-x i{font-size:18px;margin-top:2px}
.tools{display:flex;gap:6px;margin-left:auto}
.row-x{display:grid;grid-template-columns:2fr 1fr;gap:18px}
.row-x2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.search-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.search-row .f-in{min-width:150px}
.feed{list-style:none;margin:0;padding:0}
.feed li{display:flex;gap:10px;padding:10px 16px;border-bottom:1px solid #eef1f5}
.feed .dot{width:30px;height:30px;flex:0 0 30px;border-radius:50%;display:grid;place-items:center;font-size:12px}
.feed .t{font-size:11.5px;color:var(--muted)}
.mis-pager{display:flex;gap:4px;align-items:center;padding:12px 16px;flex-wrap:wrap}
.pg{padding:5px 10px;border-radius:7px;border:1px solid var(--line);background:#fff;color:#344054;font-weight:600}
.pg.on{background:var(--side);color:#fff;border-color:var(--side)} .pg.dis{opacity:.4} .pg:hover{text-decoration:none}
.pg-info{margin-left:8px;color:var(--muted);font-size:12px}
.bar-in{height:8px;background:#eef1f5;border-radius:6px;overflow:hidden;min-width:80px}
.bar-in span{display:block;height:100%;background:linear-gradient(90deg,#2563eb,#0ea5e9);border-radius:6px}
.dl{display:grid;grid-template-columns:170px 1fr;gap:6px 14px;font-size:13.5px}
.dl dt{color:var(--muted);font-weight:600} .dl dd{margin:0;font-weight:600}
.timeline{list-style:none;margin:0;padding:0 0 0 6px}
.timeline li{position:relative;padding:0 0 16px 26px;border-left:2px solid var(--line)}
.timeline li:last-child{border-left-color:transparent}
.timeline .td{position:absolute;left:-9px;top:0;width:16px;height:16px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px var(--tone,#94a3b8);background:var(--tone,#94a3b8)}

/* table helper */
.dt-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line)}
.dt-bar .dt-q{flex:1;min-width:180px;max-width:340px}
.dt-bar .dt-info{color:var(--muted);font-size:12px;margin-left:auto}
.tbl th.dt-sort{cursor:pointer;user-select:none}
.tbl th.dt-sort::after{content:" ⇅";color:#b0b8c4;font-size:10px}
.tbl th.dt-sort.asc::after{content:" ▲";color:var(--side)} .tbl th.dt-sort.desc::after{content:" ▼";color:var(--side)}
.dt-tabs{display:flex;flex-wrap:wrap;gap:6px}
.dt-tabs .q{cursor:pointer}
.dt-tabs .q .n{display:inline-block;margin-left:5px;padding:0 6px;border-radius:9px;background:rgba(0,0,0,.08);font-size:11px}
.dt-tabs .q.on .n{background:rgba(255,255,255,.25)}
a.cnt{text-decoration:none}
.con-chip{display:inline-flex;align-items:center;gap:6px;background:#eef4ff;color:#1d4ed8;font-weight:700;font-size:12.5px;padding:5px 10px;border-radius:16px}
.con-chip a{color:#1d4ed8}

/* login */
.login-wrap{min-height:100vh;display:grid;place-items:center;background:radial-gradient(1200px 600px at 10% 10%,#1f4e7a 0,transparent 60%),linear-gradient(135deg,#0f2742,#0b1b2e);padding:16px}
.login-card{width:100%;max-width:380px;background:#fff;border-radius:18px;padding:28px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.login-card .logo{width:54px;height:54px;border-radius:14px;background:var(--accent);display:grid;place-items:center;font-size:24px;color:#1b2a3a;margin-bottom:12px}

/* responsive */
@media (max-width:1100px){ .row-x,.row-x2{grid-template-columns:1fr} }
@media (max-width:991.98px){
  .mis-side{position:fixed;left:-260px;transition:left .2s}
  body.side-open .mis-side{left:0}
  body.side-open .mis-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1035}
  .mis-top{padding:10px 14px}
  .mis-content{padding:14px}
  .sync-pill span{display:none}
}
@media (max-width:575.98px){
  .kpi-grid{grid-template-columns:1fr 1fr;gap:10px}
  .kpi{padding:11px;gap:9px} .kpi-ic{width:36px;height:36px;flex-basis:36px;font-size:15px} .kpi-value{font-size:19px}
  .fb-range{margin-left:0}
  .dl{grid-template-columns:1fr}
  .top-title h1{font-size:16px}
}

/* print */
@media print{
  .mis-side,.mis-top .btn,.dropdown,.no-print,.mis-backdrop{display:none!important}
  .mis-top{position:static;border:0;padding:0 0 8px}
  .mis-content{padding:0}
  body{background:#fff;font-size:11px}
  .card-x,.kpi{break-inside:avoid;border-color:#ccc}
  .tbl th{background:#eee!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .chip,.kpi::after,.kpi-ic{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  a{color:inherit}
}