/* style.css — thème sombre Broadcastify */
:root {
  --bg: #0b0e19;
  --panel: #12162b;
  --panel-2: #171c34;
  --text: #e6e6e6;
  --muted: #a9b0c7;
  --accent: #4cc9f0;   /* bleu clair */
  --accent-2: #ff6b6b; /* rouge doux */
  --border: #2a3148;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

h1, h2, h3 {
  color: var(--text);
  letter-spacing: 0.2px;
}

#_dash-app-content, .dash-container {
  padding: 16px;
}

label {
  display: inline-block;
  margin-right: 8px;
  color: var(--muted);
  font-weight: 600;
}

.dash-dropdown, .Select-control, .dash-dropdown .Select--single > .Select-control {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
}
.dash-dropdown .Select-menu-outer, .dash-dropdown .Select-option {
  background: var(--panel-2);
  color: var(--text);
}

button, .dash-button, #refresh-btn {
  background: linear-gradient(135deg, var(--accent), #3aa6cc);
  border: none;
  color: #0d0f17;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.08s ease-in-out, box-shadow 0.08s;
  box-shadow: 0 6px 16px rgba(76, 201, 240, 0.25);
}
button:hover, #refresh-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(76, 201, 240, 0.35);
}
button:active, #refresh-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

#msg {
  color: var(--accent-2);
}

/* Carte audio + graph */
#audio-player {
  width: 100%;
  margin: 8px 0 16px;
  padding: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* Graph container */
.js-plotly-plot, .dash-graph, #rms-graph {
  background: var(--panel-2) !important;
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 8px;
}

/* Table */
.dash-table-container {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
}
.dash-table-container .dash-table {
  color: var(--text);
}
.dash-table-container .dash-cell {
  border-color: var(--border);
}
.dash-table-container .dash-header {
  background: var(--panel-2);
  font-weight: 700;
}

/* Lisibilité des Dropdown Dash (React-Select) */
.dash-dropdown .Select-control {
  background: var(--panel) !important;      /* fond du contrôle */
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

.dash-dropdown .Select-placeholder {
  color: var(--muted) !important;           /* placeholder lisible */
}

.dash-dropdown .Select-value,
.dash-dropdown .Select-value-label {
  color: var(--text) !important;            /* texte de la valeur sélectionnée */
}

.dash-dropdown .Select-input > input {
  color: var(--text) !important;            /* saisie de recherche */
}

/* Menu déroulant */
.dash-dropdown .Select-menu-outer {
  background: var(--panel-2) !important;    /* fond du menu */
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

.dash-dropdown .Select-option {
  background: var(--panel-2) !important;
  color: var(--text) !important;
}

/* Option survolée / sélectionnée */
.dash-dropdown .Select-option.is-focused {
  background: #1c2240 !important;           /* survol (focus) */
  color: var(--text) !important;
}

.dash-dropdown .Select-option.is-selected {
  background: #2a3148 !important;           /* sélectionnée */
  color: var(--text) !important;
}

/* Icônes (chevron) et bordures focus */
.dash-dropdown .Select-control .Select-arrow {
  border-top-color: var(--text) !important;
}
.dash-dropdown .is-open > .Select-control .Select-arrow {
  border-top-color: var(--accent) !important;
}
.dash-dropdown .Select-control:hover {
  border-color: var(--accent) !important;
}
.dash-dropdown .is-focused:not(.is-open) > .Select-control {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(76, 201, 240, 0.20) !important; /* glow léger */
}

/* DataTable — thème sombre lisible */
.dash-table-container {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
}

.dash-table-container .dash-table {
  color: var(--text);
  background: var(--panel);
}

.dash-table-container .dash-header {
  background: var(--panel-2);
  color: var(--text);
  font-weight: 700;
  border-bottom: 1px solid var(--border);
}

.dash-table-container .dash-cell {
  background: var(--panel);
  color: var(--text);
  border-color: var(--border);
}

/* Survol de ligne */
.dash-table-container .dash-table-container .dash-row:hover .dash-cell {
  background: #1c2240;
}

/* Ligne sélectionnée */
.dash-table-container .dash-selectable .dash-row.selected .dash-cell {
  background: #2a3148;
  color: var(--text);
}

/* Pagination, filtres, etc. */
.dash-table-container .page-number,
.dash-table-container .previous-page,
.dash-table-container .next-page,
.dash-table-container .dash-spreadsheet-container input,
.dash-table-container .dash-filter input {
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--border);
}

/* En-tête triable (icônes) */
.dash-table-container .dash-header .column-header--sort {
  color: var(--text);
}

/* Badge de section */
.section-title {
  display: inline-block;
  padding: 6px 10px;
  margin: 4px 0 8px;
  background: #171c34;       /* var(--panel-2) */
  color: #e6e6e6;            /* var(--text) */
  border: 1px solid #2a3148; /* var(--border) */
  border-radius: 8px;
  font-weight: 700;
}

/* Panel wrapper (carte) */
.panel {
  background: #12162b;       /* var(--panel) */
  border: 1px solid #2a3148; /* var(--border) */
  border-radius: 12px;
  padding: 10px;
}

/* DataTable — thème sombre lisible */
.dash-table-container {
  background: #12162b;
  border: 1px solid #2a3148;
  border-radius: 12px;
  padding: 8px;
}

.dash-table-container .dash-table {
  color: #e6e6e6;
  background: #12162b;
}

.dash-table-container .dash-header {
  background: #171c34;
  color: #e6e6e6;
  font-weight: 700;
  border-bottom: 1px solid #2a3148;
}

.dash-table-container .dash-cell {
  background: #12162b;
  color: #e6e6e6;
  border-color: #2a3148;
}

/* Survol de ligne */
.dash-table-container .dash-table-container .dash-row:hover .dash-cell {
  background: #1c2240;
}

/* Ligne sélectionnée */
.dash-table-container .dash-selectable .dash-row.selected .dash-cell {
  background: #2a3148;
  color: #e6e6e6;
}

/* Inputs pagination / filtre */
.dash-table-container .page-number,
.dash-table-container .previous-page,
.dash-table-container .next-page,
.dash-table-container .dash-spreadsheet-container input,
.dash-table-container .dash-filter input {
  color: #e6e6e6;
  background: #171c34;
  border: 1px solid #2a3148;
}