:root {
    /* Light Mode Variables */
    --bg-body: #f0f0f0;
    --bg-card: #ffffff;
    --bg-input: transparent;
    --bg-info: #f9f9f9;
    --bg-black-box: #ffffff;
    --bg-header-default: #ffff00;
    --bg-header-market: #ff9900;
    --bg-header-summary: #e0e0e0;
    --bg-header-history: #333333;
    --bg-table-header: #eeeeee;
    --bg-green-bar: #5dfd5d;
    --bg-red-bar: #ff3300;

    --text-main: #333333;
    --text-header: #000000;
    --text-white: #ffffff;

    --border-main: #000000;
    --border-soft: #cccccc;
    --shadow: rgba(0, 0, 0, 0.1);

    /* Button Variables */
    --btn-reset-bg: #444;
    --btn-reset-hover-bg: #222;
    --btn-save-bg: #28a745;
    --btn-save-hover-bg: #218838;
    --btn-export-bg: #007bff;
    --btn-export-hover-bg: #0056b3;
    --btn-import-bg: #17a2b8;
    --btn-import-hover-bg: #138496;
    --btn-clear-bg: #dc3545;
    --btn-clear-hover-bg: #c82333;
}

body.dark-mode {
    /* Dark Mode Variables */
    --bg-body: #1a1a2e;
    --bg-card: #2e2e4a;
    --bg-input: #2e2e4a;
    --bg-info: #3a3a5a;
    --bg-black-box: #1a1a2e;
    --bg-header-default: #3a3a5a;
    --bg-header-market: #cc7a00;
    --bg-header-summary: #3a3a5a;
    --bg-header-history: #3a3a5a;
    --bg-table-header: #3a3a5a;
    --bg-green-bar: #006400;
    --bg-red-bar: #8b0000;

    --text-main: #e0e0e0;
    --text-header: #ffffff;
    --border-main: #444444;
    --border-soft: #444444;
    --shadow: rgba(0, 0, 0, 0.3);

    /* Button Variables for Dark Mode */
    --btn-reset-bg: #555;
    --btn-reset-hover-bg: #777;
    --btn-save-bg: #1e7e34;
    --btn-save-hover-bg: #155d23;
    --btn-export-bg: #0056b3;
    --btn-export-hover-bg: #003f80;
    --btn-import-bg: #0f6674;
    --btn-import-hover-bg: #0b4e57;
    --btn-clear-bg: #bd2130;
    --btn-clear-hover-bg: #8f1a25;
}

* { box-sizing: border-box; }
body { font-family: 'Segoe UI', Arial, sans-serif; background-color: var(--bg-body); color: var(--text-main); display: flex; justify-content: center; padding: 20px; transition: background-color 0.3s, color 0.3s; }
.grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; max-width: 800px; width: 100%; }
.card { background: var(--bg-card); border: 1px solid var(--border-main); display: flex; flex-direction: column; box-shadow: 2px 2px 5px var(--shadow); transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.header { background: var(--bg-header-default); color: var(--text-header); font-weight: bold; text-align: center; padding: 8px; border-bottom: 1px solid var(--border-main); text-transform: uppercase; font-size: 14px; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; }

/* Baris Input */
.row { display: flex; border-bottom: 1px solid var(--border-soft); min-height: 45px; align-items: center; flex-wrap: wrap; transition: border-color 0.3s ease; }
.cell-label { flex: 1; padding: 5px 10px; font-weight: bold; font-size: 13px; border-right: 1px solid var(--border-soft); transition: border-color 0.3s ease; }
.cell-input { flex: 1; padding: 5px; text-align: right; }
input { width: 100%; border: none; text-align: right; font-family: inherit; font-size: 16px; outline: none; font-weight: bold; background: var(--bg-input); color: var(--text-main); transition: background 0.3s ease, color 0.3s ease; }
select { width: 95%; border: none; text-align-last: right; font-family: inherit; font-size: 13px; outline: none; font-weight: bold; background: var(--bg-input); color: var(--text-main); cursor: pointer; transition: background 0.3s ease, color 0.3s ease; }

/* Info Box Maker/Taker */
.info-box { font-size: 11px; padding: 10px; border-top: 1px solid var(--border-soft); background-color: var(--bg-info); transition: background-color 0.3s ease, border-color 0.3s ease; }
.info-box p { margin: 0; color: var(--text-main); transition: color 0.3s ease; }
.info-box p + p { margin-top: 5px; }

/* Header Gray for DCA */
.header-summary { background: var(--bg-header-summary) !important; transition: background 0.3s ease; }

/* Hasil Unit & Persen */
.result-row { padding: 5px 10px; text-align: right; font-weight: bold; min-height: 25px; font-size: 14px; color: var(--text-main); transition: color 0.3s ease; }

/* Kotak Hitam untuk Aset Saat Ini */
.aset-container { padding: 15px 10px; display: flex; align-items: center; justify-content: space-between; }
.rp-label { font-weight: bold; font-size: 18px; margin-right: 10px; color: var(--text-main); transition: color 0.3s ease; }
.black-box { 
    flex-grow: 1; 
    border: 3px solid var(--border-main); 
    padding: 10px; 
    text-align: right; 
    font-size: 22px; 
    font-weight: bold; 
    min-height: 30px;
    background: var(--bg-black-box);
    color: var(--text-main); /* Ensure text color also transitions */
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Bar Warna Bawah */
.green-bar { background: var(--bg-green-bar); border-top: 1px solid var(--border-main); font-weight: bold; padding: 8px; display: flex; justify-content: space-between; margin-top: auto; color: var(--text-white); transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease; }
.red-bar { background: var(--bg-red-bar); color: var(--text-white); border-top: 1px solid var(--border-main); font-weight: bold; padding: 8px; display: flex; justify-content: space-between; margin-top: auto; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; }

/* Tombol Reset */
.reset-btn { 
    grid-column: 1 / -1; 
    background: var(--btn-reset-bg);
    color: #fff;
    border: 1px solid var(--border-main); 
    padding: 12px; 
    font-weight: bold; 
    cursor: pointer; 
    text-transform: uppercase;
    font-size: 14px;
    transition: background 0.3s ease, border-color 0.3s ease;
}
.reset-btn:hover { background: var(--btn-reset-hover-bg); }

/* Tombol Simpan */
.save-btn { 
    grid-column: 1 / -1; 
    background: var(--btn-save-bg);
    color: #fff; 
    border: 1px solid var(--border-main); 
    padding: 12px; 
    font-weight: bold; 
    cursor: pointer; 
    text-transform: uppercase;
    font-size: 14px;
    margin-top: 10px; /* This is a layout property, not color related */
    transition: background 0.3s ease, border-color 0.3s ease;
}
.save-btn:hover { background: var(--btn-save-hover-bg); }

/* History Table */
.history-container { 
    margin: 20px auto; 
    width: 100%; 
    max-width: 800px; 
    background: var(--bg-card);
    border: 1px solid var(--border-main); 
    box-shadow: 2px 2px 5px var(--shadow);
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Membuat scroll halus di iOS/Safari */
    display: block;
    width: 100%;
    overscroll-behavior-x: contain; /* Mencegah efek 'bounce' pada seluruh halaman */

    /* Indikator scroll bayangan (Scroll Shadows) */
    background: 
        /* Penutup bayangan (bergerak bersama konten) */
        linear-gradient(to right, var(--bg-card) 30%, transparent) 0 0,
        linear-gradient(to right, transparent, var(--bg-card) 70%) 100% 0,
        /* Bayangan (tetap di posisi container) */
        radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 0,
        radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 100% 0;
    background-repeat: no-repeat;
    background-color: var(--bg-card);
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; /* These are fixed values, not color related */
    background-attachment: local, local, scroll, scroll;
    transition: background-color 0.3s ease;
}
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th, td { border: 1px solid var(--border-soft); padding: 12px 15px; text-align: right; white-space: nowrap; color: var(--text-main); transition: border-color 0.3s ease, color 0.3s ease; }
th { background: var(--bg-table-header); color: var(--text-main); text-align: center; font-weight: bold; transition: background 0.3s ease, color 0.3s ease; }
td:first-child { text-align: center; min-width: 70px; }
.del-btn { background: #ff4444; color: white; border: none; padding: 2px 8px; cursor: pointer; border-radius: 3px; transition: background 0.3s ease; }
.status-profit { color: green; font-weight: bold; text-align: center !important; transition: color 0.3s ease; }
.status-loss { color: red; font-weight: bold; text-align: center !important; transition: color 0.3s ease; }
.market-loading { color: #888; font-style: italic; font-size: 11px; transition: color 0.3s ease; }

/* History Actions Layout */
.history-actions { display: flex; gap: 5px; padding: 10px; flex-wrap: wrap; } /* No color changes here, so no transition needed */
.history-actions button { flex: 1; min-width: 100px; padding: 12px; font-weight: bold; text-transform: uppercase; cursor: pointer; border: none; font-size: 12px; color: white; transition: background 0.3s ease, border-color 0.3s ease; }

.export-btn { background: var(--btn-export-bg); border-radius: 4px; }
.export-btn:hover { background: var(--btn-export-hover-bg); }

.import-btn { background: var(--btn-import-bg); border-radius: 4px; }
.import-btn:hover { background: var(--btn-import-hover-bg); }

.clear-btn { background: var(--btn-clear-bg); border-radius: 4px; }
.clear-btn:hover { background: var(--btn-clear-hover-bg); }

/* Mobile Adjustments */
@media (max-width: 480px) {
    body { padding: 10px; }
    .grid-container { gap: 10px; }
    .header { font-size: 12px; padding: 6px; }
    .black-box { font-size: 18px; }
    .rp-label { font-size: 16px; }
    .cell-label { font-size: 11px; padding: 8px; }
    .cell-input { font-size: 14px; }
    input { font-size: 15px; }
    .history-actions button { flex: 1 1 100%; }
    
    /* Make table scrollable container more obvious */
    .table-responsive {
        border-bottom: 2px solid var(--border-main); /* Border color already has transition */
    }
    
    .row { min-height: 50px; }
}

/* Specific overrides for elements with inline styles or special logic */
body.dark-mode .header[style*="background: #ff9900"] { /* Specific header for Market Live */
    background: var(--bg-header-market) !important;
}