/* /var/www/alessio-site/public/assets/css/stats.css */

:root{
  --gt-brand: #0C7489;
  --gt-brand-contrast: #ffffff;

  --gt-bg: #D7D9CE;
  --gt-card: #ffffff;
  --gt-text: #040404;
  --gt-muted: rgba(4,4,4,.65);
  --gt-border: rgba(19,80,91,.22);
  --gt-shadow: 0 10px 30px rgba(4,4,4,.08);

  --bs-body-bg: var(--gt-bg);
  --bs-body-color: var(--gt-text);
  --bs-secondary-color: rgba(4,4,4,.65);
  --bs-border-color: var(--gt-border);
}

[data-bs-theme="dark"]{
  --gt-brand: #FEE715;
  --gt-brand-contrast: #101820;

  --gt-bg: #101820;
  --gt-card: color-mix(in srgb, #121C26 92%, var(--gt-brand));
  --gt-text: #e9eef5;
  --gt-muted: rgba(233,238,245,.70);
  --gt-border: rgba(255,255,255,.12);
  --gt-shadow: 0 10px 30px rgba(0,0,0,.35);

  --bs-body-bg: var(--gt-bg);
  --bs-body-color: var(--gt-text);
  --bs-secondary-color: var(--gt-muted);
  --bs-border-color: var(--gt-border);
}

body{
  background: var(--gt-bg);
  color: var(--gt-text);
}

#gt-navbar-logo{
  filter: drop-shadow(0 0 6px rgba(255,255,255,.35)) drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

.shiny-text{
  display: inline-block;
  background: linear-gradient(
    110deg,
    var(--gt-text) 0%,
    color-mix(in srgb, var(--gt-text) 45%, var(--gt-brand)) 35%,
    var(--gt-text) 70%
  );
  background-size: 200% 100%;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: gtShine 8s linear infinite;
}

@keyframes gtShine{
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce){
  .shiny-text{ animation: none; }
}

@media (max-width: 768px){
  .shiny-text{ animation: none; }
}

/* Galaxy background canvas */
#gt-galaxy-bg{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
}

[data-bs-theme="light"] #gt-galaxy-bg{
  opacity: 0.55;
}

nav.navbar,
main{
  position: relative;
  z-index: 1;
}

/* Nav game modes container */
.gt-nav-modes {
  background: color-mix(in srgb, var(--gt-bg) 85%, #ffffff);
  border-color: color-mix(in srgb, var(--gt-border) 70%, transparent) !important;
}

.gt-card{
  background: var(--gt-card);
  border: 1px solid var(--gt-border);
  border-radius: 16px;
  box-shadow: var(--gt-shadow);
}

.gt-intro h1{ letter-spacing: .2px; }

.gt-tabs .nav-link{
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

.gt-mod{
  position: relative;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.gt-mod:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
}

.gt-mod-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.gt-mod-title{
  font-weight: 800;
  letter-spacing: .2px;
}

.gt-mod-sub{
  font-size: 12px;
  color: var(--gt-muted) !important;
}

.gt-big{
  font-size: 44px;
  font-weight: 900;
  line-height: 1.05;
}

.gt-big-sm{
  font-size: 22px;
  font-weight: 900;
  line-height: 1.15;
}

.gt-mod-actions{
  display: none;
  align-items: center;
  gap: 6px;
}

.gt-st-editing .gt-mod-actions{
  display: flex;
}

.gt-st-editing .gt-mod-col{
  cursor: grab;
}

/* ===== Editing layout (Training tab) ===== */
.gt-tr-editing .gt-mod-actions{
  display: flex;
}
.gt-tr-editing .gt-mod-col{
  cursor: grab;
}
.gt-tr-editing .gt-mod-col.gt-drop-target .gt-mod{
  outline: 2px dashed color-mix(in srgb, var(--gt-brand) 55%, transparent);
  outline-offset: 4px;
}

/* ===== Editing layout (PlaceCity tab) ===== */
.gt-pc-editing .gt-mod-actions{
  display: flex;
}
.gt-pc-editing .gt-mod-col{
  cursor: grab;
}
.gt-pc-editing .gt-mod-col.gt-drop-target .gt-mod{
  outline: 2px dashed color-mix(in srgb, var(--gt-brand) 55%, transparent);
  outline-offset: 4px;
}

/* ===== Editing layout (Daily tab) ===== */
.gt-daily-editing .gt-mod-actions{
  display: flex;
}
.gt-daily-editing .gt-mod-col{
  cursor: grab;
}
.gt-daily-editing .gt-mod-col.gt-drop-target .gt-mod{
  outline: 2px dashed color-mix(in srgb, var(--gt-brand) 55%, transparent);
  outline-offset: 4px;
}

.gt-mod-col.gt-drop-target .gt-mod{
  outline: 2px dashed color-mix(in srgb, var(--gt-brand) 55%, transparent);
  outline-offset: 4px;
}

.gt-tier-line{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-height: 34px;
}

.gt-clean-list{
  margin: 0;
  padding-left: 18px;
}

.gt-grid-mini{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 576px){
  .gt-grid-mini{ grid-template-columns: 1fr; }
}

/* Table légère */
.gt-table thead th{
  color: var(--gt-muted);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* ================================
   Tiers pays (BADGES uniquement)
   ================================ */

.gt-tier-badge{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  font-weight: 900;
  letter-spacing: .25px;
  line-height: 1;

  padding: 6px 10px;
  border-radius: 999px;

  border: 1px solid rgba(0,0,0,.12);
  color: var(--gt-text);

  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -10px 18px rgba(0,0,0,.18),
    0 6px 18px rgba(0,0,0,.12);

  overflow: hidden;
  transform: translateZ(0);
}

.gt-tier-badge::before{
  content:"";
  position:absolute;
  inset:-40% -35%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.00) 35%,
    rgba(255,255,255,0.35) 50%,
    rgba(255,255,255,0.00) 65%
  );
  transform: rotate(12deg);
  opacity: .55;
  pointer-events:none;
}

/* Bronze */
.gt-tier-bronze{
  background: linear-gradient(135deg,#a86022 0%,#cd7f32 35%,#7a3f18 70%,#d9a26c 100%);
  border-color: rgba(205,127,50,.55);
  color: #111;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

/* Argent */
.gt-tier-silver{
  background: linear-gradient(135deg,#f3f3f3 0%,#cfcfcf 35%,#8f8f8f 70%,#ffffff 100%);
  border-color: rgba(192,192,192,.55);
  color: #111;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

/* Or */
.gt-tier-gold{
  background: linear-gradient(135deg,#fff0a8 0%,#ffd54a 30%,#b8860b 70%,#fff6cf 100%);
  border-color: rgba(255,196,0,.55);
  color: #111;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

/* Diamant */
.gt-tier-diamond{
  background: linear-gradient(135deg,#baf2ff 0%,#6dd5ff 35%,#2193b0 70%,#e9fbff 100%);
  border-color: rgba(86,204,242,.55);
  color: #111;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

/* Ruby */
.gt-tier-ruby{
  background: linear-gradient(135deg,#ffb3c1 0%,#ff4d6d 28%,#b00020 70%,#ffe3ea 100%);
  border-color: rgba(255,77,109,.55);
  color: #111;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

/* Émeraude */
.gt-tier-emerald{
  background: linear-gradient(135deg,#c7ffe6 0%,#34d399 32%,#047857 72%,#eafff5 100%);
  border-color: rgba(52,211,153,.55);
  color: #111;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

/* ================================
   Graphiques (optionnels)
   ================================ */
.gt-graph-card{
  box-shadow: none;
}

.gt-canvas-wrap{
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--gt-border);
  background: color-mix(in srgb, var(--gt-card) 92%, transparent);
  padding: 10px;
  overflow: hidden;
}

/* ================================
   Tri table historique
   ================================ */
.gt-th-sort{
  border: 0;
  background: transparent;
  padding: 0;
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--gt-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.gt-th-sort::after{
  content: "↕";
  opacity: .55;
  font-weight: 900;
}

.gt-th-sort.is-asc::after{ content:"↑"; opacity:.95; }
.gt-th-sort.is-desc::after{ content:"↓"; opacity:.95; }

/* ================================
   Badge record (historique)
   ================================ */
.gt-record-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 900;
  border-radius: 999px;
  padding: 4px 10px;
  border: 1px solid var(--gt-border);
  background: color-mix(in srgb, var(--gt-text) 10%, transparent);
}

/* Modal Bootstrap (Stats) — sinon blanc */
.modal-content{
  background: var(--gt-card) !important;
  color: var(--gt-text) !important;
  border-color: var(--gt-border) !important;
}