/* ===== BASE ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:Arial,sans-serif;background:#f6f7fb;margin:0;color:#222}
.container{max-width:980px;margin:30px auto;padding:0 14px}
.card{background:#fff;padding:18px;border-radius:12px;box-shadow:0 8px 22px rgba(0,0,0,.06);margin-bottom:14px}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:10px;flex-wrap:wrap}
label{display:block;margin-top:10px;font-weight:600}
input,select,textarea{width:100%;padding:10px;margin-top:6px;border:1px solid #ddd;border-radius:10px;background:#fff}
textarea{min-height:90px;resize:vertical}
button{margin-top:12px;padding:10px 14px;border:0;border-radius:10px;cursor:pointer;background:#e9eefc}
button:hover{filter:brightness(.98)}
button.danger{background:#ffdddd}
a.btn,.btn-link{display:inline-block;margin:6px 6px 0 0;text-decoration:none;color:inherit}
a.btn{padding:10px 14px;background:#eef2ff;border-radius:10px}
a.btn:hover{filter:brightness(.98)}
.alert{background:#ffe5e5;padding:10px;border-radius:10px}
.success{background:#e7ffe7;padding:10px;border-radius:10px}

/* ===== TABLE (RESPONSIVE) ===== */
table{width:100%;border-collapse:collapse;margin-top:10px;min-width:720px}
th,td{padding:10px;border-bottom:1px solid #eee;vertical-align:top;text-align:left}
th{font-weight:700;white-space:nowrap}
.table-wrap{width:100%;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:10px}
.table-wrap table{min-width:720px}

/* ===== INLINE FORM ===== */
.inline{display:inline-flex;gap:8px;align-items:center;margin-right:10px;flex-wrap:wrap}
.inline input,.inline select{width:auto;min-width:180px}
.inline button{margin-top:0}

/* ===== BADGE ===== */
.badge{padding:4px 10px;border-radius:999px;font-size:12px;background:#eee;display:inline-block;white-space:nowrap}
.badge-menunggu{background:#fff3cd}
.badge-disetujui{background:#d1e7dd}
.badge-ditolak{background:#f8d7da}
.badge-dibatalkan{background:#e2e3e5}

/* ===== SMALL IMPROVEMENTS ===== */
h1,h2,h3{margin:0 0 10px 0}
p{margin:8px 0}
hr{border:0;border-top:1px solid #eee;margin:14px 0}

/* ===== MOBILE BREAKPOINTS ===== */
@media (max-width: 720px){
  .container{margin:18px auto}
  .card{padding:14px}
  .topbar{align-items:flex-start}
  a.btn{width:100%;text-align:center}
  .inline{display:flex;width:100%}
  .inline > *{flex:1 1 100%}
  .inline input,.inline select{width:100%;min-width:0}
  .inline button{width:100%}
  /* kalau ada tabel tanpa wrapper, tetap bisa scroll */
  table{display:block;overflow:auto;-webkit-overflow-scrolling:touch}
}

/* ===== VERY SMALL ===== */
@media (max-width: 380px){
  body{font-size:14px}
  input,select,textarea{padding:9px}
  button,a.btn{padding:10px 12px}
}