/* =====================================================
   PPA Meeting Monitoring System — stylesheet
   ===================================================== */
:root{
  --red:#c8102e; --red-dark:#9c0c24; --ink:#111827; --ink-2:#374151;
  --muted:#6b7280; --line:#e5e7eb; --bg:#f4f6f9; --card:#ffffff;
  --ok:#15803d; --ok-bg:#dcfce7; --warn:#b45309; --warn-bg:#fef3c7;
  --info:#1d4ed8; --info-bg:#dbeafe; --danger:#b91c1c; --danger-bg:#fee2e2;
  --radius:10px; --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--ink); font-size:14px; line-height:1.5;
  display:flex; flex-direction:column; min-height:100vh;
}
a{color:var(--red); text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- Topbar ---------- */
.topbar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.topbar-inner{max-width:1500px;margin:0 auto;padding:10px 18px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand-mark{background:var(--red);color:#fff;font-weight:800;letter-spacing:.5px;
  padding:8px 10px;border-radius:8px;font-size:13px}
.brand-text strong{display:block;font-size:14px;line-height:1.2}
.brand-text small{color:var(--muted);font-size:11px}
.mainnav{display:flex;gap:4px;margin-left:12px;flex:1}
.mainnav a{padding:8px 14px;border-radius:8px;color:var(--ink-2);font-weight:600;font-size:13px}
.mainnav a:hover{background:#f3f4f6;text-decoration:none}
.mainnav a.active{background:var(--red);color:#fff}
.userbox{display:flex;align-items:center;gap:10px;margin-left:auto}
.uname{font-size:12px;text-align:right;line-height:1.2}
.uname small{display:block;color:var(--muted);font-size:10px;letter-spacing:.5px}
.hamburger{display:none;background:none;border:1px solid var(--line);border-radius:8px;
  font-size:18px;padding:4px 10px;cursor:pointer}

/* ---------- Layout ---------- */
.container{max-width:1500px;width:100%;margin:0 auto;padding:20px 18px 40px;flex:1}
.footer{max-width:1500px;width:100%;margin:0 auto;padding:14px 18px;display:flex;
  justify-content:space-between;color:var(--muted);font-size:12px;border-top:1px solid var(--line)}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:16px}
.page-head h1{font-size:20px;margin:0 0 2px}
.page-head p{margin:0;color:var(--muted);font-size:13px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- Card ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);margin-bottom:18px}
.card-head{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;
  justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.card-head h2{font-size:14px;margin:0;font-weight:700}
.card-head .sub{color:var(--muted);font-size:12px;font-weight:400}
.card-body{padding:16px}
.card-body.tight{padding:0}

/* ---------- Stat ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:14px;margin-bottom:18px}
.stat{background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);
  border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
.stat .label{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.6px}
.stat .value{font-size:26px;font-weight:700;line-height:1.2;margin-top:4px}
.stat .hint{font-size:11px;color:var(--muted)}
.stat.ok{border-left-color:var(--ok)} .stat.warn{border-left-color:var(--warn)}
.stat.info{border-left-color:var(--info)} .stat.danger{border-left-color:var(--danger)}

/* ---------- Tabel ---------- */
.table-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:13px;background:#fff}
table.tbl th,table.tbl td{border-bottom:1px solid var(--line);padding:9px 12px;
  text-align:left;vertical-align:top}
table.tbl thead th{background:#f9fafb;font-size:11px;text-transform:uppercase;
  letter-spacing:.5px;color:var(--muted);white-space:nowrap;position:sticky;top:0;z-index:2}
table.tbl tbody tr:hover{background:#fbfbfc}
table.tbl td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
table.tbl td.nowrap,table.tbl th.nowrap{white-space:nowrap}
tr.grup-row td{background:#eef2f7;font-weight:700;font-size:12px;text-transform:uppercase;
  letter-spacing:.4px;color:var(--ink-2)}
.cell-sm{font-size:12px;color:var(--ink-2)}
table.tbl select{min-width:104px}
.empty{padding:36px 16px;text-align:center;color:var(--muted)}

/* ---------- Badge ---------- */
.badge{display:inline-block;padding:2px 9px;border-radius:99px;font-size:11px;
  font-weight:700;white-space:nowrap;letter-spacing:.2px}
.badge-open{background:var(--danger-bg);color:var(--danger)}
.badge-progress{background:var(--warn-bg);color:var(--warn)}
.badge-continue{background:var(--info-bg);color:var(--info)}
.badge-close,.badge-closed{background:var(--ok-bg);color:var(--ok)}
.badge-hold{background:#ede9fe;color:#6d28d9}
.badge-late{background:var(--danger-bg);color:var(--danger)}
.badge-soon{background:var(--warn-bg);color:var(--warn)}
.badge-gray{background:#f3f4f6;color:var(--muted)}

/* ---------- Progress bar ---------- */
.pbar{background:#eef0f3;border-radius:99px;height:7px;min-width:70px;overflow:hidden}
.pbar span{display:block;height:100%;background:var(--red);border-radius:99px}
.pbar.ok span{background:var(--ok)}
.pcell{display:flex;align-items:center;gap:8px}
.pcell b{font-size:12px;font-variant-numeric:tabular-nums}

/* ---------- Form ---------- */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.field{display:flex;flex-direction:column;gap:5px}
.field.full{grid-column:1/-1}
label{font-size:12px;font-weight:600;color:var(--ink-2)}
input[type=text],input[type=date],input[type=number],input[type=password],
input[type=search],select,textarea{
  width:100%;padding:8px 10px;border:1px solid #d1d5db;border-radius:8px;
  font:inherit;font-size:13px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(200,16,46,.25);border-color:var(--red)}
textarea{min-height:80px;resize:vertical}
.help{font-size:11px;color:var(--muted)}
.form-actions{display:flex;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}

/* ---------- Button ---------- */
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid transparent;
  border-radius:8px;padding:8px 14px;font:inherit;font-size:13px;font-weight:600;
  cursor:pointer;background:var(--red);color:#fff;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--red-dark);text-decoration:none;color:#fff}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink-2)}
.btn-ghost:hover{background:#f3f4f6;color:var(--ink)}
.btn-danger{background:var(--danger)} .btn-danger:hover{background:#991b1b}
.btn-ok{background:var(--ok)} .btn-ok:hover{background:#166534}

/* ---------- Filter bar ---------- */
.filter{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.filter .field{min-width:140px}

/* ---------- Alert ---------- */
.alert{padding:11px 14px;border-radius:var(--radius);margin-bottom:16px;font-size:13px;font-weight:500}
.alert-ok{background:var(--ok-bg);color:var(--ok)}
.alert-err{background:var(--danger-bg);color:var(--danger)}
.alert-info{background:var(--info-bg);color:var(--info)}

/* ---------- Login ---------- */
.login-wrap{max-width:390px;margin:8vh auto;padding:0 16px}
.login-card{background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 10px 30px rgba(16,24,40,.08);padding:28px}
.login-logo{width:56px;height:56px;background:var(--red);color:#fff;border-radius:14px;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;margin-bottom:14px}

/* ---------- Grid dashboard ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid-3{display:grid;grid-template-columns:2fr 1fr;gap:18px}
canvas{max-width:100%}

/* ---------- Tabel S-curve ---------- */
.scurve-tbl{font-size:11px}
.scurve-tbl th,.scurve-tbl td{padding:5px 6px;white-space:nowrap}
.scurve-tbl td.num{font-size:11px}
.dev-plus{color:var(--ok);font-weight:700}
.dev-min{color:var(--danger);font-weight:700}

/* ---------- Alur tahapan (flow) ---------- */
.flow{display:flex;align-items:stretch;gap:6px;flex-wrap:wrap}
.flow-step{display:flex;gap:9px;align-items:center;background:#f9fafb;border:1px solid var(--line);
  border-radius:9px;padding:9px 12px;flex:1 1 150px;min-width:150px}
.flow-step b{display:block;font-size:12.5px;line-height:1.25}
.flow-step small{color:var(--muted);font-size:10.5px;display:block;line-height:1.3;margin-top:1px}
.flow-no{flex:0 0 24px;height:24px;border-radius:50%;background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px}
.flow-final{background:#ecfdf5;border-color:#a7f3d0}
.flow-final .flow-no{background:var(--ok)}
.flow-arrow{align-self:center;color:#cbd5e1;font-size:16px}
.flow-arrow:last-of-type{display:none}

/* ---------- Stepper progres ---------- */
.stepper{display:flex;align-items:flex-start;overflow-x:auto;padding:4px 0 2px;gap:0}
.step{flex:1 1 0;min-width:92px;text-align:center;position:relative}
.step::before{content:"";position:absolute;top:14px;left:-50%;width:100%;height:2px;background:#e5e7eb}
.step:first-child::before{display:none}
.step-dot{width:30px;height:30px;border-radius:50%;background:#fff;border:2px solid #e5e7eb;
  color:var(--muted);display:flex;align-items:center;justify-content:center;font-weight:800;
  font-size:12px;margin:0 auto 6px;position:relative;z-index:1}
.step-label{font-size:11px;color:var(--muted);line-height:1.3;padding:0 4px}
.step.done .step-dot{background:var(--ok);border-color:var(--ok);color:#fff}
.step.done .step-label{color:var(--ok);font-weight:700}
.step.done::before{background:var(--ok)}
.step.doing .step-dot{background:#fff;border-color:var(--warn);color:var(--warn)}
.step.doing .step-label{color:var(--warn);font-weight:700}
.step.skip .step-dot{background:#f3f4f6;border-style:dashed}

a.stat{text-decoration:none;color:inherit;display:block;transition:box-shadow .15s}
a.stat:hover{text-decoration:none;box-shadow:0 3px 10px rgba(16,24,40,.12)}

@media(max-width:1000px){
  .grid-2,.grid-3{grid-template-columns:1fr}
}
@media(max-width:820px){
  .hamburger{display:block}
  .mainnav{display:none;position:absolute;top:60px;left:0;right:0;background:#fff;
    flex-direction:column;padding:10px;border-bottom:1px solid var(--line);margin:0;
    box-shadow:0 8px 20px rgba(16,24,40,.1)}
  .mainnav.open{display:flex}
  .brand-text small{display:none}
  .topbar-inner{padding:10px 14px}
}
@media print{
  .topbar,.footer,.toolbar,.filter,.btn{display:none!important}
  body{background:#fff}
  .card{box-shadow:none;border-color:#ccc}
}