:root { 
    --primary: #3b82f6; 
    --primary-hover: #2563eb; 
    --bg-body: #f3f4f6; 
    --bg-sidebar: #ffffff; 
    --bg-content: #ffffff; 
    --border: #e5e7eb; 
    --text-main: #1f2937; 
    --text-secondary: #6b7280; 
    --hover-bg: #f9fafb; 
}

/* Quick Action Tiles (Google Drive Style) */
.quick-actions {
    display: grid;
    /* 4 Spalten erzwingen, die sich den Platz teilen */
    grid-template-columns: repeat(4, 1fr); 
    gap: 15px;
    padding: 20px;
    padding-bottom: 0;
}

/* Fallback für kleine Bildschirme (Mobile) */
@media (max-width: 768px) {
    .quick-actions {
        grid-template-columns: repeat(2, 1fr); /* 2x2 auf Handy */
    }
}

.action-tile {
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    text-align: center;
    font-weight: 500;
    color: var(--text-main);
    height: 90px;
}

.action-tile i {
    font-size: 1.8rem;
    margin-bottom: 2px;
}

.action-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-color: var(--primary);
    color: var(--primary);
}

/* Anpassung für Dark Mode */
body.dark-mode .action-tile {
    background: var(--bg-sidebar);
    border-color: var(--border);
}
body.dark-mode .action-tile:hover {
    background: #374151;
    color: #60a5fa;
    border-color: #60a5fa;
}

/* DARK MODE VARS */
body.dark-mode {
    --primary: #3b82f6;
    --primary-hover: #60a5fa;
    --bg-body: #111827;
    --bg-sidebar: #1f2937;
    --bg-content: #1f2937;
    --border: #374151;
    --text-main: #f9fafb;
    --text-secondary: #9ca3af;
    --hover-bg: #374151;
}
body.dark-mode .file-name { color: #e5e7eb; }
body.dark-mode .nav-item:hover { background: #374151; }
body.dark-mode .nav-item.active { background: #374151; color: #60a5fa; }
body.dark-mode th { background: #1f2937; color: #d1d5db; }
body.dark-mode .search-bar { background: #374151; }
body.dark-mode .search-bar input { color: #fff; }
body.dark-mode .new-btn { background: #374151; color: #fff; border-color: #4b5563; }
body.dark-mode .new-btn:hover { background: #4b5563; }
body.dark-mode .context-menu { background: #1f2937; border-color: #4b5563; }
body.dark-mode .context-item { color: #e5e7eb; }
body.dark-mode .context-item:hover { background: #374151; }
body.dark-mode .settings-form input { background: #374151; color: white; border-color: #4b5563; }
body.dark-mode .btn { background: #374151; color: white; border-color: #4b5563; }
body.dark-mode .btn:hover { background: #4b5563; }
body.dark-mode .btn-primary { background: var(--primary); color: white; border-color: var(--primary); }
body.dark-mode .modal { background: #1f2937; color: white; border: 1px solid #374151; }
body.dark-mode select { background: #374151; color: white; border-color: #4b5563; }
body.dark-mode .file-list-container { background: #1f2937 !important; }

/* Icon Colors */
.text-yellow { color: #eab308; } 
.text-red { color: #ef4444; } 
.text-blue { color: #3b82f6; } 
.text-green { color: #22c55e; } 
.text-purple { color: #a855f7; } 
.text-orange { color: #f97316; } 
.text-pink { color: #ec4899; } 
.text-gray { color: #9ca3af; } 
.text-folder { color: #facc15; }

.bg-primary { background: var(--primary); } 
.bg-red { background: #ef4444; }

body { 
    font-family: 'Inter', sans-serif; 
    background: var(--bg-body); 
    color: var(--text-main); 
    margin: 0; 
    height: 100vh; 
    display: flex; 
    overflow: hidden; 
}

/* Sidebar Styles */
.sidebar { 
    width: 260px; 
    background: var(--bg-sidebar); 
    border-right: 1px solid var(--border); 
    display: flex; 
    flex-direction: column; 
    padding: 20px; 
    flex-shrink: 0; 
}
.logo { 
    font-size: 1.25rem; 
    font-weight: 700; 
    color: var(--text-main); 
    margin-bottom: 30px; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
}
.new-btn { 
    background: white; 
    border: 1px solid var(--border); 
    border-radius: 24px; 
    padding: 12px 20px; 
    font-weight: 500; 
    color: var(--text-main); 
    cursor: pointer; 
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    margin-bottom: 20px; 
    transition: all 0.2s; 
}
.new-btn:hover { 
    background: #f9fafb; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); 
}
.nav-item { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    padding: 10px 12px; 
    border-radius: 0 20px 20px 0; 
    color: var(--text-main); 
    text-decoration: none; 
    margin-bottom: 4px; 
    margin-left: -20px; 
    padding-left: 32px; 
    font-size: 0.95rem; 
}
.nav-item:hover { 
    background: #f3f4f6; 
} 
.nav-item.active { 
    background: #e8f0fe; 
    color: #1967d2; 
    font-weight: 500; 
}
.nav-item i { 
    width: 20px; 
    text-align: center; 
    color: #5f6368; 
} 
.nav-item.active i { 
    color: #1967d2; 
}
.storage-info { 
    margin-top: auto; 
    font-size: 0.85rem; 
    color: var(--text-secondary); 
    padding-top: 20px; 
    border-top: 1px solid var(--border); 
}

/* Main Content Styles */
.main-content { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    background: white; 
    margin: 15px; 
    border-radius: 16px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); 
    overflow: hidden; 
    background: var(--bg-content);
}
.top-bar { 
    padding: 15px 25px; 
    border-bottom: 1px solid var(--border); 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
}
.breadcrumb { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    font-size: 1.1rem; 
    color: var(--text-secondary); 
}
.breadcrumb a { 
    text-decoration: none; 
    color: var(--text-secondary); 
    padding: 4px 8px; 
    border-radius: 4px; 
}
.breadcrumb a:hover { 
    background: #f3f4f6; 
    color: var(--text-main); 
}
body.dark-mode .breadcrumb a:hover { background: #374151; color: #fff; }
.breadcrumb span { 
    color: var(--border); 
} 
.breadcrumb .current { 
    color: var(--text-main); 
    font-weight: 600; 
    pointer-events: none; 
}
.search-bar { 
    background: #f3f4f6; 
    padding: 8px 16px; 
    border-radius: 8px; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    width: 300px; 
    color: var(--text-secondary); 
}
.search-bar input { 
    border: none; 
    background: transparent; 
    outline: none; 
    width: 100%; 
    color: var(--text-main); 
}

/* Table Styles */
.file-list-container { 
    flex: 1; 
    overflow-y: auto; 
    padding: 0; 
}
table { 
    width: 100%; 
    border-collapse: collapse; 
    min-width: 600px; 
}
th { 
    text-align: left; 
    padding: 12px 25px; 
    border-bottom: 1px solid var(--border); 
    color: var(--text-secondary); 
    font-weight: 500; 
    font-size: 0.9rem; 
    position: sticky; 
    top: 0; 
    background: white; 
    z-index: 10; 
}
td { 
    padding: 12px 25px; 
    border-bottom: 1px solid var(--border); 
    vertical-align: middle; 
    font-size: 0.95rem; 
}
tr { 
    transition: background 0.1s; 
} 
tr:hover { 
    background: var(--hover-bg); 
} 
tr:hover .row-actions { 
    opacity: 1; 
}
/* Selected Row */
tr.selected-row {
    background-color: #e8f0fe !important;
}
body.dark-mode tr.selected-row { background-color: #374151 !important; }

.file-name { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    font-weight: 500; 
    color: var(--text-main); 
    text-decoration: none; 
    cursor: pointer;
} 
.file-name i { 
    font-size: 1.2rem; 
}
.row-actions { 
    opacity: 0; 
    display: flex; 
    gap: 8px; 
    justify-content: flex-end; 
    transition: opacity 0.2s; 
}
.icon-btn { 
    background: transparent; 
    border: none; 
    cursor: pointer; 
    padding: 6px; 
    border-radius: 50%; 
    color: var(--text-secondary); 
    transition: background 0.2s; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 32px; 
    height: 32px; 
}
.icon-btn:hover { 
    background: #e5e7eb; 
    color: var(--text-main); 
} 
body.dark-mode .icon-btn:hover { background: #374151; color: white; }
.icon-btn.delete:hover { 
    background: #fee2e2; 
    color: #ef4444; 
} 
.icon-btn.star.active { 
    color: #eab308; 
}

/* GRID VIEW STYLES */
.file-list-container.grid-view table { display: block; }
.file-list-container.grid-view thead { display: none; }
.file-list-container.grid-view tbody { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); 
    gap: 15px; 
    padding: 20px; 
}
.file-list-container.grid-view tr { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    border: 1px solid var(--border); 
    border-radius: 12px; 
    padding: 15px; 
    position: relative; 
    height: 160px; 
    justify-content: flex-start; 
    background: var(--bg-content); 
    transition: transform 0.2s, box-shadow 0.2s; 
}
.file-list-container.grid-view tr:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); 
    z-index: 5; 
}
.file-list-container.grid-view td { border: none; padding: 0; }
/* Checkbox */
.file-list-container.grid-view td:first-child { 
    position: absolute; top: 10px; left: 10px; z-index: 2; 
}
/* Name/Icon */
.file-list-container.grid-view td:nth-child(2) { 
    width: 100%; text-align: center; margin-top: 20px; 
    display:flex; flex-direction: column; align-items: center; 
    height: 100px; justify-content: center; 
}
.file-list-container.grid-view td:nth-child(2) .file-name { 
    flex-direction: column; gap: 10px; text-align: center; width: 100%; word-break: break-all;
}
.file-list-container.grid-view td:nth-child(2) .file-name i { 
    font-size: 3.5rem; margin-bottom: 5px; 
}
/* Actions */
.file-list-container.grid-view td:last-child { 
    position: absolute; top: 5px; right: 5px; 
}
.file-list-container.grid-view td:last-child .row-actions { 
    opacity: 0; gap: 2px; 
}
.file-list-container.grid-view tr:hover td:last-child .row-actions { opacity: 1; }
/* Hide others */
.file-list-container.grid-view td:nth-child(3),
.file-list-container.grid-view td:nth-child(4),
.file-list-container.grid-view td:nth-child(5),
.file-list-container.grid-view td:nth-child(6) { display: none; }

/* TREE VIEW STYLES */
.folder-tree {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-body);
    margin-bottom: 10px; /* Abstand für Auswahl-Text */
}
.tree-item {
    padding: 8px 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
}
.tree-item:hover {
    background: var(--hover-bg);
}
/* WICHTIG: Die Klasse für die Auswahl */
.tree-item.selected {
    background: #e8f0fe !important; /* !important erzwingt die Farbe */
    color: var(--primary);
    font-weight: 600;
}
body.dark-mode .tree-item.selected {
    background: #374151 !important;
    color: white;
}
.tree-item i {
    color: #facc15;
}

/* Toast & Messages */
.msg-container { 
    position: absolute; 
    bottom: 20px; 
    right: 20px; 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    z-index: 100; 
    pointer-events: none; 
}
.msg { 
    padding: 12px 20px; 
    border-radius: 8px; 
    color: white; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
    animation: slideIn 0.3s ease; 
    pointer-events: auto; 
}
.msg.success { background: #10b981; } 
.msg.error { background: #ef4444; }
@keyframes slideIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Server Table */
.server-table { width: 100%; border-collapse: separate; border-spacing: 0; padding: 20px; } 
.server-table td { border-bottom: 1px solid var(--border); padding: 15px 10px; }
.status-ok { color: #10b981; background: #d1fae5; padding: 4px 10px; border-radius: 12px; font-size: 0.85rem; font-weight: 600; }
.status-fail { color: #ef4444; background: #fee2e2; padding: 4px 10px; border-radius: 12px; font-size: 0.85rem; font-weight: 600; }

/* Settings Form */
.settings-form { padding: 20px; max-width: 600px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 500; }
.form-control { width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 6px; box-sizing: border-box; }

/* Modals */
.modal-overlay { 
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.5); 
    z-index: 200; 
    align-items: center; 
    justify-content: center; 
    backdrop-filter: blur(4px); 
}
.modal { 
    background: white; 
    padding: 25px; 
    border-radius: 12px; 
    width: 400px; 
    max-width: 90%; 
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); 
}
.modal h3 { margin-top: 0; }
.modal-actions { 
    display: flex; 
    justify-content: flex-end; 
    gap: 10px; 
    margin-top: 20px; 
}
.btn { 
    padding: 8px 16px; 
    border-radius: 6px; 
    border: 1px solid var(--border); 
    background: white; 
    cursor: pointer; 
    font-weight: 500; 
} 
.btn-primary { 
    background: var(--primary); 
    color: white; 
    border-color: var(--primary); 
}
.form-select { 
    width: 100%; 
    padding: 10px; 
    border: 1px solid var(--border); 
    border-radius: 6px; 
    margin-top: 10px; 
    font-size: 1rem; 
}

/* Specific Modals */
#previewModal .modal { width: auto; max-width: 90vw; max-height: 90vh; background: black; padding: 0; overflow: hidden; display: flex; flex-direction: column; border-radius: 8px; }
#previewModal .modal-header { padding: 15px; background: rgba(255,255,255,0.1); display: flex; justify-content: space-between; align-items: center; color: white; position: absolute; top: 0; width: 100%; box-sizing: border-box; z-index: 10; opacity: 0; transition: opacity 0.2s; } 
#previewModal .modal:hover .modal-header { opacity: 1; }
#previewContent { display: flex; align-items: center; justify-content: center; min-width: 300px; min-height: 200px; background: #111; }
#previewContent img { max-width: 100%; max-height: 90vh; object-fit: contain; display: none; }
#previewContent video { max-width: 100%; max-height: 90vh; display: none; }
#previewContent audio { width: 400px; padding: 20px; display: none; }
#editorModal .modal { width: 90vw; height: 85vh; max-width: 1200px; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
#editorHeader { padding: 15px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; background: #f8fafc; }
body.dark-mode #editorHeader { background: #1f2937; }
#editorContainer { flex: 1; position: relative; } 
#aceEditor { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

/* Context Menu & Batch */
.context-menu {
    display: none;
    position: absolute;
    z-index: 1000;
    background: white;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    border: 1px solid var(--border);
    width: 200px;
    overflow: hidden;
    padding: 5px 0;
}
.context-item {
    padding: 10px 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--text-main);
}
.context-item:hover { background: #f3f4f6; }
.context-item i { width: 20px; color: var(--text-secondary); text-align: center; }
.context-divider { height: 1px; background: var(--border); margin: 5px 0; }

.batch-bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 10px 20px;
    border-radius: 30px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    display: none;
    align-items: center;
    gap: 15px;
    z-index: 90;
    border: 1px solid var(--border);
}
body.dark-mode .batch-bar { background: #1f2937; border-color: #4b5563; }
.batch-count { font-weight: 600; color: var(--primary); background: #e8f0fe; padding: 2px 8px; border-radius: 10px; font-size: 0.85rem; }

/* Login Styles from embedded */
.login-body {
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height: 100vh; 
    margin: 0;
}
.login-box { 
    background: white; 
    padding: 2.5rem; 
    border-radius: 16px; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.05); 
    width: 320px; 
    text-align: center; 
}
.login-box i { 
    font-size: 3rem; 
    color: #3b82f6; 
    margin-bottom: 1rem; 
}
.login-input { 
    width: 100%; 
    padding: 12px; 
    margin-bottom: 15px; 
    border: 2px solid #e5e7eb; 
    border-radius: 8px; 
    box-sizing: border-box; 
    outline: none; 
    transition: 0.2s; 
}
.login-input:focus { 
    border-color: #3b82f6; 
}
.login-button { 
    width: 100%; 
    padding: 12px; 
    background: #3b82f6; 
    color: white; 
    border: none; 
    border-radius: 8px; 
    cursor: pointer; 
    font-weight: 600; 
    font-size: 1rem; 
    transition: 0.2s; 
}
.login-button:hover { 
    background: #2563eb; 
}
.error { 
    color: #ef4444; 
    margin-bottom: 15px; 
    font-size: 0.9em; 
    background: #fee2e2; 
    padding: 8px; 
    border-radius: 6px; 
}

@media (max-width: 768px) { 
    .sidebar { display: none; } 
    .main-content { margin: 0; border-radius: 0; height: 100vh; } 
}