/* app.css — komponen di atas Tailwind CDN. Proporsional untuk HP / tablet / desktop. */
*{-webkit-tap-highlight-color:transparent}

/* ---------- Tombol ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.55rem 1rem;min-height:42px;border-radius:.6rem;font-size:.9rem;font-weight:600;line-height:1;
  cursor:pointer;border:1px solid transparent;text-decoration:none;white-space:nowrap;
  transition:background .12s,border-color .12s,box-shadow .12s,transform .05s}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn svg{flex:none}
.btn-primary{background:#1d4ed8;color:#fff}
.btn-primary:hover{background:#1e40af}
.btn-ghost{background:#fff;border-color:#cbd5e1;color:#334155}
.btn-ghost:hover{background:#f1f5f9}
.btn-danger{background:#fff;border-color:#fecaca;color:#dc2626}
.btn-danger:hover{background:#fef2f2}
/* tombol kecil opsional */
.btn-sm{min-height:34px;padding:.35rem .7rem;font-size:.82rem;border-radius:.5rem}

/* ---------- Kartu ---------- */
.card{background:#fff;border:1px solid #eef1f6;border-radius:1rem;padding:1.1rem;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 6px 20px rgba(16,24,40,.04)}
@media(min-width:768px){.card{padding:1.35rem}}

/* ---------- Form ---------- */
.label{display:block;font-size:.8rem;font-weight:600;color:#475569;margin-bottom:.3rem}
.input,.select,.textarea{width:100%;padding:.6rem .75rem;min-height:42px;border:1px solid #cbd5e1;
  border-radius:.6rem;font-size:16px;line-height:1.35;background:#fff;color:#0f172a;
  -webkit-appearance:none;appearance:none;transition:border-color .12s,box-shadow .12s}
/* Desktop: font sedikit lebih kecil & padat */
@media(min-width:768px){.input,.select,.textarea{font-size:.9rem;min-height:40px}}
.textarea{min-height:70px;line-height:1.55;padding-top:.55rem}
.input::placeholder,.textarea::placeholder{color:#9aa7b8}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:#60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,.25)}
.input:disabled,.select:disabled{background:#f8fafc;color:#64748b}
/* Select: panah konsisten */
.select{padding-right:2.1rem;background-repeat:no-repeat;background-position:right .65rem center;background-size:1.05em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")}
/* Date: sejajar kiri (iOS) & ikon tetap tampil */
input[type=date],input[type=month],input[type=datetime-local]{min-height:42px}
@media(min-width:768px){input[type=date],input[type=month],input[type=datetime-local]{min-height:40px}}
input[type=date]::-webkit-date-and-time-value,input[type=month]::-webkit-date-and-time-value{text-align:left;margin:0}
input[type=date]::-webkit-calendar-picker-indicator,input[type=month]::-webkit-calendar-picker-indicator{opacity:.6}

/* ---------- Tabel ---------- */
.table{width:100%;border-collapse:collapse}
.table th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;color:#94a3b8;
  padding:.7rem .75rem;border-bottom:1px solid #eef1f6;white-space:nowrap;font-weight:600}
.table td{padding:.85rem .75rem;border-bottom:1px solid #f4f6fa;font-size:.9rem;vertical-align:middle;color:#334155}
.table tr:last-child td{border-bottom:0}

/* ---------- Lain ---------- */
.badge{display:inline-block;padding:.32rem .75rem;border-radius:.55rem;font-size:.72rem;font-weight:600;line-height:1.35;white-space:nowrap;border:1px solid transparent}
input[type=range]{accent-color:#2563eb;width:100%;height:6px}