/* App-specific styles */

/* General Styling */
body {
    background-color: #f8fafc; /* Lighter gray background */
}

.card {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* Softer shadow */
}

.card-header {
    background-color: #fff; /* Ensure card headers are white */
    border-bottom: 1px solid #e5e7eb; /* Lighter border */
}

.page-title {
    color: #1e3a8a; /* Dark blue title */
}

/* Input Form Styling */
.form-label {
    display: inline-flex; /* Use flex to align text and icon */
    align-items: center; /* Vertically center items */
    gap: 0.25rem; /* Add small space between text and icon */
}

.form-label a,
.form-label a:hover {
    color: #6b7280; /* Gray color for icon */
    text-decoration: none;
    display: inline-flex; /* Ensure icon aligns properly */
    align-items: center;
}

.form-label .icon-tabler-help {
    width: 1rem; /* Slightly smaller icon */
    height: 1rem;
}

.form-fieldset legend {
    font-weight: 600;
    color: #1e3a8a; /* Dark blue legend */
}

/* Dashboard Styling */
.text-dashboard-good {
    color: #16a34a; /* Softer Green */
}

.text-dashboard-ok {
    color: #f59e0b; /* Softer Amber */
}

.text-dashboard-bad {
    color: #ef4444; /* Softer Red */
}

#dashboard-cashflow.h1,
#dashboard-coc.h1,
#dashboard-ltv.h1,
#dashboard-dscr.h1 {
    font-weight: 600; /* Make dashboard numbers slightly bolder */
}

/* Results Styling */
#detailed-results-card dt.fw-bold,
#projections-card dt.fw-bold {
    color: #1e3a8a; /* Dark blue for bold result titles */
}

/* Chart Styling */
/* 
#equityChart,
#cashFlowChart {
    max-height: 180px; // Commented out - likely handled by Chart.js/print styles
} 
*/

/* AI Chat Widget Styles */
#ai-chat-widget {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    width: 450px; /* Increased width */
    max-width: 90%;
    z-index: 1050; /* Ensure it's above other elements */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 
    border-radius: 0.5rem;
    overflow: hidden; /* Important for hiding body */
    transition: height 0.3s ease, width 0.3s ease; /* Smooth transition */
}

#ai-chat-widget.minimized {
     /* Style when minimized - primarily controlled by hiding body */
     height: auto; /* Let header determine height */
}

.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 0.5rem 1rem;
    background-color: #fff; /* Give header a background */
    border-bottom: 1px solid #e5e7eb;
}

.chat-header .card-title {
    font-size: 0.9rem; /* Slightly smaller title */
    font-weight: 600;
    margin-bottom: 0; /* Remove default margin */
}

.chat-body {
    padding: 0.75rem; 
    max-height: 75vh; /* Limit overall height to 75% of viewport */
    background-color: #fff;
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack elements vertically */
    overflow: hidden; /* Prevent body itself from scrolling */
}

.chat-messages {
    flex-grow: 1; /* Allow message area to take available space */
    /* height: auto; Remove fixed height */
    overflow-y: auto; /* Enable scrolling within messages */
    margin-bottom: 0.75rem; 
    padding-right: 0.5rem; 
    border: 1px solid #e5e7eb;
    border-radius: 0.25rem;
    padding: 0.5rem;
}

.chat-message {
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    line-height: 1.4;
    word-wrap: break-word;
}

.chat-message.user {
    background-color: #e0f2fe; /* Light blue */
    color: #0c5464;
    margin-left: auto;
    max-width: 85%;
    text-align: right;
}

.chat-message.assistant {
    background-color: #f1f3f5; /* Light gray */
    color: #495057;
    max-width: 85%;
}

.chat-message.error {
    background-color: #f8d7da; /* Light red */
    color: #721c24;
    text-align: center;
    font-style: italic;
    max-width: 100%;
}

#api-key-section, /* Target both input sections */
#chat-input-section {
    flex-shrink: 0; /* Prevent input areas from shrinking */
}

#openai-api-key::placeholder {
    font-size: 0.8rem;
}

#chat-input {
    flex-grow: 1;
}

#chat-status {
    min-height: 1.2em; /* Prevent layout shifts */
}

/* --- Print Specific Styles --- */
@media print {
    /* Hide elements not needed for print */
    body {
        padding-top: 0 !important; /* Remove body padding */
    }
    .page-header,
    /* #calculator-form, */ /* Don't hide whole form */
    #ai-chat-widget,
    #print-button,
    #calculator-form .card-header .card-actions, /* Hide input card actions */
    /* Hide specific fieldsets in the form */
    #fieldset-purchase-loan,
    #fieldset-renovation,
    #fieldset-refinancing,
    #fieldset-rent,
    #fieldset-opex,
    #fieldset-tax-assumptions,
    .d-print-none /* Hide anything explicitly marked */
    {
        display: none !important;
    }

    /* Make both main columns stack */
    .page-body .container-xl .row.g-4 > .col-lg-6 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        display: block !important; /* Make them stack */
        float: none !important; /* Override potential floats */
        margin-bottom: 20px; /* Add space between stacked columns */
    }

    /* Ensure the row inside the visible fieldset still uses flex */
    #fieldset-property-info > .row {
        display: flex !important;
        flex-wrap: wrap !important;
    }
    /* Ensure the columns inside the visible fieldset behave */
    #fieldset-property-info .col-md-6 {
        width: 50% !important; /* Force 50% width for md breakpoint */
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    #fieldset-property-info .col-md-12 { /* Handle the Adresse and Eierskap fields */
        width: 100% !important; 
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Ensure charts are visible and maybe smaller? */
    .chart-container {
        display: block !important; /* Ensure they are visible if hidden before */
        width: 90%; /* Make charts slightly smaller to fit A4 */
        max-width: 500px; /* Max width to prevent huge charts */
        margin: 10px auto; /* Center charts */
        page-break-inside: avoid; /* Try to keep chart on one page */
    }
    .chart-container canvas {
        max-height: 250px; /* Limit chart height */
    }

    /* Improve card appearance for print */
    .card {
        border: 1px solid #ccc;
        box-shadow: none;
        margin-bottom: 15px; /* Add some space between cards */
        page-break-inside: avoid; /* Try to keep card content together */
    }

    /* Ensure text is readable */
    body, .card-body, .card-title, dt, dd {
        color: #000 !important; /* Force black text */
    }
    
    /* Remove coloring from dashboard/results for print */
    .text-dashboard-good,
    .text-dashboard-ok,
    .text-dashboard-bad {
        color: #000 !important;
    }

    /* Optional: Add page breaks before key sections */
    #card-invest + .card { /* Card after investment card */
         /* page-break-before: always; */ /* Uncomment if needed */
    }
    .card:has(#cashFlowChart) { /* Projections card */
         page-break-before: always;
    }
} 

/* Styling for inactive input sections */
.section-inactive .form-control,
.section-inactive .form-selectgroup-label {
    background-color: #f8f9fa !important; /* Light gray background */
    opacity: 0.6;
    pointer-events: none; /* Disable interaction */
    cursor: not-allowed;
}

/* Make labels in inactive sections slightly dimmer */
.section-inactive .form-label {
    opacity: 0.7;
    cursor: not-allowed;
}