/**
 * Flipping Calculator Additional Styles
 *
 * Component CSS (fonts, font-protection, button-protection, heading-weight-fix)
 * are loaded via wp_enqueue_style in class-plugin.php for parallel downloads.
 */

/* =================================================================
   LABEL FONT-WEIGHT OVERRIDE - Prevent theme from making labels too bold
   ================================================================= */

/**
 * Override all label font-weights in flipping calculator
 * Use high specificity (html body .flipping-form) + !important to beat theme styles
 * Set to 600 (Semi-Bold) for a refined appearance
 */
html body .flipping-form label,
html body .flipping-form .uk-field label,
html body .flipping-form .scenario-field-row > label,
html body .flipping-form .egenkapital-label {
    font-weight: 600 !important;
}

/* =================================================================
   STICKY NOTIFICATION (Top Left)
   ================================================================= */

.sticky-notification {
    position: fixed;
    top: 80px;
    left: 0;
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.sticky-notification > * {
    pointer-events: auto;
}

/* Collapsed state - slide out to the left (only tab visible) */
.sticky-notification.collapsed {
    transform: translateX(-100%);
}

.sticky-notification.collapsed .notification-content {
    display: none;
}

/* Tab (always visible - clickable handle) */
.notification-tab {
    width: 6px;
    min-height: 60px;
    background: linear-gradient(135deg, #09B87D 0%, #078f63 100%);
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.3s ease, background 0.3s ease, min-height 0.3s ease;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
}

/* When collapsed, make tab larger and easier to click */
.sticky-notification.collapsed .notification-tab {
    width: 20px;
    min-height: 60px;
    padding: 8px 4px;
    position: absolute;
    right: -20px;
}

.notification-tab:hover {
    width: 8px;
    background: linear-gradient(135deg, #0ac992 0%, #089973 100%);
}

.sticky-notification.collapsed .notification-tab:hover {
    width: 24px;
}

/* Tab icon (hidden when expanded, visible when collapsed) */
.tab-icon {
    display: none;
}

.sticky-notification.collapsed .tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    font-size: 8px;
    font-weight: bold;
    color: #09B87D;
}

.sticky-notification.collapsed .tab-icon::before {
    content: '›';
    display: block;
}

/* Content area */
.notification-content {
    max-width: 400px;
    min-width: 320px;
    background: white;
    border-radius: 8px 0 0 8px;
    box-shadow: -2px 2px 12px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

/* Notice styles (success, warning, error) */
.notification-content .notice {
    margin: 0;
    padding: 16px 20px;
    border-radius: 8px 0 0 8px;
    border-left: 4px solid;
}

.notification-content .notice p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.notification-content .notice strong {
    display: block;
    font-size: 15px;
    margin-bottom: 4px;
}

/* Success */
.notification-content .notice.success {
    background: #f0fdf4;
    border-left-color: #10b981;
    color: #065f46;
}

/* Warning */
.notification-content .notice.warning {
    background: #fffbeb;
    border-left-color: #f59e0b;
    color: #92400e;
}

/* Error */
.notification-content .notice.error {
    background: #fef2f2;
    border-left-color: #ef4444;
    color: #991b1b;
}

/* Info */
.notification-content .notice.info {
    background: #eff6ff;
    border-left-color: #3b82f6;
    color: #1e40af;
}

/* Responsive */
@media screen and (max-width: 768px) {
    .sticky-notification {
        top: 10px;
    }

    .notification-content {
        min-width: 280px;
        max-width: calc(100vw - 20px);
    }
}

/* =================================================================
   STICKY ACTIONS PANEL (Left Side - Desktop Only)
   ================================================================= */

/* Only show on desktop */
@media screen and (min-width: 769px) {
    .sticky-actions-panel {
        position: fixed;
        left: 0;
        top: 200px;
        z-index: 9998;
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 50px;
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
    }

    .sticky-actions-panel:hover {
        width: 230px;
    }

    .sticky-actions-panel > * {
        pointer-events: auto;
    }

    /* Individual action items */
    .sticky-action-item {
        position: relative;
        height: 50px;
        display: flex;
        align-items: center;
        overflow: hidden;
        background: white;
        border-bottom: 1px solid #e5e7eb;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
    }

    .sticky-action-item:first-child {
        border-radius: 0 8px 0 0;
    }

    .sticky-action-item:last-child {
        border-radius: 0 0 8px 0;
        border-bottom: none;
    }

    /* Icon - always visible, slides right on hover */
    .sticky-action-item .action-icon {
        position: absolute;
        left: 0;
        width: 50px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
        z-index: 2;
    }

    .sticky-action-item .action-icon svg {
        width: 20px;
        height: 20px;
        color: #09B87D;
    }

    /* Move icon to the right and shrink width when panel is hovered */
    .sticky-actions-panel:hover .sticky-action-item .action-icon {
        left: 8px;
        width: 36px;
    }

    /* Button - text hidden by default, visible on hover */
    .sticky-action-item .action-button {
        width: 230px;
        height: 100%;
        border: none;
        border-radius: 0;
        text-align: left;
        padding-left: 20px !important;
        padding-right: 16px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        opacity: 0;
        transition: opacity 0.3s ease, padding-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        display: flex;
        align-items: center;
        white-space: nowrap;
        overflow: hidden;
        position: relative;
        z-index: 1;
        /* White/gray background with dark text */
        background: transparent;
        color: #1b1f23;
        box-shadow: none;
        border: none;
    }

    /* Show button text when panel is hovered and move it to the right */
    .sticky-actions-panel:hover .sticky-action-item .action-button {
        opacity: 1;
        padding-left: 52px !important;
    }

    /* Button hover effects - only apply to panel item background */
    .sticky-action-item:hover {
        background: #f9fafb;
    }
}

/* Hide on mobile/tablet */
@media screen and (max-width: 768px) {
    .sticky-actions-panel {
        display: none;
    }
}

/* =================================================================
   STICKY TABLE OF CONTENTS (Right Side - Desktop Only)
   ================================================================= */

/* Only show on desktop */
@media screen and (min-width: 769px) {
    .sticky-toc {
        position: fixed;
        right: 0;
        top: 200px;
        z-index: 9997;
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 40px;
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
    }

    .sticky-toc:hover {
        width: 220px;
    }

    .sticky-toc > * {
        pointer-events: auto;
    }

    /* Individual TOC items */
    .toc-item {
        position: relative;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        overflow: hidden;
        background: white;
        border-top: 1px solid #e5e7eb;
        box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    background 0.2s ease;
        padding: 0;
    }

    .toc-item:first-child {
        border-radius: 8px 0 0 0;
        border-top: none;
    }

    .toc-item:last-child {
        border-radius: 0 0 0 8px;
    }

    /* Active item sticks out to the left */
    .toc-item.active {
        transform: translateX(-15px);
        box-shadow: -4px 0 8px rgba(0, 0, 0, 0.15);
    }

    /* Number - always visible */
    .toc-item .toc-number {
        min-width: 40px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-weight: 700;
        color: #09B87D;
        flex-shrink: 0;
    }

    /* Label - hidden by default, visible on hover */
    .toc-item .toc-label {
        opacity: 0;
        font-size: 14px;
        font-weight: 500;
        color: #1b1f23;
        white-space: nowrap;
        padding-right: 16px;
        transition: opacity 0.3s ease;
    }

    /* Show label when TOC is hovered */
    .sticky-toc:hover .toc-item .toc-label {
        opacity: 1;
    }

    /* Hover effect on individual item */
    .toc-item:hover {
        background: #f9fafb;
    }

    /* Active item styling */
    .toc-item.active .toc-number {
        color: #078f63;
        font-size: 18px;
    }

    /* Special styling for Results section (item 7) */
    .toc-item[data-section="results_section"] {
        background: #09B87D;
    }

    .toc-item[data-section="results_section"] .toc-number {
        color: white;
    }

    .toc-item[data-section="results_section"] .toc-label {
        color: white;
    }

    .toc-item[data-section="results_section"]:hover {
        background: #078f63;
    }

    /* Active state for results section */
    .toc-item[data-section="results_section"].active .toc-number {
        color: white;
        font-size: 18px;
    }
}

/* Hide on mobile/tablet */
@media screen and (max-width: 768px) {
    .sticky-toc {
        display: none;
    }
}

/* =================================================================
   INPUT VALIDATION & ERROR STATES
   ================================================================= */

.uk-input.error {
    border-color: #ef4444;
    background-color: #fef2f2;
}

.uk-input.error:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.validation-error {
    display: block;
    color: #ef4444;
    font-size: 12px;
    margin-top: 4px;
    font-weight: 500;
}

/* Success state for valid inputs */
.uk-input.success {
    border-color: #10b981;
}

/* =================================================================
   GENERAL LAYOUT
   ================================================================= */

/* Wider calculator container for better spacing */
.flipping-form {
    max-width: 1600px;
    margin: 0 auto;
}

/* Increase spacing between sections */
.flipping-form .uk-card {
    margin-bottom: 40px; /* Increased from 32px */
    padding: 28px; /* Add more internal padding */
}

.flipping-form .uk-card:last-of-type {
    margin-bottom: 0;
}

/* More space in section headers */
.flipping-form .uk-section-header {
    margin-bottom: 28px; /* Increased spacing */
}

/* More space in uk-grid */
.flipping-form .uk-grid {
    gap: 20px; /* Add gap between grid items */
}

/* Field spacing */
.flipping-form .uk-field {
    margin-bottom: 24px; /* More space between individual fields */
}

.flipping-form .uk-field:last-child {
    margin-bottom: 0;
}

/* =================================================================
   EGENKAPITAL ROW STYLING
   ================================================================= */

/* Egenkapital section - two row layout */
.egenkapital-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 0;
}

/* Top row: Different layout for 1 scenario vs 2-3 scenarios */

/* 1 SCENARIO: Hide top row completely */
.egenkapital-section[data-scenarios="1"] .egenkapital-top-row {
    display: none;
}

/* 2-3 SCENARIOS: Grid layout matching scenario-field-row */
.egenkapital-section[data-scenarios="2"] .egenkapital-top-row,
.egenkapital-section[data-scenarios="3"] .egenkapital-top-row {
    display: grid;
    gap: 16px;
    align-items: start;
}

.egenkapital-section[data-scenarios="2"] .egenkapital-top-row {
    grid-template-columns: 150px 1fr 1fr;
}

.egenkapital-section[data-scenarios="3"] .egenkapital-top-row {
    grid-template-columns: 150px 1fr 1fr 1fr;
}

/* Label - High specificity to override theme */
html body .flipping-form .egenkapital-label {
    font-weight: 600 !important;
    color: var(--uk-text, #0b1220);
    margin: 0;
}

/* 1 scenario: label has fixed width to align with grid */
.egenkapital-section[data-scenarios="1"] .egenkapital-label {
    min-width: 150px;
}

/* 2-3 scenarios: label has padding to align with grid */
.egenkapital-section[data-scenarios="2"] .egenkapital-label,
.egenkapital-section[data-scenarios="3"] .egenkapital-label {
    padding-top: 8px;
}

/* Percent input inline (only visible for 1 scenario) */
.egenkapital-percent-inline {
    display: flex;
    align-items: center;
    gap: 6px;
}

.egenkapital-percent-inline input {
    width: 70px;
    text-align: right;
    padding-right: 8px;
}

.egenkapital-percent-inline .unit {
    font-size: 14px;
    color: var(--uk-text-muted, #64748b);
    font-weight: 500;
}

/* Hide inline percent for ALL scenarios (moved to slider row) */
.egenkapital-percent-inline {
    display: none;
}

/* Hide divider for ALL scenarios (not needed) */
.egenkapital-divider {
    display: none;
}

/* Kr inputs wrapper */
/* 1 scenario: hide from top row (will show in slider row instead) */
.egenkapital-section[data-scenarios="1"] .egenkapital-top-row .egenkapital-kr-wrapper {
    display: none;
}

/* 2-3 scenarios: grid children */
.egenkapital-section[data-scenarios="2"] .egenkapital-kr-wrapper,
.egenkapital-section[data-scenarios="3"] .egenkapital-kr-wrapper {
    display: contents; /* Make children participate in parent grid */
}

/* Hide kr inputs by default, show based on scenario count */
.egenkapital-section[data-scenarios="1"] .egenkapital-kr-input-wrapper[data-scenario="2"],
.egenkapital-section[data-scenarios="1"] .egenkapital-kr-input-wrapper[data-scenario="3"] {
    display: none !important;
}

.egenkapital-section[data-scenarios="2"] .egenkapital-kr-input-wrapper[data-scenario="3"] {
    display: none !important;
}

/* Kr input wrapper */
/* 1 scenario: inline horizontal layout */
.egenkapital-section[data-scenarios="1"] .egenkapital-kr-input-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

/* 2-3 scenarios: simple block layout */
.egenkapital-section[data-scenarios="2"] .egenkapital-kr-input-wrapper,
.egenkapital-section[data-scenarios="3"] .egenkapital-kr-input-wrapper {
    display: block;
}

/* Kr input sizing and alignment */
/* 1 scenario: fixed width, right-aligned */
.egenkapital-section[data-scenarios="1"] .egenkapital-kr-input {
    width: 140px;
    text-align: right;
    padding-right: 8px;
}

/* 2-3 scenarios: full width, LEFT-aligned */
.egenkapital-section[data-scenarios="2"] .egenkapital-kr-input,
.egenkapital-section[data-scenarios="3"] .egenkapital-kr-input {
    width: 100%;
    text-align: left;
    padding-left: 12px;
    padding-right: 12px;
}

/* Unit (kr suffix) */
/* 1 scenario: visible inline */
.egenkapital-section[data-scenarios="1"] .egenkapital-kr-input-wrapper .unit {
    font-size: 14px;
    color: var(--uk-text-muted, #64748b);
    font-weight: 500;
}

/* 2-3 scenarios: HIDDEN */
.egenkapital-section[data-scenarios="2"] .egenkapital-kr-input-wrapper .unit,
.egenkapital-section[data-scenarios="3"] .egenkapital-kr-input-wrapper .unit {
    display: none;
}

/* Manual override indicator - green highlight */
.egenkapital-kr-input.manual-override {
    border-color: var(--uk-primary, #09B87D) !important;
    background: #f0fdf4 !important;
    font-weight: 600;
    box-shadow: 0 0 0 3px rgba(9, 184, 125, 0.1);
}

/* Bottom row: Slider + Percent input + Kr input (for scenario 1) */
.egenkapital-slider-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* 1 scenario: No padding, includes label space in flex layout */
.egenkapital-section[data-scenarios="1"] .egenkapital-slider-row {
    padding-left: 0;
}

/* 2-3 scenarios: Align with grid label column (150px + 16px gap) */
.egenkapital-section[data-scenarios="2"] .egenkapital-slider-row,
.egenkapital-section[data-scenarios="3"] .egenkapital-slider-row {
    padding-left: 166px;
}

/* Slider row label (only for scenario 1) */
.egenkapital-section[data-scenarios="1"] .egenkapital-slider-row::before {
    content: 'Egenkapital';
    display: block;
    min-width: 150px;
    flex-shrink: 0;
    font-weight: 600;
    color: var(--uk-text, #0b1220);
}

.egenkapital-slider-row input[type="range"] {
    flex: 1;
}

/* Show kr-input in slider row for scenario 1 */
.egenkapital-section[data-scenarios="1"] .egenkapital-slider-row .egenkapital-kr-input-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

/* Hide kr-input in slider row for 2-3 scenarios */
.egenkapital-section[data-scenarios="2"] .egenkapital-slider-row .egenkapital-kr-input-wrapper,
.egenkapital-section[data-scenarios="3"] .egenkapital-slider-row .egenkapital-kr-input-wrapper {
    display: none;
}

/* Percent input */
.egenkapital-percent {
    display: flex;
    align-items: center;
    gap: 6px;
}

.egenkapital-percent input {
    width: 70px;
    text-align: right;
    padding-right: 8px;
}

.egenkapital-percent .unit {
    font-size: 14px;
    color: var(--uk-text-muted, #64748b);
    font-weight: 500;
}

/* Responsive */
@media screen and (max-width: 1200px) {
    .egenkapital-top-row {
        flex-wrap: wrap;
    }

    .egenkapital-slider-row {
        padding-left: 0;
    }
}

@media screen and (max-width: 600px) {
    .egenkapital-top-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .egenkapital-label {
        min-width: unset;
    }

    .egenkapital-percent input,
    .egenkapital-kr-input {
        width: 100%;
    }

    .egenkapital-kr-wrapper {
        flex-direction: column;
        gap: 8px;
    }

    .egenkapital-kr-input-wrapper {
        width: 100%;
    }

    .egenkapital-slider-row {
        flex-direction: column;
        gap: 12px;
    }
}

/* =================================================================
   SCENARIO SELECTOR
   ================================================================= */

.scenario-names-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

/* Scenario name wrapper with dropdown */
.scenario-name-wrapper {
    position: relative;
}

.scenario-name-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
}

.dropdown-option {
    padding: 10px 14px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    font-size: 14px;
    color: #374151;
}

.dropdown-option:hover {
    background-color: #f3f4f6;
}

.dropdown-option:active {
    background-color: #e5e7eb;
}

.dropdown-option:first-child {
    padding-top: 12px;
}

.dropdown-option:last-child {
    padding-bottom: 12px;
}

/* =================================================================
   AUTOFYLL SECTION
   ================================================================= */

/* Hide autofyll section for 1 scenario */
.autofyll-section {
    display: none !important;
}

/* Show autofyll section for 2-3 scenarios */
.autofyll-section[data-scenarios="2"],
.autofyll-section[data-scenarios="3"] {
    display: block !important;
    margin-top: 20px;
    padding: 20px;
    background: #f9fafb;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

/* Autofyll header with toggle */
.autofyll-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.autofyll-header > label {
    font-size: 14px;
    font-weight: 600;
    color: var(--uk-text, #0b1220);
    margin: 0;
}

/* Toggle switch styling */
.autofyll-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
    margin: 0;
}

.autofyll-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.autofyll-slider-btn {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #d1d5db;
    transition: 0.3s;
    border-radius: 26px;
}

.autofyll-slider-btn:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.autofyll-switch input:checked + .autofyll-slider-btn {
    background-color: #09B87D;
}

.autofyll-switch input:checked + .autofyll-slider-btn:before {
    transform: translateX(24px);
}

.autofyll-switch input:focus + .autofyll-slider-btn {
    box-shadow: 0 0 0 3px rgba(9, 184, 125, 0.2);
}

/* Autofyll controls (hidden when toggle is OFF) */
.autofyll-controls {
    display: block;
}

#autofyll_enabled:not(:checked) ~ .autofyll-controls {
    display: none;
}

.autofyll-variance-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--uk-text, #0b1220);
    margin-bottom: 12px;
}

/* Autofyll uses standard uk-range-wrap styling from forms.css */

/* Scenario field rows (for grunnlag fields like kjøpssum, salgssum, etc.) */
.scenario-fields-container {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Increased from 16px */
    margin-bottom: 24px; /* Increased from 16px */
}

/* Hide the old scenario headers - we'll use labels instead */
.scenario-fields-container .scenario-headers {
    display: none !important;
}

.scenario-field-row {
    display: grid;
    gap: 16px; /* Increased from 12px */
    align-items: start;
}

/* 1 scenario - simple single column */
.scenario-field-row[data-scenarios="1"] {
    grid-template-columns: 150px 1fr;
}

/* Hide scenario 2 and 3 fields when only 1 scenario */
.scenario-field-row[data-scenarios="1"] .scenario-field-input[data-scenario="2"],
.scenario-field-row[data-scenarios="1"] .scenario-field-input[data-scenario="3"],
.scenario-field-row[data-scenarios="1"] .scenario-field-slider[data-scenario="2"],
.scenario-field-row[data-scenarios="1"] .scenario-field-slider[data-scenario="3"],
.scenario-field-row[data-scenarios="1"] .scenario-field-wrapper[data-scenario="2"],
.scenario-field-row[data-scenarios="1"] .scenario-field-wrapper[data-scenario="3"] {
    display: none !important;
}

/* 2 scenarios */
.scenario-field-row[data-scenarios="2"] {
    grid-template-columns: 150px 1fr 1fr;
}

/* Hide scenario 3 fields when only 2 scenarios */
.scenario-field-row[data-scenarios="2"] .scenario-field-input[data-scenario="3"],
.scenario-field-row[data-scenarios="2"] .scenario-field-slider[data-scenario="3"],
.scenario-field-row[data-scenarios="2"] .scenario-field-wrapper[data-scenario="3"] {
    display: none !important;
}

/* 3 scenarios */
.scenario-field-row[data-scenarios="3"] {
    grid-template-columns: 150px 1fr 1fr 1fr;
}

/* High specificity to override theme styles */
html body .flipping-form .scenario-field-row > label {
    font-weight: 600 !important;
    padding-top: 8px;
}

/* Wrapper for each scenario column (label + input) */
.scenario-field-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Increased from 6px */
}

.scenario-field-wrapper .scenario-label {
    font-size: 12px;
    font-weight: 600;
    color: #0369a1;
    text-align: center;
    padding: 4px 8px;
    background: #f0f9ff;
    border-radius: 4px;
    border: 1px solid #bae6fd;
}

/* Hide scenario labels when only 1 scenario */
.scenario-field-row[data-scenarios="1"] .scenario-label {
    display: none;
}

.scenario-field-input,
.scenario-field-slider {
    width: 100%;
}

/* =================================================================
   SCENARIO COST ROWS
   ================================================================= */

/* Hide old scenario headers - we'll use labels above each amount input instead */
.scenario-headers {
    display: none !important;
}

/* Løpende subsections */
.lopende-subsection {
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid #e5e7eb;
}

.lopende-subsection:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.subsection-title {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 4px;
}

.subsection-hint {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 16px;
}

/* 1 scenario layout - simple */
.dynamic-costs-scenario[data-scenarios="1"] .scenario-cost-row {
    grid-template-columns: 1.5fr 150px 40px;
}

/* Hide scenario 2 and 3 wrappers when only 1 scenario */
.scenario-cost-row[data-scenarios="1"] .cost-amount-wrapper[data-scenario="2"],
.scenario-cost-row[data-scenarios="1"] .cost-amount-wrapper[data-scenario="3"] {
    display: none !important;
}

/* 2 scenarios layout */
.dynamic-costs-scenario[data-scenarios="2"] .scenario-cost-row {
    grid-template-columns: 1.5fr 150px 150px 40px;
}

/* Hide scenario 3 wrapper when only 2 scenarios */
.scenario-cost-row[data-scenarios="2"] .cost-amount-wrapper[data-scenario="3"] {
    display: none !important;
}

/* 3 scenarios layout - simple grid approach */
.dynamic-costs-scenario[data-scenarios="3"] .scenario-cost-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    grid-template-rows: auto auto; /* 2 rows */
    gap: 12px;
    align-items: start;
}

/* Name input spans all 3 columns on row 1 */
.scenario-cost-row[data-scenarios="3"] .cost-name-input {
    grid-column: 1 / 4;
    grid-row: 1;
}

/* No special handling needed for 3-scenario - using universal X button styles */

/* Amount wrapper 1 on row 2, column 1 */
.scenario-cost-row[data-scenarios="3"] .cost-amount-wrapper[data-scenario="1"] {
    grid-column: 1;
    grid-row: 2;
}

/* Amount wrapper 2 on row 2, column 2 */
.scenario-cost-row[data-scenarios="3"] .cost-amount-wrapper[data-scenario="2"] {
    grid-column: 2;
    grid-row: 2;
}

/* Amount wrapper 3 on row 2, column 3 */
.scenario-cost-row[data-scenarios="3"] .cost-amount-wrapper[data-scenario="3"] {
    grid-column: 3;
    grid-row: 2;
}

/* For 3 scenarios: flip label order and full width */
.scenario-cost-row[data-scenarios="3"] .cost-amount-wrapper {
    width: 100%;
    display: flex !important;
    flex-direction: column-reverse; /* Input on top, label below */
    gap: 6px;
}

/* For 3 scenarios: align text to left in amount inputs */
.scenario-cost-row[data-scenarios="3"] .cost-amount-input {
    text-align: left !important; /* Override default right alignment */
}

/* Cost amount wrapper (label + input) - default for 1 and 2 scenarios */
.cost-amount-wrapper {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

/* High specificity to override theme */
html body .flipping-form .cost-amount-wrapper .cost-scenario-label {
    font-size: 11px;
    font-weight: 600 !important;
    color: #0369a1;
    text-align: center;
    padding: 3px 6px;
    background: #f0f9ff;
    border-radius: 4px;
    border: 1px solid #bae6fd;
}

/* Hide cost scenario labels when only 1 scenario */
.scenario-cost-row[data-scenarios="1"] .cost-scenario-label {
    display: none;
}

/* Cost rows container - ALWAYS 2 per row */
.dynamic-costs-scenario {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px; /* Increased from 12px */
    margin-bottom: 24px; /* Increased from 16px */
}

/* Individual cost row */
.scenario-cost-row {
    display: grid;
    gap: 8px; /* Reduced gap for more space */
    align-items: end; /* Align to bottom so cost name aligns with amount inputs */
    padding: 12px; /* Increased from 8px */
    background: #f9fafb;
    border-radius: 6px;
    border: 1px solid var(--uk-border, #E6E8EC);
}

.scenario-cost-row .cost-name-input {
    min-width: 0;
    font-size: 15px;
    font-weight: 500;
}

.scenario-cost-row .cost-amount-input {
    width: 100%;
    text-align: right;
    font-size: 13px;
}

/* All cost rows need relative positioning for absolute X button */
.scenario-cost-row,
.simple-cost-row {
    position: relative;
}

/* High specificity to override button-protection.css */
html body .flipping-form .scenario-cost-row .remove-btn,
html body .flipping-form .simple-cost-row .remove-btn,
.flipping-form .scenario-cost-row .remove-btn,
.flipping-form .simple-cost-row .remove-btn {
    position: absolute !important;
    top: -2px !important;
    right: -2px !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 50% !important;
    color: #ef4444 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important; /* Hide original text */
    line-height: 1 !important;
    font-weight: 300 !important;
    transition: all 0.2s ease !important;
    z-index: 10 !important;
    flex-shrink: 0 !important;
    opacity: 0.7 !important;
    overflow: hidden !important;
}

/* Override text content to show × symbol */
html body .flipping-form .scenario-cost-row .remove-btn::before,
html body .flipping-form .simple-cost-row .remove-btn::before,
.flipping-form .scenario-cost-row .remove-btn::before,
.flipping-form .simple-cost-row .remove-btn::before {
    content: "×" !important;
    display: block !important;
    font-size: 18px !important;
    line-height: 1 !important;
    color: #ef4444 !important;
}

/* Hide any child elements (text, SVG icons) */
html body .flipping-form .scenario-cost-row .remove-btn > *,
html body .flipping-form .simple-cost-row .remove-btn > *,
.flipping-form .scenario-cost-row .remove-btn > *,
.flipping-form .simple-cost-row .remove-btn > * {
    display: none !important;
    visibility: hidden !important;
}

html body .flipping-form .scenario-cost-row .remove-btn:hover,
html body .flipping-form .simple-cost-row .remove-btn:hover,
.flipping-form .scenario-cost-row .remove-btn:hover,
.flipping-form .simple-cost-row .remove-btn:hover {
    background: #fee2e2 !important;
    color: #dc2626 !important;
    opacity: 1 !important;
    transform: scale(1.2) !important;
}

html body .flipping-form .scenario-cost-row .remove-btn:hover::before,
html body .flipping-form .simple-cost-row .remove-btn:hover::before,
.flipping-form .scenario-cost-row .remove-btn:hover::before,
.flipping-form .simple-cost-row .remove-btn:hover::before {
    color: #dc2626 !important;
}

/* =================================================================
   IMPROVED RESULTS DESIGN
   ================================================================= */

.uk-results {
    background: linear-gradient(135deg, #f0fdf9 0%, #f0f9ff 100%);
    border: 2px solid var(--uk-primary, #09B87D);
}

.uk-result-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px; /* Increased from 24px */
    margin-bottom: 36px; /* Increased from 32px */
    padding-bottom: 36px; /* Increased from 32px */
    border-bottom: 2px solid rgba(9, 184, 125, 0.2);
}

.uk-result-primary {
    text-align: center;
    padding: 32px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.uk-result-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--uk-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.uk-result-value {
    font-size: 48px;
    font-weight: 700;
    color: var(--uk-text, #0b1220);
    line-height: 1.2;
    margin-bottom: 8px;
}

.uk-result-value.positive {
    color: #10b981;
}

.uk-result-value.negative {
    color: #ef4444;
}

.uk-result-sublabel {
    font-size: 13px;
    color: var(--uk-text-muted, #64748b);
}

.uk-result-secondary {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Increased from 16px */
    justify-content: center;
}

.uk-metric-small {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.uk-metric-small .label {
    font-size: 14px;
    font-weight: 600;
    color: var(--uk-text-muted, #64748b);
}

.uk-metric-small .value {
    font-size: 18px;
    font-weight: 700;
    color: var(--uk-text, #0b1220);
}

.uk-metric-small .value.positive {
    color: #10b981;
}

.uk-metric-small .value.negative {
    color: #ef4444;
}

.uk-metric-sublabel {
    font-size: 12px;
    color: var(--uk-text-muted, #64748b);
    margin-top: 4px;
}

/* Result details - 2 columns */
.uk-result-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px; /* Increased from 24px */
}

.uk-result-column h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--uk-text, #0b1220);
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--uk-primary, #09B87D);
}

.uk-result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px; /* Increased from 12px 16px */
    margin-bottom: 12px; /* Increased from 8px */
    background: #fff;
    border-radius: 6px;
    border: 1px solid #f1f5f9;
}

.uk-result-item.highlight {
    background: #f0fdf9;
    border-color: var(--uk-primary, #09B87D);
}

.uk-result-item .label {
    font-size: 14px;
    color: var(--uk-text-muted, #64748b);
    font-weight: 500;
}

.uk-result-item .value {
    font-size: 16px;
    font-weight: 700;
    color: var(--uk-text, #0b1220);
}

.uk-result-item.highlight .value {
    color: var(--uk-primary, #09B87D);
}

/* =================================================================
   RESULTS VERSIONS - TAB SYSTEM & SIDE-BY-SIDE
   ================================================================= */

/* ========================================
   VERSJON 1: TAB SYSTEM
   ======================================== */

.results-tabs-version {
    margin-top: 24px; /* Increased from 20px */
}

/* Tab switcher */
.results-tabs-switcher {
    display: flex;
    gap: 10px; /* Increased from 8px */
    margin-bottom: 28px; /* Increased from 24px */
    background: #f1f5f9;
    padding: 8px; /* Increased from 6px */
    border-radius: 8px;
}

.results-tab {
    flex: 1;
    padding: 14px 24px; /* Increased from 12px 20px */
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    color: #64748b;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.results-tab:hover {
    background: #e2e8f0;
    color: #334155;
}

.results-tab.active {
    background: #fff;
    color: var(--uk-primary, #09B87D);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Tab content */
.results-tab-content {
    display: none;
}

.results-tab-content.active {
    display: block;
}

/* Result sections within tabs */
.uk-result-section {
    margin-top: 28px; /* Increased from 24px */
    padding: 24px; /* Increased from 20px */
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.uk-result-section h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--uk-text, #0b1220);
    margin: 0 0 20px 0; /* Increased from 16px */
    padding-bottom: 10px; /* Increased from 8px */
    border-bottom: 2px solid var(--uk-primary, #09B87D);
}

/* Collapsible sections */
.uk-result-section.collapsible .collapsible-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    margin-bottom: 20px; /* Increased from 16px */
}

.uk-result-section.collapsible.collapsed .collapsible-header {
    margin-bottom: 0;
}

.uk-result-section.collapsible .collapse-icon {
    font-size: 12px;
    transition: transform 0.3s ease;
    color: var(--uk-primary, #09B87D);
}

.uk-result-section.collapsible.collapsed .collapse-icon {
    transform: rotate(-90deg);
}

.uk-result-section.collapsible .collapsible-content {
    max-height: 1000px;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.uk-result-section.collapsible.collapsed .collapsible-content {
    max-height: 0;
}

/* ========================================
   VERSJON 2: SIDE-OM-SIDE COMPARISON
   ======================================== */

.results-comparison-version {
    margin-top: 24px; /* Increased from 20px */
}

/* Comparison header */
.comparison-header {
    display: grid;
    gap: 16px; /* Increased from 12px */
    padding: 20px; /* Increased from 16px */
    border: 2px solid #bae6fd;
    border-radius: 8px;
    margin-bottom: 12px; /* Increased from 8px */
    font-weight: 700;
    font-size: 14px;
    color: #0369a1;
    align-items: center;
}

/* 2 scenarioer */
.comparison-header[data-scenarios="2"] {
    grid-template-columns: 150px 1fr 1fr;
}

.comparison-header[data-scenarios="2"] .comparison-scenario-name[data-scenario="3"] {
    display: none;
}

/* 3 scenarioer */
.comparison-header[data-scenarios="3"] {
    grid-template-columns: 150px 1fr 1fr 1fr;
}

.comparison-label {
    text-align: left;
    font-weight: 700;
}

.comparison-scenario-name {
    text-align: center;
    padding: 8px;
    border-radius: 6px;
}

/* Comparison rows */
.comparison-row {
    display: grid;
    gap: 16px; /* Increased from 12px */
    padding: 16px 20px; /* Increased from 14px 16px */
    margin-bottom: 8px; /* Increased from 4px */
    border-radius: 6px;
    align-items: center;
    border: 1px solid #f1f5f9;
}

/* 2 scenarioer */
.comparison-row[data-scenarios="2"] {
    grid-template-columns: 150px 1fr 1fr;
}

.comparison-row[data-scenarios="2"] .row-value[data-scenario="3"] {
    display: none;
}

/* 3 scenarioer */
.comparison-row[data-scenarios="3"] {
    grid-template-columns: 150px 1fr 1fr 1fr;
}

.comparison-row.highlight {
    border-color: var(--uk-primary, #09B87D);
}

.row-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--uk-text-muted, #64748b);
    text-align: left;
}

.row-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--uk-text, #0b1220);
    text-align: center;
    padding: 8px;
    border-radius: 4px;
}

.row-value.positive {
    color: #10b981;
}

.row-value.negative {
    color: #ef4444;
}


/* Comparison divider (section headers in Sammenlign tab) */
.comparison-divider {
    font-size: 14px;
    font-weight: 700;
    color: var(--uk-text, #0b1220);
    padding: 16px 20px 8px;
    margin-top: 16px;
    border-top: 2px solid #f1f5f9;
}

.comparison-divider:first-child {
    margin-top: 0;
    border-top: none;
}

/* Comparison table wrapper */
.comparison-table {
    width: 100%;
}

/* Collapsible for comparison version */
.comparison-collapsible {
    margin-top: 24px; /* Increased from 20px */
}

.comparison-collapsible-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px; /* Increased from 16px 20px */
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    color: var(--uk-text, #0b1220);
    transition: all 0.2s ease;
    user-select: none;
}

.comparison-collapsible-header:hover {
    background: #f1f5f9;
    border-color: var(--uk-primary, #09B87D);
}

.comparison-collapsible-header .collapse-icon {
    font-size: 14px;
    transition: transform 0.3s ease;
    color: var(--uk-primary, #09B87D);
}

.comparison-collapsible.collapsed .collapse-icon {
    transform: rotate(-90deg);
}

.comparison-collapsible-content {
    max-height: 1000px;
    overflow: hidden;
    transition: max-height 0.3s ease;
    margin-top: 12px; /* Increased from 8px */
}

.comparison-collapsible.collapsed .comparison-collapsible-content {
    max-height: 0;
    margin-top: 0;
}

/* Hide scenario 2 and 3 tabs when not needed */
.results-tabs-switcher[data-scenarios="1"] .results-tab[data-scenario="2"],
.results-tabs-switcher[data-scenarios="1"] .results-tab[data-scenario="3"] {
    display: none;
}

.results-tabs-switcher[data-scenarios="2"] .results-tab[data-scenario="3"] {
    display: none;
}

/* =================================================================
   PIE CHART STYLING
   ================================================================= */

/* Wrapper for chart and legend side-by-side */
.pie-chart-wrapper {
    display: flex;
    gap: 40px;
    align-items: center;
    margin: 20px 0;
}

.pie-chart-container {
    flex: 1.5;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    max-width: 400px;
    position: relative;
    padding-right: 20px;
}

.pie-chart-container canvas {
    max-width: 100% !important;
    height: auto !important;
    width: 100% !important;
}

.pie-chart-legend {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 280px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #e5e7eb;
}

.legend-item:last-child {
    border-bottom: none;
}

.legend-color {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    flex-shrink: 0;
}

.legend-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.legend-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--uk-text, #0b1220);
}

.legend-value {
    font-size: 12px;
    color: var(--uk-text-muted, #64748b);
}

.legend-percentage {
    font-size: 14px;
    font-weight: 700;
    color: var(--uk-text, #0b1220);
    margin-left: auto;
}

/* =================================================================
   MOBILE ADJUSTMENTS
   ================================================================= */

@media screen and (max-width: 900px) {
    /* ================================================
       BASE MOBILE RULES - PREVENT HORIZONTAL SCROLL
       ================================================ */

    html, body {
        max-width: 100vw !important;
        overflow-x: clip !important;
    }

    /* Force all containers to stay within viewport */
    .flipping-form,
    .flipping-wrapper,
    .uk-card,
    .uk-section,
    .uk-step,
    .uk-field {
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* All inputs, buttons, and form elements */
    input,
    select,
    textarea,
    button,
    .uk-btn {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ================================================
       TOUCH TARGET OPTIMIZATION
       ================================================ */

    .uk-btn,
    button {
        min-height: 44px !important;
        font-size: 14px !important;
        padding: 12px 16px !important;
    }

    input,
    select,
    textarea,
    .uk-input {
        min-height: 44px !important;
        font-size: 16px !important; /* Prevent iOS auto-zoom */
    }

    /* ================================================
       SCENARIO SELECTOR & NAMES SECTION
       ================================================ */

    /* Scenario count buttons - ensure adequate touch targets */
    .scenario-selector {
        margin-bottom: 20px;
    }

    .scenario-selector-label {
        font-size: 14px !important;
        margin-bottom: 8px;
    }

    .seg-wrap {
        padding: 0 !important;
    }

    .seg-btn {
        min-height: 44px !important;
        padding: 12px 8px !important;
        font-size: 13px !important;
    }

    /* Scenario names - force single column */
    .scenario-names-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .scenario-name-field {
        width: 100% !important;
    }

    /* Autofyll section - ensure good mobile spacing */
    .autofyll-section {
        padding: 16px !important;
        margin-top: 16px !important;
    }

    .autofyll-header {
        margin-bottom: 16px;
    }

    .uk-range-wrap {
        gap: 12px !important;
    }

    /* ================================================
       MULTI-SCENARIO FIELD GRIDS (CRITICAL FIX)
       ================================================ */

    /* Force all scenario field rows to single column */
    .scenario-field-row,
    .scenario-field-row[data-scenarios="1"],
    .scenario-field-row[data-scenarios="2"],
    .scenario-field-row[data-scenarios="3"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 0 !important;
    }

    /* Label takes full width on mobile */
    .scenario-field-row > label:first-child,
    .scenario-row-label {
        width: 100% !important;
        padding: 0 !important;
        margin-bottom: 8px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
    }

    /* Each scenario field wrapper full width */
    .scenario-field-wrapper {
        width: 100% !important;
        margin-bottom: 12px !important;
    }

    /* Add better spacing between different field sections */
    .scenario-field-row + .scenario-field-row {
        margin-top: 24px !important;
    }

    /* Specific spacing between key sections */
    .scenario-fields-container > .uk-field {
        margin-bottom: 24px !important;
    }

    /* Scenario labels (blue tags) - make more prominent */
    .scenario-label {
        font-size: 12px !important;
        padding: 4px 10px !important;
        margin-bottom: 6px !important;
    }

    /* Scenario field inputs */
    .scenario-field-input {
        width: 100% !important;
    }

    /* Slider + input combos within scenario fields */
    .scenario-field-slider {
        width: 100% !important;
        margin-top: 8px;
    }

    /* ================================================
       EGENKAPITAL SECTION
       ================================================ */

    .egenkapital-section {
        padding: 0 !important;
    }

    .egenkapital-section[data-scenarios="1"],
    .egenkapital-section[data-scenarios="2"],
    .egenkapital-section[data-scenarios="3"] {
        grid-template-columns: 1fr !important;
    }

    /* Remove left padding offset for multi-scenario */
    .egenkapital-slider-row {
        padding-left: 0 !important;
        margin-top: 12px !important;
    }

    .egenkapital-slider-row::before {
        display: none !important; /* Hide the "Egenkapital" pseudo-element label */
    }

    /* Fix kr-wrapper to stack vertically instead of display: contents */
    .egenkapital-section[data-scenarios="2"] .egenkapital-kr-wrapper,
    .egenkapital-section[data-scenarios="3"] .egenkapital-kr-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .egenkapital-top-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    /* Stack kr inputs vertically */
    .egenkapital-kr-inputs {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .egenkapital-kr-input-wrapper {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }

    /* Add scenario labels before kr inputs on mobile */
    .egenkapital-kr-input-wrapper[data-scenario="1"]::before {
        content: "Scenario 1" !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #6b7280 !important;
    }

    .egenkapital-kr-input-wrapper[data-scenario="2"]::before {
        content: "Scenario 2" !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #6b7280 !important;
    }

    .egenkapital-kr-input-wrapper[data-scenario="3"]::before {
        content: "Scenario 3" !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #6b7280 !important;
    }

    /* ================================================
       DYNAMIC COST ROWS (OPPUSSING, MONTHLY, YEARLY, SALG)
       ================================================ */

    /* Force 1 cost row per line instead of 2 per row */
    .dynamic-costs-scenario,
    .dynamic-costs-simple {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Individual cost row - stack all inputs vertically for multi-scenario */
    .scenario-cost-row,
    .simple-cost-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 14px !important;
        background: #f9fafb;
        border-radius: 10px;
        margin-bottom: 12px !important;
    }

    .scenario-cost-row[data-scenarios="2"],
    .scenario-cost-row[data-scenarios="3"] {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Cost name input full width */
    .cost-name-input {
        width: 100% !important;
        margin-bottom: 8px !important;
    }

    /* Amount inputs container - stack vertically */
    .cost-amounts-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    /* Individual amount input wrappers */
    .cost-amount-wrapper {
        width: 100% !important;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .cost-amount-input {
        width: 100% !important;
    }

    /* Remove button stays in top-right corner on mobile (X icon) - slightly larger for touch */
    html body .flipping-form .scenario-cost-row .remove-btn,
    html body .flipping-form .simple-cost-row .remove-btn,
    .flipping-form .scenario-cost-row .remove-btn,
    .flipping-form .simple-cost-row .remove-btn {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
        top: 0px !important;
        right: 0px !important;
        font-size: 0 !important; /* Hide text */
    }

    html body .flipping-form .scenario-cost-row .remove-btn::before,
    html body .flipping-form .simple-cost-row .remove-btn::before,
    .flipping-form .scenario-cost-row .remove-btn::before,
    .flipping-form .simple-cost-row .remove-btn::before {
        font-size: 22px !important;
        color: #ef4444 !important;
    }

    /* Add row buttons full width */
    .add-cost-btn,
    .add-row-btn {
        width: 100% !important;
        min-height: 44px !important;
    }

    /* Cost section hints */
    .cost-hint,
    .uk-help {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    /* ================================================
       RESULTS SECTION
       ================================================ */

    /* Results tabs - reduce padding for mobile */
    .results-tabs-switcher {
        gap: 6px !important;
        padding: 6px !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
    }

    .results-tab {
        flex: 1 1 auto !important;
        min-width: 70px !important;
        padding: 10px 8px !important;
        font-size: 12px !important;
        white-space: nowrap;
    }

    /* Results - main section */
    .uk-result-main {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .uk-result-primary {
        padding: 24px !important;
    }

    .uk-result-value {
        font-size: 36px !important;
    }

    /* Results - details section */
    .uk-result-details {
        grid-template-columns: 1fr !important;
    }

    /* ================================================
       COMPARISON TABLE - CARD STYLE FOR MOBILE
       ================================================ */

    /* Hide comparison header on mobile */
    .comparison-header {
        display: none !important;
    }

    /* Each comparison row becomes a card */
    .comparison-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        margin-bottom: 16px !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 12px !important;
        padding: 16px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    }

    /* Row label (metric name) as card header */
    .row-label {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #1f2937 !important;
        padding-bottom: 12px !important;
        border-bottom: 2px solid #e5e7eb !important;
        margin-bottom: 8px !important;
        text-align: left !important;
    }

    /* Row values stack vertically with scenario labels */
    .row-value {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 12px 16px !important;
        border-bottom: 1px solid #f3f4f6 !important;
        font-size: 15px !important;
        gap: 24px !important;
    }

    .row-value:last-child {
        border-bottom: none !important;
    }

    /* Add scenario labels before values using ::before */
    .row-value[data-scenario="1"]::before {
        content: "Scenario 1" !important;
        font-weight: 600 !important;
        font-size: 11px !important;
        color: #9ca3af !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        margin-bottom: 2px !important;
    }

    .row-value[data-scenario="2"]::before {
        content: "Scenario 2" !important;
        font-weight: 600 !important;
        font-size: 11px !important;
        color: #9ca3af !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        margin-bottom: 2px !important;
    }

    .row-value[data-scenario="3"]::before {
        content: "Scenario 3" !important;
        font-weight: 600 !important;
        font-size: 11px !important;
        color: #9ca3af !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        margin-bottom: 2px !important;
    }

    /* Value color coding for profits/losses */
    .row-value.positive {
        color: #059669 !important;
        font-weight: 600 !important;
    }

    .row-value.negative {
        color: #dc2626 !important;
        font-weight: 600 !important;
    }

    /* ================================================
       PIE CHARTS (ALREADY OPTIMIZED - KEEP EXISTING)
       ================================================ */

    .pie-chart-wrapper {
        flex-direction: column !important;
        gap: 16px !important;
    }

    .pie-chart-container {
        max-width: 100% !important;
        min-height: 250px !important;
        order: 1 !important;
    }

    .pie-chart-legend {
        max-width: 100% !important;
        order: 2 !important;
    }

    /* ================================================
       IOS AUTO-ZOOM PREVENTION (COMPREHENSIVE)
       ================================================ */

    /* Force 16px font-size on ALL input fields to prevent iOS zoom */
    .flipping-form input[type="text"],
    .flipping-form input[type="number"],
    .flipping-form input[type="url"],
    .flipping-form input[type="email"],
    .flipping-form input[type="tel"],
    .flipping-form select,
    .flipping-form textarea,
    .uk-input,
    .cost-name-input,
    .cost-amount-input,
    .scenario-field-input input,
    input[name^="kjopssum"],
    input[name^="salgssum"],
    input[name^="oppussingstid"],
    input[name^="estimerte_arbeidstimer"],
    input[name^="egenkapital"],
    input[name^="lopetid_ar"],
    input[name^="megler_pct"],
    input[name^="skatt_pct"],
    #scenario_variance_input,
    .oppussingstid-input,
    .scenario-name-input {
        font-size: 16px !important;
    }

    /* ================================================
       MISCELLANEOUS MOBILE ADJUSTMENTS
       ================================================ */

    /* Section headings */
    .uk-step-title {
        font-size: 22px !important;
        margin-bottom: 16px !important;
    }

    /* Field labels */
    .uk-field label {
        font-size: 14px !important;
        margin-bottom: 6px !important;
    }

    /* Help text */
    .uk-help {
        font-size: 13px !important;
    }

    /* Badges and totals */
    .badge-total {
        font-size: 14px !important;
        padding: 8px 12px !important;
    }

    /* Info section - stack finn input and button */
    .info-finn-input-row {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .info-finn-input-row .uk-btn {
        width: 100% !important;
    }

    /* Info layout - single column */
    .info-layout {
        grid-template-columns: 1fr !important;
    }

    .info-image-wrapper {
        min-height: 250px !important;
    }

    .info-details-grid {
        grid-template-columns: 1fr !important;
    }

    /* Results badge row - stack on mobile */
    .results-badge-row {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .results-badge {
        width: 100% !important;
    }
}

@media screen and (max-width: 600px) {
    /* ================================================
       EXTRA SMALL SCREENS - ADDITIONAL ADJUSTMENTS
       ================================================ */

    /* Further reduce font sizes for very small screens */
    .uk-step-title {
        font-size: 20px !important;
    }

    .uk-result-value {
        font-size: 32px !important;
    }

    /* Results tabs - even smaller on tiny screens */
    .results-tab {
        padding: 8px 6px !important;
        font-size: 11px !important;
        min-width: 60px !important;
    }

    /* Scenario labels */
    .scenario-label {
        font-size: 11px !important;
        padding: 3px 8px !important;
    }

    /* Reduce padding throughout for more space */
    .uk-step {
        padding: 16px !important;
    }

    .uk-field {
        margin-bottom: 16px !important;
    }

    .scenario-cost-row,
    .simple-cost-row {
        padding: 12px !important;
    }

    /* Pie chart smaller on tiny screens */
    .pie-chart-container {
        min-height: 200px !important;
    }

    /* Autofyll section */
    .autofyll-section {
        padding: 12px !important;
    }

    /* Comparison cards - reduce padding */
    .comparison-row {
        padding: 12px !important;
    }

    .row-label {
        font-size: 15px !important;
        padding-bottom: 10px !important;
    }

    .row-value {
        padding: 6px 0 !important;
        font-size: 14px !important;
    }

    .row-value::before {
        font-size: 11px !important;
    }
}

/* =================================================================
   INFORMASJON SECTION
   ================================================================= */

/* Main layout: Image left (40%), fields right (60%) */
.info-layout {
    display: grid;
    grid-template-columns: 40% 1fr;
    gap: 28px;
    align-items: start;
}

/* When no image, fields take full width */
.info-layout:not(:has(.info-image-wrapper[style*="display: block"])) {
    grid-template-columns: 1fr;
}

/* Image wrapper */
.info-image-wrapper {
    width: 100%;
    height: 100%;
    min-height: 400px;
    border-radius: 12px;
    overflow: hidden;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bolig-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fields wrapper */
.info-fields-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.info-fields-wrapper .uk-field {
    min-width: 0;
}

.info-fields-wrapper .uk-input {
    width: 100%;
    box-sizing: border-box;
}

/* FINN input row - input and button side by side under same label */
.info-finn-input-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

.info-finn-input-row .uk-input {
    flex: 1;
    min-width: 0;
}

.info-finn-input-row .uk-btn {
    white-space: nowrap;
    padding: 0 24px;
    height: 46px;
    flex-shrink: 0;
}

/* 2x2 grid for info details */
.info-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.info-details-grid .uk-field {
    min-width: 0;
}

.info-details-grid .uk-input {
    width: 100%;
    box-sizing: border-box;
}

/* Read-only style inputs */
.info-readonly {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
    cursor: pointer;
}

.info-readonly:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.info-readonly:focus {
    background: #fff;
    border-color: var(--uk-primary, #09B87D);
    cursor: text;
}

/* Mobile responsive */
@media screen and (max-width: 900px) {
    .info-layout {
        grid-template-columns: 1fr;
    }

    .info-finn-input-row {
        flex-direction: column;
    }

    .info-finn-input-row .uk-btn {
        width: 100%;
    }

    .info-details-grid {
        grid-template-columns: 1fr;
    }

    .info-image-wrapper {
        min-height: 250px;
    }
}

/* ==========================================
   KALKULATOR MODAL
   ========================================== */

.kalkulator-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    align-items: center;
    justify-content: center;
}

.kalkulator-modal.active {
    display: flex;
}

.kalkulator-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.kalkulator-modal-content {
    position: relative;
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 95%;
    max-width: 500px;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    animation: kalkulator-modal-slide-in 0.3s ease;
    overflow: hidden;
}

@keyframes kalkulator-modal-slide-in {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.kalkulator-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid var(--uk-border);
}

.kalkulator-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--uk-text);
}

.kalkulator-close {
    background: transparent !important;
    border: none;
    font-size: 32px;
    line-height: 1;
    color: #000 !important;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.kalkulator-close:hover {
    background: #f3f4f6;
    color: #111827;
}

.kalkulator-modal-body {
    padding: 24px 28px;
}

/* Calculator Display */
.calc-display-wrapper {
    margin-bottom: 20px;
    position: relative;
}

.calc-display {
    width: 100%;
    padding: 16px 20px;
    border: 2px solid var(--uk-border);
    border-radius: 12px;
    font-size: 32px;
    font-weight: 600;
    text-align: right;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    background: #f9fafb;
    color: var(--uk-text);
    cursor: pointer;
    user-select: text;
    transition: all 0.2s ease;
}

.calc-display:hover {
    background: #f3f4f6;
    border-color: var(--uk-primary);
}

.calc-copy-hint {
    margin-top: 8px;
    text-align: center;
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}

.calc-copied-notification {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: var(--uk-primary);
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.calc-copied-notification.show {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.calc-display:focus {
    outline: none;
    border-color: var(--uk-primary);
}

/* Calculator Buttons Grid */
.calc-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.calc-btn {
    padding: 20px;
    font-size: 24px;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    background: #f3f4f6;
    color: #1f2937;
}

.calc-btn:hover {
    background: #e5e7eb;
    transform: scale(1.05);
}

.calc-btn:active {
    transform: scale(0.95);
}

/* Number buttons */
.calc-num {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
}

.calc-num:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

/* Operator buttons */
.calc-op {
    background: var(--uk-primary);
    color: white;
}

.calc-op:hover {
    background: #08a875;
}

/* Equals button */
.calc-equals {
    background: var(--uk-accent);
    color: white;
}

.calc-equals:hover {
    background: #0284c7;
}

/* Clear button */
.calc-clear {
    background: #ef4444;
    color: white;
}

.calc-clear:hover {
    background: #dc2626;
}

/* Footer */
.kalkulator-modal-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 28px;
    border-top: 1px solid var(--uk-border);
    background: #f9fafb;
    border-radius: 0 0 16px 16px;
}

.kalkulator-modal-footer .uk-btn {
    width: 100%;
    padding: 12px 24px;
}

/* Responsive */
@media (max-width: 768px) {
    .calc-display {
        font-size: 28px;
        padding: 14px 16px;
    }

    .calc-btn {
        padding: 16px;
        font-size: 20px;
    }

    .calc-buttons {
        gap: 8px;
    }
}

/* ==========================================
   NOTATER MODAL
   ========================================== */

.notater-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    align-items: center;
    justify-content: center;
}

.notater-modal.active {
    display: flex;
}

.notater-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.notater-modal-content {
    position: relative;
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 95%;
    max-width: 600px;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    animation: notater-modal-slide-in 0.3s ease;
    overflow: hidden;
}

@keyframes notater-modal-slide-in {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.notater-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid var(--uk-border);
}

.notater-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--uk-text);
}

.notater-close {
    background: transparent !important;
    border: none;
    font-size: 32px;
    line-height: 1;
    color: #000 !important;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.notater-close:hover {
    background: #f3f4f6;
    color: #111827;
}

.notater-modal-body {
    padding: 24px 28px;
    flex: 1;
    overflow-y: auto;
}

.notater-modal-body textarea {
    width: 100%;
    min-height: 200px;
    padding: 12px;
    border: 1px solid var(--uk-border);
    border-radius: 8px;
    font-size: 14px;
    resize: vertical;
}

.notater-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 28px;
    border-top: 1px solid var(--uk-border);
    background: #f9fafb;
    border-radius: 0 0 16px 16px;
}

/* ==========================================
   LAGREDE MODAL
   ========================================== */

.lagrede-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    align-items: center;
    justify-content: center;
}

.lagrede-modal.active {
    display: flex;
}

.lagrede-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.lagrede-modal-content {
    position: relative;
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 95%;
    max-width: 700px;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    animation: lagrede-modal-slide-in 0.3s ease;
    overflow: hidden;
}

@keyframes lagrede-modal-slide-in {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.lagrede-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid var(--uk-border);
}

.lagrede-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--uk-text);
}

.lagrede-close {
    background: transparent !important;
    border: none;
    font-size: 32px;
    line-height: 1;
    color: #000 !important;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.lagrede-close:hover {
    background: #f3f4f6;
    color: #111827;
}

.lagrede-modal-body {
    padding: 24px 28px;
    flex: 1;
    overflow-y: auto;
}

.lagrede-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 28px;
    border-top: 1px solid var(--uk-border);
    background: #f9fafb;
    border-radius: 0 0 16px 16px;
}

/* ==========================================
   FEEDBACK MODAL
   ========================================== */

.feedback-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    align-items: center;
    justify-content: center;
}

.feedback-modal.active {
    display: flex;
}

.feedback-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.feedback-modal-content {
    position: relative;
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 95%;
    max-width: 500px;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    animation: feedback-modal-slide-in 0.3s ease;
    overflow: hidden;
}

@keyframes feedback-modal-slide-in {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.feedback-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid var(--uk-border);
}

.feedback-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--uk-text);
}

.feedback-close {
    background: transparent !important;
    border: none;
    font-size: 32px;
    line-height: 1;
    color: #000 !important;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.feedback-close:hover {
    background: #f3f4f6;
    color: #111827;
}

.feedback-modal-body {
    padding: 24px 28px;
    flex: 1;
    overflow-y: auto;
}

.feedback-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 28px;
    border-top: 1px solid var(--uk-border);
    background: #f9fafb;
    border-radius: 0 0 16px 16px;
}

/* Flipping calculator UI improvements (spacing, typography, hierarchy) */
@import url('components/flipping-ui-improvements.css');