/* =========================================================
   1. RESET & GLOBAL STYLES
========================================================= */
* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    background-color: #f0f2f5;
}

body {
    padding-bottom: 50px;
}

.bg-gradient {
    background: linear-gradient(135deg, #e0eafc 0%, #cfdef3 100%);
    min-height: 100vh;
    padding-top: 20px;
}

.main-wrapper {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

/* =========================================================
   2. LAYOUT GRID (TOP DASHBOARD)
========================================================= */
.top-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
    padding: 20px;
}

/* =========================================================
   3. MINI DASHBOARD CARDS
========================================================= */
.mini-dashboard {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 25px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    min-height: 290px;
}

.kurs-main-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    gap: 15px;
}

.kurs-box {
    flex: 2;
    min-height: 85px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 18px;
    color: white;
    padding: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.12);
    transition: all 0.2s ease;
}

.kurs-box:hover {
    transform: translateY(-3px);
}

.currency-label { font-size: 0.85rem; font-weight: bold; opacity: 0.9; }

/* Mengurangi ukuran font agar pas */
.currency-value { font-size: 1.3rem !important; font-weight: 800; }

/* Rekap Circle Button */
.rekap-center { flex: 1; display: flex; justify-content: center; }
.rekap-circle {
    width: 70px;
    height: 70px;
    background: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #2c3e50;
    font-weight: bold;
    font-size: 0.75rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    text-align: center;
    border: 2px solid transparent;
}
.rekap-circle:hover { background: #2c3e50; color: white; transform: scale(1.1); }

/* =========================================================
   4. COLOR THEMES (GRADIENTS)
========================================================= */
.jpy-gradient { background: linear-gradient(135deg, #FF512F, #DD2476); }
.usd-gradient { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.bri-theme    { background: linear-gradient(135deg, #063970, #1e81b0) !important; }
.gold-gradient { background: linear-gradient(135deg, #f1c40f, #e67e22); }
.pegadaian-gradient { background: linear-gradient(135deg, #27ae60, #2ecc71); }

/* =========================================================
   5. AVERAGE & STATUS INDICATORS
========================================================= */
.avg-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    border-top: 1px solid rgba(0,0,0,0.05);
    padding-top: 12px;
    margin-top: 8px;
}
.avg-group { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.avg-item { background: #f8f9fa; border-radius: 10px; padding: 8px 12px; text-align: center; font-size: 13px; }
.avg-item span { display: block; font-weight: 700; font-size: 13px; margin-bottom: 4px; color: #555; }
.avg-item strong { font-size: 15px; font-weight: 800; color: #2d3436; }

/* Status Colors with Priority */
.avg-item.green { background: #16a34a !important; color: white !important; }
.avg-item.red   { background: #dc2626 !important; color: white !important; }
.avg-item.green span, .avg-item.green strong,
.avg-item.red span,   .avg-item.red strong { color: #ffffff !important; }

/* =========================================================
   6. UI ELEMENTS (BUTTONS, TABLES, CARDS)
========================================================= */
.card {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(0,0,0,0.08);
    margin-bottom: 20px;
    border: 1px solid #ddd;
}

.chart-container { position: relative; height: 40vh; width: 100%; }

/* Table System */
.stock-table-container { padding: 15px; overflow-x: auto; }
.kurs-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    text-align: center;
    margin-top: 10px;
}
.kurs-table th, .kurs-table td { border: 1px solid #ddd; padding: 10px; }
.kurs-table thead { background-color: #f8f9fa; }

/* Global Action Buttons */
.top-left-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    justify-content: flex-start;
    align-items: center;
}
.top-left-actions a {
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 5px;
    font-size: 14px;
    color: white !important;
    font-weight: 600;
    transition: opacity 0.3s;
    display: inline-block;
}
.top-left-actions a:hover { opacity: 0.8; }

.btn-back-custom   { background-color: #6c757d; } /* Gray */
.btn-update-custom { background-color: #00529C; } /* BRI Blue */
.btn-excel-custom  { background-color: #217346; } /* Excel Green */

/* =========================================================
   7. RESPONSIVE DESIGN
========================================================= */
@media (max-width: 768px) {
    .top-dashboard-grid { grid-template-columns: 1fr; padding: 10px; }
    
    /* Font size untuk mobile */
    .currency-value { font-size: 1.1rem !important; }
    
    .rekap-circle { width: 60px; height: 60px; font-size: 0.65rem; }
    .avg-container { grid-template-columns: 1fr; }
    .avg-group { grid-template-columns: 1fr 1fr; }
    .top-left-actions { flex-wrap: wrap; }
}

/* --- PERBAIKAN KHUSUS DASHBOARD EMAS (AMAN) --- */

/* --- PERBAIKAN KHUSUS DASHBOARD EMAS (AMAN) --- */

/* 1. Paksa teks ANTAM/G24 agar tidak keluar kotak */
#gold-dashboard-unique .currency-value {
    display: block;
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Gunakan rem, jangan vw, agar ukuran font stabil */
    font-size: 1.2rem !important; 
}

/* 2. Memastikan item AVERAGE berada di dalam kotak */
#gold-dashboard-unique .avg-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2px !important;
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
}

/* 3. Paksa angka AVERAGE menyesuaikan lebar */
#gold-dashboard-unique .avg-item strong {
    display: block;
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Ukuran font kecil agar tidak keluar */
    font-size: 0.85rem !important;
}

/* 4. Aturan khusus untuk layar HP */
@media (max-width: 768px) {
    #gold-dashboard-unique .currency-value {
        font-size: 1rem !important; 
    }
    #gold-dashboard-unique .avg-item strong {
        font-size: 0.75rem !important;
    }
}