/* ─── Reset & Basis ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #111;
    color: #e8e8e8;
    min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
input, select { font-family: inherit; font-size: 1rem; }

/* ─── Topbar ─────────────────────────────────────────────────────────────── */
.topbar {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    background: #1a1a1a;
    border-bottom: 1px solid #333;
    padding: 0 1.25rem;
    height: 52px;
}
.topbar-brand { font-weight: 700; font-size: 1.05rem; color: #fff; }
.topbar-brand a { color: inherit; }
.topbar-nav { display: flex; align-items: center; gap: 1rem; font-size: 0.9rem; }
.topbar-nav a { color: #aaa; transition: color .2s; }
.topbar-nav a:hover,
.topbar-nav a.active { color: #fff; }
.btn-logout {
    background: #c0392b; color: #fff !important;
    padding: .3rem .75rem; border-radius: 4px;
    font-size: .85rem; transition: background .2s;
}
.btn-logout:hover { background: #e74c3c; }

/* ─── Container ──────────────────────────────────────────────────────────── */
.container { max-width: 1400px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }

/* ─── Login ──────────────────────────────────────────────────────────────── */
.login-page { display: flex; align-items: center; justify-content: center; }
.login-box {
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 2.5rem 2rem;
    width: 100%; max-width: 380px;
    text-align: center;
}
.login-logo { font-size: 2.5rem; margin-bottom: .5rem; }
.login-box h1 { font-size: 1.4rem; margin-bottom: 1.5rem; color: #fff; }
.login-box label {
    display: block; text-align: left;
    font-size: .85rem; color: #aaa; margin-bottom: .3rem;
}
.login-box input[type=text],
.login-box input[type=password] {
    width: 100%; padding: .65rem .85rem;
    background: #111; border: 1px solid #444; border-radius: 6px;
    color: #fff; margin-bottom: 1rem; outline: none;
}
.login-box input:focus { border-color: #4a90e2; }
.login-box button[type=submit] {
    width: 100%; padding: .75rem;
    background: #4a90e2; color: #fff;
    border: none; border-radius: 6px;
    font-size: 1rem; font-weight: 600;
    transition: background .2s;
}
.login-box button:hover { background: #357abd; }

/* ─── Messages ───────────────────────────────────────────────────────────── */
.msg-error { color: #e74c3c; margin-bottom: 1rem; font-size: .9rem; }
.msg-warn  { color: #f39c12; margin-bottom: 1rem; font-size: .9rem; }
.msg-ok    { color: #2ecc71; margin-bottom: 1rem; font-size: .9rem; }

/* ─── Scan-Section ───────────────────────────────────────────────────────── */
.scan-section { margin-bottom: 1.75rem; }
.btn-scan {
    background: #27ae60; color: #fff;
    border: none; border-radius: 6px;
    padding: .65rem 1.25rem; font-size: .95rem; font-weight: 600;
    transition: background .2s;
}
.btn-scan:hover { background: #219a52; }
.scan-result {
    margin-top: 1rem;
    background: #1e2d1e;
    border: 1px solid #2a4a2a;
    border-radius: 6px;
    padding: .85rem 1rem;
    font-size: .9rem;
    line-height: 1.8;
    color: #b5e8b5;
}
.scan-errors { color: #e74c3c; }

/* ─── Section Title ──────────────────────────────────────────────────────── */
.section-title { font-size: 1.1rem; font-weight: 600; color: #ccc; margin-bottom: 1rem; }
.empty-hint { color: #666; font-size: .95rem; }
.empty-hint code { background: #1e1e1e; padding: .1rem .4rem; border-radius: 3px; color: #aaa; }

/* ─── Album Grid ─────────────────────────────────────────────────────────── */
.album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}
.album-card {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
}
.album-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.5); }
.album-cover-link { display: block; aspect-ratio: 4/3; overflow: hidden; background: #222; }
.album-cover-img  { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.album-cover-link:hover .album-cover-img { transform: scale(1.04); }
.album-cover-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem; color: #444;
}
.album-info { padding: .75rem; }
.album-name-row { display: flex; align-items: center; gap: .5rem; }
.album-name { font-weight: 600; font-size: .95rem; flex: 1; color: #fff; }
.album-meta { color: #777; font-size: .8rem; margin-top: .3rem; }
.btn-rename-toggle {
    background: none; border: none; color: #555; font-size: .85rem;
    padding: .1rem .2rem; transition: color .2s;
}
.btn-rename-toggle:hover { color: #aaa; }

/* ─── Filter Bar ─────────────────────────────────────────────────────────── */
.filter-bar {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: .75rem; margin-bottom: 1.5rem;
}
.filter-tabs { display: flex; gap: .4rem; }
.filter-tab {
    padding: .4rem .9rem;
    background: #1e1e1e; border: 1px solid #333; border-radius: 20px;
    font-size: .85rem; color: #aaa; transition: all .2s;
}
.filter-tab:hover { border-color: #555; color: #ddd; }
.filter-tab.active { background: #4a90e2; border-color: #4a90e2; color: #fff; }
.filter-selects { display: flex; gap: .5rem; }
.filter-selects select {
    background: #1e1e1e; border: 1px solid #333; border-radius: 6px;
    color: #ccc; padding: .38rem .65rem; font-size: .85rem;
}

/* ─── Media Group ────────────────────────────────────────────────────────── */
.media-group { margin-bottom: 2rem; }
.media-group-title {
    font-size: .95rem; font-weight: 600;
    color: #888; margin-bottom: .75rem;
    text-transform: uppercase; letter-spacing: .04em;
}
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: .5rem;
}

/* ─── Media Items ────────────────────────────────────────────────────────── */
.media-item {
    aspect-ratio: 4/3;
    border-radius: 6px; overflow: hidden;
    background: #1a1a1a; cursor: pointer;
    position: relative;
    transition: transform .15s;
}
.media-item:hover { transform: scale(1.02); z-index: 2; }
.media-item img {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
}
.thumb-fallback {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; color: #444;
}

/* Video-Kachel */
.video-thumb-placeholder {
    width: 100%; height: 100%;
    background: #1a1a2e;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: .5rem; color: #aaa;
}
.play-icon { font-size: 2rem; color: #4a90e2; }
.video-name { font-size: .7rem; color: #666; text-align: center; padding: 0 .5rem; word-break: break-all; }

/* ─── Viewer ─────────────────────────────────────────────────────────────── */
.viewer {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,.95);
    display: flex; align-items: center; justify-content: center;
}
.viewer.hidden { display: none; }

#viewer-stage {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; position: relative;
    cursor: grab;
    user-select: none;
}
#viewer-stage.dragging { cursor: grabbing; }
#viewer-img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
    pointer-events: none;
    transform-origin: 0 0;
    will-change: transform;
    transition: opacity .15s;
}

#viewer-close {
    position: absolute; top: 1rem; right: 1rem; z-index: 10;
    background: rgba(255,255,255,.12); border: none; color: #fff;
    width: 40px; height: 40px; border-radius: 50%; font-size: 1.1rem;
    transition: background .2s;
}
#viewer-close:hover { background: rgba(255,255,255,.25); }

#viewer-prev, #viewer-next {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
    background: rgba(255,255,255,.1); border: none; color: #fff;
    width: 48px; height: 80px; font-size: 2rem;
    transition: background .2s;
}
#viewer-prev { left: .5rem; border-radius: 0 6px 6px 0; }
#viewer-next { right: .5rem; border-radius: 6px 0 0 6px; }
#viewer-prev:hover, #viewer-next:hover { background: rgba(255,255,255,.22); }

#viewer-info {
    position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,.5); color: #ccc;
    padding: .3rem .8rem; border-radius: 20px; font-size: .8rem;
    pointer-events: none;
}

/* ─── Modal ──────────────────────────────────────────────────────────────── */
.modal {
    position: fixed; inset: 0; z-index: 900;
    background: rgba(0,0,0,.7);
    display: flex; align-items: center; justify-content: center;
}
.modal.hidden { display: none; }

.modal-box {
    background: #1e1e1e; border: 1px solid #333;
    border-radius: 10px; padding: 1.5rem;
    width: 100%; max-width: 400px;
}
.modal-box h3 { margin-bottom: 1rem; color: #fff; }
.modal-box label { display: block; font-size: .85rem; color: #aaa; margin-bottom: .35rem; }
.modal-box input[type=text] {
    width: 100%; background: #111; border: 1px solid #444;
    border-radius: 6px; padding: .6rem .8rem; color: #fff; outline: none;
    margin-bottom: 1rem;
}
.modal-box input:focus { border-color: #4a90e2; }
.modal-actions { display: flex; gap: .75rem; }
.btn-primary {
    background: #4a90e2; color: #fff; border: none;
    border-radius: 6px; padding: .6rem 1.25rem; font-weight: 600;
    transition: background .2s;
}
.btn-primary:hover { background: #357abd; }
.btn-secondary {
    background: #333; color: #ccc; border: none;
    border-radius: 6px; padding: .6rem 1.25rem;
    transition: background .2s;
}
.btn-secondary:hover { background: #444; }

/* ─── Video Modal ────────────────────────────────────────────────────────── */
.video-modal-box {
    background: #000; border-radius: 8px; overflow: hidden;
    position: relative; width: 90vw; max-width: 960px;
}
#video-player { width: 100%; display: block; max-height: 80vh; }
.video-close-btn {
    position: absolute; top: .5rem; right: .5rem; z-index: 10;
    background: rgba(0,0,0,.6); border: none; color: #fff;
    width: 34px; height: 34px; border-radius: 50%; font-size: 1rem;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .topbar { padding: 0 .75rem; }
    .container { padding: 1rem .75rem 2rem; }
    .album-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .media-grid  { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .3rem; }
    #viewer-prev, #viewer-next { width: 36px; height: 60px; font-size: 1.5rem; }
}

/* ─── Sichere POST-Logout-Form ───────────────────────────────────────────── */
.logout-form { display: inline-flex; margin: 0; padding: 0; }
.logout-form .btn-logout { border: none; cursor: pointer; font-family: inherit; }

/* ─── Medien-Aktionen / Papierkorb ─────────────────────────────────────── */
.media-actions {
    position: absolute;
    top: .35rem;
    right: .35rem;
    z-index: 5;
    margin: 0;
}
.btn-trash {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(0,0,0,.65);
    color: #fff;
    font-size: .95rem;
    cursor: pointer;
    opacity: .15;
    transition: opacity .15s, background .15s, transform .15s;
}
.media-item:hover .btn-trash,
.btn-trash:focus {
    opacity: 1;
}
.btn-trash:hover {
    background: #c0392b;
    transform: scale(1.05);
}
.btn-danger {
    background: #c0392b;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: .6rem 1.25rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}
.btn-danger:hover { background: #e74c3c; }

.trash-grid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.trash-card {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    overflow: hidden;
}
.trash-thumb {
    aspect-ratio: 4/3;
    background: #111;
}
.trash-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.trash-info {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .75rem;
    font-size: .82rem;
    color: #888;
    word-break: break-word;
}
.trash-info strong { color: #fff; font-size: .9rem; }
.trash-actions {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 0 .75rem .75rem;
}
.trash-actions form { margin: 0; }
.trash-actions button { width: 100%; }

/* ─── Einstellungen ─────────────────────────────────────────────────────── */
.settings-container { max-width: 760px; }
.settings-card {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    padding: 1.25rem;
    box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
.settings-form {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.settings-form label {
    color: #ddd;
    font-weight: 600;
    margin-top: .45rem;
}
.settings-form input {
    width: 100%;
    box-sizing: border-box;
    background: #111;
    border: 1px solid #333;
    border-radius: 6px;
    color: #fff;
    padding: .75rem .85rem;
    font-size: 1rem;
    outline: none;
}
.settings-form input:focus { border-color: #4a90e2; }
.form-hint {
    margin: 0 0 .35rem;
    color: #888;
    font-size: .85rem;
}
.settings-separator {
    width: 100%;
    border: none;
    border-top: 1px solid #2a2a2a;
    margin: 1rem 0 .6rem;
}
.settings-note {
    margin-top: 1rem;
    color: #aaa;
    background: #141414;
    border: 1px solid #252525;
    border-radius: 8px;
    padding: .9rem 1rem;
    line-height: 1.5;
}

/* ─── Fortschritts-Scanner ─────────────────────────────────────────────── */
.scan-progress-box {
    background: #171717;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    padding: 1rem;
}
.scan-progress-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.scan-progress-panel {
    margin-top: 1rem;
    background: #101820;
    border: 1px solid #23384a;
    border-radius: 8px;
    padding: 1rem;
}
.scan-progress-topline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: .75rem;
    color: #d8edff;
}
#scan-percent {
    font-weight: 700;
    color: #8dc8ff;
    white-space: nowrap;
}
.scan-bar {
    height: 16px;
    background: #0b0f14;
    border: 1px solid #1f3142;
    border-radius: 999px;
    overflow: hidden;
}
.scan-bar-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #27ae60, #4a90e2);
    border-radius: 999px;
    transition: width .18s ease;
}
.scan-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-top: .75rem;
    color: #b5c9d9;
    font-size: .9rem;
}
#scan-counter {
    white-space: nowrap;
    color: #8da4b8;
}
#scan-current {
    text-align: right;
    word-break: break-word;
}
.scan-summary {
    margin-top: 1rem;
    background: #1e2d1e;
    border: 1px solid #2a4a2a;
    border-radius: 6px;
    padding: .85rem 1rem;
    font-size: .9rem;
    line-height: 1.8;
    color: #b5e8b5;
}
.hidden { display: none !important; }

@media (max-width: 600px) {
    .scan-detail-row,
    .scan-progress-topline {
        flex-direction: column;
        align-items: flex-start;
    }
    #scan-current { text-align: left; }
}


.storage-debug-box {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    background: rgba(0,0,0,.18);
    font-size: .92rem;
    line-height: 1.55;
}
.storage-debug-box code {
    word-break: break-all;
}
.storage-details {
    margin-top: 8px;
}
.storage-details ul {
    margin: 8px 0 0 18px;
    padding: 0;
}
.msg-error-inline,
.scan-errors {
    color: #ff9f9f;
}
.scan-warnings {
    color: #ffd37a;
}