/* Custom styles untuk Kos & Indekos */

/* Status badges */
.badge { display:inline-flex; align-items:center; gap:.35rem; padding:.18rem .65rem; border-radius:.5rem; font-size:.72rem; font-weight:600; text-transform:capitalize; }
.badge-tersedia { background:#dcfce7; color:#166534; }
.badge-terisi   { background:#e2e8f0; color:#475569; }
.badge-pending  { background:#fef3c7; color:#854d0e; }
.badge-approved { background:#dbeafe; color:#1e40af; }
.badge-ongoing  { background:#dcfce7; color:#166534; }
.badge-rejected { background:#fee2e2; color:#991b1b; }
.badge-completed{ background:#e2e8f0; color:#475569; }
.badge-lunas    { background:#dcfce7; color:#166534; }
.badge-belum    { background:#fef3c7; color:#854d0e; }
.badge-verified { background:#dcfce7; color:#166534; }

/* Inputs */
.input { width:100%; padding:.625rem .85rem; border:1px solid #cbd5e1; border-radius:.625rem; font-size:.9rem; background:white; transition:border-color .15s, box-shadow .15s; }
.input:focus { outline:none; border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.15); }

/* Buttons — flat colors, no gradient */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; padding:.6rem 1.1rem; border-radius:.625rem; font-weight:600; font-size:.875rem; transition:background .15s, border-color .15s; cursor:pointer; border:1px solid transparent; }
.btn svg { width:1.05em; height:1.05em; }
.btn-primary { background:#2563eb; color:white; }          /* Blue 600 */
.btn-primary:hover { background:#1d4ed8; }                 /* Blue 700 */
.btn-secondary { background:white; color:#1e293b; border-color:#cbd5e1; }
.btn-secondary:hover { background:#f1f5f9; }
.btn-danger { background:#dc2626; color:white; }
.btn-danger:hover { background:#b91c1c; }
.btn-success { background:#16a34a; color:white; }
.btn-success:hover { background:#15803d; }
.btn-lg { padding:.85rem 1.5rem; font-size:1rem; }

/* CTA — primary action (Ajukan Sewa / Upload Bukti). Accent amber, flat. */
.btn-cta {
  background:#f59e0b;            /* Amber 500 */
  color:#1e293b;
  padding:.8rem 1.6rem;
  font-size:.95rem;
  font-weight:700;
}
.btn-cta:hover { background:#d97706; color:white; }   /* Amber 600 */

/* Cards */
.card { background:white; border:1px solid #e2e8f0; border-radius:1rem; overflow:hidden; transition:box-shadow .2s; }
.card:hover { box-shadow:0 4px 16px rgba(15,23,42,.06); }

/* Table */
.tbl { width:100%; border-collapse:collapse; }
.tbl thead th { text-align:left; font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:#64748b; padding:.7rem .9rem; border-bottom:1px solid #e2e8f0; background:#f8fafc; }
.tbl tbody td { padding:.85rem .9rem; border-bottom:1px solid #f1f5f9; font-size:.88rem; vertical-align:middle; }
.tbl tbody tr:hover { background:#f8fafc; }

/* Skeleton */
.skel { background:#e2e8f0; animation:pulse 1.4s ease-in-out infinite; border-radius:.5rem; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }

/* Image hover */
.img-hover { transition:transform .35s ease; }
.img-hover:hover { transform:scale(1.04); }

/* Print friendly */
@media print {
  nav, footer, .no-print { display:none !important; }
  body { background:white; }
}