/* ========================================= */
/* THEME: MIDNIGHT FUTURE (Native Bulma v1)  */
/* ========================================= */
:root {
    /* 1. Define your Brand Colors (HSL format is required for Bulma v1 calculations) */
    /* Neon Sky Blue (hsl(199, 92%, 60%)) */
    --bulma-primary-h: 199deg;
    --bulma-primary-s: 92%;
    --bulma-primary-l: 60%;

    /* Neon Pink (hsl(328, 87%, 70%)) */
    --bulma-danger-h: 328deg;
    --bulma-danger-s: 87%;
    --bulma-danger-l: 70%;
    
    /* Font Setting */
    --bulma-body-family: 'Inter', sans-serif;
}

/* 2. Activate Dark Mode by Default */
/* The docs say we can force dark mode using a class or attribute */
:root {
    color-scheme: dark;
}

/* 3. Override the Dark Mode "Lightness" Variables */
/* This re-calibrates Bulma's internal logic to match your deep navy theme */
:root,
[data-theme="dark"],
[data-theme="light"] {
    /* Main Background (Deep Navy) */
    --bulma-scheme-h: 223deg;
    --bulma-scheme-s: 47%;
    
    /* FORCE Lightness (Crucial for Light Mode Browsers) */
    --bulma-scheme-main-l: 9%;      /* Background */
    --bulma-background-l: 12%;      /* Inputs */
    --bulma-text-l: 90% !important; /* Force Off-white text (prevents black text) */
    --bulma-border-l: 20%;
    
    /* Ensure title colors map to text color */
    --bulma-title-color: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-l));
    --bulma-label-color: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-l));
    --bulma-input-color: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-l));
}

/* Double-tap: Explicitly handle the media query conflict */
@media (prefers-color-scheme: light) {
    :root {
        --bulma-text-l: 90% !important;
        --bulma-scheme-main-l: 9% !important;
    }
}

/* 4. Component Specifics */
/* Adjust card background specifically if needed */
.box, .card {
    /* Map to a slightly lighter variable for elevation */
    background-color: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), 15%);
    border: 1px solid hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), 20%);
}

/* 5. Range Slider Fix */
/* Bulma v1 handles most inputs, but custom sliders usually need manual touches */
input[type=range] {
    accent-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l));
    width: 100%;
    cursor: pointer;
}

/* 6. Application Layout Architecture */

/* --- SHARED RULES --- */
.app-layout { display: flex; flex-direction: column; }
.app-scrollable { display: flex; flex-direction: column; }

/* --- MOBILE SPECIFIC (Scrolling Page) --- */
@media screen and (max-width: 768px) {
    .app-layout { min-height: 100vh; }
    .app-content { flex: 1; display: block; }
    
    /* Keep scrollers on mobile, but limit height */
    .app-scrollable > div {
        max-height: 400px;
        overflow-y: auto !important;
        border: 1px solid rgba(255,255,255,0.05);
    }
}

/* --- DESKTOP SPECIFIC (Fixed Dashboard) --- */
@media screen and (min-width: 769px) {
    
    /* 1. LOCK THE SCREEN */
    .app-layout {
        height: 100vh !important;
        overflow: hidden !important;
        padding: 20px !important;
    }

    /* 2. THE COLUMNS WRAPPER */
    .app-content {
        height: calc(100vh - 40px) !important; 
        overflow: hidden !important;
        margin: 0 !important;
    }

    /* 3. THE COLUMNS (Now targeted directly!) */
    .app-column {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important; 
        padding-bottom: 0 !important;
        overflow: hidden !important;
    }

    /* 4. THE BOXES */
    .app-scrollable {
        flex: 1 1 0% !important; /* Fill remaining space */
        min-height: 0 !important;
        overflow: hidden !important;
        height: auto !important;
    }

    /* 5. THE CONTENT INSIDE BOXES */
    .app-scrollable > div {
        flex: 1 !important;
        overflow-y: auto !important; 
        min-height: 0 !important;
        height: 100%;
    }
}

/* ========================================= */
/*          SPECIFIC COMPONENT FIXES         */
/* ========================================= */

/* --- FIX 1: CHART MENU (Vertical & Right) --- */
/* We force the Plotly modebar to stack vertically */
.js-plotly-plot .plotly .modebar {
    display: flex !important;
    flex-direction: column !important;
    left: auto !important;
    right: 0px !important;
    top: 56px !important;
    width: 32px !important;
    height: auto !important;
    background: rgba(21, 30, 50, 0.5) !important; /* Semi-transparent backing */
    border-radius: 4px;
}

.js-plotly-plot .plotly .modebar-group {
    display: flex !important;
    flex-direction: column !important;
    padding-left: 0 !important;
    gap: 10px !important;
    margin-bottom: 5px !important;
}

/* Make icons white/gray so they are visible */
.js-plotly-plot .plotly .modebar-btn path {
    fill: rgba(255, 255, 255, 0.6) !important;
}
.js-plotly-plot .plotly .modebar-btn.active path,
.js-plotly-plot .plotly .modebar-btn:hover path {
    fill: white !important;
}


/* --- FIX 2: SUBHEADERS (Grey Box Fix) --- */
/* The "is-light" class turns grey in dark mode by default. 
   We override it to be a transparent dark blue. */
.notification.is-light {
    background-color: hsla(223, 47%, 15%, 0.8) !important; /* Slightly lighter than card */
    color: hsl(199, 92%, 60%) !important; /* Your Neon Blue Accent */
    border-left: 4px solid hsl(199, 92%, 60%) !important;
    border-radius: 4px;
    box-shadow: none !important;
}

/* --- FIX 3: FORCE TEXT COLORS (Fix for Light Mode) ) --- */
/* 1. Force Labels and Titles to be Off-White */
.label, 
.title, 
.subtitle,
.content {
    color: hsl(223, 47%, 90%) !important; /* Matches your text-l: 90% */
}

/* 2. Fix the Inputs (Text Fields) */
.input, .select select {
    background-color: hsl(223, 47%, 12%) !important; /* Dark Blue bg */
    border-color: hsl(223, 47%, 20%) !important;     /* Subtle border */
    color: hsl(223, 47%, 90%) !important;            /* Light text */
}

/* 3. Make the "Readonly" totals (like Purchase Price) pop with Neon Blue */
.input[readonly] {
    background-color: hsla(223, 47%, 10%, 0.5) !important;
    border-color: transparent !important;
    color: hsl(199, 92%, 60%) !important; /* Your Neon Primary Color */
    font-weight: 800;
}

/* 4. Ensure Buttons text is visible */
/* Rule A: Standard/Dark Buttons (The +/- buttons) */
.button {
    color: #E2E8F0 !important;   /* Off-white */
    font-weight: 600 !important; /* Semi-Bold */
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Rule B: Primary Action Button (The "Simulation starten" button) */
.button.is-primary {
    color: #0B1120 !important;   /* Deep Navy */
    font-weight: 700 !important; /* Reduced to Standard Bold (Matches your screenshot) */
    
    /* FIX: Kill the color transition. 
       This ensures the text snaps instantly to transparent/navy 
       so it never "fades" on top of the spinner. */
    transition: background-color 0.2s, color 0s !important; 
}

/* Rule C: Loading State Fix */
.button.is-primary.is-loading {
    color: transparent !important; /* Text vanishes instantly */
}