/*
Palet corporate (estimasi dari logo)
*/
:root{
  --navy:#114B70;           /* biru logo */
  --navy-2:#0C3F61;         /* biru gelap */
  --gold:#C99A3A;           /* emas logo */
  --gold-2:#E2B96C;
  --ink:#1F2937;
  --muted:#5B6B7C;
  --glass:rgba(255,255,255,.60);
  --stroke:rgba(255,255,255,.38);
  --line:rgba(17,75,112,.15);
}

/* Keep the wrap for centering the content */
.wrap{max-width:1120px;margin:0 auto;padding:18px}

/* ===== Judul halaman + ornamen ===== */
.page-title{text-align:center;margin:12px 0 6px}
.page-title h2{margin:0;color:#fff;font-size:22px;letter-spacing:.2px}
.ornament{
  margin:8px auto 12px;width:240px;height:16px;opacity:.95;
  background-image:url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 32"><g fill="none" stroke="%23C99A3A" stroke-width="2"><path d="M12 16H200"/><path d="M280 16H468"/><path d="M240 6l9 10 9-10 9 10-9 10-9-10-9 10-9-10z" fill="%23C99A3A"/></g></svg>');
  background-repeat:no-repeat;background-size:contain;background-position:center;
}
.sub{color:#D7E6F1;text-align:center;margin:0 0 12px}

/* ===== Kartu / Form ===== */
.card{
  background:var(--glass); border:1px solid var(--stroke); border-radius:18px;
  box-shadow:0 18px 40px rgba(0,0,0,.18); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
form.card{padding:18px}

/* Fieldset dengan legend “chip” presisi */
form.card fieldset{
  position:relative;
  border:1px solid var(--line);
  border-radius:14px;
  padding:20px 14px 14px;   /* ruang untuk chip legend */
  margin:16px 0;
  background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.72));
}
form.card fieldset > legend{
  position:absolute; top:-12px; left:16px; margin:0; line-height:1;
  padding:6px 10px; font-weight:700; letter-spacing:.2px; color:var(--navy);
  background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:10px;
  box-shadow:0 6px 14px rgba(0,0,0,.06);
}
label{display:block;margin-bottom:12px}
label span{display:block;font-size:14px;color:#1f2b38;margin-bottom:6px}
input,select,textarea{
  width:100%; border:1px solid rgba(17,75,112,.28); border-radius:12px; padding:10px 12px; font-size:15px; background:#fff; box-sizing:border-box;
}
input[readonly]{background:#F6F9FB}
textarea{min-height:80px}
.row{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:880px){.row-2{grid-template-columns:1fr 1fr}.row-3{grid-template-columns:1fr 1fr 1fr}}

.actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{
  background:linear-gradient(180deg,#1E6D9D,#155377); color:#fff; border:none; border-radius:12px; padding:12px 16px; cursor:pointer; font-size:15px;
  box-shadow:0 6px 16px rgba(13,71,110,.25);
  text-decoration: none;
}
.btn:hover{filter:brightness(.98)}
.btn.outline{background:transparent;color:#0f4163;border:1px solid rgba(15,65,99,.35)}
.btn.small{padding: 4px 8px; font-size: 12px;}

.panel-actions{display:flex;gap:10px;justify-content:flex-end;margin:12px 0 8px}

.tableWrap.card{padding:14px;overflow:auto}
table{width:100%;border-collapse:collapse;font-size:13px;background:#fff;border-radius:12px;overflow:hidden}
th,td{padding:10px;border-top:1px solid #eef2ff;text-align:left;white-space:nowrap}
thead th{background:#F6FAFF;color:#0f4163;font-weight:700}
.hint{font-size:12px;color:#123a56;opacity:.85}

/* ===== Modal Konfirmasi ===== */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(17, 75, 112, 0.6);z-index:1000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);}
.modal-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;padding:24px;border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.2);width:90%;max-width:600px;}
.modal-review-data{max-height:40vh;overflow-y:auto;background:rgba(0,0,0,.03);border-radius:12px;padding:12px;margin:16px 0;font-size:14px;}
.modal-review-data div{padding:4px 0;border-bottom:1px solid rgba(0,0,0,.07);}
.modal-review-data div:last-child{border:none;}
.modal-review-data strong{color:var(--navy);}

#auth-error{text-align:center; color: #ffcdd2; padding: 20px;}

@media(max-width:480px){
  form.card fieldset{padding:22px 12px 12px}
  form.card fieldset>legend{left:12px}
}