:root{
  --navy:#0f2540; --navy2:#15335a; --teal:#0e7c66; --teal-l:#e7f5f1;
  --gold:#c99a3c; --bg:#f4f6f8; --danger:#c0392b; --sidebar-w:260px;
}
*{font-family:'Vazirmatn', sans-serif !important;}
html{-webkit-text-size-adjust:100%;}
body{background:var(--bg); color:#1c2733;}

/* ===================== Sidebar (desktop) ===================== */
.sidebar{width:var(--sidebar-w); flex:0 0 var(--sidebar-w); background:linear-gradient(180deg,var(--navy) 0%, var(--navy2) 100%); min-height:100vh; color:#fff;}
.sidebar .brand{padding:22px 18px; border-bottom:1px solid rgba(255,255,255,.12);}
.sidebar .brand small{color:#9fb3c8;}
.sidebar .nav-link{color:#cfe0ee; padding:13px 18px; border-right:3px solid transparent; font-size:.94rem;}
.sidebar .nav-link.active, .sidebar .nav-link:hover{background:rgba(255,255,255,.08); color:#fff; border-right-color:var(--gold);}
.sidebar-close-btn{display:none;}

.topbar{background:#fff; border-bottom:1px solid #e3e8ee; padding:14px 22px;}
.content{padding:22px;}
.card{border:1px solid #e5e9ee; border-radius:12px; box-shadow:0 1px 2px rgba(20,30,50,.04);}
.card-header{background:#fff; border-bottom:1px solid #eef1f4; font-weight:600;}
.stat-card{border-radius:14px; padding:18px 20px; color:#fff;}
.stat-card h3{margin:0; font-weight:700;}
.stat-card .lbl{opacity:.85; font-size:.85rem;}
.bg-navy{background:linear-gradient(135deg,var(--navy),var(--navy2));}
.bg-teal{background:linear-gradient(135deg,#0e7c66,#12a181);}
.bg-gold{background:linear-gradient(135deg,#b8862c,#d9ab4a);}
.bg-brick{background:linear-gradient(135deg,#8a2e2e,#b0433e);}
.badge-due{background:#fff3cd; color:#8a6516;}
.badge-paid{background:#d9f2e6; color:#0e6b45;}
.badge-pending{background:#dce8fb; color:#1e4e8c;}
.badge-rejected{background:#fbdcdc; color:#9c2b2b;}
.table thead th{font-size:.82rem; color:#5a6b7d; font-weight:600; border-bottom:2px solid #eef1f4;}
.table td{vertical-align:middle; font-size:.9rem;}
.btn-navy{background:var(--navy); color:#fff;}
.btn-navy:hover{background:var(--navy2); color:#fff;}
.btn-teal{background:var(--teal); color:#fff;}
.btn-teal:hover{background:#0a6753; color:#fff;}
.btn-gold{background:var(--gold); color:#fff;}
.btn-gold:hover{background:#a97e2e; color:#fff;}
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--navy),#1d3f66); padding:16px;}
.login-card{background:#fff; border-radius:16px; padding:36px; width:100%; max-width:420px; box-shadow:0 20px 60px rgba(0,0,0,.35);}
.role-pill{font-size:.72rem; padding:3px 10px; border-radius:20px;}
.toman:after{content:" ریال";}
.empty-state{text-align:center; padding:40px 10px; color:#8a97a5;}
.form-label{font-size:.85rem; font-weight:600; color:#3a4552;}
.small-muted{font-size:.78rem; color:#8a97a5;}

/* ===================== Hamburger toggle (mobile only) ===================== */
.hamburger-btn{display:none; background:none; border:1px solid #dfe4ea; border-radius:8px; width:40px; height:40px; align-items:center; justify-content:center; font-size:1.25rem; line-height:1;}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(10,20,35,.5); z-index:1040; display:none;}
.sidebar-backdrop.show{display:block;}

/* ===================== Bigger touch targets for form checks (collector / owner panels) ===================== */
.form-check{min-height:0;}
.form-check-input{width:1.35em; height:1.35em; margin-top:.15em; flex-shrink:0;}
.form-check-label{font-size:.95rem; padding-right:.4rem; width:100%;}
.due-row{padding:12px 4px;}
.due-row .form-check-label{gap:8px;}

/* ===================== کارت‌های بدهی رنگی در پنل متصدی ===================== */
.due-card{
  display:block; border-radius:14px; padding:16px 18px; cursor:pointer;
  border:2px solid transparent; transition:box-shadow .15s, transform .1s;
  height:100%;
}
.due-card:active{transform:scale(.99);}
.due-card-current{
  background:linear-gradient(135deg,var(--navy),#1d3f66);
  box-shadow:0 6px 20px rgba(15,37,64,.35);
}
.due-card-charge{background:var(--teal-l); border-color:#bfe6da;}
.due-card-cost{background:#fbf3e2; border-color:#f0dfb0;}
.due-check:checked ~ *, label.due-card:has(.due-check:checked){box-shadow:0 0 0 3px rgba(15,37,64,.25);}
.due-card-charge:has(.due-check:checked){border-color:var(--teal); box-shadow:0 0 0 3px rgba(14,124,102,.25);}
.due-card-cost:has(.due-check:checked){border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,154,60,.25);}
.due-card-charge.selected{border-color:var(--teal); box-shadow:0 0 0 3px rgba(14,124,102,.25);}
.due-card-cost.selected{border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,154,60,.25);}
.due-card-current.selected, .due-card-current:has(.due-check:checked){box-shadow:0 0 0 3px rgba(201,154,60,.6), 0 6px 20px rgba(15,37,64,.35);}

/* ===================== Responsive: table -> stacked cards ===================== */
@media (max-width: 767.98px){
  table.table-mobile-cards thead{display:none;}
  table.table-mobile-cards, table.table-mobile-cards tbody, table.table-mobile-cards tr, table.table-mobile-cards td{display:block; width:100%;}
  table.table-mobile-cards tr{border:1px solid #eef1f4; border-radius:10px; margin:10px; padding:6px 4px; box-shadow:0 1px 2px rgba(20,30,50,.04);}
  table.table-mobile-cards td{border:none; padding:6px 10px; display:flex; justify-content:space-between; align-items:center; text-align:left;}
  table.table-mobile-cards td::before{content:attr(data-label); font-size:.76rem; color:#8a97a5; font-weight:600; margin-left:10px;}
  table.table-mobile-cards td:empty{display:none;}
}

/* ===================== Responsive layout ===================== */
@media (max-width: 991.98px){
  .sidebar{
    position:fixed; top:0; right:0; height:100vh; z-index:1050;
    transform:translateX(100%); transition:transform .25s ease;
    box-shadow:-6px 0 24px rgba(0,0,0,.25); overflow-y:auto;
  }
  .sidebar.show{transform:translateX(0);}
  .sidebar-close-btn{display:inline-flex; margin-right:auto; background:none; border:none; color:#fff; font-size:1.4rem; line-height:1;}
  .sidebar .brand{display:flex; align-items:center; justify-content:space-between;}
  .hamburger-btn{display:inline-flex;}
  .topbar{padding:12px 14px;}
  .content{padding:14px;}
  .login-card{padding:26px 20px;}
}
@media (max-width: 575.98px){
  .stat-card{padding:14px 16px;}
  .stat-card h3{font-size:1.25rem;}
  .topbar .fw-semibold{display:none;}
  .card-header{font-size:.92rem;}
  .input-group{flex-wrap:wrap;}
  .input-group > .form-control{flex:1 1 100%; border-radius:.375rem !important; margin-bottom:6px;}
  .input-group > .btn{flex:1 1 100%; border-radius:.375rem !important;}
}

/* دکمه‌های اقدام تمام‌عرض و بزرگ‌تر برای لمس راحت‌تر در پنل متصدی و مالک واحد */
#collectForm button[type=submit], #payForm button[type=submit]{padding:.65rem 1rem; font-size:1rem;}

/* هماهنگی رنگ صفحه‌بندی (Pagination) با تم سامانه */
.pagination .page-link{color:var(--navy);}
.pagination .page-item.active .page-link{background:var(--navy); border-color:var(--navy); color:#fff;}
.pagination .page-item.disabled .page-link{color:#b7c0ca;}