/* =================================================================== */
/* FILE LENGKAP UNTUK public/assets/css/style.css */
/* =================================================================== */

/* Definisi Variabel Warna dari Logo "RAJA IKAN INDONESIA" */
:root {
    --primary-brand-color: #008C99;   /* Teal/Biru Kehijauan dari "RAJA IKAN" */
    --secondary-brand-color: #E66E3A; /* Orange/Jingga dari "INDONESIA" */
    --text-dark: #333333;             /* Teks gelap untuk konten */
    --text-light: #FFFFFF;            /* Teks terang (misal untuk navbar terang) */
    --bg-gradient-start: #E0F7FA;     /* Biru muda sangat terang */
    --bg-gradient-end: #FFFFFF;       /* Putih */
    --border-light: #dee2e6;          /* Garis/border ringan */
}

/* Background Gradasi Biru Muda ke Putih */
body {
    background: linear-gradient(to bottom, var(--bg-gradient-start), var(--bg-gradient-end));
    background-attachment: fixed; /* Penting agar gradasi tetap saat scroll */
    color: var(--text-dark);
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Font yang lebih modern */
    min-height: 100vh; /* Pastikan body minimal 100% tinggi viewport untuk gradasi penuh */
    display: flex;
    flex-direction: column;
}

/* Penyesuaian Komponen Bootstrap dengan Warna Brand */
.navbar {
    background-color: var(--primary-brand-color) !important; /* Gunakan warna primer untuk navbar */
}
.navbar .navbar-brand, .navbar .nav-link {
    color: var(--text-light) !important;
}
.navbar .nav-link:hover {
    color: var(--secondary-brand-color) !important; /* Aksen saat hover di navigasi */
}

.btn-primary {
    background-color: var(--primary-brand-color);
    border-color: var(--primary-brand-color);
}
.btn-primary:hover {
    background-color: #00707D; /* Sedikit lebih gelap dari primary saat hover */
    border-color: #00707D;
}

.btn-secondary {
    --bs-btn-bg: var(--secondary-brand-color);
    --bs-btn-border-color: var(--secondary-brand-color);
    --bs-btn-hover-bg: #e65c00; 
    --bs-btn-hover-border-color: #cc5200; 
    --bs-btn-active-bg: #cc5200;
    --bs-btn-active-border-color: #b34700;
    --bs-btn-color: #ffffff;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-color: #ffffff;
}

/* Kartu atau Panel */
.card {
    border-color: var(--border-light);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.card-header {
    background-color: var(--bg-gradient-start); 
    color: var(--text-dark);
    border-bottom: 1px solid var(--border-light);
}

/* Form Control */
.form-control:focus {
    border-color: var(--primary-brand-color);
    box-shadow: 0 0 0 0.25rem rgba(0, 140, 153, 0.25); 
}

/* Link (untuk konsistensi) */
a {
    color: var(--primary-brand-color);
}
a:hover {
    color: var(--secondary-brand-color);
}

/* Tambahan: Logo di Navbar */
.navbar-brand img {
    height: 40px; 
    margin-right: 10px;
}

/* Agar footer selalu di bawah */
.wrapper {
    flex: 1; 
}
footer {
    padding: 20px;
    margin-top: auto; 
    background-color: var(--primary-brand-color);
    color: var(--text-light);
    text-align: center;
}

/*
=========================================
  Custom Modal Styles (Desktop View)
=========================================
*/
.modal-body .data-row {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    padding: 0.5rem 0; 
    border-bottom: 1px solid #f0f0f0; 
}

.modal-body .data-row span:first-child {
    color: #6c757d; 
}

.modal-body .data-row strong {
    font-size: 1.1em;
}

.modal-body .data-row-note {
    text-align: right;
    padding-right: 0;
    margin-top: -0.5rem; 
}

.modal-body .data-wrapper {
    margin-bottom: 1rem;
}

/*
=========================================
  Responsive Adjustments (Mobile View)
=========================================
*/

/* Terapkan gaya ini HANYA jika lebar layar 768px atau kurang */
@media (max-width: 768px) {
    
    /* Gunakan ID modal untuk spesifisitas yang lebih tinggi */
    #weeklyDetailModal .modal-body,
    #detailModal .modal-body {
        font-size: 0.85rem; 
        padding: 0.8rem;   
    }

    #weeklyDetailModal .modal-body h4,
    #detailModal .modal-body h4 {
        font-size: 1.1rem;
    }
    
    #weeklyDetailModal .modal-body h5,
    #detailModal .modal-body h5 {
        font-size: 1rem;
    }

    #weeklyDetailModal .modal-body .lead,
    #detailModal .modal-body .lead {
        font-size: 0.9rem;
    }

    #weeklyDetailModal .data-row,
    #detailModal .data-row {
        padding: 0.1rem 0; 
    }

    #weeklyDetailModal .data-row strong,
    #detailModal .data-row strong,
    #weeklyDetailModal .data-row .badge,
    #detailModal .data-row .badge {
        font-size: 0.9em !important; 
    }

    #weeklyDetailModal .col-md-6 h5 {
        font-size: 1rem;
    }
	
	.modal-main-info {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-light);
}

.detail-section {
    padding: 1rem;
    background-color: #f8f9fa; /* Warna latar belakang abu-abu sangat muda */
    border-radius: 0.5rem;
    height: 100%; /* Membuat kedua kolom sama tinggi */
}

.section-title {
    font-size: 1.1rem;
    font-weight: 600;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--primary-brand-color);
    color: var(--primary-brand-color);
}

.note-box {
    background-color: #ffffff;
    padding: 0.75rem;
    border-radius: 0.25rem;
    min-height: 60px;
    white-space: pre-wrap;
    font-size: 0.9em;
    color: #555;
    border: 1px solid #eee;
}

/* Mengatur ulang gaya .data-row agar lebih bersih di dalam .detail-section */
.detail-section .data-row {
    border-bottom: 1px solid #e9ecef;
}
.detail-section .data-row:last-of-type {
    border-bottom: none; /* Hapus garis di item terakhir */
}
	
}
/* assets/css/style.css */
.bg-gold { background-color: #FFD700 !important; color: #333 !important; }
.bg-silver { background-color: #C0C0C0 !important; color: #333 !important; }
.bg-bronze { background-color: #CD7F32 !important; color: #fff !important; }