/* =====================================
   ROOT
===================================== */

:root{

    --theme:#7fb347;
    --theme-dark:#679535;
    --theme-light:#dfe8d6;
    --heading:#79a8f5;
}

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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html, body {
    height: 100%;
    margin: 0;
}

body{
    background:#dcdcdc;
    font-family:'Poppins', sans-serif;
    padding:15px;
    overflow: hidden; /* Lock main view scroll on PC */
}

/* =====================================
   WRAPPER
===================================== */

.wrapper{
    display:flex;
    gap:20px;
    align-items:flex-start;
    height: 100%; /* Stretch view full */
}

/* =====================================
   PANEL
===================================== */

.panel{
    width:380px;
    background:white;
    padding:22px;
    border-radius:12px;
    box-shadow:0 0 15px rgba(0,0,0,0.12);
    height: 100%; /* Fills parent height precisely */
    overflow-y:auto; /* Scroll within form panel only */
}

.panel h2{

    text-align:center;

    color:#1560aa;

    margin-bottom:20px;

    font-size:24px;
}

.form-group{

    margin-bottom:14px;
}

label{

    display:block;

    margin-bottom:5px;

    font-weight:600;

    font-size:14px;
}

input,
textarea,
select{

    width:100%;

    padding:10px;

    border:1px solid #cfcfcf;

    border-radius:6px;

    font-size:14px;

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

textarea{
    resize:vertical;
}

button{

    width:100%;

    padding:13px;

    border:none;

    border-radius:6px;

    background:#0d6efd;

    color:white;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    margin-top:10px;
}

button:hover{
    background:#084298;
}

/* =====================================
   PREVIEW
===================================== */

.preview-wrapper{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center; /* Centers content vertically in PC view */
    height: 100%;
    overflow: hidden; /* Layout control delegated to JS engine */
    position: relative; /* Anchor for true absolute centering */
}

/* =====================================
   PAGE
===================================== */

#a4-page{

    width:794px;
    height:1123px; /* Strict Single A4 Page Height */
    min-height:1123px;

    background:#f8f8f8;

    padding:40px 45px;

    position:relative;

    overflow:hidden;

    margin:auto;
}

#a4-page *{

    page-break-inside:avoid !important;
}

/* =====================================
   WATERMARK
===================================== */

.watermark{

    position:absolute;

    pointer-events:none;

    width:380px;

    opacity:0.035;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    z-index:0;
}

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

.content{

    position:relative;

    z-index:2;
}

/* =====================================
   LOGO
===================================== */

.logo{

    width:auto;

    height:auto;

    max-width:180px;

    max-height:180px;

    object-fit:contain;

    display:block;

    margin:0 auto 10px;

    filter:drop-shadow(0 0 10px rgba(0,0,0,0.15));
}

/* HIDE BROKEN IMAGE ICON IF NOT SET */
.logo:not([src]), 
.watermark:not([src]),
.logo[src=""],
.watermark[src=""] {
    display:none !important;
}

/* =====================================
   HEADER
===================================== */

.uni{

    text-align:center;

    color:var(--heading);

    font-size:18pt;

    font-weight:700;

    letter-spacing:1px;

    margin-top:10px;

    line-height:1.4;
}

.dept{

    text-align:center;

    margin-top:20px;

    font-size:15pt;

    font-weight:700;

    text-decoration:underline;

    font-family:"Times New Roman", serif;
}

.faculty{

    text-align:center;

    margin-top:8px;

    font-size:13pt;

    font-family:"Times New Roman", serif;
}

.top-info{

    text-align:center;

    margin-top:10px;

    font-size:12pt;

    font-weight:700;

    font-family:"Times New Roman", serif;

    line-height:1.3;
}

sup{

    font-size:9px;

    vertical-align:super;
}

/* =====================================
   SPACE
===================================== */

.space-top{
    margin-top:60px;
}

/* =====================================
   INFO
===================================== */

.info-section{

    margin-top:25px;

    margin-left:8px;

    font-size:15pt;

    line-height:1.9;

    font-family:"Times New Roman", serif;
}

.label{

    display:inline-block;

    width:190px;
}

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

.submit-box{

    width:100%;

    border-collapse:collapse;

    margin-top:28px;

    font-family:"Times New Roman", serif;

    table-layout:fixed;
}

.submit-head td{

    width:50%;

    background:var(--theme-dark);

    color:white;

    text-align:center;

    font-style:italic;

    font-weight:700;

    padding:8px;

    border:1px solid #94b86c;

    font-size:15pt;
}

.submit-body td{

    width:50%;

    background:var(--theme-light);

    border:1px solid #c4d7b0;

    padding:12px 14px;

    vertical-align:top;

    height:175px;

    line-height:1.7;

    font-size:14pt;
}

.table-line{

    margin-bottom:4px;
}

.bold{
    font-weight:700;
}

.department-text{

    margin-top:3px;
}

.signature{

    margin-top:45px;
}

/* =====================================
   QR
===================================== */

#qr-wrapper{

    margin-top:12px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;
}

#qrcode{

    background:#fff;

    padding:6px;

    border:2px solid #000;

    width:fit-content;
}

#qrcode img{

    image-rendering:pixelated;
}

.qr-text{

    margin-top:4px;

    font-size:10px;

    color:#555;
}

/* =====================================
   DATE
===================================== */

.red{

    margin-top:28px;

    color:red;

    font-size:15pt;

    font-weight:700;

    font-family:"Times New Roman", serif;
}

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

@media(max-width:900px){

    body {
        overflow-y: auto; /* Restores native scrolling on mobile */
        height: auto;
    }

    .wrapper{
        flex-direction:column;
        gap:20px;
        height: auto;
    }

    .panel{
        width:100%;
        position:relative;
        height: auto;
        max-height:none;
        overflow:visible;
    }

    .preview-wrapper{
        width:100%;
        display:block;
        overflow:visible;
        padding:10px 0;
        height: auto;
    }

    #a4-page{
        /* Scaling managed via Smart JavaScript for dynamic fit */
        transform-origin:top center;
        margin:0 auto;
        box-shadow:0 5px 15px rgba(0,0,0,0.12);
    }
}

/* =====================================
   PRINT
===================================== */

@media print{

    body{

        background:white;
        padding:0;
    }

    .panel{
        display:none;
    }

    #a4-page{
        box-shadow:none;
    }
}