/* ===== Portal Vendor Siyar — gaya ===== */
:root{
  --bg:#faf3e9; --card:#fffdfa; --line:#eadfcf; --txt:#38281c; --muted:#7a6857;
  --brand:#a85b36; --brand-soft:#fbede3; --brand-dark:#8c4626;
  --green:#4e7a4a; --green-soft:#eef5ea; --amber:#9a6519; --amber-soft:#fbf1de;
  --red:#b23a2e; --red-soft:#fbeae7;
  --shadow:0 1px 3px rgba(56,40,28,.07), 0 8px 24px rgba(56,40,28,.05);
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  background:var(--bg); color:var(--txt); min-height:100vh;
  display:flex; flex-direction:column; font-size:15px; line-height:1.5;
}
a{color:var(--brand); text-decoration:none}
.wrap{width:100%; max-width:1120px; margin:0 auto; padding:0 20px}
.main{flex:1; padding-top:26px; padding-bottom:56px}

/* ---------- topbar ---------- */
.topbar{background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30}
.topbar-in{display:flex; align-items:center; justify-content:space-between; gap:16px; height:70px}
.brand{display:flex; align-items:center; gap:12px; color:inherit}
.brand img{height:38px; width:auto; display:block}
.brand span{display:flex; flex-direction:column; line-height:1.15}
.brand b{font-size:16px; letter-spacing:.2px}
.brand i{font-size:11px; color:var(--muted); font-style:normal}
.who{display:flex; align-items:center; gap:14px}
.who-nm{text-align:right; line-height:1.2}
.who-nm b{display:block; font-size:13.5px}
.who-nm i{font-size:11px; color:var(--muted); font-style:normal}

/* ---------- tombol ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  padding:10px 16px; border-radius:10px; border:1px solid transparent;
  background:var(--brand); color:#fff; font-size:13.5px; font-weight:600;
  cursor:pointer; font-family:inherit; transition:.15s; white-space:nowrap;
}
.btn:hover{background:var(--brand-dark)}
.btn-sm{padding:7px 12px; font-size:12.5px; border-radius:9px}
.btn-ghost{background:transparent; color:var(--brand); border-color:var(--line)}
.btn-ghost:hover{background:var(--brand-soft); color:var(--brand-dark)}
.btn-soft{background:var(--brand-soft); color:var(--brand-dark); border-color:#f2ddcd}
.btn-soft:hover{background:#f6e0d0}
.btn[disabled]{opacity:.45; cursor:not-allowed}

/* ---------- kartu ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.card-pad{padding:20px 22px}
.page-title{font-size:23px; font-weight:800; letter-spacing:-.2px; margin-bottom:4px}
.page-sub{color:var(--muted); font-size:13.5px; margin-bottom:22px}

/* ---------- login ---------- */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  background:radial-gradient(1200px 600px at 15% -10%, #fbede3 0%, transparent 60%),
             radial-gradient(900px 500px at 110% 110%, #eef5ea 0%, transparent 55%), var(--bg)}
.login-card{width:100%; max-width:410px; background:var(--card); border:1px solid var(--line);
  border-radius:18px; box-shadow:var(--shadow); padding:34px 32px 28px; text-align:center}
.login-card img{height:52px; margin-bottom:16px}
.login-card h1{font-size:19px; font-weight:800; margin-bottom:6px}
.login-card p.lead{font-size:13px; color:var(--muted); margin-bottom:24px}
.field{text-align:left; margin-bottom:14px}
.field label{display:block; font-size:12.5px; font-weight:700; margin-bottom:6px; color:#5c4a3a}
.field input{width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:10px;
  font-size:14.5px; font-family:inherit; background:#fff; color:var(--txt)}
.field input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(168,91,54,.12)}
.login-card .btn{width:100%; margin-top:8px; padding:12px}
.alert{padding:11px 14px; border-radius:10px; font-size:13px; margin-bottom:16px; text-align:left}
.alert-err{background:var(--red-soft); color:var(--red); border:1px solid #f3d3ce}
.alert-ok{background:var(--green-soft); color:var(--green); border:1px solid #d5e6cf}
.login-foot{margin-top:22px; font-size:11.5px; color:var(--muted); line-height:1.6}

/* ---------- daftar trip ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px}
.trip-card{padding:20px; display:flex; flex-direction:column; gap:14px; transition:.16s; border:1px solid var(--line)}
.trip-card:hover{border-color:#dcc7b1; box-shadow:0 6px 22px rgba(56,40,28,.09); transform:translateY(-1px)}
.trip-card h3{font-size:16.5px; font-weight:800; line-height:1.3}
.trip-meta{display:flex; flex-wrap:wrap; gap:8px}
.chip{font-size:11.5px; padding:4px 10px; border-radius:99px; background:#f6ecdf; color:#6d5a48; font-weight:600}
.chip-brand{background:var(--brand-soft); color:var(--brand-dark)}
.chip-green{background:var(--green-soft); color:var(--green)}
.trip-rows{font-size:12.8px; color:var(--muted); display:grid; gap:6px}
.trip-rows div{display:flex; gap:8px}
.trip-rows b{color:var(--txt); font-weight:600; min-width:74px}

/* ---------- header trip ---------- */
.trip-head{padding:22px; margin-bottom:18px}
.trip-head .back{font-size:12.5px; color:var(--muted); display:inline-block; margin-bottom:10px}
.trip-head h1{font-size:22px; font-weight:800; letter-spacing:-.2px; margin-bottom:10px}
.trip-head .chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px}
.kv{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px 22px; padding-top:14px; border-top:1px solid var(--line)}
.kv div{font-size:12.5px; color:var(--muted)}
.kv b{display:block; font-size:14px; color:var(--txt); font-weight:700; margin-top:2px}

/* ---------- tab ---------- */
.tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px}
.tab{padding:9px 16px; border-radius:99px; background:var(--card); border:1px solid var(--line);
  font-size:13px; font-weight:600; color:#6d5a48}
.tab:hover{background:var(--brand-soft); color:var(--brand-dark)}
.tab.on{background:var(--brand); border-color:var(--brand); color:#fff}

/* ---------- tabel ---------- */
.tbl-wrap{overflow-x:auto; border-radius:var(--r); border:1px solid var(--line); background:var(--card); box-shadow:var(--shadow)}
table{width:100%; border-collapse:collapse; font-size:13.5px}
thead th{background:#f7efe3; text-align:left; font-size:11.5px; letter-spacing:.5px; text-transform:uppercase;
  color:#7a6857; font-weight:800; padding:12px 14px; border-bottom:1px solid var(--line); white-space:nowrap}
tbody td{padding:11px 14px; border-bottom:1px solid #f3eade; vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:#fdf8f1}
td.num,th.num{text-align:center; width:52px; color:var(--muted)}
td.nm{font-weight:600}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; letter-spacing:.3px}
.tag{display:inline-block; font-size:11px; font-weight:700; padding:3px 9px; border-radius:99px}
.tag-l{background:#e8f0fb; color:#2f5fa8}
.tag-p{background:#fdeaf1; color:#a83a63}
.tag-muted{background:#f2ece2; color:#8a7663}
.tag-infant{background:var(--amber-soft); color:var(--amber)}
.tag-anak{background:var(--green-soft); color:var(--green)}
.empty{padding:44px 20px; text-align:center; color:var(--muted); font-size:14px}

/* ---------- kartu kamar ---------- */
.rooms{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px}
.room{padding:16px; border:1px solid var(--line); border-radius:var(--r); background:var(--card)}
.room-hd{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.room-hd b{font-size:14px}
.room-hd span{font-size:11px; color:var(--muted)}
.room ul{list-style:none; display:grid; gap:6px}
.room li{font-size:13px; display:flex; gap:7px; align-items:baseline}
.room li i{font-style:normal; font-size:11px; color:var(--muted); min-width:14px}
.room .muth{font-size:11px; color:var(--amber); font-weight:700}

/* ---------- unduhan ---------- */
.dl{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px}
.dl-item{padding:18px; border:1px solid var(--line); border-radius:var(--r); background:var(--card);
  display:flex; flex-direction:column; gap:10px}
.dl-item h4{font-size:14px; font-weight:800}
.dl-item p{font-size:12.5px; color:var(--muted); flex:1}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line); background:var(--card); padding:16px 0; font-size:11.5px; color:var(--muted)}
.foot .wrap{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}

@media (max-width:640px){
  .topbar-in{height:auto; padding:12px 0; flex-wrap:wrap}
  .who-nm{display:none}
  .page-title{font-size:20px}
  .trip-head h1{font-size:19px}
  tbody td,thead th{padding:9px 10px}
}

/* ---------- foto jamaah (tab Profiling) ---------- */
.foto{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:10px; object-fit:cover;
  border:1px solid var(--line); background:#f6ecdf;
  font-size:13px; font-weight:800; color:#8a7663; letter-spacing:.5px;
  vertical-align:middle;
}
a:hover > .foto{border-color:var(--brand)}
.foto-pdf{background:var(--brand-soft); color:var(--brand-dark); font-size:11.5px}
.foto-kosong{background:#f2ece2; color:#a99884}

/* ---------- popup foto ---------- */
.foto-link{display:inline-block; line-height:0}
.modal{position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:20px}
.modal[hidden]{display:none}
.modal-bg{position:absolute; inset:0; background:rgba(28,20,14,.72); backdrop-filter:blur(2px)}
.modal-box{position:relative; background:var(--card); border-radius:16px; box-shadow:0 18px 60px rgba(0,0,0,.35);
  width:min(560px,100%); max-height:92vh; display:flex; flex-direction:column; overflow:hidden}
.modal-hd{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; border-bottom:1px solid var(--line)}
.modal-hd b{font-size:14.5px}
.modal-x{border:none; background:transparent; font-size:26px; line-height:1; color:var(--muted);
  cursor:pointer; padding:0 4px; font-family:inherit}
.modal-x:hover{color:var(--txt)}
.modal-img{flex:1; overflow:auto; background:#f4ece1; display:flex; align-items:center; justify-content:center; padding:12px}
.modal-img img{max-width:100%; max-height:70vh; border-radius:10px; display:block; object-fit:contain}
.modal-ft{padding:12px 18px; border-top:1px solid var(--line); text-align:right}
@media (max-width:640px){
  .modal-box{width:100%; max-height:94vh}
  .modal-img img{max-height:64vh}
}

/* ---------- baris judul kelompok keluarga ---------- */
tbody tr.grp td{
  background:#efe1cf;
  border-top:1px solid #e0cdb6;
  border-bottom:1px solid #e0cdb6;
  padding:9px 14px 9px 11px;
  box-shadow:inset 4px 0 0 var(--brand);
}
tbody tr.grp:first-child td{border-top:none}
tbody tr.grp b{font-size:13.5px; color:var(--brand-dark); letter-spacing:.1px}
tbody tr.grp .grp-isi{font-size:12px; color:#7d6a57; font-weight:600; margin-left:2px}
tbody tr.grp .grp-note{
  float:right; font-size:11.5px; font-weight:700; color:#5c4a3a;
  background:#fff; border:1px solid #e0cdb6;
  padding:2px 9px; border-radius:99px;
}
tbody tr:hover:not(.grp){background:#fdf8f1}
/* ---------- nomor telepon petugas ---------- */
.kv .telp{
  display:inline-flex; align-items:center; gap:6px; margin-top:6px;
  font-size:12.5px; font-weight:700; color:var(--brand-dark);
  background:var(--brand-soft); border:1px solid #f0d8c6;
  padding:3px 10px; border-radius:99px; text-decoration:none; white-space:nowrap;
}
.kv .telp:hover{background:#f7e0cf; border-color:#e6c3ab}
.kv .telp-ico{font-size:12px; line-height:1}
/* ---------- card catatan dari tim Siyar ---------- */
.card.catatan-vendor{
  margin-bottom:16px; padding:16px 18px;
  background:linear-gradient(180deg,#fff8ef 0%,#fffdfa 100%);
  border:1px solid #efdcc6; border-left:4px solid var(--brand);
}
.cv-hd{display:flex; align-items:center; gap:9px; margin-bottom:10px; flex-wrap:wrap}
.cv-hd b{font-size:14px; color:var(--brand-dark)}
.cv-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:8px; background:var(--brand-soft);
  color:var(--brand-dark); font-size:13px; line-height:1;
}
.cv-tgl{margin-left:auto; font-size:11.5px; color:var(--muted); font-weight:600}
.cv-list{margin:0; padding-left:20px; display:grid; gap:6px}
.cv-list li{font-size:13.5px; line-height:1.65; color:var(--txt)}
.cv-list li::marker{color:var(--brand)}