body{font-family:Arial,sans-serif;background:#f4f7fb}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(135deg,#eef4ff,#f8fafc)}.login-card{width:100%;max-width:420px;background:#fff;padding:32px;border-radius:16px;box-shadow:0 10px 35px rgba(0,0,0,.1)}.brand{display:flex;align-items:center;gap:14px;margin-bottom:28px}.brand h3{margin:0;font-weight:700}.brand-icon{width:48px;height:48px;border-radius:12px;background:#0d6efd;color:#fff;display:grid;place-items:center;font-size:24px;font-weight:bold}.form-control{min-height:46px}.dashboard-card{border:0;border-radius:16px;box-shadow:0 8px 28px rgba(0,0,0,.07)}

/* =========================================================
   GLOBAL MOBILE RESPONSIVE LAYER
   Applies to Login, Admin, Charge, Master Data & Reports
   ========================================================= */

html{font-size:16px}
body{overflow-x:hidden}
img{max-width:100%;height:auto}
button,.btn{touch-action:manipulation}

.form-control,.form-select{font-size:16px}
textarea.form-control{resize:vertical}

.navbar{min-height:58px}
.navbar .navbar-brand{font-weight:600}
.navbar .container,.navbar .container-fluid{width:100%}

.card{max-width:100%}
.card-body{min-width:0}

.table-responsive{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.table-responsive table{min-width:760px}
.table-responsive .table{margin-bottom:0}

.pagination{flex-wrap:wrap;gap:3px}
.pagination .page-link{min-width:42px;text-align:center}

.modal-dialog{max-width:calc(100% - 24px)}
.modal-body{overflow-wrap:anywhere}

.alert{overflow-wrap:anywhere}

@media (max-width:767.98px){
  body{font-size:.95rem}

  .container,.container-fluid{
    max-width:100%;
  }

  .container.py-5,
  .container.py-4,
  .container-fluid.py-5,
  .container-fluid.py-4{
    padding-top:1rem!important;
    padding-bottom:1rem!important;
    padding-left:.75rem!important;
    padding-right:.75rem!important;
  }

  /* Top navigation */
  .navbar{
    padding:.65rem .75rem!important;
  }
  .navbar .container,
  .navbar .container-fluid{
    padding-left:.15rem!important;
    padding-right:.15rem!important;
  }
  .navbar-brand{
    font-size:1rem;
    line-height:1.25;
    white-space:normal;
    max-width:72%;
  }
  .navbar .btn{
    font-size:.82rem;
    padding:.4rem .65rem;
  }

  /* Dashboard cards */
  .dashboard-card{
    border-radius:14px!important;
  }
  .dashboard-card .card-body{
    padding:1rem!important;
  }

  /* Buttons become easy to tap */
  .btn{
    min-height:44px;
  }
  .d-flex.flex-wrap.gap-2{
    gap:.5rem!important;
  }
  .d-flex.flex-wrap.gap-2 .btn{
    flex:1 1 100%;
  }

  /* Forms */
  .row.g-3,.row.g-2{
    --bs-gutter-x:.7rem;
    --bs-gutter-y:.75rem;
  }
  .form-label{
    font-size:.9rem;
    font-weight:600;
  }
  .form-control,.form-select{
    min-height:48px;
    border-radius:10px;
  }
  textarea.form-control{
    min-height:110px;
  }

  /* Filter/search forms stack cleanly */
  form.row.g-2>[class*="col-"],
  form.row.g-3>[class*="col-"]{
    width:100%;
  }
  form.row.g-2 .btn,
  form.row.g-3 .btn{
    width:100%;
  }

  /* Statistics/cards */
  .stat-card h3{font-size:1.55rem}
  .stat-card h4{font-size:1.25rem}

  /* Reports */
  .table-responsive{
    margin-left:-.25rem;
    margin-right:-.25rem;
    width:calc(100% + .5rem);
  }
  .table-responsive table{
    min-width:1050px;
  }
  .table th,.table td{
    white-space:nowrap;
    vertical-align:middle;
    font-size:.86rem;
  }
  .table td[style*="min-width"]{
    white-space:normal;
  }

  /* Pagination */
  .pagination .page-item:nth-child(n+6):nth-last-child(n+3){
    display:none;
  }

  /* Login */
  .login-page{
    min-height:100dvh;
    padding:12px!important;
    align-items:flex-start;
    padding-top:10vh!important;
  }
  .login-card{
    max-width:100%!important;
    padding:22px 18px!important;
    border-radius:14px!important;
  }
  .brand{margin-bottom:20px}
  .brand h3{font-size:1.25rem}
  .brand-icon{width:44px;height:44px;font-size:21px}

  /* Admin/charge edit and add forms */
  .modal-dialog{
    margin:.75rem auto;
  }
  .modal-content{
    border-radius:14px;
  }
  .modal-header,.modal-body,.modal-footer{
    padding:1rem;
  }

  /* Search cards */
  .card .card-body h3,
  .card .card-body h4{
    line-height:1.3;
  }

  /* Prevent long mobile numbers / remarks from breaking layout */
  td,th{
    overflow-wrap:anywhere;
  }
}

@media (max-width:420px){
  .navbar-brand{font-size:.92rem;max-width:65%}
  .navbar .btn{font-size:.76rem;padding:.35rem .55rem}
  .login-page{padding:8px!important;padding-top:6vh!important}
  .login-card{padding:18px 14px!important}
  .card-body{padding:.9rem!important}
  .pagination .page-link{
    min-width:38px;
    padding:.4rem .55rem;
  }
}

/* Desktop remains comfortable */
@media (min-width:768px){
  .d-flex.flex-wrap.gap-2 .btn{min-height:42px}
}