/* =========================================
   1. GLOBAL & BACKGROUND STYLES
   ========================================= */
body {
    /* Latar belakang gradient moden (Biru lembut ke kelabu) */
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    font-family: 'Roboto', 'Segoe UI', Tahoma, sans-serif;
    color: #495057;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: #2c3e50;
}

/* =========================================
   2. INDEX PAGE (LOGIN & HERO)
   ========================================= */

/* Kad Login dengan efek 'Glassmorphism' */
.login-card {
    border: none;
    border-radius: 15px;
    background-color: rgba(255, 255, 255, 0.95); /* Putih sedikit telus */
    backdrop-filter: blur(10px); /* Efek kabur di belakang */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Bayang lembut */
    transition: transform 0.3s ease;
}

.login-card:hover {
    transform: translateY(-5px); /* Terapung sedikit bila mouse hover */
}

/* Teks Utama di sebelah kiri */
.hero-text h1 {
    font-weight: 800;
    letter-spacing: -1px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

/* Kotak Ikon Bulat untuk Steps */
.icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background-color: #e3f2fd; /* Biru sangat muda */
    color: #0d6efd; /* Bootstrap Primary Blue */
    border-radius: 50%;
    margin-right: 15px;
    font-size: 1.2rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    flex-shrink: 0;
}

/* Item Senarai Langkah */
.step-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    font-size: 1.1rem;
    font-weight: 500;
    color: #555;
    background: rgba(255,255,255,0.6);
    padding: 10px 15px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,1);
}

/* =========================================
   3. LEGACY UTILITIES (Kekal dari kod asal)
   ========================================= */
.notificationPanel {
    display: none;
}

/* Helper classes untuk label */
.label-xsmall { vertical-align: super; font-size: x-small; }
.label-small  { vertical-align: super; font-size: small; }
.label-medium { vertical-align: super; font-size: medium; }
.label-large  { vertical-align: super; font-size: large; }
.label-bs     { vertical-align: super; }

/* Butang Upload File (Bootstrap 3/Legacy Style) */
.btn-file {
    position: relative;
    overflow: hidden;
}

.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    cursor: inherit;
    display: block;
}

/* =========================================
   4. LOADING SPINNER & OVERLAY (Dikemaskini)
   ========================================= */

/* Overlay dikemaskini guna Flexbox supaya sentiasa di tengah */
#overlay {
    background: rgba(255, 255, 255, 0.9); /* Lebih bersih dari opacity biasa */
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 9999; /* Z-index tinggi */
    top: 0;
    left: 0;
    display: flex; /* Guna flex untuk center spinner */
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.overlay2 {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Spinner */
.spinner {
    height: 60px;
    width: 60px;
    animation: rotate 0.8s infinite linear;
    border: 6px solid #e3f2fd; /* Warna track pudar */
    border-right-color: #0d6efd; /* Warna utama (Biru) */
    border-radius: 50%;
}

/* Style lama .icon (jika masih diguna di page lain) */
.icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;
    background: linear-gradient(145deg, #375ee3 0%, #6543e0 80%);
    border-radius: 50%;
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.9);
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}