/* ==========================================================
   BMGG WMS V3.0
   responsive.css
   Responsive breakpoints
========================================================== */

/* Large Desktop (>1440px) */
@media(min-width:1440px){
#content{
padding:32px 40px;
}

.kpi-grid{
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:24px;
}

.search{
width:520px;
}

.table-wrapper{
font-size:14px;
}
}

/* Medium Desktop (1025px - 1439px) */
@media(max-width:1439px) and (min-width:1025px){
.kpi-grid{
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}

.quick-grid{
grid-template-columns:repeat(4,1fr);
}
}

/* Tablet (769px - 1024px) */
@media(max-width:1024px){

.search{
width:300px;
}

.quick-grid{
grid-template-columns:repeat(3,1fr);
}

.kpi-grid{
grid-template-columns:repeat(2,1fr);
}

.stat-grid{
grid-template-columns:repeat(2,1fr);
}

.form-row{
grid-template-columns:1fr;
}

.login-right{
width:440px;
}

.sidebar{
width:72px;
}

.sidebar .brand h2,
.sidebar .brand span,
.sidebar nav a span,
.sidebar .menu-title,
.sidebar-footer{
display:none;
}

.sidebar nav a{
justify-content:center;
padding:0;
}

.sidebar nav a.active{
border-left:none;
padding:0;
}

.brand{
justify-content:center;
padding:0;
}

.brand img{
margin-right:0;
}

.filter-bar .form-group{
min-width:140px;
}
}

/* Mobile (768px and below) */
@media(max-width:768px){

body{
overflow:auto;
}

.login-page{
flex-direction:column;
}

.login-left{
display:none;
}

.login-right{
width:100%;
padding:40px 24px;
}

.login-card{
width:100%;
}

.app{
flex-direction:column;
}

.sidebar{
width:100%;
height:auto;
flex-direction:row;
overflow-x:auto;
padding:0;
}

.sidebar .brand,
.sidebar-footer{
display:none;
}

.sidebar nav{
display:flex;
padding:0;
overflow:visible;
}

.sidebar nav a{
height:56px;
padding:0 16px;
font-size:12px;
white-space:nowrap;
flex-shrink:0;
}

.sidebar nav a.active{
border-left:none;
border-bottom:3px solid var(--accent);
padding:0 16px;
}

.menu-title{
display:none;
}

.main{
overflow:visible;
}

.topbar{
height:auto;
flex-wrap:wrap;
padding:16px;
gap:12px;
}

.search{
width:100%;
}

.top-actions{
width:100%;
justify-content:flex-end;
}

#content{
padding:16px;
}

.page-header{
flex-direction:column;
align-items:flex-start;
gap:8px;
}

.kpi-grid{
grid-template-columns:1fr;
}

.quick-grid{
grid-template-columns:repeat(2,1fr);
}

.stat-grid{
grid-template-columns:repeat(2,1fr);
}

.toolbar{
flex-direction:column;
align-items:stretch;
}

.toolbar-left,
.toolbar-right{
flex-wrap:wrap;
}

.filter-bar{
flex-direction:column;
}

.filter-bar .form-group{
min-width:100%;
}

.pagination{
flex-direction:column;
gap:12px;
align-items:center;
}

.pagination-pages{
flex-wrap:wrap;
justify-content:center;
}

.modal-dialog{
width:100%;
max-width:100%;
margin:12px;
max-height:95vh;
border-radius:var(--radius-md);
}

.drawer{
width:100%;
right:-100%;
}

.tabs{
overflow-x:auto;
}

.tabs .tab{
white-space:nowrap;
}
}

/* Small Mobile (480px and below) */
@media(max-width:480px){
#content{
padding:12px;
}

.kpi-card{
padding:16px;
}

.kpi-card h2{
font-size:28px;
}

.panel{
padding:16px;
}

.quick-grid{
grid-template-columns:1fr 1fr;
gap:10px;
}

.toast{
min-width:auto;
width:calc(100vw - 40px);
}

.login-right{
padding:32px 20px;
}

/* Stack sidebar nav */
.sidebar nav a{
padding:0 12px;
font-size:11px;
height:48px;
}
}

/* Reports screen styles */
.print-signatures{
display:none;
margin-top:40px;
padding-top:20px;
border-top:1px solid var(--border-light);
}

/* Hide hamburger on desktop */
.hamburger{
display:none;
}

/* Hide sidebar-backdrop on desktop */
.sidebar-backdrop{
display:none !important;
}

.sig-line{
display:flex;
align-items:center;
gap:12px;
font-size:13px;
margin-bottom:16px;
}

.sig-space{
min-width:180px;
border-bottom:1px solid var(--border-light);
margin-right:20px;
color:var(--text-placeholder);
}

#reportsPage .kpi-card-accent{
border-top-width:3px;
}

/* Sticky page header with search */
#content > section > .page-header{
position:sticky;
top:0;
z-index:10;
background:var(--bg);
padding-top:4px;
padding-bottom:8px;
}

/* ==========================================================
   Mobile card view (responsive tables)
========================================================== */
@media(max-width:768px){
#content > section > .page-header{
padding-left:4px;
padding-right:4px;
}

/* Hamburger visible on mobile */
.hamburger{
display:inline-flex !important;
}

/* Sidebar overlay on mobile */
.sidebar{
position:fixed;
left:-280px;
top:0;
width:260px !important;
height:100vh;
z-index:1000;
transition:left var(--transition);
box-shadow:var(--shadow-xl);
}

.sidebar.open{
left:0;
}

/* Restore sidebar elements on mobile overlay */
.sidebar .brand h2,
.sidebar .brand span,
.sidebar nav a span,
.sidebar .menu-title,
.sidebar-footer{
display:block !important;
}

.sidebar nav{
display:block !important;
overflow-y:auto !important;
padding:18px 0 !important;
}

.sidebar nav a{
justify-content:flex-start !important;
height:46px !important;
padding:0 24px !important;
font-size:14px !important;
white-space:normal !important;
flex-shrink:0 !important;
}

.sidebar nav a.active{
border-left:4px solid var(--accent) !important;
padding-left:20px !important;
}

.brand{
justify-content:flex-start !important;
padding:0 22px !important;
}

.brand img{
margin-right:14px !important;
}

.sidebar-backdrop{
display:none;
position:fixed;
left:0;top:0;right:0;bottom:0;
background:rgba(0,0,0,.4);
z-index:999;
}

.sidebar-backdrop.show{
display:block;
}

.table-wrapper table,
.table-wrapper thead,
.table-wrapper tbody,
.table-wrapper th,
.table-wrapper td,
.table-wrapper tr{
display:block;
}

.table-wrapper thead{
display:none;
}

.table-wrapper tbody tr{
padding:12px;
margin-bottom:10px;
border:1px solid var(--border-light);
border-radius:var(--radius-md);
background:#fff;
box-shadow:var(--shadow-xs);
}

.table-wrapper tbody td{
display:flex;
justify-content:space-between;
padding:6px 0;
border:none;
font-size:12px;
}

.table-wrapper tbody td::before{
content:attr(data-label);
font-weight:600;
color:var(--text-light);
font-size:11px;
flex-shrink:0;
margin-right:8px;
}

.table-wrapper tbody td:not(:last-child){
border-bottom:1px solid var(--border-light);
}

.table-wrapper tbody td.number{
justify-content:space-between;
}

#invBody td:first-child,
#poBody td:first-child,
#shipBody td:first-child{
display:flex;
justify-content:space-between;
align-items:center;
}
}

@media(max-width:480px){
#content > section > .page-header{
flex-direction:column;
align-items:stretch;
}

#content > section > .page-header input,
#content > section > .page-header .search-box{
max-width:100% !important;
}
}

/* Print */
@media print{
.sidebar,
.topbar,
.toast-container,
.modal,
.drawer,
#reportFilterBar{
display:none !important;
}

.main{
overflow:visible;
}

#content{
padding:0;
}

.kpi-card,
.panel,
.table-wrapper{
box-shadow:none;
border:1px solid #ddd;
break-inside:avoid;
}

/* Reports print */
#reportsPage{
display:block !important;
}

.print-signatures{
display:flex !important;
flex-direction:column;
gap:24px;
margin-top:40px;
padding-top:20px;
border-top:1px solid #ccc;
page-break-inside:avoid;
}

.sig-line{
display:flex;
align-items:center;
gap:12px;
font-size:13px;
}

.sig-space{
min-width:180px;
border-bottom:1px solid #000;
margin-right:20px;
}

.page-header .btn-primary{
display:none !important;
}

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

.kpi-card h2{
font-size:24px !important;
}
}