/* ==========================================
   MODERN UI + DARK MODE (body.dark-mode)
   ========================================== */

/* 1) Design tokens */
:root{
  --bg: #f6f7fb;
  --surface: #ffffff;
  --surface-2: #f2f4f8;

  --text: #0f172a;
  --muted: #475569;

  --border: rgba(15, 23, 42, .10);
  --shadow: 0 12px 30px rgba(2, 6, 23, .08);

  --radius: 18px;
  --radius-sm: 14px;

  --ring: 0 0 0 4px rgba(59,130,246,.18);
}

body.dark-mode{
  --bg: #0b1220;
  --surface: #0f172a;
  --surface-2: #111c33;

  --text: #e5e7eb;
  --muted: #a8b3cf;

  --border: rgba(226,232,240,.10);
  --shadow: 0 18px 40px rgba(0,0,0,.40);

  --ring: 0 0 0 4px rgba(99,102,241,.25);
}

/* 2) Base */
body{
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a{ color: inherit; }
a:hover{ text-decoration: none; }

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

/* 3) Cards: look moderno ovunque */
.card{
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.card-header{
  background: transparent;
  border-bottom: 1px solid var(--border);
  padding: 1rem 1.25rem;
}

.card-title{
  font-weight: 800;
  letter-spacing: -.01em;
}

.card-body{
  padding: 1.25rem;
}

/* Hover “premium” (disattivabile se non ti piace) */
.card:hover{
  transform: translateY(-1px);
  transition: transform .18s ease, box-shadow .18s ease;
}

/* 4) Bottoni più moderni */
.btn{
  border-radius: 999px;
  padding: .55rem 1rem;
  font-weight: 700;
}

.btn:focus{
  box-shadow: var(--ring) !important;
}

/* 5) HERO in alto (Nuovo pilota / Coming soon) */
.home-hero{
  position: relative;
  height: 100%;
}

.home-hero .card-body{
  padding: 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.home-hero-top{
  display:flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}

.home-kicker{
  letter-spacing: .14em;
  font-size: .75rem;
  font-weight: 900;
  opacity: .9;
}

.home-title{
  margin: .25rem 0 .5rem;
  font-size: 1.65rem;
  line-height: 1.12;
}

.home-sub{
  font-size: .98rem;
  color: var(--muted);
}

.home-steps{
  display:grid;
  grid-template-columns: 1fr;
  gap: .65rem;
  margin: 1.25rem 0 1.35rem;
}

@media (min-width: 576px){
  .home-steps{ grid-template-columns: repeat(3, 1fr); }
}

.home-step{
  border-radius: var(--radius-sm);
  padding: .75rem;
  display:flex;
  align-items:center;
  gap: .75rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.home-step-ico{
  width: 30px;
  height: 30px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  font-weight: 900;
  background: rgba(0,0,0,.06);
}
body.dark-mode .home-step-ico{ background: rgba(255,255,255,.08); }

.home-hero-actions{
  margin-top: auto;
  display:flex;
  gap:.75rem;
  flex-wrap: wrap;
}

.home-badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.35rem .6rem;
  border-radius:999px;
  font-size:.82rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.home-badge-dot{
  width:8px; height:8px; border-radius:99px;
  background:#39d98a;
  box-shadow: 0 0 0 4px rgba(57,217,138,.20);
}

.home-stamp{
  position:absolute;
  top:14px; right:14px;
  transform: rotate(8deg);
  font-weight: 900;
  letter-spacing: .12em;
  font-size: .75rem;
  padding: .3rem .55rem;
  border-radius: 10px;
  background: rgba(0,0,0,.06);
  border: 1px dashed rgba(0,0,0,.15);
}
body.dark-mode .home-stamp{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}

/* 6) Eventi: trasformo la timeline in “cards grid” */
.timeline--modern .timeline__items{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
}

.timeline--modern .timeline__wrap:before,
.timeline--modern .timeline__item:before{
  display:none !important; /* via la “linea” verticale */
}

.timeline--modern .timeline__content{
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background: var(--surface);
  overflow: hidden;
}

.timeline--modern .timeline__content img{
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-sm);
}

/* 7) Mappe: bordi + altezze responsive */
#acarsmap,
#routemap1{
  border-radius: var(--radius);
  overflow: hidden;
}

@media (max-width: 576px){
  #acarsmap{ height: 380px !important; }
  #routemap1{ height: 320px !important; }
}

/* 8) “Latest activities” più pulito */
.timeline-1 li{
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  padding: .85rem 1rem;
  margin-bottom: .75rem;
  background: var(--surface);
}

/* 9) MODALI (bootstrap & simili) coerenti col dark-mode */
body.dark-mode .modal-content,
body.dark-mode .swal2-popup,
body.dark-mode .offcanvas{
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}

body.dark-mode .modal-header,
body.dark-mode .modal-footer{
  border-color: var(--border);
}

body.dark-mode .dropdown-menu{
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}