/* ===== CSV Sammlung – v3 mit CRUD ===== */
.csvs-wrap {
    --csvs-max-w: 1400px;
    --csvs-bg: #f5f7fa;
    --csvs-card: #ffffff;
    --csvs-text: #1e293b;
    --csvs-text-light: #64748b;
    --csvs-primary: #2563eb;
    --csvs-primary-hover: #1d4ed8;
    --csvs-border: #e2e8f0;
    --csvs-shadow: 0 2px 8px rgba(0,0,0,.06);
    --csvs-radius: 10px;
    --csvs-card-scale: 1;
    --csvs-success: #16a34a;
    --csvs-danger: #dc2626;
    --csvs-warning: #f59e0b;
    font-family: 'Segoe UI', system-ui, sans-serif;
    color: var(--csvs-text);
}

/* Toolbar */
.csvs-toolbar {
    max-width: var(--csvs-max-w); margin: 12px auto;
    padding: 10px 20px; display: flex; flex-wrap: wrap;
    gap: 16px; align-items: center;
    background: var(--csvs-card); border-radius: var(--csvs-radius);
    box-shadow: var(--csvs-shadow);
}
.csvs-toolbar-group { display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--csvs-text-light); }
.csvs-toolbar-group label { white-space:nowrap; font-weight:600; }
.csvs-toolbar-group input[type=range] { width:120px; cursor:pointer; }
.csvs-toolbar-group span { min-width:40px; text-align:right; font-variant-numeric:tabular-nums; }

.csvs-btn-tool {
    padding:6px 14px; background:var(--csvs-primary); color:#fff;
    border:none; border-radius:6px; font-size:.85rem; cursor:pointer;
    transition: background .2s;
}
.csvs-btn-tool:hover { background:var(--csvs-primary-hover); }
.csvs-btn-danger { background:var(--csvs-danger)!important; }
.csvs-btn-danger:hover { background:#b91c1c!important; }
.csvs-btn-save { background:var(--csvs-success)!important; }
.csvs-btn-save:hover { background:#15803d!important; }

/* Container */
.csvs-container {
    max-width: var(--csvs-max-w); margin: 16px auto; padding: 0 16px;
    transition: max-width .3s ease;
}

/* Suche + Neu-Button */
.csvs-search-row { display:flex; gap:10px; margin-bottom:14px; align-items:stretch; }
.csvs-search { flex:1; }
.csvs-search input {
    width:100%; padding:12px 16px; border:2px solid var(--csvs-border);
    border-radius:var(--csvs-radius); font-size:1rem; box-sizing:border-box;
}
.csvs-search input:focus { outline:none; border-color:var(--csvs-primary); }
.csvs-btn-add {
    padding:12px 20px; background:var(--csvs-success); color:#fff;
    border:none; border-radius:var(--csvs-radius); font-size:1rem;
    font-weight:600; cursor:pointer; white-space:nowrap; transition:background .2s;
}
.csvs-btn-add:hover { background:#15803d; }

/* Filter */
.csvs-filter-row {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
    gap:10px; margin-bottom:14px;
}
.csvs-filter-row select {
    width:100%; padding:9px 12px; border:2px solid var(--csvs-border);
    border-radius:8px; font-size:.88rem; background:var(--csvs-card);
}
.csvs-filter-row .csvs-btn-reset {
    padding:9px 16px; background:#ef4444; color:#fff;
    border:none; border-radius:8px; cursor:pointer; font-size:.88rem;
}

/* Controls */
.csvs-controls { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; flex-wrap:wrap; gap:10px; }
.csvs-results { font-size:.88rem; color:var(--csvs-text-light); }
.csvs-view-controls { display:flex; align-items:center; gap:8px; }
.csvs-view-controls select { padding:7px 10px; border:2px solid var(--csvs-border); border-radius:8px; font-size:.85rem; }
.csvs-btn-view {
    width:36px; height:36px; border:2px solid var(--csvs-border);
    border-radius:8px; background:var(--csvs-card); font-size:1.1rem;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.csvs-btn-view.active { border-color:var(--csvs-primary); background:#eff6ff; color:var(--csvs-primary); }

/* Kategorien */
.csvs-cat-nav { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.csvs-cat-pill {
    padding:5px 14px; background:var(--csvs-card); border:1px solid var(--csvs-border);
    border-radius:20px; font-size:.8rem; cursor:pointer;
}
.csvs-cat-pill:hover, .csvs-cat-pill.active { background:var(--csvs-primary); color:#fff; border-color:var(--csvs-primary); }

/* Grid */
.csvs-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(calc(200px * var(--csvs-card-scale)),1fr));
    gap:16px;
}

/* Card */
.csvs-card {
    background:var(--csvs-card); border-radius:var(--csvs-radius);
    box-shadow:var(--csvs-shadow); overflow:hidden; cursor:pointer;
    transition:transform .2s,box-shadow .2s; position:relative;
}
.csvs-card:hover { transform:translateY(-3px); box-shadow:0 6px 20px rgba(0,0,0,.1); }
.csvs-card-image {
    width:100%; aspect-ratio:1/1; background:#f1f5f9;
    display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.csvs-card-image img { width:100%; height:100%; object-fit:contain; }
.csvs-card-no-image { font-size:2.5rem; color:#cbd5e1; }
.csvs-card-body { padding:10px 12px 14px; text-align:center; }
.csvs-card-body h3 {
    font-size:.9rem; font-weight:600; line-height:1.3;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    margin:0;
}

/* Card Quick-Actions (nur für Admins sichtbar) */
.csvs-card-actions {
    position:absolute; top:6px; right:6px; display:flex; gap:4px;
    opacity:0; transition:opacity .2s;
}
.csvs-card:hover .csvs-card-actions { opacity:1; }
.csvs-card-action-btn {
    width:30px; height:30px; border-radius:50%; border:none;
    display:flex; align-items:center; justify-content:center;
    font-size:.8rem; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.15);
    transition:transform .15s;
}
.csvs-card-action-btn:hover { transform:scale(1.15); }
.csvs-card-action-btn.edit { background:#fff; color:var(--csvs-primary); }
.csvs-card-action-btn.delete { background:#fff; color:var(--csvs-danger); }

/* List */
.csvs-list { display:flex; flex-direction:column; gap:8px; }
.csvs-list .csvs-card { display:flex; flex-direction:row; align-items:center; }
.csvs-list .csvs-card-image { width:80px; height:80px; min-width:80px; aspect-ratio:auto; }
.csvs-list .csvs-card-body { text-align:left; flex:1; }
.csvs-list .csvs-card-actions { opacity:1; position:static; padding-right:12px; }

/* Pagination */
.csvs-pagination { display:flex; justify-content:center; gap:6px; margin:24px 0 40px; flex-wrap:wrap; }
.csvs-page-btn {
    padding:8px 14px; border:2px solid var(--csvs-border); border-radius:8px;
    background:var(--csvs-card); cursor:pointer; font-size:.88rem;
}
.csvs-page-btn:hover { border-color:var(--csvs-primary); color:var(--csvs-primary); }
.csvs-page-btn.active { background:var(--csvs-primary); color:#fff; border-color:var(--csvs-primary); }
.csvs-page-btn:disabled { opacity:.4; cursor:default; }

/* ===== Modals ===== */
.csvs-modal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.55);
    display:none; align-items:center; justify-content:center;
    z-index:100000; padding:20px;
}
.csvs-modal-overlay.open { display:flex; }
.csvs-modal {
    background:var(--csvs-card); border-radius:14px;
    max-width:800px; width:100%; max-height:85vh; overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.2); display:flex; flex-direction:column;
    transition:max-width .3s,max-height .3s;
}
.csvs-modal-toolbar {
    display:flex; flex-wrap:wrap; align-items:center; gap:12px;
    padding:12px 20px; background:#f8fafc; border-bottom:1px solid var(--csvs-border);
    border-radius:14px 14px 0 0; flex-shrink:0;
}
.csvs-modal-right { margin-left:auto; display:flex; align-items:center; gap:8px; }
.csvs-modal-close {
    background:none; border:none; font-size:1.4rem; cursor:pointer;
    color:var(--csvs-text-light); padding:2px 6px; border-radius:6px;
}
.csvs-modal-close:hover { color:var(--csvs-text); background:#e2e8f0; }
.csvs-modal-body { padding:24px 28px 28px; overflow-y:auto; flex:1; }
.csvs-modal-body h2 { margin:0 0 16px; font-size:1.3rem; }

/* Detail Modal */
.csvs-modal-image { text-align:center; margin-bottom:20px; }
.csvs-modal-image img { max-width:100%; max-height:400px; border-radius:8px; object-fit:contain; }
.csvs-modal-fields { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; }
.csvs-modal-field { padding:10px; background:#f8fafc; border-radius:8px; }
.csvs-modal-field-label { font-size:.75rem; text-transform:uppercase; color:var(--csvs-text-light); font-weight:600; letter-spacing:.5px; }
.csvs-modal-field-value { font-size:.95rem; margin-top:3px; word-break:break-word; }
.csvs-modal-field.full-width { grid-column:1/-1; }

/* Formular-Modal */
.csvs-form-modal { max-width:700px; }
.csvs-form-footer {
    padding:14px 20px; background:#f8fafc; border-top:1px solid var(--csvs-border);
    display:flex; justify-content:flex-end; gap:10px;
    border-radius:0 0 14px 14px; flex-shrink:0;
}
.csvs-form-grid {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px;
}
.csvs-form-group { display:flex; flex-direction:column; gap:4px; }
.csvs-form-group.full-width { grid-column:1/-1; }
.csvs-form-group label {
    font-size:.78rem; font-weight:600; text-transform:uppercase;
    color:var(--csvs-text-light); letter-spacing:.5px;
}
.csvs-form-group input,
.csvs-form-group textarea {
    padding:10px 12px; border:2px solid var(--csvs-border); border-radius:8px;
    font-size:.92rem; font-family:inherit; resize:vertical; transition:border-color .2s;
}
.csvs-form-group input:focus,
.csvs-form-group textarea:focus {
    outline:none; border-color:var(--csvs-primary);
}

/* Lösch-Modal */
.csvs-delete-modal { max-width:440px; }

/* Toast-Benachrichtigungen */
.csvs-toast {
    position:fixed; top:20px; right:20px; z-index:200000;
    padding:14px 22px; border-radius:10px; color:#fff;
    font-size:.92rem; font-weight:500;
    box-shadow:0 8px 30px rgba(0,0,0,.2);
    animation:csvsToastIn .3s ease, csvsToastOut .3s ease 2.7s forwards;
}
.csvs-toast.success { background:var(--csvs-success); }
.csvs-toast.error { background:var(--csvs-danger); }
.csvs-toast.info { background:var(--csvs-primary); }

@keyframes csvsToastIn { from { opacity:0; transform:translateY(-20px); } to { opacity:1; transform:translateY(0); } }
@keyframes csvsToastOut { from { opacity:1; } to { opacity:0; transform:translateY(-20px); } }

/* Scroll Top */
.csvs-scroll-top {
    position:fixed; bottom:24px; right:24px; width:44px; height:44px;
    border-radius:50%; background:var(--csvs-primary); color:#fff; border:none;
    font-size:1.2rem; cursor:pointer; display:none; align-items:center;
    justify-content:center; box-shadow:0 4px 14px rgba(37,99,235,.35); z-index:99999;
}
.csvs-scroll-top.show { display:flex; }

/* Notice */
.csvs-notice {
    padding:20px; background:#fef3c7; border:1px solid #fcd34d;
    border-radius:8px; color:#92400e; text-align:center;
}

/* Print */
@media print {
    .csvs-toolbar, .csvs-search-row, .csvs-filter-row, .csvs-controls,
    .csvs-cat-nav, .csvs-pagination, .csvs-scroll-top, .csvs-card-actions,
    .csvs-btn-add { display:none!important; }
}

@media (max-width:768px) {
    .csvs-toolbar { gap:10px; padding:10px 12px; }
    .csvs-filter-row { grid-template-columns:1fr 1fr; }
    .csvs-grid { grid-template-columns:repeat(auto-fill,minmax(calc(150px * var(--csvs-card-scale)),1fr)); }
    .csvs-modal { max-width:95vw!important; }
    .csvs-form-grid { grid-template-columns:1fr; }
    .csvs-search-row { flex-direction:column; }
}
@media (max-width:480px) {
    .csvs-filter-row { grid-template-columns:1fr; }
    .csvs-grid { grid-template-columns:repeat(auto-fill,minmax(calc(130px * var(--csvs-card-scale)),1fr)); }
}