/* =====================================================================
   Banaspati - design system gelap (dashboard, auth, checkout/payment,
   my-bots, referral). Dipakai setelah Bootstrap CDN agar variabel-variabel
   tema Bootstrap (--bs-primary, --bs-body-bg, dst) ikut tertimpa, sehingga
   kelas utility yang sudah ada di blade (btn-primary, text-primary,
   bg-light, card, table, dsb) otomatis ikut berganti warna tanpa harus
   diubah satu per satu di setiap file.

   Palet: "Trust & Authority" fintech/crypto - emas sebagai warna
   kepercayaan, ungu sebagai aksen teknologi, latar navy gelap.
   Lihat design-system/banaspati-auto-trading-bot/MASTER.md untuk sumbernya.
   ===================================================================== */

:root {
    --color-primary: #F59E0B;
    --color-on-primary: #0F172A;
    --color-secondary: #FBBF24;
    --color-accent: #8B5CF6;
    /* Spec aslinya #000000 di atas ungu - kontrasnya di bawah 4.5:1 untuk teks
       kecil. Putih di atas #8B5CF6 memenuhi syarat kontras WCAG AA. */
    --color-on-accent: #FFFFFF;
    --color-background: #0F172A;
    --color-foreground: #F8FAFC;
    --color-card: #1A2234;
    --color-card-foreground: #F8FAFC;
    --color-muted: #1E293B;
    --color-muted-foreground: #94A3B8;
    --color-border: #334155;
    --color-destructive: #EF4444;
    --color-success: #10B981;
    --color-info: #38BDF8;

    /* Override token tema Bootstrap 5.3 */
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: 245, 158, 11;
    --bs-secondary: var(--color-accent);
    --bs-secondary-rgb: 139, 92, 246;
    --bs-success: var(--color-success);
    --bs-success-rgb: 16, 185, 129;
    --bs-warning: var(--color-secondary);
    --bs-warning-rgb: 251, 191, 36;
    --bs-danger: var(--color-destructive);
    --bs-danger-rgb: 239, 68, 68;
    --bs-info: var(--color-info);
    --bs-info-rgb: 56, 189, 248;

    --bs-body-bg: var(--color-background);
    --bs-body-color: var(--color-foreground);
    --bs-border-color: var(--color-border);
    --bs-secondary-bg: var(--color-muted);
    --bs-tertiary-bg: var(--color-card);
    --bs-link-color: var(--color-primary);
    --bs-link-hover-color: var(--color-secondary);
    --bs-dark: #0B1120;
    --bs-dark-rgb: 11, 17, 32;
    --bs-light: var(--color-muted);
    --bs-light-rgb: 30, 41, 59;
    --bs-light-text-emphasis: var(--color-foreground);
    --bs-emphasis-color: var(--color-foreground);
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--color-background);
    color: var(--color-foreground);
}

/* Permukaan - kartu, modal, dropdown, kode */
.card,
.bg-white,
.bg-light,
.modal-content,
.dropdown-menu {
    background-color: var(--color-card) !important;
    border-color: var(--color-border) !important;
    color: var(--color-foreground);
}

code {
    color: var(--color-primary);
}

.text-muted {
    color: var(--color-muted-foreground) !important;
}

hr {
    border-color: var(--color-border);
    opacity: .5;
}

/* Form */
.form-control,
.form-select {
    background-color: var(--color-muted);
    border-color: var(--color-border);
    color: var(--color-foreground);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--color-muted);
    color: var(--color-foreground);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 .25rem rgba(245, 158, 11, .25);
}

.form-control::placeholder {
    color: var(--color-muted-foreground);
}

.form-check-input {
    background-color: var(--color-muted);
    border-color: var(--color-border);
}

.form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.input-group-text {
    background-color: var(--color-muted);
    border-color: var(--color-border);
    color: var(--color-muted-foreground);
}

/* Tombol */
.btn {
    cursor: pointer;
    transition: all 200ms ease;
}

.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-on-primary);
    transform: translateY(-1px);
}

.btn-outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary.active,
.btn-outline-primary:active,
.btn-check:checked + .btn-outline-primary {
    /* .active bawaan Bootstrap 5.3 CDN memakai warna biru yang di-hardcode saat build,
       bukan var(--bs-primary) hidup - sama seperti kasus .table-light sebelumnya. */
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
}

.btn-outline-secondary {
    color: var(--color-muted-foreground);
    border-color: var(--color-border);
}

.btn-outline-secondary:hover {
    background-color: var(--color-muted);
    color: var(--color-foreground);
    border-color: var(--color-border);
}

/* Tabel */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--color-foreground);
    --bs-table-border-color: var(--color-border);
    --bs-table-striped-bg: rgba(255, 255, 255, .03);
    --bs-table-hover-bg: rgba(255, 255, 255, .04);
}

/* .table-light/.table-dark pakai warna HEX yang dikompilasi langsung di CDN
   Bootstrap, bukan CSS variable - jadi tidak ikut tertimpa oleh aturan di atas
   dan tampil sebagai baris terang yang aneh di tengah tabel gelap kalau tidak
   ditimpa manual di sini. */
.table-light,
.table-light > th,
.table-light > td {
    --bs-table-bg: var(--color-muted);
    --bs-table-color: var(--color-foreground);
    --bs-table-border-color: var(--color-border);
    background-color: var(--color-muted);
    color: var(--color-foreground);
    border-color: var(--color-border);
}

/* Link */
a {
    color: var(--color-primary);
}

a:hover {
    color: var(--color-secondary);
}

/* Fokus keyboard tetap terlihat - jangan dihapus demi estetika */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

::selection {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.badge.bg-secondary {
    background-color: var(--color-muted-foreground) !important;
    color: var(--color-background) !important;
}