/*==================================================
MSEC TRANSPORT MANAGEMENT SYSTEM
Premium UI - Part 1
Layout + Left Panel + Right Panel
==================================================*/

/*=========================
GOOGLE FONT
=========================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/*=========================
RESET
=========================*/

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:#f1f5f9;

    color:#1e293b;

    overflow-x:hidden;

}

/*=========================
LAYOUT
=========================*/

.transport-wrapper{

    min-height:100vh;

    width:100%;

    background:#f8fafc;

}

.container-fluid{

    padding:0 !important;

}

.row{

    margin:0 !important;

}

.col-xl-4,
.col-xl-8,
.col-lg-5,
.col-lg-7{

    padding:0 !important;

}

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

.left-panel{

    position:relative;

    height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    background:#0f172a;

}

.left-bg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:1;

}

.left-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(
    135deg,
    rgba(15,23,42,.90),
    rgba(37,99,235,.82)
    );

    z-index:2;

}

.left-content{

    position:relative;

    z-index:3;

    width:100%;

    max-width:650px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:40px;

    color:#fff;

}

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

.college-logo{

    width:90px;

    height:90px;

    object-fit:contain;

    display:block;

    margin:0 auto 20px;

}

/*=========================
COLLEGE NAME
=========================*/

.college-name{

    width:100%;

    text-align:center;

    margin-bottom:10px;

}

.college-name h2{

    font-size:20px;
    font-weight:700;
    line-height:1.3;
    margin-bottom:8px;

}

.college-name span{

    display:block;
    color:#dbeafe;
    font-size:14px;

}

/*=========================
HERO
=========================*/

.hero-text{

    width:100%;

    text-align:center;

    margin:10px 0;

}

.hero-text h1{

    font-size:32px;
    font-weight:800;
    line-height:1.2;

}

.hero-text p{

    margin-top:15px;

    font-size:17px;

    line-height:1.8;

}

/*=========================
FEATURE GRID
=========================*/

.feature-grid{

    display:grid;

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

    gap:10px;

}

.feature-card{

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

    backdrop-filter:blur(10px);

    border-radius:18px;

    padding:18px;

    transition:.35s;

}

.feature-card:hover{

    transform:translateY(-6px);

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

}

.feature-card i{

    font-size:28px;

    margin-bottom:12px;

}

.feature-card h6{

    margin:0;

    font-size:15px;

    font-weight:600;

}

/*=========================
VERSION
=========================*/

.version-box{

    margin-top:20px;

    width:100%;

    text-align:center;

}

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

.main-content{

    background:#f8fafc;

    min-height:100vh;

    overflow-y:auto;

}

.content-area{

    padding:35px;

}

.page-container{

    max-width:1450px;

    margin:auto;

}

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

.page-title{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:28px;

}

.page-title h2{

    font-size:34px;

    font-weight:700;

    margin:0;

}

.page-title span{

    color:#64748b;

    font-size:15px;

}

.page-badge{

    background:#2563eb;

    color:#fff;

    padding:14px 24px;

    border-radius:14px;

    font-size:15px;

    font-weight:500;

    box-shadow:

    0 12px 25px rgba(37,99,235,.25);

}

.page-badge strong{

    display:block;

    margin-top:3px;

    font-size:18px;

}

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

.form-control,
.form-select{

    height:50px;

    border-radius:12px;

    border:1px solid #dbe2ea;

    box-shadow:none;

    transition:.3s;

}

.form-control:focus,
.form-select:focus{

    border-color:#2563eb;

    box-shadow:

    0 0 0 .18rem rgba(37,99,235,.15);

}

textarea.form-control{

    height:90px;

    resize:none;

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:#94a3b8;

    border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

    background:#64748b;

}



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

.search-card{

    background:#fff;

    border-radius:22px;

    padding:25px;

    margin-bottom:25px;

    box-shadow:
    0 15px 40px rgba(15,23,42,.08);

    transition:.35s;

}

.search-card:hover{

    transform:translateY(-3px);

    box-shadow:
    0 25px 50px rgba(15,23,42,.12);

}

.search-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

.search-header h3{

    margin:0;

    font-size:24px;

    font-weight:700;

}

.search-header small{

    color:#64748b;

}

.search-body{

    display:flex;

    gap:15px;

}

.search-input-group{

    flex:1;

    display:flex;

    align-items:center;

    background:#f8fafc;

    border:1px solid #e2e8f0;

    border-radius:16px;

    padding:0 18px;

}

.search-input-group i{

    color:#2563eb;

    font-size:22px;

    margin-right:15px;

}

.search-input-group input{

    border:none;

    background:transparent;

    height:58px;

}

.search-input-group input:focus{

    outline:none;

    box-shadow:none;

}

.search-body .btn{

    min-width:150px;

    border-radius:16px;

    font-weight:600;

}


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

.profile-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    margin-bottom:25px;

    box-shadow:
    0 15px 40px rgba(15,23,42,.08);

}

.profile-header{

    background:
    linear-gradient(
    135deg,
    #2563eb,
    #1d4ed8
    );

    color:#fff;

    padding:18px 25px;

}

.profile-header h4{

    margin:0;

    font-size:22px;

    font-weight:700;

}

.profile-body{

    padding:30px;

}


/*==================================================
PHOTO
==================================================*/

.student-photo{

    width:180px;

    height:220px;

    object-fit:cover;

    border-radius:18px;

    border:5px solid #fff;

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

    transition:.35s;

}

.student-photo:hover{

    transform:scale(1.03);

}

.upload-box{

    margin-top:18px;

    background:#f8fafc;

    border:1px dashed #cbd5e1;

    border-radius:16px;

    padding:12px;

}


/*==================================================
FORM LABEL
==================================================*/

.profile-body .form-label{

    font-size:14px;

    font-weight:600;

    margin-bottom:7px;

    color:#334155;

}


/*==================================================
INPUT SPACING
==================================================*/

.profile-body .col-md-3,

.profile-body .col-md-4,

.profile-body .col-md-6,

.profile-body .col-md-12{

    margin-bottom:16px;

}


/*==================================================
READONLY INPUT
==================================================*/

input[readonly]{

    background:#f8fafc;

    font-weight:500;

}


/*==================================================
TEXTAREA
==================================================*/

textarea.form-control{

    min-height:95px;

}


/*==================================================
PROFILE ANIMATION
==================================================*/

.profile-card{

    animation:fadeUp .4s ease;

}

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(20px);

}

100%{

opacity:1;

transform:translateY(0);

}

}


/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:991px){

.search-body{

    flex-direction:column;

}

.search-body .btn{

    width:100%;

}

.student-photo{

    margin-bottom:20px;

}

.profile-body{

    padding:20px;

}

}


/*====================================================
  PREMIUM TRANSPORT DETAILS CARD
====================================================*/

.transport-card{
    background:#fff;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    margin-bottom:25px;
}

.section-header{
    padding:18px 25px;
    color:#fff;
}

.section-header h4{
    margin:0;
    font-size:22px;
    font-weight:700;
}

.blue{
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
}

.transport-body{
    padding:30px;
}

/*====================================================
INPUT CARD
====================================================*/

.input-card{
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:18px;
    padding:18px;
    height:100%;
    transition:.30s;
}

.input-card:hover{
    border-color:#2563eb;
    box-shadow:0 10px 25px rgba(37,99,235,.12);
}

.input-card label{
    display:block;
    margin-bottom:10px;
    font-weight:600;
    color:#334155;
}

.input-card label i{
    margin-right:8px;
}

.input-card .form-select,
.input-card .form-control{
    height:52px;
    border-radius:12px;
}

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

.info-box{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:18px;
    padding:22px;
    transition:.30s;
    height:100%;
}

.info-box:hover{
    transform:translateY(-4px);
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.info-box span{
    display:block;
    font-size:13px;
    color:#64748b;
    margin-bottom:8px;
}

.info-box h5,
.info-box h6{
    margin:0;
    font-size:24px;
    font-weight:700;
    color:#0f172a;
}

/*====================================================
GREEN FEE BOX
====================================================*/

.info-box.green{
    background:linear-gradient(135deg,#16a34a,#22c55e);
    border:none;
}

.info-box.green span{
    color:#d1fae5;
}

.info-box.green h5{
    color:#fff;
}

/*====================================================
PAYMENT CARD
====================================================*/

.payment-card{
    background:#fff;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    margin-bottom:25px;
}

.payment-header{
    padding:18px 25px;
    color:#fff;
}

.payment-header h4{
    margin:0;
    font-size:22px;
    font-weight:700;
}

.green{
    background:linear-gradient(135deg,#16a34a,#15803d);
}

.payment-body{
    padding:30px;
}

/*====================================================
PAYMENT SUMMARY GRID
====================================================*/

.payment-summary{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-bottom:25px;
}

/*====================================================
SUMMARY CARD
====================================================*/

.summary-card{
    display:flex;
    align-items:center;
    gap:18px;
    border-radius:20px;
    padding:25px;
    color:#fff;
    transition:.35s;
}

.summary-card:hover{
    transform:translateY(-5px);
    box-shadow:0 20px 35px rgba(0,0,0,.15);
}

.summary-card h3{
    margin:0;
    font-size:30px;
    font-weight:700;
}

.summary-card small{
    display:block;
    margin-bottom:6px;
    font-size:14px;
    opacity:.9;
}

/*====================================================
SUMMARY ICON
====================================================*/

.summary-icon{
    width:70px;
    height:70px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    background:rgba(255,255,255,.20);
}

/*====================================================
CARD COLORS
====================================================*/

.total-card{
    background:linear-gradient(135deg,#2563eb,#3b82f6);
}

.paid-card{
    background:linear-gradient(135deg,#16a34a,#22c55e);
}

.balance-card{
    background:linear-gradient(135deg,#ef4444,#dc2626);
}

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

.total-card:hover{
    background:linear-gradient(135deg,#1d4ed8,#2563eb);
}

.paid-card:hover{
    background:linear-gradient(135deg,#15803d,#16a34a);
}

.balance-card:hover{
    background:linear-gradient(135deg,#dc2626,#b91c1c);
}

/*====================================================
PAYMENT STATUS INPUT
====================================================*/

#payment_status{
    height:52px;
    border-radius:12px;
    font-size:16px;
    font-weight:700;
}

/*====================================================
RESPONSIVE GRID
====================================================*/

@media(max-width:1200px){

.payment-summary{
    grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:768px){

.payment-summary{
    grid-template-columns:1fr;
}

.transport-body,
.payment-body{
    padding:20px;
}

.summary-card{
    padding:20px;
}

.summary-card h3{
    font-size:24px;
}

.summary-icon{
    width:60px;
    height:60px;
    font-size:24px;
}

.info-box{
    padding:18px;
}

.info-box h5,
.info-box h6{
    font-size:20px;
}

}


/*====================================================
  PREMIUM APPROVAL CARD
====================================================*/

.approval-card{
    background:#fff;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(15,23,42,.08);
    margin-bottom:25px;
}

.approval-header{
    background:linear-gradient(135deg,#f59e0b,#d97706);
    color:#fff;
    padding:18px 25px;
}

.approval-header h4{
    margin:0;
    font-size:22px;
    font-weight:700;
}

.approval-body{
    padding:30px;
}

/*====================================================
STATUS CARD
====================================================*/

.status-card{
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:20px;
    padding:22px;
    display:flex;
    align-items:center;
    gap:20px;
    height:100%;
    transition:.35s;
}

.status-card:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.status-icon{
    width:72px;
    height:72px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    color:#fff;
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
}

.status-card small{
    display:block;
    color:#64748b;
    margin-bottom:8px;
}

.status-card h4{
    margin:0;
    font-size:20px;
    font-weight:700;
}

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

#approval_badge{
    display:inline-block;
    padding:8px 18px;
    border-radius:40px;
    font-size:16px;
    font-weight:700;
}

.pending{
    background:#FEF3C7;
    color:#B45309;
}

.approved{
    background:#DCFCE7;
    color:#15803D;
}

.rejected{
    background:#FEE2E2;
    color:#DC2626;
}

/*====================================================
TEXTAREA
====================================================*/

.approval-body textarea{
    min-height:130px;
    resize:none;
    border-radius:15px;
}

/*====================================================
ALERT BOXES
====================================================*/

#capacityAlert,
#registrationAlert{
    border:none;
    border-radius:18px;
    padding:18px 22px;
    font-size:15px;
    font-weight:600;
    display:none;
    margin-top:20px;
}

#capacityAlert{
    background:#FEF3C7;
    color:#92400E;
}

#registrationAlert{
    background:#DBEAFE;
    color:#1D4ED8;
}

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

.action-panel{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:35px;
}

.action-btn{
    border:none;
    border-radius:22px;
    padding:28px;
    color:#fff;
    display:flex;
    align-items:center;
    gap:18px;
    text-align:left;
    transition:.35s;
    cursor:pointer;
    box-shadow:0 15px 35px rgba(0,0,0,.12);
}

.action-btn:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 45px rgba(0,0,0,.18);
}

.action-btn:disabled{
    opacity:.55;
    cursor:not-allowed;
    transform:none;
}

.action-icon{
    width:72px;
    height:72px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    background:rgba(255,255,255,.18);
}

.action-btn h5{
    margin:0;
    font-size:20px;
    font-weight:700;
}

.action-btn small{
    display:block;
    margin-top:4px;
    opacity:.9;
}

/*====================================================
BUTTON COLORS
====================================================*/

.save-btn{
    background:linear-gradient(135deg,#16A34A,#22C55E);
}

.qr-btn{
    background:linear-gradient(135deg,#2563EB,#3B82F6);
}

.pass-btn{
    background:linear-gradient(135deg,#EF4444,#DC2626);
}

.save-btn:hover{
    background:linear-gradient(135deg,#15803D,#16A34A);
}

.qr-btn:hover{
    background:linear-gradient(135deg,#1D4ED8,#2563EB);
}

.pass-btn:hover{
    background:linear-gradient(135deg,#B91C1C,#DC2626);
}

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

.qr-modal{
    border-radius:25px;
    overflow:hidden;
}

.qr-modal .modal-header{
    background:#0F172A;
    color:#fff;
}

.qr-modal img{
    width:250px;
    border-radius:18px;
    box-shadow:0 15px 35px rgba(0,0,0,.18);
}

/*====================================================
BUS PASS MODAL
====================================================*/

.buspass-modal{
    border-radius:25px;
    overflow:hidden;
}

.buspass-modal .modal-header{
    background:linear-gradient(135deg,#2563EB,#1D4ED8);
    color:#fff;
}

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

#loadingModal .modal-content{
    border:none;
    border-radius:25px;
}

#loadingModal .spinner-border{
    width:70px;
    height:70px;
}

#loadingModal h4{
    margin-top:20px;
    font-weight:700;
}

#loadingModal p{
    color:#64748B;
}

/*====================================================
BUTTON ANIMATION
====================================================*/

.action-btn{
    animation:fadeUp .5s ease;
}

@keyframes fadeUp{

from{
    opacity:0;
    transform:translateY(20px);
}

to{
    opacity:1;
    transform:translateY(0);
}

}

/*====================================================
RESPONSIVE
====================================================*/

@media(max-width:991px){

.action-panel{
    grid-template-columns:1fr;
}

.status-card{
    margin-bottom:20px;
}

.action-btn{
    padding:22px;
}

.action-icon{
    width:60px;
    height:60px;
    font-size:24px;
}

}

@media(max-width:768px){

.approval-body{
    padding:20px;
}

.status-card{
    flex-direction:column;
    text-align:center;
}

.status-icon{
    margin-bottom:10px;
}

}


/*====================================================
PREMIUM PAGE ANIMATIONS
====================================================*/

@keyframes fadeIn{

0%{
opacity:0;
transform:translateY(20px);
}

100%{
opacity:1;
transform:translateY(0);
}

}

@keyframes slideLeft{

0%{
opacity:0;
transform:translateX(-40px);
}

100%{
opacity:1;
transform:translateX(0);
}

}

@keyframes slideRight{

0%{
opacity:0;
transform:translateX(40px);
}

100%{
opacity:1;
transform:translateX(0);
}

}

@keyframes pulseGlow{

0%{
box-shadow:0 0 0 rgba(37,99,235,.25);
}

50%{
box-shadow:0 0 30px rgba(37,99,235,.35);
}

100%{
box-shadow:0 0 0 rgba(37,99,235,.25);
}

}

.left-panel{
animation:slideLeft .8s ease;
}

.main-content{
animation:slideRight .8s ease;
}

.search-card,
.profile-card,
.transport-card,
.payment-card,
.approval-card{
animation:fadeIn .7s ease;
}

/*====================================================
BUTTON RIPPLE EFFECT
====================================================*/

.action-btn{
position:relative;
overflow:hidden;
}

.action-btn::after{

content:'';

position:absolute;

left:50%;

top:50%;

width:0;

height:0;

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

border-radius:50%;

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

transition:.5s;

}

.action-btn:hover::after{

width:300px;

height:300px;

}

/*====================================================
FORM FOCUS
====================================================*/

.form-control:focus,
.form-select:focus{

border-color:#2563eb;

box-shadow:0 0 0 .2rem rgba(37,99,235,.15);

}

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

::-webkit-scrollbar{

width:10px;

height:10px;

}

::-webkit-scrollbar-track{

background:#f1f5f9;

}

::-webkit-scrollbar-thumb{

background:#2563eb;

border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

background:#1d4ed8;

}

/* Firefox */

html{

scrollbar-color:#2563eb #f1f5f9;

scrollbar-width:thin;

}

/*====================================================
GLASS EFFECT
====================================================*/

.glass{

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

backdrop-filter:blur(18px);

-webkit-backdrop-filter:blur(18px);

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

}

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

.shadow-soft{
box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.shadow-medium{
box-shadow:0 15px 35px rgba(0,0,0,.12);
}

.shadow-large{
box-shadow:0 20px 50px rgba(0,0,0,.18);
}

/*====================================================
TEXT UTILITIES
====================================================*/

.text-primary-dark{
color:#1d4ed8;
}

.text-success-dark{
color:#15803d;
}

.text-danger-dark{
color:#dc2626;
}

.text-warning-dark{
color:#b45309;
}

/*====================================================
BADGE UTILITIES
====================================================*/

.badge-soft-primary{
background:#dbeafe;
color:#1d4ed8;
padding:8px 15px;
border-radius:30px;
font-weight:600;
}

.badge-soft-success{
background:#dcfce7;
color:#15803d;
padding:8px 15px;
border-radius:30px;
font-weight:600;
}

.badge-soft-danger{
background:#fee2e2;
color:#dc2626;
padding:8px 15px;
border-radius:30px;
font-weight:600;
}

.badge-soft-warning{
background:#fef3c7;
color:#b45309;
padding:8px 15px;
border-radius:30px;
font-weight:600;
}

/*====================================================
IMAGE HOVER
====================================================*/

.student-photo{

transition:.4s;

}

.student-photo:hover{

transform:scale(1.03);

animation:pulseGlow 1.2s infinite;

}

/*====================================================
CARD HOVER
====================================================*/

.search-card:hover,
.profile-card:hover,
.transport-card:hover,
.payment-card:hover,
.approval-card:hover{

transform:translateY(-3px);

transition:.35s;

}

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

.modal-content{

border:none;

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

}

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

@media print{

body{

background:white;

}

.left-panel,
.search-card,
.action-panel,
.modal-header,
.modal-footer{

display:none !important;

}

.main-content{

width:100%;

margin:0;

padding:0;

}

#busPassPreview{

width:100%;

}

}

/*====================================================
TABLETS
====================================================*/

@media(max-width:991px){

.page-title{

flex-direction:column;

align-items:flex-start;

gap:15px;

}

.content-area{

padding:20px;

}

}

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

@media(max-width:768px){

.page-container{

padding:0;

}

.profile-body{

padding:18px;

}

.transport-body,
.payment-body,
.approval-body{

padding:18px;

}

.feature-grid{

grid-template-columns:1fr;

}

.hero-text h1{

font-size:32px;

}

.college-name h2{

font-size:24px;

align-items:center;

justify-content:center;

}

}

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

@media(max-width:480px){

.page-title h2{

font-size:22px;

}

.page-badge{

font-size:14px;

}

.summary-card{

padding:18px;

}

.summary-card h3{

font-size:22px;

}

.action-btn{

padding:18px;

}

.action-btn h5{

font-size:18px;

}

}

/*====================================================
END
====================================================*/