/* =====================================
LEGALVAULT MOBILE VERSION
MAX 768PX
===================================== */


@media(max-width:768px){



/* ==========================
GLOBAL
========================== */


html,
body{

width:100%;

overflow-x:hidden;

}



/* ==========================
TOPBAR
========================== */


.topbar{

height:60px;

padding:0 12px;

}



.topbar-title{

font-size:20px;

}



.topbar-title .logo{

font-size:26px;

}




.menu-btn{

width:44px;

height:44px;

z-index:99999;

}






/* ==========================
SIDEBAR (drawer — ไม่ทับ/ไม่กินพื้นที่ content)
========================== */


#sidebar{

position:fixed;

top:0;

left:0;

width:0;

height:0;

z-index:10000;

overflow:visible;

pointer-events:none;

}



#sidebar .topbar,
#sidebar .sidebar-panel,
#sidebar .sidebar-backdrop{

pointer-events:auto;

}



.sidebar-backdrop{

display:none;

position:fixed;

inset:0;

top:60px;

background:rgba(15,23,42,.45);

z-index:10000;

}



.sidebar-backdrop.active{

display:block;

}



.sidebar-panel{

position:fixed;

top:60px;

left:0;

width:min(280px, 82vw);

height:calc(100vh - 60px);

background:#111827;

color:#fff;

transform:translateX(-105%);

overflow-y:auto;

overflow-x:hidden;

transition:transform .28s ease;

z-index:10001;

box-shadow:none;

}



.sidebar-panel.active{

transform:translateX(0);

box-shadow:8px 0 28px rgba(0,0,0,.35);

}




.sidebar-menu{


padding:12px;

}




.sidebar-menu a{


padding:12px;

font-size:17px;


}




.menu-icon{


font-size:20px;

}



/* ==========================
CONTENT
========================== */


.content{


margin-left:0!important;

width:100%!important;

margin-top:60px;

padding:12px!important;


}





/* ==========================
TITLE
========================== */


.page-title{


font-size:22px;

margin-bottom:15px;


}




.card-title{


font-size:18px;


}




/* ==========================
CARD
========================== */


.card{


width:100%;

padding:15px;


border-radius:12px;


}




.user-box{


font-size:17px;

word-break:break-word;


}





/* ==========================
FORM
========================== */


.form-row,
.form-grid,
.grid,
.search-row,
.search-row-long,
.case-row,
.bottom-row,
.case-inputs{


display:grid;

grid-template-columns:1fr;

gap:10px;


}



input,
select,
textarea{


width:100%;

font-size:18px;

min-height:44px;


}




textarea{


min-height:120px;


}



/* ==========================
BUTTON
========================== */


button,
.btn{


width:auto;

min-height:42px;

font-size:17px;


}




.search-buttons{


display:flex;

flex-direction:column;

gap:10px;


}



.search-buttons button{


width:100%;


}



/* ==========================
TABLE
========================== */


.table-scroll,
.table-wrapper{


width:100%;

overflow-x:auto;

-webkit-overflow-scrolling:touch;


}



.file-table-scroll{


width:100%;

max-height:50vh;

overflow-x:auto;

overflow-y:auto;

-webkit-overflow-scrolling:touch;


}




table{


min-width:800px;

font-size:17px;


}




table th,
table td{


padding:10px;


}





/* ==========================
MODAL
========================== */


.modal-box{


width:95%!important;

max-width:95%!important;

max-height:85vh;

overflow:auto;

padding:18px;


}




/* ==========================
CASE PROGRESS
========================== */


.progress-container{


min-width:0;


}




.progress-card{


padding:15px;


}




.progress-header{


display:flex;

flex-direction:column;

gap:6px;


}




.progress-no{


font-size:17px;


}




.progress-date{


font-size:16px;


}




.progress-body{


font-size:17px;


}




.progress-detail{


font-size:17px;


}




.progress-files .btn{


width:100%;


}




.progress-pagination{


display:flex;

flex-direction:column;

gap:10px;

align-items:center;


}



.progress-pagination .btn{


width:100%;


}




/* ==========================
LOGIN
========================== */


.login-page{


padding:15px;


}



.login-box{


width:100%;

max-width:380px;

padding:25px;


}





img,
iframe{


max-width:100%;

height:auto;


}



}







/* =====================================
SMALL PHONE
480PX
===================================== */


@media(max-width:480px){


.topbar-title{


font-size:18px;


}


.topbar-title .logo{


font-size:22px;


}


.menu-btn{


width:40px;

height:40px;


}


.content{


padding:10px!important;


}


.page-title{


font-size:20px;


}


.card{


padding:12px;


}


}
/* =====================================
 MOBILE ADMIN CARD
===================================== */


.mobile-page{

background:#f5f6fa;

}


/* หน้า /mobile/* ใช้ drawer เสมอ — กันแท็บข้างทับ content ทุกความกว้างจอ */
body.mobile-page .content{

margin-left:0 !important;

width:100% !important;

max-width:100% !important;

margin-top:60px;

}


body.mobile-page .sidebar-panel,
#mobileNavFrontLayer .sidebar-panel{

position:fixed !important;

top:60px !important;

left:0 !important;

width:min(280px, 82vw) !important;

height:calc(100vh - 60px) !important;

transform:translateX(-105%);

z-index:2147483002 !important;

}


body.mobile-page .sidebar-panel.active,
#mobileNavFrontLayer .sidebar-panel.active{

transform:translateX(0) !important;

}


body.mobile-page #sidebar{

position:fixed;

top:0;

left:0;

width:0;

height:0;

overflow:visible;

pointer-events:none;

z-index:0;

}


#mobileNavFrontLayer{

position:fixed !important;

inset:0 !important;

width:100% !important;

height:100% !important;

z-index:2147483000 !important;

pointer-events:none !important;

}


#mobileNavFrontLayer .topbar,
#mobileNavFrontLayer .sidebar-backdrop,
#mobileNavFrontLayer .sidebar-panel,
#mobileNavFrontLayer .menu-btn{

pointer-events:auto !important;

}


#mobileNavFrontLayer .topbar{

z-index:2147483002 !important;

}


#mobileNavFrontLayer .sidebar-backdrop{

z-index:2147483001 !important;

}




.mobile-card{


background:white;


padding:20px;


border-radius:15px;


margin-bottom:15px;


box-shadow:

0 5px 15px rgba(0,0,0,.08);


}




.mobile-card h3{


font-size:20px;


margin-bottom:10px;


}




.mobile-card p{


color:#64748b;


}





.mobile-card a{


display:block;


margin-top:15px;


background:#2563eb;


color:white;


text-align:center;


padding:12px;


border-radius:10px;


text-decoration:none;


font-weight:600;


}





.user-info{


background:#111827;


color:white;


padding:18px;


border-radius:15px;


margin-bottom:20px;


font-size:16px;


line-height:2;


}
@media(max-width:768px){


body.mobile-page .content,
.content{

    margin-left:0 !important;
    width:100% !important;
    max-width:100% !important;

}


/* กัน desktop sidebar ค้างทับหน้าบนจอแคบ */
body.mobile-page .sidebar-panel:not(.active){

    transform:translateX(-105%) !important;

}


}