/* --- WLA HUB ROOT: NAVY THEME ADAPTATION --- */

/* DARK MODE SETTINGS (Navy Dark) */
.wla-hub-root, .wla-hub-root[data-bs-theme="dark"], .wla-hub-root [data-bs-theme="dark"] {
    --primary-tool: #cf2e2e;    /* Ubah ke Merah agar kontras di background Navy */
    --kumat-tool: #ef4444;
    --app-bg: #001a33;          /* Navy Gelap */
    --card-bg: #00264d;         /* Navy sedang */
    --border-color: #004080;    /* Border biru kontras */
    --text-main: #f0f6fc;
    --text-muted: #8b949e;
    --nav-bg: #001a33;
    --input-bg: #001a33;
    --bs-body-bg: #001a33;
    --bs-card-bg: #00264d;
    --bs-border-color: #004080;
    color-scheme: dark;
}

/* LIGHT MODE SETTINGS (White & Navy Contrast) */
.wla-hub-root[data-bs-theme="light"], .wla-hub-root [data-bs-theme="light"] {
    --app-bg: #f6f8fa;          /* Luar tetap abu terang */
    --card-bg: #ffffff;         /* Konten Putih Bersih */
    --border-color: #d0d7de;
    --text-main: #003366;       /* Teks utama jadi Navy */
    --text-muted: #57606a;
    --nav-bg: #003366;          /* Navigasi tetap Navy */
    --input-bg: #ffffff;
    --bs-body-bg: #ffffff;
    --bs-body-color: #003366;
    --bs-card-bg: #ffffff;
    --bs-primary: #003366;      /* Brand Primary */
    color-scheme: light;
}

/* --- ADJUSTMENT FOR NAVY STYLE --- */
.wla-hub-root {
    font-family: 'Poppins', sans-serif !important; /* Gunakan Poppins agar seragam */
}

/* Mempertegas Fokus Form */
.wla-hub-root .form-control:focus, .wla-hub-root .form-select:focus {
    border-color: #cf2e2e !important; /* Fokus jadi Merah */
    box-shadow: 0 0 0 .25rem rgba(207, 46, 46, 0.25) !important;
}

/* Pengaturan Navigasi Bawah (Mobile) */
.wla-hub-root .bottom-nav {
    background: #003366 !important; /* Paksa Navy */
    border-top: 2px solid #cf2e2e;   /* Garis pemisah Merah */
}

.wla-hub-root .nav-link-m {
    color: #cbd5e1 !important;      /* Teks abu terang agar terbaca di navy */
}

.wla-hub-root .nav-link-m.active {
    color: #ffffff !important;      /* Aktif jadi Putih */
}
/* --- PREMIUM CARDS & APP ICONS (Navy Theme) --- */
.wla-hub-root .premium-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: visible;
}

/* Garis atas kartu: Ubah dari Biru Muda ke Gradasi Navy-Merah */
.wla-hub-root .premium-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px; /* Sedikit lebih tebal agar kontras */
    background: linear-gradient(90deg, #003366, #cf2e2e, #003366);
    background-size: 200% auto;
    border-radius: 20px 20px 0 0;
}

.wla-hub-root .app-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 20px 10px;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* Hover: Bingkai berubah jadi Merah Kontras */
.wla-hub-root .app-card:hover {
    transform: translateY(-5px);
    border-color: #cf2e2e;
    box-shadow: 0 5px 15px rgba(207, 46, 46, 0.2);
}

/* --- IKON NAVIGASI (Disesuaikan ke Navy & Red) --- */
.wla-hub-root .app-icon {
    width: 55px; height: 55px;
    border-radius: 15px;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; margin: 0 auto 10px; color: #fff;
}

/* Gradasi Ikon: Dari Biru Langit ke Navy & Merah */
.wla-hub-root .icon-blue { background: linear-gradient(135deg, #003366, #001a33); } /* Navy */
.wla-hub-root .icon-purple { background: linear-gradient(135deg, #cf2e2e, #800000); } /* Deep Red */
.wla-hub-root .icon-green { background: linear-gradient(135deg, #1e293b, #003366); } /* Dark Slate */
.wla-hub-root .icon-orange { background: linear-gradient(135deg, #cf2e2e, #ff4b2b); } /* Orange Red */

/* Input Data Pasaran (Angka 4D) */
.wla-hub-root .rank-textarea {
    background: #f8fafc; /* Lebih putih agar kontras */
    border-radius: 10px;
    border: 2px solid #cbd5e1;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #003366; /* Angka warna Navy */
    padding: 12px; width: 100%; resize: none;
}

.wla-hub-root .rank-textarea:focus {
    border-color: #003366;
    background: #fff;
}

/* Tombol Ganti Tema (Dark/Light) */
.wla-hub-root .theme-toggle-btn {
    background: #fff0;
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 8px 15px;
    border-radius: 10px;
    font-weight: 700;
}

.wla-hub-root .theme-toggle-btn:hover {
    border-color: #cf2e2e;
    color: #cf2e2e;
}
/* --- SELECT2 & DROPDOWN (Navy Contrast Style) --- */
.wla-hub-root .select2-container--default .select2-selection--single {
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px; /* Lebih membulat agar modern */
    height: 38px; /* Sedikit lebih tinggi agar nyaman diklik */
    display: flex;
    align-items: center;
    transition: all 0.2s;
}

.wla-hub-root .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-main);
    font-weight: 700; /* Tebalkan teks pasaran */
    font-size: 14px;
}

/* Warna saat Dropdown terbuka */
.wla-hub-root .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #cf2e2e !important; /* Fokus ke Merah */
}

.wla-hub-root .select2-dropdown {
    background-color: var(--card-bg);
    border: 1px solid #003366; /* Border dropdown Navy */
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Efek Sorot (Hover) pada Pilihan Pasaran */
.wla-hub-root .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: rgba(0, 51, 102, 0.1) !important; /* Background Navy Transparan */
    color: #003366 !important; /* Teks Navy */
    font-weight: bold;
}

/* Warna Pilihan yang Sedang Aktif */
.wla-hub-root .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #003366 !important; /* Navy */
    color: #fff !important;
}

/* --- SUBMENU & NAVIGATION (Navy Look) --- */
.wla-hub-root .submenu-wp {
    background: rgba(0, 51, 102, 0.05); /* Navy sangat tipis */
    border-radius: 8px;
    padding: 5px 0;
}

.wla-hub-root .submenu-link {
    color: #475569; /* Abu-abu teks */
    font-weight: 600;
    padding: 10px 15px 10px 45px;
    display: block;
    transition: all 0.2s;
    border-left: 3px solid transparent;
}

.wla-hub-root .submenu-link:hover {
    color: #003366;
    background: rgba(0, 51, 102, 0.05);
}

/* Link Aktif di Sidebar/Menu */
.wla-hub-root .submenu-link.active {
    color: #003366 !important;
    font-weight: 800;
    background: rgba(207, 46, 46, 0.05); /* Background Merah Tipis */
    border-left: 3px solid #cf2e2e !important; /* Garis samping Merah */
}

/* Mobile Sub-nav (Scroller Horizontal) */
.wla-hub-root .mobile-subnav {
    border-bottom: 2px solid #003366; /* Garis Navy bawah */
    padding-bottom: 5px;
}
/* --- MOBILE NAVIGATION & SCROLLBAR (Navy Theme) --- */
.wla-hub-root .mobile-subnav-link {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700; /* Pertegas teks */
    padding: 12px 5px;
    position: relative;
    white-space: nowrap;
}

/* Indikator Aktif: Ganti ke Merah Terang agar mencolok di atas Navy */
.wla-hub-root .mobile-subnav-link.active {
    color: #cf2e2e !important; 
}

.wla-hub-root .mobile-subnav-link.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #cf2e2e; /* Garis bawah Merah */
    border-radius: 3px 3px 0 0;
}

/* --- TABEL & DATA (Kontras Tinggi) --- */
.wla-hub-root table, .wla-hub-root .table {
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

.wla-hub-root th {
    background-color: #003366 !important; /* Header Tabel Navy */
    color: #ffffff !important;
    font-weight: 700;
}

.wla-hub-root td {
    background-color: #ffffff !important; /* Sel tabel Putih agar bersih */
    color: #1e293b !important;
    font-weight: 600;
}

/* --- INPUT & FORM FOCUS --- */
.wla-hub-root input:focus, .wla-hub-root textarea:focus, .wla-hub-root select:focus {
    border-color: #cf2e2e !important; /* Fokus Merah */
    box-shadow: 0 0 0 2px rgba(207, 46, 46, 0.18) !important;
}

/* --- SCROLLBAR CUSTOM (Navy Style) --- */
.wla-hub-root ::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.wla-hub-root ::-webkit-scrollbar-thumb {
    background: #003366; /* Scrollbar warna Navy */
    border-radius: 10px;
}

.wla-hub-root ::-webkit-scrollbar-thumb:hover {
    background: #cf2e2e; /* Scrollbar jadi Merah saat disentuh */
}

/* --- DROPDOWN & MODAL --- */
.wla-hub-root .dropdown-item:hover {
    background-color: rgba(0, 51, 102, 0.08) !important; /* Hover Navy transparan */
    color: #003366 !important;
}

.wla-hub-root .accordion-button {
    background-color: #003366 !important; /* Accordion Navy */
    color: #ffffff !important;
}

.wla-hub-root .accordion-button::after {
    filter: brightness(0) invert(1); /* Ubah ikon panah jadi putih */
}

/* Nav Tabs Aktif */
.wla-hub-root .nav-tabs .nav-link.active {
    border-top: 3px solid #cf2e2e; /* Aksen merah di atas tab aktif */
    color: #003366;
    font-weight: 800;
}
/* --- DARK MODE & ELEMENT REFINEMENT (Navy Theme) --- */

/* Pengaturan Select & Input khusus Navy */
.wla-hub-root select, .wla-hub-root select.form-select, .wla-hub-root select.form-control {
    background-color: var(--input-bg) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
    font-weight: 600;
}

/* Tabel Striped & Hover (Efek Navy Halus) */
.wla-hub-root[data-bs-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd)>* {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

.wla-hub-root[data-bs-theme="dark"] .table-hover>tbody>tr:hover>* {
    background-color: rgba(0, 51, 102, 0.4) !important; /* Sorotan Navy saat kursor di atas tabel */
}

/* Alert & Badge (Navy & Red Contrast) */
.wla-hub-root[data-bs-theme="dark"] .alert {
    border-left: 5px solid #cf2e2e; /* Garis merah tegas untuk pengumuman */
    background-color: #00264d;
    color: #f0f6fc;
}

.wla-hub-root[data-bs-theme="dark"] .badge.bg-secondary {
    background-color: #004080 !important; /* Badge Navy */
}

.wla-hub-root[data-bs-theme="dark"] .badge.bg-light {
    background-color: #cf2e2e !important; /* Badge Merah untuk info penting */
    color: #ffffff !important;
}

/* Input Group & Tabs */
.wla-hub-root .input-group-text {
    background-color: #001a33 !important;
    color: #cbd5e1 !important;
    border-color: var(--border-color) !important;
}

.wla-hub-root .nav-tabs .nav-link.active {
    background-color: #ffffff;
    border-top: 3px solid #003366; /* Garis Navy di atas tab aktif */
    color: #003366 !important;
    font-weight: 800;
}

/* Accordion Navy Dark */
.wla-hub-root[data-bs-theme="dark"] .accordion-button {
    background-color: #001a33 !important;
    color: #ffffff !important;
}

.wla-hub-root[data-bs-theme="dark"] .accordion-button::after {
    filter: invert(1); /* Pastikan ikon panah tetap putih */
}

/* Scrollbar Dark Mode (Navy Dark) */
.wla-hub-root[data-bs-theme="dark"] ::-webkit-scrollbar-track {
    background: #001122;
}

.wla-hub-root[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #003366;
    border: 1px solid #004080;
}

.wla-hub-root[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #cf2e2e; /* Jadi merah saat digeser */
}