/* style.css - Tema Biru Putih Korporat (Kemas dan Bersih) + Responsive Mobile */

/* === Pembolehubah Warna Global === */
:root {
    --primary-navy: #0A192F;       
    --primary-light: #1F3F66;      
    --accent-blue: #007bff;        
    --accent-orange: #FF9800;      
    --text-dark: #333333;          
    --text-muted: #6c757d;         
    --bg-light: #f8f9fa;           
    --card-bg: #ffffff;            
    --border-color: #dee2e6;
}

/* Fon: Poppins untuk kesan moden */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* === Tema Asas & Tipografi (Global Terang) === */
body {
    background-color: var(--bg-light); 
    font-family: 'Poppins', sans-serif;
    color: var(--text-dark); 
}

/* Navigasi */
.navbar.bg-primary-navy {
    background-color: var(--primary-navy) !important; 
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.navbar-brand {
    font-weight: 700;
    font-size: 1.25rem;
    color: #fff !important;
}

/* Tajuk */
.section-title {
    color: var(--primary-navy);
    font-weight: 700;
}
.section-subtitle {
    color: var(--primary-navy);
    font-weight: 600;
}
.text-primary-dark {
    color: var(--primary-navy) !important;
}

/* Garisan Pemisah */
.divider {
    border-top: 1px solid #ced4da;
}

/* Modul & Kad */
.card {
    background-color: var(--card-bg); 
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); 
    transition: transform 0.2s, box-shadow 0.2s; 
}
.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* Modul Borang */
.form-module {
    border-left: 5px solid var(--accent-blue);
}
.form-module .form-label {
    font-weight: 600;
    color: var(--text-dark);
}

/* Input/Select */
.form-control, .form-select {
    background-color: #ffffff;
    color: var(--text-dark);
    border: 1px solid #ced4da;
}
.form-control:focus, .form-select:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
}


/* === Butang-butang === */
.btn {
    font-weight: 600;
}
.btn-primary-navy {
    background-color: var(--primary-navy); 
    border-color: var(--primary-navy);
    color: #fff;
}
.btn-primary-navy:hover {
    background-color: var(--primary-light);
    border-color: var(--primary-light);
}
.btn-accent {
    background-color: var(--accent-orange); 
    border-color: var(--accent-orange);
    color: #fff;
}
.btn-accent:hover {
    background-color: #e58900; 
    border-color: #e58900;
}
.btn-success {
    background-color: #28a745;
    border-color: #28a745;
}
.btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
}

/* Butang Outline (Muat Turun CSV) */
.btn-outline-primary-navy {
    color: var(--primary-navy);
    border-color: var(--primary-navy);
    font-weight: 600;
}
.btn-outline-primary-navy:hover {
    background-color: var(--primary-navy);
    color: #fff;
}
.btn-outline-primary { /* Butang Lihat/Edit */
    color: var(--accent-blue);
    border-color: var(--accent-blue);
    font-size: 0.8em;
    padding: .25rem .5rem;
}
.btn-outline-primary:hover {
    background-color: var(--accent-blue);
    color: #fff;
}

/* Butang Ikon GPS/Gambar dalam Jadual */
.btn-info-map {
    background-color: #17a2b8; /* Cyan-Blue */
    color: #fff;
    font-size: 0.7em;
    padding: .25rem .5rem;
    font-weight: 500;
    border-radius: 5px;
}
.btn-info-map:hover {
    background-color: #117a8b;
    color: #fff;
}


/* === Jadual Aset === */
.table th {
    background-color: var(--primary-navy); 
    color: #fff;
    font-weight: 600; 
    text-transform: uppercase;
    font-size: 0.85em;
    border-bottom: 2px solid var(--accent-blue); 
}
.table td {
    font-size: 0.88em;
    vertical-align: middle;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f8f9fa; 
}
.table-hover tbody tr:hover {
    background-color: #e9f5ff; 
}

/* === Status Badge === */
.badge {
    padding: 0.5em 0.9em;
    font-size: 0.8em; 
    border-radius: 50px;
    font-weight: 700;
    display: inline-block;
    min-width: 110px; 
    text-align: center;
}
.status-Aktif { background-color: #e0ffe0; color: #28a745; border: 1px solid #28a745; }
.status-SedangSelenggara { background-color: #fff3e0; color: #ff9800; border: 1px solid #ff9800; }
.status-RosakLupus { background-color: #ffe0e0; color: #dc3545; border: 1px solid #dc3545; }
.status-SimpanTidakDigunakan { background-color: #e0e6ed; color: #6c757d; border: 1px solid #6c757d; }

/* === Gaya Imbasan === */
#scannerContainer {
    position: relative;
    width: 100%;
    max-width: 550px; 
    margin: 25px auto;
}
.video-container {
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem; 
    border: 3px solid var(--accent-blue); 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
#video { display: block; width: 100%; height: auto; }
.scan-overlay {
    position: absolute; top: 50%; left: 10%; right: 10%; height: 3px; 
    background-color: var(--accent-orange); 
    box-shadow: 0 0 15px rgba(255, 152, 0, 0.8);
    animation: scan-line 2s infinite alternate; 
    border-radius: 5px;
}
@keyframes scan-line {
    from { top: 25%; }
    to { top: 75%; }
}

/* ========================================================== */
/* === 📱 MEDIA QUERIES UNTUK PAPARAN TELEFON BIMBIT (MAX 768px) === */
/* ========================================================== */

@media (max-width: 768px) {
    .container { padding-left: 10px; padding-right: 10px; }
    .my-5 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
    .form-control-lg, .btn-lg {
        padding: 0.8rem 1rem;
        font-size: 1rem;
    }
    .search-module .col-md-3, .search-module .col-md-6 {
        width: 100%;
        margin-bottom: 10px !important;
    }
    .form-module {
        border-left: none; 
        border-top: 5px solid var(--accent-blue);
    }
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table th, .table td {
        white-space: nowrap; 
        font-size: 0.8em; 
        padding: 0.5rem;
    }
    .badge {
        min-width: 80px; 
        font-size: 0.75em;
        padding: 0.4em 0.6em;
    }
    .btn-info-map {
        font-size: 0.6em; 
        padding: .2rem .4rem;
    }
}