/***************************************************************************
 KURTA GOLDEN JUBILEE SOUVENIR PORTAL
 Version : 1.0
 File    : css/style.css
 Author  : OpenAI + Prof. A. Sadanandam

 PART - 1
***************************************************************************/


/**********************************************************************
    ROOT COLOURS
**********************************************************************/

:root{

    --ku-blue:#0F4DA2;

    --ku-navy:#123A7A;

    --ku-gold:#D4AF37;

    --ku-light:#F7F9FC;

    --ku-dark:#2F2F2F;

    --ku-green:#198754;

    --ku-border:#DDDDDD;

    --ku-card:#FFFFFF;

}


/**********************************************************************
    GLOBAL
**********************************************************************/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

body{

    background:var(--ku-light);

    color:var(--ku-dark);

    font-family:"Segoe UI",Tahoma,Arial,sans-serif;

    font-size:16px;

    line-height:1.6;

}


/**********************************************************************
    LINKS
**********************************************************************/

a{

    color:var(--ku-blue);

    text-decoration:none;

}

a:hover{

    color:#0b3a79;

    text-decoration:none;

}


/**********************************************************************
    MAIN CONTAINER
**********************************************************************/

.site-container{

    width:96%;

    max-width:1500px;

    margin:20px auto;

    background:white;

    box-shadow:0 0 18px rgba(0,0,0,.12);

}


/**********************************************************************
    HEADER
**********************************************************************/

.gj-header{

    background:white;

    padding:25px;

    border-bottom:4px solid var(--ku-gold);

}

.gj-header img{

    width:90px;

    height:90px;

}

.gj-header h1{

    margin:0;

    color:var(--ku-blue);

    font-size:2.9rem;

    font-weight:700;

    letter-spacing:.4px;

}

.tagline{

    margin-top:10px;

    color:#666;

    font-size:1.20rem;

}


/**********************************************************************
    NAVIGATION
**********************************************************************/

.navbar{

    background:var(--ku-navy)!important;

    border-top:2px solid var(--ku-gold);

    border-bottom:2px solid var(--ku-gold);

    padding-top:0;

    padding-bottom:0;

}

.navbar-nav{

    align-items:center;

}

.nav-item{

    margin-right:4px;

}

.nav-link{

    color:white!important;

    opacity:1!important;

    font-size:1.08rem;

    font-weight:600;

    padding:16px 20px!important;

    transition:all .25s ease;

}

.nav-link:hover{

    background:rgba(255,255,255,.08);

    color:#FFD54F!important;

}

.nav-link.active{

    background:rgba(255,255,255,.10);

    color:#FFD54F!important;

}

.navbar-toggler{

    border:1px solid rgba(255,255,255,.6);

}

.navbar-toggler:focus{

    box-shadow:none;

}


/**********************************************************************
    PAGE TITLES
**********************************************************************/

.page-title{

    color:var(--ku-blue);

    font-size:2.4rem;

    font-weight:700;

    margin-bottom:20px;

}

.section-title{

    color:var(--ku-blue);

    font-size:1.55rem;

    font-weight:600;

    margin-bottom:15px;

}


/**********************************************************************
    CARDS
**********************************************************************/

.card{

    border:none;

    border-radius:8px;

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

    margin-bottom:25px;

}

.card-header{

    background:var(--ku-blue)!important;

    color:white;

    font-size:1.25rem;

    font-weight:600;

    padding:14px 20px;

}

.card-body{

    padding:25px;

}


/**********************************************************************
    TABLES
**********************************************************************/

.table{

    font-size:1rem;

}

.table th{

    width:230px;

    background:#F6F6F6;

    font-weight:600;

}

.table td{

    background:white;

}


/**********************************************************************
    ALERTS
**********************************************************************/

.alert{

    border-radius:8px;

    padding:18px;

    font-size:1rem;

}

.alert-success{

    border-left:6px solid #198754;

}

.alert-danger{

    border-left:6px solid #DC3545;

}

.alert-warning{

    border-left:6px solid #FFC107;

}


/**********************************************************************
    INFORMATION BOX
**********************************************************************/

.info-box{

    background:#FFF9E8;

    border:1px solid #E8D79A;

    border-radius:8px;

    padding:22px;

    margin:25px 0;

}

.info-box h4{

    color:#9C6A00;

    margin-bottom:15px;

    font-weight:700;

}

.info-box ul{

    margin-bottom:0;

}

.info-box li{

    margin-bottom:8px;

}


/**********************************************************************
    FORM CONTROLS
**********************************************************************/

.form-label{

    font-weight:600;

    margin-bottom:8px;

}

.form-control{

    border-radius:6px;

    border:1px solid #CED4DA;

    padding:10px 12px;

}

.form-control:focus{

    border-color:var(--ku-blue);

    box-shadow:0 0 0 .20rem rgba(15,77,162,.15);

}

textarea{

    resize:vertical;

}


/**********************************************************************
    BUTTONS
**********************************************************************/

.btn{

    border-radius:6px;

    font-weight:600;

    padding:10px 24px;

}

.btn-primary{

    background:var(--ku-blue);

    border:none;

}

.btn-primary:hover{

    background:#093C82;

}

.btn-success{

    background:var(--ku-green);

    border:none;

}

.btn-success:hover{

    background:#146B43;

}

.btn-danger{

    border:none;

}

.btn-warning{

    border:none;

}

/**********************************************************************
    PART - 2 CONTINUES BELOW
**********************************************************************/

/**********************************************************************
    DASHBOARD
**********************************************************************/

.dashboard-header{

    margin-bottom:30px;

}

.welcome-title{

    color:var(--ku-blue);

    font-size:2.4rem;

    font-weight:700;

    margin-bottom:10px;

}

.intro-text{

    font-size:1.10rem;

    color:#555;

    line-height:1.8;

}

/**********************************************************************
    MEMBER DETAILS
**********************************************************************/

.profile-card{

    background:#ffffff;

    border:1px solid var(--ku-border);

    border-radius:8px;

    padding:20px;

    margin-bottom:25px;

}

.profile-title{

    color:var(--ku-blue);

    font-size:1.35rem;

    font-weight:600;

    margin-bottom:18px;

}

.profile-table{

    width:100%;

    border-collapse:collapse;

}

.profile-table tr{

    border-bottom:1px solid #eeeeee;

}

.profile-table th{

    width:220px;

    padding:12px;

    background:#f8f9fa;

    font-weight:600;

}

.profile-table td{

    padding:12px;

}


/**********************************************************************
    TEXTAREA
**********************************************************************/

textarea.form-control{

    min-height:240px;

    font-size:1rem;

    line-height:1.7;

}


/**********************************************************************
    UPLOAD PANELS
**********************************************************************/

.upload-box{

    border:2px dashed #b7c7de;

    border-radius:8px;

    background:#fafcff;

    padding:25px;

    margin-top:15px;

    margin-bottom:25px;

}

.upload-box h5{

    color:var(--ku-blue);

    font-weight:600;

    margin-bottom:12px;

}

.upload-box p{

    color:#666;

    margin-bottom:15px;

}


/**********************************************************************
    PHOTO GALLERY
**********************************************************************/

.photo-card{

    border:1px solid #dddddd;

    border-radius:8px;

    overflow:hidden;

    background:white;

    margin-bottom:25px;

    box-shadow:0 1px 5px rgba(0,0,0,.08);

}

.photo-card img{

    width:100%;

    height:180px;

    object-fit:cover;

}

.photo-card .card-body{

    padding:12px;

    text-align:center;

}


/**********************************************************************
    DOCUMENT LIST
**********************************************************************/

.document-table{

    width:100%;

    border-collapse:collapse;

}

.document-table th{

    background:#f5f5f5;

    padding:12px;

    border:1px solid #dddddd;

}

.document-table td{

    padding:12px;

    border:1px solid #dddddd;

}


/**********************************************************************
    LINK INPUTS
**********************************************************************/

.url-group{

    margin-bottom:20px;

}

.url-group input{

    font-size:.98rem;

}


/**********************************************************************
    CHARACTER COUNT
**********************************************************************/

.char-counter{

    text-align:right;

    color:#777;

    font-size:.90rem;

    margin-top:6px;

}


/**********************************************************************
    SAVE BUTTON
**********************************************************************/

.save-panel{

    text-align:center;

    margin-top:35px;

    margin-bottom:15px;

}

.save-panel .btn{

    min-width:260px;

    font-size:1.15rem;

    padding:14px 30px;

}


/**********************************************************************
    STATUS PANEL
**********************************************************************/

.status-box{

    background:#f8f9fa;

    border-left:5px solid var(--ku-gold);

    border-radius:6px;

    padding:18px;

    margin-bottom:25px;

}

.status-box h5{

    color:var(--ku-blue);

    margin-bottom:12px;

}

.status-box ul{

    list-style:none;

    padding-left:0;

    margin-bottom:0;

}

.status-box li{

    margin-bottom:8px;

}


/**********************************************************************
    IMAGE PREVIEW
**********************************************************************/

.image-preview{

    margin-top:15px;

}

.image-preview img{

    max-width:180px;

    border-radius:6px;

    border:1px solid #cccccc;

    padding:3px;

    background:white;

}


/**********************************************************************
    HORIZONTAL RULE
**********************************************************************/

hr{

    margin:35px 0;

    border-top:1px solid #dddddd;

}


/**********************************************************************
    UTILITY CLASSES
**********************************************************************/

.text-small{

    font-size:.92rem;

}

.text-blue{

    color:var(--ku-blue);

}

.text-gold{

    color:var(--ku-gold);

}

.bg-light-blue{

    background:#f5f9ff;

}

.border-gold{

    border-color:var(--ku-gold)!important;

}

/**********************************************************************
    PART 2B CONTINUES BELOW
**********************************************************************/

/**********************************************************************
    FOOTER
**********************************************************************/

footer{

    background:#fafafa;

    border-top:3px solid var(--ku-gold);

    margin-top:50px;

    padding:30px 20px;

    text-align:center;

    color:#666;

}

footer h5{

    color:var(--ku-blue);

    font-weight:700;

    margin-bottom:10px;

}

footer p{

    margin-bottom:6px;

}

footer a{

    color:var(--ku-blue);

    text-decoration:none;

}

footer a:hover{

    text-decoration:underline;

}


/**********************************************************************
    LOGIN PAGE
**********************************************************************/

.login-card{

    max-width:520px;

    margin:60px auto;

}

.login-card .card-header{

    text-align:center;

}

.login-card .btn{

    width:100%;

}


/**********************************************************************
    HOME PAGE
**********************************************************************/

.home-card{

    height:100%;

}

.home-card p{

    text-align:justify;

}


/**********************************************************************
    BADGES
**********************************************************************/

.badge-ku{

    background:var(--ku-blue);

    color:white;

    font-size:.90rem;

    padding:8px 12px;

}


/**********************************************************************
    REQUIRED FIELD
**********************************************************************/

.required{

    color:#dc3545;

    font-weight:700;

}


/**********************************************************************
    IMAGE THUMBNAIL
**********************************************************************/

.thumbnail{

    width:160px;

    height:120px;

    object-fit:cover;

    border-radius:6px;

    border:1px solid #cccccc;

}


/**********************************************************************
    MOBILE
**********************************************************************/

@media (max-width:992px){

.gj-header{

    text-align:center;

}

.gj-header img{

    margin-bottom:15px;

}

.gj-header h1{

    font-size:2rem;

}

.tagline{

    font-size:1rem;

}

.nav-link{

    padding:12px 18px!important;

}

.welcome-title{

    font-size:2rem;

}

.page-title{

    font-size:2rem;

}

.profile-table th{

    width:160px;

}

.card-body{

    padding:18px;

}

}


@media (max-width:768px){

.site-container{

    width:100%;

    margin:0;

}


/* Hide University emblem on mobile phones */

.portal-logo{

    display:none !important;

}


/* Remove the empty logo column */

.gj-header .col-auto{

    display:none !important;

}


/* Centre the portal heading */

.gj-header .col{

    width:100%;

    text-align:center;

}


/* Reduce the portal title size */

.gj-header h1{

    font-size:1.65rem;

    line-height:1.2;

    margin-bottom:10px;

}


/* Reduce header height */

.gj-header{

    padding-top:22px;

    padding-bottom:22px;

}


/* Adjust KURTA tagline */

.gj-header .tagline{

    font-size:0.9rem;

    line-height:1.4;

}


/* Adjust Golden Jubilee subtitle */

.gj-header .tagline + div{

    font-size:0.85rem !important;

    line-height:1.4;

}


.table th{

    width:140px;

}

.photo-card img{

    height:150px;

}

.save-panel .btn{

    width:100%;

}

footer{

    padding:25px 15px;

}

}
/**********************************************************************
    PRINT
**********************************************************************/

@media print{

.navbar{

    display:none;

}

footer{

    display:none;

}

.btn{

    display:none;

}

body{

    background:white;

}

.site-container{

    width:100%;

    box-shadow:none;

    margin:0;

}

}


/* ==========================================================
   VERSION 1.0 — COMPACT PORTAL HEADER
   Reduces excessive logo and header height
========================================================== */

.gj-header {
    padding: 24px 55px !important;
}

.gj-header img {
    width: 210px !important;
    height: 210px !important;
    object-fit: contain;
}

.gj-header h1 {
    font-size: 2.75rem !important;
    line-height: 1.15 !important;
    margin-bottom: 8px !important;
}

.gj-header .tagline {
    font-size: 1.15rem !important;
    margin-top: 6px !important;
}


/* ----------------------------------------------------------
   Tablet
---------------------------------------------------------- */

@media (max-width: 992px) {

    .gj-header {
        padding: 20px 30px !important;
    }

    .gj-header img {
        width: 150px !important;
        height: 150px !important;
    }

    .gj-header h1 {
        font-size: 2.1rem !important;
    }

    .gj-header .tagline {
        font-size: 1rem !important;
    }

}


/* ----------------------------------------------------------
   Mobile
---------------------------------------------------------- */

@media (max-width: 768px) {

    .gj-header {
        padding: 18px 15px !important;
    }

    .gj-header img {
        width: 115px !important;
        height: 115px !important;
        margin-bottom: 12px !important;
    }

    .gj-header h1 {
        font-size: 1.7rem !important;
        line-height: 1.2 !important;
    }

    .gj-header .tagline {
        font-size: 0.95rem !important;
        line-height: 1.45 !important;
    }

}



/* ==========================================================
   FINAL MOBILE HEADER OVERRIDE
========================================================== */

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

    .gj-header .portal-logo,
    .gj-header img,
    header.gj-header img {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .gj-header .col-auto {
        display: none !important;
        width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .gj-header .row {
        display: block !important;
    }

    .gj-header .col {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        text-align: center !important;
        padding: 15px !important;
    }

    .gj-header h1 {
        font-size: 1.65rem !important;
        line-height: 1.2 !important;
        text-align: center !important;
        margin: 0 0 10px 0 !important;
    }

    .gj-header {
        min-height: 0 !important;
        padding: 15px 5px !important;
    }

}


/* ==========================================================
   PORTAL NAVIGATION
========================================================== */

.portal-nav {

    background:#123A7A;

    border-top:2px solid #D4AF37;

    border-bottom:2px solid #D4AF37;

}


.portal-nav-inner {

    display:flex;

    justify-content:space-between;

    align-items:center;

    min-height:58px;

}


.portal-nav-main,

.portal-nav-user {

    display:flex;

    align-items:center;

}


.portal-nav a {

    color:white;

    padding:18px;

    display:block;

    font-weight:600;

    text-decoration:none;

    white-space:nowrap;

}


.portal-nav a:hover {

    background:rgba(255,255,255,0.12);

    color:white;

}


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

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

    .portal-nav .container-fluid {

        padding-left:0;

        padding-right:0;

    }


    .portal-nav-inner {

        display:flex;

        width:100%;

        min-height:58px;

        flex-wrap:nowrap;

    }


    .portal-nav-main {

        display:flex;

        flex:4;

    }


    .portal-nav-user {

        display:flex;

        flex:1;

    }


    .portal-nav a {

        flex:1;

        padding:17px 4px;

        text-align:center;

        font-size:0.9rem;

        white-space:nowrap;

    }

}

/**********************************************************************
    END OF FILE
**********************************************************************/