/* Custom Stylesheet - Website Simulasi Investasi Emas */

/* Import Outfit or Inter Font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

body {
    font-family: 'Outfit', sans-serif;
    background: #0f172a; /* Slate 900 */
    color: #f8fafc; /* Slate 50 */
    min-height: 100vh;
}

/* Glassmorphism Card Style */
.glass-card {
    background: rgba(30, 41, 59, 0.7); /* Slate 800 with opacity */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Golden Accent Glow */
.gold-glow {
    text-shadow: 0 0 15px rgba(234, 179, 8, 0.3);
}

/* Custom Range Slider Styling */
input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    background: #334155; /* Slate 700 */
    border-radius: 9999px;
    outline: none;
    transition: background 0.3s;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #eab308; /* Yellow 500 (Gold) */
    cursor: pointer;
    box-shadow: 0 0 10px rgba(234, 179, 8, 0.5);
    transition: transform 0.1s, background-color 0.2s;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    background: #facc15; /* Yellow 400 */
}

input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 50%;
    background: #eab308;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(234, 179, 8, 0.5);
    transition: transform 0.1s, background-color 0.2s;
}

input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.2);
    background: #facc15;
}

/* Custom styling for standard input fields */
.input-field {
    background-color: #1e293b; /* Slate 800 */
    border: 1px solid #475569; /* Slate 600 */
    color: #ffffff;
    transition: all 0.3s ease;
}

.input-field:focus {
    border-color: #eab308; /* Gold border on focus */
    box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.25);
    outline: none;
}

/* Micro-animations */
.hover-scale {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-scale:hover {
    transform: translateY(-2px);
}

/* Custom Scrollbar for Simulation History */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #0f172a;
}
::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* Price Source Card Hover & Interactive Effects */
.price-source-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    text-decoration: none !important;
}

.price-source-card:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: rgba(234, 179, 8, 0.5) !important; /* Premium Gold Border Glow */
    box-shadow: 0 12px 20px -8px rgba(234, 179, 8, 0.3), 
                0 4px 12px -2px rgba(234, 179, 8, 0.15);
}

/* Mobile Responsive & PC Layout Transitions Optimization */
.glass-card, main {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* HP Mode Optimization (max-width: 767px) */
@media (max-width: 767px) {
    /* Optimize history table: prevent squishing, force clean horizontal scroll */
    .overflow-x-auto table {
        min-width: 1300px;
    }

    /* Reduce main container outer padding to 15px */
    main {
        padding: 15px !important;
    }
    
    /* Reduce card padding to 15px */
    .glass-card {
        padding: 15px !important;
    }

    /* Increase vertical padding inside Parameter Simulasi card on mobile */
    section.lg\:col-span-7 > .glass-card {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* Increase base font size for input labels and calculation results */
    label, .text-\[10px\], .text-\[9px\] {
        font-size: 0.75rem !important; /* ~12px (text-xs) */
        line-height: 1rem !important;
    }

    /* Result values sizing on mobile */
    #output_total_beli, #output_harga_jual, #output_margin_kotor, #output_potongan_operasional {
        font-size: 1.5rem !important; /* ~24px */
        line-height: 2rem !important;
    }
    
    #output_margin_bersih {
        font-size: 2rem !important; /* ~32px */
        line-height: 2.5rem !important;
    }

    /* Scaling down Heading Font Sizes on HP Mode */
    h1, .text-3xl {
        font-size: 1.5rem !important; /* ~24px */
        line-height: 2rem !important;
    }
    h2, .text-2xl {
        font-size: 1.25rem !important; /* ~20px */
        line-height: 1.75rem !important;
    }
    h3, .text-xl {
        font-size: 1.125rem !important; /* ~18px */
        line-height: 1.5rem !important;
    }
    
    /* Ensure minimum touch target height is at least 44px */
    .input-field, select, button, .opex-detail-input, #btn_simpan, #btn_batal_edit, .btn-action, #hamburger-btn, #close-sidebar, a[href*="logout"], a[href*="export_excel"] {
        min-height: 44px !important;
    }
    
    input[type="date"], input[type="text"], input[type="number"], select {
        height: 44px !important;
    }
}


/* Opex Accordion Dropdown Content & Transitions */
.opex-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
}

.opex-accordion-content.show {
    max-height: 500px; /* Adjust as needed to contain the opex fields */
    opacity: 1;
    pointer-events: auto;
}

/* GIMMICK SPEEDOMETER GAUGE */
.gauge-arc {
    width: 12rem; /* 192px */
    height: 12rem; /* 192px */
    border-radius: 50%;
    background: conic-gradient(
        from 270deg,
        #f43f5e 0deg 27deg,      /* Rugi/Tipis (0-15%): 27deg */
        #38bdf8 27deg 90deg,     /* Moderat (16-50%): 63deg (total 90deg) */
        #10b981 90deg 180deg,    /* Aman (51-100%): 90deg (total 180deg) */
        transparent 180deg 360deg
    );
    mask: radial-gradient(circle, transparent 65%, #000 66%);
    -webkit-mask: radial-gradient(circle, transparent 65%, #000 66%);
}

#gauge_needle {
    bottom: 0;
    left: calc(50% - 3px);
    transform-origin: 50% 100%;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* GOLD RAIN EFFECT ANIMATION */
@keyframes gold-fall {
    0% {
        transform: translateY(-50px) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(105vh) rotate(360deg);
        opacity: 0;
    }
}

.animate-gold-fall {
    animation: gold-fall 3s linear forwards;
}

/* NATIVE APP MOBILE STYLING GIMMICKS */

/* 1. Disable text selection on static content, keep text selection for form inputs */
body, header, main, section, div, span, h1, h2, h3, h4, p, label, table, th, td {
    user-select: none;
    -webkit-user-select: none;
}

input, textarea, select, [contenteditable="true"] {
    user-select: text !important;
    -webkit-user-select: text !important;
}

/* Remove tap highlight globally */
* {
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
}

/* Hide scrollbars visually but retain scrollable functionality */
::-webkit-scrollbar {
    display: none !important;
}
* {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

/* 2. Optimasi Touch Targets & Rounded Corners (App-like Feel) */
.input-field, select, button, .opex-detail-input, #btn_simpan, #btn_batal_edit {
    min-height: 48px;
    border-radius: 16px !important;
}

.glass-card {
    border-radius: 24px !important;
}

/* 3. Sticky Bottom Action Buttons on Mobile (< 768px) */
@media (max-width: 768px) {
    #form-actions-container {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 50;
        background: rgba(15, 23, 42, 0.7) !important; /* Translucent slate-900 background matching the theme */
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding: 1rem 1.25rem 1.25rem 1.25rem !important;
        margin: 0 !important;
        border-radius: 24px 24px 0 0 !important; /* App-like bottom bar border radius */
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
    }
    
    /* Ensure content is not cut off at the bottom because of fixed bottom bar */
    main {
        padding-bottom: 9rem !important;
    }
}

/* 4. Custom Horizontal Scrollbar for Table Wrapper to force display and style it */
.custom-scrollbar {
    overflow-x: auto !important;
    scrollbar-width: thin !important; /* Restore scrollbar for Firefox */
    -ms-overflow-style: auto !important; /* Restore scrollbar for Edge */
}

.custom-scrollbar::-webkit-scrollbar {
    display: block !important;
    height: 8px !important;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #0f172a !important; /* Slate 900 */
    border-radius: 9999px !important;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #334155 !important; /* Slate 700 */
    border-radius: 9999px !important;
    border: 2px solid #0f172a !important;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #475569 !important; /* Slate 600 */
}