/* ============================================
   Aplikasi IPL - Komplek BPK 3 Kebon Jeruk
   Stylesheet v2.0
   ============================================ */
:root {
  --primary:#2563eb; --primary-dark:#1d4ed8;
  --success:#16a34a; --danger:#dc2626; --warning:#d97706; --info:#0891b2;
  --gray-50:#f9fafb; --gray-100:#f3f4f6; --gray-200:#e5e7eb;
  --gray-400:#9ca3af; --gray-600:#4b5563; --gray-700:#374151; --gray-900:#111827;
  --radius:10px; --shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);
  --shadow-md:0 4px 6px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.05);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--gray-100);color:var(--gray-900);font-size:15px;line-height:1.6}
a{color:var(--primary);text-decoration:none} a:hover{text-decoration:underline}

/* NAVBAR */
.navbar{background:var(--primary);color:white;padding:0 1.25rem;display:flex;align-items:center;justify-content:space-between;height:56px;position:sticky;top:0;z-index:100;box-shadow:var(--shadow-md)}
.navbar-brand{font-size:1rem;font-weight:700;color:white;letter-spacing:-.3px;line-height:1.2}
.navbar-brand small{display:block;font-size:.7rem;font-weight:400;opacity:.75;letter-spacing:0}
.navbar-nav{display:flex;align-items:center;gap:.2rem}
.navbar-nav a{color:rgba(255,255,255,.85);padding:.4rem .7rem;border-radius:6px;font-size:.82rem;transition:background .15s}
.navbar-nav a:hover,.navbar-nav a.active{background:rgba(255,255,255,.2);color:white;text-decoration:none}

/* LAYOUT */
.container{max-width:980px;margin:0 auto;padding:1.25rem 1rem}
.page-title{font-size:1.25rem;font-weight:700;margin-bottom:1.25rem}

/* CARDS */
.card{background:white;border-radius:var(--radius);box-shadow:var(--shadow);padding:1.25rem;margin-bottom:1rem}
.card-header{font-weight:600;font-size:.95rem;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid var(--gray-200);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem}

/* STATS */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.85rem;margin-bottom:1.25rem}
.stat-card{background:white;border-radius:var(--radius);box-shadow:var(--shadow);padding:.9rem 1.1rem;border-left:4px solid var(--primary)}
.stat-card.green{border-color:var(--success)} .stat-card.red{border-color:var(--danger)} .stat-card.orange{border-color:var(--warning)} .stat-card.blue{border-color:var(--info)}
.stat-label{font-size:.75rem;color:var(--gray-600);margin-bottom:.2rem;text-transform:uppercase;letter-spacing:.04em}
.stat-value{font-size:1.6rem;font-weight:700;line-height:1}
.stat-card.green .stat-value{color:var(--success)} .stat-card.red .stat-value{color:var(--danger)} .stat-card.orange .stat-value{color:var(--warning)} .stat-card.blue .stat-value{color:var(--info)}

/* BADGES */
.badge{display:inline-flex;align-items:center;padding:.18rem .5rem;border-radius:20px;font-size:.75rem;font-weight:600;white-space:nowrap}
.badge-success{background:#dcfce7;color:#166534} .badge-danger{background:#fee2e2;color:#991b1b}
.badge-warning{background:#fef3c7;color:#92400e} .badge-gray{background:var(--gray-100);color:var(--gray-600)}
.badge-info{background:#cffafe;color:#155e75}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .9rem;border-radius:7px;font-size:.85rem;font-weight:500;cursor:pointer;border:none;transition:filter .15s,transform .1s;text-decoration:none;white-space:nowrap}
.btn:hover{filter:brightness(.93);text-decoration:none} .btn:active{transform:scale(.98)}
.btn-primary{background:var(--primary);color:white} .btn-success{background:var(--success);color:white}
.btn-danger{background:var(--danger);color:white} .btn-outline{background:white;color:var(--gray-700);border:1px solid var(--gray-200)}
.btn-sm{padding:.28rem .6rem;font-size:.78rem} .btn-block{width:100%;justify-content:center}

/* FORMS */
.form-group{margin-bottom:.9rem}
.form-label{display:block;font-size:.85rem;font-weight:500;margin-bottom:.3rem;color:var(--gray-700)}
.form-control{display:block;width:100%;padding:.5rem .75rem;border:1.5px solid var(--gray-200);border-radius:7px;font-size:.88rem;background:white;color:var(--gray-900);outline:none;transition:border-color .15s,box-shadow .15s}
.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-hint{font-size:.75rem;color:var(--gray-400);margin-top:.2rem}

/* ALERTS */
.alert{padding:.75rem 1rem;border-radius:8px;margin-bottom:1rem;font-size:.88rem;display:flex;align-items:flex-start;gap:.5rem}
.alert-success{background:#dcfce7;color:#166534;border:1px solid #bbf7d0}
.alert-danger{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}
.alert-warning{background:#fef3c7;color:#92400e;border:1px solid #fde68a}
.alert-info{background:#dbeafe;color:#1e40af;border:1px solid #bfdbfe}

/* TABLES */
.table-wrap{overflow-x:auto;border-radius:var(--radius);box-shadow:var(--shadow);background:white}
table{width:100%;border-collapse:collapse}
th{background:var(--gray-50);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-600);padding:.6rem .85rem;text-align:left;border-bottom:1.5px solid var(--gray-200)}
td{padding:.65rem .85rem;border-bottom:1px solid var(--gray-100);font-size:.85rem;vertical-align:middle}
tr:last-child td{border-bottom:none} tr:hover td{background:var(--gray-50)}

/* CATAT FORM — iuran rows */
.catat-group{border:1.5px solid var(--gray-200);border-radius:10px;margin-bottom:.85rem;overflow:hidden}
.catat-group-header{background:var(--gray-50);padding:.6rem .9rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--gray-200)}
.catat-group-header .rumah-label{font-weight:700;font-size:.9rem}
.catat-group-header .rumah-sub{font-size:.78rem;color:var(--gray-600);margin-top:.1rem}
.iuran-rows{padding:.5rem .9rem}
.iuran-row{display:grid;grid-template-columns:auto 1fr 140px 80px;gap:.6rem;align-items:center;padding:.45rem 0;border-bottom:1px solid var(--gray-100)}
.iuran-row:last-child{border-bottom:none}
.iuran-row .iuran-label{font-size:.82rem;color:var(--gray-700)}
.iuran-row input[type=number]{padding:.3rem .5rem;border:1.5px solid var(--gray-200);border-radius:5px;font-size:.82rem;width:100%;text-align:right}
.iuran-row input[type=number]:focus{outline:none;border-color:var(--primary)}
.status-toggle{display:flex;gap:.35rem}
.status-toggle label{cursor:pointer;font-size:.75rem;padding:.25rem .55rem;border-radius:5px;border:1.5px solid var(--gray-200);transition:all .15s;white-space:nowrap}
.status-toggle input[type=radio]{display:none}
.status-toggle input[value=lunas]:checked+label{background:#dcfce7;border-color:#86efac;color:#166534;font-weight:600}
.status-toggle input[value=belum]:checked+label{background:#fee2e2;border-color:#fca5a5;color:#991b1b}

/* TOTAL ROW */
.total-row{background:#f0fdf4;padding:.5rem .9rem;border-top:1.5px solid #86efac;display:flex;justify-content:space-between;align-items:center;font-size:.82rem}
.total-row strong{color:var(--success)}

/* REKAP TABLE */
.rekap-table th,.rekap-table td{padding:.4rem .45rem;font-size:.74rem}
.cell-lunas{background:#dcfce7;color:#166534;text-align:center;border-radius:3px;font-weight:700;font-size:.7rem}
.cell-belum{background:#fee2e2;color:#991b1b;text-align:center;border-radius:3px;font-size:.7rem}
.cell-partial{background:#fef3c7;color:#92400e;text-align:center;border-radius:3px;font-size:.7rem}
.cell-kosong{color:var(--gray-400);text-align:center}

/* LOGIN */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1d4ed8 0%,#2563eb 60%,#3b82f6 100%);padding:1rem}
.login-card{background:white;border-radius:16px;padding:2rem;width:100%;max-width:380px;box-shadow:0 20px 40px rgba(0,0,0,.18)}
.login-logo{text-align:center;margin-bottom:1.5rem}
.login-logo h1{font-size:1.4rem;font-weight:800;color:var(--primary);line-height:1.3}
.login-logo p{color:var(--gray-600);font-size:.85rem;margin-top:.35rem}

/* WARGA STATUS */
.status-big{text-align:center;padding:1.75rem 1rem;border-radius:var(--radius);margin-bottom:1rem}
.status-big.lunas{background:#dcfce7;border:2px solid #86efac} .status-big.belum{background:#fee2e2;border:2px solid #fca5a5}
.status-icon{font-size:2.75rem;line-height:1;margin-bottom:.4rem}
.status-text{font-size:1.4rem;font-weight:800}
.status-big.lunas .status-text{color:var(--success)} .status-big.belum .status-text{color:var(--danger)}
.status-sub{font-size:.87rem;color:var(--gray-600);margin-top:.25rem}

/* IURAN TAGS */
.iuran-tag{display:inline-flex;align-items:center;gap:.3rem;padding:.18rem .5rem;background:#dbeafe;color:#1e40af;border-radius:5px;font-size:.73rem;font-weight:500;margin:.15rem .1rem}
.iuran-tag.parkir{background:#fef3c7;color:#92400e}
.iuran-tag.kost{background:#f3e8ff;color:#7e22ce}
.iuran-tag.luar{background:#fee2e2;color:#991b1b}

/* PROGRESS */
.progress{height:7px;background:var(--gray-200);border-radius:20px;overflow:hidden;margin-top:.4rem}
.progress-bar{height:100%;border-radius:20px;background:var(--success);transition:width .4s}

/* MOBILE */
@media(max-width:640px){
  .form-row{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr 1fr}
  .navbar-nav{display:none}
  .container{padding:.85rem .65rem}
  .iuran-row{grid-template-columns:auto 1fr;gap:.4rem}
  .iuran-row .status-toggle,.iuran-row input[type=number]{grid-column:2}
}
@media(display-mode:standalone){.navbar{padding-top:env(safe-area-inset-top);height:calc(56px + env(safe-area-inset-top))}}