/* ================================
   U.GG Inspired Dark Theme — FULL
   (corrige les zones blanches Bootstrap/natives)
   ================================ */

/* Variables */
:root {
  /* Dark theme colors matching u.gg */
  --ugg-bg-primary: #16181c;
  --ugg-bg-secondary: #1e2328;
  --ugg-bg-tertiary: #282d35;
  --ugg-bg-hover: #2e333b;
  --ugg-border: #2e333b;
  --ugg-border-light: #3c424a;

  /* Text colors */
  --ugg-text-primary: #e4e5e7;
  --ugg-text-secondary: #95999d;
  --ugg-text-muted: #6b7280;

  /* Accent colors */
  --ugg-accent-blue: #5383e8;
  --ugg-accent-cyan: #00bfd6;
  --ugg-accent-red: #e84057;
  --ugg-accent-green: #00bba3;

  /* Damage types */
  --damage-physical: #ff8080;
  --damage-magic: #7aa8ff;
  --damage-true: #c4b5fd;
}

/* Reset & base */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { color-scheme: dark; } /* aide les contrôles natifs à passer en sombre */

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--ugg-bg-primary);
  color: var(--ugg-text-primary);
  line-height: 1.5;
}

a { color: var(--ugg-accent-blue); }
a:hover { opacity: .9; }

.container-fluid { max-width: 1800px; padding: 20px; }

/* Header */
.header {
  background: var(--ugg-bg-secondary);
  border: 1px solid var(--ugg-border);
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 16px;
}
.header h1 {
  font-size: 24px; font-weight: 700; color: var(--ugg-text-primary); margin-bottom: 4px;
}
.header p { color: var(--ugg-text-secondary); font-size: 13px; margin: 0; }

/* Grid Layout */
.main-grid {
  display: grid;
  grid-template-columns: 340px 1fr 380px;
  gap: 16px;
}
@media (max-width: 1400px) {
  .main-grid { grid-template-columns: 1fr; }
}

/* Cards - U.GG Style */
.card {
  background: var(--ugg-bg-secondary) !important;
  border: 1px solid var(--ugg-border) !important;
  border-radius: 4px;
  padding: 16px;
  color: var(--ugg-text-primary);
}
.card-title {
  font-size: 14px; font-weight: 600; color: var(--ugg-text-primary);
  margin-bottom: 12px; display: flex; align-items: center; gap: 6px;
  text-transform: uppercase; letter-spacing: .5px;
}
.card-title i { color: var(--ugg-accent-blue); font-size: 16px; }

/* Champion Selection */
#champion-select {
  background: var(--ugg-bg-tertiary);
  border: 1px solid var(--ugg-border);
  color: var(--ugg-text-primary);
  padding: 10px 12px; border-radius: 4px; width: 100%; font-size: 14px;
}
#champion-select:focus {
  outline: none; border-color: var(--ugg-accent-blue);
  box-shadow: 0 0 0 2px rgba(83,131,232,.2);
}
.champion-preview {
  display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px;
  background: var(--ugg-bg-tertiary); border-radius: 4px;
}
.champion-icon-large {
  width: 64px; height: 64px; border-radius: 4px; border: 2px solid var(--ugg-border-light);
}
.champion-info h3 {
  font-size: 16px; font-weight: 600; color: var(--ugg-text-primary); margin-bottom: 2px;
}
.champion-info p { font-size: 12px; color: var(--ugg-text-secondary); margin: 0; }

/* Level Control */
.level-control { margin-top: 12px; }
.level-display { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.level-display span {
  font-size: 12px; color: var(--ugg-text-secondary); text-transform: uppercase; letter-spacing: .5px;
}
.level-value { font-weight: 700; color: var(--ugg-accent-blue); font-size: 14px; }

/* Range sliders — track + thumb (corrige le blanc) */
input[type="range"] {
  width: 100%;
  height: 4px;
  background: transparent; /* le track est défini sur les pseudo-éléments */
  border-radius: 2px;
  outline: none;
  -webkit-appearance: none;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; background: var(--ugg-bg-tertiary); border-radius: 2px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px; background: var(--ugg-accent-blue);
  border-radius: 50%; cursor: pointer; transition: transform .2s;
  margin-top: -5px; /* centre le thumb sur un track de 4px */
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.1); background: #6491ed; }

input[type="range"]::-moz-range-track {
  height: 4px; background: var(--ugg-bg-tertiary); border-radius: 2px;
}
input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; background: var(--ugg-accent-blue);
  border: none; border-radius: 50%; cursor: pointer;
}
input[type="range"]::-moz-range-progress {
  background: var(--ugg-accent-blue); height: 4px; border-radius: 2px;
}
input[type="range"]::-ms-track {
  height: 4px; background: transparent; border-color: transparent; color: transparent;
}
input[type="range"]::-ms-fill-lower { background: var(--ugg-accent-blue); }
input[type="range"]::-ms-fill-upper { background: var(--ugg-bg-tertiary); }

/* Items Grid */
.items-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 12px;
}
.item-slot {
  aspect-ratio: 1; background: var(--ugg-bg-tertiary);
  border: 2px solid var(--ugg-border); border-radius: 4px;
  cursor: pointer; transition: all .15s; display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.item-slot:hover { border-color: var(--ugg-accent-blue); background: var(--ugg-bg-hover); }
.item-slot.filled { border-color: var(--ugg-accent-cyan); }
.item-slot.filled:hover { border-color: var(--ugg-accent-cyan); filter: brightness(1.1); }
.item-slot img { width: 100%; height: 100%; object-fit: cover; }
.item-remove {
  position: absolute; top: -6px; right: -6px; background: var(--ugg-accent-red); color: #fff;
  border-radius: 50%; width: 18px; height: 18px; display: none; align-items: center; justify-content: center;
  font-size: 12px; font-weight: bold; cursor: pointer; border: 2px solid var(--ugg-bg-secondary);
}
.item-slot.filled:hover .item-remove { display: flex; }

/* Abilities Section */
.abilities-list { display: flex; flex-direction: column; gap: 8px; }
.ability-card {
  background: var(--ugg-bg-tertiary); border: 2px solid var(--ugg-border);
  border-radius: 4px; padding: 12px; cursor: pointer; transition: all .15s;
}
.ability-card:hover { border-color: var(--ugg-border-light); background: var(--ugg-bg-hover); }
.ability-card.active { border-color: var(--ugg-accent-cyan); background: var(--ugg-bg-hover); }
.ability-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ability-icon {
  width: 40px; height: 40px; border-radius: 4px; border: 2px solid var(--ugg-border-light);
  background: var(--ugg-bg-primary); object-fit: cover;
}
.ability-key {
  background: var(--ugg-bg-primary); color: var(--ugg-accent-cyan);
  width: 28px; height: 28px; border-radius: 3px; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; border: 1px solid var(--ugg-border);
}
.ability-details { flex: 1; }
.ability-details h4 { font-size: 13px; font-weight: 600; margin-bottom: 2px; color: var(--ugg-text-primary); }
.ability-details p { font-size: 11px; color: var(--ugg-text-secondary); margin: 0; line-height: 1.4; }
.ability-level-slider { margin-top: 8px; }

/* Stats Display */
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.stat-item {
  background: var(--ugg-bg-tertiary); padding: 10px; border-radius: 4px; display: flex; align-items: center; gap: 8px;
}
.stat-icon { width: 28px; height: 28px; opacity: .9; }
.stat-info { flex: 1; }
.stat-label {
  font-size: 10px; color: var(--ugg-text-secondary); text-transform: uppercase; letter-spacing: .5px; font-weight: 500;
}
.stat-value { font-size: 16px; font-weight: 700; color: var(--ugg-text-primary); }

/* Damage Calculator */
.damage-result {
  background: var(--ugg-bg-tertiary); border: 2px solid var(--ugg-accent-cyan);
  border-radius: 4px; padding: 16px; margin-top: 12px;
}
.damage-main {
  text-align: center; padding: 16px;
  background: rgba(0, 191, 214, 0.08);
  border-radius: 4px; margin-bottom: 12px;
}
.damage-main h3 {
  font-size: 11px; color: var(--ugg-text-secondary); margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: 1px; font-weight: 600;
}
.damage-value { font-size: 42px; font-weight: 700; color: var(--damage-magic); line-height: 1; }
.damage-breakdown { display: flex; flex-direction: column; gap: 6px; }
.damage-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px; background: var(--ugg-bg-secondary); border-radius: 3px; font-size: 12px;
}
.damage-label { color: var(--ugg-text-secondary); font-weight: 500; }
.damage-item-value { font-weight: 700; color: var(--ugg-text-primary); }

/* Training Dummy */
.dummy-controls { display: flex; flex-direction: column; gap: 12px; }
.dummy-stat { display: flex; flex-direction: column; gap: 6px; }
.dummy-stat label {
  font-size: 12px; color: var(--ugg-text-secondary); display: flex; justify-content: space-between;
  text-transform: uppercase; letter-spacing: .5px; font-weight: 500;
}
.dummy-stat input[type="number"] {
  background: var(--ugg-bg-tertiary); border: 1px solid var(--ugg-border);
  color: var(--ugg-text-primary); padding: 8px 10px; border-radius: 4px; font-size: 14px; font-weight: 600;
}
.dummy-stat input[type="number"]:focus {
  outline: none; border-color: var(--ugg-accent-blue); box-shadow: 0 0 0 2px rgba(83,131,232,.2);
}
/* retire le look clair des spin-buttons */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Passive Stacks */
.passive-stacks {
  background: var(--ugg-bg-tertiary); padding: 12px; border-radius: 4px; margin-top: 12px; border: 1px solid var(--ugg-border);
}
.passive-stacks h4 {
  font-size: 12px; color: var(--ugg-accent-cyan); margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
  font-weight: 600; text-transform: uppercase; letter-spacing: .5px;
}
.stacks-input { display: flex; align-items: center; gap: 8px; }
.stacks-input button {
  background: var(--ugg-bg-secondary); border: 1px solid var(--ugg-border);
  color: var(--ugg-text-primary); width: 32px; height: 32px; border-radius: 4px; cursor: pointer;
  font-size: 16px; font-weight: bold; display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.stacks-input button:hover { background: var(--ugg-accent-blue); border-color: var(--ugg-accent-blue); color: #fff; }
.stacks-input input {
  flex: 1; text-align: center; background: var(--ugg-bg-secondary);
  border: 1px solid var(--ugg-border); color: var(--ugg-text-primary);
  padding: 6px; border-radius: 4px; font-size: 15px; font-weight: 700;
}
.stacks-input input:focus { outline: none; border-color: var(--ugg-accent-blue); }

/* Buttons */
.btn, .btn:focus { box-shadow: none !important; }
.btn-primary {
  background: var(--ugg-accent-blue) !important; border: none !important;
  padding: 10px 16px; border-radius: 4px; font-weight: 600; font-size: 13px;
  text-transform: uppercase; letter-spacing: .5px; transition: all .15s;
  color: #fff !important;
}
.btn-primary:hover { background: #6491ed !important; }

/* Forms & Bootstrap overrides — corrige les fonds blancs */
input[type="text"], input[type="search"], input[type="email"],
input[type="password"], input[type="number"], textarea,
.form-control, .form-select, select {
  background: var(--ugg-bg-tertiary) !important;
  color: var(--ugg-text-primary) !important;
  border: 1px solid var(--ugg-border) !important;
}
.form-control::placeholder, textarea::placeholder { color: var(--ugg-text-muted) !important; }
.form-control:focus, .form-select:focus {
  border-color: var(--ugg-accent-blue) !important;
  box-shadow: 0 0 0 2px rgba(83,131,232,.2) !important;
  background: var(--ugg-bg-tertiary) !important;
}
.dropdown-menu {
  background: var(--ugg-bg-secondary) !important;
  border: 1px solid var(--ugg-border) !important;
  color: var(--ugg-text-primary) !important;
}
.dropdown-item { color: var(--ugg-text-primary) !important; }
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--ugg-bg-hover) !important; color: var(--ugg-text-primary) !important;
}
.list-group-item {
  background: var(--ugg-bg-tertiary) !important; color: var(--ugg-text-primary) !important;
  border-color: var(--ugg-border) !important;
}
.table { color: var(--ugg-text-primary); }
.table thead th { color: var(--ugg-text-secondary); border-color: var(--ugg-border); }
.table tbody td { border-color: var(--ugg-border); }

/* Modal */
.modal-content {
  background: var(--ugg-bg-secondary) !important;
  border: 1px solid var(--ugg-border) !important;
  color: var(--ugg-text-primary) !important;
}
.modal-header { border-bottom: 1px solid var(--ugg-border) !important; }
.modal-footer { border-top: 1px solid var(--ugg-border) !important; }
.modal-title { color: var(--ugg-text-primary); font-size: 16px; font-weight: 600; }
.modal-backdrop.show { opacity: .7; } /* overlay plus sombre */
.btn-close { filter: invert(1); }

/* Item Browser */
.item-browser-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 8px; max-height: 500px; overflow-y: auto; padding: 4px;
}
.item-browser-item {
  aspect-ratio: 1; cursor: pointer; border: 2px solid var(--ugg-border);
  border-radius: 4px; overflow: hidden; transition: all .15s; background: var(--ugg-bg-tertiary);
}
.item-browser-item:hover { border-color: var(--ugg-accent-cyan); transform: scale(1.05); }
.item-browser-item.hidden { display: none; }
.item-browser-item img { width: 100%; height: 100%; object-fit: cover; }

/* Filter Tags */
.filter-tag {
  padding: 6px 12px; background: var(--ugg-bg-tertiary); border: 1px solid var(--ugg-border);
  border-radius: 4px; color: var(--ugg-text-secondary); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .15s; text-transform: capitalize;
}
.filter-tag:hover { background: var(--ugg-bg-hover); border-color: var(--ugg-border-light); color: var(--ugg-text-primary); }
.filter-tag.active { background: var(--ugg-accent-cyan); border-color: var(--ugg-accent-cyan); color: #fff; }

/* Category Filters (Main Categories) */
.filter-category {
  padding: 8px 16px;
  background: var(--ugg-bg-tertiary);
  border: 1px solid var(--ugg-border);
  border-radius: 4px;
  color: var(--ugg-text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.filter-category:hover {
  background: var(--ugg-bg-hover);
  border-color: var(--ugg-border-light);
  color: var(--ugg-text-primary);
  transform: translateY(-1px);
}
.filter-category.active {
  background: var(--ugg-accent-blue);
  border-color: var(--ugg-accent-blue);
  color: #fff;
  box-shadow: 0 2px 8px rgba(83, 131, 232, 0.3);
}
.filter-category i {
  font-size: 14px;
}

/* Stat Filters (Specific Stats) */
.filter-stat {
  padding: 6px 12px;
  background: var(--ugg-bg-tertiary);
  border: 1px solid var(--ugg-border);
  border-radius: 4px;
  color: var(--ugg-text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.filter-stat:hover {
  background: var(--ugg-bg-hover);
  border-color: var(--ugg-border-light);
  color: var(--ugg-text-primary);
}
.filter-stat.active {
  background: var(--ugg-accent-cyan);
  border-color: var(--ugg-accent-cyan);
  color: #fff;
}
.filter-stat i {
  font-size: 14px;
}
.filter-stat img {
  filter: brightness(0.8);
}
.filter-stat.active img {
  filter: brightness(1.2);
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--ugg-bg-primary); }
::-webkit-scrollbar-thumb { background: var(--ugg-border-light); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ugg-accent-blue); }

/* Utilitaires anti-“blanc” hérités de Bootstrap */
.bg-white, .bg-light, .text-dark {
  background: var(--ugg-bg-secondary) !important;
  color: var(--ugg-text-primary) !important;
}
.border, .border-top, .border-bottom, .border-start, .border-end {
  border-color: var(--ugg-border) !important;
}

/* Inputs spéciaux */
input[type="search"]::-webkit-search-cancel-button { filter: invert(1); }
select::-ms-expand { display: none; }