/* dbf-viewer/style.css 
  Author: divisionbyzero
  Website: https://divisionbyzero.dev
*/
html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box; 
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	overflow: hidden; /* Empêche le défilement du body pour mieux contrôler le défilement interne */
}

*, *:before, *:after {
	box-sizing: inherit;
}

body {
	line-height: 1.5; 
	background-color: #f0f2f5; 
	color: #333;
	padding-top: 50px; /* Espace pour la navbar fixe */
}

/* --- Navbar Styles --- */
#navbar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 50px; 
	background-color: #343a40; 
	color: #f8f9fa; 
	padding: 0 10px; 
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 1030; 
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.navbar-brand {
	font-size: 1.1em; 
	font-weight: 500; 
	margin-right: 10px; 
}

#loaded_db_info_navbar {
	font-size: 0.8em; 
	color: #adb5bd; 
	margin: 0 10px; 
	text-align: center;
	flex-grow: 1; 
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 100px; 
}

.navbar-actions {
	display: flex;
	align-items: center;
	margin-left: auto; 
}

#navbar_search_input {
	padding: 5px 8px; 
	font-size: 0.8em; 
	border: 1px solid #495057;
	border-radius: 3px; 
	background-color: #495057; 
	color: #f8f9fa;
	margin-right: 8px; 
	width: 200px; 
}
#navbar_search_input::placeholder {
	color: #adb5bd;
}

.navbar-button {
	background-color: #007bff;
	color: white;
	border: none;
	padding: 6px 10px; 
	border-radius: 3px; 
	cursor: pointer;
	font-size: 0.8em; 
	margin-left: 5px; 
	transition: background-color 0.2s ease;
	white-space: nowrap; 
}
.navbar-button:hover {
	background-color: #0056b3;
}
.navbar-button.icon-button {
	padding: 6px 8px; 
	font-size: 1.1em; /* Taille de l'icône globe ajustée */
	line-height: 1; /* Pour un meilleur centrage vertical de l'icône */
}


/* Dropdown styles */
.dropdown {
	position: relative; /* Nécessaire pour le positionnement absolu des enfants */
	display: inline-block;
}

.dropdown-content {
	display: none; /* Caché par défaut */
	position: absolute; 
	top: calc(100% + 2px); /* Se positionne juste en dessous du bouton avec un petit écart */
	right: 0; /* S'aligne à droite du bouton parent */
	background-color: #ffffff; 
	min-width: 220px;  
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.15); 
	z-index: 1031; 
	border-radius: 4px;
	border: 1px solid #ced4da; 
	padding: 0; 
	max-height: 350px; 
	overflow-y: auto;
}

/* Pour le dropdown de langue qui est le dernier élément à droite, right:0 est bon */
/* Si un autre dropdown (ex: Gérer Bases) ne doit pas s'aligner à droite du *bouton*
   mais plutôt s'étendre vers la droite depuis le bord gauche du bouton,
   on utiliserait left:0; au lieu de right:0; pour ce dropdown spécifique.
   Pour l'instant, right:0 est appliqué à tous. */

.dropdown-content ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.dropdown-content li {
	font-size: 0.85em; 
	color: #212529; 
	border-bottom: 1px solid #e9ecef; 
}
.dropdown-content li:last-child {
	border-bottom: none;
}
.dropdown-content li a { 
	display: block;
	padding: 8px 12px;
	text-decoration: none;
	color: #212529;
	cursor: pointer;
}
.dropdown-content li a:hover {
	background-color: #f8f9fa;
}

.dropdown-content li a.disabled-link { 
	color: #adb5bd;
	cursor: not-allowed;
	background-color: #e9ecef;
}
.dropdown-content li a.disabled-link:hover {
	background-color: #e9ecef; 
}

.dropdown-content li .db-name-container { 
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 12px;
}
.dropdown-content li .db-name { 
	flex-grow: 1;
	cursor: pointer; 
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding-right: 10px;
	color: #007bff; 
}
.dropdown-content li .db-name:hover {
	text-decoration: underline;
}

.dropdown-content li .db-actions button {
	background: none;
	border: none;
	cursor: pointer;
	padding: 3px 6px; 
	font-size: 1em; 
	line-height: 1;
}
.dropdown-content li .db-actions button.delete-db {
	color: #dc3545; 
	margin-left: 5px; 
}
.dropdown-content li .db-actions button:hover {
	opacity: 0.7;
}
/* Règle pour afficher le dropdown quand il a la classe .show */
.dropdown-content.show {
	display: block;
}
.dropdown-content .no-dbs { 
	padding: 10px 12px;
	font-style: italic;
	color: #6c757d;
}

/* Fin Navbar Styles */

.container {
	width: 100%; 
	height: calc(100vh - 50px); 
	margin: 0; 
	padding: 5px;
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
}


#file_selection_area {
	padding: 10px; 
}
#file_selection_area .instructions {
	text-align: center;
	margin-bottom: 10px; 
	font-size: 1.0em; 
	color: #495057; 
}

#drop_zone_unified { 
	border: 2px dashed #007bff; 
	border-radius: 6px; 
	padding: 20px; 
	text-align: center;
	background-color: #f8f9fa; 
	transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
	margin-bottom: 15px; 
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 140px; 
}

#drop_zone_unified.dragover { background-color: #e2e6ea; border-color: #0056b3; }
#drop_zone_unified.has-files { border-color: #28a745; background-color: #e6ffee; }
#drop_zone_unified p { margin: 5px 0; font-size: 0.95em; color: #495057; }

.file-list-display {
	margin-top: 10px; 
	font-size: 0.8em; 
	color: #212529;
	text-align: left; 
	width: 100%;
	max-width: 450px; 
}
.file-list-display div { margin-bottom: 4px; padding: 5px 8px; background-color: #e9ecef; border: 1px solid #ced4da; border-radius: 3px; word-break: break-all; }

.or-text { font-style: italic; color: #6c757d; margin: 8px 0 !important; }

.browse-button {
	display: inline-block;
	padding: 8px 16px; 
	background-color: #007bff;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.9em; 
	transition: background-color 0.2s ease-in-out;
	margin-top: 8px; 
}
.browse-button:hover { background-color: #0056b3; }

.action-buttons-container { text-align: center; margin-top: 15px; margin-bottom: 15px; }

.action-button {
	padding: 10px 18px; 
	background-color: #28a745; 
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.9em; 
	transition: background-color 0.2s ease-in-out;
	margin: 0 5px; 
}
.action-button:hover { background-color: #218838; }

.clear-button {
	background-color: #6c757d; 
	color: white;
}
.clear-button:hover { background-color: #5a6268; }

.progress-section { 
	width: 90%; 
	max-width: 600px; 
	margin-left: auto; margin-right: auto;
	padding: 8px; 
	background-color: #f0f0f0;
	border-radius: 5px;
	box-shadow: inset 0 1px 2px rgba(0,0,0,.1); 
	margin-bottom: 15px; 
}
#progress_bar_label { font-size: 0.85em; margin-bottom: 5px; text-align: center; color: #333;}
.progress { height: 18px; background-color: #e9ecef; border-radius: .25rem; overflow: hidden; }
.progress-bar { height: 100%; background-color: #007bff; color: #fff; text-align: center; white-space: nowrap; transition: width .3s ease; font-size: 0.75em; line-height: 18px; } 

.output-section { 
	margin-bottom: 5px; 
}
#output_messages { 
	text-align: center; 
	padding: 0 5px; 
	margin-bottom: 5px; 
}
#output_messages .error { color: #dc3545; background-color: #f8d7da; padding: 8px 12px; border-radius: 4px; border: 1px solid #f5c6cb; text-align: left; margin-bottom: 8px;}
#output_messages .error pre { white-space: pre-wrap; word-break: break-all; font-size: 0.85em; max-height: 150px; overflow-y: auto; background-color: #f1f1f1; padding: 5px 8px; border-radius: 3px; margin-top: 5px; border: 1px solid #ddd;}
#output_messages .success { color: #218838; background-color: #d4edda; padding: 8px 12px; border-radius: 4px; border: 1px solid #c3e6cb; text-align: left; word-break: break-word; }
#output_messages .info { color: #004085; background-color: #cce5ff; border-color: #b8daff; padding: 8px 12px; border-radius: 4px; text-align: left; word-break: break-word; }
#output_messages .warning { color: #856404; background-color: #fff3cd; border-color: #ffeeba; padding: 8px 12px; border-radius: 4px; text-align: left; word-break: break-word; }

#results_area {
	display: flex;
	flex-direction: column;
	flex-grow: 1; 
	min-height: 0; /* Permet à flex-grow de fonctionner correctement dans certains contextes */
}

#output_table_container {
	flex-grow: 1; 
	overflow: auto; /* ESSENTIEL pour le sticky header et le défilement interne */
	border: 1px solid #ced4da; 
	border-radius: 4px;
	background-color: #fff; 
}

table {
	width: 100%; 
	min-width: max-content; 
	border-collapse: separate; 
	border-spacing: 0; 
	font-size: 0.8rem; 
}

th, td {
	border-bottom: 1px solid #dee2e6; 
	border-right: 1px solid #dee2e6;
	padding: 6px 8px; 
	text-align: left;
	white-space: nowrap; 
	vertical-align: top; 
}
th:first-child, td:first-child { border-left: none; }


td.memo-content { white-space: pre-wrap; max-width: 300px; min-width: 120px; overflow: auto; max-height: 100px; background-color: #fdfdfd; vertical-align: top; }

th.numeric-column, td.numeric-column {
	text-align: right;
}

thead th {
	position: -webkit-sticky; /* Pour Safari */
	position: sticky; 
	top: -1px; /* Se colle en haut du conteneur de défilement (#output_table_container). -1px pour masquer la bordure du dessus si elle est visible lors du scroll. */
	z-index: 10; 
	background-color: #e9ecef; 
	color: #212529; 
	border-top: 1px solid #dee2e6; 
	border-bottom: 2px solid #adb5bd; 
}


#output_table_container::-webkit-scrollbar { width: 10px; height: 10px; } 
#output_table_container::-webkit-scrollbar-track { background: #e9ecef; border-radius: 5px;}
#output_table_container::-webkit-scrollbar-thumb { background: #adb5bd; border-radius: 5px; } 
#output_table_container::-webkit-scrollbar-thumb:hover { background: #6c757d; }

tbody tr:nth-of-type(even) { background-color: #f8f9fa; }
tbody tr:hover { background-color: #e9ecef; }
tbody tr.deleted-record td { text-decoration: line-through; color: #adb5bd; background-color: #fff0f0; } 
.field-type { font-weight: normal; font-size: 0.8em; color: #495057; margin-left: 4px; } 

#pagination_controls_area {
	width: 100%; 
	background-color: #e9ecef; 
	padding: 5px 10px;  
	border-top: 1px solid #ced4da;
	box-shadow: 0 -2px 4px rgba(0,0,0,0.05); 
	z-index: 20; 
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap; 
	flex-shrink: 0; 
}

#pagination_controls_area button {
	background-color: #007bff;
	color: white;
	border: none;
	padding: 5px 10px;  
	margin: 2px 5px; 
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.2s ease;
	font-size: 0.8em; 
}
#pagination_controls_area button:disabled { background-color: #adb5bd; color: #6c757d; cursor: not-allowed; }
#pagination_controls_area button:hover:not(:disabled) { background-color: #0056b3; }
#pagination_controls_area span { margin: 0 8px; font-size: 0.8em; color: #343a40;}