/* ===========================
   e-PARCEL KAMSIS PSMZA
   =========================== */

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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{
    min-height:100vh;
    background:#0B1F3A;
    background-image:
    radial-gradient(circle at top left,#1e3a8a 0%,transparent 40%),
    radial-gradient(circle at bottom right,#0f766e 0%,transparent 40%);
}

/* Glass Card */

.card{

    background:rgba(60,60,60,.55);

    backdrop-filter:blur(15px);

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

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

    border-radius:25px;

    color:white;

    transition:.4s;

}

.card:hover{

    transform:translateY(-8px);

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

}

/* Logo */

.card img{

    width:120px;

    transition:.4s;

}

.card img:hover{

    transform:rotate(5deg) scale(1.08);

}

/* Tajuk */

h1,h2,h3{

    color:white;

    font-weight:700;

}

p{

    color:#d1d5db;

}

/* Button */

.btn{

    border-radius:15px;

    font-weight:600;

    padding:12px;

    transition:.3s;

}

.btn-primary{

    background:#2563eb;

    border:none;

}

.btn-success{

    background:#16a34a;

    border:none;

}

.btn-danger{

    border:none;

}

.btn:hover{

    transform:scale(1.03);

}

/* Input */

input,
select,
textarea{

    background:#f8fafc;

    border-radius:12px;

    border:1px solid #d1d5db;

    padding:12px;

}

input:focus,
textarea:focus{

    box-shadow:0 0 10px rgba(37,99,235,.5);

    border-color:#2563eb;

}

/* Table */

table{

    background:white;

    border-radius:15px;

    overflow:hidden;

}

th{

    background:#1d4ed8;

    color:white;

}

tr:hover{

    background:#eef4ff;

}

/* Card Dashboard */

.dashboard-card{

    border-radius:20px;

    color:white;

    padding:25px;

    transition:.3s;

}

.dashboard-card:hover{

    transform:translateY(-6px);

}

.bg-blue{

    background:#2563eb;

}

.bg-green{

    background:#16a34a;

}

.bg-orange{

    background:#ea580c;

}

.bg-red{

    background:#dc2626;

}

/* Responsive */

@media(max-width:768px){

.card{

padding:25px !important;

}

h2{

font-size:24px;

}

}

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

.dashboard-layout{
    min-height:100vh;
    display:flex;
    background:#071a33;
}

/* Sidebar */

.sidebar{
    width:260px;
    min-height:100vh;
    padding:24px 18px;
    position:fixed;
    top:0;
    left:0;
    z-index:1000;

    background:rgba(35,42,55,.92);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border-right:1px solid rgba(255,255,255,.12);
    box-shadow:10px 0 30px rgba(0,0,0,.18);

    transition:.3s ease;
}

.sidebar-logo{
    display:flex;
    align-items:center;
    gap:12px;

    color:#ffffff;
    font-size:23px;
    font-weight:800;

    padding:10px 12px 24px;
}

.sidebar-logo i{
    width:46px;
    height:46px;

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

    background:#2563eb;
    border-radius:14px;
}

.admin-info{
    display:flex;
    align-items:center;
    gap:12px;

    padding:14px;
    margin-bottom:22px;

    color:#ffffff;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
}

.admin-info i{
    font-size:34px;
    color:#60a5fa;
}

.admin-info small,
.admin-info strong{
    display:block;
}

.admin-info small{
    color:#b8c1d1;
}

.sidebar-menu{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.sidebar-menu a{
    display:flex;
    align-items:center;
    gap:14px;

    padding:13px 15px;

    color:#dbe5f5;
    text-decoration:none;

    border-radius:13px;
    transition:.25s ease;
}

.sidebar-menu a i{
    width:22px;
    text-align:center;
    font-size:18px;
}

.sidebar-menu a:hover,
.sidebar-menu a.active{
    color:#ffffff;
    background:#2563eb;
    transform:translateX(4px);
}

.sidebar-menu .logout-link{
    margin-top:18px;
    color:#fecaca;
}

.sidebar-menu .logout-link:hover{
    background:#dc2626;
    color:#ffffff;
}

/* Main content */

.main-content{
    width:calc(100% - 260px);
    margin-left:260px;
    padding:32px;
}

.topbar{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:18px;
}

.topbar h1{
    margin:0;
    font-size:30px;
    color:#ffffff;
}

.topbar p{
    margin:4px 0 0;
    color:#b9c6d8;
}

.menu-button{
    display:none;

    width:45px;
    height:45px;

    border:0;
    border-radius:12px;

    background:#2563eb;
    color:#ffffff;
}

/* Statistic cards */

.stat-card{
    min-height:145px;
    padding:24px;

    display:flex;
    align-items:center;
    gap:18px;

    color:#ffffff;
    background:rgba(75,85,99,.48);

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

    border:1px solid rgba(255,255,255,.13);
    border-radius:22px;

    box-shadow:0 14px 35px rgba(0,0,0,.20);
    transition:.3s ease;
}

.stat-card:hover{
    transform:translateY(-7px);
    box-shadow:0 20px 45px rgba(0,0,0,.30);
}

.stat-card p{
    margin:0 0 5px;
    color:#d5deeb;
}

.stat-card h2{
    margin:0;
    font-size:34px;
}

.stat-icon{
    width:64px;
    height:64px;

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

    border-radius:18px;
    font-size:27px;
}

.stat-icon.blue{
    background:#2563eb;
}

.stat-icon.orange{
    background:#ea580c;
}

.stat-icon.green{
    background:#16a34a;
}

/* Content card */

.content-card{
    padding:26px;

    color:#ffffff;
    background:rgba(75,85,99,.42);

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

    border:1px solid rgba(255,255,255,.12);
    border-radius:22px;
}

.quick-menu{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin-top:20px;
}

.quick-menu a{
    min-height:120px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;

    color:#ffffff;
    text-decoration:none;

    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.10);
    border-radius:17px;

    transition:.3s ease;
}

.quick-menu a i{
    font-size:28px;
    color:#60a5fa;
}

.quick-menu a:hover{
    background:#2563eb;
    transform:translateY(-5px);
}

.quick-menu a:hover i{
    color:#ffffff;
}

/* Telefon dan tablet */

@media(max-width:768px){

    .sidebar{
        left:-280px;
    }

    .sidebar.show{
        left:0;
    }

    .main-content{
        width:100%;
        margin-left:0;
        padding:20px;
    }

    .menu-button{
        display:block;
        flex-shrink:0;
    }

    .topbar h1{
        font-size:24px;
    }

    .quick-menu{
        grid-template-columns:1fr;
    }
}

/* =====================================
   HALAMAN LOGIN ADMIN
   ===================================== */

.login-page{
    min-height:100vh;
    margin:0;
    color:#ffffff;
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(20,184,166,.18),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(37,99,235,.22),
            transparent 35%
        ),
        #071a33;

    overflow-x:hidden;
}

.login-wrapper{
    min-height:100vh;
    width:100%;

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

    padding:24px;
}

.login-card{
    width:100%;
    max-width:460px;

    position:relative;

    padding:42px;

    background:rgba(51,65,85,.55);

    border:1px solid rgba(255,255,255,.14);
    border-radius:26px;

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

    box-shadow:
        0 25px 65px rgba(0,0,0,.35);

    animation:loginFadeIn .7s ease;
}

.login-card:hover{
    border-color:rgba(45,212,191,.35);

    box-shadow:
        0 30px 80px rgba(0,0,0,.42);
}

.login-back{
    display:inline-flex;
    align-items:center;
    gap:8px;

    margin-bottom:26px;

    color:#cbd5e1;
    text-decoration:none;

    font-size:14px;
    transition:.25s ease;
}

.login-back:hover{
    color:#2dd4bf;
    transform:translateX(-3px);
}

.login-brand{
    text-align:center;
    margin-bottom:30px;
}

.login-logo{
    width:78px;
    height:78px;

    margin:0 auto 18px;

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

    color:#ffffff;
    font-size:34px;

    background:
        linear-gradient(
            135deg,
            #14b8a6,
            #2563eb
        );

    border-radius:23px;

    box-shadow:
        0 15px 35px rgba(20,184,166,.25);

    transition:.3s ease;
}

.login-logo:hover{
    transform:rotate(6deg) scale(1.05);
}

.login-brand h1{
    margin:0 0 7px;

    color:#ffffff;
    font-size:30px;
    font-weight:750;
}

.login-brand p{
    margin:0;

    color:#5eead4;
    font-size:14px;
}

.login-card .form-label{
    margin-bottom:8px;

    color:#e2e8f0;
    font-size:14px;
    font-weight:600;
}

.login-input-group{
    min-height:55px;

    display:flex;
    align-items:center;

    background:rgba(15,23,42,.58);

    border:1px solid rgba(255,255,255,.12);
    border-radius:15px;

    overflow:hidden;
    transition:.25s ease;
}

.login-input-group:focus-within{
    border-color:#2dd4bf;

    box-shadow:
        0 0 0 4px rgba(45,212,191,.12);
}

.login-input-group > span{
    width:52px;

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

    color:#5eead4;
    font-size:17px;
}

.login-input-group .form-control{
    min-height:53px;

    padding:12px 5px;

    color:#ffffff;
    background:transparent;

    border:0;
    border-radius:0;

    box-shadow:none;
}

.login-input-group .form-control:focus{
    color:#ffffff;
    background:transparent;
    box-shadow:none;
}

.login-input-group .form-control::placeholder{
    color:#94a3b8;
}

.password-toggle{
    width:52px;
    height:53px;

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

    color:#94a3b8;
    background:transparent;

    border:0;

    transition:.25s ease;
}

.password-toggle:hover{
    color:#2dd4bf;
}

.login-button{
    min-height:55px;

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #14b8a6,
            #0f9f91
        );

    border:0;
    border-radius:15px;

    font-size:16px;
    font-weight:700;

    box-shadow:
        0 13px 30px rgba(20,184,166,.22);

    transition:.3s ease;
}

.login-button:hover{
    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #2dd4bf,
            #14b8a6
        );

    transform:translateY(-3px);

    box-shadow:
        0 18px 38px rgba(20,184,166,.32);
}

.login-button:active{
    transform:translateY(0);
}

.login-button i{
    margin-right:8px;
}

.login-alert{
    display:flex;
    align-items:center;
    gap:10px;

    border:0;
    border-radius:13px;

    font-size:14px;
}

.login-footer{
    margin:28px 0 0;

    color:#94a3b8;
    text-align:center;
    font-size:12px;
}

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

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

@media(max-width:576px){

    .login-wrapper{
        padding:16px;
    }

    .login-card{
        padding:30px 22px;
        border-radius:21px;
    }

    .login-brand h1{
        font-size:26px;
    }

    .login-logo{
        width:68px;
        height:68px;
        font-size:29px;
    }
}

/* =====================================
   DASHBOARD ADMIN
   ===================================== */

.admin-page{
    min-height:100vh;
    margin:0;

    background:
        radial-gradient(
            circle at 80% 15%,
            rgba(20,184,166,.14),
            transparent 30%
        ),
        #071a33;

    color:#ffffff;
}

.admin-layout{
    min-height:100vh;
    display:flex;
}

.admin-sidebar{
    width:270px;
    min-height:100vh;

    position:fixed;
    top:0;
    left:0;
    z-index:1000;

    padding:24px 18px;

    background:rgba(30,41,59,.86);

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

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

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

    transition:.3s ease;
}

.sidebar-brand{
    display:flex;
    align-items:center;
    gap:13px;

    padding:5px 8px 26px;
}

.brand-icon{
    width:48px;
    height:48px;

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

    background:
        linear-gradient(
            135deg,
            #14b8a6,
            #2563eb
        );

    border-radius:15px;
    font-size:21px;
}

.sidebar-brand h2{
    margin:0;
    font-size:21px;
}

.sidebar-brand span{
    color:#5eead4;
    font-size:11px;
}

.sidebar-user{
    display:flex;
    align-items:center;
    gap:12px;

    padding:14px;
    margin-bottom:24px;

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

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

    border-radius:16px;
}

.user-icon{
    width:43px;
    height:43px;

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

    color:#5eead4;
    background:rgba(20,184,166,.15);

    border-radius:13px;
}

.sidebar-user small,
.sidebar-user strong{
    display:block;
}

.sidebar-user small{
    color:#94a3b8;
}

.sidebar-nav{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.sidebar-nav a{
    display:flex;
    align-items:center;
    gap:13px;

    padding:13px 15px;

    color:#cbd5e1;
    text-decoration:none;

    border-radius:13px;
    transition:.25s ease;
}

.sidebar-nav a i{
    width:21px;
    text-align:center;
}

.sidebar-nav a:hover,
.sidebar-nav a.active{
    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #14b8a6,
            #0f9f91
        );

    transform:translateX(4px);
}

.sidebar-nav .logout-link{
    margin-top:18px;
    color:#fecaca;
}

.sidebar-nav .logout-link:hover{
    background:#dc2626;
}

.admin-main{
    width:calc(100% - 270px);
    margin-left:270px;

    padding:34px;
}

.admin-topbar{
    display:flex;
    align-items:center;
    gap:15px;

    margin-bottom:28px;
}

.admin-topbar h1{
    margin:0;
    font-size:30px;
}

.admin-topbar p{
    margin:5px 0 0;
    color:#94a3b8;
}

.sidebar-toggle{
    display:none;

    width:45px;
    height:45px;

    color:#ffffff;
    background:#14b8a6;

    border:0;
    border-radius:12px;
}

.admin-stat-card{
    min-height:140px;

    display:flex;
    align-items:center;
    gap:18px;

    padding:24px;

    background:rgba(51,65,85,.55);

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

    border-radius:22px;

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

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

    transition:.3s ease;
}

.admin-stat-card:hover{
    transform:translateY(-7px);

    border-color:
        rgba(45,212,191,.35);
}

.admin-stat-icon{
    width:64px;
    height:64px;

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

    border-radius:18px;
    font-size:26px;
}

.admin-stat-icon.total{
    color:#ffffff;
    background:#2563eb;
}

.admin-stat-icon.pending{
    color:#854d0e;
    background:#fef3c7;
}

.admin-stat-icon.completed{
    color:#065f46;
    background:#ccfbf1;
}

.admin-stat-card p{
    margin:0 0 4px;
    color:#cbd5e1;
}

.admin-stat-card h2{
    margin:0;
    font-size:34px;
}

.admin-content-card{
    margin-top:28px;
    padding:26px;

    background:rgba(51,65,85,.48);

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

    border-radius:22px;

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

.content-title h3{
    margin:0;
}

.content-title p{
    margin:5px 0 0;
    color:#94a3b8;
}

.admin-quick-grid{
    display:grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:17px;
    margin-top:22px;
}

.admin-quick-grid a{
    min-height:150px;

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:8px;

    padding:22px;

    color:#ffffff;
    text-decoration:none;

    background:rgba(15,23,42,.45);

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

    border-radius:18px;
    transition:.3s ease;
}

.admin-quick-grid a i{
    margin-bottom:8px;

    color:#5eead4;
    font-size:27px;
}

.admin-quick-grid a span{
    color:#94a3b8;
    font-size:13px;
}

.admin-quick-grid a:hover{
    background:
        linear-gradient(
            135deg,
            #14b8a6,
            #0f9f91
        );

    transform:translateY(-5px);
}

.admin-quick-grid a:hover i,
.admin-quick-grid a:hover span{
    color:#ffffff;
}

@media(max-width:900px){

    .admin-quick-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:768px){

    .admin-sidebar{
        left:-290px;
    }

    .admin-sidebar.show{
        left:0;
    }

    .admin-main{
        width:100%;
        margin-left:0;
        padding:20px;
    }

    .sidebar-toggle{
        display:block;
        flex-shrink:0;
    }

    .admin-topbar h1{
        font-size:24px;
    }
}

/* =====================================
   BORANG DAFTAR PARCEL
   ===================================== */

.parcel-form-card{
    width:100%;
    max-width:1050px;

    padding:30px;

    background:rgba(51,65,85,.52);

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

    border-radius:24px;

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

    box-shadow:
        0 20px 55px rgba(0,0,0,.25);
}

.form-card-header{
    display:flex;
    align-items:center;
    gap:16px;

    margin-bottom:28px;
}

.form-card-icon{
    width:58px;
    height:58px;

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

    color:#ffffff;
    font-size:23px;

    background:
        linear-gradient(
            135deg,
            #14b8a6,
            #2563eb
        );

    border-radius:17px;
}

.form-card-header h2{
    margin:0 0 4px;
    font-size:23px;
}

.form-card-header p{
    margin:0;
    color:#94a3b8;
}

.parcel-form .form-label{
    margin-bottom:8px;

    color:#e2e8f0;
    font-size:14px;
    font-weight:600;
}

.modern-input{
    min-height:55px;

    display:flex;
    align-items:center;

    background:rgba(15,23,42,.58);

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

    border-radius:15px;

    overflow:hidden;
    transition:.25s ease;
}

.modern-input:focus-within{
    border-color:#2dd4bf;

    box-shadow:
        0 0 0 4px rgba(45,212,191,.12);
}

.modern-input span{
    width:52px;

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

    color:#5eead4;
}

.modern-input .form-control{
    min-height:53px;

    color:#ffffff;
    background:transparent;

    border:0;
    border-radius:0;

    box-shadow:none;
}

.modern-input .form-control:focus{
    color:#ffffff;
    background:transparent;
    box-shadow:none;
}

.modern-input .form-control::placeholder{
    color:#94a3b8;
}

.modern-textarea{
    padding:15px;

    color:#ffffff;
    background:rgba(15,23,42,.58);

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

    border-radius:15px;
}

.modern-textarea:focus{
    color:#ffffff;
    background:rgba(15,23,42,.58);

    border-color:#2dd4bf;

    box-shadow:
        0 0 0 4px rgba(45,212,191,.12);
}

.modern-textarea::placeholder{
    color:#94a3b8;
}

.form-actions{
    display:flex;
    justify-content:flex-end;
    gap:12px;

    margin-top:28px;
}

.secondary-button,
.save-parcel-button{
    min-height:50px;

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

    padding:12px 20px;

    border:0;
    border-radius:14px;

    font-weight:700;
}

.secondary-button{
    color:#e2e8f0;
    background:rgba(255,255,255,.08);
}

.secondary-button:hover{
    color:#ffffff;
    background:rgba(255,255,255,.14);
}

.save-parcel-button{
    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #14b8a6,
            #0f9f91
        );
}

.save-parcel-button:hover{
    color:#ffffff;

    transform:translateY(-2px);

    box-shadow:
        0 14px 30px rgba(20,184,166,.25);
}

@media(max-width:576px){

    .parcel-form-card{
        padding:22px 18px;
    }

    .form-actions{
        flex-direction:column-reverse;
    }

    .secondary-button,
    .save-parcel-button{
        width:100%;
    }
}

/* =====================================
   SENARAI PARCEL
   ===================================== */

.parcel-list-card{
    width:100%;
    padding:28px;

    background:rgba(51,65,85,.52);

    border:1px solid rgba(255,255,255,.11);
    border-radius:24px;

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

    box-shadow:0 20px 55px rgba(0,0,0,.25);
}

.parcel-list-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    margin-bottom:22px;
}

.parcel-list-header h2{
    margin:0 0 5px;
    font-size:23px;
}

.parcel-list-header h2 i{
    margin-right:8px;
    color:#5eead4;
}

.parcel-list-header p{
    margin:0;
    color:#94a3b8;
}

.add-parcel-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:12px 18px;

    color:#ffffff;
    background:linear-gradient(
        135deg,
        #14b8a6,
        #0f9f91
    );

    border:0;
    border-radius:13px;
    font-weight:700;
}

.add-parcel-button:hover{
    color:#ffffff;
    transform:translateY(-2px);
}

.search-wrapper{
    width:100%;
    max-width:420px;
    min-height:52px;

    display:flex;
    align-items:center;

    margin-bottom:22px;

    background:rgba(15,23,42,.58);
    border:1px solid rgba(255,255,255,.11);
    border-radius:14px;

    overflow:hidden;
}

.search-wrapper i{
    width:50px;
    text-align:center;
    color:#5eead4;
}

.search-wrapper input{
    width:100%;
    min-height:50px;

    padding:10px 14px 10px 0;

    color:#ffffff;
    background:transparent;

    border:0;
    outline:none;
}

.search-wrapper input::placeholder{
    color:#94a3b8;
}

.modern-table{
    width:100%;
    min-width:950px;

    border-collapse:separate;
    border-spacing:0 10px;

    color:#e2e8f0;
    background:transparent;
}

.modern-table thead th{
    padding:13px 15px;

    color:#94a3b8;
    background:transparent;

    border:0;
    font-size:13px;
    font-weight:600;
    text-transform:uppercase;
}

.modern-table tbody tr{
    background:rgba(15,23,42,.48);
    transition:.25s ease;
}

.modern-table tbody tr:hover{
    background:rgba(30,41,59,.85);
    transform:translateY(-2px);
}

.modern-table tbody td{
    padding:15px;
    vertical-align:middle;

    border:0;
}

.modern-table tbody td:first-child{
    border-radius:14px 0 0 14px;
}

.modern-table tbody td:last-child{
    border-radius:0 14px 14px 0;
}

.student-name{
    display:flex;
    align-items:center;
    gap:10px;
}

.student-avatar{
    width:38px;
    height:38px;

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

    color:#5eead4;
    background:rgba(20,184,166,.13);

    border-radius:11px;
}

.tracking-number{
    color:#93c5fd;
    font-family:monospace;
    font-size:14px;
}

.status-badge{
    display:inline-flex;
    align-items:center;
    gap:7px;

    padding:7px 11px;

    border-radius:30px;
    font-size:12px;
    font-weight:700;
}

.status-badge.pending{
    color:#fbbf24;
    background:rgba(245,158,11,.13);
}

.status-badge.completed{
    color:#5eead4;
    background:rgba(20,184,166,.13);
}

.action-buttons{
    display:flex;
    align-items:center;
    gap:8px;
}

.action-button{
    width:38px;
    height:38px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    color:#ffffff;
    text-decoration:none;

    border-radius:10px;
    transition:.25s ease;
}

.status-button{
    background:#14b8a6;
}

.edit-button{
    background:#2563eb;
}

.delete-button{
    background:#dc2626;
}

.action-button:hover{
    color:#ffffff;
    transform:translateY(-3px);
    filter:brightness(1.12);
}

.empty-table{
    padding:45px 20px;
    text-align:center;
}

.empty-table i{
    margin-bottom:14px;
    color:#5eead4;
    font-size:42px;
}

.empty-table h3{
    margin-bottom:5px;
}

.empty-table p{
    margin:0;
    color:#94a3b8;
}

@media(max-width:768px){

    .parcel-list-card{
        padding:20px 15px;
    }

    .parcel-list-header{
        flex-direction:column;
        align-items:flex-start;
    }

    .add-parcel-button{
        width:100%;
    }

    .search-wrapper{
        max-width:none;
    }
}

/* =====================================
   DASHBOARD VERSI 2.0
   ===================================== */

.dashboard-heading{
    flex:1;
}

.dashboard-date{
    display:flex;
    align-items:center;
    gap:9px;

    padding:11px 16px;

    color:#cbd5e1;
    background:rgba(51,65,85,.52);

    border:1px solid rgba(255,255,255,.1);
    border-radius:13px;
}

.admin-stat-card span{
    color:#94a3b8;
    font-size:12px;
}

.stat-total{
    border-left:4px solid #3b82f6;
}

.stat-pending{
    border-left:4px solid #f59e0b;
}

.stat-completed{
    border-left:4px solid #14b8a6;
}

.dashboard-panel{
    height:100%;

    padding:26px;

    background:rgba(51,65,85,.5);

    border:1px solid rgba(255,255,255,.1);
    border-radius:22px;

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

    box-shadow:0 18px 45px rgba(0,0,0,.2);
}

.panel-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    margin-bottom:22px;
}

.panel-header h3{
    margin:0 0 6px;
    font-size:20px;
}

.panel-header h3 i{
    margin-right:8px;
    color:#5eead4;
}

.panel-header p{
    margin:0;
    color:#94a3b8;
    font-size:13px;
}

.chart-container{
    position:relative;

    width:100%;
    height:310px;
}

.dashboard-actions{
    display:flex;
    flex-direction:column;
    gap:13px;
}

.dashboard-actions a{
    min-height:78px;

    display:flex;
    align-items:center;
    gap:14px;

    padding:14px;

    color:#ffffff;
    text-decoration:none;

    background:rgba(15,23,42,.5);

    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;

    transition:.25s ease;
}

.dashboard-actions a:hover{
    background:rgba(20,184,166,.16);
    border-color:rgba(45,212,191,.35);
    transform:translateX(4px);
}

.dashboard-actions a > div:nth-child(2){
    flex:1;
}

.dashboard-actions strong,
.dashboard-actions span{
    display:block;
}

.dashboard-actions span{
    margin-top:3px;
    color:#94a3b8;
    font-size:12px;
}

.action-icon{
    width:48px;
    height:48px;

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

    border-radius:14px;
    font-size:18px;
}

.action-icon.add{
    color:#5eead4;
    background:rgba(20,184,166,.15);
}

.action-icon.list{
    color:#93c5fd;
    background:rgba(37,99,235,.16);
}

.action-icon.search{
    color:#fde68a;
    background:rgba(245,158,11,.15);
}

.activity-heading{
    margin-bottom:15px;
}

.view-all-link{
    display:inline-flex;
    align-items:center;
    gap:8px;

    color:#5eead4;
    text-decoration:none;
    font-size:13px;
}

.view-all-link:hover{
    color:#ffffff;
}

.activity-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.activity-item{
    display:grid;

    grid-template-columns:
        48px minmax(160px,1fr)
        minmax(150px,1fr) auto;

    align-items:center;
    gap:14px;

    padding:14px 16px;

    background:rgba(15,23,42,.46);

    border:1px solid rgba(255,255,255,.07);
    border-radius:15px;

    transition:.25s ease;
}

.activity-item:hover{
    background:rgba(30,41,59,.78);
    transform:translateY(-2px);
}

.activity-icon{
    width:43px;
    height:43px;

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

    color:#5eead4;
    background:rgba(20,184,166,.14);

    border-radius:12px;
}

.activity-info strong,
.activity-info span,
.activity-tracking span,
.activity-tracking small{
    display:block;
}

.activity-info span,
.activity-tracking small{
    margin-top:3px;
    color:#94a3b8;
    font-size:12px;
}

.activity-tracking span{
    color:#93c5fd;
    font-family:monospace;
    font-size:13px;
}

.empty-activity{
    padding:40px 20px;
    text-align:center;
}

.empty-activity i{
    margin-bottom:14px;
    color:#5eead4;
    font-size:42px;
}

.empty-activity h4{
    margin-bottom:6px;
}

.empty-activity p{
    margin:0;
    color:#94a3b8;
}

@media(max-width:900px){

    .activity-item{
        grid-template-columns:45px 1fr auto;
    }

    .activity-tracking{
        display:none;
    }
}

@media(max-width:576px){

    .dashboard-date{
        display:none;
    }

    .dashboard-panel{
        padding:20px 16px;
    }

    .chart-container{
        height:260px;
    }

    .activity-item{
        grid-template-columns:42px 1fr;
    }

    .activity-item > .status-badge{
        grid-column:2;
        width:max-content;
    }

    .activity-tracking{
        display:none;
    }

    .view-all-link{
        display:none;
    }
}

/* =====================================
   HALAMAN UTAMA
   ===================================== */

.home-page{
    min-height:100vh;
    margin:0;

    color:#ffffff;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(37,99,235,.23),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(20,184,166,.18),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #071a33,
            #0b2442,
            #0d3542
        );

    overflow-x:hidden;
}

.home-wrapper{
    min-height:100vh;

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

    padding:28px;
}

.home-card{
    width:100%;
    max-width:560px;

    padding:42px;

    background:rgba(31,41,55,.72);

    border:1px solid rgba(255,255,255,.13);
    border-radius:28px;

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

    box-shadow:
        0 30px 80px rgba(0,0,0,.38);

    animation:homeFadeIn .7s ease;
    transition:.35s ease;
}

.home-card:hover{
    transform:translateY(-5px);

    border-color:rgba(45,212,191,.3);

    box-shadow:
        0 35px 90px rgba(0,0,0,.45);
}

.home-logo{
    display:flex;
    align-items:center;
    gap:15px;

    margin-bottom:30px;
}

.home-logo-icon{
    width:58px;
    height:58px;

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

    color:#ffffff;
    font-size:24px;

    background:
        linear-gradient(
            135deg,
            #14b8a6,
            #2563eb
        );

    border-radius:18px;

    box-shadow:
        0 12px 30px rgba(20,184,166,.25);
}

.home-brand-text h1{
    margin:0 0 4px;

    color:#ffffff;
    font-size:24px;
    font-weight:800;
}

.home-brand-text p{
    margin:0;

    color:#5eead4;
    font-size:13px;
}

.home-hero-icon{
    width:92px;
    height:92px;

    margin:0 auto 24px;

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

    color:#ffffff;
    font-size:37px;

    background:
        linear-gradient(
            135deg,
            #14b8a6,
            #2563eb
        );

    border-radius:26px;

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

    transition:.35s ease;
}

.home-hero-icon:hover{
    transform:rotate(6deg) scale(1.05);
}

.home-welcome{
    text-align:center;
    margin-bottom:30px;
}

.home-badge{
    display:inline-flex;
    align-items:center;
    gap:7px;

    margin-bottom:16px;
    padding:8px 13px;

    color:#5eead4;
    background:rgba(20,184,166,.12);

    border:1px solid rgba(45,212,191,.18);
    border-radius:30px;

    font-size:12px;
    font-weight:600;
}

.home-welcome h2{
    margin:0 0 10px;

    font-size:28px;
    font-weight:800;
}

.home-welcome p{
    max-width:430px;
    margin:0 auto;

    color:#aeb9c9;
    font-size:14px;
    line-height:1.7;
}

.home-actions{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.home-button{
    min-height:76px;

    display:flex;
    align-items:center;
    gap:15px;

    padding:14px 17px;

    color:#ffffff;
    text-decoration:none;

    border-radius:18px;

    transition:.3s ease;
}

.home-button:hover{
    color:#ffffff;
    transform:translateY(-4px);
}

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

    box-shadow:
        0 14px 32px rgba(37,99,235,.24);
}

.admin-button:hover{
    box-shadow:
        0 20px 40px rgba(37,99,235,.36);
}

.student-button{
    background:
        linear-gradient(
            135deg,
            #14b8a6,
            #0f9f91
        );

    box-shadow:
        0 14px 32px rgba(20,184,166,.22);
}

.student-button:hover{
    box-shadow:
        0 20px 40px rgba(20,184,166,.34);
}

.button-icon{
    width:48px;
    height:48px;

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

    background:rgba(255,255,255,.16);
    border-radius:14px;

    font-size:19px;
}

.button-text{
    flex:1;
}

.button-text strong,
.button-text small{
    display:block;
}

.button-text strong{
    font-size:17px;
}

.button-text small{
    margin-top:2px;

    color:rgba(255,255,255,.78);
    font-size:12px;
}

.home-footer{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    margin-top:26px;

    color:#94a3b8;
    font-size:12px;
}

.home-footer i{
    color:#5eead4;
}

@keyframes homeFadeIn{
    from{
        opacity:0;
        transform:translateY(24px);
    }

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

@media(max-width:576px){

    .home-wrapper{
        padding:16px;
    }

    .home-card{
        padding:30px 20px;
        border-radius:22px;
    }

    .home-logo{
        align-items:flex-start;
    }

    .home-brand-text h1{
        font-size:20px;
    }

    .home-welcome h2{
        font-size:24px;
    }

    .home-hero-icon{
        width:78px;
        height:78px;
        font-size:31px;
    }

    .home-button{
        min-height:70px;
    }
}

.floating-icon{
    animation:floatIcon 3s ease-in-out infinite;
}

.home-copyright{
    margin-top:14px;
    margin-bottom:0;

    color:#64748b;
    text-align:center;
    font-size:11px;
}

@keyframes floatIcon{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }

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

/* =====================================
   NOTIS OPERASI
   ===================================== */

.operation-notice{

    margin-top:30px;

    padding:22px;

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

    border:1px solid rgba(255,193,7,.35);

    border-left:6px solid #ffc107;

    border-radius:18px;

}

.notice-header{

    display:flex;
    align-items:center;
    gap:12px;

    margin-bottom:18px;

}

.notice-header i{

    font-size:28px;

    color:#ffc107;

}

.notice-header h3{

    margin:0;

    color:#ffffff;

    font-size:20px;

    font-weight:700;

}

.notice-body h5{

    margin-top:15px;
    margin-bottom:8px;

    color:#5eead4;

    font-weight:600;

}

.notice-body ul{

    margin-bottom:15px;
    padding-left:22px;

    color:#ffffff;

}

.notice-body li{

    margin-bottom:6px;

}

.notice-info{

    margin-top:15px;

    padding:16px;

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

    border-radius:12px;

}

.notice-info p{

    margin:0;

    color:#e2e8f0;

    line-height:1.8;

    text-align:justify;

}

/* =====================================
   HALAMAN UTAMA — SUSUNAN DUA KOLUM
   ===================================== */

.home-page{
    min-height:100vh;

    background:
        radial-gradient(
            circle at 12% 15%,
            rgba(37,99,235,.22),
            transparent 30%
        ),
        radial-gradient(
            circle at 88% 85%,
            rgba(20,184,166,.18),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #071a33,
            #0a2544,
            #0b3943
        );
}

.home-wrapper{
    width:100%;
    min-height:100vh;

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

    padding:32px;
}

.home-card.home-card-wide{
    width:100%;
    max-width:1180px;

    padding:34px;

    background:rgba(30,41,59,.76);

    border:1px solid rgba(255,255,255,.13);
    border-radius:30px;

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

    box-shadow:
        0 30px 90px rgba(0,0,0,.42);

    animation:homeFadeIn .7s ease;
}

.home-header{
    padding-bottom:24px;
    margin-bottom:28px;

    border-bottom:1px solid rgba(255,255,255,.1);
}

.home-header .home-logo{
    margin:0;
}

.home-layout{
    display:grid;

    grid-template-columns:
        minmax(0, .95fr)
        minmax(0, 1.05fr);

    gap:28px;
    align-items:stretch;
}

/* Bahagian akses sebelah kiri */

.home-access-section{
    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:26px;

    background:rgba(15,23,42,.32);

    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
}

.home-access-section .home-hero-icon{
    width:88px;
    height:88px;

    margin-bottom:22px;
}

.home-access-section .home-welcome{
    margin-bottom:25px;
}

.home-access-section .home-welcome h2{
    font-size:29px;
}

.home-actions{
    width:100%;
}

.home-button{
    width:100%;
}

.button-arrow{
    margin-left:auto;
}

/* Notis di sebelah kanan */

.operation-notice{
    height:100%;
    margin:0;
    padding:26px;

    color:#ffffff;

    background:
        linear-gradient(
            145deg,
            rgba(245,158,11,.12),
            rgba(15,23,42,.58)
        );

    border:1px solid rgba(245,158,11,.32);
    border-left:5px solid #fbbf24;
    border-radius:24px;

    box-shadow:
        0 18px 45px rgba(0,0,0,.2);
}

.notice-header{
    display:flex;
    align-items:center;
    gap:14px;

    margin-bottom:24px;
}

.notice-main-icon{
    width:54px;
    height:54px;

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

    flex-shrink:0;

    color:#111827;
    background:#fbbf24;

    border-radius:16px;
    font-size:22px;
}

.notice-header span{
    display:block;

    margin-bottom:3px;

    color:#fcd34d;
    font-size:11px;
    font-weight:700;
    letter-spacing:.7px;
    text-transform:uppercase;
}

.notice-header h3{
    margin:0;

    color:#ffffff;
    font-size:20px;
    line-height:1.35;
}

.notice-section{
    padding:18px 0;

    border-top:1px solid rgba(255,255,255,.09);
}

.notice-section-title{
    display:flex;
    align-items:center;
    gap:10px;

    margin-bottom:14px;
}

.notice-section-title i{
    color:#5eead4;
    font-size:18px;
}

.notice-section-title h4{
    margin:0;

    color:#ffffff;
    font-size:16px;
    font-weight:700;
}

.notice-day-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:9px;
}

.notice-day-grid span{
    padding:9px 10px;

    color:#e2e8f0;
    text-align:center;

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

    border:1px solid rgba(255,255,255,.08);
    border-radius:11px;

    font-size:13px;
    font-weight:600;
}

.operation-time{
    display:grid;
    gap:10px;
}

.time-item{
    display:flex;
    align-items:center;
    gap:12px;

    padding:12px;

    background:rgba(15,23,42,.45);

    border:1px solid rgba(255,255,255,.07);
    border-radius:14px;
}

.time-icon{
    width:40px;
    height:40px;

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

    flex-shrink:0;

    color:#5eead4;
    background:rgba(20,184,166,.14);

    border-radius:12px;
}

.time-item strong,
.time-item span{
    display:block;
}

.time-item strong{
    margin-bottom:2px;

    color:#ffffff;
    font-size:13px;
}

.time-item span{
    color:#cbd5e1;
    font-size:13px;
}

.notice-info{
    margin-top:8px;
    padding:16px;

    background:rgba(245,158,11,.08);

    border:1px solid rgba(245,158,11,.18);
    border-radius:15px;
}

.notice-info-title{
    display:flex;
    align-items:center;
    gap:8px;

    margin-bottom:10px;

    color:#fcd34d;
}

.notice-info p{
    margin:0 0 11px;

    color:#dbe4f0;
    font-size:12px;
    line-height:1.7;
    text-align:left;
}

.notice-info p:last-child{
    margin-bottom:0;
}

/* Bahagian bawah */

.home-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    margin-top:25px;
    padding-top:20px;

    border-top:1px solid rgba(255,255,255,.09);
}

.home-bottom .home-footer,
.home-bottom .home-copyright{
    margin:0;
}

.home-copyright{
    color:#64748b;
    font-size:11px;
}

/* Animasi */

.floating-icon{
    animation:floatIcon 3s ease-in-out infinite;
}

@keyframes floatIcon{

    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-8px);
    }
}

/* =====================================
   TABLET
   Kekal dua kolum untuk iPad
   ===================================== */

@media(max-width:900px){

    .home-wrapper{
        padding:20px;
    }

    .home-card.home-card-wide{
        padding:24px;
    }

    .home-layout{
        grid-template-columns:
            minmax(0, .9fr)
            minmax(0, 1.1fr);

        gap:18px;
    }

    .home-access-section,
    .operation-notice{
        padding:20px;
    }

    .home-brand-text h1{
        font-size:21px;
    }

    .home-access-section .home-welcome h2{
        font-size:24px;
    }

    .home-welcome p{
        font-size:13px;
    }

    .notice-header h3{
        font-size:17px;
    }

    .notice-day-grid{
        grid-template-columns:1fr;
    }
}

/* =====================================
   TELEFON
   Susunan menegak dan mudah dibaca
   ===================================== */

@media(max-width:680px){

    .home-wrapper{
        align-items:flex-start;
        padding:12px;
    }

    .home-card.home-card-wide{
        padding:18px;
        border-radius:22px;
    }

    .home-header{
        padding-bottom:18px;
        margin-bottom:18px;
    }

    .home-header .home-logo{
        align-items:center;
    }

    .home-logo-icon{
        width:50px;
        height:50px;
        flex-shrink:0;
    }

    .home-brand-text h1{
        font-size:18px;
        line-height:1.3;
    }

    .home-brand-text p{
        font-size:11px;
    }

    .home-layout{
        grid-template-columns:1fr;
        gap:16px;
    }

    .home-access-section{
        padding:20px 16px;
    }

    .home-access-section .home-hero-icon{
        width:72px;
        height:72px;

        font-size:28px;
    }

    .home-access-section .home-welcome h2{
        font-size:23px;
    }

    .home-welcome p{
        max-width:100%;
        font-size:13px;
        line-height:1.6;
    }

    .home-button{
        min-height:68px;
        padding:12px 13px;
    }

    .button-icon{
        width:44px;
        height:44px;
    }

    .button-text strong{
        font-size:15px;
    }

    .button-text small{
        font-size:11px;
    }

    .operation-notice{
        padding:20px 16px;
        border-left-width:4px;
    }

    .notice-main-icon{
        width:46px;
        height:46px;
    }

    .notice-header h3{
        font-size:17px;
    }

    .notice-day-grid{
        grid-template-columns:repeat(3, 1fr);
    }

    .notice-day-grid span{
        padding:8px 5px;
        font-size:12px;
    }

    .notice-info p{
        font-size:12px;
        line-height:1.65;
    }

    .home-bottom{
        flex-direction:column;
        align-items:center;
        gap:9px;

        text-align:center;
    }
}

/* =====================================
   LOGO JPKK PADA HALAMAN UTAMA
   ===================================== */

.home-header .home-logo{
    display:flex;
    align-items:center;
    gap:22px;
    margin:0;
}

.home-logo-image{
    width:210px;
    min-width:210px;
    height:auto;

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

    flex-shrink:0;

    background:transparent;
    border-radius:0;
    padding:0;
    box-shadow:none;
}

.jpkk-logo{
    display:block;

    width:100%;
    max-width:210px;
    height:auto;

    object-fit:contain;

    filter:drop-shadow(0 8px 18px rgba(0,0,0,.30));
}

.home-header .home-brand-text{
    flex:1;
}

.home-header .home-brand-text h1{
    margin:0 0 6px;

    color:#ffffff;
    font-size:30px;
    font-weight:800;
    line-height:1.25;
}

.home-header .home-brand-text p{
    margin:0;

    color:#5eead4;
    font-size:14px;
    line-height:1.6;
}

/* Tablet */

@media(max-width:900px){

    .home-logo-image{
        width:160px;
        min-width:160px;
    }

    .jpkk-logo{
        max-width:160px;
    }

    .home-header .home-brand-text h1{
        font-size:24px;
    }

    .home-header .home-brand-text p{
        font-size:13px;
    }
}

/* Telefon */

@media(max-width:680px){

    .home-header .home-logo{
        flex-direction:column;
        gap:14px;
        text-align:center;
    }

    .home-logo-image{
        width:190px;
        min-width:0;
    }

    .jpkk-logo{
        max-width:190px;
    }

    .home-header .home-brand-text h1{
        font-size:21px;
        line-height:1.35;
    }

    .home-header .home-brand-text p{
        font-size:12px;
    }
}

/* Paksa ikon bullhorn keluar dengan jelas */

.notice-main-icon{
    width:72px !important;
    height:72px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    flex-shrink:0;

    background:#fbbf24 !important;
    border-radius:18px !important;

    box-shadow:
        0 10px 22px rgba(251,191,36,.35) !important;
}

.notice-main-icon .notice-icon{
    display:inline-block !important;

    color:#ffffff !important;

    font-size:34px !important;
    line-height:1 !important;

    opacity:1 !important;
    visibility:visible !important;

    transform:none !important;
    filter:none !important;
    text-shadow:none !important;
}

/* =====================================
   SEMAKAN PARCEL PELAJAR
   ===================================== */

.student-check-page{
    min-height:100vh;
    margin:0;

    color:#ffffff;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(37,99,235,.22),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(20,184,166,.18),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #071a33,
            #0a2544,
            #0b3943
        );
}

.student-check-wrapper{
    min-height:100vh;

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

    padding:30px;
}

.student-check-card{
    width:100%;
    max-width:980px;

    padding:34px;

    background:rgba(30,41,59,.76);

    border:1px solid rgba(255,255,255,.12);
    border-radius:28px;

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

    box-shadow:
        0 28px 80px rgba(0,0,0,.38);
}

.student-back-link{
    display:inline-flex;
    align-items:center;
    gap:8px;

    margin-bottom:26px;

    color:#cbd5e1;
    text-decoration:none;

    font-size:13px;
    font-weight:600;

    transition:.25s ease;
}

.student-back-link:hover{
    color:#5eead4;
    transform:translateX(-3px);
}

.student-check-header{
    display:flex;
    align-items:center;
    gap:24px;

    padding-bottom:28px;
    margin-bottom:28px;

    border-bottom:1px solid rgba(255,255,255,.1);
}

.student-check-logo{
    width:170px;
    min-width:170px;
}

.student-check-logo img{
    display:block;

    width:100%;
    height:auto;

    object-fit:contain;

    filter:
        drop-shadow(0 10px 20px rgba(0,0,0,.28));
}

.student-check-badge{
    display:inline-flex;
    align-items:center;
    gap:7px;

    margin-bottom:10px;
    padding:7px 12px;

    color:#5eead4;
    background:rgba(20,184,166,.12);

    border:1px solid rgba(45,212,191,.2);
    border-radius:30px;

    font-size:11px;
    font-weight:700;
}

.student-check-header h1{
    margin:0 0 8px;

    color:#ffffff;
    font-size:30px;
    font-weight:800;
}

.student-check-header p{
    margin:0;

    color:#aeb9c9;
    font-size:14px;
    line-height:1.6;
}

.student-alert{
    display:flex;
    align-items:center;
    gap:10px;

    margin-bottom:20px;
    padding:14px 16px;

    color:#fecaca;
    background:rgba(220,38,38,.12);

    border:1px solid rgba(248,113,113,.24);
    border-radius:14px;

    font-size:13px;
}

.student-check-form{
    display:grid;
    grid-template-columns:1fr 1fr auto;
    gap:16px;
    align-items:end;
}

.student-form-group label{
    display:block;

    margin-bottom:8px;

    color:#e2e8f0;
    font-size:13px;
    font-weight:700;
}

.student-input-group{
    min-height:56px;

    display:flex;
    align-items:center;

    background:rgba(15,23,42,.58);

    border:1px solid rgba(255,255,255,.11);
    border-radius:15px;

    overflow:hidden;
    transition:.25s ease;
}

.student-input-group:focus-within{
    border-color:#2dd4bf;

    box-shadow:
        0 0 0 4px rgba(45,212,191,.12);
}

.student-input-group span{
    width:52px;

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

    color:#5eead4;
}

.student-input-group input{
    width:100%;
    min-height:54px;

    padding:12px 14px 12px 0;

    color:#ffffff;
    background:transparent;

    border:0;
    outline:none;
}

.student-input-group input::placeholder{
    color:#94a3b8;
}

.student-search-button{
    min-height:56px;

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

    padding:12px 20px;

    color:#ffffff;
    background:
        linear-gradient(
            135deg,
            #14b8a6,
            #0f9f91
        );

    border:0;
    border-radius:15px;

    font-weight:700;

    transition:.3s ease;
}

.student-search-button:hover{
    transform:translateY(-3px);

    box-shadow:
        0 15px 34px rgba(20,184,166,.28);
}

.student-result-section{
    margin-top:30px;
    padding-top:26px;

    border-top:1px solid rgba(255,255,255,.1);
}

.student-result-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;

    margin-bottom:18px;
}

.student-result-heading h2{
    margin:0 0 4px;

    font-size:21px;
}

.student-result-heading p{
    margin:0;

    color:#94a3b8;
    font-size:13px;
}

.student-result-heading > i{
    color:#5eead4;
    font-size:25px;
}

.student-result-list{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.student-result-card{
    display:grid;
    grid-template-columns:56px minmax(0,1fr) auto;
    align-items:center;
    gap:16px;

    padding:18px;

    background:rgba(15,23,42,.5);

    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;

    transition:.25s ease;
}

.student-result-card:hover{
    transform:translateY(-3px);
    background:rgba(30,41,59,.85);
}

.student-result-icon{
    width:52px;
    height:52px;

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

    color:#5eead4;
    background:rgba(20,184,166,.14);

    border-radius:15px;
    font-size:21px;
}

.student-result-info h3{
    margin:0 0 9px;

    font-size:16px;
}

.student-result-details{
    display:flex;
    flex-wrap:wrap;
    gap:10px 16px;
}

.student-result-details span{
    color:#94a3b8;
    font-size:12px;
}

.student-result-details i{
    margin-right:5px;
    color:#5eead4;
}

.student-status-area{
    min-width:150px;

    text-align:right;
}

.student-status-badge{
    display:inline-flex;
    align-items:center;
    gap:7px;

    padding:8px 12px;

    border-radius:30px;

    font-size:11px;
    font-weight:700;
}

.student-status-badge.pending{
    color:#fbbf24;
    background:rgba(245,158,11,.13);
}

.student-status-badge.completed{
    color:#5eead4;
    background:rgba(20,184,166,.13);
}

.student-status-area small{
    display:block;

    max-width:190px;
    margin-top:8px;

    color:#cbd5e1;
    font-size:11px;
    line-height:1.5;
}

.student-empty-result{
    padding:42px 20px;

    text-align:center;

    background:rgba(15,23,42,.45);

    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
}

.student-empty-result > div{
    width:68px;
    height:68px;

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

    margin:0 auto 16px;

    color:#5eead4;
    background:rgba(20,184,166,.13);

    border-radius:20px;
    font-size:27px;
}

.student-empty-result h3{
    margin:0 0 8px;
}

.student-empty-result p{
    max-width:500px;
    margin:0 auto;

    color:#94a3b8;
    font-size:13px;
}

.student-check-notice{
    display:flex;
    align-items:flex-start;
    gap:12px;

    margin-top:24px;
    padding:16px;

    color:#dbe4f0;
    background:rgba(37,99,235,.1);

    border:1px solid rgba(96,165,250,.18);
    border-radius:15px;
}

.student-check-notice > i{
    margin-top:3px;

    color:#60a5fa;
}

.student-check-notice strong{
    display:block;
    margin-bottom:4px;
}

.student-check-notice p{
    margin:0;

    color:#aeb9c9;
    font-size:12px;
    line-height:1.65;
}

@media(max-width:900px){

    .student-check-form{
        grid-template-columns:1fr 1fr;
    }

    .student-search-button{
        grid-column:1 / -1;
    }
}

@media(max-width:680px){

    .student-check-wrapper{
        padding:12px;
        align-items:flex-start;
    }

    .student-check-card{
        padding:20px 16px;
        border-radius:22px;
    }

    .student-check-header{
        flex-direction:column;
        align-items:center;

        text-align:center;
    }

    .student-check-logo{
        width:180px;
        min-width:0;
    }

    .student-check-header h1{
        font-size:23px;
    }

    .student-check-form{
        grid-template-columns:1fr;
    }

    .student-search-button{
        grid-column:auto;
        width:100%;
    }

    .student-result-card{
        grid-template-columns:48px minmax(0,1fr);
    }

    .student-status-area{
        grid-column:1 / -1;

        text-align:left;
    }

    .student-status-area small{
        max-width:none;
    }
}

.status-message{
    display:flex;
    align-items:center;
    gap:8px;
    color:#ffffff;
    font-size:15px;
    font-weight:600;
    line-height:1.5;
}

.status-message i{
    color:#35d07f;
    font-size:18px;
}
/* =====================================
   KEPUTUSAN SEMAKAN PELAJAR
   ===================================== */

.status-message{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:7px;

    margin:9px 0 0;

    color:#e2e8f0;

    font-size:12px;
    font-weight:500;
    line-height:1.5;

    white-space:nowrap;
}

.location-emoji{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;

    font-size:17px;
    line-height:1;
}

.result-actions{
    display:flex;
    justify-content:center;
    gap:12px;

    margin-top:26px;
}

.result-actions a{
    text-decoration:none;
}

.result-home-button{
    min-height:50px;

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

    padding:12px 20px;

    color:#e2e8f0;
    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.1);
    border-radius:14px;

    font-weight:700;

    transition:.25s ease;
}

.result-home-button:hover{
    color:#ffffff;
    background:rgba(255,255,255,.14);
    transform:translateY(-2px);
}

@media(max-width:680px){

    .status-message{
        justify-content:flex-start;

        white-space:normal;
    }

    .result-actions{
        flex-direction:column;
    }

    .result-actions a{
        width:100%;
    }
}

/* Mesej lokasi pengambilan parcel */

.status-message{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;

    margin:9px 0 0;

    color:#e2e8f0;

    font-size:12px;
    font-weight:500;
    line-height:1.5;

    white-space:nowrap;
}

.location-emoji{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;

    font-size:16px;
    line-height:1;
}

/* Paparan telefon */

@media(max-width:680px){

    .status-message{
        justify-content:flex-start;
        white-space:normal;
    }
}
/* Center Borang Daftar Parcel */

.admin-main{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.admin-topbar{
    width:100%;
    max-width:1050px;
    margin:0 auto 30px;
}

.parcel-form-card{
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
}

/* ==================================================
   NAIK TARAF APLIKASI: RESPONSIF, LOADER & MODEN
   ================================================== */

html{
    scroll-behavior:smooth;
}

body.sidebar-open{
    overflow:hidden;
}

.brand-logo-wrap{
    width:78px;
    height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.dashboard-jpkk-logo{
    width:100%;
    max-height:54px;
    object-fit:contain;
    filter:drop-shadow(0 8px 15px rgba(0,0,0,.25));
}

.sidebar-overlay{
    position:fixed;
    inset:0;
    z-index:990;
    background:rgba(2,6,23,.68);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
    opacity:0;
    visibility:hidden;
    transition:.25s ease;
}

.sidebar-overlay.show{
    opacity:1;
    visibility:visible;
}

.app-loader{
    position:fixed;
    inset:0;
    z-index:9999;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    color:#e2e8f0;
    background:rgba(7,26,51,.94);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    transition:opacity .3s ease, visibility .3s ease;
}

.app-loader.hidden{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.loader-ring{
    width:52px;
    height:52px;
    border:5px solid rgba(94,234,212,.18);
    border-top-color:#2dd4bf;
    border-radius:50%;
    animation:appSpinner .75s linear infinite;
}

@keyframes appSpinner{
    to{ transform:rotate(360deg); }
}

.monthly-chart-container{
    position:relative;
    width:100%;
    height:330px;
}

.parcel-header-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.export-excel-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px 18px;
    color:#ffffff;
    background:linear-gradient(135deg,#16a34a,#15803d);
    border:0;
    border-radius:13px;
    font-weight:700;
}

.export-excel-button:hover{
    color:#ffffff;
    transform:translateY(-2px);
    box-shadow:0 12px 25px rgba(22,163,74,.25);
}

/* SweetAlert2 sepadan dengan Dark UI */
.swal2-popup{
    border:1px solid rgba(255,255,255,.10) !important;
    border-radius:22px !important;
    box-shadow:0 25px 70px rgba(0,0,0,.45) !important;
}

.swal2-confirm,
.swal2-cancel{
    border-radius:12px !important;
    font-weight:700 !important;
    padding:11px 18px !important;
}

/* Paparan telefon dan tablet */
@media(max-width:768px){
    .admin-sidebar{
        width:min(86vw,290px);
        left:-310px;
        overflow-y:auto;
    }

    .admin-sidebar.show{
        left:0;
    }

    .admin-main{
        width:100%;
        margin-left:0;
        padding:18px 14px 30px;
    }

    .admin-topbar{
        align-items:flex-start;
        margin-bottom:20px;
    }

    .admin-topbar h1{
        font-size:23px;
        line-height:1.2;
    }

    .admin-topbar p{
        font-size:13px;
    }

    .dashboard-date{
        display:none;
    }

    .admin-stat-card{
        min-height:115px;
        padding:18px;
        border-radius:18px;
    }

    .admin-stat-icon{
        width:52px;
        height:52px;
        font-size:21px;
        border-radius:15px;
    }

    .admin-stat-card h2{
        font-size:28px;
    }

    .dashboard-panel,
    .parcel-form-card,
    .parcel-list-card{
        padding:18px 14px;
        border-radius:19px;
    }

    .panel-header,
    .parcel-list-header{
        align-items:flex-start;
        flex-direction:column;
    }

    .chart-container,
    .monthly-chart-container{
        height:260px;
    }

    .parcel-header-actions{
        width:100%;
        display:grid;
        grid-template-columns:1fr;
    }

    .parcel-header-actions .btn,
    .add-parcel-button,
    .export-excel-button{
        width:100%;
    }

    .search-wrapper{
        max-width:none;
    }

    .table-responsive{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:thin;
    }

    .modern-table{
        min-width:900px;
    }

    .action-button{
        width:42px;
        height:42px;
    }
}

@media(max-width:576px){
    .sidebar-brand{
        padding-bottom:18px;
    }

    .brand-logo-wrap{
        width:65px;
        height:48px;
    }

    .sidebar-brand h2{
        font-size:19px;
    }

    .parcel-form-card .row.g-4{
        --bs-gutter-y:1.15rem;
    }

    .form-card-header{
        align-items:flex-start;
        margin-bottom:22px;
    }

    .form-card-icon{
        width:50px;
        height:50px;
        font-size:20px;
    }

    .form-card-header h2{
        font-size:20px;
    }

    .modern-input,
    .modern-input .form-control{
        min-height:52px;
    }

    .form-actions{
        gap:10px;
    }

    .form-actions .btn{
        min-height:52px;
    }

    .activity-item{
        padding:12px;
    }

    .dashboard-actions a{
        min-height:70px;
    }
}
/* ================================================= */
/*              RESPONSIVE TELEPHONE                  */
/* ================================================= */

@media (max-width:768px){

    body{
        overflow-x:hidden;
    }

    .home-wrapper{
        padding:15px;
    }

    .home-card{
        padding:20px;
        border-radius:22px;
    }

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

    .home-header{
        padding-top:5px;
        margin-bottom:20px;
    }

    .home-logo{
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:15px;
    }

    .jpkk-logo{
        width:150px;
        height:auto;
    }

    .home-brand-text h1{
        font-size:2rem;
        line-height:1.2;
    }

    .home-brand-text p{
        font-size:1rem;
    }

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

    .home-layout{
        display:flex;
        flex-direction:column;
        gap:25px;
    }

    .home-access-section,
    .operation-notice{
        width:100%;
    }

    .home-hero-icon{
        width:120px;
        height:120px;
        margin:auto;
    }

    .home-hero-icon i{
        font-size:55px;
    }

    .home-welcome h2{
        font-size:2.2rem;
        text-align:center;
    }

    .home-welcome p{
        text-align:center;
        font-size:1rem;
    }

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

    .home-actions{
        gap:15px;
    }

    .home-button{
        width:100%;
        padding:18px;
        border-radius:18px;
    }

    .button-icon{
        width:58px;
        height:58px;
        font-size:22px;
    }

    .button-arrow{
        font-size:24px;
    }

    .home-button:active{
        transform:scale(.97);
    }

    /* ================= NOTICE ================= */

    .notice-header{
        display:flex;
        align-items:center;
        gap:15px;
    }

    .notice-main-icon{
        width:82px;
        height:82px;
    }

    .notice-main-icon i{
        font-size:42px;
    }

    .notice-header h3{
        font-size:1.7rem;
        line-height:1.3;
    }

    .notice-day-grid{
        grid-template-columns:1fr;
        gap:10px;
    }

    .time-item{
        flex-direction:row;
        align-items:center;
    }

    .notice-info{
        padding:20px;
    }

    .notice-info p{
        font-size:.95rem;
        line-height:1.8;
    }

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

    .home-bottom{
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:10px;
    }

    .home-footer{
        justify-content:center;
    }

}
/* ============================================== */
/*          TELEFON KECIL (≤480px)                */
/* ============================================== */

@media (max-width:480px){

    .jpkk-logo{
        width:120px;
    }

    .home-brand-text h1{
        font-size:1.7rem;
    }

    .home-brand-text p{
        font-size:.9rem;
    }

    .home-welcome h2{
        font-size:1.8rem;
    }

    .home-button{
        padding:16px;
    }

    .button-text strong{
        font-size:1.2rem;
    }

    .button-text small{
        font-size:.85rem;
    }

    .notice-header h3{
        font-size:1.45rem;
    }

    .notice-main-icon{
        width:70px;
        height:70px;
    }

    .notice-main-icon i{
        font-size:34px;
    }

}

/* =========================================================
   PEMBETULAN HALAMAN UTAMA UNTUK TELEFON
   Tujuan: kecilkan bahagian akses supaya Makluman Penting
   lebih cepat kelihatan dan masih mudah dibaca.
   Letakkan kod ini di bahagian PALING BAWAH style.css.
   ========================================================= */

@media (max-width: 768px){

    .home-wrapper{
        min-height:auto;
        align-items:flex-start;
        padding:10px;
    }

    .home-card.home-card-wide{
        max-width:100%;
        padding:16px;
        border-radius:22px;
    }

    .home-header{
        padding:4px 0 16px;
        margin-bottom:16px;
    }

    .home-logo{
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:8px;
        text-align:center;
    }

    .home-logo-image{
        display:flex;
        justify-content:center;
        width:100%;
    }

    .jpkk-logo{
        width:105px;
        max-width:42vw;
        height:auto;
    }

    .home-brand-text h1{
        margin:0 0 5px;
        font-size:1.45rem;
        line-height:1.2;
    }

    .home-brand-text p{
        font-size:.82rem;
        line-height:1.4;
    }

    .home-layout{
        display:flex;
        flex-direction:column;
        gap:16px;
    }

    .home-access-section{
        width:100%;
        padding:18px 14px;
        border-radius:20px;
    }

    .home-access-section .home-hero-icon{
        width:68px;
        height:68px;
        margin:0 auto 14px;
        border-radius:20px;
        font-size:27px;
    }

    .home-access-section .home-welcome{
        margin-bottom:16px;
    }

    .home-badge{
        margin-bottom:10px;
        padding:6px 10px;
        font-size:.72rem;
    }

    .home-access-section .home-welcome h2,
    .home-welcome h2{
        margin-bottom:7px;
        font-size:1.55rem;
        line-height:1.25;
        text-align:center;
    }

    .home-welcome p{
        max-width:340px;
        font-size:.88rem;
        line-height:1.55;
        text-align:center;
    }

    .home-actions{
        gap:10px;
    }

    .home-button{
        min-height:64px;
        padding:10px 13px;
        gap:11px;
        border-radius:15px;
    }

    .button-icon{
        width:44px;
        height:44px;
        border-radius:12px;
        font-size:17px;
        flex-shrink:0;
    }

    .button-text strong{
        font-size:1rem;
    }

    .button-text small{
        margin-top:1px;
        font-size:.73rem;
    }

    .button-arrow{
        font-size:18px;
    }

    .operation-notice{
        width:100%;
        height:auto;
        margin:0;
        padding:17px 14px;
        border-left-width:4px;
        border-radius:20px;
    }

    .notice-header{
        align-items:center;
        gap:11px;
        margin-bottom:15px;
    }

    .notice-main-icon{
        width:50px;
        height:50px;
        border-radius:14px;
        font-size:20px;
    }

    .notice-main-icon i{
        font-size:20px;
    }

    .notice-header span{
        margin-bottom:2px;
        font-size:.62rem;
    }

    .notice-header h3{
        font-size:1.12rem;
        line-height:1.3;
    }

    .notice-section{
        padding:14px 0;
    }

    .notice-section-title{
        gap:8px;
        margin-bottom:10px;
    }

    .notice-section-title i{
        font-size:15px;
    }

    .notice-section-title h4{
        font-size:.95rem;
    }

    .notice-day-grid{
        grid-template-columns:repeat(3, 1fr);
        gap:7px;
    }

    .notice-day-grid span{
        padding:8px 5px;
        font-size:.76rem;
    }

    .operation-time{
        gap:8px;
    }

    .time-item{
        flex-direction:row;
        align-items:center;
        padding:10px;
    }

    .time-icon{
        flex-shrink:0;
    }

    .time-item strong{
        font-size:.82rem;
    }

    .time-item span{
        font-size:.72rem;
    }

    .notice-info{
        margin-top:12px;
        padding:13px;
    }

    .notice-info-title{
        margin-bottom:8px;
    }

    .notice-info p{
        font-size:.78rem;
        line-height:1.6;
        text-align:left;
    }

    .home-bottom{
        flex-direction:column;
        align-items:center;
        gap:7px;
        text-align:center;
    }

    .home-footer,
    .home-copyright{
        font-size:.7rem;
    }
}

@media (max-width: 480px){

    .home-wrapper{
        padding:7px;
    }

    .home-card.home-card-wide{
        padding:13px;
        border-radius:18px;
    }

    .jpkk-logo{
        width:90px;
    }

    .home-brand-text h1{
        font-size:1.22rem;
    }

    .home-brand-text p{
        font-size:.75rem;
    }

    .home-access-section{
        padding:15px 12px;
    }

    .home-access-section .home-hero-icon{
        width:60px;
        height:60px;
        margin-bottom:12px;
        font-size:24px;
    }

    .home-access-section .home-welcome h2,
    .home-welcome h2{
        font-size:1.35rem;
    }

    .home-welcome p{
        font-size:.8rem;
    }

    .home-button{
        min-height:58px;
        padding:9px 11px;
    }

    .button-icon{
        width:40px;
        height:40px;
        font-size:15px;
    }

    .button-text strong{
        font-size:.92rem;
    }

    .button-text small{
        font-size:.67rem;
    }

    .notice-main-icon{
        width:46px;
        height:46px;
    }

    .notice-header h3{
        font-size:1rem;
    }

    .notice-day-grid span{
        font-size:.7rem;
    }
}
/* Tambah di bahagian paling bawah style.css */
.live-status{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:#5eead4;
    font-size:.82rem;
    font-weight:800;
}

.live-status i{
    font-size:.55rem;
    animation:livePulse 1.4s infinite;
}

@keyframes livePulse{
    0%,100%{
        opacity:.35;
        transform:scale(.85);
    }

    50%{
        opacity:1;
        transform:scale(1.15);
    }
}


/* =========================================================
   SEMAKAN PELAJAR - PERHATIAN URGENT (PEMBETULAN AKHIR)
   Letak di HUJUNG style.css supaya override rule lama.
   ========================================================= */

.student-check-notice{
    display:flex;
    align-items:flex-start;
    gap:14px;

    width:100%;
    margin-top:24px;
    padding:18px 20px;

    color:#dbe4f0;

    background:
        linear-gradient(
            135deg,
            rgba(37,99,235,.12),
            rgba(20,184,166,.07)
        );

    border:1px solid rgba(96,165,250,.22);
    border-radius:16px;

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

.student-check-notice > i{
    flex:0 0 auto;

    margin-top:4px;

    color:#60a5fa;
    font-size:17px;
}

.student-check-notice .notice-content{
    flex:1;
    min-width:0;
    width:100%;
}

.student-check-notice .notice-title{
    display:block;

    margin:0 0 7px;

    color:#ffffff;
    font-size:15px;
    font-weight:800;
    line-height:1.35;
}

.student-check-notice .urgent-text{
    display:block;

    width:100%;
    max-width:none;

    margin:0 0 8px !important;

    color:#d4deea;
    font-size:13px;
    font-weight:400;
    line-height:1.7;

    white-space:normal;
    word-break:normal;
    overflow-wrap:break-word;
}

.student-check-notice .urgent-text strong{
    display:inline;

    margin:0;

    color:#fbbf24;
    font-weight:800;
}

.student-check-notice .urgent-contact-text{
    display:block;

    width:100%;
    max-width:none;

    margin:0 0 12px !important;

    color:#9fb0c5;
    font-size:12px;
    line-height:1.6;

    white-space:normal;
}

.whatsapp-contact{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;

    margin-top:0;
}

.whatsapp-contact a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    min-width:110px;
    min-height:38px;
    padding:8px 14px;

    color:#6ee7a4;
    text-decoration:none;
    font-size:12px;
    font-weight:800;

    background:rgba(37,211,102,.12);
    border:1px solid rgba(37,211,102,.38);
    border-radius:11px;

    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease,
        color .2s ease;
}

.whatsapp-contact a:hover{
    color:#ffffff;

    background:rgba(37,211,102,.24);
    border-color:rgba(37,211,102,.58);

    transform:translateY(-2px);
}

.whatsapp-contact a:focus-visible{
    outline:3px solid rgba(37,211,102,.22);
    outline-offset:2px;
}

.whatsapp-contact i{
    flex:0 0 auto;

    color:#25d366;
    font-size:17px;
}

@media(max-width:680px){

    .student-check-notice{
        gap:11px;
        padding:16px;
        border-radius:14px;
    }

    .student-check-notice .notice-title{
        font-size:14px;
    }

    .student-check-notice .urgent-text{
        font-size:12.5px;
        line-height:1.65;
    }

    .student-check-notice .urgent-contact-text{
        font-size:11.5px;
    }

    .whatsapp-contact{
        display:grid;
        grid-template-columns:1fr 1fr;
        width:100%;
    }

    .whatsapp-contact a{
        width:100%;
        min-width:0;
    }
}

@media(max-width:420px){

    .whatsapp-contact{
        grid-template-columns:1fr;
    }
}
/* =====================================================
   HALAMAN SEJARAH PARCEL
   ===================================================== */

.history-page{
    min-height:100vh;
    margin:0;

    color:#ffffff;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(37,99,235,.16),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(20,184,166,.12),
            transparent 32%
        ),
        #071a33;
}

/* Container utama */
.history-page .container{
    width:100%;
    max-width:1180px !important;
    padding-top:34px !important;
    padding-bottom:50px !important;
}

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

.history-page h1{
    margin:0 0 5px;

    color:#ffffff;

    font-size:34px;
    font-weight:800;
    letter-spacing:-.5px;
}

.history-page .text-secondary{
    color:#94a3b8 !important;
}

/* Butang dashboard dan senarai */

.history-page .btn{
    min-height:45px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:10px 17px;

    border-radius:13px;

    font-size:14px;
    font-weight:700;

    transition:.25s ease;
}

.history-page .btn-outline-light{
    color:#ffffff;

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

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

.history-page .btn-outline-light:hover{
    color:#071a33;
    background:#ffffff;

    transform:translateY(-2px);
}

.history-page .btn-info{
    color:#06233b;

    background:
        linear-gradient(
            135deg,
            #22d3ee,
            #38bdf8
        );

    border:0;
}

.history-page .btn-info:hover{
    color:#06233b;

    background:
        linear-gradient(
            135deg,
            #67e8f9,
            #38bdf8
        );

    transform:translateY(-2px);

    box-shadow:
        0 10px 25px rgba(56,189,248,.25);
}

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

.history-page .dashboard-panel{
    width:100%;

    margin-top:10px;
    padding:24px;

    background:
        linear-gradient(
            135deg,
            rgba(51,65,85,.68),
            rgba(30,41,59,.60)
        );

    border:1px solid rgba(148,163,184,.22);

    border-radius:22px;

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

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

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

.history-page form{
    align-items:center;
}

.history-page .form-control{
    min-height:48px;

    padding:11px 15px;

    color:#0f172a;

    background:#ffffff;

    border:1px solid #cbd5e1;
    border-radius:11px;

    box-shadow:none;

    font-size:14px;

    transition:.25s ease;
}

.history-page .form-control::placeholder{
    color:#64748b;
}

.history-page .form-control:focus{
    color:#0f172a;

    background:#ffffff;

    border-color:#38bdf8;

    box-shadow:
        0 0 0 4px rgba(56,189,248,.15);
}

.history-page form .btn-primary{
    min-height:48px;

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #3b82f6
        );

    border:0;
    border-radius:11px;

    box-shadow:
        0 10px 24px rgba(37,99,235,.18);
}

.history-page form .btn-primary:hover{
    background:
        linear-gradient(
            135deg,
            #3b82f6,
            #2563eb
        );

    transform:translateY(-2px);

    box-shadow:
        0 14px 30px rgba(37,99,235,.28);
}

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

.history-page .table-responsive{
    width:100%;

    border-radius:15px;

    overflow-x:auto;
}

.history-page .table{
    width:100%;
    min-width:850px;

    margin:0;

    color:#e2e8f0;

    background:transparent;

    border-collapse:separate;
    border-spacing:0;
}

/* Header table */

.history-page .table thead th{
    padding:13px 15px;

    color:#f8fafc;

    background:#202830;

    border-top:1px solid rgba(255,255,255,.08);
    border-bottom:1px solid rgba(255,255,255,.12);

    font-size:13px;
    font-weight:800;

    white-space:nowrap;
}

.history-page .table thead th:first-child{
    border-radius:14px 0 0 0;
}

.history-page .table thead th:last-child{
    border-radius:0 14px 0 0;
}

/* Body table */

.history-page .table tbody td{
    padding:14px 15px;

    color:#e2e8f0;

    background:rgba(15,23,42,.52);

    border-top:0;
    border-bottom:1px solid rgba(255,255,255,.07);

    font-size:13px;
    vertical-align:middle;
}

.history-page .table tbody tr{
    transition:.2s ease;
}

.history-page .table tbody tr:hover td{
    background:rgba(30,41,59,.90);
}

/* ID */

.history-page .table tbody td:first-child{
    color:#94a3b8;

    font-weight:700;
}

/* Nama pelajar */

.history-page .table strong{
    color:#ffffff;

    font-weight:800;
}

/* Tracking */

.history-page .table code{
    padding:4px 7px;

    color:#38bdf8 !important;

    background:rgba(56,189,248,.10);

    border-radius:7px;

    font-size:12px;
}

/* Row terakhir */

.history-page .table tbody tr:last-child td:first-child{
    border-radius:0 0 0 14px;
}

.history-page .table tbody tr:last-child td:last-child{
    border-radius:0 0 14px 0;
}

/* Empty history */

.history-page .table td.text-center{
    padding:45px 20px !important;
}

.history-page .table td.text-center i{
    color:#38bdf8;
}

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

.history-page .table-responsive::-webkit-scrollbar{
    height:7px;
}

.history-page .table-responsive::-webkit-scrollbar-track{
    background:rgba(255,255,255,.05);

    border-radius:10px;
}

.history-page .table-responsive::-webkit-scrollbar-thumb{
    background:#475569;

    border-radius:10px;
}

/* ===============================
   TABLET
   =============================== */

@media(max-width:768px){

    .history-page .container{
        padding:
            20px
            15px
            40px !important;
    }

    .history-page h1{
        font-size:28px;
    }

    .history-page .dashboard-panel{
        padding:18px;
        border-radius:18px;
    }

    .history-page .d-flex.justify-content-between{
        align-items:flex-start !important;
    }

    .history-page .table{
        min-width:780px;
    }
}

/* ===============================
   TELEFON
   =============================== */

@media(max-width:576px){

    .history-page h1{
        font-size:25px;
    }

    .history-page .container > .d-flex{
        flex-direction:column;
        align-items:stretch !important;
    }

    .history-page .container > .d-flex > .d-flex{
        width:100%;
    }

    .history-page .container > .d-flex > .d-flex .btn{
        flex:1;
    }

    .history-page .dashboard-panel{
        padding:15px;
    }

    .history-page form .col-md-9,
    .history-page form .col-md-3{
        width:100%;
    }

    .history-page .form-control,
    .history-page form .btn-primary{
        min-height:47px;
    }

    .history-page .table{
        min-width:720px;
    }

    .history-page .table thead th,
    .history-page .table tbody td{
        padding:12px;
        font-size:12px;
    }
}

/* ==========================================================
   e-PARCEL PSMZA — PAGE SHELL FINAL V3
   Dashboard + Daftar Parcel (explicit page classes)
   ========================================================== */

/* ---------- Shared page heading ---------- */
.page-heading{
    min-width:0;
}

.page-kicker{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-bottom:7px;
    padding:5px 9px;
    color:#5eead4;
    background:rgba(20,184,166,.10);
    border:1px solid rgba(94,234,212,.16);
    border-radius:999px;
    font-size:9.5px;
    font-weight:700;
    letter-spacing:.35px;
    text-transform:uppercase;
}

.page-kicker i{
    font-size:9px;
}

.page-heading h1{
    margin:0 !important;
    color:#fff !important;
    font-size:28px !important;
    font-weight:800 !important;
    line-height:1.12 !important;
    letter-spacing:-.55px;
}

.page-heading p{
    margin:5px 0 0 !important;
    color:#94a3b8 !important;
    font-size:12.5px !important;
    line-height:1.45;
}

/* ---------- Stop old global centering from moving these pages ---------- */
.dashboard-admin-main,
.daftar-admin-main{
    display:block !important;
    align-items:initial !important;
    padding:24px 28px 34px !important;
}

/* ==========================================================
   DASHBOARD
   ========================================================== */
.dashboard-page-shell{
    width:100%;
    max-width:1080px;
    margin:0 auto;
}

.dashboard-page-shell > .admin-topbar{
    width:100% !important;
    max-width:none !important;
    min-height:68px;
    margin:0 0 18px !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    gap:14px !important;
}

.dashboard-page-shell .dashboard-heading{
    flex:1;
}

.dashboard-page-shell > .row{
    width:auto !important;
    max-width:none !important;
    margin-left:-8px !important;
    margin-right:-8px !important;
    --bs-gutter-x:16px;
    --bs-gutter-y:16px;
}

.dashboard-page-shell > .row > [class*="col-"]{
    padding-left:8px !important;
    padding-right:8px !important;
}

.dashboard-page-shell .admin-stat-card{
    min-height:116px !important;
    padding:17px 18px !important;
    gap:14px !important;
    border-radius:18px !important;
    background:linear-gradient(160deg,rgba(51,65,85,.68),rgba(35,52,73,.64)) !important;
    border:1px solid rgba(255,255,255,.09) !important;
    box-shadow:0 12px 28px rgba(0,0,0,.13) !important;
}

.dashboard-page-shell .admin-stat-icon{
    width:54px !important;
    height:54px !important;
    min-width:54px !important;
    border-radius:15px !important;
    font-size:21px !important;
}

.dashboard-page-shell .admin-stat-card p{
    font-size:12.5px !important;
}

.dashboard-page-shell .admin-stat-card h2{
    font-size:29px !important;
    line-height:1 !important;
}

.dashboard-page-shell .admin-stat-card span{
    font-size:10.5px !important;
}

.dashboard-page-shell .dashboard-panel{
    height:100%;
    padding:19px !important;
    border-radius:18px !important;
    background:linear-gradient(160deg,rgba(51,65,85,.62),rgba(32,48,69,.62)) !important;
    border:1px solid rgba(255,255,255,.08) !important;
    box-shadow:0 12px 30px rgba(0,0,0,.12) !important;
}

.dashboard-page-shell > .dashboard-panel{
    width:100% !important;
    max-width:none !important;
}

.dashboard-page-shell .panel-header{
    margin-bottom:13px !important;
}

.dashboard-page-shell .panel-header h3{
    font-size:17px !important;
    font-weight:800 !important;
}

.dashboard-page-shell .panel-header p{
    font-size:10.5px !important;
}

.dashboard-page-shell .chart-container{
    height:255px !important;
}

.dashboard-page-shell .monthly-chart-container{
    height:235px !important;
}

.dashboard-page-shell .dashboard-actions{
    gap:9px !important;
}

.dashboard-page-shell .dashboard-actions a{
    min-height:58px !important;
    padding:9px 11px !important;
    border-radius:12px !important;
}

.dashboard-page-shell .action-icon{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    border-radius:11px !important;
}

.dashboard-page-shell .dashboard-actions strong{
    font-size:12.5px !important;
}

.dashboard-page-shell .dashboard-actions span{
    font-size:9.8px !important;
}

.dashboard-page-shell .dashboard-date{
    flex-shrink:0;
    padding:9px 13px !important;
    border-radius:11px !important;
    font-size:12px;
}

/* ==========================================================
   DAFTAR PARCEL
   ========================================================== */
.daftar-page-shell{
    width:100%;
    max-width:920px;
    margin:0 auto;
}

.daftar-page-shell > .admin-topbar{
    width:100% !important;
    max-width:none !important;
    min-height:68px;
    margin:0 0 14px !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    gap:14px !important;
}

.daftar-page-shell > .parcel-form-card{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:18px 20px !important;
    border-radius:18px !important;
    background:linear-gradient(160deg,rgba(51,65,85,.70),rgba(32,49,70,.70)) !important;
    border:1px solid rgba(255,255,255,.09) !important;
    box-shadow:0 14px 34px rgba(0,0,0,.14) !important;
}

.daftar-page-shell .form-card-header{
    margin-bottom:13px !important;
    gap:11px !important;
}

.daftar-page-shell .form-card-icon{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    border-radius:13px !important;
    font-size:17px !important;
    box-shadow:0 9px 22px rgba(37,99,235,.15);
}

.daftar-page-shell .form-card-header h2{
    margin:0 0 2px !important;
    font-size:19px !important;
    font-weight:800 !important;
}

.daftar-page-shell .form-card-header p{
    margin:0 !important;
    font-size:10.5px !important;
}

.daftar-page-shell .parcel-form .row{
    --bs-gutter-x:14px !important;
    --bs-gutter-y:12px !important;
}

.daftar-page-shell .parcel-form .form-label{
    margin-bottom:5px !important;
    font-size:11px !important;
    font-weight:700 !important;
}

.daftar-page-shell .modern-input{
    min-height:42px !important;
    border-radius:11px !important;
    background:rgba(15,23,42,.61) !important;
    border:1px solid rgba(148,163,184,.14) !important;
}

.daftar-page-shell .modern-input:focus-within{
    border-color:#2dd4bf !important;
    box-shadow:0 0 0 3px rgba(45,212,191,.10) !important;
}

.daftar-page-shell .modern-input span{
    width:40px !important;
    min-width:40px !important;
    font-size:12px !important;
}

.daftar-page-shell .modern-input .form-control{
    min-height:40px !important;
    height:40px !important;
    padding:7px 8px !important;
    font-size:12px !important;
}

.daftar-page-shell .parcel-form small{
    margin-top:4px !important;
    font-size:9px !important;
    line-height:1.35 !important;
}

.daftar-page-shell .modern-textarea{
    min-height:66px !important;
    height:66px !important;
    padding:9px 10px !important;
    border-radius:11px !important;
    font-size:11.5px !important;
    background:rgba(15,23,42,.61) !important;
    border:1px solid rgba(148,163,184,.14) !important;
}

.daftar-page-shell .form-actions{
    margin-top:11px !important;
    padding-top:10px !important;
    gap:8px !important;
}

.daftar-page-shell .form-actions .btn,
.daftar-page-shell .secondary-button,
.daftar-page-shell .save-parcel-button{
    min-height:37px !important;
    padding:7px 12px !important;
    border-radius:9px !important;
    font-size:10.5px !important;
}

.daftar-page-shell .parcel-form-card .alert{
    padding:9px 11px !important;
    margin-bottom:10px !important;
    border-radius:9px !important;
    font-size:11px !important;
}

/* ---------- small hover polish ---------- */
.dashboard-page-shell .admin-stat-card,
.dashboard-page-shell .dashboard-panel,
.daftar-page-shell .parcel-form-card{
    transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease !important;
}

.dashboard-page-shell .admin-stat-card:hover,
.dashboard-page-shell .dashboard-panel:hover,
.daftar-page-shell .parcel-form-card:hover{
    border-color:rgba(94,234,212,.15) !important;
}

/* ==========================================================
   TABLET / PHONE
   ========================================================== */
@media(max-width:1100px){
    .dashboard-admin-main,
    .daftar-admin-main{
        padding:20px !important;
    }

    .dashboard-page-shell,
    .daftar-page-shell{
        max-width:100%;
    }
}

@media(max-width:768px){
    .dashboard-admin-main,
    .daftar-admin-main{
        width:100% !important;
        margin-left:0 !important;
        padding:14px 10px 24px !important;
    }

    .dashboard-page-shell > .admin-topbar,
    .daftar-page-shell > .admin-topbar{
        min-height:auto;
        margin-bottom:12px !important;
    }

    .page-kicker{
        margin-bottom:5px;
        padding:4px 8px;
        font-size:8px;
    }

    .page-heading h1{
        font-size:22px !important;
    }

    .page-heading p{
        font-size:11px !important;
    }

    .dashboard-page-shell .dashboard-date{
        display:none !important;
    }

    .dashboard-page-shell > .row{
        margin-left:-5px !important;
        margin-right:-5px !important;
        --bs-gutter-x:10px;
        --bs-gutter-y:10px;
    }

    .dashboard-page-shell > .row > [class*="col-"]{
        padding-left:5px !important;
        padding-right:5px !important;
    }

    .dashboard-page-shell .chart-container,
    .dashboard-page-shell .monthly-chart-container{
        height:220px !important;
    }

    .daftar-page-shell > .parcel-form-card{
        padding:14px !important;
        border-radius:15px !important;
    }

    .daftar-page-shell .modern-input,
    .daftar-page-shell .modern-input .form-control{
        min-height:44px !important;
        height:44px !important;
    }

    .daftar-page-shell .modern-textarea{
        min-height:74px !important;
        height:74px !important;
    }
}