:root{
  --bg:#0b0e12;
  --card:#161b22;
  --muted:#9aa4ad;
  --accent:#00ffff;
  --good:#00d68f;
  --bad:#ff4d4f;
}

html, body{
  height: 100%;
}

body{
  margin: 0;
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background: var(--bg);
  color: #e6eef6;
}

/* Cards bootstrap “re-skin” (sans casser les dimensions) */
.card{
  background: var(--card);
  border: 1px solid #1f2b36;
  border-radius: 14px;
  box-shadow: 0 0 10px rgba(0,255,255,.05);
}

.stat-box{
  padding: 1rem 1.25rem;
  border-radius: 12px;
  background:#1b232e;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:86px;
}

.stat-label{
  color:#a5b3c0 !important;
  font-size:.85rem;
}

.stat-value{
  font-size:1.8rem;
  font-weight:800;
  color:#00e6ff !important;
  line-height:1;
  text-shadow:0 0 6px rgba(0,255,255,.3);
}

.grid{ display:grid; gap:1rem; }

@media(min-width:768px){
  .grid-4{ grid-template-columns:repeat(4,1fr); }
  .grid-2{ grid-template-columns:repeat(2,1fr); }
}

.chart-wrap{ padding:1rem; }

.fade-in{ animation:fade .5s ease-out both; }
@keyframes fade{
  from{opacity:0; transform:translateY(6px);}
  to{opacity:1; transform:none;}
}

.shrink-33 canvas{
  max-width: 66%;
  height: auto !important;
  display:block;
  margin: 0 auto;
}

.badge-chip{
  background:#1a2530;
  color:#bfefff;
  border:1px solid #00ffff33;
}

.nav-pills .nav-link{
  color:#b9c4cf;
  border:1px solid #00ffff33;
  border-radius:10px;
}

.nav-pills .nav-link:hover{
  background:rgba(0,255,255,.1);
  color:#fff;
}

.nav-pills .nav-link.active{
  background:linear-gradient(135deg,#00ffff55,#00b4ff55);
  border-color:#00e6ff66;
  color:#fff;
  text-shadow:0 0 8px rgba(0,255,255,.5);
}

#pickStatusForm .form-select,
#pickStatusForm .form-control{
  background:#0f1319;
  border:1px solid #2a2f36;
  color:#e6eef6;
}

#pickStatusForm .btn-update{ height:48px; }

h1,h5,label,.form-label{
  color:#f0f5ff !important;
  font-weight:600;
  letter-spacing:.3px;
}

label.form-label{
  font-size:.92rem;
  text-transform:uppercase;
  letter-spacing:.4px;
}

.form-control,.form-select{
  background:#0e141b;
  border:1px solid #2c3a48;
  color:#f2f7fa;
  font-weight:500;
}

.form-control::placeholder{
  color:#99a7b5;
  opacity:.85;
}

.form-control:focus,.form-select:focus{
  background:#131c26;
  border-color:#00ffff99;
  box-shadow:0 0 0 .15rem rgba(0,255,255,.25);
  color:#fff;
}

.small,.form-text,.text-secondary{
  color:#c7d1dc !important;
}

/* Accordion custom */
.accordion-button{
  background:#101621;
  color:#e6eef6;
  border:0;
  box-shadow:none !important;
}

.accordion-button:not(.collapsed){
  background:#121c26;
  color:#fff;
}

.accordion-button::after{
  filter: invert(1) opacity(.85);
}


/* spacing global entre tuiles */
.tp-card,
.card.tp-card,
.card {
  margin-bottom: 16px;
}

/* ================================
   Historique des paris – lisibilité
================================ */

/* Texte principal (équipes / sélection) */
#picksAccordion .accordion-body .text-truncate{
  color: #e6f0fa;              /* clair mais pas blanc */
}

/* Partie importante (équipes en gras) */
#picksAccordion .accordion-body .text-truncate strong{
  color: #f4f8ff;
  font-weight: 600;
}

/* Optionnel : petit boost de contraste */
#picksAccordion .accordion-body .text-truncate{
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
/* 
.chart-box{
  height: var(--h, 200px);
  position: relative;
}
.chart-box canvas{
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.chart-box--square{
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
} */


.grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

@media (max-width: 992px) {
  .grid-5 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ================================
   Import CSV (full-width)
================================ */
.import-page .container-fluid{
  max-width: 1600px;
}

.import-header{
  border-bottom: 1px solid #1a2330;
  padding-bottom: 1rem;
}

.import-kicker{
  text-transform: uppercase;
  letter-spacing: .18em;
  color: #8ea1b7;
  font-size: .7rem;
}

.import-title{
  font-size: 2.2rem;
  margin-bottom: .25rem;
}

.import-section{
  padding: 1.5rem;
  border: 1px solid #1a2330;
  border-radius: 16px;
  background: #0f141b;
  margin-bottom: 1.5rem;
}

.import-section-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.import-section-header h2{
  margin: 0;
  font-size: 1.25rem;
}

.import-actions{
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.scan-id{
  display: flex;
  align-items: center;
  padding: .35rem .75rem;
  border: 1px solid #2a3747;
  border-radius: 999px;
  background: rgba(0, 255, 255, .08);
}

.scan-id code{
  color: #d9f4ff;
}

.import-upload-panel{
  border: 1px dashed #2b3b4c;
  border-radius: 14px;
  padding: 1.5rem;
  background: rgba(7, 12, 20, .7);
}

.import-dropzone{
  display: grid;
  gap: .75rem;
  margin-bottom: 1rem;
}

.import-dropzone-label{
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.25rem;
  border-radius: 12px;
  border: 1px dashed #2f4258;
  background: #0c1219;
  color: #d5e2f2;
}

.import-dropzone-title{
  font-size: 1rem;
  font-weight: 600;
}

.import-dropzone-subtitle{
  color: #8ea1b7;
  font-size: .85rem;
}

.import-upload-actions{
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.import-docs{
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #1a2330;
}

.import-docs h3{
  font-size: 1rem;
  margin-bottom: .5rem;
}

.import-docs ul{
  margin: 0;
  padding-left: 1rem;
  color: #b7c4d3;
}

.scan-badges{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.badge-scan{
  background: #121b25;
  border: 1px solid #2a3747;
  color: #cfe2f5;
  padding: .4rem .75rem;
  border-radius: 999px;
  font-weight: 600;
}

.import-preview{
  padding: 1.5rem 1rem;
}

.import-preview-table{
  max-height: 60vh;
  overflow: auto;
}

.import-preview-toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}

.toolbar-pills{
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.pill{
  padding: .35rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 255, 255, .35);
  background: rgba(0, 255, 255, .08);
  color: #cfefff;
  font-size: .85rem;
}

.pill-danger{
  border-color: rgba(255, 77, 79, .5);
  background: rgba(255, 77, 79, .12);
  color: #ffd7d7;
}

.bankroll-preview-table{
  border-collapse: separate;
  border-spacing: 0;
  background: #05091e;
}

.bankroll-preview-table th,
.bankroll-preview-table td{
  border-top: 1px solid rgba(255, 255, 255, .05);
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  padding: .6rem .75rem;
  color: #e5ecff;
  white-space: nowrap;
}

.bankroll-preview-table tbody tr:hover td{
  background: rgba(255, 255, 255, .03);
}

.bankroll-preview-table td.bankroll-cell-edited{
  background: rgba(0, 214, 143, .12);
  box-shadow: inset 0 0 0 1px rgba(0, 214, 143, .4);
}

.bankroll-cell-input{
  width: 100%;
  background: #0b1118;
  border: 1px solid #2e3d4d;
  border-radius: 6px;
  color: #fff;
  padding: .35rem .5rem;
  font-size: .85rem;
}

.bankroll-error-row{
  background: rgba(255, 77, 79, .08) !important;
}

.bankroll-error-cell{
  background: rgba(255, 77, 79, .16) !important;
  border-left: 3px solid rgba(255, 77, 79, .8);
  position: relative;
}

.bankroll-error-cell::after{
  content: "!";
  position: absolute;
  top: 5px;
  right: 6px;
  font-weight: 700;
  font-size: .75rem;
  color: rgba(255, 77, 79, 1);
}

.bankroll-preview-table_wrapper .dataTables_info,
.bankroll-preview-table_wrapper .dataTables_paginate{
  color: #9eb4d0;
}

.bankroll-preview-table_wrapper .dataTables_length,
.bankroll-preview-table_wrapper .dataTables_filter{
  color: #e5ecff;
}

.bankroll-preview-table_wrapper select,
.bankroll-preview-table_wrapper input{
  background: #0a1018;
  color: #fff;
  border-color: #1f2d3d;
}

.validation-status{
  padding: .35rem .75rem;
  border-radius: 999px;
  border: 1px solid #2a3747;
  background: #121b25;
  color: #cfefff;
  font-size: .85rem;
  font-weight: 600;
}

.validation-summary,
.commit-summary{
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.summary-pill{
  padding: .5rem .9rem;
  border-radius: 12px;
  border: 1px solid #2a3747;
  background: #101821;
  min-width: 160px;
}

.summary-pill .label{
  display: block;
  font-size: .75rem;
  color: #9fb1c5;
}

.summary-pill .value{
  font-size: 1.1rem;
  font-weight: 600;
}

/* ================================
   Import CSV (neo-first adjustments)
================================ */
#importPreview{
  scroll-margin-top: 120px;
}

#importPreview .dataTables_wrapper{
  color: #d6e2f1;
}

#importPreview .dataTables_wrapper .dataTables_length,
#importPreview .dataTables_wrapper .dataTables_filter,
#importPreview .dataTables_wrapper .dataTables_info,
#importPreview .dataTables_wrapper .dataTables_paginate{
  color: #b8c6d6;
}

#importPreview .dataTables_wrapper .dataTables_filter input,
#importPreview .dataTables_wrapper .dataTables_length select{
  background: #0b1118;
  border: 1px solid #263445;
  color: #e6eef6;
}

#importPreview .dataTables_wrapper .dataTables_paginate .paginate_button{
  color: #cfe2f5 !important;
  border: 1px solid #1f2b36;
  background: #0b1118;
}

#importPreview .dataTables_wrapper .dataTables_paginate .paginate_button.current,
#importPreview .dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background: #12202f !important;
  border-color: #2b4056 !important;
  color: #fff !important;
}

#importPreview table.dataTable.table-striped>tbody>tr.odd>*{
  box-shadow: none;
}

#importPreview .bankroll-preview-table tbody tr:hover td{
  background: rgba(255, 255, 255, .04);
}

.import-cta{
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.option-block h3{
  font-size: 1rem;
  margin-bottom: .5rem;
}

#importPreview .table{
  color: inherit;
  background-color: transparent;
}

#importPreview .table > :not(caption) > * > *{
  background-color: transparent;
}

#importPreview table.dataTable tbody tr:hover{
  background-color: transparent;
}

/* Import preview scroll fix */
#previewWrap,
#importPreview {
  overflow-x: hidden;
}

#previewWrap .dataTables_scrollBody,
#importPreview .dataTables_scrollBody {
  overflow-x: auto !important;
}

#previewWrap table.dataTable,
#importPreview table.dataTable {
  width: 100% !important;
}

/* Import advanced options dark inputs */
#importAdvanced input,
#importAdvanced select,
#importAdvanced textarea {
  background: rgba(0,0,0,.35) !important;
  color: rgba(255,255,255,.9) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}

#importAdvanced input::placeholder,
#importAdvanced textarea::placeholder {
  color: rgba(255,255,255,.45) !important;
}

#importAdvanced label {
  color: rgba(255,255,255,.75) !important;
}

#bankroll-preview-wrapper{
  overflow-x: hidden;
}

/* Options avancées : wrapper dark (pas juste les inputs) */
#importAdvanced,
#importAdvanced .accordion-body,
#importAdvanced .accordion-item,
#importAdvanced .accordion-collapse,
#importAdvanced .card,
#importAdvanced .card-body {
  background: transparent !important;
  color: rgba(255,255,255,.86) !important;
}

/* Si ton accordéon a un bloc interne blanc (typiquement .bg-white) */
#importAdvanced .bg-white,
#importAdvanced [class*="bg-white"] {
  background: transparent !important;
}

/* Inputs/select/textarea (déjà demandé, mais on le garde) */
#importAdvanced input,
#importAdvanced select,
#importAdvanced textarea {
  background: rgba(0,0,0,.35) !important;
  color: rgba(255,255,255,.9) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}

/* Import preview vertical scroll: keep only DataTables scroll body */
#importPreview .import-preview-table,
#bankroll-preview-wrapper {
  max-height: none;
  overflow-y: hidden;
}

#importPreview .dataTables_scrollBody {
  overflow-y: auto !important;
}

/* Edit drawer for preview rows */
.edit-drawer{
  background: #0b1118;
  color: #e6eef6;
  border-left: 1px solid #1f2b36;
  width: 420px;
}

@media (max-width: 768px){
  .edit-drawer{
    width: 100%;
  }
}

.edit-drawer .offcanvas-header,
.edit-drawer .offcanvas-footer{
  padding: 1rem 1.25rem;
}

.edit-drawer .offcanvas-body{
  padding: 1rem 1.25rem 1.5rem;
}

.edit-drawer .offcanvas-footer{
  border-top: 1px solid #1f2b36;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.edit-drawer .form-control,
.edit-drawer .form-select{
  background: #0f1620;
  border: 1px solid #2a3a4c;
  color: #f0f5ff;
}

.edit-drawer .field-error .form-control,
.edit-drawer .field-error .form-select{
  border-color: rgba(255, 77, 79, .8);
  box-shadow: 0 0 0 .1rem rgba(255, 77, 79, .2);
}

.bankroll-row-skipped td{
  opacity: .55;
  text-decoration: line-through;
}