/* Rekap Projek OA — disesuaikan dengan palet situs (navy #0a1628 / #1a3a6b) */

.oa-wrap{
  --bg:#f6f7f9; --card:#ffffff; --ink:#0a1628; --muted:#6b7280; --line:#e5e7eb;
  --accent:#1a3a6b; --accent-soft:#e8ecf0;
  --red:#dc2626; --red-soft:#fef2f2;
  --amber:#b45309; --amber-soft:#fef3c7;
  --blue:#0369a1; --blue-soft:#eff6ff;
  --violet:#6d28d9; --violet-soft:#f5f3ff;
  --teal:#0f766e; --teal-soft:#f0fdfa;
  --slate:#64748b; --slate-soft:#f1f5f9;
  --radius:12px; --shadow:0 1px 2px rgba(16,24,40,.05);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg); color:var(--ink); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  max-width:780px; margin:0 auto; padding:28px 18px 48px;
}

/* ---------- Header ---------- */
.oa-wrap header{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px}
.oa-wrap .brand{display:flex; align-items:center; gap:11px; min-width:0}
.oa-wrap .logo{
  width:36px; height:36px; border-radius:10px; flex:none;
  background:linear-gradient(135deg,#0a1628,#1a3a6b);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:13px; box-shadow:0 4px 10px rgba(26,58,107,.25);
}
.oa-wrap h1{font-size:16.5px; font-weight:800; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0}
.oa-wrap .sub{color:var(--muted); font-size:12px; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.oa-wrap .header-actions{display:flex; align-items:center; gap:10px; flex:none}
.oa-wrap .updated{color:var(--muted); font-size:11.5px; white-space:nowrap}
.oa-wrap .btn{
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  padding:6px 12px; border-radius:9px; font-size:12.5px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; transition:.15s;
}
.oa-wrap .btn:hover{border-color:#d1d5db; background:#fafafa}
.oa-wrap .btn svg{width:12px; height:12px}
.oa-wrap .spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Filter ---------- */
.oa-wrap .filterbar{display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap}
.oa-wrap .search{flex:1 1 180px; position:relative}
.oa-wrap .search svg{position:absolute; left:10px; top:50%; transform:translateY(-50%); width:13px; height:13px; color:#9ca3af}
.oa-wrap .search input{
  width:100%; padding:7px 10px 7px 30px; border:1px solid var(--line); border-radius:9px;
  font-size:13px; font-family:inherit; background:var(--card); color:var(--ink); outline:none; transition:.15s;
}
.oa-wrap .search input:focus{border-color:#9ca3af; box-shadow:0 0 0 3px rgba(107,114,128,.08)}
.oa-wrap select{
  padding:7px 10px; border:1px solid var(--line); border-radius:9px; font-size:13px;
  font-family:inherit; background:var(--card); color:var(--ink); cursor:pointer; outline:none; max-width:190px;
}
.oa-wrap select:focus{border-color:#9ca3af; box-shadow:0 0 0 3px rgba(107,114,128,.08)}
.oa-wrap .view-toggle{display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:var(--card)}
.oa-wrap .view-toggle button{
  border:none; background:transparent; color:var(--muted); font-family:inherit;
  padding:7px 12px; font-size:12.5px; font-weight:600; cursor:pointer; transition:.15s;
}
.oa-wrap .view-toggle button:hover{color:var(--ink)}
.oa-wrap .view-toggle button.active{background:var(--ink); color:#fff}

/* ---------- Card list ---------- */
.oa-wrap .cardlist{display:flex; flex-direction:column; gap:10px}
.oa-wrap .summary-line{font-size:12px; color:var(--muted); margin-bottom:12px}
.oa-wrap .summary-line b{color:var(--ink); font-weight:700}
.oa-wrap mark{background:#fef08a; color:inherit; border-radius:2px; padding:0 1px}
.oa-wrap .warn-banner{
  font-size:12px; color:var(--amber); background:var(--amber-soft);
  border:1px solid #fde68a; border-radius:9px; padding:8px 12px; margin-bottom:10px;
}
.oa-wrap .warn-banner b{font-weight:700}
.oa-wrap .card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); transition:.12s; overflow:hidden; cursor:pointer;
}
.oa-wrap .card:hover{border-color:#d1d5db}
.oa-wrap .card.expanded{border-color:#a7f3d0}
.oa-wrap .card-row{display:flex; align-items:center; gap:12px; padding:11px 14px}
.oa-wrap .card-main{flex:1; min-width:0}
.oa-wrap .line1{display:flex; align-items:baseline; gap:8px; min-width:0}
.oa-wrap .cid{font-size:11px; font-weight:700; color:#64748b; letter-spacing:.02em; flex:none; font-variant-numeric:tabular-nums}
.oa-wrap .pname{font-weight:700; font-size:13.5px; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.oa-wrap .line2{display:flex; align-items:center; gap:6px; margin-top:2px; min-width:0}
.oa-wrap .pic{font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.oa-wrap .cattext{font-weight:700}
.oa-wrap .cattext.riset{color:#0f766e}
.oa-wrap .cattext.ops{color:#4f46e5}
.oa-wrap .lead-name{color:var(--ink); font-weight:600}
.oa-wrap .dl{font-size:12px; color:var(--muted); white-space:nowrap; flex:none; font-variant-numeric:tabular-nums}
.oa-wrap .dl b{font-weight:700; color:var(--ink)}
.oa-wrap .dl .sep{color:#d1d5db; margin:0 3px}
.oa-wrap .badge{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px;
  font-size:11px; font-weight:700; white-space:nowrap; flex:none;
}
.oa-wrap .badge::before{content:""; width:5px; height:5px; border-radius:50%; background:currentColor}
.oa-wrap .badge.confirm{background:var(--amber-soft); color:var(--amber)}
.oa-wrap .badge.hold{background:#fff7ed; color:#ea580c}
.oa-wrap .badge.prep{background:var(--blue-soft); color:var(--blue)}
.oa-wrap .badge.running{background:var(--teal-soft); color:var(--teal)}
.oa-wrap .badge.rej{background:var(--red-soft); color:var(--red)}
.oa-wrap .badge.acc{background:#d1fae5; color:#047857}
.oa-wrap .badge.sched{background:var(--violet-soft); color:var(--violet)}
.oa-wrap .badge.soc{background:#ecfeff; color:#0891b2}
.oa-wrap .badge.done{background:#d1fae5; color:#047857}
.oa-wrap .badge.none{background:var(--slate-soft); color:var(--slate)}
.oa-wrap .badge.pen{background:var(--slate-soft); color:var(--slate)}
.oa-wrap .warn-flag{color:var(--amber); cursor:help; font-size:11px}
.oa-wrap .dup-flag{
  font-size:9.5px; font-weight:800; color:var(--red); background:var(--red-soft);
  padding:1px 6px; border-radius:999px; white-space:nowrap; cursor:help; vertical-align:1px;
}
.oa-wrap .chev{color:#d1d5db; transition:transform .18s; flex:none; display:flex; align-items:center}
.oa-wrap .card.expanded .chev{transform:rotate(90deg); color:var(--accent)}

/* ---------- Detail ---------- */
.oa-wrap .detail{display:none; border-top:1px dashed var(--line); background:#fbfcfd; padding:13px 14px}
.oa-wrap .card.expanded .detail{display:block}
.oa-wrap .dl-list{display:flex; flex-direction:column}
.oa-wrap .dl-row{display:flex; gap:14px; padding:7px 2px; border-bottom:1px solid #f1f5f9}
.oa-wrap .dl-row:last-child{border-bottom:none}
.oa-wrap .dl-row .k{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:#9ca3af; flex:none; width:130px; padding-top:2px}
.oa-wrap .dl-row .v{font-size:12.5px; word-break:break-word}
.oa-wrap .dl-row .v a{color:var(--accent); font-weight:600; text-decoration:none}
.oa-wrap .dl-row .v a:hover{text-decoration:underline}

/* ---------- Table view ---------- */
.oa-wrap .tbl-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.oa-wrap .tbl-scroll{overflow-x:auto}
.oa-wrap table.view-table{width:100%; border-collapse:collapse; min-width:640px}
.oa-wrap .view-table thead th{
  text-align:left; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); background:#fafafa; padding:10px 14px; border-bottom:1px solid var(--line); white-space:nowrap;
}
.oa-wrap .view-table tbody td{padding:10px 14px; border-bottom:1px solid #f3f4f6; vertical-align:top}
.oa-wrap .view-table tbody tr:last-child td{border-bottom:none}
.oa-wrap .view-table tr.vrow{cursor:pointer}
.oa-wrap .view-table tr.vrow:hover{background:#fafafa}
.oa-wrap .v-id{font-weight:700; font-size:12.5px; color:var(--accent); white-space:nowrap; font-variant-numeric:tabular-nums}
.oa-wrap .v-name{font-weight:600; font-size:13.5px; max-width:280px}
.oa-wrap .v-pic{font-size:13px; white-space:nowrap}
.oa-wrap .v-dl{font-size:13px; white-space:nowrap; font-variant-numeric:tabular-nums}
.oa-wrap .vrow .chev{color:#d1d5db}
.oa-wrap .vrow.expanded .chev{transform:rotate(90deg); color:var(--accent)}
.oa-wrap .vdetail td{background:#fbfcfd; padding:13px 14px}
.oa-wrap .link{
  display:inline-flex; align-items:center; gap:5px; text-decoration:none; font-size:11.5px; font-weight:600;
  color:var(--accent); background:var(--accent-soft); padding:4px 9px; border-radius:7px; transition:.15s; white-space:nowrap;
}
.oa-wrap .link:hover{background:#dbe4ef}
.oa-wrap .link svg{width:10px; height:10px}

.oa-wrap .tl{margin-top:12px; border-top:1px dashed var(--line); padding-top:11px}
.oa-wrap .tl h4{font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:#9ca3af; margin-bottom:8px}
.oa-wrap .tl-item{position:relative; padding:0 0 10px 17px; border-left:2px solid var(--line); margin-left:4px}
.oa-wrap .tl-item:last-child{border-left-color:transparent; padding-bottom:0}
.oa-wrap .tl-item::before{
  content:""; position:absolute; left:-5px; top:2px; width:8px; height:8px; border-radius:50%;
  background:#fff; border:2px solid var(--muted);
}
.oa-wrap .tl-item.rej::before{border-color:var(--red)}
.oa-wrap .tl-item.acc::before{border-color:var(--accent)}
.oa-wrap .tl-item.pen::before{border-color:var(--amber)}
.oa-wrap .tl-time{font-size:10.5px; color:#9ca3af; font-weight:600}
.oa-wrap .tl-who{font-size:12px; font-weight:600}
.oa-wrap .tl-row{display:flex; align-items:center; gap:7px; margin-top:4px; flex-wrap:wrap}
.oa-wrap .tl-extra{font-size:11px; color:var(--muted)}

/* ---------- Pagination ---------- */
.oa-wrap .pager{display:flex; align-items:center; justify-content:center; gap:6px; margin-top:14px; flex-wrap:wrap}
.oa-wrap .pager button{
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  min-width:32px; height:32px; padding:0 10px; border-radius:9px; font-size:12.5px; font-weight:600;
  cursor:pointer; transition:.12s; font-family:inherit;
}
.oa-wrap .pager button:hover:not(:disabled){border-color:#d1d5db; background:#fafafa}
.oa-wrap .pager button:disabled{opacity:.4; cursor:default}
.oa-wrap .pager button.cur{background:var(--ink); border-color:var(--ink); color:#fff}
.oa-wrap .pager .pg-info{font-size:12px; color:var(--muted); margin:0 4px; white-space:nowrap}
.oa-wrap .pager svg{width:12px; height:12px; vertical-align:-1px}

.oa-wrap .empty{padding:44px 16px; text-align:center; color:var(--muted)}
.oa-wrap .empty .big{font-size:32px; margin-bottom:6px}
.oa-wrap .empty p{font-size:13px}
.oa-wrap .error-state{padding:44px 16px; text-align:center}
.oa-wrap .error-state .big{font-size:32px; margin-bottom:6px}
.oa-wrap .error-state p{color:var(--muted); margin-bottom:12px; font-size:13px}
.oa-wrap .footer{margin-top:14px; color:var(--muted); font-size:11.5px; text-align:center}
.oa-wrap .footer a{color:var(--muted)}

@media (max-width:560px){
  .oa-wrap{padding:16px 12px 40px}
  .oa-wrap .updated{display:none}
  .oa-wrap .header-actions{gap:6px}
  .oa-wrap .line1{flex-wrap:wrap}
  .oa-wrap .badge{margin-left:auto}
}