/* Smart KhataKart — global mobile / responsive styles */

/* Prevent iOS input zoom */
@media (max-width:768px){
  input,select,textarea{font-size:16px!important}
}

/* Sidebar panels (admin + merchant + standalone admin pages) */
@media (max-width:768px){
  .sidebar{transform:translateX(-100%);transition:transform .3s ease;box-shadow:none}
  .sidebar.open{transform:translateX(0);box-shadow:4px 0 24px rgba(0,0,0,.25)}
  .main{margin-left:0!important}
  .content{padding:1rem!important}
  .topbar{padding:.7rem 1rem!important;flex-wrap:wrap;gap:.5rem}
  .topbar-title{font-size:.92rem}
  .topbar-right{gap:.5rem!important}
  .topbar-user{font-size:.78rem}
  .topbar-role{display:none}
  .btn-logout{padding:.35rem .65rem;font-size:.72rem}
  .hamburger{display:flex!important}
  .page-header{flex-direction:column;align-items:flex-start!important;gap:.5rem}
  .page-header h1{font-size:1.05rem}
  .filter-bar{padding:.85rem!important;gap:.6rem!important}
  .filter-group{min-width:100%!important;flex:1 1 100%}
  .stats-grid{grid-template-columns:repeat(2,1fr)!important;gap:.65rem!important}
  .stat-card{padding:.85rem!important}
  .stat-value{font-size:1.25rem!important}
  .grid-2{grid-template-columns:1fr!important}
  .form-card{max-width:100%!important;padding:1rem!important}
  .section-header{padding:.75rem 1rem!important;flex-wrap:wrap;gap:.4rem}
  .scan-cta{flex-direction:column!important;text-align:center;padding:1.1rem!important}
  .scan-cta a{width:100%;text-align:center}
}

/* Scrollable tables on small screens */
.table-card,.section-card{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-card table,.section-card table{min-width:560px}
.table-card table.table-auto,.section-card table.table-auto{min-width:0;width:100%}

@media (max-width:768px){
  thead th,tbody td{padding:.55rem .65rem!important;font-size:.76rem!important}
  .badge{font-size:.65rem!important}
  .btn,.btn-sm{min-height:40px}
  .modal{width:100%!important;max-width:100%!important;margin:0 .5rem}
  .modal-bg{padding:.5rem!important}
}

/* Sidebar backdrop */
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:99}
.sidebar-backdrop.show{display:block}

/* Customer app — bottom navigation */
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #E4E7EC;z-index:100;padding:.45rem 0 env(safe-area-inset-bottom,0);box-shadow:0 -2px 12px rgba(0,0,0,.06)}
.bottom-nav-inner{display:flex;max-width:480px;margin:0 auto}
.bnav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:.1rem;text-decoration:none;color:#6B7280;font-size:.62rem;font-weight:600;padding:.35rem 0;min-height:44px;justify-content:center}
.bnav-item .ico{font-size:1.25rem;line-height:1}
.bnav-item.active{color:#0F62FE}

@media (max-width:768px){
  .bottom-nav{display:flex}
  .page{padding-bottom:5.5rem!important;max-width:100%!important;padding-left:.85rem!important;padding-right:.85rem!important}
  .topnav{padding:.75rem 1rem!important}
  .topnav-brand{font-size:1rem!important}
  .topnav-brand span{display:none}
  .credit-card{padding:1.2rem!important}
  .cc-limit-value{font-size:1.85rem!important}
  .quick-actions{gap:.5rem!important}
  .qa-btn{padding:.75rem .35rem!important}
  .due-item,.tx-item{padding:.75rem .85rem!important;flex-wrap:wrap}
  .info-row{flex-direction:column;align-items:flex-start!important;gap:.15rem}
}

/* Login / register */
@media (max-width:480px){
  .login-wrap{padding:.75rem!important}
  .card{padding:1.75rem 1.15rem!important}
  .role-pill{min-width:70px;font-size:.72rem}
}

/* Datetime cells — readable on narrow screens */
.dt,.dt-cell{white-space:nowrap;font-size:.74rem;color:var(--muted,#6B7280)}

/* Payment page */
@media (max-width:768px){
  .due-select-item{flex-wrap:wrap;gap:.6rem}
  .due-select-amount{width:100%;text-align:left!important}
  #pay-amount{width:100%!important}
}

/* Merchant scan page */
@media (max-width:768px){
  .scan-layout{flex-direction:column!important}
  .scan-panel{width:100%!important}
}