@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

*{

    --headingfont:'Google Sans';

    --textfont:'Google Sans';

    box-sizing:border-box;

}

body{

    margin:0;

    padding:30px;

    background:#f5f5f5;

    font-family:var(--textfont);

    color:#111;

}

/* MAIN CONTAINERS */

.container{

    width:100%;

    max-width:1600px;

    margin:auto;
    margin-bottom: 20px;

    background:white;

    padding:30px;

    border:1px solid #ddd;

    overflow-x:auto;

}

.page{

    width:100%;

    max-width:1200px;

    margin:auto;

    background:white;

    padding:30px;

    border:1px solid #ddd;

}

/* HEADINGS */

h1{

    margin-top:0;

    margin-bottom:15px;

    font-family:var(--headingfont);

    font-size:42px;

    font-weight:700;

}

h2{

    margin-top:0;

    margin-bottom:20px;

    font-family:var(--headingfont);

}

/* TOP SECTION */

.top-section{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:35px;

}

/* TABLE */

table{

    width:100%;

    border-collapse:collapse;

    table-layout:fixed;

}

.salary-table{

    min-width:1450px;

}

th{

    background:black;

    color:white;

    text-align:center;

    padding:16px 12px;

    font-size:14px;

    font-weight:600;

    border:1px solid #222;

}

td{

    padding:12px;

    border:1px solid #eee;

    vertical-align:middle;

    font-size:15px;

}

tr:hover{

    background:#fafafa;

}

/* TABLE INPUTS */

.salary-table input{

    width:100%;

    min-width:0;

    padding:10px;

    border:1px solid #ddd;

    font-size:14px;

    font-family:var(--textfont);

    background:white;

    border-radius:4px;

}

.salary-table input:focus{

    outline:none;

    border-color:black;

}

/* READONLY UIF */

.salary-table .uif{

    background:#f3f3f3;

}

/* NUMBER COLUMNS */

.salary-number{

    text-align:right;

    white-space:nowrap;

}

/* TOTAL ROW */

.salary-total td{

    background:#fafafa;

    font-weight:700;

    font-size:16px;

}

/* YELLOW CALC ROW */

.salary-highlight td{

    background:#f5e663;

    font-weight:700;

    font-size:16px;

}

/* BUTTONS */

button{

    background:black;

    color:white;

    border:none;

    padding:14px 24px;

    cursor:pointer;

    font-size:15px;

    font-family:var(--textfont);

    border-radius:6px;

    transition:0.2s;

}

button:hover{

    opacity:0.9;

}

/* PRINT BUTTON */

.print-button{

    background:black;

    color:white;

    width:100%;

    min-width:120px;

    padding:12px;

    font-size:14px;

}

.print-button:hover{

    background:#222;

}

/* ACTION BUTTONS */

.salary-actions{

    display:flex;

    gap:15px;

    align-items:center;

    flex-wrap:wrap;

}

/* FORMS */

.form-group{

    margin-bottom:25px;

}

label{

    display:block;

    margin-bottom:10px;

    font-weight:600;

}

input,
select,
textarea{

    width:100%;

    padding:15px;

    border:1px solid #ddd;

    font-size:16px;

    font-family:var(--textfont);

    background:white;

    border-radius:4px;

}

textarea{

    resize:vertical;

    min-height:120px;

}

/* MODALS */

.modal{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,0.5);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;

    padding:20px;

}

.modal-box{

    width:100%;

    max-width:500px;

    background:white;

    padding:35px;

    border-radius:10px;

}

.modal-actions{

    display:flex;

    gap:15px;

    margin-top:30px;

}

.secondary-button{

    background:#ddd;

    color:black;

}

.secondary-button:hover{

    background:#ccc;

}

/* SUCCESS / ERROR */

.success{

    background:#e8f5e9;

    border:1px solid #81c784;

    padding:15px;

    margin-bottom:20px;

}

.error{

    background:#ffebee;

    border:1px solid #e57373;

    padding:15px;

    margin-bottom:20px;

}

/* PAYSLIP */

.payslip{

    max-width:900px;

    margin:auto;

    background:white;

    padding:40px;

    border:1px solid #ddd;

}

.payslip-header{

    display:flex;

    justify-content:space-between;

    gap:40px;

    margin-bottom:50px;

}

.payslip-section{

    margin-bottom:30px;

}

.payslip-signature{

    margin-top:80px;

}

/* LINKS */

a{

    color:inherit;

    text-decoration:none;

}

/* MOBILE */

@media(max-width:1200px){

    body{

        padding:15px;

    }

    .container{

        padding:20px;

    }

    .top-section{

        flex-direction:column;

        align-items:flex-start;

    }

    h1{

        font-size:32px;

    }

}

@media(max-width:700px){

    .salary-actions{

        width:100%;

        flex-direction:column;

        align-items:stretch;

    }

    button{

        width:100%;

    }

}

/* PAYSLIP TOOLBAR */

.payslip-toolbar{

    width:100%;

    max-width:900px;

    margin:auto;

    margin-bottom:20px;

    display:flex;

    justify-content:flex-end;

}

/* PRINT */

@media print{

    body{

        background:white;

        padding:0;

    }

    .no-print{

        display:none !important;

    }

    .payslip{

        border:none;

        width:100%;

        max-width:100%;

        padding:0;

        margin:0;

        box-shadow:none;

    }

    @page{

        size:A4;

        margin:12mm;

    }

}