/* FIFA-like UI theme (inspirado, no assets propietarios)
   - Dark stadium feel
   - Neon accent
   - Glass cards + angled highlights
*/

:root{
  --bg0: #070a0f;
  --bg1: #0b0f14;
  --panel: rgba(16, 22, 31, 0.78);
  --panel2: rgba(10, 14, 20, 0.55);
  --stroke: rgba(255,255,255,0.10);
  --stroke2: rgba(255,255,255,0.16);

  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.62);

  --accent: #7CFF4E;   /* verde FIFA-esque */
  --accent2: #23D5FF;  /* cian */
  --danger: #ff4d4d;

  --radius: 18px;
  --radius-sm: 14px;
  --shadow: 0 18px 40px rgba(0,0,0,.55);
}

html, body { height: 100%; }
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(35,213,255,.16), transparent 55%),
    radial-gradient(1200px 600px at 80% 0%, rgba(124,255,78,.14), transparent 50%),
    radial-gradient(900px 500px at 50% 110%, rgba(124,255,78,.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

/* Subtle grain */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}


#teamA, #teamB {
  min-height: 320px;
}

.navbar-collapse {
  transition: none !important;
}
.collapsing {
  transition: height 0.12s ease !important;
}

.navbar{
  background: rgba(5,7,10,.65) !important;
  border-bottom: 1px solid var(--stroke);
  backdrop-filter: blur(10px);
}
.navbar .navbar-brand{
  font-family: Oswald, Inter, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.navbar .nav-link{
  color: rgba(255,255,255,.78) !important;
}
.navbar .nav-link:hover{
  color: white !important;
}

.container{
  max-width: 1100px;
}

h1,h2,h3,h4{
  font-family: Oswald, Inter, sans-serif;
  letter-spacing: .02em;
}

.text-muted{ color: var(--muted) !important; }

.card{
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}
.card::after{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(900px 180px at 20% 0%, rgba(124,255,78,.16), transparent 60%),
    radial-gradient(900px 180px at 80% 0%, rgba(35,213,255,.12), transparent 60%);
  pointer-events:none;
  opacity:.9;
}
.card > *{ position: relative; z-index: 1; }

hr{ border-color: rgba(255,255,255,.14); }

.form-label{ color: rgba(255,255,255,.8); }
.form-text{ color: rgba(255,255,255,.55); }

.form-control, .form-select{
  background-color: rgba(10,14,20,.65);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  border-radius: 14px;
}
.form-control:focus, .form-select:focus{
  border-color: rgba(124,255,78,.8);
  box-shadow: 0 0 0 .2rem rgba(124,255,78,.18);
  background-color: rgba(10,14,20,.75);
  color: rgba(255,255,255,.95);
}
.form-select option{ color: #0b0f14; }

.btn{
  border-radius: 999px;
  padding: .55rem 1rem;
  font-weight: 700;
}
.btn-primary{
  background: linear-gradient(90deg, rgba(124,255,78,1), rgba(35,213,255,1));
  border: none;
  color: #071012;
}
.btn-primary:hover{ filter: brightness(1.05); }
.btn-outline-secondary{
  border-color: rgba(255,255,255,.22);
  color: rgba(255,255,255,.84);
}
.btn-outline-secondary:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.28);
  color: white;
}
.btn-outline-primary{
  border-color: rgba(124,255,78,.55);
  color: rgba(255,255,255,.92);
}
.btn-outline-primary:hover{
  background: rgba(124,255,78,.14);
  border-color: rgba(124,255,78,.75);
  color: white;
}

.badge.bg-secondary{
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  border-radius: 999px;
  padding: .4rem .6rem;
}

.table{
  color: rgba(255,255,255,.9);
}
.table thead th{
  color: rgba(255,255,255,.7);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.table td, .table th{
  border-color: rgba(255,255,255,.10);
}
.table tr:hover td{
  background: rgba(255,255,255,.04);
}

.alert{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,14,20,.65);
  color: rgba(255,255,255,.92);
}
.alert-success{
  border-color: rgba(124,255,78,.35);
}
.alert-danger{
  border-color: rgba(255,77,77,.35);
}
.alert-warning{
  border-color: rgba(255,193,7,.35);
}

.stat-card{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  background: rgba(10,14,20,.45);
}
.stat-label{ font-size: .9rem; color: rgba(255,255,255,.62); }
.stat-value{
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.1;
  background: linear-gradient(90deg, rgba(124,255,78,1), rgba(35,213,255,1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.select-row{
  display: flex;
  gap: .5rem;
  align-items: center;
}
.select-row .slot-label{
  width: 2.2rem;
  flex: 0 0 auto;
  font-weight: 700;
  color: rgba(255,255,255,.6);
}

footer{
  color: rgba(255,255,255,.45) !important;
}


/* Table visibility patch (mejor contraste) */
.table-responsive{
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
}

.table{
  margin-bottom: 0;
  background: rgba(10,14,20,.35);
}

.table thead{
  background: linear-gradient(90deg, rgba(124,255,78,.16), rgba(35,213,255,.12));
}

.table thead th{
  background: transparent;
  color: rgba(255,255,255,.92) !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 800;
  font-size: .78rem;
  padding-top: .75rem;
  padding-bottom: .75rem;
}

.table tbody td{
  color: rgba(255,255,255,.9);
}

.table tbody tr:nth-child(odd) td{
  background: rgba(255,255,255,.02);
}

.table tbody tr:hover td{
  background: rgba(124,255,78,.06);
}


/* Headings + radios visibility patch */
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5{
  color: rgba(255,255,255,.94);
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

.form-check-label{
  color: rgba(255,255,255,.86);
  font-weight: 700;
}

.form-check-input{
  width: 1.1em;
  height: 1.1em;
  background-color: rgba(10,14,20,.65);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: none;
}

.form-check-input:focus{
  border-color: rgba(124,255,78,.9);
  box-shadow: 0 0 0 .2rem rgba(124,255,78,.18);
}

.form-check-input:checked{
  background-color: rgba(124,255,78,1);
  border-color: rgba(124,255,78,1);
}

.form-check-input:checked[type="radio"]{
  background-image: radial-gradient(circle at 50% 50%, #071012 0 38%, transparent 40% 100%);
}


/* Fix Bootstrap table white rows */
.table{
  --bs-table-bg: transparent;
  --bs-table-color: rgba(255,255,255,.92);
  --bs-table-striped-color: rgba(255,255,255,.92);
  --bs-table-striped-bg: rgba(255,255,255,.02);
  --bs-table-hover-color: rgba(255,255,255,.95);
  --bs-table-hover-bg: rgba(124,255,78,.06);
}

.table>:not(caption)>*>*{
  background-color: transparent !important;
  color: inherit;
}

.table tbody td{
  background: rgba(10,14,20,.22);
}

.table tbody tr:nth-child(odd) td{
  background: rgba(10,14,20,.28);
}


/* FIFA card */
.inner-panel{
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.10);
}

.fifa-card{
  --frame-main: #9a5d2a;
  --frame-soft: #e0b07a;
  --frame-deep: #5a2e12;
  position: relative;
  border: 0 !important;
  background: transparent;
  border-radius: 28px;
  overflow: hidden;
  padding: 18px 18px 22px;
  box-shadow:
    0 24px 60px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.04);
}
.fifa-card::after{
  content:"";
  position:absolute;
  inset:6px;
  border-radius: 24px;
  background: transparent;
  z-index: 0;
}
.fifa-card > *{
  position: relative;
  z-index: 2;
}

.fifa-card-top{
  display:flex;
  gap: 14px;
  align-items: center;
}
.fifa-card-rating .label{
  color: rgba(255,255,255,.65);
  font-size: .75rem;
  letter-spacing: .12em;
  font-weight: 800;
}
.fifa-card-rating .value{
  font-family: Oswald, Inter, sans-serif;
  font-size: 3rem;
  line-height: 1;
  font-weight: 800;
  background: linear-gradient(90deg, rgba(124,255,78,1), rgba(35,213,255,1));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.fifa-card-rating .value .pct{
  font-size: 1.4rem;
  vertical-align: super;
  line-height: 0;
  background: none;
  -webkit-text-fill-color: #7cff4e;
  color: #7cff4e;
}

.fifa-card-photo{
  margin-left: auto;
  width: 110px;
  height: 110px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  position: relative;
  overflow: hidden;
}
.fifa-card-photo img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:none;
}
.fifa-card-photo img.show{ display:block; }
.fifa-card-photo .photo-fallback{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 2.2rem;
  color: rgba(255,255,255,.55);
}

.fifa-card-name{
  margin-top: 12px;
  font-family: Oswald, Inter, sans-serif;
  font-size: 1.35rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.fifa-card-sub{
  color: rgba(255,255,255,.65);
  margin-top: 2px;
  font-weight: 700;
}

.fifa-card-stats{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.fifa-card-stats-2{
  grid-template-columns: repeat(3, 1fr);
  margin-top: 10px;
}

.fifa-card-stats .item{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,14,20,.30);
  border-radius: 14px;
  padding: 10px 10px;
  text-align:center;
}
.fifa-card-stats .k{
  color: rgba(255,255,255,.62);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
}
.fifa-card-stats .v{
  margin-top: 2px;
  font-size: 1.2rem;
  font-weight: 900;
}

.fifa-progress{
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
}
.fifa-progress .progress-bar{
  background: linear-gradient(90deg, rgba(124,255,78,1), rgba(35,213,255,1));
}

/* Profile edit panel */
#editPanelWrap .card{
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
}


/* FIFA card stats contrast boost */
.fifa-card-stats .item{
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(10,14,20,.28));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}

.fifa-card-stats .k{
  color: rgba(255,255,255,.78);
  text-shadow: 0 1px 0 rgba(0,0,0,.55);
}

.fifa-card-stats .v{
  color: rgba(255,255,255,.96);
  text-shadow: 0 1px 0 rgba(0,0,0,.55);
  font-family: Oswald, Inter, sans-serif;
  letter-spacing: .02em;
}

.fifa-card-name{
  text-shadow: 0 2px 0 rgba(0,0,0,.5);
}

.fifa-card-sub{
  color: rgba(255,255,255,.78);
  text-shadow: 0 1px 0 rgba(0,0,0,.55);
}

/* Placeholder visibility */
.form-control::placeholder,
.form-select::placeholder{
  color: rgba(255,255,255,.45);
  opacity: 1;
}
.form-control::-webkit-input-placeholder{ color: rgba(255,255,255,.45); }
.form-control::-moz-placeholder{ color: rgba(255,255,255,.45); opacity:1; }
.form-control:-ms-input-placeholder{ color: rgba(255,255,255,.45); }
.form-control:-moz-placeholder{ color: rgba(255,255,255,.45); opacity:1; }

/* Resultado label visibility */
.match-result-label{
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  text-shadow: 0 2px 0 rgba(0,0,0,.55);
}

/* FIFA card name extra contrast */
.fifa-card-name{
  background: linear-gradient(90deg, rgba(0,0,0,.62), rgba(0,0,0,.36));
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 12px 28px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06);
  color: rgba(255,255,255,.98);
}

/* FIFA card name FINAL visibility fix */
.fifa-card-name{
  opacity: 1 !important;
  color: #fff !important;
  background: rgba(0,0,0,.70) !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  text-shadow: 0 2px 0 rgba(0,0,0,.75), 0 0 18px rgba(0,0,0,.55) !important;
  position: relative;
  z-index: 5;
  mix-blend-mode: normal;
}

/* Player name must be pure white (override any blend/filters) */
#playerName,
.fifa-card-name{
  color: #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
  -webkit-text-fill-color: #ffffff !important;
}


/* Edit profile row: keep controls aligned */
#editPanel .form-control,
#editPanel .form-select{
  min-height: 44px;
}
#editPanel .form-text{
  margin-top: .35rem;
}


/* Edit save button sizing */
#editPanel #saveProfile{
  border-radius: 999px;
  min-height: 40px;
}
@media (max-width: 767.98px){
  #editPanel #saveProfile{
    width: 100%;
  }
}


/* Edit file input compact */
#editPanel input[type="file"].form-control{
  padding-top: .45rem;
  padding-bottom: .45rem;
}

/* Compact file input (edit profile) */
#editPanel input[type="file"].form-control{
  font-size: .92rem;
  line-height: 1.2;
}
#editPanel input[type="file"].form-control::-webkit-file-upload-button{
  padding: .35rem .65rem;
  font-size: .92rem;
  border-radius: 999px;
}
#editPanel input[type="file"].form-control::file-selector-button{
  padding: .35rem .65rem;
  font-size: .92rem;
  border-radius: 999px;
}

/* File input: compact spacing (no helper text) */
#editPanel input[type="file"].form-control{
  margin-top: .15rem;
}


/* Stable tables (reduce layout shifts while loading) */
.stable-table{
  table-layout: fixed;
}
.stable-table th, .stable-table td{
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.stable-table td:nth-child(4),
.stable-table td:nth-child(5){
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: break-word;
}
.stable-table td:nth-child(2){
  white-space: nowrap;
}
.stable-table td:nth-child(3){
  white-space: nowrap;
}
.section-loading{
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
}
.section-loaded{
  opacity: 1;
  transform: none;
}

/* Clamp long team lists to reduce layout shifts */
.teamlist{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  line-height: 1.25;
  min-height: calc(1.25em * 2);
}
.teamlist.small{
  -webkit-line-clamp: 1;
  min-height: 1.25em;
}
#recentMatchesWrap{
  min-height: 260px; /* reserve space to avoid jump while loading */
}
@media (max-width: 767.98px){
  #recentMatchesWrap{ min-height: 320px; }
}

/* Skeleton rows */
.skeleton-row td{
  color: rgba(255,255,255,.35);
  height: 56px;
}

/* hide-edit-column */
#playersTable th:last-child, #playersTable td:last-child{display:none;}

/* Crest overlay on profile photo */
.card-avatar, .profile-avatar, .avatar, .avatar-wrap, .photo-wrap {
  position: relative;
}
.crest-badge{
  position:absolute;
  right:-10px;
  bottom:-10px;
  width:45px;
  height:45px;
  object-fit:contain;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.55));
  pointer-events:none;
  opacity:.96;
  z-index: 5;
}

@media (max-width: 520px){
  .crest-badge{ width: 28px; height: 28px; right:-10px; bottom:-10px; }
}

@media (max-width: 520px){
  .crest-badge{ width: 44px; height: 44px; right:-10px; bottom:-10px; }
}

/* Ensure crest is always visible (override .fifa-card-photo img{display:none}) */
.fifa-card-photo .crest-badge{
  display:block !important;
  position:absolute !important;
  right:6px !important;
  bottom:6px !important;
  width:45px !important;
  height:45px !important;
  object-fit:contain !important;
  opacity:.96 !important;
}
@media (max-width:520px){
  .fifa-card-photo .crest-badge{
    width:44px !important;
    height:44px !important;
  }
}


@media (max-width:520px){
  .crest-badge,
  .fifa-card-photo .crest-badge{
    right:4px !important;
    bottom:4px !important;
    width:35px !important;
    height:35px !important;
  }
}

.fifa-card-photo{position:relative;}

.fifa-card-photo{overflow:visible !important;}

/* Final crest position override */
.fifa-card .fifa-card-top .fifa-card-photo{
  position: relative !important;
  overflow: visible !important;
  z-index: 2 !important;
}

.fifa-card .fifa-card-top .fifa-card-photo .crest-badge{
  display: block !important;
  position: absolute !important;
  right: -16px !important;
  bottom: -18px !important;
  width: 50px !important;
  height: 50px !important;
  object-fit: contain !important;
  z-index: 20 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.55)) !important;
}

@media (max-width: 520px){
  .fifa-card .fifa-card-top .fifa-card-photo .crest-badge{
    right: -12px !important;
    bottom: -14px !important;
    width: 44px !important;
    height: 44px !important;
  }
}


/* FIFA quality frame */
.fifa-card{
  --frame-main: #9a5d2a;
  --frame-soft: #e0b07a;
  --frame-deep: #5a2e12;
  position: relative;
  border: 0 !important;
  background:
    linear-gradient(180deg, rgba(8,12,18,.82), rgba(7,10,15,.74)),
    radial-gradient(1000px 420px at 18% 0%, rgba(255,255,255,.04), transparent 60%);
  border-radius: 28px;
  overflow: visible;
  padding: 18px 18px 22px;
  box-shadow:
    0 24px 60px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.04);
}
.fifa-card::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius: 30px;
  background: linear-gradient(
    135deg,
    var(--frame-deep) 0%,
    var(--frame-main) 20%,
    var(--frame-soft) 38%,
    var(--frame-main) 62%,
    var(--frame-deep) 100%
  );
  box-shadow:
    0 12px 26px rgba(0,0,0,.35),
    inset 0 1px 4px rgba(255,255,255,.12);
  z-index: 0;
}
.fifa-card::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius: 24px;
  background:
    radial-gradient(900px 340px at 15% 0%, rgba(255,255,255,.10), transparent 52%),
    linear-gradient(180deg, rgba(16,20,28,.92), rgba(8,11,18,.92));
  z-index:0;
}
.fifa-card > *{
  position: relative;
  z-index: 2;
}
.fifa-bottom-point{
  position:absolute;
  left:50%;
  bottom:-14px;
  width:34px;
  height:24px;
  transform:translateX(-50%);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  background: linear-gradient(
    180deg,
    var(--frame-soft),
    var(--frame-main) 60%,
    var(--frame-deep)
  );
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.25));
  z-index:1;
}
.fifa-quality-tag{
  position:absolute;
  top:10px;
  right:14px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(10,14,20,.95);
  background: linear-gradient(135deg, var(--frame-soft), var(--frame-main));
  box-shadow: 0 6px 14px rgba(0,0,0,.28);
  z-index:3;
}
.fifa-card.rarity-bronze{
  --frame-main:#b56a2f;
  --frame-soft:#efc689;
  --frame-deep:#6a3415;
}
.fifa-card.rarity-silver{
  --frame-main:#c8ced8;
  --frame-soft:#f4f6fb;
  --frame-deep:#747b86;
}
.fifa-card.rarity-gold{
  --frame-main:#f0c440;
  --frame-soft:#fff6a8;
  --frame-deep:#9f6f12;
}
.fifa-card .fifa-card-name{
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.58));
}
.fifa-card .fifa-card-stats .item{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(10,14,20,.26));
  border-color: rgba(255,255,255,.14);
}
.fifa-card .fifa-card-photo{
  box-shadow:
    0 10px 18px rgba(0,0,0,.28),
    inset 0 0 0 2px rgba(255,255,255,.06);
}

.fifa-bottom-point{display:none !important;}