/**
 * Haupt-App-Styles (aus base.html ausgelagert)
 */

body {
    background-color: #f8f9fa;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding-top: 70px;
    padding-bottom: 90px;
}
.navbar-brand {
    font-weight: bold;
    font-size: 1.5rem;
}
.brand-tm {
    font-size: 0.5em;
    vertical-align: baseline;
    position: relative;
    top: -0.85em;
}
.brand-version {
    font-size: 0.5em;
    opacity: 0.8;
}
.card {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border: none;
}
.container-path {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.9rem;
}
.stats-card {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
}
.search-box {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: none;
    border-radius: 25px;
}
.footer {
    background: #343a40;
    color: white;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1030;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Header Avatar - fixe Groesse */
.header-avatar {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    object-fit: cover !important;
}

/* Chat Header Avatar - 32px */
.chat-header-avatar {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    object-fit: cover !important;
}

/* Chat Message Avatar - 22px */
.chat-message-avatar {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    object-fit: cover !important;
}

/* Bildgroessen (CSP-konform) */
.img-thumb-50 {
    width: 50px;
    height: 50px;
    object-fit: cover;
}
.img-thumb-200 {
    width: 100%;
    height: 200px;
    object-fit: contain;
    background: #f8f9fa;
}
.img-preview-200 {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
}
.img-header-400:not(.gallery-thumb img) {
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
}
.img-placeholder-50 {
    width: 50px;
    height: 50px;
}
.img-placeholder-200 {
    height: 200px;
}

/* Bildergalerie */
.gallery-main-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 0.25rem;
}
.gallery-main-container-large {
    height: 400px;
    min-height: 400px;
    max-height: 400px;
}
.gallery-main-container-medium {
    height: 200px;
    min-height: 200px;
    max-height: 200px;
}
.gallery-main-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Galerie Thumbnails */
.gallery-thumb {
    width: 80px !important;
    height: 80px !important;
    overflow: hidden !important;
    border-radius: 4px !important;
    border: 2px solid transparent !important;
    background: #f8f9fa !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.gallery-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}
.gallery-thumb.active {
    border-color: #0d6efd !important;
}
.gallery-thumb-container {
    gap: 8px;
}

/* Bildergalerie Edit-Modus */
.gallery-edit-container {
    width: 100%;
    height: 133px;
    overflow: hidden;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gallery-edit-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Footer-Icons */
.footer-actions {
    max-width: 400px;
    margin: 0 auto;
}
.footer-icon-link {
    text-decoration: none !important;
}
.footer-icon {
    display: inline-block;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer-icon-blue {
    background: linear-gradient(145deg, #2563eb, #60a5fa);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.33);
}
.footer-icon-gray {
    background: linear-gradient(145deg, #e5e7eb, #d1d5db);
    box-shadow: 0 4px 12px rgba(107, 114, 128, 0.33);
}
.footer-icon-green {
    background: linear-gradient(145deg, #16a34a, #4ade80);
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.33);
}
.footer-icon-shadow-blue {
    text-shadow: 0 2px 8px rgba(37, 99, 235, 0.6);
}
.footer-icon-shadow-gray {
    text-shadow: 0 2px 8px rgba(107, 114, 128, 0.6);
}
.footer-icon-shadow-green {
    text-shadow: 0 2px 8px rgba(22, 163, 74, 0.6);
}

/* Crawler Breadcrumb Cards */
.crawler-breadcrumb-card {
    min-width: 120px;
}

/* Autocomplete */
.autocomplete-wrapper {
    position: relative;
}
.autocomplete-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1070;
    max-height: 300px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* Initial-State: Bild-Vorschau versteckt (JS toggle via style.display) */
.image-preview-initial-hidden {
    display: none;
}

/* Grid-View Cards (Orte + Gegenstaende Kachelansicht) */
.grid-view-card {
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}
.grid-view-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Mobile: Toolbar-Buttons verkleinern (< 768px = Bootstrap md Breakpoint) */
@media (max-width: 767.98px) {
    .btn-mobile-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }
}