/* --- VARIABLES --- */
:root {
    --zt-primary: #0d9488;       /* Teal */
    --zt-primary-hover: #0f766e;
    --zt-action: #3b82f6;        /* Blue */
    --zt-action-hover: #2563eb;
    --zt-danger: #ef4444;        /* Red */
    --zt-danger-hover: #dc2626;
    --zt-bg: #f1f5f9;
    --zt-card-bg: #ffffff;
    --zt-border: #cbd5e1;
    --zt-text-main: #1e293b;     
    --zt-text-muted: #64748b;
    --zt-dark-btn-bg: #1e293b;   /* Dark Slate */
    --zt-dark-btn-hover: #334155;
}

/* --- LAYOUT --- */
.converter-box {
    background: var(--zt-card-bg);
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 1100px;
    padding: 30px;
    margin: 0 auto;
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--zt-text-main);
}

h1 { margin-top: 0; color: #111827; }
.ondertitel { color: var(--zt-text-muted); margin-bottom: 30px; }

/* --- BUTTONS (High Contrast - Dark Theme Compatible) --- */

/* Base Reset */
.button-large, .button {
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    cursor: pointer;
    font-weight: 500 !important;
    transition: all 0.2s ease;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 1.5;
    text-transform: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* 1. Standard Buttons (Back, Open Another, Add Files) */
/* set to DARK background with WHITE text to match your site */
.button {
    padding: 8px 16px !important;
    font-size: 0.9rem !important;
    background-color: var(--zt-dark-btn-bg) !important; 
    border: 1px solid var(--zt-dark-btn-bg) !important;
    color: #ffffff !important; /* Force White Text */
}
.button:hover { 
    background-color: var(--zt-dark-btn-hover) !important; 
    border-color: var(--zt-dark-btn-hover) !important;
    color: #ffffff !important;
}

/* 2. Large Initial Buttons */
.button-large {
    padding: 16px 32px !important;
    font-size: 1.1rem !important;
    background-color: var(--zt-primary) !important;
    color: #ffffff !important;
}
.button-large:hover { 
    background-color: var(--zt-primary-hover) !important; 
    transform: translateY(-1px); 
}

/* Secondary Large Button (Create Archive) */
.button-large.button-secondary {
    background-color: transparent !important;
    border: 2px solid var(--zt-border) !important;
    color: var(--zt-text-main) !important; /* Keep text dark for white background area */
}
.button-large.button-secondary:hover { 
    border-color: var(--zt-primary) !important; 
    color: var(--zt-primary) !important; 
}

/* 3. Primary Action (Save as ZIP) - Teal */
.button-primary { 
    background-color: var(--zt-primary) !important; 
    border-color: var(--zt-primary) !important; 
    color: #ffffff !important; 
}
.button-primary:hover { 
    background-color: var(--zt-primary-hover) !important; 
}

/* 4. Secondary Action (Extract Selected) - Blue */
.button-action { 
    background-color: var(--zt-action) !important; 
    border-color: var(--zt-action) !important; 
    color: #ffffff !important; 
}
.button-action:hover { 
    background-color: var(--zt-action-hover) !important; 
}

/* 5. Danger Action (Delete) - Solid Red */
.button-danger { 
    background-color: var(--zt-danger) !important; 
    border-color: var(--zt-danger) !important; 
    color: #ffffff !important; 
}
.button-danger:hover { 
    background-color: var(--zt-danger-hover) !important; 
    border-color: var(--zt-danger-hover) !important;
}

/* Toolbar Layout */
.action-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--zt-border);
    justify-content: space-between;
}
.toolbar-group { display: flex; gap: 8px; flex-wrap: wrap; }


/* --- VIEWER --- */
.main-content-area { display: flex; gap: 20px; height: 500px; text-align: left; }
.panel { border: 1px solid var(--zt-border); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.file-list-panel { flex: 1; background: #ffffff; }
.preview-panel { flex: 1; background: #ffffff; position: relative; }

/* File List */
.file-list-header {
    padding: 12px 15px;
    background: #f1f5f9;
    border-bottom: 1px solid var(--zt-border);
    font-weight: 600;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--zt-text-main);
}
.selection-info { margin-left: auto; font-size: 0.8rem; color: var(--zt-text-muted); font-weight: normal; }

.file-list { list-style: none; padding: 0; margin: 0; overflow-y: auto; flex-grow: 1; }
.file-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background 0.15s;
    color: var(--zt-text-main);
}
.file-item:hover { background-color: #f8fafc; }
.file-item.active { background-color: #e0f2fe; border-left: 4px solid var(--zt-primary); padding-left: 11px; }

.file-checkbox { margin-right: 12px; cursor: pointer; transform: scale(1.1); }
.file-item-name { flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.9rem; }

.file-actions { display: flex; opacity: 0; transition: opacity 0.2s; }
.file-item:hover .file-actions { opacity: 1; }
.icon-btn { background: none; border: none; padding: 4px; cursor: pointer; color: var(--zt-text-muted); border-radius: 4px; }
.icon-btn:hover { background-color: #e2e8f0; color: var(--zt-primary); }

/* --- PREVIEW PANEL (Prism Compatible) --- */
#previewContent { 
    overflow: hidden; 
    height: 100%; 
    box-sizing: border-box; 
    background: #2d2d2d; 
    border-radius: 6px;
}

#previewContent img { 
    max-width: 100%; 
    height: auto; 
    display: block; 
    margin: 20px auto;
}

#previewContent pre { 
    margin: 0 !important; 
    height: 100%; 
    border-radius: 0 !important; 
    border: none !important;
    overflow: auto !important; 
    padding: 15px !important;
}

#previewContent code {
    font-family: 'Consolas', 'Monaco', 'Andale Mono', 'Ubuntu Mono', monospace;
    font-size: 14px;
    line-height: 1.5;
    direction: ltr;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    tab-size: 4;
    hyphens: none;
}

.preview-placeholder { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    color: #94a3b8; 
    text-align: center;
    pointer-events: none;
}

/* Utilities */
.file-input-hidden { display: none; }
.password-section { display: flex; justify-content: center; gap: 10px; margin-bottom: 15px; background: #fff7ed; padding: 10px; border: 1px solid #fed7aa; border-radius: 6px; color: #9a3412; }
.global-loader { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(255,255,255,0.9); z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.loader-spinner { width: 40px; height: 40px; border: 4px solid #e2e8f0; border-top: 4px solid var(--zt-primary); border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 15px; }
@keyframes spin { to { transform: rotate(360deg); } }

.drop-zone { border: 2px dashed #cbd5e1; border-radius: 12px; padding: 50px; background: #f8fafc; cursor: pointer; text-align: center; color: var(--zt-text-muted); margin-bottom: 20px; }
.creator-options { display: flex; gap: 10px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.creator-options input { padding: 10px; border: 1px solid var(--zt-border); border-radius: 6px; }
.staged-files-list { text-align: left; max-height: 200px; overflow-y: auto; border: 1px solid var(--zt-border); border-radius: 8px; }
.staged-file-item { padding: 8px 12px; display: flex; justify-content: space-between; border-bottom: 1px solid #f1f5f9; }

@media (max-width: 768px) {
    .main-content-area { flex-direction: column; height: auto; }
    .file-list-panel, .preview-panel { height: 350px; }
    .action-toolbar { flex-direction: column; }
    .toolbar-group { justify-content: center; width: 100%; }
    .button { width: 100%; }
}