/*=====================================================
        IIT HYDERABAD RESEARCH PORTAL
              COMPONENTS.CSS
                PART - 1
=======================================================*/


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

.btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    padding:14px 32px;

    border:none;

    border-radius:50px;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    transition:.35s;

    text-decoration:none;

}

.btn-primary{

    background:var(--primary);

    color:#fff;

}

.btn-primary:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

}

.btn-secondary{

    background:var(--secondary);

    color:#fff;

}

.btn-secondary:hover{

    background:#941b1b;

}

.btn-outline{

    border:2px solid var(--primary);

    color:var(--primary);

    background:#fff;

}

.btn-outline:hover{

    background:var(--primary);

    color:#fff;

}

.btn-success{

    background:#16a34a;

    color:#fff;

}

.btn-danger{

    background:#dc2626;

    color:#fff;

}

.btn-warning{

    background:#f59e0b;

    color:#fff;

}

.btn-sm{

    padding:8px 18px;

    font-size:13px;

}

.btn-lg{

    padding:18px 40px;

    font-size:17px;

}


/*=====================================================
                    BADGES
=======================================================*/

.badge{

    display:inline-block;

    padding:7px 18px;

    border-radius:40px;

    font-size:13px;

    font-weight:600;

}

.badge-primary{

    background:#E8F2FB;

    color:var(--primary);

}

.badge-success{

    background:#EAF8EF;

    color:#14863C;

}

.badge-warning{

    background:#FFF7E3;

    color:#C97A00;

}

.badge-danger{

    background:#FDEDED;

    color:#D32F2F;

}


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

.card{

    background:#fff;

    border-radius:18px;

    padding:28px;

    box-shadow:var(--shadow-sm);

    transition:.35s;

    overflow:hidden;

    position:relative;

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

.card-title{

    color:var(--primary);

    margin-bottom:15px;

}

.card-text{

    color:#555;

    line-height:1.8;

}


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

.icon-card{

    text-align:center;

    padding:35px;

}

.icon-circle{

    width:85px;

    height:85px;

    margin:auto;

    border-radius:50%;

    background:linear-gradient(135deg,var(--primary),#1976D2);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    margin-bottom:20px;

}

.icon-card h3{

    margin-bottom:15px;

}


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

.metric-card{

    background:#fff;

    border-left:6px solid var(--primary);

    border-radius:18px;

    padding:30px;

    position:relative;

}

.metric-card h2{

    color:var(--primary);

    font-size:2.8rem;

}

.metric-card span{

    color:#666;

}

.metric-card i{

    position:absolute;

    right:25px;

    top:25px;

    font-size:40px;

    color:rgba(11,79,140,.15);

}


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

.dashboard-card{

    background:linear-gradient(135deg,#0B4F8C,#1976D2);

    color:#fff;

    border-radius:20px;

    padding:35px;

    position:relative;

    overflow:hidden;

}

.dashboard-card h4{

    margin-bottom:15px;

    font-weight:500;

}

.dashboard-card h2{

    color:#fff;

    font-size:3rem;

}

.dashboard-card::after{

    content:"";

    position:absolute;

    width:140px;

    height:140px;

    border-radius:50%;

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

    right:-50px;

    top:-50px;

}


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

.info-card{

    display:flex;

    gap:20px;

    align-items:flex-start;

}

.info-icon{

    width:70px;

    height:70px;

    flex-shrink:0;

    border-radius:50%;

    background:#EAF2FB;

    color:var(--primary);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

}

.info-content h3{

    margin-bottom:10px;

}

.info-content p{

    color:#555;

}


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

.faculty-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:.35s;

}

.faculty-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.faculty-image{

    height:280px;

}

.faculty-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.faculty-content{

    padding:25px;

}

.faculty-content h3{

    color:var(--primary);

    margin-bottom:10px;

}

.faculty-content h4{

    color:#666;

    margin-bottom:12px;

    font-weight:500;

}

.faculty-content p{

    margin-bottom:8px;

}



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

.equipment-card{

    display:flex;

    gap:25px;

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:.35s;

}

.equipment-card:hover{

    transform:translateY(-6px);

}

.equipment-image{

    width:260px;

    flex-shrink:0;

}

.equipment-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.equipment-details{

    padding:25px;

}

.equipment-details h3{

    color:var(--primary);

    margin-bottom:15px;

}

.equipment-details p{

    margin-bottom:8px;

}


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

.profile-card{

    background:#fff;

    text-align:center;

    border-radius:18px;

    padding:35px;

    box-shadow:var(--shadow-sm);

}

.profile-card img{

    width:140px;

    height:140px;

    border-radius:50%;

    object-fit:cover;

    margin:auto;

    margin-bottom:20px;

    border:5px solid #EEF5FC;

}

.profile-card h3{

    color:var(--primary);

    margin-bottom:8px;

}

.profile-card h4{

    color:#666;

    font-weight:500;

    margin-bottom:15px;

}


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

.image-card{

    position:relative;

    overflow:hidden;

    border-radius:20px;

}

.image-card img{

    width:100%;

    transition:.45s;

}

.image-card:hover img{

    transform:scale(1.08);

}

.image-overlay{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:25px;

    color:#fff;

    background:linear-gradient(transparent,
    rgba(0,0,0,.80));

}

.image-overlay h3{

    color:#fff;

}


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

.card-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}


/*=====================================================
            HOVER EFFECTS
=======================================================*/

.hover-shadow:hover{

    box-shadow:var(--shadow-lg);

}

.hover-scale:hover{

    transform:scale(1.04);

}

.hover-up:hover{

    transform:translateY(-10px);

}


/*=====================================================
            DIVIDERS
=======================================================*/

.divider{

    width:70px;

    height:4px;

    background:var(--accent);

    border-radius:20px;

    margin:15px 0 30px;

}

.divider-center{

    margin:auto;

}


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

.card-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:25px;

    padding-top:18px;

    border-top:1px solid #eee;

}


/*=====================================================
            COMMON ICONS
=======================================================*/

.circle-icon{

    width:55px;

    height:55px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#EAF2FB;

    color:var(--primary);

    font-size:22px;

}/*=====================================================
        COMPONENTS.CSS
                PART - 2
        TABLES • FILTERS • PAGINATION
======================================================*/


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

.search-panel{

    background:#fff;

    padding:30px;

    border-radius:18px;

    box-shadow:var(--shadow-sm);

    margin-bottom:35px;

}

.search-panel h3{

    color:var(--primary);

    margin-bottom:20px;

}

.search-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:20px;

}


/*=====================================================
                FORM GROUP
======================================================*/

.form-group{

    display:flex;

    flex-direction:column;

}

.form-group label{

    font-weight:600;

    margin-bottom:8px;

    color:#444;

}

.form-group input,
.form-group select{

    padding:13px 15px;

    border:1px solid #dcdcdc;

    border-radius:10px;

    outline:none;

    font-size:15px;

    transition:.3s;

}

.form-group input:focus,
.form-group select:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(11,79,140,.15);

}


/*=====================================================
            SEARCH ACTIONS
======================================================*/

.search-actions{

    display:flex;

    gap:15px;

    margin-top:28px;

    flex-wrap:wrap;

}


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

.table-container{

    background:#fff;

    border-radius:18px;

    box-shadow:var(--shadow-sm);

    overflow:hidden;

    overflow-x:auto;

}


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

.data-table{

    width:100%;

    border-collapse:collapse;

    min-width:1100px;

}

.data-table thead{

    background:linear-gradient(135deg,var(--primary),#1565C0);

    color:#fff;

}

.data-table th{

    padding:18px;

    text-align:left;

    font-size:15px;

    font-weight:600;

    white-space:nowrap;

}

.data-table td{

    padding:16px;

    border-bottom:1px solid #ececec;

    color:#444;

}

.data-table tbody tr{

    transition:.25s;

}

.data-table tbody tr:nth-child(even){

    background:#fafafa;

}

.data-table tbody tr:hover{

    background:#eef6ff;

}


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

.table-sticky thead th{

    position:sticky;

    top:0;

    z-index:5;

}


/*=====================================================
            SORTABLE COLUMN
======================================================*/

.sortable{

    cursor:pointer;

    user-select:none;

}

.sortable:hover{

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

}


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

.table-badge{

    padding:5px 14px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

}

.bg-sponsored{

    background:#EAF3FF;

    color:#1565C0;

}

.bg-consultancy{

    background:#FFF8E0;

    color:#E67E22;

}

.bg-internal{

    background:#E8F8EC;

    color:#1E8449;

}

.bg-gia{

    background:#FDEDEC;

    color:#C0392B;

}


/*=====================================================
            PAGINATION
======================================================*/

.pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    margin-top:35px;

    flex-wrap:wrap;

}

.pagination button{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    background:#fff;

    box-shadow:var(--shadow-sm);

    transition:.3s;

}

.pagination button:hover{

    background:var(--primary);

    color:#fff;

}

.pagination .active{

    background:var(--primary);

    color:#fff;

}


/*=====================================================
        RECORD INFORMATION
======================================================*/

.record-info{

    margin-top:20px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    color:#666;

}


/*=====================================================
            LOADING SPINNER
======================================================*/

.loading{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:70px;

}

.spinner{

    width:55px;

    height:55px;

    border:6px solid #ddd;

    border-top:6px solid var(--primary);

    border-radius:50%;

    animation:spin 1s linear infinite;

}


/*=====================================================
            NO DATA
======================================================*/

.no-data{

    text-align:center;

    padding:60px;

}

.no-data img{

    width:170px;

    margin:auto;

    margin-bottom:20px;

}

.no-data h3{

    color:#666;

    margin-bottom:12px;

}

.no-data p{

    color:#888;

}


/*=====================================================
            FILTER TAGS
======================================================*/

.filter-tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:20px;

}

.filter-tag{

    padding:8px 16px;

    border-radius:30px;

    background:#eef5fc;

    color:var(--primary);

    font-size:14px;

}


/*=====================================================
            SEARCH RESULT CARD
======================================================*/

.result-card{

    background:#fff;

    border-radius:18px;

    padding:25px;

    margin-bottom:20px;

    box-shadow:var(--shadow-sm);

}

.result-card h3{

    color:var(--primary);

    margin-bottom:12px;

}

.result-card p{

    margin-bottom:8px;

}


/*=====================================================
        GOOGLE SHEET STATUS
======================================================*/

.sync-status{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:30px;

    background:#EAF8EF;

    color:#1E8449;

    font-size:14px;

    font-weight:600;

}

.sync-dot{

    width:10px;

    height:10px;

    background:#1E8449;

    border-radius:50%;

}


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

.table-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

    flex-wrap:wrap;

    gap:15px;

}

.table-toolbar input{

    width:280px;

    padding:12px 15px;

    border:1px solid #ddd;

    border-radius:8px;

}


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

.export-buttons{

    display:flex;

    gap:12px;

}

.export-buttons button{

    border:none;

    padding:12px 18px;

    border-radius:8px;

    background:var(--primary);

    color:#fff;

    cursor:pointer;

    transition:.3s;

}

.export-buttons button:hover{

    background:var(--primary-dark);

}
/*=====================================================
        COMPONENTS.CSS
                PART - 3
=======================================================*/


/*=====================================================
                FORM COMPONENTS
======================================================*/

.form-container{

    background:#fff;
    padding:35px;
    border-radius:18px;
    box-shadow:var(--shadow-sm);

}

.form-row{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:25px;

}

.form-control{

    width:100%;
    padding:14px 16px;

    border:1px solid #d8d8d8;
    border-radius:10px;

    font-size:15px;

    transition:.3s;

}

.form-control:focus{

    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(11,79,140,.15);

}

textarea.form-control{

    resize:vertical;
    min-height:140px;

}


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

.document-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;

}

.document-card{

    background:#fff;

    padding:30px;

    border-radius:18px;

    box-shadow:var(--shadow-sm);

    transition:.35s;

    text-align:center;

}

.document-card:hover{

    transform:translateY(-8px);
    box-shadow:var(--shadow-lg);

}

.document-icon{

    width:80px;
    height:80px;

    margin:auto;

    border-radius:50%;

    background:#eef5fc;

    color:var(--primary);

    display:flex;

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

    font-size:34px;

    margin-bottom:20px;

}

.document-card h3{

    color:var(--primary);
    margin-bottom:12px;

}


/*=====================================================
            THRUST AREA CARD
======================================================*/

.thrust-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:35px;

}

.thrust-card{

    overflow:hidden;

    border-radius:20px;

    background:#fff;

    box-shadow:var(--shadow-sm);

    transition:.35s;

}

.thrust-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.thrust-card img{

    width:100%;
    height:240px;
    object-fit:cover;

}

.thrust-content{

    padding:25px;

}

.thrust-content h3{

    color:var(--primary);

}


/*=====================================================
        RESEARCH HIGHLIGHT CARD
======================================================*/

.highlight-card{

    display:flex;

    gap:25px;

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    margin-bottom:30px;

}

.highlight-image{

    width:320px;

}

.highlight-image img{

    width:100%;
    height:100%;
    object-fit:cover;

}

.highlight-content{

    padding:30px;

}

.highlight-content h2{

    margin-bottom:15px;

}

.highlight-content p{

    margin-bottom:18px;

}


/*=====================================================
                TIMELINE
======================================================*/

.timeline{

    position:relative;

    margin:50px 0;

}

.timeline::before{

    content:"";

    position:absolute;

    left:25px;

    width:4px;

    top:0;

    bottom:0;

    background:var(--primary);

}

.timeline-item{

    position:relative;

    padding-left:70px;

    margin-bottom:40px;

}

.timeline-item::before{

    content:"";

    position:absolute;

    left:14px;

    width:24px;
    height:24px;

    background:var(--accent);

    border-radius:50%;

}

.timeline-content{

    background:#fff;

    padding:25px;

    border-radius:16px;

    box-shadow:var(--shadow-sm);

}


/*=====================================================
                ACCORDION
======================================================*/

.accordion{

    border-radius:15px;

    overflow:hidden;

}

.accordion-item{

    margin-bottom:10px;

    background:#fff;

    box-shadow:var(--shadow-sm);

}

.accordion-header{

    padding:18px 22px;

    cursor:pointer;

    font-weight:600;

    background:#f8fafc;

}

.accordion-body{

    display:none;

    padding:20px;

}


/*=====================================================
                TABS
======================================================*/

.tabs{

    display:flex;

    gap:12px;

    margin-bottom:25px;

    flex-wrap:wrap;

}

.tab{

    padding:12px 22px;

    background:#eef5fc;

    border-radius:8px;

    cursor:pointer;

    transition:.3s;

}

.tab.active{

    background:var(--primary);

    color:#fff;

}


/*=====================================================
                MODAL
======================================================*/

.modal{

    display:none;

    position:fixed;

    inset:0;

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

    z-index:9999;

}

.modal-content{

    background:#fff;

    width:90%;
    max-width:700px;

    margin:60px auto;

    border-radius:18px;

    padding:35px;

}

.modal-close{

    float:right;

    cursor:pointer;

    font-size:28px;

}


/*=====================================================
            TOAST NOTIFICATION
======================================================*/

.toast{

    position:fixed;

    right:30px;

    bottom:30px;

    background:#fff;

    border-left:5px solid var(--success);

    padding:18px 25px;

    border-radius:12px;

    box-shadow:var(--shadow-lg);

    z-index:999;

}

.toast-error{

    border-color:var(--danger);

}

.toast-warning{

    border-color:var(--warning);

}


/*=====================================================
            BREADCRUMB
======================================================*/

.breadcrumb{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

    margin-bottom:30px;

}

.breadcrumb a{

    color:var(--primary);

}

.breadcrumb span{

    color:#888;

}


/*=====================================================
            SOCIAL ICONS
======================================================*/

.social-icons{

    display:flex;

    gap:15px;

}

.social-icons a{

    width:42px;

    height:42px;

    border-radius:50%;

    background:#eef5fc;

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--primary);

    transition:.3s;

}

.social-icons a:hover{

    background:var(--primary);

    color:#fff;

}


/*=====================================================
            FOOTER WIDGET
======================================================*/

.footer-widget{

    margin-bottom:30px;

}

.footer-widget h3{

    color:#fff;

    margin-bottom:18px;

}

.footer-widget ul{

    list-style:none;

}

.footer-widget li{

    margin-bottom:10px;

}

.footer-widget a{

    color:#d6d6d6;

}

.footer-widget a:hover{

    color:#fff;

}


/*=====================================================
            IMAGE OVERLAY
======================================================*/

.overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(0,0,0,.1),
        rgba(0,0,0,.65)
    );

}


/*=====================================================
            VIDEO CONTAINER
======================================================*/

.video-container{

    position:relative;

    padding-bottom:56.25%;

    height:0;

    overflow:hidden;

    border-radius:18px;

}

.video-container iframe{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

}


/*=====================================================
            TAGS
======================================================*/

.tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.tag{

    background:#eef5fc;

    color:var(--primary);

    padding:6px 14px;

    border-radius:25px;

    font-size:13px;

}


/*=====================================================
            AVATAR GROUP
======================================================*/

.avatar-group{

    display:flex;

}

.avatar{

    width:45px;

    height:45px;

    border-radius:50%;

    border:3px solid #fff;

    margin-left:-10px;

}


/*=====================================================
            TOOLTIP
======================================================*/

.tooltip{

    position:relative;

    cursor:pointer;

}

.tooltip:hover::after{

    content:attr(data-title);

    position:absolute;

    bottom:130%;

    left:50%;

    transform:translateX(-50%);

    background:#333;

    color:#fff;

    padding:8px 12px;

    border-radius:6px;

    white-space:nowrap;

    font-size:13px;

}


/*=====================================================
            SHADOW UTILITIES
======================================================*/

.shadow-sm{

    box-shadow:var(--shadow-sm);

}

.shadow-md{

    box-shadow:var(--shadow-md);

}

.shadow-lg{

    box-shadow:var(--shadow-lg);

}


/*=====================================================
            BORDER UTILITIES
======================================================*/

.rounded{

    border-radius:12px;

}

.rounded-lg{

    border-radius:20px;

}

.rounded-circle{

    border-radius:50%;

}


/*=====================================================
            DISPLAY UTILITIES
======================================================*/

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.space-between{

    justify-content:space-between;

}

.align-center{

    align-items:center;

}

.grid{

    display:grid;

}

.hidden{

    display:none;

}