/* Reset Bootstrap defaults */
* {
    box-sizing: border-box;
}

/* Base styles for full viewport */
body, html {
    margin: 0 !important;
    padding: 0 !important;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    position: fixed;
    width: 100%;
    transition: background 0.3s;
    font-family: 'Poppins', 'Segoe UI', 'Roboto', Arial, sans-serif !important;
    font-weight: 500 !important;
    /* Override Bootstrap defaults */
    line-height: 1.5;
}

/* Override Bootstrap defaults */
.container, .container-fluid {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
}

.row {
    margin: 1rem 0 0 !important;
}

.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    padding: 0.25rem !important;
}

/* Override Bootstrap card defaults */
.card {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.card-header {
    margin: 0 !important;
    padding: 0.75rem 1rem !important;
    border: none !important;
    background: transparent !important;
}

.card-body {
    margin: 0 !important;
    padding: 0.75rem !important;
    border: none !important;
    background: transparent !important;
}

.card-footer {
    margin: 0 !important;
    padding: 0.75rem 1rem !important;
    border: none !important;
    background: transparent !important;
}

/* Neumorphism Light */
.bg-neu-light {
    background: #e0e5ec !important;
}

/* Fullscreen Calculator Container */
.calculator-container {
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for mobile */
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
}

.neu-card-fullscreen {
    flex: 1;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

.neu-card-fullscreen .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 1rem !important;
    margin: 0 !important;
    min-height: 0; /* Allow flex shrinking */
    overflow-y: auto;
    border-radius: 0 !important;
    border: none !important;
}

.neu-card-fullscreen .card-header {
    border-radius: 0 !important;
    margin: 0 !important;
    flex-shrink: 0; /* Prevent header from shrinking */
}

/* Button container yang selalu di bawah */
.button-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #e0e5ec;
    padding: 0.5rem;
    z-index: 1000;
}

.bg-neu-dark .button-container {
    background: #23272e;
}

/* Mobile specific fixes */
@media (max-width: 767px) {
    body, html {
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
        position: fixed;
        width: 100%;
    }
    
    .calculator-container {
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        padding: 0;
    }
    
    .neu-card-fullscreen {
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .neu-card-fullscreen .card-header,
    .card.neu-card.neu-card-fullscreen .card-header {
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0.75rem 1rem !important;
        flex-shrink: 0;
    }
    
    .neu-card-fullscreen .card-body,
    .card.neu-card.neu-card-fullscreen .card-body {
        flex: 1;
        overflow-y: auto;
        padding: 0.75rem !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding-bottom: 150px !important; /* Memberikan ruang untuk button container */
    }
    
    /* Ensure full screen coverage */
    .neu-card-fullscreen .card-footer {
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0.75rem 1rem !important;
    }
    
    /* Force remove all border radius in mobile */
    .neu-card-fullscreen * {
        border-radius: 0 !important;
    }
    
    /* Override Bootstrap border radius */
    .neu-card-fullscreen .card {
        border-radius: 0 !important;
    }
    
    .neu-card-fullscreen .card-header {
        border-radius: 0 !important;
    }
    
    .neu-card-fullscreen .card-body {
        border-radius: 0 !important;
    }
    
    .neu-card-fullscreen .card-footer {
        border-radius: 0 !important;
    }
    
    /* Specific overrides for neumorphism elements */
    .neu-card-fullscreen .neu-card {
        border-radius: 0 !important;
    }
    
    .neu-card-fullscreen .neu-card-header {
        border-radius: 0 !important;
    }
    
    .neu-card-fullscreen .neu-display {
        border-radius: 8px !important;
    }
    
    .neu-card-fullscreen .neu-input {
        border-radius: 8px !important;
    }
    
    .neu-card-fullscreen .neu-btn {
        border-radius: 8px !important;
    }
    
    /* Override Bootstrap form controls */
    .neu-card-fullscreen .form-control {
        border-radius: 8px !important;
    }
    
    .neu-card-fullscreen .form-select {
        border-radius: 8px !important;
    }
    
    .neu-card-fullscreen .btn {
        border-radius: 8px !important;
    }
}

/* Desktop responsive */
@media (min-width: 768px) {
    body, html {
        position: static;
        overflow: visible;
    }
    
    .calculator-container {
        padding: 1rem;
        min-height: 100vh;
        align-items: center;
        justify-content: center;
        overflow: visible;
        position: static;
    }
    
    .neu-card-fullscreen {
        max-width: 500px;
        border-radius: 24px !important;
        box-shadow: 8px 8px 24px #7d7d7d, -8px -8px 24px #7f7f7f !important;
        height: auto;
        min-height: 600px;
    }
    
    .neu-card-fullscreen .card-header {
        border-radius: 24px 24px 0 0 !important;
    }
    
    .neu-card-fullscreen .card-body {
        padding: 1.5rem !important;
        border-radius: 0 0 24px 24px !important;
    }
    
    /* Desktop button container */
    .button-container {
        position: static;
        background: transparent;
        border-top: none;
        box-shadow: none;
        padding: 0.75rem 1.5rem 1.5rem 1.5rem;
    }
    
    .bg-neu-dark .button-container {
        background: transparent;
        border-top: none;
        box-shadow: none;
    }
}

/* Neumorphism Components */
.neu-card, .neu-card-header, .neu-display, .neu-input, .neu-btn, .neu-scale-sep, .neu-toggle-icon, .form-select, .form-control, .neu-border, #inputValue, #inputValue::placeholder, .bg-neu-dark #inputValue::placeholder {
    font-family: 'Poppins', 'Segoe UI', 'Roboto', Arial, sans-serif !important;
    font-weight: 500 !important;
}

.neu-card {
    background: #e0e5ec;
    border-radius: 24px;
    box-shadow: 8px 8px 24px #b8bac0, -8px -8px 24px #ffffff;
    border: none;
    overflow: hidden;
}

.neu-card-header {
    background: #1976d2 !important;
    border-radius: 24px 0 0 !important;
    box-shadow: 0 2px 8px #b8bac0;
}

.neu-display {
    background: #e0e5ec !important;
    color: #333 !important;
    border-radius: 16px;
    box-shadow: inset 4px 4px 4px #b8bac0, inset -4px -4px 4px #ffffff;
}

.neu-input {
    background: #e0e5ec !important;
    border-radius: 12px;
    box-shadow: 2px 2px 8px #b8bac0, -2px -2px 8px #ffffff;
    border: none;
    color: #333;
    font-size: 1rem;
}

.neu-btn {
    background: #e0e5ec !important;
    border-radius: 12px;
    box-shadow: 2px 2px 8px #b8bac0, -2px -2px 8px #ffffff;
    border: none;
    color: #333;
    transition: 0.2s;
}

.neu-btn:active {
    box-shadow: inset 2px 2px 8px #b8bac0, inset -2px -2px 8px #ffffff;
}

/* Neumorphism Dark */
.bg-neu-dark {
    background: #23272e !important;
}

.neu-card.neu-dark {
    background: #23272e;
    box-shadow: 8px 8px 24px #181a1f, -8px -8px 24px #2e323a;
}

.neu-card-header.neu-dark {
    background: #1a2233 !important;
    color: #fff !important;
    box-shadow: 0 2px 8px #181a1f;
    border-radius: 24px 0 0 !important;
}

.neu-display.neu-dark {
    background: #23272e !important;
    color: #ffffff !important;
    box-shadow: inset 4px 4px 4px #181a1f, inset -4px -4px 4px #2e323a;
}

.neu-input.neu-dark {
    background: #23272e !important;
    color: #fff;
    box-shadow: 2px 2px 8px #181a1f, -2px -2px 8px #2e323a;
    border: 1px solid #444;
}

.neu-btn.neu-dark {
    background: #23272e !important;
    color: #fff;
    box-shadow: 2px 2px 8px #181a1f, -2px -2px 8px #2e323a;
}

.neu-btn.neu-dark:active {
    box-shadow: inset 2px 2px 8px #181a1f, inset -2px -2px 8px #2e323a;
}

/* Tanda : pada skala */
.neu-scale-sep {
    color: #1976d2;
    font-weight: bold;
    font-size: 1.5em;
    transition: color 0.3s;
}

.bg-neu-dark .neu-scale-sep {
    color: #ffffff;
}

/* Soft neumorphism border */
.neu-border {
    border: 1.5px solid #e0e5ec !important;
    box-shadow: 1px 1.5px 4px #d1d9e6, -1px -1.5px 4px #fff;
    transition: border 0.3s, box-shadow 0.3s;
}

.neu-input:focus, .neu-border:focus {
    border: 1.5px solid #1976d2 !important;
    box-shadow: 0 0 0 2px #1976d233;
}

.bg-neu-dark .neu-border {
    border: 1.5px solid #23272e !important;
    box-shadow: 1px 1.5px 4px #181a1f, -1px -1.5px 4px #2e323a;
}

.bg-neu-dark .neu-input:focus, .bg-neu-dark .neu-border:focus {
    border: 1.5px solid #ffe066 !important;
    box-shadow: 0 0 0 2px #ffe06655;
}

/* Neumorphism effect for toggle icon */
.neu-toggle-btn {
    outline: none;
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    background: transparent;
    transition: background 0.3s, box-shadow 0.3s;
    margin-right: 0;
    margin-left: auto;
    padding: 0.1em;
}

.neu-toggle-btn:active {
    background: #e0e5ec;
    box-shadow: none;
}

.bg-neu-dark .neu-toggle-btn:active {
    background: #23272e;
}

.neu-toggle-icon {
    font-size: 1.7em;
    color: #fff;
    filter: drop-shadow(0 1px 2px #1976d2cc);
    transition: color 0.3s, filter 0.3s;
}

.bg-neu-dark .neu-toggle-icon {
    color: #ffe066;
    filter: drop-shadow(0 1px 2px #23272ecc);
}

.neu-toggle-icon.sun {
    color: #ffe066;
    filter: drop-shadow(0 1px 2px #fff8);
}

.bg-neu-dark .neu-toggle-icon.sun {
    color: #fff;
    filter: drop-shadow(0 1px 2px #ffe066cc);
}

.neu-toggle-btn:hover .neu-toggle-icon {
    color: #ffe066;
    filter: drop-shadow(0 1px 2px #fff8);
}

.bg-neu-dark .neu-toggle-btn:hover .neu-toggle-icon {
    color: #fff;
    filter: drop-shadow(0 1px 2px #ffe066cc);
}

/* Placeholder styles */
#inputValue::placeholder {
    color: #aeb6c2 !important;
    opacity: 1;
    font-weight: 700 !important;
}

.bg-neu-dark #inputValue::placeholder,
.bg-neu-dark #inputValue::-webkit-input-placeholder,
.bg-neu-dark #inputValue::-moz-placeholder,
.bg-neu-dark #inputValue:-ms-input-placeholder,
.bg-neu-dark #inputValue::-ms-input-placeholder {
    color: #ffe066 !important;
    opacity: 1;
    font-weight: 700 !important;
}

/* Button and form styles */
.btn:hover {
    color: #333 !important;
}

.form-select {
    padding: 0.5rem !important;
}

/* Remove bottom margin from last elements */
.neu-card-fullscreen .card-body > *:last-child {
    margin-bottom: 0 !important;
}

.neu-card-fullscreen .row:last-child {
    margin-bottom: 0 !important;
}

/* Ensure no gaps in mobile */
@media (max-width: 767px) {
    .neu-card-fullscreen .card-body {
        padding-bottom: 0.75rem !important;
    }
    
    .neu-card-fullscreen .card-body > *:last-child {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* Install Banner */
#installBanner {
    animation: fadeInDown 0.5s;
    max-width: 90vw;
    width: 400px;
}

#installBanner .neu-card {
    border-radius: 24px;
    box-shadow: 8px 8px 24px #b8bac0, -8px -8px 24px #ffffff;
    background: #e0e5ec;
    align-items: center;
}

.bg-neu-dark #installBanner .neu-card {
    background: #23272e;
    box-shadow: 8px 8px 24px #181a1f, -8px -8px 24px #2e323a;
}

#installBanner .btn {
    min-width: 2.2em;
    min-height: 2.2em;
    font-size: 1.1em;
    border-radius: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}

#installBanner #installBtn {
    min-width: 4em;
    padding: 0.5rem 1rem !important;
}

/* Additional mobile viewport fixes */
@media (max-width: 767px) and (max-height: 600px) {
    .calculator-container {
        height: 100vh;
        height: 100dvh;
        min-height: 100vh;
        min-height: 100dvh;
    }
    
    .neu-card-fullscreen {
        height: 100vh;
        height: 100dvh;
        min-height: 100vh;
        min-height: 100dvh;
    }
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 767px) {
        body, html {
            height: -webkit-fill-available;
            min-height: -webkit-fill-available;
        }
        
        .calculator-container {
            height: -webkit-fill-available;
            min-height: -webkit-fill-available;
        }
        
        .neu-card-fullscreen {
            height: -webkit-fill-available;
            min-height: -webkit-fill-available;
        }
    }
}

/* Additional fixes for mobile browsers */
@media (max-width: 767px) {
    /* Force full height */
    body, html {
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Ensure calculator takes full screen */
    .calculator-container {
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
    
    .neu-card-fullscreen {
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }
}

/* Viewport height fixes for different mobile browsers */
@media screen and (max-width: 767px) {
    /* Chrome, Safari, Edge */
    body, html {
        height: 100vh !important;
        height: 100dvh !important;
    }
    
    /* Firefox */
    @supports (-moz-appearance: none) {
        body, html {
            height: 100vh !important;
        }
    }
    
    /* WebKit browsers */
    @supports (-webkit-appearance: none) {
        body, html {
            height: 100vh !important;
            height: -webkit-fill-available !important;
        }
    }
}

/* Prevent any default browser margins/padding */
html {
    margin: 0 !important;
    padding: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
}

body {
    margin: 0 !important;
    padding: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-40px); }
    to { opacity: 1; transform: translateY(0); }
}