/* ═══════════════════════════════════════════════════════
   IWK Bill Collector — Main Stylesheet
   Professional · Mobile-first · Bootstrap 5 base
   ═══════════════════════════════════════════════════════ */

:root {
  --blue:       #1a56db;
  --blue-dk:    #1245b8;
  --blue-lt:    #dbeafe;
  --green:      #16a34a;
  --orange:     #d97706;
  --red:        #dc2626;
  --sidebar-w:  258px;
  --topbar-h:   58px;
  --radius:     12px;
  --shadow:     0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px rgba(0,0,0,.05);
}

/* ── Reset / Base ── */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
     background:#f1f5f9;color:#1e293b;overflow-x:hidden}
a{text-decoration:none}

/* ════════════════════════════════════
   SIDEBAR
   ════════════════════════════════════ */
.sidebar{
  position:fixed;top:0;left:0;width:var(--sidebar-w);height:100vh;
  background:#0f172a;color:#e2e8f0;
  display:flex;flex-direction:column;z-index:1000;
  overflow-y:auto;scrollbar-width:thin;scrollbar-color:#1e293b transparent;
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.sidebar::-webkit-scrollbar{width:4px}
.sidebar::-webkit-scrollbar-thumb{background:#334155;border-radius:2px}

/* Header */
.sb-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.125rem 1rem;border-bottom:1px solid #1e293b;flex-shrink:0;
}
.sb-brand{display:flex;align-items:center;gap:.75rem}
.sb-brand-icon{font-size:1.75rem;color:#60a5fa}
.sb-brand-name{display:block;font-weight:700;font-size:.9375rem;color:#fff;line-height:1.2}
.sb-brand-sub{color:#64748b;font-size:.7rem;display:block}

/* User strip */
.sb-user{
  display:flex;align-items:center;gap:.75rem;
  padding:.875rem 1rem;border-bottom:1px solid #1e293b;flex-shrink:0;
}
.sb-avatar{
  width:36px;height:36px;border-radius:50%;background:var(--blue);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.9rem;flex-shrink:0;
}
.sb-user-name{font-size:.8125rem;font-weight:600;color:#e2e8f0;
              white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.sb-user-role{font-size:.7rem;color:#64748b}

/* Nav */
.sb-nav{display:flex;flex-direction:column;flex:1;padding:.625rem .5rem .75rem;gap:.0625rem}

.sb-link{
  display:flex;align-items:center;gap:.75rem;padding:.5625rem .875rem;
  border-radius:8px;color:#94a3b8;font-size:.8125rem;font-weight:500;
  cursor:pointer;transition:background .12s,color .12s;white-space:nowrap;
  border:none;background:none;width:100%;text-align:left;
}
.sb-link:hover{background:#1e293b;color:#e2e8f0}
.sb-link.active{background:var(--blue);color:#fff}
.sb-link i{font-size:.9375rem;flex-shrink:0;width:18px;text-align:center}

.sb-link.sub{padding-left:2.5rem}

.sb-group-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:.5rem .875rem;border-radius:8px;color:#64748b;
  font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  margin-top:.5rem;cursor:pointer;
}
.sb-group-hdr:hover{color:#94a3b8}
.sb-group-hdr span{display:flex;align-items:center;gap:.5rem}

.sb-sep{height:1px;background:#1e293b;margin:.5rem .875rem}

.sb-logout{color:#f87171 !important}
.sb-logout:hover{background:rgba(248,113,113,.08) !important}

/* ── Overlay */
.sb-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.52);z-index:999;
}
.sb-overlay.show{display:block}

/* ── Icon button */
.btn-icon{background:none;border:none;cursor:pointer;padding:.25rem .375rem;
          border-radius:6px;font-size:1.25rem;line-height:1;color:#94a3b8}
.btn-icon:hover{background:#1e293b;color:#fff}

/* ════════════════════════════════════
   TOPBAR
   ════════════════════════════════════ */
.topbar{
  height:var(--topbar-h);background:#fff;
  display:flex;align-items:center;gap:1rem;
  padding:0 1.25rem;border-bottom:1px solid #e2e8f0;
  box-shadow:var(--shadow);position:sticky;top:0;z-index:100;
}
.topbar-title{font-size:1.0625rem;font-weight:600;margin:0;flex:1;
              white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ════════════════════════════════════
   MAIN LAYOUT
   ════════════════════════════════════ */
.main{margin-left:var(--sidebar-w);min-height:100vh;transition:margin-left .28s}
.main.no-sidebar{margin-left:0}
.page-body{padding:1.5rem 1.5rem 4rem}

/* ════════════════════════════════════
   PAGE HEADER
   ════════════════════════════════════ */
.page-hdr{margin-bottom:1.375rem}
.page-hdr h2{font-size:1.3125rem;font-weight:700;margin:0;color:#0f172a}
.page-hdr p{color:#64748b;font-size:.875rem;margin:.25rem 0 0}

/* ════════════════════════════════════
   CARDS
   ════════════════════════════════════ */
.card{background:#fff;border:1px solid #e2e8f0;border-radius:var(--radius);
      box-shadow:var(--shadow)}
.card-header{padding:.9375rem 1.25rem;border-bottom:1px solid #e2e8f0;
             background:#f8fafc;border-radius:var(--radius) var(--radius) 0 0;
             font-weight:600;font-size:.875rem}
.card-body{padding:1.25rem}

/* ── Stat card */
.stat-card{background:#fff;border-radius:var(--radius);padding:1.125rem;
           border-left:4px solid var(--blue);box-shadow:var(--shadow)}
.stat-card.success{border-color:var(--green)}
.stat-card.warning{border-color:var(--orange)}
.stat-card.danger {border-color:var(--red)}
.stat-icon{width:46px;height:46px;border-radius:10px;
           background:var(--blue-lt);color:var(--blue);
           display:flex;align-items:center;justify-content:center;font-size:1.375rem}
.stat-val{font-size:1.875rem;font-weight:700;line-height:1}
.stat-lbl{color:#64748b;font-size:.8125rem;margin-top:.25rem}

/* ── Collector panel */
.col-panel{background:#fff;border-radius:var(--radius);padding:1.125rem;
           border:1px solid #e2e8f0;box-shadow:var(--shadow);
           cursor:pointer;transition:transform .18s,box-shadow .18s,border-color .18s}
.col-panel:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--blue)}
.col-avatar{width:50px;height:50px;border-radius:50%;background:var(--blue);
            color:#fff;font-size:1.3rem;font-weight:700;
            display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* ════════════════════════════════════
   TABLE
   ════════════════════════════════════ */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{font-size:.8125rem;margin:0}
.table th{font-weight:600;background:#f8fafc;color:#374151;
          white-space:nowrap;border-bottom:2px solid #e2e8f0;padding:.625rem .875rem}
.table td{vertical-align:middle;padding:.5625rem .875rem}
.table tbody tr:hover{background:#f8fafc}

/* ════════════════════════════════════
   BADGES
   ════════════════════════════════════ */
.badge-st{padding:.3rem .75rem;border-radius:999px;font-size:.7rem;font-weight:600;display:inline-block}
.badge-pending  {background:#fef9c3;color:#854d0e}
.badge-progress {background:#dbeafe;color:#1e40af}
.badge-completed{background:#dcfce7;color:#15803d}

/* ════════════════════════════════════
   PROGRESS
   ════════════════════════════════════ */
.prog{height:8px;border-radius:999px;background:#e2e8f0;overflow:hidden}
.prog-bar{height:100%;border-radius:999px;background:var(--blue);transition:width .3s}
.prog-bar.done{background:var(--green)}

/* ════════════════════════════════════
   FORMS
   ════════════════════════════════════ */
.form-control,.form-select{
  border:1.5px solid #e2e8f0;border-radius:8px;
  padding:.5625rem .875rem;font-size:.875rem;
  transition:border-color .15s,box-shadow .15s;
}
.form-control:focus,.form-select:focus{
  border-color:var(--blue);outline:none;
  box-shadow:0 0 0 3px rgba(26,86,219,.1);
}
.form-label{font-weight:500;font-size:.8125rem;margin-bottom:.375rem;color:#374151}
textarea.form-control{resize:vertical}

/* ── Split layout */
.split{display:grid;grid-template-columns:360px 1fr;gap:1.5rem;align-items:start}

/* ════════════════════════════════════
   BUTTONS
   ════════════════════════════════════ */
.btn{border-radius:8px;font-weight:500;padding:.5rem 1.125rem;font-size:.875rem;cursor:pointer}
.btn-primary{background:var(--blue);border:1px solid var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-dk);border-color:var(--blue-dk)}
.btn-success{background:var(--green);border:1px solid var(--green);color:#fff}
.btn-success:hover{background:#15803d}
.btn-warning{background:var(--orange);border:1px solid var(--orange);color:#fff}
.btn-sm{padding:.3rem .65rem;font-size:.78rem}
.btn-icon-sm{background:none;border:1px solid #e2e8f0;border-radius:6px;
             padding:.25rem .45rem;font-size:.9rem;cursor:pointer;
             transition:all .12s;color:#64748b}
.btn-icon-sm:hover{border-color:var(--blue);color:var(--blue)}
.btn-icon-sm.del:hover{border-color:var(--red);color:var(--red)}

/* ── GPS */
.btn-gps{display:inline-flex;align-items:center;gap:.5rem;background:#059669;
         color:#fff;border:none;padding:.5rem 1rem;border-radius:8px;
         font-size:.875rem;cursor:pointer;width:100%;justify-content:center;
         transition:background .15s}
.btn-gps:hover{background:#047857}
.btn-gps:disabled{background:#94a3b8;cursor:wait}

/* ════════════════════════════════════
   IMAGE UPLOAD SLOTS
   ════════════════════════════════════ */
.img-slot{
  border:2px dashed #cbd5e1;border-radius:10px;
  background:#f8fafc;text-align:center;
  padding:.75rem .5rem;cursor:pointer;
  transition:border-color .18s,background .18s;
  position:relative;min-height:130px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.img-slot:hover,.img-slot.has-img{border-color:var(--blue);background:var(--blue-lt)}
.img-slot img{width:100%;height:100px;object-fit:cover;border-radius:6px;display:none}
.img-slot.has-img img{display:block}
.img-slot.has-img .img-placeholder{display:none}
.img-slot-label{font-size:.7rem;color:#64748b;margin-top:.375rem;line-height:1.3}
.img-slot-btns{display:flex;gap:.375rem;margin-top:.5rem;flex-wrap:wrap;justify-content:center}
.img-btn{display:inline-flex;align-items:center;gap:.3rem;
         background:var(--blue);color:#fff;border:none;
         padding:.3rem .6rem;border-radius:6px;font-size:.7rem;cursor:pointer}
.img-btn.gallery{background:#6366f1}

/* ════════════════════════════════════
   DROP ZONE
   ════════════════════════════════════ */
.drop-zone{
  border:2.5px dashed #c7d2fe;border-radius:12px;
  padding:2.25rem 1rem;text-align:center;cursor:pointer;
  background:#f8faff;transition:all .18s;
}
.drop-zone:hover,.drop-zone.over{border-color:var(--blue);background:var(--blue-lt)}

/* ════════════════════════════════════
   LOGIN PAGE
   ════════════════════════════════════ */
.login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#1a56db 0%,#0f172a 100%);padding:1rem;
}
.login-card{background:#fff;border-radius:20px;padding:2.5rem;
            width:100%;max-width:420px;box-shadow:var(--shadow-lg)}
.login-logo{text-align:center;margin-bottom:1.875rem}
.login-logo i{font-size:2.75rem;color:var(--blue)}
.login-logo h2{font-weight:700;margin:.5rem 0 .25rem;color:#0f172a;font-size:1.375rem}
.login-logo small{color:#64748b;font-size:.8125rem}

/* ════════════════════════════════════
   ALERT / TOAST
   ════════════════════════════════════ */
.alert{border-radius:10px;font-size:.875rem}

/* ════════════════════════════════════
   EMPTY STATE
   ════════════════════════════════════ */
.empty{text-align:center;padding:3rem 1rem;color:#94a3b8}
.empty i{font-size:2.75rem;display:block;margin-bottom:.625rem}
.empty p{font-size:.875rem;margin:0}

/* ════════════════════════════════════
   INFO BANNER (bill details top)
   ════════════════════════════════════ */
.bill-banner{
  background:var(--blue-lt);border-bottom:2px solid var(--blue);
  padding:.875rem 1.25rem;margin-bottom:1rem;
}
.bill-banner .bill-no{font-size:1rem;font-weight:700;color:var(--blue)}

/* ════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════ */
@media(max-width:991.98px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0}
  .split{grid-template-columns:1fr}
  .page-body{padding:1rem}
}
@media(max-width:575.98px){
  .topbar-title{font-size:.9375rem}
  .stat-val{font-size:1.5rem}
  .login-card{padding:1.5rem}
  .card-body{padding:1rem}
}

/* ════════════════════════════════════
   MISC UTILITY
   ════════════════════════════════════ */
.fw-600{font-weight:600}
.fw-700{font-weight:700}
.spin{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}