/**
 * EnergyExperts -- ee-file-preview.css (R9)
 *
 * Darstellung der gemeinsamen Vorschau-Komponente (assets/js/ee-file-preview.js).
 * Eine Kachel sieht im Vorhaben, an der Aufgabe und im Projektmodul gleich aus
 * -- das ist der ganze Zweck der Datei.
 *
 * Farben kommen aus den Design-Token des Portals, mit Rueckfallwerten, damit
 * die Komponente auch in einem Dialog am <body> richtig aussieht.
 */

/* ------------------------------------------------- Stapelebene (R11)
 *
 * Till: "wenn ich im Aufgaben-Popup ein Bild oeffne, sehe ich nichts."
 * URSACHE: der Betrachter stand auf z-index 100000 und lag damit UNTER dem
 * Aufgaben-Popup.
 *
 * Bestehende Ebenen (gemessen, nicht geraten):
 *   100001  ee-campaign-dialog.css:39   Vorhaben-Dialog
 *   100300  ee-tasks-notes.css:1318     Aufgaben-Popup (Ueberlagerung)
 *   100400  Klappmenue der Aufgabe, 100500/100600 dessen Untermenues
 *   100500  ee-activity-modal.css:1290
 *   200000  ee-tasks-notes.css:3810     Datumswahl ueber dem Popup
 *   2147483647 ee-auth-popup.css:19     HOECHSTER bestehender Wert im Plugin
 *                                       (Anmelde-Sperrschirm, muss ueber allem
 *                                       bleiben, auch ueber einer Vorschau)
 *
 * Der Betrachter nimmt deshalb genau EINE Stufe unter dem Anmelde-Sperrschirm.
 * Nur hier wird die Zahl gesetzt -- ueberall sonst diese Variable benutzen.
 */
:root {
    --ee-fp-z-viewer: 2147483646;
}

.ee-fp-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ee-fp-list--tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
}

/* ---------------------------------------------------------------- Zeile */

.ee-fp-row,
.ee-fp-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--dls-border, #e5e9f2);
    border-radius: 10px;
    background: var(--dls-surface, #fff);
    min-width: 0;
}

.ee-fp-tile {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
}

.ee-fp-row:hover,
.ee-fp-tile:hover {
    border-color: var(--dls-primary, #1f6f43);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}

.ee-fp-open {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}

.ee-fp-tile .ee-fp-open {
    flex-direction: column;
    align-items: stretch;
}

/* ------------------------------------------------------------ Miniatur */

.ee-fp-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--dls-surface-muted, #f1f5f9);
    color: var(--dls-text-muted, #64748b);
    overflow: hidden;
}

.ee-fp-tile .ee-fp-thumb {
    width: 100%;
    height: 112px;
    border-radius: 8px 8px 0 0;
}

.ee-fp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ee-fp-ext {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    margin-top: 2px;
    line-height: 1;
}

/* Symbolfarbe je Art -- damit ein PDF nicht aussieht wie eine Tabelle. */
.ee-fp-thumb--pdf { background: #fef2f2; color: #b91c1c; }
.ee-fp-thumb--word { background: #eff6ff; color: #1d4ed8; }
.ee-fp-thumb--excel,
.ee-fp-thumb--csv { background: #ecfdf5; color: #047857; }
.ee-fp-thumb--slides { background: #fff7ed; color: #c2410c; }
.ee-fp-thumb--archive { background: #f5f3ff; color: #6d28d9; }
.ee-fp-thumb--text { background: #f8fafc; color: #475569; }
.ee-fp-thumb--image { background: #f1f5f9; }

/* ------------------------------------------- Bild kam nicht (R10)
   Statt des kaputte-Bild-Symbols des Browsers: gedaempftes Bildsymbol
   plus Satz. In der kleinen Kachel ist nur Platz fuer das Symbol, der
   Satz steht dann im title/aria-label. */
.ee-fp-thumb--broken {
    background: #fef2f2;
    color: #b91c1c;
}

.ee-fp-broken {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    height: 100%;
    text-align: center;
}

.ee-fp-broken-text {
    font-size: .68rem;
    line-height: 1.25;
    padding: 0 4px;
    overflow: hidden;
}

.ee-fp-thumb--broken .ee-fp-broken-text {
    display: none;
}

.ee-fp-viewer-fallback .ee-fp-broken {
    color: #b91c1c;
}

.ee-fp-viewer-fallback .ee-fp-broken-text {
    font-size: .9rem;
    max-width: 22rem;
}

/* ---------------------------------------------------------------- Text */

.ee-fp-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.ee-fp-tile .ee-fp-text { padding: 8px 10px 10px; }

.ee-fp-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--dls-text, #0f172a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ee-fp-meta {
    font-size: 11px;
    color: var(--dls-text-muted, #64748b);
}

/* ------------------------------------------------------------- Aktionen */

.ee-fp-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}

.ee-fp-tile .ee-fp-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(255, 255, 255, .92);
    border-radius: 8px;
    padding: 2px;
}

.ee-fp-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--dls-text-muted, #64748b);
    cursor: pointer;
    text-decoration: none;
}

.ee-fp-act:hover {
    background: var(--dls-surface-muted, #f1f5f9);
    color: var(--dls-text, #0f172a);
}

.ee-fp-act--danger:hover { background: #fef2f2; color: #b91c1c; }

/*
 * Ein bereits gesetzter Zustand (Vorhaben: "das IST das Titelbild"). Kein
 * Knopf, sondern eine Auskunft - deshalb ohne Zeigefinger und ohne Hover.
 */
.ee-fp-act--on {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
    cursor: default;
}

/* ------------------------------------------------------------ Fortschritt */

.ee-fp-row.is-busy,
.ee-fp-tile.is-busy { opacity: .75; }

.ee-fp-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--dls-surface-muted, #f1f5f9);
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}

.ee-fp-progress-bar {
    display: block;
    height: 100%;
    background: var(--dls-primary, #1f6f43);
    transition: width .15s linear;
}

/* --------------------------------------------------------- Ablageflaeche */

.ee-fp-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px;
    border: 1.5px dashed var(--dls-border, #cbd5e1);
    border-radius: 10px;
    background: var(--dls-surface-muted, #f8fafc);
    color: var(--dls-text-muted, #64748b);
    cursor: pointer;
    text-align: center;
}

.ee-fp-drop:hover,
.ee-fp-drop.is-dragover {
    border-color: var(--dls-primary, #1f6f43);
    background: var(--dls-primary-soft, #e7f3ec);
    color: var(--dls-primary-dark, #14532d);
}

.ee-fp-drop-text { font-size: 13px; font-weight: 600; }
.ee-fp-drop-hint { font-size: 11px; }

/* Ziel-Rueckmeldung, wenn eine ganze Zeile/Karte die Ablageflaeche ist. */
.ee-fp-droppable.is-dragover {
    outline: 2px dashed var(--dls-primary, #1f6f43);
    outline-offset: 2px;
    background: var(--dls-primary-soft, #e7f3ec);
}

.ee-fp-empty {
    font-size: 12px;
    color: var(--dls-text-muted, #64748b);
    padding: 8px 2px;
}

/* -------------------------------------------------------- Bueroklammer */

.ee-fp-clip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    line-height: 1;
    color: var(--dls-text-muted, #64748b);
    vertical-align: middle;
}

.ee-fp-clip-count { font-weight: 600; }

/* ------------------------------------------------------------ Betrachter */

.ee-fp-viewer {
    position: fixed;
    inset: 0;
    /* Siehe Kopf der Datei: eine Stufe unter dem Anmelde-Sperrschirm. */
    z-index: var(--ee-fp-z-viewer, 2147483646);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ee-fp-viewer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .72);
}

.ee-fp-viewer-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(1100px, 94vw);
    height: min(88vh, 900px);
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .35);
}

.ee-fp-viewer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--dls-border, #e5e9f2);
}

.ee-fp-viewer-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--dls-text, #0f172a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ee-fp-viewer-stage {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f172a;
    min-height: 0;
}

.ee-fp-viewer-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ee-fp-viewer-frame {
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}

.ee-fp-viewer-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #fff;
    padding: 24px;
    text-align: center;
}

.ee-fp-viewer-name { font-size: 15px; font-weight: 600; }
.ee-fp-viewer-meta { font-size: 12px; opacity: .8; }
.ee-fp-viewer-hint { font-size: 12px; opacity: .8; margin: 0; }

.ee-fp-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 8px;
    background: var(--dls-primary, #1f6f43);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.ee-fp-viewer-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 56px;
    border: 0;
    background: rgba(15, 23, 42, .45);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.ee-fp-viewer-nav--prev { left: 0; border-radius: 0 8px 8px 0; }
.ee-fp-viewer-nav--next { right: 0; border-radius: 8px 0 0 8px; }
.ee-fp-viewer-nav:hover { background: rgba(15, 23, 42, .7); }

@media (max-width: 640px) {
    .ee-fp-list--tiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .ee-fp-viewer-panel { width: 100vw; height: 100vh; border-radius: 0; }
}