/* ============================================================
   Technocapital Investama - Forex Analyst Rating System
   Clean & Elegant Light Blue Theme
   ============================================================ */

:root {
    --primary: #4f8cf7;
    --primary-dark: #3a6fd8;
    --primary-light: #6ba3ff;
    --primary-50: #f0f6ff;
    --primary-100: #e0edff;
    --primary-200: #c2daff;
    --primary-300: #94bfff;
    --primary-600: #4280e8;
    --primary-700: #3670d4;
    --primary-800: #2d5db3;
    --primary-900: #254d94;

    --secondary: #7b8fa5;
    --success: #34c88a;
    --success-light: #e6f9f0;
    --warning: #f5a623;
    --warning-light: #fff7e6;
    --danger: #f06060;
    --danger-light: #fff0f0;
    --info: #42c6d9;

    --bg-body: #f6f9fe;
    --bg-card: #ffffff;
    --bg-nav: linear-gradient(135deg, #3660b5 0%, #4f8cf7 60%, #6ba3ff 100%);

    --text-primary: #2c3e50;
    --text-secondary: #6b7f94;
    --text-muted: #a0b0c0;

    --border-color: #e8eff8;
    --border-radius: 14px;
    --shadow-xs: 0 1px 2px rgba(79,140,247,0.03);
    --shadow-sm: 0 2px 6px rgba(79,140,247,0.04);
    --shadow-md: 0 4px 16px rgba(79,140,247,0.06);
    --shadow-lg: 0 12px 36px rgba(79,140,247,0.09);
    --shadow-card: 0 2px 10px rgba(79,140,247,0.04), 0 4px 20px rgba(79,140,247,0.03);
    --shadow-hover: 0 8px 28px rgba(79,140,247,0.1);

    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --navbar-height: 60px;
    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Unified font-size scale ── */
    --fs-2xs: 0.62rem;   /* 9.9px  — micro hints */
    --fs-xs:  0.68rem;   /* 10.9px — table sub-labels, form hints */
    --fs-sm:  0.73rem;   /* 11.7px — table body, badges, filter inputs */
    --fs-md:  0.78rem;   /* 12.5px — nav links, form controls, buttons */
    --fs-base: 0.82rem;  /* 13.1px — general body text */
    --fs-lg:  0.9rem;    /* 14.4px — card titles, labels */
    --fs-xl:  1rem;      /* 16px   — section headings */
}

/* ---- RESET & BASE ---- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    background: var(--bg-body);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: var(--fs-base);
    line-height: 1.5;
}

a { text-decoration: none; }

::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: #f0f4fa; }
::-webkit-scrollbar-thumb { background: var(--primary-200); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary-300); }

/* ---- NAVBAR ---- */
.navbar {
    background: var(--bg-nav);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,0.15);
    height: var(--navbar-height);
    box-shadow: 0 2px 16px rgba(54,96,181,0.2);
    z-index: 1050;
    padding: 0 1rem;
}

.navbar-brand {
    font-size: var(--fs-lg);
    letter-spacing: -0.3px;
    color: #fff !important;
}

.navbar-brand i {
    color: #cce0ff;
    filter: drop-shadow(0 0 4px rgba(204,224,255,0.3));
}

.nav-link {
    font-weight: 500;
    font-size: var(--fs-md);
    padding: 0.45rem 0.85rem !important;
    border-radius: 10px;
    transition: var(--transition);
    color: rgba(255,255,255,0.85) !important;
}

.nav-link:hover {
    background: rgba(255,255,255,0.12);
    color: #fff !important;
}

.nav-link.active,
.nav-item.active .nav-link {
    background: rgba(255,255,255,0.18);
    color: #fff !important;
}

.avatar-sm { font-size: 1.2rem; }

/* ---- MAIN CONTENT ---- */
.main-content {
    margin-top: var(--navbar-height);
    padding: 2rem 0;
    flex: 1;
    min-height: calc(100vh - var(--navbar-height) - 56px);
}

/* ---- CARDS ---- */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-card);
    transition: var(--transition);
    overflow: hidden;
}

.card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
    border-color: var(--primary-200);
}

.card-header {
    background: #fcfdff;
    border-bottom: 1px solid var(--border-color);
    padding: 0.9rem 1.25rem;
    font-weight: 600;
    font-size: var(--fs-base);
}

.card-body { padding: 1.25rem; }
.card-footer {
    background: #fcfdff;
    border-top: 1px solid var(--border-color);
    padding: 0.6rem 1.25rem;
    font-size: var(--fs-sm);
}

/* ---- STAT CARDS ---- */
.stat-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow-card);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light), var(--info));
    border-radius: 18px 18px 0 0;
}

.stat-card .stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.stat-card .stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
}

.stat-card .stat-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* ---- TIER BADGES ---- */
.tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 700;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.tier-diamond {
    background: linear-gradient(135deg, #e6f7fb, #ccf0f7);
    color: #0d7a8c;
    border: 1px solid #80deea;
}

.tier-platinum {
    background: linear-gradient(135deg, #f3f5f8, #e8ecf2);
    color: #4a5568;
    border: 1px solid #b0bec5;
}

.tier-gold {
    background: linear-gradient(135deg, #fffcf0, #fff0c2);
    color: #8b6508;
    border: 1px solid #fdd835;
}

.tier-silver {
    background: linear-gradient(135deg, #f7f9fb, #e4e9ef);
    color: #546e7a;
    border: 1px solid #b0bec5;
}

.tier-bronze {
    background: linear-gradient(135deg, #fef6ee, #fde8d0);
    color: #8c4a10;
    border: 1px solid #ffb74d;
}

.tier-unranked {
    background: #f7f9fb;
    color: #a0b0c0;
    border: 1px solid var(--border-color);
}

/* ---- SCORE DISPLAY ---- */
.score-display {
    position: relative;
    text-align: center;
    padding: 1.5rem 1rem;
}

.score-value {
    font-size: 2.4rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary-800), var(--primary), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    letter-spacing: -1px;
}

.score-max {
    font-size: var(--fs-md);
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 4px;
}

/* ---- WINDOW SELECTOR ---- */
.window-selector {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.window-btn {
    padding: 7px 18px;
    border-radius: 9px;
    border: none;
    font-weight: 600;
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    color: var(--primary-700);
    background: transparent;
}

.window-btn:hover {
    background: var(--primary-50);
    color: var(--primary-700);
}

.window-btn.active {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 2px 10px rgba(79,140,247,0.25);
}

/* ---- LEADERBOARD TABLE ---- */
.leaderboard-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
    padding: 0 12px;
}

.leaderboard-table thead th {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    padding: 9px 10px;
    border: none;
    white-space: nowrap;
}

.leaderboard-table tbody tr {
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: var(--shadow-xs);
    transition: var(--transition);
}

.leaderboard-table tbody tr:hover {
    box-shadow: var(--shadow-md);
    transform: translateX(4px);
    background: var(--primary-50);
}

.leaderboard-table tbody td {
    padding: 10px 10px;
    border: none;
    vertical-align: middle;
    font-size: var(--fs-sm);
    white-space: nowrap;
}

.leaderboard-table tbody td:first-child { border-radius: 12px 0 0 12px; }
.leaderboard-table tbody td:last-child { border-radius: 0 12px 12px 0; }

.rank-number {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: var(--fs-sm);
}

.rank-1 { background: linear-gradient(135deg, #fff9e6, #ffe680); color: #8b6508; }
.rank-2 { background: linear-gradient(135deg, #f3f5f8, #e0e5ec); color: #4a5568; }
.rank-3 { background: linear-gradient(135deg, #fff2e6, #ffd6a0); color: #8c4a10; }
.rank-default { background: var(--primary-50); color: var(--primary-700); }

/* ---- FORMS ---- */
.form-control, .form-select {
    border: 1.5px solid var(--border-color);
    border-radius: 9px;
    padding: 0.45rem 0.8rem;
    font-size: var(--fs-md);
    transition: var(--transition);
    background: #fff;
    color: var(--text-primary);
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(79,140,247,0.1);
    outline: none;
    color: var(--text-primary);
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(79,140,247,0.1);
    outline: none;
}

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

.form-label {
    font-weight: 600;
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
    letter-spacing: 0.1px;
}

.input-group-text {
    border: 1.5px solid var(--border-color);
    border-radius: 9px;
    background: var(--primary-50);
    color: var(--primary-700);
    font-weight: 600;
    font-size: var(--fs-md);
}

.form-text {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    margin-top: 3px;
}

/* ---- BUTTONS ---- */
.btn {
    border-radius: 9px;
    font-weight: 600;
    font-size: var(--fs-md);
    padding: 0.45rem 1.1rem;
    transition: var(--transition);
    letter-spacing: 0.1px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    border: none;
    color: #fff;
    box-shadow: 0 3px 10px rgba(79,140,247,0.2);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    box-shadow: 0 5px 16px rgba(79,140,247,0.3);
    transform: translateY(-1px);
    color: #fff;
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(79,140,247,0.25);
}

.btn-outline-primary {
    border: 1.5px solid var(--primary);
    color: var(--primary);
    background: transparent;
}

.btn-outline-primary:hover {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 3px 10px rgba(79,140,247,0.2);
    transform: translateY(-1px);
}

.btn-outline-secondary {
    border: 1.5px solid var(--border-color);
    color: var(--text-secondary);
}

.btn-outline-secondary:hover {
    border-color: var(--primary-200);
    color: var(--primary);
    background: var(--primary-50);
}

.btn-success {
    background: linear-gradient(135deg, #28a76e, var(--success));
    border: none;
    box-shadow: 0 3px 8px rgba(52,200,138,0.2);
}

.btn-success:hover {
    box-shadow: 0 4px 14px rgba(52,200,138,0.3);
    transform: translateY(-1px);
}

.btn-outline-danger { border: 1.5px solid var(--danger); color: var(--danger); }
.btn-outline-danger:hover { background: var(--danger); color: #fff; }
.btn-outline-success { border: 1.5px solid var(--success); color: var(--success); }
.btn-outline-success:hover { background: var(--success); color: #fff; }

.btn-lg { padding: 0.55rem 1.5rem; font-size: var(--fs-base); }
.btn-sm { padding: 0.28rem 0.65rem; font-size: var(--fs-xs); border-radius: 7px; }

/* ---- METRIC CARDS ---- */
.metric-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1.2rem 1rem;
    text-align: center;
    transition: var(--transition);
}

.metric-card:hover {
    border-color: var(--primary-200);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.metric-card .metric-value {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primary-700);
    line-height: 1.2;
}

.metric-card .metric-label {
    font-size: var(--fs-2xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 4px;
    font-weight: 600;
}

/* ---- PROFILE HEADER ---- */
.profile-header {
    background: linear-gradient(135deg, #3660b5 0%, #4f8cf7 50%, #6ba3ff 90%, #8fbcff 100%);
    border-radius: 20px;
    padding: 2.5rem 2.5rem;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(54,96,181,0.2);
}

.profile-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(255,255,255,0.07) 0%, transparent 60%);
    pointer-events: none;
}

.profile-header .profile-name {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.3px;
}

.profile-header .profile-meta {
    opacity: 0.85;
    font-size: var(--fs-xs);
}

/* ---- LOGIN PAGE ---- */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(140deg, #2e5699 0%, #4f8cf7 45%, #7ab4ff 85%, #a8d0ff 100%);
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.login-page::before {
    content: '';
    position: absolute;
    top: 15%;
    right: 8%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
    pointer-events: none;
}

.login-page::after {
    content: '';
    position: absolute;
    bottom: 10%;
    left: 5%;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
    pointer-events: none;
}

.login-card {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(46,86,153,0.15), 0 8px 20px rgba(79,140,247,0.08);
    padding: 2.8rem 2.5rem;
    width: 100%;
    max-width: 430px;
    position: relative;
    z-index: 2;
}

.login-brand {
    text-align: center;
    margin-bottom: 2.2rem;
}

.login-brand i {
    font-size: 2.6rem;
    color: var(--primary);
}

.login-brand h2 {
    font-weight: 800;
    color: var(--primary-800);
    margin-top: 0.5rem;
    font-size: 1.7rem;
    letter-spacing: -0.3px;
}

.login-brand .login-subtitle {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    margin-top: 3px;
}

/* ---- FOOTER ---- */
.app-footer {
    background: #fff;
    border-top: 1px solid var(--border-color);
    padding: 0.75rem 0;
    font-size: var(--fs-xs);
    color: var(--text-secondary);
}

/* ---- TABLES ---- */
.table-modern {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

.table-modern thead th {
    background: var(--primary-50);
    color: var(--primary-700);
    font-weight: 700;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 0.65rem 0.9rem;
    border: none;
    white-space: nowrap;
}

.table-modern thead th:first-child { border-radius: 10px 0 0 10px; }
.table-modern thead th:last-child { border-radius: 0 10px 10px 0; }

.table-modern tbody td {
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
    font-size: var(--fs-sm);
}

.table-modern tbody tr:last-child td { border-bottom: none; }
.table-modern tbody tr { transition: var(--transition); }
.table-modern tbody tr:hover { background: var(--primary-50); }

/* ---- PROGRESS BAR ---- */
.progress-thin {
    height: 5px;
    border-radius: 3px;
    background: var(--primary-100);
    overflow: hidden;
}

.progress-thin .progress-bar {
    border-radius: 3px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
}

/* ---- NET PIPS COLORS ---- */
.text-profit { color: var(--success) !important; }
.text-loss { color: var(--danger) !important; }

/* ---- BADGES ---- */
.badge {
    font-weight: 600;
    font-size: var(--fs-2xs);
    letter-spacing: 0.2px;
    padding: 3px 8px;
    border-radius: 7px;
}

/* ---- ALERTS ---- */
.alert {
    border-radius: 10px;
    border: none;
    font-size: var(--fs-sm);
    font-weight: 500;
    box-shadow: var(--shadow-sm);
}

.alert-sm { padding: 0.45rem 0.85rem; font-size: var(--fs-xs); }
.alert-success { background: var(--success-light); color: #1a6b47; }
.alert-danger { background: var(--danger-light); color: #993333; }
.alert-warning { background: var(--warning-light); color: #8b5e00; }
.alert-info { background: #e8f6fb; color: #1a6b7a; }

/* ---- EMPTY STATE ---- */
.empty-state {
    text-align: center;
    padding: 3.5rem 2rem;
    color: var(--text-secondary);
}

.empty-state i {
    font-size: 3rem;
    color: var(--primary-200);
    margin-bottom: 0.75rem;
    display: block;
}

.empty-state h5 {
    color: var(--text-primary);
    font-weight: 700;
    font-size: var(--fs-lg);
}

.empty-state p {
    max-width: 380px;
    margin: 0.4rem auto 0;
    font-size: var(--fs-sm);
}

/* ---- CHART CONTAINER ---- */
.chart-container {
    position: relative;
    height: 280px;
    width: 100%;
    padding: 0.5rem;
}

/* ---- DROPDOWN DARK ---- */
.dropdown-menu-dark {
    background: #2c3e50;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    padding: 6px;
}

.dropdown-menu-dark .dropdown-item {
    color: rgba(255,255,255,0.85);
    border-radius: 8px;
    padding: 0.4rem 0.85rem;
    font-size: var(--fs-md);
    transition: var(--transition);
}

.dropdown-menu-dark .dropdown-item:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}

.dropdown-menu-dark .dropdown-divider { border-color: rgba(255,255,255,0.08); margin: 5px 0; }
.dropdown-menu-dark .dropdown-item-text { padding: 0.4rem 1rem; }

/* ---- RESPONSIVE ---- */
@media (max-width: 992px) {
    .main-content { padding: 1.25rem 0; }
    .profile-header { padding: 1.75rem; }
}

@media (max-width: 768px) {
    .main-content { padding: 0.75rem 0; }
    .profile-header { padding: 1.25rem; border-radius: 16px; }
    .profile-header .profile-name { font-size: 1.2rem; }
    .score-value { font-size: 1.9rem; }
    .window-selector { width: 100%; justify-content: center; }
    .window-btn { padding: 6px 14px; }
    .stat-card .stat-value { font-size: 1.25rem; }
    .metric-card .metric-value { font-size: 1.05rem; }
    .leaderboard-table { border-spacing: 0 4px; padding: 0 4px; }
    .leaderboard-table tbody td { padding: 8px 7px; }
    .login-card { padding: 1.75rem 1.25rem; border-radius: 18px; }
}

@media (max-width: 576px) {
    .container-fluid { padding-left: 8px; padding-right: 8px; }
    .profile-header .profile-meta span { display: block; margin-bottom: 3px; }
}

/* ---- ANIMATIONS ---- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-in {
    animation: fadeInUp 0.45s cubic-bezier(0.4,0,0.2,1) forwards;
    opacity: 0;
}

.animate-in:nth-child(1) { animation-delay: 0.04s; }
.animate-in:nth-child(2) { animation-delay: 0.1s; }
.animate-in:nth-child(3) { animation-delay: 0.16s; }
.animate-in:nth-child(4) { animation-delay: 0.22s; }
.animate-in:nth-child(5) { animation-delay: 0.28s; }
.animate-in:nth-child(6) { animation-delay: 0.34s; }

/* ---- UTILITIES ---- */
.fw-500 { font-weight: 500; }
.fw-800 { font-weight: 800; }

.bg-success-subtle { background: var(--success-light) !important; }
.text-success { color: var(--success) !important; }
.bg-warning-subtle { background: var(--warning-light) !important; }
.text-warning { color: var(--warning) !important; }
.bg-danger-subtle { background: var(--danger-light) !important; }
.bg-primary-subtle { background: var(--primary-100) !important; }
.text-primary { color: var(--primary) !important; }

.table-responsive { border-radius: var(--border-radius); }
.tooltip-inner { border-radius: 7px; font-size: var(--fs-xs); padding: 4px 10px; }

/* ============================================================
   THEME VARIANTS (data-theme on <html>)
   ============================================================ */

/* --- MEDIUM BLUE THEME --- */
[data-theme="medium"] {
    --primary: #3b6fd6;
    --primary-dark: #2d5ab8;
    --primary-light: #5688e8;
    --primary-50: #eef3fc;
    --primary-100: #dce7f9;
    --primary-200: #b8cff3;
    --primary-300: #85aee8;
    --primary-600: #3565c9;
    --primary-700: #2c55b0;
    --primary-800: #244694;
    --primary-900: #1d3a7a;

    --bg-body: #f2f6fc;
    --bg-nav: linear-gradient(135deg, #1d3a7a 0%, #2d5ab8 55%, #3b6fd6 100%);

    --border-color: #e0eaf5;
    --shadow-card: 0 2px 10px rgba(59,111,214,0.05), 0 4px 20px rgba(59,111,214,0.04);
    --shadow-hover: 0 8px 28px rgba(59,111,214,0.1);
    --shadow-md: 0 4px 16px rgba(59,111,214,0.07);
}

[data-theme="medium"] .profile-header {
    background: linear-gradient(135deg, #1d3a7a 0%, #2d5ab8 50%, #3b6fd6 90%, #5688e8 100%);
    box-shadow: 0 6px 24px rgba(29,58,122,0.25);
}

[data-theme="medium"] .login-page {
    background: linear-gradient(140deg, #142c5e 0%, #1d3a7a 30%, #2d5ab8 65%, #5688e8 100%);
}

[data-theme="medium"] .navbar {
    box-shadow: 0 2px 16px rgba(29,58,122,0.25);
}

/* --- DARK BLUE THEME --- */
[data-theme="dark"] {
    --primary: #1a4fb8;
    --primary-dark: #14408f;
    --primary-light: #2d6ae0;
    --primary-50: #ebeffe;
    --primary-100: #d6dffc;
    --primary-200: #aec0f7;
    --primary-300: #7a9aee;
    --primary-600: #1847a8;
    --primary-700: #143d90;
    --primary-800: #103278;
    --primary-900: #0c265c;

    --bg-body: #f0f3fa;
    --bg-nav: linear-gradient(135deg, #0c265c 0%, #14408f 50%, #1a4fb8 100%);

    --border-color: #dce4f0;
    --shadow-card: 0 2px 10px rgba(26,79,184,0.05), 0 4px 20px rgba(26,79,184,0.04);
    --shadow-hover: 0 8px 28px rgba(26,79,184,0.12);
    --shadow-md: 0 4px 16px rgba(26,79,184,0.08);
}

[data-theme="dark"] .profile-header {
    background: linear-gradient(135deg, #0c265c 0%, #14408f 45%, #1a4fb8 85%, #2d6ae0 100%);
    box-shadow: 0 6px 24px rgba(12,38,92,0.3);
}

[data-theme="dark"] .login-page {
    background: linear-gradient(140deg, #060f24 0%, #0c265c 25%, #14408f 60%, #1a4fb8 100%);
}

[data-theme="dark"] .navbar {
    box-shadow: 0 2px 16px rgba(12,38,92,0.35);
}

[data-theme="dark"] .score-value {
    background: linear-gradient(135deg, #0c265c, #1a4fb8, #2d6ae0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================================
   THEME SETTINGS PAGE STYLES
   ============================================================ */
.theme-option {
    display: block;
    cursor: pointer;
    border: 2px solid var(--border-color);
    border-radius: 16px;
    padding: 1rem;
    text-align: center;
    transition: var(--transition);
}

.theme-option:hover {
    border-color: var(--primary-200);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.theme-option.active {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79,140,247,0.15);
    background: var(--primary-50);
}

.theme-preview {
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 0.75rem;
    position: relative;
}

.theme-preview .tp-nav {
    height: 16px;
    width: 100%;
}

.theme-preview .tp-body {
    padding: 6px 8px;
    display: flex;
    gap: 4px;
    height: calc(100% - 16px);
}

.theme-preview .tp-card {
    flex: 1;
    border-radius: 4px;
}

/* Light preview */
.theme-preview-light { background: #f6f9fe; }
.theme-preview-light .tp-nav { background: linear-gradient(90deg, #4f8cf7, #6ba3ff); }
.theme-preview-light .tp-card { background: #fff; border: 1px solid #e8eff8; }

/* Medium preview */
.theme-preview-medium { background: #f2f6fc; }
.theme-preview-medium .tp-nav { background: linear-gradient(90deg, #1d3a7a, #3b6fd6); }
.theme-preview-medium .tp-card { background: #fff; border: 1px solid #e0eaf5; }

/* Dark preview */
.theme-preview-dark { background: #f0f3fa; }
.theme-preview-dark .tp-nav { background: linear-gradient(90deg, #0c265c, #1a4fb8); }
.theme-preview-dark .tp-card { background: #fff; border: 1px solid #dce4f0; }

.theme-label {
    font-weight: 700;
    font-size: var(--fs-base);
    color: var(--text-primary);
}

.theme-desc {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    margin-top: 2px;
}

/* ============================================================
   TABLE SUMMARY ROW
   ============================================================ */
.table-summary-row {
    background: var(--primary-50) !important;
    border-top: 2px solid var(--primary-200);
}

.table-summary-row td {
    border-bottom: none !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

/* ============================================================
   USER GUIDE COMPONENT
   ============================================================ */
.guide-card {
    background: #fff !important;
    border: 1.5px solid var(--primary-200) !important;
    border-radius: 12px !important;
    overflow: hidden;
}

.guide-card .guide-toggle {
    background: var(--primary-50);
    border: none;
    border-radius: 0;
    padding: 0.6rem 1rem;
    font-size: var(--fs-xs);
    color: var(--primary-700);
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: var(--transition);
}

.guide-card .guide-toggle:hover {
    background: var(--primary-100);
}

.guide-card .guide-toggle[aria-expanded="true"] {
    background: var(--primary-100);
    border-bottom: 1px solid var(--primary-200);
}

.guide-card .guide-toggle .bi-chevron-down {
    transition: transform 0.3s ease;
}

.guide-card .guide-toggle[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
}

.guide-card .guide-content {
    padding: 1rem;
    font-size: var(--fs-xs);
    line-height: 1.8;
    color: var(--text-secondary);
}

.guide-card .guide-content h6 {
    font-size: var(--fs-xs);
    margin-top: 0.85rem;
}

.guide-card .guide-content h6:first-child {
    margin-top: 0;
}

.guide-card .guide-content ul {
    padding-left: 1.1rem;
    margin-bottom: 0.6rem;
}

.guide-card .guide-content li {
    margin-bottom: 0.25rem;
}

/* ============================================================
   AVATAR STYLES
   ============================================================ */
.avatar-preview {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 3px solid var(--primary-200);
    box-shadow: var(--shadow-md);
}

.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-50);
    color: var(--primary-300);
    font-size: 2rem;
}

/* Profile header avatar */
.profile-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.4);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.profile-avatar-placeholder {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.7);
    font-size: 1.6rem;
    border: 2px solid rgba(255,255,255,0.3);
}

/* ============================================================
   ANOMALY DETECTION STYLES
   ============================================================ */
.anomaly-item {
    padding: 0.6rem 0.8rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: #fcfdff;
    transition: var(--transition);
}

.anomaly-item:hover {
    background: var(--primary-50);
    border-color: var(--primary-200);
}

.bg-danger-subtle { background: var(--danger-light) !important; }
.bg-warning-subtle { background: var(--warning-light) !important; }
.bg-info-subtle { background: #e8f6fb !important; }
.text-info { color: var(--info) !important; }

/* ============================================================
   SCREENER FILTER PANEL
   ============================================================ */
.screener-filter {
    background: #fff !important;
    border: none !important;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.screener-filter .filter-toggle {
    background: #fff;
    border: none;
    border-radius: 0;
    padding: 0.6rem 1.25rem;
    font-size: var(--fs-sm);
    color: var(--primary-700);
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: var(--transition);
}

.screener-filter .filter-toggle:hover {
    background: var(--primary-50);
}

.screener-filter .filter-toggle[aria-expanded="true"] {
    background: var(--primary-50);
}

.screener-filter .filter-toggle .bi-chevron-down {
    transition: transform 0.3s ease;
    color: var(--primary);
    font-size: var(--fs-xs);
}

.screener-filter .filter-toggle[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
}

.screener-filter .filter-body {
    padding: 0.6rem 1.25rem 1rem;
}

.screener-filter .filter-body .row {
    margin-left: 0;
    margin-right: 0;
}

.screener-filter .filter-body .form-label {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: 0.2px;
    margin-bottom: 0.15rem;
}

.screener-filter .filter-body .form-control-sm,
.screener-filter .filter-body .form-control-sm,
.screener-filter .filter-body .form-select-sm {
    border: 1px solid var(--border-color);
    font-size: var(--fs-xs);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    background: var(--bg-body);
    color: var(--text-primary);
    height: auto;
    line-height: 1.4;
}

.screener-filter .filter-body .form-control-sm:focus,
.screener-filter .filter-body .form-select-sm:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 2px rgba(79,140,247,0.06);
    background: #fff;
}

.screener-filter .filter-body .form-control-sm::placeholder {
    color: var(--text-muted);
    font-size: var(--fs-2xs);
}

.screener-filter .filter-body .btn-sm {
    font-size: var(--fs-xs);
    padding: 0.28rem 0.85rem;
}

/* ============================================================
   COMPACT DATA DISPLAY — Seragamkan semua tabel data padat
   ============================================================ */

/* Bootstrap table-sm override — lebih compact */
.table-sm > :not(caption) > * > * {
    padding: 0.35rem 0.6rem;
    font-size: var(--fs-xs);
}

/* Heading pages (h3, h4, h5) */
h3.fw-bold { font-size: 1.05rem; }
h4.fw-bold { font-size: var(--fs-lg); }
h5.fw-bold { font-size: var(--fs-base); }
h6.fw-bold { font-size: var(--fs-md); }

/* Leaderboard card header sort bar */
.card-header .form-select-sm {
    font-size: var(--fs-xs);
    padding: 0.2rem 0.5rem;
}

/* Inline sub-label hints below badges (e.g. "3/4 pts", "pips") */
.data-hint {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    line-height: 1.2;
    margin-top: 1px;
}

/* Compact analyst card in combinator results */
.analyst-card-pill {
    font-size: var(--fs-xs);
    padding: 0.3rem 0.75rem;
}

/* Metric card compact */
.metric-card {
    padding: 0.85rem 0.75rem;
}

/* Table bordered in combinator monthly breakdown */
.table-bordered > :not(caption) > * > * {
    font-size: var(--fs-xs);
    padding: 0.3rem 0.45rem;
}

/* Bootstrap utility overrides — align with scale */
.small, small { font-size: var(--fs-xs) !important; }
.text-muted   { font-size: inherit; }

/* Bootstrap form-control-sm / form-select-sm global */
.form-control-sm, .form-select-sm {
    font-size: var(--fs-xs);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    color: var(--text-primary);
    background-color: #fff;
}

/* Input group sm */
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text,
.input-group-sm > .btn {
    font-size: var(--fs-xs);
    padding: 0.25rem 0.5rem;
}

/* Card header p-0 tables — remove extra padding */
.card-body.p-0 .table-modern tbody td,
.card-body.p-0 .table-modern thead th {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
}

/* Modal */
.modal-title { font-size: var(--fs-lg); }
.modal-body  { font-size: var(--fs-sm); }
.modal-footer .btn { font-size: var(--fs-xs); }

/* Popover / analyst character */
.analyst-char-popover { font-size: var(--fs-xs); }
.analyst-char-popover .popover-body { padding: 0.5rem 0.75rem; }

/* Profile header compact */
.profile-header {
    padding: 1.75rem 2rem;
}

/* Navbar height adjustment */
.main-content { margin-top: var(--navbar-height); }

/* ── Archetype badge button (analyst character popover trigger) ── */
.archetype-btn {
    cursor: pointer;
    font-size: var(--fs-2xs);
    text-align: left;
    border: 0;
    line-height: 1.4;
}

/* ============================================================
   FORCE DARK TEXT — Cegah teks putih di background putih/terang
   Override Bootstrap dan browser dark-mode artifacts
   ============================================================ */

/* Force semua input, select, textarea selalu dark text */
input,
input.form-control,
input.form-control-sm,
select,
select.form-select,
select.form-select-sm,
textarea,
textarea.form-control {
    color: var(--text-primary) !important;
    background-color: #fff !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}

/* Focus state */
input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus,
.form-control-sm:focus,
.form-select-sm:focus {
    color: var(--text-primary) !important;
    background-color: #fff !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}

/* Placeholder tetap muted */
input::placeholder,
textarea::placeholder {
    color: var(--text-muted) !important;
    opacity: 1;
    -webkit-text-fill-color: var(--text-muted) !important;
}

/* Disabled inputs */
input:disabled,
select:disabled,
textarea:disabled,
.form-control:disabled,
.form-select:disabled {
    color: var(--text-secondary) !important;
    background-color: #f5f7fa !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
}

/* Table cells — paksa dark text */
.table td,
.table th,
.table-modern td,
.table-modern th,
.leaderboard-table td,
.leaderboard-table th {
    color: var(--text-primary);
}

/* Card body, card header */
.card-body,
.card-header {
    color: var(--text-primary);
}

/* Alert text — pastikan tidak putih */
.alert {
    color: var(--text-primary);
}
.alert-success { color: #155724 !important; }
.alert-danger  { color: #721c24 !important; }
.alert-warning { color: #856404 !important; }
.alert-info    { color: #0c5460 !important; }

/* Badge subtle variants — pastikan kontras */
.badge.bg-primary-subtle   { color: var(--primary-800) !important; }
.badge.bg-secondary-subtle { color: #3d4a5c        !important; }
.badge.bg-success-subtle   { color: #155724        !important; }
.badge.bg-danger-subtle    { color: #721c24        !important; }
.badge.bg-warning-subtle   { color: #856404        !important; }
.badge.bg-info-subtle      { color: #0c5460        !important; }
.badge.bg-dark-subtle      { color: #1a2332        !important; }
.badge.bg-light-subtle     { color: #495057        !important; }

/* Input group text */
.input-group-text {
    color: var(--primary-700) !important;
    background-color: var(--primary-50) !important;
}

/* Dropdown menu items */
.dropdown-menu:not(.dropdown-menu-dark) .dropdown-item {
    color: var(--text-primary) !important;
}
.dropdown-menu:not(.dropdown-menu-dark) {
    color: var(--text-primary) !important;
    background-color: #fff !important;
}

/* Modal */
.modal-content {
    color: var(--text-primary) !important;
    background-color: #fff !important;
}
.modal-header,
.modal-body,
.modal-footer {
    color: var(--text-primary) !important;
}

/* Prevent browser forced dark mode from inverting */
:root {
    color-scheme: light only;
}

/* ============================================================
   ADDITIONAL DARK TEXT ENFORCEMENT
   Spesifik untuk komponen yang sering white-on-white
   ============================================================ */

/* Bootstrap table override — thead dark text on light bg */
.table > thead { color: var(--text-primary); }
.table > tbody { color: var(--text-primary); }
.table > tfoot { color: var(--text-primary); }
.table-light, .table-light > th, .table-light > td { color: var(--text-primary) !important; }

/* Bootstrap .small and text utilities */
.text-body   { color: var(--text-primary) !important; }
.text-dark   { color: var(--text-primary) !important; }
.text-black  { color: #1a2332 !important; }

/* Screner filter — label dan input text */
.screener-filter .filter-body,
.screener-filter .filter-body label,
.screener-filter .filter-body .form-label {
    color: var(--text-secondary) !important;
}

/* Card dengan bg-light/bg-white */
.card.bg-light,
.card.bg-white,
div[style*="background:#f"],
div[style*="background: #f"] {
    color: var(--text-primary);
}

/* Leaderboard table body rows */
.leaderboard-table tbody tr,
.leaderboard-table tbody td,
.leaderboard-table thead th {
    color: var(--text-primary) !important;
}

/* Rank number boxes */
.rank-number { color: inherit; }
.rank-1 { color: #8b6508 !important; }
.rank-2 { color: #4a5568 !important; }
.rank-3 { color: #8c4a10 !important; }
.rank-default { color: var(--primary-700) !important; }

/* Window selector buttons */
.window-btn { color: var(--primary-700) !important; }
.window-btn.active { color: #fff !important; } /* aktif boleh putih karena bg biru */

/* Navbar — putih di bg biru = OK, tidak perlu diubah */
/* Tombol primary — putih di bg biru = OK */
/* Badge tier — sudah punya color masing-masing */

/* Guide card content */
.guide-card .guide-content,
.guide-card .guide-content p,
.guide-card .guide-content li,
.guide-card .guide-content td {
    color: var(--text-secondary) !important;
}
.guide-card .guide-content strong { color: var(--text-primary) !important; }
.guide-card .guide-content h6 { color: var(--primary-800) !important; }

/* Screener filter toggle */
.screener-filter .filter-toggle { color: var(--primary-700) !important; }

/* Anomaly items */
.anomaly-item { color: var(--text-primary); }

/* Metric cards */
.metric-card .metric-value { color: var(--primary-700) !important; }
.metric-card .metric-label { color: var(--text-secondary) !important; }

/* Stat cards */
.stat-card .stat-value { color: var(--text-primary) !important; }
.stat-card .stat-label { color: var(--text-secondary) !important; }

/* Profile header — putih di bg biru = OK, biarkan */

/* Score value gradient text — pastikan tidak hilang */
.score-value {
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
}

/* Footer */
.app-footer { color: var(--text-secondary) !important; }

/* Pagination / breadcrumb jika ada */
.page-link { color: var(--primary-700) !important; }

/* Form text hint */
.form-text { color: var(--text-muted) !important; }

/* Checkbox / radio labels */
.form-check-label { color: var(--text-primary) !important; }

/* ── True Profitability & Loss Ratio pips/pts hint under badge ── */
td .data-hint,
th .data-hint,
.data-hint {
    color: var(--text-muted) !important;
    -webkit-text-fill-color: var(--text-muted) !important;
    font-size: var(--fs-2xs) !important;
}

/* Badge subtle — semua text harus kontras, bukan inherit putih dari tabel */
.badge[class*="bg-"][class*="-subtle"] {
    -webkit-text-fill-color: unset !important;
}
.badge.bg-success-subtle  { color: #155724 !important; -webkit-text-fill-color: #155724 !important; }
.badge.bg-primary-subtle  { color: var(--primary-800) !important; -webkit-text-fill-color: var(--primary-800) !important; }
.badge.bg-info-subtle     { color: #0c5460 !important; -webkit-text-fill-color: #0c5460 !important; }
.badge.bg-warning-subtle  { color: #856404 !important; -webkit-text-fill-color: #856404 !important; }
.badge.bg-danger-subtle   { color: #721c24 !important; -webkit-text-fill-color: #721c24 !important; }
.badge.bg-secondary-subtle{ color: #3d4a5c !important; -webkit-text-fill-color: #3d4a5c !important; }
.badge.bg-dark-subtle     { color: #1a2332 !important; -webkit-text-fill-color: #1a2332 !important; }

/* Popover */
.popover { color: var(--text-primary) !important; }
.popover-body { color: var(--text-primary) !important; background: #fff !important; }
.popover-header { color: var(--text-primary) !important; background: var(--primary-50) !important; }

/* Tooltip */
.tooltip-inner { color: #fff !important; background: #1a2332 !important; }

/* ============================================================
   NUCLEAR FIX — PAKSA SEMUA TEKS GELAP DI BACKGROUND TERANG
   Ini mengatasi semua white-on-white tanpa terkecuali
   ============================================================ */

/* Override SEMUA elemen dengan warna terang (putih/abu terang) */
* {
    color: inherit;
}

/* Base body — semua teks default gelap */
body, body * {
    -webkit-text-fill-color: unset;
}

/* Force semua elemen umum yang sering putih */
p, span, div, label, td, th, li, h1, h2, h3, h4, h5, h6,
strong, b, em, i, small, a:not(.btn):not(.nav-link):not(.window-btn):not(.dropdown-item) {
    color: inherit;
}

/* Spesifik: form controls selalu dark */
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    color: #1a2332 !important;
    -webkit-text-fill-color: #1a2332 !important;
    background-color: #ffffff !important;
}

input::placeholder, textarea::placeholder {
    color: #a0b0c0 !important;
    -webkit-text-fill-color: #a0b0c0 !important;
    opacity: 1 !important;
}

/* Table — semua cell paksa gelap */
table, thead, tbody, tfoot, tr, td, th {
    color: #1a2332 !important;
    -webkit-text-fill-color: #1a2332 !important;
}

/* PENGECUALIAN — elemen yang BOLEH putih (bg berwarna gelap) */
/* Navbar */
.navbar,
.navbar *:not(.dropdown-menu):not(.dropdown-menu *) {
    -webkit-text-fill-color: unset !important;
}

/* Button primary, danger, success, dark = teks putih diizinkan */
.btn-primary, .btn-primary *,
.btn-danger, .btn-danger *,
.btn-success, .btn-success *,
.btn-dark, .btn-dark *,
.btn-secondary, .btn-secondary * {
    -webkit-text-fill-color: unset !important;
    color: inherit !important;
}

/* Nav links di navbar */
.navbar .nav-link,
.navbar .navbar-brand,
.navbar .dropdown-toggle {
    -webkit-text-fill-color: unset !important;
}

/* Window btn active */
.window-btn.active {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Score gradient — jaga gradient effect */
.score-value {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    background-image: linear-gradient(135deg, var(--primary-800), var(--primary), var(--primary-light)) !important;
}

/* Badge dengan bg solid (bukan subtle) — teks putih ok */
.badge.bg-primary, .badge.bg-danger, .badge.bg-success,
.badge.bg-dark, .badge.bg-secondary {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Profile header (bg biru) — teks putih ok */
.profile-header, .profile-header * {
    -webkit-text-fill-color: unset !important;
}

/* Tier badge warna — warnanya sudah di-set per class, tidak override */
.tier-diamond, .tier-platinum, .tier-gold, .tier-silver, .tier-bronze, .tier-unranked {
    -webkit-text-fill-color: unset !important;
}

/* Text profit/loss — pastikan warna spesifik tetap jalan */
.text-profit {
    color: var(--success) !important;
    -webkit-text-fill-color: var(--success) !important;
}
.text-loss {
    color: var(--danger) !important;
    -webkit-text-fill-color: var(--danger) !important;
}

/* text-muted, text-secondary — tetap muted tapi bukan putih */
.text-muted {
    color: var(--text-muted) !important;
    -webkit-text-fill-color: var(--text-muted) !important;
}
.text-secondary {
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
}

/* Dropdown dark — teks putih ok */
.dropdown-menu-dark,
.dropdown-menu-dark .dropdown-item {
    -webkit-text-fill-color: unset !important;
}

/* Rank number boxes — warna spesifik tetap */
.rank-1 { color: #8b6508 !important; -webkit-text-fill-color: #8b6508 !important; }
.rank-2 { color: #4a5568 !important; -webkit-text-fill-color: #4a5568 !important; }
.rank-3 { color: #8c4a10 !important; -webkit-text-fill-color: #8c4a10 !important; }
.rank-default { color: var(--primary-700) !important; -webkit-text-fill-color: var(--primary-700) !important; }

/* text-success/danger/warning/info di luar badge */
.text-success { color: var(--success) !important; -webkit-text-fill-color: var(--success) !important; }
.text-danger  { color: var(--danger) !important;  -webkit-text-fill-color: var(--danger) !important;  }
.text-warning { color: var(--warning) !important; -webkit-text-fill-color: var(--warning) !important; }
.text-info    { color: var(--info) !important;    -webkit-text-fill-color: var(--info) !important;    }
.text-primary { color: var(--primary) !important; -webkit-text-fill-color: var(--primary) !important; }

/* ============================================================
   COMPACT UNIFORM FONT — Leaderboard, Screener, Combinator
   Semua elemen di tabel hasil seragam font kecil
   ============================================================ */

/* ── Leaderboard table ── */
#leaderboard-table,
#leaderboard-table thead th,
#leaderboard-table tbody td,
#leaderboard-table tbody td *,
#leaderboard-table tbody td span,
#leaderboard-table tbody td div,
#leaderboard-table tbody td a {
    font-size: var(--fs-xs) !important;
    line-height: 1.35 !important;
}
#leaderboard-table tbody td {
    padding: 6px 8px !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}
#leaderboard-table thead th {
    padding: 6px 8px !important;
    white-space: nowrap !important;
}
/* Rank number di leaderboard */
#leaderboard-table .rank-number {
    width: 26px !important;
    height: 26px !important;
    font-size: var(--fs-xs) !important;
}
/* fw-semibold nama analyst di leaderboard */
#leaderboard-table .fw-semibold {
    font-size: var(--fs-xs) !important;
    font-weight: 600 !important;
}
/* Score /1000 */
#leaderboard-table td .fw-bold {
    font-size: var(--fs-xs) !important;
}

/* ── Screener result table ── */
.table.table-modern tbody td,
.table.table-modern thead th,
.table.table-modern tbody td *,
.table.table-modern tbody td span,
.table.table-modern tbody td div,
.table.table-modern tbody td a {
    font-size: var(--fs-xs) !important;
    line-height: 1.35 !important;
}
.table.table-modern tbody td {
    padding: 5px 8px !important;
    vertical-align: middle !important;
}
.table.table-modern thead th {
    padding: 5px 8px !important;
}

/* ── Combinator — analyst pills di results card ── */
.analyst-pill,
.analyst-pill * {
    font-size: var(--fs-xs) !important;
}
.analyst-pill {
    padding: 3px 8px !important;
    gap: 4px !important;
}

/* ── Combinator — metric cards ── */
.metric-card .metric-value {
    font-size: 1rem !important;
    line-height: 1.2 !important;
}
.metric-card .metric-label {
    font-size: var(--fs-2xs) !important;
}
.metric-card {
    padding: 0.6rem 0.5rem !important;
}

/* ── Tier badge kompak ── */
.tier-badge {
    font-size: var(--fs-2xs) !important;
    padding: 2px 7px !important;
    gap: 3px !important;
}

/* ── Archetype badge button ── */
.archetype-btn {
    font-size: var(--fs-2xs) !important;
    padding: 2px 6px !important;
}

/* ── Risk control & overtrade badge (dari RatingBadgeHelper) ── */
.badge {
    font-size: var(--fs-2xs) !important;
    padding: 2px 7px !important;
}

/* ── Inline style badges (LR, TP, DD) — paksa font kecil ── */
td span[style*="display:inline-block"],
td span[style*="display: inline-block"] {
    font-size: var(--fs-2xs) !important;
    line-height: 1.3 !important;
}
td div[style*="font-size"] {
    font-size: var(--fs-2xs) !important;
}

/* ── Avatar di analyst cell ── */
#leaderboard-table img[style*="width:28px"],
.table-modern img[style*="width:28px"] {
    width: 22px !important;
    height: 22px !important;
}

/* ── Score /1000 label ── */
.leaderboard-table td .text-muted.small,
.table-modern td .text-muted.small {
    font-size: var(--fs-2xs) !important;
}

/* ── Combinator lot table ── */
#combinator-results .table.table-sm,
#combinator-results .table.table-sm *,
#combinator-results .table.table-sm td,
#combinator-results .table.table-sm th {
    font-size: var(--fs-xs) !important;
}

/* ── Combinator correlation info & small text ── */
#combinator-results .small,
#combinator-results small {
    font-size: var(--fs-xs) !important;
}

/* ── Equity projection cards (saved combinator) ── */
.proj-card h4 { font-size: var(--fs-2xs) !important; }
.proj-row     { font-size: var(--fs-2xs) !important; }

/* ── Screener filter bar kompak ── */
.screener-filter .filter-body .form-label {
    font-size: var(--fs-2xs) !important;
    margin-bottom: 0.1rem !important;
}

/* =========================================================
   ADDED: 5 NEW COLOR THEMES (Teal, Emerald, Slate, Amber, Violet)
   ========================================================= */

/* --- TEAL THEME --- */
[data-theme="teal"] {
    --primary: #14b8a6;
    --primary-dark: #0f9488;
    --primary-light: #2dd4bf;
    --primary-50: #ecfdf9;
    --primary-100: #d1faf1;
    --primary-200: #a7f0e2;
    --primary-300: #6ee7d4;
    --primary-600: #0ea89a;
    --primary-700: #0d8d80;
    --primary-800: #0f766e;
    --primary-900: #115e59;

    --bg-body: #f3fbfa;
    --bg-card: #ffffff;
    --bg-nav: linear-gradient(135deg, #0f766e 0%, #14b8a6 60%, #2dd4bf 100%);

    --border-color: #dcf3ef;
    --shadow-card: 0 2px 10px rgba(20,184,166,0.05), 0 4px 20px rgba(20,184,166,0.04);
    --shadow-hover: 0 8px 28px rgba(20,184,166,0.12);
    --shadow-md: 0 4px 16px rgba(20,184,166,0.08);
    --shadow-xs: 0 1px 2px rgba(20,184,166,0.03);
    --shadow-sm: 0 2px 6px rgba(20,184,166,0.04);
    --shadow-lg: 0 12px 36px rgba(20,184,166,0.09);
}

[data-theme="teal"] .profile-header {
    background: linear-gradient(135deg, #115e59 0%, #14b8a6 55%, #2dd4bf 100%);
    box-shadow: 0 6px 24px rgba(15,118,110,0.3);
}

[data-theme="teal"] .login-page {
    background: linear-gradient(140deg, #0f766e 0%, #14b8a6 45%, #2dd4bf 90%, #6ee7d4 100%);
}

[data-theme="teal"] .navbar {
    box-shadow: 0 2px 16px rgba(15,118,110,0.25);
}

/* --- EMERALD THEME --- */
[data-theme="emerald"] {
    --primary: #10b981;
    --primary-dark: #059669;
    --primary-light: #34d399;
    --primary-50: #ecfdf5;
    --primary-100: #d1fae5;
    --primary-200: #a7f3d0;
    --primary-300: #6ee7b7;
    --primary-600: #0ea370;
    --primary-700: #047857;
    --primary-800: #065f46;
    --primary-900: #064e3b;

    --bg-body: #f1fbf6;
    --bg-card: #ffffff;
    --bg-nav: linear-gradient(135deg, #065f46 0%, #10b981 60%, #34d399 100%);

    --border-color: #d9f4e7;
    --shadow-card: 0 2px 10px rgba(16,185,129,0.05), 0 4px 20px rgba(16,185,129,0.04);
    --shadow-hover: 0 8px 28px rgba(16,185,129,0.12);
    --shadow-md: 0 4px 16px rgba(16,185,129,0.08);
    --shadow-xs: 0 1px 2px rgba(16,185,129,0.03);
    --shadow-sm: 0 2px 6px rgba(16,185,129,0.04);
    --shadow-lg: 0 12px 36px rgba(16,185,129,0.09);
}

[data-theme="emerald"] .profile-header {
    background: linear-gradient(135deg, #064e3b 0%, #10b981 55%, #34d399 100%);
    box-shadow: 0 6px 24px rgba(6,78,59,0.3);
}

[data-theme="emerald"] .login-page {
    background: linear-gradient(140deg, #065f46 0%, #10b981 45%, #34d399 90%, #6ee7b7 100%);
}

[data-theme="emerald"] .navbar {
    box-shadow: 0 2px 16px rgba(6,78,59,0.25);
}

/* --- SLATE THEME --- */
[data-theme="slate"] {
    --primary: #64748b;
    --primary-dark: #475569;
    --primary-light: #94a3b8;
    --primary-50: #f1f5f9;
    --primary-100: #e2e8f0;
    --primary-200: #cbd5e1;
    --primary-300: #94a3b8;
    --primary-600: #475569;
    --primary-700: #334155;
    --primary-800: #1e293b;
    --primary-900: #0f172a;

    --bg-body: #f1f5f9;
    --bg-card: #ffffff;
    --bg-nav: linear-gradient(135deg, #334155 0%, #475569 60%, #64748b 100%);

    --border-color: #e2e8f0;
    --shadow-card: 0 2px 10px rgba(71,85,105,0.05), 0 4px 20px rgba(71,85,105,0.04);
    --shadow-hover: 0 8px 28px rgba(71,85,105,0.12);
    --shadow-md: 0 4px 16px rgba(71,85,105,0.08);
    --shadow-xs: 0 1px 2px rgba(71,85,105,0.03);
    --shadow-sm: 0 2px 6px rgba(71,85,105,0.04);
    --shadow-lg: 0 12px 36px rgba(71,85,105,0.09);
}

[data-theme="slate"] .profile-header {
    background: linear-gradient(135deg, #1e293b 0%, #475569 55%, #64748b 100%);
    box-shadow: 0 6px 24px rgba(30,41,59,0.35);
}

[data-theme="slate"] .login-page {
    background: linear-gradient(140deg, #0f172a 0%, #334155 40%, #475569 75%, #64748b 100%);
}

[data-theme="slate"] .navbar {
    box-shadow: 0 2px 16px rgba(30,41,59,0.3);
}

/* --- AMBER THEME --- */
[data-theme="amber"] {
    --primary: #f59e0b;
    --primary-dark: #d97706;
    --primary-light: #fbbf24;
    --primary-50: #fffbeb;
    --primary-100: #fef3c7;
    --primary-200: #fde68a;
    --primary-300: #fcd34d;
    --primary-600: #d97706;
    --primary-700: #b45309;
    --primary-800: #92400e;
    --primary-900: #78350f;

    --bg-body: #fffbf1;
    --bg-card: #ffffff;
    --bg-nav: linear-gradient(135deg, #92400e 0%, #d97706 60%, #fbbf24 100%);

    --border-color: #f8ecce;
    --shadow-card: 0 2px 10px rgba(245,158,11,0.05), 0 4px 20px rgba(245,158,11,0.04);
    --shadow-hover: 0 8px 28px rgba(245,158,11,0.13);
    --shadow-md: 0 4px 16px rgba(245,158,11,0.09);
    --shadow-xs: 0 1px 2px rgba(245,158,11,0.03);
    --shadow-sm: 0 2px 6px rgba(245,158,11,0.04);
    --shadow-lg: 0 12px 36px rgba(245,158,11,0.1);
}

[data-theme="amber"] .profile-header {
    background: linear-gradient(135deg, #78350f 0%, #d97706 55%, #fbbf24 100%);
    box-shadow: 0 6px 24px rgba(146,64,14,0.3);
}

[data-theme="amber"] .login-page {
    background: linear-gradient(140deg, #78350f 0%, #92400e 30%, #d97706 70%, #fbbf24 100%);
}

[data-theme="amber"] .navbar {
    box-shadow: 0 2px 16px rgba(146,64,14,0.25);
}

/* --- VIOLET THEME --- */
[data-theme="violet"] {
    --primary: #8b5cf6;
    --primary-dark: #7c3aed;
    --primary-light: #a78bfa;
    --primary-50: #f5f3ff;
    --primary-100: #ede9fe;
    --primary-200: #ddd6fe;
    --primary-300: #c4b5fd;
    --primary-600: #7c3aed;
    --primary-700: #6d28d9;
    --primary-800: #5b21b6;
    --primary-900: #4c1d95;

    --bg-body: #f7f5ff;
    --bg-card: #ffffff;
    --bg-nav: linear-gradient(135deg, #4c1d95 0%, #7c3aed 60%, #a78bfa 100%);

    --border-color: #e8e3fc;
    --shadow-card: 0 2px 10px rgba(139,92,246,0.05), 0 4px 20px rgba(139,92,246,0.04);
    --shadow-hover: 0 8px 28px rgba(139,92,246,0.13);
    --shadow-md: 0 4px 16px rgba(139,92,246,0.09);
    --shadow-xs: 0 1px 2px rgba(139,92,246,0.03);
    --shadow-sm: 0 2px 6px rgba(139,92,246,0.04);
    --shadow-lg: 0 12px 36px rgba(139,92,246,0.1);
}

[data-theme="violet"] .profile-header {
    background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 55%, #a78bfa 100%);
    box-shadow: 0 6px 24px rgba(76,29,149,0.3);
}

[data-theme="violet"] .login-page {
    background: linear-gradient(140deg, #4c1d95 0%, #5b21b6 35%, #7c3aed 70%, #a78bfa 100%);
}

[data-theme="violet"] .navbar {
    box-shadow: 0 2px 16px rgba(76,29,149,0.25);
}

/* =========================================================
   ADDED: FONT FAMILY SELECTOR (data-font on <html>)
   ========================================================= */
[data-font="inter"] { --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
[data-font="plus-jakarta-sans"] { --font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif; }
[data-font="poppins"] { --font-family: 'Poppins', 'Inter', -apple-system, sans-serif; }
[data-font="roboto"] { --font-family: 'Roboto', 'Inter', -apple-system, sans-serif; }
[data-font="manrope"] { --font-family: 'Manrope', 'Inter', -apple-system, sans-serif; }
[data-font="space-grotesk"] { --font-family: 'Space Grotesk', 'Inter', -apple-system, sans-serif; }

/* =========================================================
   ADDED: FONT SIZE SCALE (data-fontsize on <html>)
   Overrides the unified --fs-* scale globally.
   ========================================================= */
[data-fontsize="small"] {
    --fs-2xs: 0.56rem;
    --fs-xs:  0.62rem;
    --fs-sm:  0.67rem;
    --fs-md:  0.72rem;
    --fs-base: 0.75rem;
    --fs-lg:  0.82rem;
    --fs-xl:  0.92rem;
}

[data-fontsize="large"] {
    --fs-2xs: 0.70rem;
    --fs-xs:  0.78rem;
    --fs-sm:  0.84rem;
    --fs-md:  0.90rem;
    --fs-base: 0.95rem;
    --fs-lg:  1.04rem;
    --fs-xl:  1.16rem;
}

/* =========================================================
   ADDED: SETTINGS PAGE - THEME / FONT / SIZE UI
   ========================================================= */
.theme-option,
.font-option,
.size-option {
    display: block;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 12px;
    cursor: pointer;
    transition: var(--transition);
    background: var(--bg-card);
    position: relative;
}

.theme-option:hover,
.font-option:hover,
.size-option:hover {
    border-color: var(--primary-300);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.theme-option.active,
.font-option.active,
.size-option.active {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-100), var(--shadow-md);
}

.theme-option input,
.font-option input,
.size-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.theme-label {
    font-weight: 700;
    color: var(--text-primary);
    font-size: var(--fs-md);
    margin-top: 8px;
}

.theme-desc {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    line-height: 1.3;
}

/* --- Theme preview (mini wireframe) --- */
.theme-preview {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    height: 78px;
    position: relative;
}

.theme-preview .tp-nav {
    height: 18px;
}

.theme-preview .tp-body {
    padding: 6px;
    display: flex;
    gap: 6px;
    height: calc(100% - 18px);
}

.theme-preview .tp-card {
    flex: 1;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.theme-preview-light .tp-nav   { background: linear-gradient(135deg, #3660b5, #4f8cf7); }
.theme-preview-light .tp-body  { background: #f6f9fe; }
.theme-preview-light .tp-card  { background: #ffffff; border: 1px solid #e8eff8; }
.theme-preview-light .tp-card:first-child { background: linear-gradient(135deg, #eef3fc, #dce7f9); }

.theme-preview-medium .tp-nav  { background: linear-gradient(135deg, #2d5ab8, #3b6fd6); }
.theme-preview-medium .tp-body { background: #f2f6fc; }
.theme-preview-medium .tp-card { background: #ffffff; border: 1px solid #e0eaf5; }
.theme-preview-medium .tp-card:first-child { background: linear-gradient(135deg, #eef3fc, #b8cff3); }

.theme-preview-dark .tp-nav    { background: linear-gradient(135deg, #0c265c, #1a4fb8); }
.theme-preview-dark .tp-body   { background: #f0f3fa; }
.theme-preview-dark .tp-card   { background: #ffffff; border: 1px solid #dce4f0; }
.theme-preview-dark .tp-card:first-child { background: linear-gradient(135deg, #ebeffe, #aec0f7); }

.theme-preview-teal .tp-nav    { background: linear-gradient(135deg, #0f766e, #14b8a6); }
.theme-preview-teal .tp-body   { background: #f3fbfa; }
.theme-preview-teal .tp-card   { background: #ffffff; border: 1px solid #dcf3ef; }
.theme-preview-teal .tp-card:first-child { background: linear-gradient(135deg, #ecfdf9, #6ee7d4); }

.theme-preview-emerald .tp-nav { background: linear-gradient(135deg, #065f46, #10b981); }
.theme-preview-emerald .tp-body { background: #f1fbf6; }
.theme-preview-emerald .tp-card { background: #ffffff; border: 1px solid #d9f4e7; }
.theme-preview-emerald .tp-card:first-child { background: linear-gradient(135deg, #ecfdf5, #6ee7b7); }

.theme-preview-slate .tp-nav   { background: linear-gradient(135deg, #334155, #64748b); }
.theme-preview-slate .tp-body  { background: #f1f5f9; }
.theme-preview-slate .tp-card  { background: #ffffff; border: 1px solid #e2e8f0; }
.theme-preview-slate .tp-card:first-child { background: linear-gradient(135deg, #f1f5f9, #94a3b8); }

.theme-preview-amber .tp-nav   { background: linear-gradient(135deg, #92400e, #f59e0b); }
.theme-preview-amber .tp-body  { background: #fffbf1; }
.theme-preview-amber .tp-card  { background: #ffffff; border: 1px solid #f8ecce; }
.theme-preview-amber .tp-card:first-child { background: linear-gradient(135deg, #fef3c7, #fcd34d); }

.theme-preview-violet .tp-nav  { background: linear-gradient(135deg, #4c1d95, #8b5cf6); }
.theme-preview-violet .tp-body { background: #f7f5ff; }
.theme-preview-violet .tp-card { background: #ffffff; border: 1px solid #e8e3fc; }
.theme-preview-violet .tp-card:first-child { background: linear-gradient(135deg, #ede9fe, #c4b5fd); }

/* --- Font sample preview --- */
.font-option {
    text-align: center;
}

.font-sample {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    background: var(--primary-50);
    border-radius: 10px;
}

/* --- Size sample preview --- */
.size-option {
    text-align: center;
}

.size-sample {
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-50);
    border-radius: 10px;
    color: var(--primary);
    font-weight: 700;
    font-family: var(--font-family);
}

.size-sample span { font-size: 1.4rem; }
.size-sample.sz-small span { font-size: 1rem; }
.size-sample.sz-large span { font-size: 2rem; }


/* =========================================================
   ADDED: LOGIN / REGISTER FORM - ikut tema (--primary & borders)
   ========================================================= */
.login-card .form-label {
    color: var(--text-primary);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.login-card .input-group-text {
    background: var(--primary-50);
    color: var(--primary);
    border-color: var(--border-color);
}

.login-card .form-control {
    border-color: var(--border-color);
    background: #fff;
    color: var(--text-primary);
    font-size: var(--fs-sm);
}

.login-card .form-control::placeholder {
    color: var(--text-muted);
}

.login-card .form-control:focus,
.login-card .input-group:focus-within .input-group-text {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem var(--primary-100);
    color: var(--text-primary);
}

.login-card .login-brand h2 {
    color: var(--primary-800);
}

.login-card .login-brand .login-subtitle {
    color: var(--text-secondary);
}


/* =========================================================
   ADDED: KONTRAS TEMA BIRU (light/medium/dark)
   - font BIRU TUA (--primary-800) pada latar putih/terang
   - font PUTIH pada latar biru (solid/gradient primary)
   ========================================================= */
:root h1, :root h2, :root h3, :root h4, :root h5, :root h6,
[data-theme="medium"] h1, [data-theme="medium"] h2, [data-theme="medium"] h3,
[data-theme="medium"] h4, [data-theme="medium"] h5, [data-theme="medium"] h6,
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6,
:root .card-title, [data-theme="medium"] .card-title, [data-theme="dark"] .card-title {
    color: var(--primary-800) !important;
}

/* Jaga heading di dalam latar BIRU tetap putih */
:root .navbar h1, :root .navbar h2, :root .navbar h3,
:root .navbar h4, :root .navbar h5, :root .navbar h6,
:root .profile-header h1, :root .profile-header h2, :root .profile-header h3,
:root .profile-header h4, :root .profile-header h5, :root .profile-header h6,
:root .login-page h1, :root .login-page h2, :root .login-page h3,
:root .login-page h4, :root .login-page h5, :root .login-page h6,
[data-theme="medium"] .navbar h1, [data-theme="medium"] .navbar h2,
[data-theme="medium"] .navbar h3, [data-theme="medium"] .navbar h4,
[data-theme="medium"] .navbar h5, [data-theme="medium"] .navbar h6,
[data-theme="medium"] .profile-header h1, [data-theme="medium"] .profile-header h2,
[data-theme="medium"] .profile-header h3, [data-theme="medium"] .profile-header h4,
[data-theme="medium"] .profile-header h5, [data-theme="medium"] .profile-header h6,
[data-theme="medium"] .login-page h1, [data-theme="medium"] .login-page h2,
[data-theme="medium"] .login-page h3, [data-theme="medium"] .login-page h4,
[data-theme="medium"] .login-page h5, [data-theme="medium"] .login-page h6,
[data-theme="dark"] .navbar h1, [data-theme="dark"] .navbar h2,
[data-theme="dark"] .navbar h3, [data-theme="dark"] .navbar h4,
[data-theme="dark"] .navbar h5, [data-theme="dark"] .navbar h6,
[data-theme="dark"] .profile-header h1, [data-theme="dark"] .profile-header h2,
[data-theme="dark"] .profile-header h3, [data-theme="dark"] .profile-header h4,
[data-theme="dark"] .profile-header h5, [data-theme="dark"] .profile-header h6,
[data-theme="dark"] .login-page h1, [data-theme="dark"] .login-page h2,
[data-theme="dark"] .login-page h3, [data-theme="dark"] .login-page h4,
[data-theme="dark"] .login-page h5, [data-theme="dark"] .login-page h6 {
    color: #ffffff !important;
}

/* Button: biru tua pada latar putih */
:root .btn-outline-primary,
[data-theme="medium"] .btn-outline-primary,
[data-theme="dark"] .btn-outline-primary,
:root .btn-outline-secondary,
[data-theme="medium"] .btn-outline-secondary,
[data-theme="dark"] .btn-outline-secondary,
:root .btn-outline-secondary:hover,
[data-theme="medium"] .btn-outline-secondary:hover,
[data-theme="dark"] .btn-outline-secondary:hover {
    color: var(--primary-800) !important;
}

/* Button: putih pada latar biru (primary solid/gradient) */
:root .btn-primary, :root .btn-primary:hover,
[data-theme="medium"] .btn-primary, [data-theme="medium"] .btn-primary:hover,
[data-theme="dark"] .btn-primary, [data-theme="dark"] .btn-primary:hover,
:root .btn-outline-primary:hover,
[data-theme="medium"] .btn-outline-primary:hover,
[data-theme="dark"] .btn-outline-primary:hover {
    color: #ffffff !important;
    -webkit-text-fill-color: unset !important;
}

/* Teks putih pada latar primary solid (bukan -subtle) */
:root .bg-primary, :root .bg-primary *,
[data-theme="medium"] .bg-primary, [data-theme="medium"] .bg-primary *,
[data-theme="dark"] .bg-primary, [data-theme="dark"] .bg-primary * {
    color: #ffffff !important;
    -webkit-text-fill-color: unset !important;
}