/* AssetFlow Picker Styles */

.assetflow-picker-wrapper {
    border: 1px solid #e5e5e5;
    padding: 15px;
    background: #f8f8f8;
    border-radius: 3px;
}

.assetflow-picker-item {
    position: relative;
    width: 120px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 3px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

/* Ausgewählte Assets im Feld nebeneinander anzeigen */
.assetflow-picker-selected {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.assetflow-picker-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.assetflow-picker-item-thumb {
    width: 100%;
    height: 120px;
    overflow: hidden;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.assetflow-picker-item-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

.assetflow-picker-item-title {
    padding: 5px 8px;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #fafafa;
    border-top: 1px solid #e5e5e5;
}

.assetflow-picker-item-remove {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(255,255,255,0.9);
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.assetflow-picker-item:hover .assetflow-picker-item-remove {
    opacity: 1;
}

.assetflow-picker-item-remove:hover {
    background: #f0506e;
    color: white;
}

.assetflow-picker-item-edit {
    position: absolute;
    top: 5px;
    right: 35px;
    background: rgba(255,255,255,0.9);
    border-radius: 3px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.assetflow-picker-item:hover .assetflow-picker-item-edit {
    opacity: 1;
}

.assetflow-picker-item-drag {
    position: absolute;
    top: 5px;
    left: 5px;
    background: rgba(255,255,255,0.9);
    border-radius: 3px;
    width: 24px;
    height: 24px;
    cursor: move;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.assetflow-picker-item:hover .assetflow-picker-item-drag {
    opacity: 1;
}

/* Modal Grid */
.assetflow-picker-grid {
    max-height: 60vh;
    overflow-y: auto;
}

.assetflow-picker-grid-item {
    cursor: pointer;
}

.assetflow-picker-grid-card {
    position: relative;
    background: white;
    border: 2px solid #e5e5e5;
    border-radius: 3px;
    overflow: hidden;
    transition: all 0.2s;
}

.assetflow-picker-grid-card:hover {
    border-color: #1e87f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.assetflow-picker-grid-card.selected {
    border-color: #1e87f0;
    border-width: 3px;
}

.assetflow-picker-grid-card.selected img {
    opacity: 0.7;
}

.assetflow-picker-grid-selected {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #1e87f0;
    color: white;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: none;
    align-items: center;
    justify-content: center;
}

.assetflow-picker-grid-card.selected .assetflow-picker-grid-selected {
    display: flex;
}

.assetflow-picker-grid-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

.assetflow-picker-grid-title {
    padding: 8px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #fafafa;
    border-top: 1px solid #e5e5e5;
}

/* Sortable placeholder */
.uk-sortable-placeholder {
    opacity: 0.5;
    border: 2px dashed #1e87f0 !important;
    background: #e3f2fd !important;
}

/* Drag & Drop Upload entfernt */

/*
 * Native Bild-Fokus-UI im Asset-Editor deaktivieren
 * -------------------------------------------------
 *
 * Für AssetFlow-Assets wird der Fokus nicht mehr über das
 * native Focus-Feature des ProcessWire-Image-Feldes gesetzt,
 * sondern über das eigene AssetFlow-Fokusfeld (assetflow_focus)
 * im AssetFlow-Modal.
 *
 * Damit Redakteure nicht versehentlich den alten, problematischen
 * Fokus-Workflow im Bildfeld nutzen (insbesondere im Page-Edit-Modal),
 * blenden wir die dazugehörigen UI-Elemente aus.
 */
/* Versteckt ALLE nativen PW-Fokus-Elemente im assetflow_images Feld */
/* Mehrere Selektoren für alle möglichen Kontexte (Page-Edit, Modal, etc.) */
.Inputfield_assetflow_images .InputfieldImageFocus,
.Inputfield_assetflow_images .focusArea,
.Inputfield_assetflow_images .pw-image-focus,
.Inputfield_assetflow_images .pw-image-actions a[href*="focus"],
.Inputfield_assetflow_images .pw-panel-links a[href*="focus"],
.Inputfield_assetflow_images a.pw-modal[href*="focus"],
.Inputfield_assetflow_images a[href*="mode=focus"],
.Inputfield_assetflow_images button[data-action*="focus"],
li.InputfieldImageItem a[href*="mode=focus"],
.gridImage__overflow a[href*="mode=focus"],
.Inputfield_assetflow_images .gridImage__edit a[href*="focus"],
.Inputfield_assetflow_images .InputfieldFileLink[href*="focus"],
/* Auch für das Template assetflow-asset auf Detailseiten */
body.template-assetflow-asset .Inputfield_assetflow_images a[href*="focus"],
body.ProcessPageEdit .Inputfield_assetflow_images a[href*="focus"],
/* Direkter Match auf die Link-Klasse */
.Inputfield_assetflow_images .InputfieldFileLink.pw-modal[href*="focus"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
}