/* Base Body & Layout */
html,
body,
body.skin-default,
body.skin-default-dark,
#main-wrapper,
.page-wrapper,
.container-fluid {
    background-color: #F8FAFC !important;
    background: #F8FAFC !important;
    color: #0F172A !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Instant Preloader Dismiss */
.preloader {
    display: none !important;
}

/* Header Topbar - Sleek Black Override */
html body .topbar {
    background: #0F172A !important;
    border-bottom: 1px solid #1E293B !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
}

html body .topbar .navbar-header {
    background: #0B0F19 !important;
    border-right: 1px solid #1E293B !important;
}

html body .topbar .nav-link,
html body .topbar .dropdown-toggle,
html body .topbar i,
html body .topbar a,
html body .topbar span {
    color: #F8FAFC !important;
}

/* ALWAYS PURE WHITE TI-MENU & TI-CLOSE HAMBURGER ICONS (PREVENT COLOR CHANGE ON CLICK) */
html body .topbar .nav-toggler,
html body .topbar .nav-toggler:hover,
html body .topbar .nav-toggler:focus,
html body .topbar .nav-toggler:active,
html body .topbar .nav-toggler i,
html body .topbar .nav-toggler i:hover,
html body .topbar .nav-toggler i:focus,
html body .topbar .nav-toggler i:active,
html body .topbar .ti-menu,
html body .topbar .ti-menu:hover,
html body .topbar .ti-menu:focus,
html body .topbar .ti-menu:active,
html body .topbar .ti-menu::before,
html body .topbar .ti-close,
html body .topbar .ti-close:hover,
html body .topbar .ti-close:focus,
html body .topbar .ti-close:active,
html body .topbar .ti-close::before,
html body .left-sidebar .nav-toggler,
html body .left-sidebar .nav-toggler:hover,
html body .left-sidebar .nav-toggler i,
html body .left-sidebar .nav-toggler i:hover,
html body .left-sidebar .ti-menu,
html body .left-sidebar .ti-menu:hover,
html body .left-sidebar .ti-close,
html body .left-sidebar .ti-close:hover {
    color: #FFFFFF !important;
    font-size: 1.35rem !important;
    opacity: 1 !important;
    visibility: visible !important;
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
    text-shadow: none !important;
    background: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

/* Ensure navbar flex layout keeps toggler visible on all screens */
html body .topbar .navbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 15px !important;
    height: 60px !important;
}

/* Override Waves.js dark ripple background on toggler */
html body .nav-toggler .waves-ripple {
    background: rgba(255, 255, 255, 0.3) !important;
}

/* Left Sidebar Navigation */
html body .left-sidebar {
    background: #FFFFFF !important;
    border-right: 1px solid #E2E8F0 !important;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.03) !important;
}

html body .scroll-sidebar {
    background: #FFFFFF !important;
}

html body .sidebar-nav {
    background: #FFFFFF !important;
    padding: 12px 10px !important;
}

html body .sidebar-nav ul li a {
    color: #64748B !important;
    background: transparent !important;
    border-radius: 10px !important;
    margin-bottom: 4px !important;
    padding: 10px 14px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    transition: all 0.2s ease !important;
}

html body .sidebar-nav ul li a:hover,
html body .sidebar-nav ul li.active > a,
html body .sidebar-nav ul li a.active {
    background: #ECFDF5 !important;
    color: #059669 !important;
    box-shadow: inset 4px 0 0 #059669 !important;
}

html body .sidebar-nav ul li a i {
    color: #64748B !important;
    margin-right: 10px !important;
}

html body .sidebar-nav ul li a:hover i,
html body .sidebar-nav ul li.active > a i,
html body .sidebar-nav ul li a.active i {
    color: #059669 !important;
}

/* Breadcrumb & Page Titles */
html body .page-titles {
    background: transparent !important;
    padding: 10px 0 20px 0 !important;
    margin-bottom: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

html body .page-titles h4,
html body .page-titles h3,
html body .page-titles h2 {
    color: #0F172A !important;
    font-weight: 800 !important;
    font-size: 1.4rem !important;
}

html body .breadcrumb-item.active {
    color: #059669 !important;
    font-weight: 600 !important;
}

html body .breadcrumb-item a {
    color: #64748B !important;
}

/* Base Cards & Box Containers */
html body .card,
html body .summary-card {
    border-radius: 16px !important;
    box-shadow: 0 6px 16px -2px rgba(0, 0, 0, 0.05), 0 2px 6px -1px rgba(0, 0, 0, 0.03) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
    margin-bottom: 20px !important;
}

html body .card:hover,
html body .summary-card:hover {
    transform: none !important;
    box-shadow: 0 10px 20px -2px rgba(0, 0, 0, 0.08) !important;
}

/* Strict Modal Stability (Prevent Flickering / Hilang Timbul) */
html body .modal,
html body .modal-dialog,
html body .modal-content {
    transform: none !important;
}

html body .modal-content {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 18px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2) !important;
    color: #0F172A !important;
}

html body .card-body {
    padding: 20px !important;
    border-radius: 16px !important;
}

html body .card-title,
html body .card-subtitle {
    color: #0F172A !important;
    font-weight: 700 !important;
}

/* Dynamic Colorful Themes for Box Containers */
/* 1. Emerald Green Box */
html body .card:nth-child(6n+1),
html body .summary-card:nth-child(6n+1),
html body .row > div:nth-child(6n+1) > .card,
html body .row > div:nth-child(6n+1) > .summary-card,
html body #summary-cards > div:nth-child(6n+1) .summary-card {
    background: linear-gradient(135deg, #ECFDF5 0%, #FFFFFF 75%) !important;
    border: 1px solid #A7F3D0 !important;
    border-top: 4px solid #10B981 !important;
}

/* 2. Royal Blue Box */
html body .card:nth-child(6n+2),
html body .summary-card:nth-child(6n+2),
html body .row > div:nth-child(6n+2) > .card,
html body .row > div:nth-child(6n+2) > .summary-card,
html body #summary-cards > div:nth-child(6n+2) .summary-card {
    background: linear-gradient(135deg, #EFF6FF 0%, #FFFFFF 75%) !important;
    border: 1px solid #BFDBFE !important;
    border-top: 4px solid #3B82F6 !important;
}

/* 3. Amber Gold Box */
html body .card:nth-child(6n+3),
html body .summary-card:nth-child(6n+3),
html body .row > div:nth-child(6n+3) > .card,
html body .row > div:nth-child(6n+3) > .summary-card,
html body #summary-cards > div:nth-child(6n+3) .summary-card {
    background: linear-gradient(135deg, #FEF3C7 0%, #FFFFFF 75%) !important;
    border: 1px solid #FDE68A !important;
    border-top: 4px solid #F59E0B !important;
}

/* 4. Purple Violet Box */
html body .card:nth-child(6n+4),
html body .summary-card:nth-child(6n+4),
html body .row > div:nth-child(6n+4) > .card,
html body .row > div:nth-child(6n+4) > .summary-card,
html body #summary-cards > div:nth-child(6n+4) .summary-card {
    background: linear-gradient(135deg, #F3E8FF 0%, #FFFFFF 75%) !important;
    border: 1px solid #DDD6FE !important;
    border-top: 4px solid #8B5CF6 !important;
}

/* 5. Cyan Teal Box */
html body .card:nth-child(6n+5),
html body .summary-card:nth-child(6n+5),
html body .row > div:nth-child(6n+5) > .card,
html body .row > div:nth-child(6n+5) > .summary-card,
html body #summary-cards > div:nth-child(6n+5) .summary-card {
    background: linear-gradient(135deg, #ECFEFF 0%, #FFFFFF 75%) !important;
    border: 1px solid #A5F3FC !important;
    border-top: 4px solid #06B6D4 !important;
}

/* 6. Rose Pink Box */
html body .card:nth-child(6n+0),
html body .summary-card:nth-child(6n+0),
html body .row > div:nth-child(6n+0) > .card,
html body .row > div:nth-child(6n+0) > .summary-card,
html body #summary-cards > div:nth-child(6n+0) .summary-card {
    background: linear-gradient(135deg, #FFE4E6 0%, #FFFFFF 75%) !important;
    border: 1px solid #FECDD3 !important;
    border-top: 4px solid #F43F5E !important;
}

/* Summary Card Values & Labels (Support both .summary-label / .summary-value & .card-label / .card-value) */
html body .summary-card .summary-value,
html body .summary-card .card-value {
    color: #0F172A !important;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}

html body .summary-card .summary-label,
html body .summary-card .card-label {
    color: #475569 !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    opacity: 1 !important;
}

/* Foreign Flow Page Dedicated Card Badges */
html body .summary-card.card-buy {
    background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%) !important;
    border: 1px solid #A7F3D0 !important;
    border-top: 4px solid #10B981 !important;
}
html body .summary-card.card-buy .card-label { color: #047857 !important; }
html body .summary-card.card-buy .card-value { color: #065F46 !important; }

html body .summary-card.card-sell {
    background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%) !important;
    border: 1px solid #FECACA !important;
    border-top: 4px solid #EF4444 !important;
}
html body .summary-card.card-sell .card-label { color: #B91C1C !important; }
html body .summary-card.card-sell .card-value { color: #991B1B !important; }

html body .summary-card.card-net-positive {
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%) !important;
    border: 1px solid #BFDBFE !important;
    border-top: 4px solid #3B82F6 !important;
}
html body .summary-card.card-net-positive .card-label { color: #1D4ED8 !important; }
html body .summary-card.card-net-positive .card-value { color: #1E40AF !important; }

html body .summary-card.card-net-negative {
    background: linear-gradient(135deg, #FFF1F2 0%, #FFE4E6 100%) !important;
    border: 1px solid #FECDD3 !important;
    border-top: 4px solid #F43F5E !important;
}
html body .summary-card.card-net-negative .card-label { color: #BE123C !important; }
html body .summary-card.card-net-negative .card-value { color: #9F1239 !important; }

/* DevExtreme DataGrid Styling */
.dx-datagrid-filter-row,
tr.dx-filter-row {
    display: none !important;
    height: 0 !important;
    visibility: hidden !important;
}

html body #screenerGrid,
html body #portfolioGrid,
html body #transactionGrid,
html body #watchlistGrid,
html body .dx-datagrid {
    border: 1px solid #E2E8F0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #FFFFFF !important;
    color: #0F172A !important;
    padding: 0 !important;
    margin: 0 !important;
}

html body .dx-datagrid-headers {
    background: #F1F5F9 !important;
    border-bottom: 1px solid #E2E8F0 !important;
}

html body .dx-datagrid-headers .dx-header-row > td {
    color: #0F172A !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    padding: 12px 14px !important;
    white-space: nowrap !important;
    background: #F1F5F9 !important;
}

html body .dx-datagrid-rowsview .dx-data-row > td {
    color: #0F172A !important;
    font-size: 0.85rem !important;
    padding: 10px 14px !important;
    white-space: nowrap !important;
    border-bottom: 1px solid #F1F5F9 !important;
}

html body .dx-datagrid-rowsview .dx-row-alt > td {
    background-color: #F8FAFC !important;
}

/* Modals Light Styling */
html body .modal-content {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 18px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
    color: #0F172A !important;
}

html body .modal-header {
    border-bottom: 1px solid #E2E8F0 !important;
    padding: 18px 24px !important;
    background: #F8FAFC !important;
    border-radius: 18px 18px 0 0 !important;
}

html body .modal-title {
    color: #0F172A !important;
    font-weight: 800 !important;
}

html body .modal-body {
    padding: 20px 24px !important;
    background: #FFFFFF !important;
}

html body .modal-footer {
    border-top: 1px solid #E2E8F0 !important;
    background: #F8FAFC !important;
}

/* Inputs & Form Controls */
html body .form-control {
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 8px !important;
    color: #0F172A !important;
    padding: 9px 12px !important;
    font-size: 0.9rem !important;
}

html body .form-control:focus {
    border-color: #059669 !important;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15) !important;
}

/* ============================================================
   UNIFIED BUTTON DESIGN SYSTEM (Standardized Shapes & Sizes)
   ============================================================ */

/* 1. Base Button Standard */
html body .btn,
html body button,
html body input[type="button"],
html body input[type="submit"] {
    border-radius: 8px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    min-height: 38px !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
    vertical-align: middle !important;
}

html body .btn:hover,
html body button:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

html body .btn:active,
html body button:active {
    transform: translateY(1px) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

/* 2. Small Buttons (.btn-sm & Table Action Buttons) */
html body .btn-sm,
html body .btn-xs,
html body .table .btn {
    border-radius: 6px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    padding: 5px 12px !important;
    min-height: 30px !important;
    height: 30px !important;
}

/* 3. Primary Buttons (Green Emerald) */
html body .btn-primary,
html body .btn-success {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    border: none !important;
    color: #FFFFFF !important;
}

html body .btn-primary:hover,
html body .btn-success:hover {
    background: linear-gradient(135deg, #047857 0%, #065F46 100%) !important;
    color: #FFFFFF !important;
}

/* 4. Danger Buttons (Ruby Red) */
html body .btn-danger {
    background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%) !important;
    border: none !important;
    color: #FFFFFF !important;
}

html body .btn-danger:hover {
    background: linear-gradient(135deg, #B91C1C 0%, #991B1B 100%) !important;
    color: #FFFFFF !important;
}

/* 5. Info / Action Buttons (Royal Blue) */
html body .btn-info {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
    border: none !important;
    color: #FFFFFF !important;
}

/* 6. Secondary / Outline Buttons (Clean Slate) */
html body .btn-secondary,
html body .btn-outline-secondary,
html body .btn-default {
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    color: #334155 !important;
}

html body .btn-secondary:hover,
html body .btn-outline-secondary:hover,
html body .btn-default:hover {
    background: #F1F5F9 !important;
    border-color: #94A3B8 !important;
    color: #0F172A !important;
}

/* 7. Quick Filter Buttons (#quickFilters .btn) */
html body #quickFilters .btn {
    border-radius: 8px !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 6px 14px !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    color: #475569 !important;
    margin: 3px 4px 3px 0 !important;
}

html body #quickFilters .btn:hover {
    background: #F1F5F9 !important;
    color: #0F172A !important;
    border-color: #94A3B8 !important;
}

html body #quickFilters .btn.active {
    background: #059669 !important;
    border-color: #059669 !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 10px rgba(5, 150, 105, 0.3) !important;
}

/* Badges & Text Formatting */
html body .up, html body .foreign-positive {
    color: #059669 !important;
    font-weight: 700 !important;
}

html body .down, html body .foreign-negative {
    color: #DC2626 !important;
    font-weight: 700 !important;
}

html body .signal-bull {
    background: #ECFDF5 !important;
    color: #047857 !important;
    border: 1px solid #A7F3D0 !important;
    border-radius: 6px !important;
    padding: 2px 8px !important;
    font-weight: 700 !important;
}

html body .signal-bear {
    background: #FEF2F2 !important;
    color: #B91C1C !important;
    border: 1px solid #FECACA !important;
    border-radius: 6px !important;
    padding: 2px 8px !important;
    font-weight: 700 !important;
}

/* ============================================================
   RESPONSIVE LAYOUT & SIDEBAR / TOPBAR / FOOTER ARCHITECTURE
   ============================================================ */

/* Footer Standard Base */
html body .footer {
    background: #FFFFFF !important;
    color: #64748B !important;
    border-top: 1px solid #E2E8F0 !important;
    padding: 15px 20px !important;
    position: relative !important;
    z-index: 90 !important;
}

@media (max-width: 1023.98px) {
    /* 1. Reset Page Wrapper Margin on Mobile to prevent Sidebar Overlap */
    html body .page-wrapper {
        margin-left: 0 !important;
        padding-left: 0 !important;
        padding-top: 60px !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    html body .container-fluid {
        padding: 15px !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 2. Full Height (100vh) Left Sidebar Drawer on Mobile - Hidden by Default */
    html body .left-sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: -320px !important;
        width: 280px !important;
        height: 100vh !important;
        max-height: 100vh !important;
        z-index: 1060 !important;
        background: #FFFFFF !important;
        box-shadow: 4px 0 30px rgba(0, 0, 0, 0.4) !important;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        overflow-y: auto !important;
        display: block !important;
        visibility: visible !important;
    }

    /* 3. Slide Out Sidebar when show-sidebar class is active */
    html body.show-sidebar .left-sidebar,
    html body .left-sidebar.show-sidebar {
        left: 0 !important;
        transform: translateX(0) !important;
        visibility: visible !important;
        display: block !important;
    }

    /* 4. Dedicated Backdrop Blur Overlay when Sidebar is Open */
    .sidebar-overlay {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(15, 23, 42, 0.65) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        z-index: 1055 !important;
        cursor: pointer !important;
    }

    html body.show-sidebar .sidebar-overlay {
        display: block !important;
    }

    /* 5. Topbar Header Mobile Styling */
    html body .topbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1040 !important;
        height: 60px !important;
    }

    html body .topbar .navbar-header {
        width: auto !important;
        float: left !important;
        background: transparent !important;
        border: none !important;
    }

    html body .footer {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* Ensure hamburger nav toggler is prominent and crisp white */
    html body .topbar .nav-toggler,
    html body .topbar .nav-toggler i,
    html body .topbar .ti-menu,
    html body .left-sidebar .nav-toggler,
    html body .left-sidebar .nav-toggler i {
        color: #FFFFFF !important;
        font-size: 1.3rem !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
    }
}

@media (min-width: 1024px) {
    /* Desktop: Left Sidebar Spans 100vh from top: 0 to bottom: 0 */
    html body .left-sidebar {
        left: 0 !important;
        width: 220px !important;
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        z-index: 1050 !important;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* Desktop: Topbar starts to the right of the sidebar (left: 220px) */
    html body .topbar {
        position: fixed !important;
        top: 0 !important;
        left: 220px !important;
        right: 0 !important;
        z-index: 1040 !important;
        height: 60px !important;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* Desktop: Page wrapper & Footer start at left: 220px */
    html body .page-wrapper {
        margin-left: 220px !important;
        width: calc(100% - 220px) !important;
        padding-top: 60px !important;
        min-height: 100vh !important;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    html body .footer {
        margin-left: 220px !important;
        width: calc(100% - 220px) !important;
        position: relative !important;
        z-index: 90 !important;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* Desktop Mini-Sidebar State (body.mini-sidebar) */
    html body.mini-sidebar .left-sidebar {
        width: 70px !important;
        left: 0 !important;
    }

    html body.mini-sidebar .left-sidebar .hide-menu {
        display: none !important;
    }

    html body.mini-sidebar .left-sidebar .nav-text-box span {
        display: none !important;
    }

    html body.mini-sidebar .left-sidebar .sidebar-nav ul li a {
        text-align: center !important;
        padding: 12px 0 !important;
    }

    html body.mini-sidebar .left-sidebar .sidebar-nav ul li a i {
        margin-right: 0 !important;
        font-size: 1.25rem !important;
    }

    html body.mini-sidebar .topbar {
        left: 70px !important;
        width: calc(100% - 70px) !important;
    }

    html body.mini-sidebar .page-wrapper {
        margin-left: 70px !important;
        width: calc(100% - 70px) !important;
    }

    html body.mini-sidebar .footer {
        margin-left: 70px !important;
        width: calc(100% - 70px) !important;
    }
}