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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{
    background:#f4f7fb;
    color:#1f2937;
}

a{
    text-decoration:none;
}

button{
    cursor:pointer;
    transition:.3s;
}

.page{
    animation:fade .25s ease;
}

@keyframes fade{

from{

opacity:0;
transform:translateY(15px);

}

to{

opacity:1;
transform:translateY(0);

}

}

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

.login-page{

width:100%;
height:100vh;

display:flex;

justify-content:center;
align-items:center;

background:linear-gradient(135deg,#0f172a,#1e3a8a);

}

.login-box{

width:420px;

background:#fff;

border-radius:18px;

padding:45px;

box-shadow:0 20px 60px rgba(0,0,0,.15);

text-align:center;

}

.login-box h1{

font-size:42px;

color:#2563eb;

margin-bottom:8px;

}

.login-box p{

color:#6b7280;

margin-bottom:30px;

}

.login-form{

display:flex;
flex-direction:column;
gap:18px;

text-align:left;

}

.login-form label{

font-weight:600;

}

.login-form input{

height:48px;

border:1px solid #d1d5db;

border-radius:10px;

padding:0 15px;

font-size:15px;

}

.login-form input:focus{

outline:none;

border-color:#2563eb;

}

.login-form button{

height:50px;

border:none;

border-radius:10px;

background:#2563eb;

color:#fff;

font-size:16px;

font-weight:600;

}

.login-form button:hover{

background:#1d4ed8;

}

/*=========================================
            APP
=========================================*/

#app{

display:flex;

min-height:100vh;

}

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

.sidebar{

width:260px;

background:#111827;

color:#fff;

display:flex;

flex-direction:column;

}

.logo{

padding:28px;

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

}

.logo h1{

font-size:28px;

margin-bottom:5px;

}

.logo p{

font-size:13px;

opacity:.7;

}

.menu{

list-style:none;

padding:18px;

}

.menu li{

padding:15px 18px;

margin-bottom:10px;

border-radius:10px;

cursor:pointer;

transition:.3s;

display:flex;

align-items:center;

gap:12px;

font-weight:500;

}

.menu li:hover{

background:#2563eb;

}

.menu li.active{

background:#2563eb;

}

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

.content{

flex:1;

padding:30px;

}

header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;

}

header h1{

font-size:30px;

}

header p{

margin-top:6px;

color:#6b7280;

}

.profile{

background:#2563eb;

color:#fff;

padding:12px 20px;

border-radius:10px;

font-weight:600;

}

/*=========================================
            CARDS
=========================================*/

.cards{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:20px;

margin-bottom:30px;

}

.card{

background:#fff;

padding:18px 20px;

border-radius:15px;

box-shadow:0 5px 20px rgba(0,0,0,.05);

min-height:100px;

display:flex;

flex-direction:column;

justify-content:center;

}

.card h3{

font-size:15px;

color:#6b7280;

margin-bottom:12px;

}

.card h2{

font-size:34px;

color:#2563eb;

}

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

.table-box{

background:#fff;

padding:20px;

border-radius:15px;

box-shadow:0 5px 20px rgba(0,0,0,.05);

}

.table-box h2{

margin-bottom:20px;

}

table{

width:100%;

border-collapse:collapse;

}

thead{

background:#2563eb;

color:#fff;

}

th{

padding:15px;

font-size:14px;

text-align:left;

}

td{

padding:14px;

border-bottom:1px solid #e5e7eb;

font-size:14px;

}

tbody tr:hover{

background:#f9fafb;

}

.action-btn{

padding:8px 14px;

border:none;

border-radius:8px;

background:#2563eb;

color:#fff;

font-size:13px;

}

.action-btn:hover{

background:#1d4ed8;

}

/*=========================================
        DOCUMENT VIEW
=========================================*/

.document{

background:#fff;

border-radius:15px;

padding:40px;

box-shadow:0 5px 20px rgba(0,0,0,.05);

}

/*=========================================
        AGREEMENT FLOW
=========================================*/

.agreement-action{

display:flex;

justify-content:flex-end;

gap:15px;

margin-top:35px;

}

.primary-btn,
.secondary-btn,
.danger-btn{

padding:12px 28px;

border:none;

border-radius:10px;

font-weight:600;

cursor:pointer;

}

.primary-btn{

background:#2563eb;

color:#fff;

}

.primary-btn:hover{

background:#1d4ed8;

}

.secondary-btn{

background:#e5e7eb;

color:#111827;

}

.secondary-btn:hover{

background:#d1d5db;

}

.danger-btn{

background:#dc2626;

color:#fff;

}

.danger-btn:hover{

background:#b91c1c;

}

#signPage,
#cameraPage{

display:none;

margin-top:30px;

}


.document-title{

text-align:center;

font-size:30px;

margin-bottom:30px;

font-weight:700;

color:#111827;

}

.document-body{

line-height:32px;

font-size:17px;

text-align:justify;

margin-bottom:40px;

white-space:pre-wrap;

}

.document hr{

margin:35px 0;

border:none;

border-top:1px solid #e5e7eb;

}

/*=========================================
        ATTACHMENT
=========================================*/

.attachment-box{

margin-top:30px;

text-align:center;

}

.attachment-box h3{

margin-bottom:20px;

}

#attachmentPreview{

max-width:100%;

border-radius:12px;

border:1px solid #d1d5db;

box-shadow:0 10px 30px rgba(0,0,0,.08);

}

/*=========================================
        SIGNATURE
=========================================*/

#signaturePad{

display:block;

width:100%;

height:220px;

border:2px dashed #9ca3af;

border-radius:10px;

background:#fff;

touch-action:none;

cursor:crosshair;

}

.signature-btns{

display:flex;

justify-content:flex-end;

margin-top:15px;

}

.signature-btns button{

padding:10px 22px;

background:#ef4444;

border:none;

border-radius:8px;

color:#fff;

font-weight:600;

}

.signature-btns button:hover{

background:#dc2626;

}

/*=========================================
            CAMERA
=========================================*/

.camera-box{

margin-top:20px;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

gap:20px;

}

#camera{

width:100%;

max-width:700px;

border-radius:15px;

background:#000;

}

#capturedPhoto{

display:none;

max-width:700px;

width:100%;

border-radius:15px;

border:1px solid #d1d5db;

}

.camera-btns{

display:flex;

justify-content:center;

gap:20px;

margin-top:20px;

}

.camera-btns button{

padding:12px 25px;

border:none;

border-radius:10px;

background:#2563eb;

color:#fff;

font-weight:600;

}

.camera-btns button:hover{

background:#1d4ed8;

}

/*=========================================
        LOCATION
=========================================*/

.location-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

margin-top:25px;

}

.location-grid label{

display:block;

margin-bottom:8px;

font-weight:600;

}

.location-grid input{

width:100%;

height:48px;

padding:0 15px;

border:1px solid #d1d5db;

border-radius:10px;

background:#f9fafb;

}

/*=========================================
        SUBMIT
=========================================*/

.submit-box{

margin-top:40px;

text-align:center;

}

.submit-box button{

padding:15px 45px;

font-size:17px;

font-weight:600;

border:none;

border-radius:12px;

background:#16a34a;

color:#fff;

transition:.3s;

}

.submit-box button:hover{

background:#15803d;

transform:translateY(-2px);

}

/*=========================================
        STATUS COLORS
=========================================*/

.status{

padding:6px 12px;

border-radius:30px;

font-size:13px;

font-weight:600;

display:inline-block;

}

.status.pending{

background:#fef3c7;

color:#92400e;

}

.status.accepted{

background:#dcfce7;

color:#166534;

}

.status.rejected{

background:#fee2e2;

color:#991b1b;

}

/*=========================================
        SCROLLBAR
=========================================*/

::-webkit-scrollbar{

width:8px;

height:8px;

}

::-webkit-scrollbar-thumb{

background:#2563eb;

border-radius:50px;

}

::-webkit-scrollbar-track{

background:#edf2f7;

}



@media(max-width:600px){

.cards{

grid-template-columns:1fr;

}

header{

flex-direction:column;

align-items:flex-start;

gap:15px;

}

.document-top{

flex-direction:column;

gap:12px;

}

.camera-btns{

flex-direction:column;

}

.submit-box button{

width:100%;

}

table{

font-size:12px;

}

th,
td{

padding:10px;

}

}

.title{

text-align:center;

margin:40px 0;

font-size:34px;

}

.declaration-box{

font-size:18px;

line-height:34px;

margin-bottom:40px;

}

.attachment-box{

text-align:center;

}

.attachment-box img{

max-width:100%;

border-radius:10px;

border:1px solid #ddd;

}

#agreementPage{

display:block;

}

/*=========================================
        MOBILE RESPONSIVE PART-1
=========================================*/

.menu-toggle{
display:none;
}

#overlay{
display:none;
}

@media screen and (max-width:992px){

html,
body{

width:100%;
overflow-x:hidden;

}

body{

-webkit-text-size-adjust:100%;

}

#app{

display:block;

min-height:100dvh;

}

.menu-toggle{

display:flex;

align-items:center;

justify-content:center;

width:46px;

height:46px;

border:none;

border-radius:12px;

background:#2563eb;

color:#fff;

font-size:22px;

flex-shrink:0;

}

#overlay{

position:fixed;

top:0;
left:0;

width:100%;
height:100dvh;

background:rgba(0,0,0,.45);

display:none;

z-index:998;

}

#overlay.show{

display:block;

}

.sidebar{

position:fixed;

top:0;

left:-270px;

width:260px;

height:100dvh;

transition:.35s;

z-index:999;

overflow-y:auto;

}

.sidebar.show{

left:0;

}

.content{

width:100%;

padding:16px;

}

header{

display:flex;

align-items:center;

gap:15px;

margin-bottom:22px;

}

.header-title{

flex:1;

min-width:0;

}

header h1{

font-size:22px;

line-height:28px;

}

header p{

font-size:14px;

}

.profile{

padding:10px 14px;

font-size:14px;

}

.cards{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:12px;

margin-bottom:20px;

}

.card{

padding:16px;

min-height:95px;

border-radius:14px;

display:flex;

flex-direction:column;

justify-content:center;

}

.card h3{

font-size:13px;

margin-bottom:6px;

}

.card h2{

font-size:28px;

}

}

/*=========================================
        TABLES
=========================================*/

.table-box{

padding:15px;

border-radius:14px;

overflow:hidden;

}

.table-box h2{

font-size:18px;

margin-bottom:15px;

}

table{

width:100%;

table-layout:fixed;

border-collapse:collapse;

}

thead{

display:none;

}

tbody{

display:block;

}

tbody tr{

display:block;

background:#fff;

border:1px solid #e5e7eb;

border-radius:12px;

padding:14px;

margin-bottom:14px;

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

}

tbody td{

display:block;

border:none;

padding:4px 0;

font-size:14px;

word-break:break-word;

}

tbody td:last-child{

padding-top:12px;

}

.action-btn{

width:100%;

height:42px;

font-size:15px;

}


/*=========================================
        DOCUMENT
=========================================*/

.document{

padding:18px;

border-radius:14px;

}

#letterHead{

display:block;

}

#letterHead .left{

margin-bottom:18px;

}

#letterHead .right{

text-align:left;

}

#letterHead h1{

font-size:28px;

}

.document-title{

font-size:24px;

margin:20px 0;

}

.document-body{

font-size:16px;

line-height:30px;

text-align:left;

word-break:break-word;

}

.attachment-box{

margin-top:20px;

}

#attachmentPreview{

width:100%;

height:auto;

display:block;

}


/*=========================================
        BUTTONS
=========================================*/

.agreement-action{

display:flex;

flex-direction:column;

gap:10px;

}

.agreement-action button{

width:100%;

height:48px;

font-size:15px;

}

.signature-btns{

display:flex;

flex-direction:column;

gap:10px;

}

.signature-btns button{

width:100%;

height:46px;

}

.camera-btns{

display:flex;

flex-direction:column;

gap:10px;

}

.camera-btns button{

width:100%;

height:46px;

}

.submit-box{

display:flex;

flex-direction:column;

gap:10px;

}

.submit-box button{

width:100%;

}

/*=========================================
        SIGNATURE & CAMERA
=========================================*/

#signaturePad{

width:100%;

height:220px;

}

#camera{

width:100%;

max-width:100%;

height:auto;

border-radius:12px;

display:block;

}

#capturedPhoto{

width:100%;

max-width:100%;

height:auto;

display:block;

border-radius:12px;

}

.location-grid{

display:grid;

grid-template-columns:1fr;

gap:12px;

margin-top:18px;

}

.location-grid input{

font-size:16px;

height:46px;

}


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

.login-box{

width:92%;

padding:30px 22px;

}

.login-box h1{

font-size:34px;

}

.login-form input{

font-size:16px;

}

.login-form button{

height:48px;

}


/*=========================================
        iPHONE FIX
=========================================*/

input,
select,
textarea,
button{

font-size:16px;

}

img{

max-width:100%;

height:auto;

}

canvas{

max-width:100%;

}



/*=========================================
        SMALL MOBILE
=========================================*/

@media screen and (max-width:480px){

.cards{

grid-template-columns:1fr;

}

header{

align-items:flex-start;

}

.profile{

width:100%;

text-align:center;

}

.document{

padding:15px;

}

.document-title{

font-size:21px;

}

.document-body{

font-size:15px;

line-height:28px;

}

#letterHead h1{

font-size:24px;

}

}

.page-loader{

position:fixed;
top:0;
left:0;
right:0;
bottom:0;

background:#fff;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

z-index:99999;

}

.page-loader.hide{

display:none;

}

.spinner{

width:55px;
height:55px;

border:5px solid #ddd;
border-top:5px solid #2563eb;

border-radius:50%;

animation:spin .8s linear infinite;

margin-bottom:20px;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

/*=========================================
        NEW PDF LAYOUT
=========================================*/

#pdfTemplate{

width:794px;

background:#fff;

padding:45px;

color:#000;

font-family:'Poppins',sans-serif;

}

#pdfLetterHead{

display:flex;

justify-content:space-between;

align-items:flex-start;

padding-bottom:18px;

border-bottom:2px solid #000;

margin-bottom:30px;

}

.pdf-left h1{

font-size:32px;

margin:0;

}

.pdf-left p{

margin-top:8px;

font-size:15px;

color:#555;

}

.pdf-right{

text-align:right;

font-size:15px;

line-height:28px;

}

#pdfTitle{

text-align:center;

font-size:12px;

margin:20px 0;

font-weight:700;

}

#pdfDeclaration{

font-size:10px;

line-height:25px;

text-align:justify;

white-space:pre-wrap;

}

/*========================
Attachment
========================*/

#pdfAttachmentSection{

margin-top:35px;

page-break-before:always;

page-break-inside:avoid;

}

.pdf-section-title{

text-align:center;

font-size:22px;

margin-bottom:20px;

}

#pdfAttachment{

display:block;

max-width:100%;

max-height:520px;

margin:0;

border:1px solid #ccc;

padding:6px;

}

/*========================
Bottom Section
========================*/

#pdfBottomSection{

margin-top:40px;

page-break-inside:avoid;

}

.pdfBottomRow{

display:flex;

justify-content:space-between;

align-items:flex-start;

gap:40px;

}

.pdfLeftBox,
.pdfRightBox{

width:48%;

}

.pdfLeftBox h3,
.pdfRightBox h3{

text-align:center;

margin-bottom:12px;

}

#pdfSelfie{

width:220px;

height:auto;

border:1px solid #bbb;

display:block;

}

#pdfSignature{

width:280px;

height:auto;

border:1px solid #bbb;

display:block;

margin-left:auto;

}

.pdfLocation{

margin-top:18px;

font-size:15px;

line-height:28px;

text-align:left;

}

.hideAttachment{

display:none !important;

}