/* ===== Onesown - Artikel Backend: Edit- und Index-spezifische Styles ===== */
/* Gemeinsame Variablen, Utilities und Status-Farben: siehe artikel.css       */


/* -- Edit: URL-Zeile -- */
.artikel-url-badge {
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0.35rem;
}

.artikel-url-link {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: none;
    color: inherit!important;
    text-decoration: none!important;
    text-align: left;
}

.artikel-url-input {
    width: 100%;
}

/* -- Index: Filter-Panel -- */
.filter-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    user-select: none;
}

/* -- Edit: Datei-Klick -- */
.datei-klick-wrapper {
    cursor: pointer;
    flex: 1;
    min-width: 0;
}

/* -- Edit: Dateiliste Drag & Drop -- */
.file-list-container .drag-handle {
    cursor: move;
    color: var(--rz-text-disabled-color);
    transition: color 0.2s ease;
}

.file-list-container:hover .drag-handle {
    color: var(--rz-text-color);
}

/* -- Edit: URL-Liste Drag & Drop -- */
.artikel-url-badge .drag-handle {
    cursor: move;
    color: var(--rz-text-disabled-color);
    transition: color 0.2s ease;
    flex-shrink: 0;
}

.artikel-url-badge:hover .drag-handle {
    color: var(--rz-text-color);
}

.flex-1 {
    flex: 1;
    min-width: 0;
}

.rz-dropzone-item {
    border-top: 2px dashed transparent;
    padding: 1px 0;
}

.rz-can-drop.rz-dropzone-item {
    border-top: 2px solid var(--rz-success);
}

.rz-dropzone-item:last-child div {
    opacity: 0;
    height: 20px;
    padding: 0;
}

.rz-dropzone-item:last-child .artikel-url-badge {
    opacity: 0;
    height: 20px !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}

/* -- Edit: Datei-Metadaten Dialog (Vollbild auf Mobilgeräten) -- */
@media (max-width: 768px) {
    .datei-metadaten-dialog {
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        top: 0 !important;
        left: 0 !important;
    }

    .datei-metadaten-dialog .rz-dialog-content {
        height: calc(100vh - 100px);
        overflow-y: auto;
    }
}


/* ===== Responsive: Edit-Seite Buttons ===== */

/* Auf Tablets und Mobil: Buttons zeigen nur das Icon (kein Text) */
@media (max-width: 767px) {
    .bearbeiten-buttons .rz-button-text {
        display: none;
    }

    /* Kopfbereich darf umbrechen wenn nötig */
    .bearbeiten-kopfbereich {
        flex-wrap: wrap;
    }

    .bearbeiten-kopfbereich > .rz-text {
        flex: 1 1 auto;
    }

    /* Buttons selbst dürfen umbrechen wenn zu wenig Platz */
    .bearbeiten-buttons {
        flex-shrink: 0;
        flex-wrap: wrap;
    }
}


/* ===== Responsive: Index – Badges unter Titel ===== */

/* URLs, Bilder, Videos, Dateien werden auf Mobilgeräten nicht angezeigt */
@media (max-width: 575px) {
    .badge-nur-desktop {
        display: none !important;
    }

    /* Äußerer Stack: Titel + Badges umbrechen */
    .artikel-karte-kopf {
        flex-wrap: wrap !important;
        align-items: flex-start !important;
    }

    /* Titel nimmt volle Breite – zwingt Badges in nächste Zeile */
    .artikel-karte-kopf > .artikel-titel-link {
        flex: 1 1 100% !important;
        min-width: 0;
        display: block;
    }

    /* Badges gehen in eigene Zeile, linksbündig und wrappend */
    .artikel-karte-badges {
        flex: 0 0 100% !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 0.3rem;
    }
}


/* ===== Responsive: Index – Filter-Toggle ===== */

/* Toggle-Button nur auf Mobile sichtbar */
.filter-toggle-btn-mobile {
    display: none !important;
}

@media (max-width: 767px) {
    .filter-toggle-btn-mobile {
        display: inline-flex !important;
    }

    /* Filter-Spalte standardmäßig ausgeblendet */
    .filter-spalte {
        display: none !important;
    }

    /* Filter als Fixed-Overlay über den Inhalt legen */
    .filter-spalte--sichtbar {
        display: block !important;
        position: fixed !important;
        inset: 0;
        z-index: 500;
        overflow-y: auto;
        background: white;
        padding: 1rem;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
    }
}


/* ===== Responsive: Index – Kopf-Buttons ===== */

@media (max-width: 767px) {
    .index-kopf-buttons .rz-button-text {
        display: none;
    }

    .index-suche-bereich .rz-button-text {
        display: none;
    }

    /* Buttons, die auf Mobile komplett ausgeblendet werden */
    .filter-btn-nur-desktop {
        display: none !important;
    }
}


/* -- Index: Volltextsuche -- */
.artikel-anzahl-info {
    font-size: 0.75rem;
    color: var(--rz-text-disabled-color);
    white-space: nowrap;
    flex-shrink: 0;
}

.fts-treffer-snippet {
    font-size: 0.8rem;
    color: var(--rz-text-disabled-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: block;
}

.fts-gefunden-in {
    font-size: 0.78rem;
    color: var(--rz-text-disabled-color);
    font-style: italic;
}

.fts-rank-badge {
    font-size: 0.72rem;
    color: var(--rz-text-disabled-color);
    background: var(--rz-base-200);
    border-radius: 0.25rem;
    padding: 0.05rem 0.35rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}