* { box-sizing: border-box; }

/* Base */
.container { width: 70vw; margin: 1vh auto; font-family: sans-serif; }
#status, #results-container { display: none; margin: 2vh 0; }

/* Boutons */
button, select {
    padding: 8px 16px; border: 1px solid #ddd; border-radius: 4px;
    cursor: pointer; font-size: 14px; margin: 5px;
}
#cancel-btn { background: #dc3545; color: white; border: none; }
#cancel-btn:hover { background: #c82333; }
#download-btn { background: #28a745; color: white; border: none; }
#download-btn:hover { background: #218838; }
.convert-btn { background: #f39c12; color: white; border: none; font-weight: bold; }
.convert-btn:hover { background: #e67e22; }
.skip-btn { background: #6c757d; color: white; border: none; }
.skip-btn:hover { background: #5a6268; }

/* Formulaire */
label { display: block; margin: 10px 0 5px; font-weight: bold; }
select { background: white; width: 100%; max-width: 400px; }

/* Tableau */
#results-table {
    width: 100%; border-collapse: collapse; background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
#results-table th, #results-table td {
    padding: 8px 12px; text-align: left; border-bottom: 1px solid #ddd;
}
#results-table thead { background: #f8f9fa; position: sticky; top: 0; }
#results-table th { font-weight: bold; border-bottom: 2px solid #dee2e6; }
#results-table tbody tr:nth-child(even) { background: #f8f9fa; }
#results-table tbody tr:hover { background: #e9ecef; }
.table-container { max-height: 400px; overflow-y: auto; border: 1px solid #ddd; border-radius: 5px; }
.coordinates { font-family: monospace; font-size: 12px; }

/* États de status */
.status-processing { color: #007bff; font-weight: bold; }
.status-success { color: #28a745; font-weight: bold; }
.status-error { color: #dc3545; font-weight: bold; }
.status-cancelled { color: #ffc107; font-weight: bold; }
.time-estimation { font-style: italic; color: #6c757d; margin-top: 5px; }

/* Messages */
.validation-error, .validation-success, .conversion-needed {
    padding: 12px; margin: 10px 0; border-radius: 4px;
}
.validation-error {
    background: #f8d7da; border-left: 4px solid #dc3545; color: #721c24;
}
.validation-success {
    background: #d4edda; border-left: 4px solid #28a745; color: #155724;
}
.conversion-needed {
    background: #fff3cd; border-left: 4px solid #f39c12; color: #856404;
}
.validation-message h4 { margin: 0 0 8px; font-size: 16px; }
.validation-message p { margin: 0; }
.suggestion { margin-top: 8px; font-style: italic; font-size: 13px; }
.conversion-buttons { margin-top: 15px; display: flex; gap: 10px; flex-wrap: wrap; }
.conversion-progress { margin-top: 10px; font-style: italic; color: #856404; }

/* Upload */
.file-upload-container {
    background: #f8f9fa; border: 1px dashed #ced4da; border-radius: 8px;
    padding: 20px; text-align: center; cursor: pointer; margin: 15px 0;
}
.file-upload-container:hover { border-color: #adb5bd; background: #fff; }
.file-upload-container.drag-over { border-color: #28a745; background: #d4edda; }
.file-upload-container.file-selected { background: #d4edda; border-color: #28a745; }
.file-upload-icon { font-size: 32px; color: #6c757d; margin-bottom: 10px; }
.file-upload-text { color: #495057; font-size: 16px; font-weight: 500; margin-bottom: 6px; }
.file-upload-subtext { color: #6c757d; font-size: 13px; margin-bottom: 12px; }
.file-input-hidden { position: absolute; opacity: 0; pointer-events: none; }
.file-info {
    margin-top: 12px; padding: 8px; background: #f8f9fa;
    border: 1px solid #dee2e6; border-radius: 4px; color: #495057; font-size: 13px;
}
.file-info-name { font-weight: 500; margin-bottom: 3px; }
.file-info-size { opacity: 0.7; font-size: 11px; }

/* Badges */
.compact-badge {
    position: fixed; top: 20px; right: 20px; z-index: 1000;
    display: flex; flex-direction: column; gap: 8px;
}
.badge-item {
    background: rgba(255,255,255,0.95); border: 1px solid #dee2e6; border-radius: 20px;
    padding: 8px 15px; font-size: 12px; cursor: pointer; max-width: 250px;
}
.badge-item:hover { background: white; }
.badge-item.active { background: #007bff; color: white; }
.badge-header { font-weight: 600; display: flex; justify-content: space-between; }
.badge-content { display: none; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.2); }
.badge-item.active .badge-content { display: block; }
.badge-toggle::before { content: "▼"; font-size: 10px; }
.badge-item.active .badge-toggle::before { content: "▲"; }
.badge-actions { margin-top: 8px; display: flex; gap: 5px; }
.badge-btn {
    background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3);
    color: white; padding: 4px 8px; border-radius: 10px; font-size: 10px; cursor: pointer;
}
.cache-badge { border-left: 3px solid #28a745; }
.info-badge { border-left: 3px solid #007bff; }

@media (max-width: 768px) {
    .container { width: 95vw; }
    .compact-badge { position: static; margin: 10px 0; flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .badge-item { max-width: 200px; }
}