/* ImageLegalGate.css
 *
 * Two concerns:
 *   1. Page-side image credit captions (.wiki-img / .img-credit) — the legal
 *      copyright notice shown directly beneath each approved image.
 *   2. The %IMG_LEGAL_GATE% admin review UI (.ilg-*).
 */

/* ── Page-side credit caption ─────────────────────────────────────────────── */

.wiki-img {
    display: inline-block;
    max-width: 100%;
    position: relative;
}
.wiki-img > img,
.wiki-img > picture { display: block; max-width: 100%; }

.img-credit {
    display: block;
    font-size: 11px;
    line-height: 1.35;
    color: #6b7280;
    margin-top: 3px;
    text-align: left;
    word-break: break-word;
}
.img-credit--pending {
    color: #b26a00;
    font-style: italic;
}

/* ── Admin review UI ──────────────────────────────────────────────────────── */

#image-legal-gate {
    --ilg-blue: #1a5fa8;
    --ilg-border: #e2e6ec;
    margin: 12px 0;
}

.ilg-loading, .ilg-msg, .ilg-empty { color: #666; padding: 14px 0; }

/* ── Share-link management (admin) ─────────────────────────────────────────── */

.ilg-links {
    border: 1px solid var(--ilg-border); border-radius: 10px;
    padding: 4px 14px; margin-bottom: 18px; background: #fbfcfe;
}
.ilg-links > summary { cursor: pointer; font-weight: 600; color: #444; padding: 8px 0; }
.ilg-link-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0 12px; }
.ilg-link-name { flex: 1 1 220px; border: 1px solid var(--ilg-border); border-radius: 6px; padding: 6px 8px; font-size: 13px; }
.ilg-link-dur  { border: 1px solid var(--ilg-border); border-radius: 6px; padding: 6px 8px; font-size: 13px; }

.ilg-link-list { display: flex; flex-direction: column; gap: 8px; padding-bottom: 10px; }
.ilg-link-row {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    padding: 8px 10px; border: 1px solid var(--ilg-border); border-radius: 8px; background: #fff;
}
.ilg-link-row.is-inactive { opacity: .6; }
.ilg-link-info { display: flex; gap: 8px; align-items: center; min-width: 180px; }
.ilg-link-nm { font-weight: 600; color: #333; }
.ilg-link-url {
    flex: 1 1 260px; border: 1px solid var(--ilg-border); border-radius: 6px;
    padding: 5px 8px; font-size: 12px; font-family: ui-monospace, monospace; color: #444; background: #f7f9fc;
}

/* ── Standalone reviewer page ──────────────────────────────────────────────── */

body.ilg-standalone {
    margin: 0; background: #f4f6f8;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #333;
}
.ilg-standalone-head {
    background: #fff; border-bottom: 1px solid #e2e6ec; padding: 18px 24px;
}
.ilg-standalone-head h1 { margin: 0 0 4px; font-size: 20px; }
.ilg-standalone-head p { margin: 0; color: #666; font-size: 14px; }
.ilg-standalone-main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; }
body.ilg-standalone #image-legal-gate { margin: 0; }

.ilg-tabs {
    display: flex; gap: 6px; flex-wrap: wrap;
    border-bottom: 1px solid var(--ilg-border); margin-bottom: 14px;
}
.ilg-tab {
    background: none; border: none; padding: 8px 14px; cursor: pointer;
    font-size: 14px; font-weight: 600; color: #555;
    border-bottom: 2px solid transparent;
}
.ilg-tab:hover { color: var(--ilg-blue); }
.ilg-tab.is-active { color: var(--ilg-blue); border-bottom-color: var(--ilg-blue); }

.ilg-panel { display: none; }
.ilg-panel.is-active { display: block; }

.ilg-filterbar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.ilg-btn-approveall { margin-left: auto; }
.ilg-filter {
    background: #f3f5f8; border: 1px solid var(--ilg-border); border-radius: 14px;
    padding: 4px 12px; font-size: 12px; font-weight: 600; color: #555; cursor: pointer;
}
.ilg-filter:hover { background: #e9eef6; }
.ilg-filter.is-active { background: var(--ilg-blue); color: #fff; border-color: var(--ilg-blue); }

.ilg-grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.ilg-card {
    border: 1px solid var(--ilg-border); border-radius: 10px; overflow: hidden;
    display: flex; flex-direction: column; background: #fff;
}
.ilg-card.ilg-status-approved { border-color: #b6d7b9; }
.ilg-card.ilg-status-rejected { border-color: #e6b3b3; }

.ilg-thumb {
    background-color: #f4f6f8;
    background-image:
        linear-gradient(45deg, #eceff3 25%, transparent 25%),
        linear-gradient(-45deg, #eceff3 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #eceff3 75%),
        linear-gradient(-45deg, transparent 75%, #eceff3 75%);
    background-size: 18px 18px;
    background-position: 0 0, 0 9px, 9px -9px, -9px 0;
    height: 170px; display: flex; align-items: center; justify-content: center;
    cursor: zoom-in;
}
.ilg-thumb img { max-width: 100%; max-height: 170px; object-fit: contain; }
.ilg-thumb-error::after {
    content: 'Vorschau nicht verfügbar'; color: #999; font-size: 12px;
}
.ilg-thumb-error img { display: none; }

.ilg-card-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }

.ilg-card-head { display: flex; gap: 6px; flex-wrap: wrap; }
.ilg-badge { font-size: 10px; font-weight: 700; color: #fff; padding: 2px 8px; border-radius: 3px; }
.ilg-badge-approved { background: #2e7d32; }
.ilg-badge-pending  { background: #b26a00; }
.ilg-badge-rejected { background: #c62828; }
.ilg-badge-ext      { background: #555; }
.ilg-badge-orphan   { background: #8a8f98; }
.ilg-badge-edited   { background: #1a5fa8; }

.ilg-rel { font-size: 12px; color: #333; word-break: break-all; font-family: ui-monospace, monospace; }

.ilg-pages { display: flex; gap: 5px; flex-wrap: wrap; }
.ilg-page {
    font-size: 11px; color: var(--ilg-blue); text-decoration: none;
    background: #eef3fa; padding: 1px 7px; border-radius: 10px;
}
.ilg-page:hover { text-decoration: underline; }
.ilg-page-more { font-size: 11px; color: #888; padding: 1px 4px; }

.ilg-field { display: flex; flex-direction: column; gap: 3px; }
.ilg-field-label { font-size: 11px; font-weight: 600; color: #666; }
.ilg-credit {
    border: 1px solid var(--ilg-border); border-radius: 6px; padding: 6px 8px; font-size: 13px; width: 100%;
    box-sizing: border-box;
}
.ilg-credit-required { border-color: #c62828; }

.ilg-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ilg-btn {
    border: 1px solid var(--ilg-border); background: #fff; border-radius: 6px;
    padding: 5px 12px; font-size: 12px; cursor: pointer; white-space: nowrap; font-weight: 600;
}
.ilg-btn:hover { background: #f3f6fb; }
.ilg-btn:disabled { opacity: .5; cursor: default; }
.ilg-btn-approve { color: #2e7d32; border-color: #a5d6a7; }
.ilg-btn-approve:hover { background: #edf7ed; }
.ilg-btn-reject { color: #c62828; border-color: #ef9a9a; }
.ilg-btn-reject:hover { background: #fdeded; }
.ilg-btn-reset { color: #555; }
.ilg-btn-edit { color: #1a5fa8; border-color: #a9c6e6; }
.ilg-btn-edit:hover { background: #eef3fa; }

/* ── Redaction editor ──────────────────────────────────────────────────────── */

.ilg-editor {
    position: fixed; inset: 0; z-index: 100000;
    background: #23262b; display: flex; flex-direction: column;
}
.ilg-editor-bar {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    padding: 10px 14px; background: #2c3037; border-bottom: 1px solid #3a3f47;
}
.ilg-editor-bar .ilg-btn { background: #3a3f47; border-color: #4a505a; color: #eaeaea; }
.ilg-editor-bar .ilg-btn:hover { background: #454b54; }
.ilg-editor-bar .ilg-btn-approve { background: #2e7d32; border-color: #2e7d32; color: #fff; }

.ilg-tool {
    background: #3a3f47; border: 1px solid #4a505a; color: #eaeaea;
    border-radius: 6px; padding: 5px 12px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.ilg-tool.is-active { background: #1a5fa8; border-color: #1a5fa8; color: #fff; }

.ilg-swatch { width: 26px; height: 26px; border-radius: 5px; border: 2px solid #6a707a; cursor: pointer; padding: 0; }
.ilg-swatch.is-active { border-color: #fff; box-shadow: 0 0 0 2px #1a5fa8; }

.ilg-editor-text { border: 1px solid #4a505a; background: #1f2227; color: #eee; border-radius: 6px; padding: 5px 8px; font-size: 13px; min-width: 200px; }
.ilg-editor-size { width: 64px; border: 1px solid #4a505a; background: #1f2227; color: #eee; border-radius: 6px; padding: 5px 6px; font-size: 13px; }
.ilg-editor-bg { color: #cfd3d9; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.ilg-editor-spacer { flex: 1 1 auto; }

.ilg-editor-stage {
    flex: 1 1 auto; overflow: auto; display: flex; align-items: flex-start; justify-content: center;
    padding: 20px;
}
.ilg-editor-stage[data-tool="text"] .ilg-editor-canvas { cursor: text; }
.ilg-editor-canvas {
    max-width: 100%; height: auto; cursor: crosshair;
    background: #fff; box-shadow: 0 4px 30px rgba(0, 0, 0, .5);
}
.ilg-editor-hint { padding: 8px 14px; background: #2c3037; border-top: 1px solid #3a3f47; color: #aeb4bd; font-size: 12px; word-break: break-all; }

/* ── Lightbox ──────────────────────────────────────────────────────────────── */

.ilg-lightbox {
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(0, 0, 0, .85);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 32px; box-sizing: border-box;
}
.ilg-lightbox-img {
    max-width: 96vw; max-height: 86vh; object-fit: contain;
    background: #fff; box-shadow: 0 6px 40px rgba(0, 0, 0, .5); border-radius: 4px;
}
.ilg-lightbox-cap {
    color: #eaeaea; font-size: 13px; margin-top: 12px; text-align: center;
    font-family: ui-monospace, monospace; word-break: break-all; max-width: 90vw;
}
.ilg-lightbox-close {
    position: absolute; top: 14px; right: 20px;
    background: none; border: none; color: #fff; font-size: 42px; line-height: 1;
    cursor: pointer; padding: 0 8px;
}
.ilg-lightbox-close:hover { color: #ffd; }