.navbar {
   margin-bottom: 14px;
}

.nav-tab-wrapper {
   display: flex;
   gap: 8px;
   border-bottom: 1px solid #cfd4e0;
   padding-bottom: 6px;
}

.nav-tab {
   display: inline-flex;
   align-items: center;
   padding: 6px 10px;
   border: 1px solid #cfd4e0;
   border-bottom: none;
   border-radius: 4px 4px 0 0;
   background: #f5f7fb;
   color: #2e335f;
   font-weight: 600;
}

.nav-tab-active {
   background: #2e335f;
   color: #ffffff;
   border-color: #2e335f;
}

/* ── Layout principal : tableau à gauche, fiche à droite ── */
.sales-performance-container {
   display: grid;
   grid-template-columns: 55% 45%;
   gap: 28px;
   align-items: start;
   width: 100%;
}

/* ─────────────────────────────────────────
   TABLEAU PERFORMANCES (colonne gauche)
───────────────────────────────────────── */

.wrap_tableau {
   width: 100%;
   display: flex;
   flex-direction: column;
}

.tableau_perfo {
   width: 100%;
   min-width: 0;
   table-layout: fixed;
   border-collapse: collapse;
   background: #ffffff;
   border: 1px solid #c8cfe0;
}

/* En-têtes : fond bleu foncé, texte blanc, tout en majuscules */
.tableau_perfo thead th {
   background: #2e335f;
   color: #ffffff;
   text-transform: uppercase;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.2px;
   padding: 10px 8px;
   border: 1px solid #47507a;
   text-align: center;
   line-height: 1.3;
}

/* Cellules : fond clair, centré, taille compacte */
.tableau_perfo tbody td {
   background: #ffffff;
   color: #1f2430;
   font-size: 12px;
   line-height: 1.3;
   padding: 10px 8px;
   border: 1px solid #d6dbe4;
   text-align: center;
}

/* Lignes alternées légèrement grises */
.tableau_perfo tbody tr:nth-child(even) td {
   background: #f5f7fb;
}

/* Ligne "Total" en gras */
.tableau_perfo tbody tr:last-child td {
   font-weight: 700;
   background: #eaecf5;
}

/* Hover sur les lignes */
.tableau_perfo tbody tr.sales-row:hover td {
   background: #dfe6f5;
   cursor: pointer;
   transition: background-color 0.15s ease-in-out;
}

/* Navigation mois sous le tableau */
.month-nav {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   width: 100%;
   margin-top: 12px;
}

.month-nav-btn {
   border-radius: 3px;
   padding: 8px 14px;
   font-size: 15px;
   line-height: 1.2;
   font-weight: 600;
   cursor: pointer;
   background: #2e335f;
   color: #ffffff;
   border: none;
}

.month-nav-label {
   min-width: 90px;
   text-align: center;
   font-size: 12px;
   font-weight: 700;
   color: #2e335f;
}

/* ─────────────────────────────────────────
   FICHE ACCOUNT (colonne droite)
───────────────────────────────────────── */

.fiche_account {
   width: 100%;
}

/* Titre du commercial (ex: "Audrey Frey") */
.fiche_account h1,
#sales-account-name {
   font-size: 26px;
   font-weight: 800;
   color: #1a1f45;
   margin: 0 0 10px 0;
   letter-spacing: -0.3px;
}

/* Boutons Ajouter dépôt / Ajouter placement */
.fiche_account button[name="bouton_depot"],
.fiche_account button[name="bouton_placement"] {
   display: inline-block !important;
   visibility: visible !important;
   border-radius: 4px;
   padding: 6px 12px;
   font-size: 13px;
   font-weight: 600;
   background: #2e335f;
   color: #ffffff;
   border: 1px solid #2e335f;
   cursor: pointer;
   margin-right: 6px;
   margin-bottom: 8px;
}

.fiche_account button.is-disabled,
.fiche_account button.is-month-locked {
   opacity: 0.55;
   cursor: not-allowed;
}

/* Barre période + toggle métrique */
.class_periode {
   display: flex;
   align-items: center;
   gap: 6px;
   margin: 6px 0 10px 0;
   flex-wrap: wrap;
}

.class_periode .periode {
   font-weight: 700;
   font-size: 13px;
   color: #1f2430;
}

.chart-metric-toggle {
   display: inline-flex;
   align-items: center;
   gap: 4px;
}

.chart-metric-toggle .metric-btn {
   border: 1px solid #5f6488;
   background: #ffffff;
   color: #2e335f;
   border-radius: 3px;
   padding: 5px 10px;
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
}

.chart-metric-toggle .metric-btn.is-active {
   background: #2e335f;
   color: #ffffff;
}

.class_periode .compare-sales-label,
.class_periode #comparaison_sales {
   display: none;
}

.class_periode.is-compare-active .compare-sales-label,
.class_periode.is-compare-active #comparaison_sales {
   display: inline-block;
}

.class_periode #comparaison_sales {
   min-width: 180px;
   border: 1px solid #c6cede;
   border-radius: 4px;
   background: #ffffff;
   color: #1f2430;
   padding: 5px 8px;
   font-size: 13px;
}

.class_periode #comparaison_sales:disabled {
   opacity: 0.6;
   cursor: not-allowed;
}

/* Tableau de stats (Entretiens, Dépôts, Placements…) */
.version_tableau {
   display: grid;
   grid-template-columns: 1fr;
   gap: 0;
   width: 100%;
   max-width: 100%;
   min-width: 0;
   margin-top: 0;
}

.table-stats {
   width: 100%;
   table-layout: fixed;
   border-collapse: collapse;
}

.table-stats th {
   background: #2e335f;
   color: #ffffff;
   font-size: 12px;
   font-weight: 700;
   padding: 8px 6px;
   border: 1px solid #47507a;
   text-align: center;
   line-height: 1.3;
}

.table-stats td {
   background: #ffffff;
   color: #1f2430;
   font-size: 12px;
   font-weight: 400;
   padding: 10px 8px;
   border: 1px solid #d6dbe4;
   text-align: center;
   line-height: 1.3;
}

/* Zone graphique */
.version_tableau .Version_graph {
   width: 100%;
   max-width: 100%;
   min-height: 280px;
   margin-top: 8px;
}

.version_tableau .Version_graph canvas {
   width: 100% !important;
   height: 280px !important;
}

/* ─────────────────────────────────────────
   ONGLET AJOUT DE SALES (admin)
───────────────────────────────────────── */

.ajout-sales-panel {
   background: linear-gradient(180deg, #f7f9ff 0%, #f2f5fc 100%);
   border: 1px solid #dbe1ee;
   border-radius: 10px;
   padding: 22px;
   box-shadow: 0 10px 24px rgba(24, 34, 69, 0.08);
}

.ajout-sales-panel h2 {
   margin: 0 0 18px;
   font-size: 42px;
   line-height: 1.05;
   color: #182045;
   letter-spacing: -0.8px;
}

.ajout-sales-form {
   display: grid;
   gap: 16px;
}

.toybox-field {
   display: grid;
   gap: 8px;
   max-width: 520px;
}

.toybox-field label {
   font-weight: 700;
   color: #2a2f55;
}

.toybox-field input[type="text"] {
   border: 1px solid #c6cede;
   border-radius: 8px;
   padding: 12px 14px;
   font-size: 15px;
   background: #f8faff;
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.toybox-field input[type="text"]:focus {
   border-color: #2e335f;
   box-shadow: 0 0 0 3px rgba(46, 51, 95, 0.14);
   outline: none;
}

.field-help {
   color: #586079;
   font-size: 13px;
}

.ajout-element {
   width: fit-content;
   border-radius: 8px;
   background: linear-gradient(135deg, #202956 0%, #2e335f 100%);
   color: #ffffff;
   border: 1px solid #2e335f;
   padding: 11px 18px;
   cursor: pointer;
   font-size: 14px;
   box-shadow: 0 8px 18px rgba(24, 34, 69, 0.16);
   transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ajout-element:hover {
   transform: translateY(-1px);
   box-shadow: 0 12px 22px rgba(24, 34, 69, 0.2);
}

.ajout-sales-feedback {
   margin: 0;
   font-weight: 600;
   font-size: 13px;
   min-height: 18px;
}

.ajout-sales-feedback.is-success { color: #0d6b3c; }
.ajout-sales-feedback.is-error   { color: #9d1f33; }

.ajout-sales-list-wrapper h3 {
   margin: 10px 0;
   color: #1f2753;
   font-size: 20px;
}

.ajout-sales-list {
   width: 100%;
   border-collapse: collapse;
   background: #ffffff;
   border: 1px solid #d7deeb;
   border-radius: 8px;
   overflow: hidden;
}

.ajout-sales-list th,
.ajout-sales-list td {
   border: 1px solid #dfe5f0;
   padding: 10px 12px;
   text-align: left;
   vertical-align: middle;
}

.ajout-sales-list th {
   background: #2e335f;
   color: #ffffff;
   font-size: 13px;
   letter-spacing: 0.2px;
}

.ajout-sales-list tbody tr:nth-child(odd) td  { background: #fbfcff; }
.ajout-sales-list tbody tr:hover td           { background: #f0f4ff; }

.sales-actions-cell { white-space: nowrap; }

.ajout-sales-list .action-edit,
.ajout-sales-list .action-delete {
   padding: 6px 11px;
   margin-right: 6px;
   border-radius: 7px;
   border: 1px solid #c8d1e3;
   background: #f4f7ff;
   cursor: pointer;
   font-size: 12px;
   font-weight: 600;
   color: #243064;
}

.ajout-sales-list .action-delete {
   border-color: #e2b8bf;
   color: #8b2440;
   background: #fff4f6;
}

.ajout-sales-list .is-empty {
   text-align: center;
   color: #586079;
   font-style: italic;
   padding: 20px;
}

/* ─────────────────────────────────────────
   SÉLECTEUR DE PÉRIODE (Tom Select)
───────────────────────────────────────── */

#periode_selectionne_compte.ts-hidden-accessible,
#periode_selectionne_compte.tomselected {
   position: absolute !important;
   left: -9999px !important;
   width: 1px !important;
   height: 1px !important;
   opacity: 0 !important;
   pointer-events: none !important;
}

.periode-select-enhanced .class_periode #periode_selectionne_compte,
.periode-select-enhanced .class_periode .select2-container {
   display: none !important;
}

.class_periode .ts-wrapper {
   width: 200px;
   min-width: 200px;
}

.class_periode .ts-wrapper.single .ts-control {
   min-height: 32px;
   background: #ffffff;
   border: 1px solid #c6cede;
   border-radius: 4px;
   box-shadow: none;
   padding: 5px 10px;
   color: #1f2430;
   font-size: 13px;
}

.class_periode .ts-wrapper.single .ts-control input,
.class_periode .ts-wrapper.single .ts-control .item {
   color: #1f2430;
   font-size: 13px;
}

.class_periode .ts-wrapper.single .ts-control:after {
   border-top-color: #2e335f;
}

.class_periode .ts-wrapper.focus .ts-control,
.class_periode .ts-wrapper.single .ts-control:hover {
   border-color: #2e335f;
}

.class_periode .ts-dropdown {
   min-width: 200px;
   border: 1px solid #c6cede;
   border-radius: 4px;
   box-shadow: 0 6px 16px rgba(26, 34, 70, 0.12);
}

.class_periode .ts-dropdown .option {
   font-size: 13px;
   color: #1f2430;
   padding: 7px 10px;
   border-bottom: 1px solid #e3e7f0;
}

.class_periode .ts-dropdown .active {
   background: #2e335f;
   color: #ffffff;
}

.class_periode .ts-dropdown .option:last-child {
   border-bottom: none;
}

/* edit sales panel */
.edit-sales-panel {
   margin-top: 20px;
   padding: 15px;
   border: 1px solid #ccc;
   border-radius:10px;
   background: #f9f9f9;
}

.edit-sales-panel button[data-edit-action="save"],
.edit-sales-panel button[data-edit-action="cancel"] {
   border-radius: 8px;
   padding: 8px 16px;
   margin-top: 10px;
}

.edit-sales-panel label {
   display: block;
   margin-bottom: 5px;
   font-weight: 700;
   color: #2a2f55;
}

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */

@media (max-width: 1200px) {
   .sales-performance-container {
      grid-template-columns: 1fr;
      gap: 14px;
   }

   .version_tableau .Version_graph {
      min-height: 260px;
   }

   .version_tableau .Version_graph canvas {
      height: 260px !important;
   }

   .ajout-sales-panel h2 {
      font-size: 34px;
   }
}

#ajout_de_sales > form > div.toybox-field > input[type=text] {
   background-color: #ffffff;
}