/* Vault Module */

/* ---- Tab Bar ---- */
.vault-tab-bar {
    display: flex;
    gap: var(--sp-1);
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
    margin-bottom: var(--sp-5);
}

.vault-tab {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--dur-fast);
    margin-bottom: -1px;
}

.vault-tab:hover { color: var(--text-primary); }
.vault-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.vault-tab-content { /* always block, toggled via hidden attr */ }

/* ---- Dokumente Layout ---- */
.vault-docs-layout {
    display: flex;
    gap: var(--sp-6);
}

.vault-categories-panel {
    width: 180px;
    flex-shrink: 0;
}

.vault-categories-panel h3 {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--sp-3);
}

.vault-main-panel { flex: 1; min-width: 0; }

/* ---- Category tabs ---- */
.category-tab {
    display: block;
    padding: var(--sp-2) var(--sp-3);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    cursor: pointer;
    margin-bottom: var(--sp-1);
    transition: all var(--dur-fast);
}
.category-tab:hover { border-color: var(--border-strong); color: var(--text-primary); }
.category-tab.active { background: var(--accent-muted); border-color: var(--accent); color: var(--accent); }

/* ---- Upload form ---- */
.upload-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--sp-5);
    margin-bottom: var(--sp-5);
}

.upload-section h3 {
    font-size: var(--text-base);
    font-weight: 600;
    margin-bottom: var(--sp-4);
}

.vault-encrypt-note {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-bottom: var(--sp-4);
}

/* ---- Doc Cards ---- */
.doc-list { display: flex; flex-direction: column; gap: var(--sp-3); }

.doc-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-4);
    display: flex;
    gap: var(--sp-4);
    align-items: flex-start;
    transition: all var(--dur-fast);
}
.doc-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }

.doc-icon {
    width: 40px; height: 40px;
    border-radius: var(--radius-md);
    background: var(--accent-muted);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.doc-info { flex: 1; min-width: 0; }
.doc-info strong { display: block; font-size: var(--text-sm); font-weight: 600; margin-bottom: 2px; }

.doc-meta {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.doc-category {
    display: inline-block;
    font-size: var(--text-xs);
    padding: 1px 6px;
    background: var(--accent-muted);
    color: var(--accent);
    border-radius: var(--radius-full);
    margin-top: var(--sp-1);
}

.doc-shared-badge {
    display: inline-block;
    font-size: var(--text-xs);
    padding: 1px 6px;
    background: rgba(34,197,94,0.15);
    color: #22c55e;
    border-radius: var(--radius-full);
    margin-top: var(--sp-1);
    margin-left: var(--sp-1);
}

.doc-actions { display: flex; gap: var(--sp-1); align-items: center; }

/* ── Immich ─────────────────────────────────────────────────────────────── */

.immich-toolbar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
    flex-wrap: wrap;
}

.immich-title {
    flex: 1;
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-primary);
}

/* ---- Albums Grid ---- */
.immich-albums-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--sp-4);
}

.immich-album-tile {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: all var(--dur-fast);
}
.immich-album-tile:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); }

.immich-album-cover {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface);
}

.immich-album-info {
    padding: var(--sp-3);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.immich-album-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.immich-album-count {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.immich-album-delete {
    position: absolute;
    top: var(--sp-2);
    right: var(--sp-2);
    background: rgba(0,0,0,0.55);
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    padding: 4px 6px;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--dur-fast);
    display: flex;
    align-items: center;
}
.immich-album-tile:hover .immich-album-delete { opacity: 1; }
.immich-album-delete:hover { background: rgba(220,38,38,0.8); }

/* ---- Photos Grid ---- */
.immich-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--sp-2);
}

.immich-photo-thumb {
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    background: var(--bg-surface);
}

.immich-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--dur-fast);
}
.immich-photo-thumb:hover img { transform: scale(1.05); }

.immich-video-badge {
    position: absolute;
    bottom: var(--sp-2);
    left: var(--sp-2);
    background: rgba(0,0,0,0.6);
    border-radius: var(--radius-sm);
    padding: 2px 5px;
    color: #fff;
    display: flex;
    align-items: center;
}

.immich-photo-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    opacity: 0;
    transition: opacity var(--dur-fast);
}
.immich-photo-thumb:hover .immich-photo-overlay { opacity: 1; }

.immich-photo-download,
.immich-photo-delete {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: var(--radius-sm);
    color: #fff;
    padding: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background var(--dur-fast);
}
.immich-photo-download:hover { background: rgba(255,255,255,0.35); }
.immich-photo-delete:hover { background: rgba(220,38,38,0.7); }

/* ---- Upload progress ---- */
.immich-upload-progress {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.immich-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--bg-surface);
    border-radius: 3px;
    overflow: hidden;
}

.immich-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
    transition: width 0.2s ease;
}

.immich-upload-label {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    cursor: pointer;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .vault-docs-layout { flex-direction: column; }
    .vault-categories-panel { width: 100%; }

    .immich-albums-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }
    .immich-photos-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
}