/* =====================================================
LEGALVAULT MAIN STYLE
PART 4 : TOPBAR + SIDEBAR
===================================================== */


/* =========================
RESET
========================= */

*{

    box-sizing:border-box;

    font-family:inherit;

}


html,
body{

    margin:0;

    padding:0;

    width:100%;

    min-height:100%;

    background:#eef1f5;

    color:#152033;

    overflow-x:hidden;

    font-family:"Sarabun","Source Sans 3","Segoe UI",Tahoma,sans-serif;

    font-size:18px;

    line-height:1.7;

    -webkit-font-smoothing:antialiased;

}





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


.topbar{


    position:fixed;


    top:0;


    left:0;


    right:0;



    height:60px;



    background:#0b1f33;



    display:flex;



    align-items:center;



    padding:0 18px;



    z-index:9999;



    box-shadow:

    0 2px 10px rgba(0,0,0,.2);

    border-bottom:2px solid #9a7b4f;


}





.topbar-left{


    display:flex;


    align-items:center;


    gap:15px;


}




.topbar-title{


    display:flex;


    align-items:center;


    gap:8px;


    color:white;


    font-size:22px;


    font-weight:700;


}




.topbar-title .logo{


    font-size:28px;


}






/* =====================================================
3 LINE BUTTON
===================================================== */


.menu-btn{


    width:44px;


    height:44px;


    background:#2563eb;


    border:none;


    border-radius:10px;


    cursor:pointer;



    display:flex;



    flex-direction:column;



    justify-content:center;



    align-items:center;



    gap:5px;



}




.menu-btn span{


    width:24px;


    height:3px;


    background:white;


    border-radius:5px;


}





.menu-btn:hover{


    background:#1d4ed8;


}




/* =====================================================
   DESKTOP SIDEBAR
===================================================== */


.sidebar-panel{

    position:fixed;

    top:60px;

    left:0;

    width:250px;

    height:calc(100vh - 60px);

    background:#111827;

    color:white;

    z-index:9000;

    overflow-y:auto;

    box-shadow:
    3px 0 15px rgba(0,0,0,.25);

}



/* ไม่ต้อง slide บน desktop */

.sidebar-panel.active{

    transform:none;

}






/* =====================================================
MENU
===================================================== */


.sidebar-menu{


    padding:20px;


}





.sidebar-menu a{


    display:flex;


    align-items:center;


    gap:12px;



    padding:13px 15px;



    margin-bottom:8px;



    border-radius:10px;



    color:white;



    text-decoration:none;



    font-size:15px;



}




.sidebar-menu a:hover{


    background:#2563eb;


}







/* =====================================================
CONTENT
===================================================== */
.content{

    margin-top:60px;

    margin-left:250px;

    padding:30px;

    min-height:100vh;

    position:relative;

    z-index:1;

}


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


.card{


    background:white;


    padding:25px;


    border-radius:15px;


    margin-bottom:20px;


    box-shadow:


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


}




.user-info{


    background:#1f2937;


    color:white;


    padding:15px;


    border-radius:10px;


    margin-bottom:20px;


}




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


button,
.btn{


    cursor:pointer;


}
.menu-btn{

position:relative;

z-index:99999;

}


.topbar{

z-index:100000;

}
/* =====================================================
LOGIN PAGE
===================================================== */

body.login-page{

    margin:0;

    background:#f5f6fa;

    min-height:100vh;

}


body.login-page #sidebar{

    display:none;

}



body.login-page .content{

    margin:0;

    padding:0;

}




.login-page{


    min-height:100vh;


    display:flex;


    justify-content:center;


    align-items:center;


    padding:20px;


}




.login-box{


    width:380px;


    background:white;


    padding:35px;


    border-radius:16px;


    box-shadow:


    0 10px 30px rgba(0,0,0,.15);


    text-align:center;


}




.login-box h1{


    margin-bottom:10px;


    color:#1e293b;


}




.login-box p{


    color:#64748b;


    margin-bottom:25px;


}




.login-box input{


    width:100%;


    height:45px;


    padding:0 15px;


    margin-bottom:15px;


    border:1px solid #cbd5e1;


    border-radius:8px;


}




.login-box button{


    width:100%;


    height:45px;


    background:#2563eb;


    color:white;


    border:none;


    border-radius:8px;


    cursor:pointer;


}
.layout{

    display:flex;

    min-height:100vh;

}



.sidebar{

    width:250px;

}




.table-select{

width:100%;

padding:12px;

font-size:16px;

border-radius:10px;

border:1px solid #ddd;

}


.data-table{

width:100%;

border-collapse:collapse;

margin-top:20px;

}



.data-table th{

background:#1e293b;

color:white;

padding:10px;

}



.data-table td{

padding:10px;

border-bottom:1px solid #ddd;

}



.table-scroll{

overflow-x:auto;

}
/* =====================================
SIDEBAR IMPROVEMENT
===================================== */


.sidebar-header{

padding:20px;

border-bottom:1px solid rgba(255,255,255,.15);

}



.sidebar-brand{

display:flex;

align-items:center;

gap:12px;

font-size:22px;

font-weight:700;

}



.brand-icon{

font-size:32px;

}



.brand-text{

color:white;

}





.sidebar-menu a{


display:flex;

align-items:center;


gap:15px;


padding:14px 18px;


margin-bottom:8px;


border-radius:12px;


transition:.25s;


}





.menu-icon{


font-size:22px;


width:32px;


display:flex;


justify-content:center;


}



.menu-text{


font-size:15px;


font-weight:500;


}




.sidebar-menu a:hover{


background:#2563eb;


transform:translateX(5px);


}




.sidebar-menu a.active{


background:#2563eb;


}
/* =====================================
   DOCUMENT DETAIL FONT BALANCE
===================================== */


/* หัวข้อหลัก */
.page-title{

    font-size:34px;
    font-weight:700;

}



/* หัวข้อ Card */
.card-title{

    font-size:22px;

    font-weight:700;

    color:#1e293b;

}



/* Label ด้านซ้าย */
.label{

    font-size:18px;

    font-weight:700;

    color:#334155;

}



/* ข้อมูลรายละเอียด */
.value{

    font-size:18px;

    font-weight:500;

    color:#111827;

    line-height:1.6;

}



/* ปุ่ม */
.btn{

    font-size:16px;

    font-weight:600;

}



/* ตาราง */
table th{

    font-size:17px;

}


table td{

    font-size:16px;

}



/* กล่อง Folder */
#folderPath{

    font-size:16px;

    line-height:1.6;

}



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


.progress-container{

    font-size:17px;

}



.progress-card{

    background:#ffffff;

    border-radius:12px;

    padding:20px;

    margin-bottom:18px;

    box-shadow:
    0 4px 15px rgba(0,0,0,.08);

}



.progress-header{

    font-size:18px;

    font-weight:700;

}



.progress-no{

    font-size:19px;

}



.progress-date{

    font-size:16px;

    color:#475569;

}



.progress-body{

    margin-top:15px;

    font-size:17px;

    line-height:1.7;

}



.progress-row{

    margin-bottom:12px;

}



.progress-detail{

    background:#f8fafc;

    padding:15px;

    border-radius:10px;

    font-size:17px;

    line-height:1.8;

}



/* Pagination */

.progress-pagination span{

    font-size:18px;

}


/* Modal */

.modal-box h2{

    font-size:24px;

}



.modal-box label{

    font-size:17px;

}


.modal-box input,
.modal-box textarea,
.modal-box select{

    font-size:17px;

}
/* =====================================
CASE PROGRESS RESPONSIVE
===================================== */


.progress-scroll{

    width:100%;

    overflow-x:auto;

    overflow-y:hidden;

    -webkit-overflow-scrolling:touch;

}



.progress-container{

    width:100%;

}



.progress-card{

    width:100%;

    background:white;

    border-radius:12px;

    padding:20px;

    margin-bottom:18px;

    box-shadow:
    0 4px 15px rgba(0,0,0,.08);

}



.progress-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

    flex-wrap:wrap;

}



.progress-body{

    width:100%;

}



.progress-detail{

    word-break:break-word;

    white-space:pre-line;

}




/* MOBILE */

@media(max-width:768px){


.progress-scroll{

    overflow-x:auto;

}



.progress-container{

    min-width:650px;

}



.progress-card{

    width:650px;

}



.progress-header{

    flex-direction:column;

    align-items:flex-start;

}


}
.table-scroll{

    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;

}


.table-scroll table{

    min-width:700px;

}
.file-table-scroll{

    width:100%;
    max-height:420px;
    overflow-x:auto;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;

}


.file-table-scroll table{

    min-width:800px;

}
/* ===============================
   LOGIN NOTIFICATION
================================ */


.login-notification{


position:fixed;


top:30px;


right:30px;


min-width:320px;


max-width:420px;


padding:16px 20px;


border-radius:12px;


color:white;


font-size:15px;


line-height:1.5;


z-index:99999;


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


animation:
loginNotifyIn .35s ease;


backdrop-filter:blur(5px);


}



/* SUCCESS */

.login-notification.success{


background:#16a34a;


}



/* ERROR */

.login-notification.error{


background:#dc2626;


}



/* INFO */

.login-notification.info{


background:#2563eb;


}



/* WARNING */

.login-notification.warning{


background:#d97706;


}




.login-notification div:first-child{


font-size:16px;


margin-bottom:5px;


}



/* Animation */

@keyframes loginNotifyIn{


from{


opacity:0;


transform:
translateX(100px);


}



to{


opacity:1;


transform:
translateX(0);


}


}




/* Mobile */

@media(max-width:600px){


.login-notification{


top:20px;


left:20px;


right:20px;


min-width:auto;


max-width:none;


font-size:14px;


}



}
/* ===============================
   LOGIN OTP BOX
================================ */


#otpBox{


display:none;


margin-top:20px;


padding:20px;


background:#f8fafc;


border:1px solid #cbd5e1;


border-radius:12px;


animation:
otpShow .3s ease;


}



#otpBox input{


width:100%;


height:45px;


padding:0 15px;


text-align:center;


font-size:22px;


letter-spacing:8px;


border:1px solid #94a3b8;


border-radius:10px;


}



#otpBox button{


margin-top:15px;


background:#16a34a;


}




@keyframes otpShow{


from{

opacity:0;

transform:
translateY(-10px);

}


to{

opacity:1;

transform:
translateY(0);

}


}
/* ===============================
CASE FILE TOGGLE
================================ */


#caseFileContainer{

animation:fadeFile .25s ease;

}



@keyframes fadeFile{


from{

opacity:0;
transform:translateY(-10px);

}


to{

opacity:1;
transform:translateY(0);

}


}



#btnCaseFiles{

min-width:180px;

}



.file-table-scroll{

background:white;

border-radius:12px;

overflow-x:auto;

overflow-y:auto;

max-height:420px;

box-shadow:
0 3px 10px rgba(0,0,0,.05);

}



.file-table-scroll table{

margin:0;

}



.file-table-scroll th{

font-size:17px;

}



.file-table-scroll td{

font-size:18px;

line-height:1.45;

}



.file-empty{

padding:30px;

text-align:center;

color:#64748b;

}