/* ==========================================================
   FDVS Mission Log / AAR
   File dedicato: mission-log.css
   Deve essere caricato DOPO style.css
   ========================================================== */

/* Hero Mission Log */

.mission-log-hero{
  padding-top:80px;
}

.mission-log-hero-card{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:28px;
  align-items:center;

  padding:32px;
  border-radius:18px;

  background:
    radial-gradient(circle at 18% 20%, rgba(0,217,255,0.13), transparent 36%),
    linear-gradient(180deg, rgba(22,24,26,0.96), rgba(15,17,19,0.94));

  border:1px solid rgba(0,217,255,0.16);
  box-shadow:var(--shadow);
  backdrop-filter:blur(5px);
}

.mission-log-kpis{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}

.mission-log-kpis span,
.mission-detail-tags span{
  display:inline-flex;
  align-items:center;

  padding:8px 12px;
  border-radius:999px;

  border:1px solid rgba(0,217,255,0.22);
  background:rgba(0,217,255,0.08);

  color:var(--accent-1);
  font-size:0.76rem;
  font-weight:800;
  letter-spacing:0.5px;
  text-transform:uppercase;
}

/* Toolbar / filtri */

.mission-toolbar{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-end;
  margin-bottom:26px;
}

.mission-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}

.mission-filter{
  border:1px solid rgba(0,217,255,0.22);
  background:rgba(0,217,255,0.06);
  color:var(--accent-1);

  padding:9px 13px;
  border-radius:999px;

  font-family:'Montserrat', sans-serif;
  font-weight:700;
  font-size:0.78rem;
  letter-spacing:0.05em;
  text-transform:uppercase;

  cursor:pointer;
  transition:0.2s ease;
}

.mission-filter:hover,
.mission-filter.is-active{
  color:#021014;
  background:linear-gradient(180deg, var(--accent-1), var(--accent-2));
  border-color:rgba(0,217,255,0.6);
  box-shadow:0 0 18px rgba(0,217,255,0.24);
}

/* Archive grid */

.mission-log-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:22px;
}

.mission-card{
  padding:0;
  overflow:hidden;
  border-radius:16px;
}

.mission-card:hover{
  transform:translateY(-4px);
  border-color:rgba(0,217,255,0.35);
  box-shadow:0 0 24px rgba(0,217,255,0.16);
}

.mission-card-link{
  display:block;
  color:var(--text);
  text-decoration:none;
  height:100%;
}

/* Immagine card */

.mission-card-media{
  width:100%;
  height:220px;
  max-height:220px;
  min-height:0;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;
  background:#0b0d0f;
  border-bottom:1px solid rgba(255,255,255,0.05);
}

.mission-card-media img{
  width:100%;
  height:100%;
  max-height:220px;

  object-fit:contain;
  object-position:center center;

  display:block;
  background:#0b0d0f;
}

.mission-card:hover .mission-card-media img{
  transform:none;
}

/* Contenuto card */

.mission-card-body{
  padding:24px;
}

.mission-card-meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;

  margin-bottom:12px;

  color:var(--muted);
  font-size:0.82rem;
}

.mission-card-meta strong{
  color:var(--accent-1);
}

.mission-tag,
.mission-date{
  color:var(--muted);
  font-size:0.86rem;
  font-weight:600;
}

.mission-title{
  margin:0 0 16px;
  color:var(--text);
  font-size:1.18rem;
  line-height:1.3;
}

.mission-pilots{
  margin:0 0 18px;
  color:var(--muted);
  font-size:0.95rem;
}

.mission-pilots strong{
  color:var(--text);
}

/* Testo debrief / mini markdown */

.mission-summary{
  color:var(--muted);
  font-size:0.98rem;
  line-height:1.85;
}

.mission-summary p{
  margin:0 0 1rem;
  text-align:justify;
}

.mission-heading{
  display:block;
  margin:1rem 0 0.35rem;

  color:var(--text);
  font-weight:800;
  font-size:1.08rem;
  line-height:1.35;
}

.mission-list{
  margin:0.2rem 0 0.7rem;
  padding-left:1.1rem;
  color:var(--muted);
}

.mission-list li{
  margin:0.12rem 0;
  line-height:1.45;
}

.mission-summary br{
  display:block;
  content:"";
  margin-bottom:0.8rem;
}

/* Stati */

.mission-empty,
.mission-loading{
  text-align:center;
  padding:28px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.06);
  background:rgba(22,24,26,0.78);
  color:var(--muted);
}

/* Optional: detail view futuro */

.mission-detail-hero{
  position:relative;
  min-height:520px;
  overflow:hidden;
  padding:0;

  border-left:none;
  border-right:none;
}

.mission-detail-hero img{
  width:100%;
  height:520px;
  object-fit:cover;
  opacity:0.6;
  filter:brightness(0.72) contrast(1.08);
}

.mission-detail-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(10,12,14,0.92), rgba(10,12,14,0.54), rgba(10,12,14,0.88)),
    radial-gradient(circle at 18% 28%, rgba(0,217,255,0.16), transparent 34%);
}

.mission-detail-overlay{
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:min(1100px, calc(100% - 40px));
}

.mission-detail-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}

.mission-detail-grid{
  display:grid;
  grid-template-columns:1fr 330px;
  gap:24px;
}

.mission-debrief,
.mission-side-panel{
  padding:28px;
}

.mission-debrief h2,
.mission-side-panel h2{
  margin-top:6px;
}

.mission-debrief p,
.mission-content p{
  color:var(--text);
  font-size:1.02rem;
  text-align:justify;
  line-height:1.9;
  hyphens:auto;
  text-wrap:pretty;
}

.mission-pilot-list{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:16px;
}

.mission-pilot-pill{
  display:inline-flex;
  align-items:center;
  padding:8px 11px;
  border-radius:999px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  color:var(--text);
  font-size:0.82rem;
  font-weight:700;
}

.mission-panel-divider{
  border:none;
  height:1px;
  background:rgba(255,255,255,0.08);
  margin:24px 0;
}

.mission-back-link{
  margin-bottom:18px;
}

/* Responsive */

@media(max-width:980px){
  .mission-detail-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:720px){
  .mission-log-hero-card{
    grid-template-columns:1fr;
    text-align:center;
  }

  .mission-toolbar{
    flex-direction:column;
    align-items:flex-start;
  }

  .mission-filters{
    justify-content:flex-start;
  }

  .mission-log-grid{
    grid-template-columns:1fr;
  }

  .mission-detail-hero,
  .mission-detail-hero img{
    min-height:440px;
    height:440px;
  }
}

@media(max-width:640px){
  .mission-card-media{
    height:160px;
    max-height:160px;
  }

  .mission-card-media img{
    max-height:160px;
  }

  .mission-card-body{
    padding:20px;
  }

  .mission-summary{
    line-height:1.75;
  }

  .mission-summary p,
  .mission-debrief p,
  .mission-content p{
    text-align:left;
  }
}


/* ==========================================================
   Mission Log Event Index + Debrief Modal
========================================================== */

.mission-event-index{
  padding:0;
  overflow:hidden;
  border-radius:18px;
}

.mission-index-head{
  padding:22px 24px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.02);
}

.mission-index-head p{
  margin:6px 0 0;
}

.mission-event-list{
  display:grid;
}

.mission-event-row{
  width:100%;
  display:grid;
  grid-template-columns:150px minmax(0,1fr) auto;
  gap:18px;
  align-items:center;

  padding:18px 24px;
  border:0;
  border-bottom:1px solid rgba(255,255,255,0.055);

  background:rgba(22,24,26,0.72);
  color:var(--text);
  font-family:'Montserrat', sans-serif;
  text-align:left;
  cursor:pointer;
  transition:0.22s ease;
}

.mission-event-row:last-child{
  border-bottom:0;
}

.mission-event-row:hover,
.mission-event-row:focus-visible{
  background:rgba(0,217,255,0.07);
  outline:none;
  box-shadow:inset 3px 0 0 var(--accent-1);
}

.mission-event-date{
  color:var(--accent-1);
  font-weight:800;
  font-size:0.86rem;
}

.mission-event-main strong{
  display:block;
  font-size:1.02rem;
  line-height:1.35;
}

.mission-event-main small{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:0.82rem;
}

.mission-event-action{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(0,217,255,0.18);
  color:var(--accent-1);
  background:rgba(0,217,255,0.06);
  font-size:0.72rem;
  font-weight:800;
  letter-spacing:0.06em;
  text-transform:uppercase;
  white-space:nowrap;
}

body.mission-modal-open{
  overflow:hidden;
}

.mission-modal-backdrop{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,0.78);
  backdrop-filter:blur(7px);
}

.mission-modal-backdrop[hidden]{
  display:none;
}

.mission-modal{
  position:relative;
  width:min(980px, 94vw);
  max-height:88vh;
  overflow:hidden;
  border-radius:20px;
  background:rgba(15,17,19,0.98);
  border:1px solid rgba(0,217,255,0.22);
  box-shadow:0 0 48px rgba(0,217,255,0.16), var(--shadow);
}

.mission-modal-content{
  max-height:88vh;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--accent-1) rgba(255,255,255,0.05);
}

.mission-modal-content::-webkit-scrollbar{
  width:10px;
}

.mission-modal-content::-webkit-scrollbar-track{
  background:rgba(255,255,255,0.05);
}

.mission-modal-content::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, var(--accent-1), var(--accent-2));
  border-radius:10px;
}

.mission-modal-close{
  position:absolute;
  top:14px;
  right:16px;
  z-index:2;

  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(10,12,14,0.86);
  color:white;
  font-size:32px;
  line-height:1;
  cursor:pointer;
  transition:0.2s ease;
}

.mission-modal-close:hover,
.mission-modal-close:focus-visible{
  background:var(--accent-1);
  color:#021014;
  outline:none;
}

.mission-modal-hero{
  height:300px;
  background:#0b0d0f;
  border-bottom:1px solid rgba(255,255,255,0.06);
}

.mission-modal-hero img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.mission-modal-body{
  padding:30px;
}

.mission-modal-meta{
  margin-bottom:14px;
}

.mission-modal-body h2{
  margin:0 0 16px;
  font-size:1.8rem;
  line-height:1.2;
}

.mission-modal-summary{
  margin-top:22px;
  color:var(--text);
}

@media(max-width:720px){
  .mission-event-row{
    grid-template-columns:1fr;
    gap:8px;
    padding:18px;
  }

  .mission-event-action{
    width:max-content;
  }

  .mission-modal-backdrop{
    padding:12px;
  }

  .mission-modal,
  .mission-modal-content{
    max-height:92vh;
  }

  .mission-modal-hero{
    height:190px;
  }

  .mission-modal-body{
    padding:22px;
  }

  .mission-modal-body h2{
    font-size:1.38rem;
  }
}
/* Lista eventi Mission Log */

.mission-event-list{
  display:grid;
  gap:14px;
}

.mission-event-row{
  width:100%;
  display:grid;
  grid-template-columns:140px 1fr 120px;
  gap:18px;
  align-items:center;

  padding:18px 22px;

  border:1px solid rgba(255,255,255,0.06);
  border-radius:16px;

  background:rgba(22,24,26,0.9);
  color:var(--text);

  font-family:'Montserrat', sans-serif;
  text-align:left;

  cursor:pointer;
  transition:0.25s ease;
}

.mission-event-row:hover{
  transform:translateY(-3px);
  border-color:rgba(0,217,255,0.35);
  box-shadow:0 0 22px rgba(0,217,255,0.16);
}

.mission-event-date{
  color:var(--accent-1);
  font-weight:800;
  font-size:0.9rem;
}

.mission-event-title{
  font-weight:800;
  font-size:1.05rem;
}

.mission-event-theatre{
  justify-self:end;
  color:var(--muted);
  font-weight:700;
  font-size:0.85rem;
}

/* Popup */

.mission-modal-backdrop{
  position:fixed;
  inset:0;
  z-index:99999;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:24px;
  background:rgba(0,0,0,0.78);
  backdrop-filter:blur(6px);
}

.mission-modal-backdrop[hidden]{
  display:none;
}

.mission-modal{
  width:min(1000px, 94vw);
  max-height:88vh;
  overflow:auto;

  background:rgba(22,24,26,0.96);
  border:1px solid rgba(0,217,255,0.22);
  border-radius:18px;
  box-shadow:0 0 40px rgba(0,217,255,0.18);

  position:relative;
}

.mission-modal-close{
  position:absolute;
  top:12px;
  right:16px;
  z-index:2;

  border:none;
  background:none;
  color:white;

  font-size:34px;
  cursor:pointer;
}

.mission-modal-media{
  max-height:340px;
  overflow:hidden;
  background:#0b0d0f;
  border-bottom:1px solid rgba(255,255,255,0.06);
}

.mission-modal-media img{
  width:100%;
  max-height:340px;
  object-fit:contain;
  display:block;
}

.mission-modal-body{
  padding:28px;
}

.mission-modal-body h2{
  margin:8px 0 14px;
}

.mission-modal-meta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:22px;
  color:var(--muted);
  font-weight:700;
}

body.modal-open{
  overflow:hidden;
}

@media(max-width:640px){
  .mission-event-row{
    grid-template-columns:1fr;
    gap:8px;
  }

  .mission-event-theatre{
    justify-self:start;
  }

  .mission-modal-body{
    padding:22px;
  }
}

/* ==========================================================
   FDVS Mission Log - Uniform UI polish
========================================================== */

/* Scrollbar popup stile sito */

.mission-modal,
.mission-modal-content{
  scrollbar-width:thin;
  scrollbar-color:var(--accent-1) rgba(255,255,255,0.04);
}

.mission-modal::-webkit-scrollbar,
.mission-modal-content::-webkit-scrollbar{
  width:10px;
}

.mission-modal::-webkit-scrollbar-track,
.mission-modal-content::-webkit-scrollbar-track{
  background:rgba(255,255,255,0.04);
  border-radius:10px;
}

.mission-modal::-webkit-scrollbar-thumb,
.mission-modal-content::-webkit-scrollbar-thumb{
  background:linear-gradient(
    180deg,
    var(--accent-1),
    var(--accent-2)
  );

  border-radius:10px;

  border:2px solid rgba(22,24,26,0.96);

  box-shadow:0 0 18px rgba(0,217,255,0.22);
}

.mission-modal::-webkit-scrollbar-thumb:hover,
.mission-modal-content::-webkit-scrollbar-thumb:hover{
  background:var(--accent-1);
  box-shadow:0 0 24px rgba(0,217,255,0.45);
}

/* Lista missioni più coerente */

.mission-event-index{
  background:var(--card-bg-unified);
  border:1px solid rgba(255,255,255,0.05);
  box-shadow:var(--shadow);
}

.mission-event-row{
  position:relative;

  background:transparent;

  border:1px solid rgba(255,255,255,0.04);

  box-shadow:none;

  overflow:hidden;
}

.mission-event-row::before{
  content:"";

  position:absolute;

  left:18px;
  right:18px;
  top:0;

  height:1px;

  background:linear-gradient(
    90deg,
    transparent,
    rgba(0,217,255,0.7),
    transparent
  );

  opacity:0.35;
}

.mission-event-row:hover{
  transform:translateY(-3px) scale(1.01);

  border-color:rgba(0,217,255,0.38);

  box-shadow:
    0 0 24px rgba(0,217,255,0.14),
    0 10px 28px rgba(0,0,0,0.35);
}

/* Data */

.mission-event-date{
  color:var(--accent-1);

  font-weight:800;

  letter-spacing:0.05em;

  text-shadow:0 0 12px rgba(0,217,255,0.22);
}

/* Teatro */

.mission-event-theatre{
  padding:8px 12px;

  border-radius:999px;

  border:1px solid rgba(0,217,255,0.16);

  background:rgba(0,217,255,0.05);

  color:var(--accent-1);

  font-size:0.72rem;

  letter-spacing:0.08em;

  text-transform:uppercase;
}

/* Popup */

.mission-modal{
  background:
    radial-gradient(
      circle at top left,
      rgba(0,217,255,0.08),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      rgba(22,24,26,0.98),
      rgba(12,14,16,0.98)
    );

  border:1px solid rgba(0,217,255,0.24);

  box-shadow:
    0 0 38px rgba(0,217,255,0.14),
    0 18px 44px rgba(0,0,0,0.55);
}

/* Header popup */

.mission-modal-body h2{
  font-size:2rem;

  line-height:1.15;

  margin-bottom:18px;
}

/* Meta popup */

.mission-modal-meta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;

  margin-bottom:24px;
}

.mission-modal-meta span{
  padding:8px 12px;

  border-radius:999px;

  background:rgba(0,217,255,0.06);

  border:1px solid rgba(0,217,255,0.16);

  color:var(--accent-1);

  font-size:0.78rem;

  font-weight:700;
}

/* Debriefing */

.mission-summary{
  color:var(--text);

  line-height:1.9;
}

.mission-heading{
  color:var(--accent-1);

  text-shadow:0 0 12px rgba(0,217,255,0.18);
}

/* Close button */

.mission-modal-close{
  width:44px;
  height:44px;

  border-radius:50%;

  background:rgba(10,12,14,0.82);

  border:1px solid rgba(255,255,255,0.08);

  transition:0.22s ease;
}

.mission-modal-close:hover{
  background:var(--accent-1);

  color:#021014;

  box-shadow:0 0 22px rgba(0,217,255,0.45);
}

/* ==========================================================
   Mission headings
========================================================== */

.mission-heading{
  display:block;

  margin:
    34px 0 18px;

  color:var(--accent-1);

  font-size:1.45rem;
  font-weight:800;

  letter-spacing:0.04em;

  text-shadow:
    0 0 16px rgba(0,217,255,0.16);
}

.mission-subheading{
  display:block;

  margin:
    24px 0 12px;

  color:#d7f7ff;

  font-size:1.05rem;
  font-weight:700;

  letter-spacing:0.03em;

  opacity:0.95;
}