/* Global mobile responsiveness for Bahuraniji admin pages */

html{
max-width:100%;
overflow-x:hidden;
}

img,
video,
canvas,
iframe{
max-width:100%;
height:auto;
}

.menu-toggle{
display:none;
}

.logo{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
}

.brand-logo{
width:34px;
height:34px;
object-fit:contain;
border-radius:8px;
flex:0 0 auto;
}

.table-responsive{
width:100%;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}

.table-responsive table{
min-width:760px;
}

input,
select,
textarea,
button{
max-width:100%;
}

@media(max-width:1024px){

.main{
padding:24px !important;
}

.topbar{
gap:16px !important;
}

.topbar h1,
.title{
font-size:30px !important;
line-height:1.2 !important;
}

.grid,
.stats,
.info-grid,
.bank-grid{
grid-template-columns:1fr 1fr !important;
}

}

@media(max-width:768px){

body{
overflow-x:hidden !important;
}

.sidebar{
position:sticky !important;
top:0 !important;
left:auto !important;
width:100% !important;
height:auto !important;
max-height:none !important;
padding:12px !important;
display:grid !important;
grid-template-columns:1fr auto !important;
align-items:center !important;
gap:10px !important;
overflow:visible !important;
white-space:normal !important;
background:linear-gradient(90deg,#111827,#1f2937) !important;
z-index:1000 !important;
}

.sidebar::-webkit-scrollbar{
height:5px !important;
width:5px !important;
}

.sidebar .logo,
.logo{
font-size:18px !important;
margin:0 !important;
min-width:0 !important;
text-align:left !important;
justify-content:flex-start !important;
}

.brand-logo{
width:32px !important;
height:32px !important;
}

.menu-toggle{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:42px !important;
height:42px !important;
padding:0 !important;
border:none !important;
border-radius:10px !important;
background:#374151 !important;
color:white !important;
font-size:24px !important;
line-height:1 !important;
cursor:pointer !important;
}

.sidebar a{
display:none !important;
grid-column:1 / -1 !important;
min-height:42px !important;
padding:11px 12px !important;
margin:0 !important;
border-radius:10px !important;
font-size:14px !important;
transform:none !important;
}

.sidebar.open a{
display:flex !important;
align-items:center !important;
}

.sidebar a:hover{
transform:none !important;
}

.main{
margin-left:0 !important;
width:100% !important;
padding:16px !important;
}

.topbar{
flex-direction:column !important;
align-items:flex-start !important;
margin-bottom:18px !important;
}

.topbar h1,
.title{
font-size:26px !important;
line-height:1.25 !important;
word-break:break-word !important;
}

.subtitle{
font-size:14px !important;
margin-bottom:22px !important;
}

.card,
.profile,
.empty,
.import-box,
.table-card{
padding:18px !important;
border-radius:16px !important;
}

.grid,
.stats,
.info-grid,
.bank-grid{
grid-template-columns:1fr !important;
gap:14px !important;
}

.profile-top,
.header{
align-items:flex-start !important;
gap:14px !important;
}

.avatar{
width:54px !important;
height:54px !important;
font-size:22px !important;
flex-shrink:0 !important;
}

.profile .avatar{
width:70px !important;
height:70px !important;
font-size:28px !important;
}

.profile-info h1,
.info h2,
.name{
font-size:22px !important;
line-height:1.25 !important;
}

.pending-box,
.total-badge,
.count-badge{
width:100% !important;
min-width:0 !important;
text-align:center !important;
}

.search-box{
margin-bottom:16px !important;
}

.search-box input,
input,
textarea,
select{
font-size:16px !important;
border-radius:12px !important;
}

.form-group{
min-width:0 !important;
}

button,
.btn,
.view-btn,
.action-btn{
min-height:42px !important;
}

.actions{
display:grid !important;
grid-template-columns:1fr !important;
gap:10px !important;
}

.actions .btn,
.view-btn{
width:100% !important;
text-align:center !important;
}

.table-responsive{
margin:0 -2px !important;
padding-bottom:6px !important;
}

table{
font-size:13px !important;
}

th,
td{
padding:11px 12px !important;
font-size:13px !important;
}

.user{
min-width:190px !important;
}

.row{
flex-direction:column !important;
gap:4px !important;
}

.value{
text-align:left !important;
word-break:break-word !important;
}

.amount-box h1{
font-size:30px !important;
}

}

@media(max-width:420px){

.main{
padding:12px !important;
}

.topbar h1,
.title{
font-size:23px !important;
}

.card,
.profile,
.empty,
.import-box,
.table-card{
padding:14px !important;
}

.sidebar a{
font-size:12px !important;
padding:9px 10px !important;
}

.stat,
.stat-card,
.summary-card,
.bank-item{
padding:14px !important;
}

}