/* static/style.css */

body {
    font-family: 'Inter', sans-serif;
    /* Farver og grundlæggende typografi styres primært af Tailwind klasser
       på body-tagget i HTML (f.eks. bg-slate-900, text-slate-300) */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Forhindrer horisontal scroll som udgangspunkt */
    background-color: #000; /* Fra gammel index.html */
    color: #fff; /* Fra gammel index.html */
    margin: 0; /* Fra gammel index.html */
    padding: 0; /* Fra gammel index.html */
    font-size: 16px; /* Basis font size fra gammel index.html */
}

.metric-value.positive-return, .positive-return {
    color: #22c55e; /* Tailwind green-500 */
}

.metric-value.negative-return, .negative-return {
    color: #ef4444; /* Tailwind red-500 */
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* For glattere scrolling på iOS */
}

.modal {
    display: none; /* Skjult som standard, styres af JavaScript */
    position: fixed;
    z-index: 1000; /* Sikrer at modalen er øverst */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Gør det muligt at scrolle i modalen hvis indholdet er for højt */
    background-color: rgba(0,0,0,0.7); /* Mørk semi-transparent baggrunds-overlay */
}

.btn {
    transition: background-color 0.2s ease, transform 0.1s ease, opacity 0.2s ease;
}

.btn:hover {
    opacity: 0.85;
}

.btn:active {
    transform: scale(0.97);
}

.chart-controls button.active {
    background-color: #2563eb; /* Tailwind blue-600 */
    color: #e2e8f0; /* Tailwind slate-100 or slate-200 for god kontrast */
}

input[type="date"] {
    color-scheme: dark;
}

select option {
    background-color: #334155; /* Tailwind slate-700 */
    color: #e2e8f0;       /* Tailwind slate-200 */
}

*:focus-visible {
    outline: 2px solid #3b82f6; /* Tailwind blue-500 */
    outline-offset: 2px;
}

/* Styling for aktiesøgningsresultater */
#stock-search-results div:hover {
     background-color: #334155; /* Tailwind slate-700, lidt mørkere for hover */
}
.search-suggestion {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #475569; /* Tailwind slate-600 */
}
.search-suggestion:last-child {
    border-bottom: none;
}

/* Styling for readonly felter for at de ikke ser deaktiverede ud, men indikerer auto-udfyldning */
input[readonly].auto-filled-field {
    background-color: #475569; /* Tailwind slate-600 */
    color: #cbd5e1; /* Tailwind slate-300 */
    cursor: default;
}

/* Responsive justeringer for kontantopdateringsformularen */
/* Selve flex-opsætningen (flex-col sm:flex-row etc.) håndteres bedst med Tailwind klasser direkte i HTML. */
/* Denne CSS kan bruges til yderligere finjusteringer, hvis Tailwind ikke er nok. */

/* Eksempel: Hvis inputfeltet i kontant-opdatering skal have specifik minimumsbredde på små skærme */
/*
#cash-update-form input[type="number"] {
    min-width: 150px; // Juster efter behov
}
*/

/* CSS der er flyttet fra index.html */
.container {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}
#updateInfo {
    padding-top: 10px;
    text-align: center;
    margin-bottom: 15px;
    font-size: 0.875em; /* ca. 14px */
    color: #ccc;
}
#afkastDisplay {
    font-size: 2.25em; /* ca. 36px */
    font-weight: bold;
    text-align: center;
    margin: 20px 0;
    word-wrap: break-word;
}
.positiv {
    color: #00ff00;
}
.negativ {
    color: #ff0000;
}
#chartContainer {
    position: relative;
    width: 100%;
    margin: 20px 0;
}
#afkastChart {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 450px;
}
#senesteKurs {
    margin: 20px 0;
    text-align: center;
}
#kursContainer {
    display: inline-block;
    text-align: left;
    max-width: 100%;
}
#senesteKurs p {
    margin: 5px 0;
    font-size: 1em; /* ca. 16px */
    word-wrap: break-word;
}
#senesteKurs span.pris {
    margin-left: 10px;
}
#senesteKurs span.positiv { /* Gælder for span inde i p */
    color: #00ff00;
}
#senesteKurs span.negativ { /* Gælder for span inde i p */
    color: #ff0000;
}

/* Responsive design for mindre skærme */
@media (max-width: 600px) {
    body {
        font-size: 14px;
    }
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    #afkastDisplay {
        font-size: 1.8em;
    }
    #chartContainer {
        margin: 15px 0;
    }
     #afkastChart {
        aspect-ratio: 4 / 3;
        max-height: 60vh;
     }
    #senesteKurs {
        margin: 15px 0;
        text-align: center;
    }
    #kursContainer {
        display: block;
        text-align: center;
        width: 100%;
    }
    #senesteKurs p {
        font-size: 1.1em;
        margin: 8px 0;
        text-align: center;
    }
     #senesteKurs span.pris { /* Gælder span på mobil */
         display: block;
         margin-left: 0;
         margin-top: 3px;
         font-size: 0.9em;
     }
     /* Sørg for at P/L detaljer også formateres på mobil */
     #senesteKurs span.pris span { /* Gælder de indre spans på mobil */
         display: inline; /* Vis % og DKK på samme linje som før */
         margin-left: 5px; /* Lidt luft mellem % og DKK */
         font-size: 1em; /* Tilbage til normal størrelse ift forældre */
     }
}

 @media (max-width: 380px) {
     #afkastDisplay {
         font-size: 1.6em;
     }
 }