/* ============================================
   MediaBrowser: Spezifisches CSS
   (Nutzt ansonsten deine globalen Modal-Klassen)
   ============================================ */

/* Wrapper im Modal-Body */
.media-browser-host {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* Damit es im modal-matter den Platz füllt */
    min-height: 400px; 
    max-height: 70vh; /* Scrollbar erzwingen wenn zu groß */
}

/* Haupt-Layout */
.media-browser {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--border-1);
    border-radius: 4px;
    background-color: var(--background-2);
    overflow: hidden;
}

/* Toolbar (angepasst an dein Design) */
.media-browser-toolbar {
    padding: 8px;
    background-color: var(--background-1);
    border-bottom: 1px solid var(--border-1);
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* Pfad-Leiste */
.media-browser-path {
    padding: 5px 10px;
    font-size: 0.9em;
    background-color: var(--accent-2);
    border-bottom: 1px solid var(--border-1);
    color: var(--text-2);
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tabellen-Container (Scrollbar) */
.media-browser-table-wrapper {
    flex: 1;
    overflow: auto;
    background-color: #fff;
}

/* Tabelle */
.media-browser-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

.media-browser-table th {
    background-color: var(--background-1);
    color: var(--accent-1);
    text-align: left;
    padding: 8px;
    position: sticky;
    top: 0;
    border-bottom: 2px solid var(--border-1);
    z-index: 2;
}

.media-browser-table td {
    padding: 6px 8px;
    border-bottom: 1px dotted rgba(200,200,200,0.5); /* Dein td Style */
    vertical-align: middle;
}

.media-browser-table tr:hover {
    background-color: rgba(0,0,0,0.05);
}

/* Checkbox Spalte */
.mb-col-check { width: 30px; text-align: center; }

/* Buttons in der Tabelle */
.mb-col-actions button {
    /* Deine .button-xs Styles imitieren oder nutzen */
    border: 1px solid var(--border-2);
    background-color: var(--button-bg);
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 0.85em;
    cursor: pointer;
    margin-left: 2px;
}
.mb-col-actions button:hover {
    background-color: var(--button-hover);
}

/* Footer (Editor Mode) */
.mb-editor-footer {
    padding: 10px;
    color: var(--accent-1);
    background-color: var(--background-1);
    border-top: 1px solid var(--border-1);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

/* ============================================
   Share Modal Spezifika 
   (Nutzt auch deine .modal-matter Struktur)
   ============================================ */

/* Container für Suchfelder (Dropdowns) */
.searchable-container {
    width: 100%;
}
.searchable-input {
    /* Dein Style war top: -1.8em -> das passt */
    /* Hier evtl. Anpassung falls im Modal nötig */
}

/* Layout im Share-Modal */
.mb-share-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    align-items: center;
}

.mb-share-url-row {
    display: flex;
    gap: 5px;
    margin-top: 5px;
}
.mb-share-url {
    flex: 1;
    /* Nutze deine Input-Styles */
    border: 1px solid var(--glass-border);
    padding: 5px;
}

.mb-acl-current {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border-1);
    margin-top: 10px;
}

/* Responsive Fixes für Mobile */
@media (max-width: 768px) {
    .mb-editor-footer {
        flex-direction: column;
        align-items: stretch;
    }
    .mb-share-row, .mb-share-url-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    /* Toolbar Buttons auf Mobile etwas größer für Touch */
    .mb-btn, .mb-upload-label {
        padding: 6px 10px;
        display: inline-block; 
        margin-bottom: 4px;
    }
    .mb-upload-label > input{
        display:none;
    }
}


/* ============================================
   NEU: Selection Preview Liste
   ============================================ */

.mb-selection-preview {
    width: 100%;
    max-height: 80px; /* Max 2-3 Zeilen */
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.mb-selection-tag {
    background-color: #e2e8f0;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #334155;
    user-select: none;
}

.mb-selection-tag.is-folder {
    background-color: #fef9c3; /* Gelblich für Ordner */
    border-color: #fde047;
}

.mb-tag-remove {
    cursor: pointer;
    font-weight: bold;
    color: #94a3b8;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

.mb-tag-remove:hover {
    background-color: #ef4444;
    color: white;
}

/* Footer Container anpassen */
.mb-editor-footer {
    flex-direction: column; 
    align-items: stretch;
}

.mb-footer-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

/* ============================================
   Upload Progress Overlay
   ============================================ */
.mb-progress-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    z-index: 50;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(2px);
}

.mb-progress-container {
    width: 60%;
    max-width: 400px;
    background: #e2e8f0;
    border-radius: 999px;
    height: 10px;
    overflow: hidden;
    margin-bottom: 10px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.mb-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    transition: width 0.1s linear;
    border-radius: 999px;
}

.mb-progress-text {
    font-size: 0.9rem;
    color: #334155;
    font-weight: 600;
}

.mb-progress-subtext {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 4px;
}

/* ============================================
   MediaBrowser Utilities (statt Inline-Styles)
   ============================================ */

/* Utility: Verstecken */
.mb-hidden {
    display: none !important;
}

/* Utility: Layout */
.mb-relative {
    position: relative;
}

.mb-flex-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.mb-flex-wrap {
    flex-wrap: wrap;
}

.mb-align-center {
    align-items: center;
}

/* Ordner-Link in Tabelle */
.mb-folder-name {
    cursor: pointer;
    font-weight: bold;
}

/* Upload Label */
.mb-upload-label {
    cursor: pointer;
    border-style: dashed;
}

.mb-upload-label > input{
        display:none;
    }

/* === Share Modal Spezifische Styles === */

/* Grauer Einstellungs-Kasten oben */
.mb-settings-box {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
}

/* Zeile für Auth-Fallback (Basis-Regel) */
.mb-auth-fallback-row {
    margin-bottom: 10px;
    border-top: 1px solid #ddd;
    padding-top: 10px;
}

/* Labels und Selects im Modal */
.mb-label-bold {
    margin: 0;
    font-weight: bold;
}

.mb-select-bold {
    padding: 5px;
    font-weight: bold;
}

.mb-select-normal {
    padding: 5px;
}

/* Hint Text */
.mb-hint-text {
    margin-bottom: 10px;
    font-size: 0.9em;
    color: #555;
}

/* Zeile für Datumsauswahl */
.mb-date-row {
    display: flex;
    gap: 10px;
    align-items: center;
    background: var(--background-2);
    padding: 5px;
    border-radius: 3px;
    margin-top: 10px; /* Abstand nach oben */
}

.mb-push-right {
    margin-left: auto;
}

/* Container Wrapper für Dropdowns */
.mb-select-container {
    flex: 1;
    min-width: 200px;
}
.mb-select-full {
    display: block;
    width: 100%;
}

/* Modal Wrapper (Overlay) */
.mb-modal-overlay {
    display: block;
    z-index: 10000;
}

/* Modal Container Breite */
.mb-modal-width-large {
    max-width: 100%;
}

/* Abstandhalter */
.mb-mt-10 { margin-top: 10px; }
.mb-mt-20 { margin-top: 20px; }
.mb-mb-10 { margin-bottom: 10px; }

/* Flex Items fixieren */
.mb-flex-fixed {
    flex: 0 0 auto;
}

/* Mobile Optimierung für Date-Row */
@media (max-width: 640px) {
    .mb-date-row {
        flex-direction: column;
        align-items: stretch;
    }
    .mb-push-right {
        margin-left: 0;
        width: 100%;
    }
}

/* ============================================================
   FIX: Layout-Reset für MediaBrowser Modals
   Überschreibt die globalen .modal-* Styles NUR hier
   ============================================================ */

/* 1. Container: Zentrierung korrigieren & Margins entfernen */
.mb-modal-overlay .modal-container {
    margin: 50px auto !important; /* Statt 0% 15% auto ... */
    width: 90% !important;
    max-width: 800px !important;
    padding: 0 !important; /* Padding machen wir in den inneren Elementen */
    display: flex;
    flex-direction: column;
    max-height: 90vh; /* Damit es auf den Screen passt */
    border-radius: 8px;
    overflow: hidden; /* Damit Header-Ecken abgerundet bleiben */
}

/* 2. Header: Das 15% Margin Problem lösen & Flexbox statt Float */
.mb-modal-overlay .modal-headline {
    margin: 0 !important; /* WICHTIG: Das killt den riesigen Abstand */
    height: auto !important;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f1f5f9; /* Hellgrauer Hintergrund für Header */
    border-bottom: 1px solid #cbd5e1;
    flex-shrink: 0;
}

/* 3. Titel: Schriftgröße normalisieren (war 3rem) */
.mb-modal-overlay .modal-title {
    float: none !important;
    font-size: 1.5rem !important; /* Kleiner als deine globalen 3rem */
    font-weight: 600;
    color: #1e293b !important; /* Dunkle Farbe erzwingen */
    padding: 0 !important;
    max-width: none !important;
}

/* 4. Schließen-Kreuz: Position korrigieren (war float:right) */
.mb-modal-overlay .modal-close {
    float: none !important;
    font-size: 1.5rem !important; /* War 4rem - viel zu groß für hier */
    color: #64748b !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transition: background 0.2s;
}

.mb-modal-overlay .modal-close:hover {
    background-color: rgba(0,0,0,0.1);
    color: #ef4444 !important; /* Rot beim Hover */
}

/* 5. Inhalt: Abstände korrigieren */
.mb-modal-overlay .modal-matter {
    margin: 0 !important;
    padding: 20px !important;
    width: 100% !important;
    overflow-y: auto; /* Scrollbar wenn Inhalt zu lang */
    background: #fff;
}

/* 6. Tabelle und Dropdowns fixen (falls sie rausfliegen) */
.mb-modal-overlay .post-container {
    margin: 0 0 15px 0 !important;
    padding: 15px !important;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}

.mb-modal-overlay .addform-row, 
.mb-modal-overlay .addform-input {
    display: block !important; /* Tabellen-Layout der alten Forms aufbrechen */
    width: 100%;
}