body {
    font-family: sans-serif;
}

/* Styling for API Key gemt besked (hvis nødvendigt senere) */
.api-key-feedback {
    font-size: 0.875em;
}

/* Generel styling for modals, hvis Bootstrap defaults ikke er nok */
.modal-body {
    max-height: 70vh; /* Giver lidt plads i modalen */
    overflow-y: auto;
}

/* Styling for preview i redigeringsmodal */
#editPreviewArea img,
#editPreviewArea video,
#editPreviewArea audio {
    max-width: 100%;
    max-height: 280px; /* Bevarer konsistens med tidligere styling */
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Styling for gallerivisning */
#galleryViewContainer .gallery-item-card {
    border: 1px solid #dee2e6; /* Let kant som Bootstrap cards */
    border-radius: 0.375rem; /* Bootstrap card border-radius */
    overflow: hidden; /* Sikrer at indhold ikke flyder ud over afrundede hjørner */
    display: flex;
    flex-direction: column;
    height: 100%; /* For at sikre ens højde på kort i en række, hvis Bootstrap grid bruges korrekt */
}

#galleryViewContainer .gallery-item-image-wrapper {
    height: 200px; /* Fast højde for billedcontainer */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa; /* Lys baggrund for billeder der ikke fylder helt */
    overflow: hidden;
}

#galleryViewContainer .gallery-item-card img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain; /* Viser hele billedet, kan efterlade tom plads */
    /* Alternativt: object-fit: cover; for at fylde, men beskære */
    display: block; /* Fjerner evt. bund-margin på inline billeder */
}

#galleryViewContainer .gallery-item-card .card-body {
    padding: 0.75rem; /* Lidt mindre padding end standard Bootstrap card-body */
    text-align: center;
    flex-grow: 1; /* Tillader card-body at vokse for at fylde plads, hvis kortene har forskellig mængde tekst */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#galleryViewContainer .gallery-item-card .card-title {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    word-break: break-all; /* Forhindrer lange filnavne i at bryde layout */
    /* Gør titlen lidt mindre og tilføjer orddeling */
}

#galleryViewContainer .gallery-item-card .btn-group-sm .btn,
#galleryViewContainer .gallery-item-card .btn-sm {
    font-size: 0.75rem; /* Mindre knapper */
    padding: 0.2rem 0.4rem;
}

/* Sikrer at tooltips ikke er under modalen */
.tooltip {
    z-index: 1080; /* Højere end Bootstrap modal z-index (1050-1070) */
}

/* Styling for billedvisningsmodal */
#imageViewerModal .modal-body {
    padding: 0; /* Fjerner padding så billedet kan gå til kant */
}

#imageViewerModalImage {
    display: block;
    margin: auto; /* Centrerer billedet hvis det er mindre end modalen */
}