/* ========================================
   DASHBOARD IVOLT - CSS PROPRE
   ======================================== */

/* BASE */
body {
  font-family: 'Montserrat', sans-serif;
  background-color: #2a2a2a;
  color: #eee;
  margin: 0;
}

a, h1, h2, h3, .button, .i-volt-sidebar a:hover {
  color: #41afaf;
}

.dashboard-bg { 
    background:#2a2a2a; 
    min-height:100vh; 
    font-family:'Montserrat',sans-serif;
    padding-top: 0 !important; /* ← Supprime le padding en haut */
    margin-top: 0 !important; /* ← Supprime la marge en haut */ 
}

.dashboard-header {
    background:#41afaf;
    color:#1a1a1a;
    padding:4px 16px;
    border-radius:8px;
    text-align:center;
    font-weight:700;
    font-size:1.2rem;
    margin:0 0 4px 0; /* ← Réduit les marges haut/bas */
    line-height: 1.1; /* ← Réduit la hauteur de ligne */
}

/* ========================================
   STRUCTURE PRINCIPALE
   ======================================== */
.dashboard-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.dashboard-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 0;
}

.dashboard-flex-row {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 0;
}

/* ========================================
   CARTES / BLOCS
   ======================================== */
.dashboard-card {
    background:#41afaf;
    border-radius:6px;
    box-shadow:0 0 6px #0001;
    padding:16px;
    margin-bottom:0;
}

.small-block {
    max-width: 260px;
    width: 100%;
    padding: 14px !important;
}

/* TÂCHE À FAIRE */
.tache-stats-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: 260px;
    width: 100%;
}

.tache-left,
.tache-right {
    background: #424242;
    color: #fff;
    border-radius: 6px;
    padding: 10px 8px;
    margin-bottom: 8px;
    width: 100%;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    box-shadow: 0 0 6px #0001;
    border: 1px solid #5f5f5f;
    border-radius: 8px;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.03);
}

.tache-right.bg-red      { background-color: #B22222; }
.tache-right.bg-orange   { background-color: #e69138; }
.tache-right.bg-yellow   { background-color: #f1c232; color: #111; }
.tache-right.bg-purple   { background-color: #8e7cc3; }
.tache-right.bg-silver   { background-color: #bdc3c7; color: #111; }

.tache-stats {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 4px;
}

.tache-stats .stat {
    padding: 3px 6px;
    border-radius: 6px;
    background: #424242;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    font-weight: 700;
    color: #ddd;
    font-size: 0.85rem;
}

.stat-orange {
    background: #e69138 !important;
    color: #fff !important;
}

/* ========================================
   TABLEAU EMPLOYÉS
   ======================================== */
.dashboard-table {
    width: 80%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    background: #424242;
    margin-top: 0 !important;
    margin-bottom: 12px;
    border: 1px solid #000;
    border-radius: 8px;
    overflow: hidden;
}

.dashboard-table th,
.dashboard-table td {
    border: 0;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
}

.dashboard-table tr > *:last-child {
    border-right: 0;
}

.dashboard-table tbody tr:last-child td {
    border-bottom: 0;
}

.dashboard-table thead th {
    background:#424242;
    color:#fff;
    font-weight:700;
    text-align:center;
    padding:6px 8px;
    border-top: 0;
}

/* En-tête normal (ligne avec Employé, Téléphone, etc.) - plus petit */
.dashboard-table thead tr:nth-child(3) th {
    font-size: 0.90rem; /* ← Réduit la taille de police */
    padding: 3px 5px; /* ← Réduit le padding aussi */
}

/* Réduire la taille des lignes statistiques (TITRES + VALEURS) */
.dashboard-table thead tr:nth-child(1) th,
.dashboard-table thead tr:nth-child(2) td {
    font-size: 0.85rem; /* ← Réduit la taille des stats */
    padding: 4px 6px;
    border-top: 0;
}

.dashboard-table tbody td {
    padding:3px 4px; /* ← Réduit de 4px 6px à 2px 4px */
    font-size: 0.90rem;
    border-top: 0;
    text-align:center;
    vertical-align: middle;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Colonnes avec proportions */
.dashboard-table thead th:nth-child(1){ width:20%; } /* Employé */
.dashboard-table thead th:nth-child(2){ width:7%; } /* Téléphone */
.dashboard-table thead th:nth-child(3){ width:14%; } /* Statut */
.dashboard-table thead th:nth-child(4){ width:18%; } /* Livraison */
.dashboard-table thead th:nth-child(5){ width:14%; } /* Secteur */
.dashboard-table thead th:nth-child(6){ width:5%;  } /* Safe1 */
.dashboard-table thead th:nth-child(7){ width:5%;  } /* Safe2 */
.dashboard-table thead th:nth-child(8){ width:17%; } /* Absences */

/* Autoriser retours à la ligne sur colonnes longues */
.dashboard-table td[data-field="livraison"],
.dashboard-table td[data-field="secteur"] {
    white-space: normal;
    color: #fff;
}

.dashboard-table td[data-field="livraison"] select,
.dashboard-table td[data-field="secteur"] select {
    color: #fff;
}

.dashboard-table td[data-field="absences"] {
    color: #fff;
}

.dashboard-table tbody td:nth-child(8) {
    color: #fff !important;
}

/* ========================================
   FORMULAIRES DANS TABLEAU
   ======================================== */
.dashboard-table input[type="text"],
.dashboard-table input[type="number"],
.dashboard-table select,
.dashboard-table .code-input,
.dashboard-table input[type="text"].editable,
.dashboard-table input[type="number"].editable {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: block;
    margin: 0;
    padding: 2px 4px; /* ← Réduit de 4px 6px à 2px 4px */
    font-size: 0.85rem; /* ← Réduit la taille des selects et inputs */
    font-family: inherit;
    font-weight: inherit;
    line-height: 1.1; /* ← Réduit la hauteur de ligne */
    border: none;
    outline: none;
}

.dashboard-table select {
    min-width: 0;
    height: auto;
    appearance: none;
    -webkit-appearance: none;
    background-color: inherit;
    border-radius: 0;
    border: none;
    outline: none;
    background-image: url("data:image/svg+xml,%3Csvg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    background-size: 14px 14px; /* ← Réduit la flèche aussi */
    padding-right: 18px;
}

.dashboard-table select option {
    color: #000 !important;
    background: #757575 !important;
    font-size: 0.85rem; /* ← Taille réduite pour les options */
}

.dashboard-table input[type="checkbox"] {
    width: auto;
    margin: 0 auto;
    display: inline-block;
}

/* Cases à cocher Safe */
.dashboard-table td input[type="checkbox"][data-field="safe1"],
.dashboard-table td input[type="checkbox"][data-field="safe2"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background-color: #757575;
    border: 2px solid #000;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
}

.dashboard-table td input[type="checkbox"][data-field="safe1"]:checked,
.dashboard-table td input[type="checkbox"][data-field="safe2"]:checked {
    background-color: #757575;
}

.dashboard-table td input[type="checkbox"][data-field="safe1"]:checked::after,
.dashboard-table td input[type="checkbox"][data-field="safe2"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 14px;
    font-weight: bold;
}

/* Input texte Absences */
.dashboard-table input[type="text"][data-field="absences"] {
    background-color: #757575 !important;
    color: #fff !important;
}

.code-input {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: inherit !important;
    text-align: center;
    font-weight: bold;
    font-size: 0.85rem !important; /* ← Réduit aussi les code-input */
}

/* ========================================
   COULEURS RÔLES
   ======================================== */
.role-Directeur { background:#741B47; color:#fff; }
.role-Directeur-Adjoint { background:#A64D79; color:#fff; }
.role-Gérant { background:#C27CA0; color:#111; }
.role-Coordinateur { background:#C27CA0; color:#111; }
.role-Formateur { background:#D5A6BD; color:#111; }
.role-Ingénieur { background:#EAD1DC; color:#111; }
.role-Technicien { background:#FFD866; color:#111; }
.role-Apprenti-Technicien { background:#FFE599; color:#111; }

/* ========================================
   BOUTONS
   ======================================== */
.btn { 
    border:none; 
    border-radius:6px; 
    padding:12px 18px; 
    font-weight:bold; 
    font-size:1rem; 
    margin-right:8px; 
    cursor:pointer; 
    transition:all .2s; 
    margin-top:8px; 
}
.btn-vert  { background:#6aa84f; color:#fff; }
.btn-jaune { background:#f1c232; color:#111; }
.btn-rouge { background:#B22222; color:#fff; }

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width:980px) {
    .dashboard-container {
        flex-direction:column;
    }
    .dashboard-table {
        width: 100%;
    }
    .dashboard-flex-row {
        flex-direction:column;
    }
}

/* Colorer les cellules Safe 1 et Safe 2 en vert quand cochées */
.dashboard-table tbody tr td:nth-child(6):has(input:checked),
.dashboard-table tbody tr td:nth-child(7):has(input:checked) {
    background-color: #6aa84f !important; /* Vert si coché */
}
/* Styles pour ratio */
.ratio-noir {
    background: #000 !important;
}

.ratio-rouge {
    background: #B22222 !important;
}

.ratio-orange {
    background: #e69138 !important;
}

.ratio-vert {
    background: #6aa84f !important;
}

.ratio-bleu {
    background: #3c78d8 !important;
}

/* CA Individuel */
.ca-individuel-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #757575;
    font-family: 'Montserrat', sans-serif;
    border-radius: 8px;
    overflow: hidden;
}

.ca-individuel-table tr {
    border: 0;
}

.ca-individuel-table td {
    padding: 8px 12px;
    border: 0;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    font-size: 0.9rem;
    font-weight: 600;
}

.ca-individuel-table tr > *:last-child {
    border-right: 0;
}

.ca-individuel-table tbody tr:last-child td {
    border-bottom: 0;
}

.ca-individuel-table td:first-child {
    background: #757575;
    color: #000;
    text-align: center;
    width: 40%;
    font-weight: 700;
}

.ca-individuel-table td:last-child {
    background: #424242;
    color: #fff;
    text-align: center;
    width: 60%;
}

.dashboard-card,
.card {
  border: 1px solid #5f5f5f;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.03);
}