/* ==========================================================
   Fly Salami — Custom Theme  (v7)
   Peach + Aubergine palette. Leaflet-safe. Table-safe.
   ========================================================== */

@import url("https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css");

/* ----------------------------------------------------------
   1. DESIGN TOKENS
   ---------------------------------------------------------- */
:root {
  --fs-peach:          #FFCBA4;
  --fs-peach-deep:     #FF8C69;
  --fs-peach-faint:    #FFF3EB;
  --fs-aubergine:      #2D0040;
  --fs-aubergine-mid:  #4B0073;
  --fs-aubergine-light:#EDE0F4;
  --fs-text-light:     #FFE8D6;
  --fs-text-dark:      #2D0040;
  --fs-border:         #D4A0E8;
}

/* ----------------------------------------------------------
   2. BASE — body only, no pseudo-element overlay (breaks maps)
   ---------------------------------------------------------- */
body {
  background-color: var(--fs-peach-faint) !important;
  color: var(--fs-text-dark) !important;
}

/* ----------------------------------------------------------
   3. NAVBAR (main phpVMS nav)
   ---------------------------------------------------------- */
nav.navbar,
.navbar {
  background: var(--fs-aubergine) !important;
  padding-top:    0.4rem !important;
  padding-bottom: 0.4rem !important;
  padding-left:   1rem   !important;
  padding-right:  1rem   !important;
  border-bottom: 1px solid var(--fs-aubergine-mid) !important;
}

.navbar-nav,
.navbar-nav .nav-item,
.navbar > .container,
.navbar > .container-fluid {
  gap: 0 !important;
}

.navbar-brand {
  color: var(--fs-peach) !important;
  font-weight: 700;
  font-size: 1.15rem !important;
  letter-spacing: 0.01em !important;
}
.navbar-brand:hover { color: var(--fs-peach-deep) !important; }

.nav-link {
  color:        var(--fs-text-light) !important;
  font-size:    0.875rem !important;
  padding-left: 0.7rem  !important;
  padding-right:0.7rem  !important;
  position:     relative !important;
}
.navbar-nav .nav-link {
  padding-top:    0.5rem !important;
  padding-bottom: 0.5rem !important;
}
.nav-link:hover,
.nav-link.active { color: var(--fs-peach-deep) !important; }

.nav-link.active::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0.7rem; right: 0.7rem;
  height: 2px;
  background: var(--fs-peach-deep);
  border-radius: 2px 2px 0 0;
}

.navbar-toggler-icon { filter: invert(1); }

/* ----------------------------------------------------------
   4. DROPDOWN
   ---------------------------------------------------------- */
.dropdown-menu {
  background-color: var(--fs-aubergine) !important;
  border-color:     var(--fs-aubergine-mid) !important;
  box-shadow: 0 4px 12px rgba(45,0,64,.35) !important;
}
.dropdown-item { color: var(--fs-text-light) !important; }
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--fs-aubergine-mid) !important;
  color: var(--fs-peach) !important;
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--fs-aubergine-mid) !important;
  color: var(--fs-peach-deep) !important;
}
.dropdown-divider   { border-top-color: var(--fs-aubergine-mid) !important; }
.dropdown-toggle::after { border-top-color: var(--fs-text-light) !important; }
.dropdown-header {
  color:           var(--fs-peach) !important;
  font-size:       0.7rem;
  letter-spacing:  0.05em;
  text-transform:  uppercase;
}

/* ----------------------------------------------------------
   5. CARDS  (protected blocks listed at end for leaflet cards)
   ---------------------------------------------------------- */
.card {
  border-color: var(--fs-border) !important;
  border:       0.5px solid var(--fs-border) !important;
  background:   rgba(255,243,235,.92) !important;
  color:        var(--fs-text-dark) !important;
  border-radius:12px !important;
  box-shadow:   0 2px 8px rgba(45,0,64,.08) !important;
  padding:      0 !important;
  /* NO transition:all here — it cascades into leaflet and breaks tile opacity */
}
/* Card body: no !important so Bootstrap p-0 on the map card-body still works */
.card-body { padding: 1.1rem 1.25rem; }

.card-header {
  background:    var(--fs-aubergine-light) !important;
  color:         var(--fs-aubergine-mid) !important;
  border-bottom-color: var(--fs-border) !important;
  border-left:   3px solid var(--fs-peach-deep) !important;
  border-radius: 12px 12px 0 0 !important;
  padding:       0.65rem 1.1rem !important;
  transition:    all 150ms ease !important;
}
.card-header h5,
.card-title  { color: var(--fs-aubergine-mid) !important; }

.card-footer {
  border-radius: 0 0 12px 12px !important;
  background:    rgba(237,224,244,.40) !important;
  border-top-color: var(--fs-border) !important;
}

/* Card links — only non-leaflet cards */
.card:not(:has(.leaflet-container)) a {
  color: var(--fs-aubergine-mid) !important;
}
.card:not(:has(.leaflet-container)) a:hover {
  color: var(--fs-peach-deep) !important;
}

/* ----------------------------------------------------------
   6. BACKGROUND UTILITIES
   ---------------------------------------------------------- */
.bg-white {
  background-color: rgba(255,243,235,.95) !important;
  color: var(--fs-text-dark) !important;
}
.bg-light {
  background-color: var(--fs-aubergine-light) !important;
  color: var(--fs-text-dark) !important;
}

/* ----------------------------------------------------------
   7. BUTTONS
   ---------------------------------------------------------- */
.btn { transition: all 150ms ease !important; }
.btn:active { transform: scale(0.97) !important; }

.btn-primary {
  background:   var(--fs-peach-deep) !important;
  border-color: var(--fs-peach-deep) !important;
  color:        var(--fs-aubergine) !important;
  font-weight:  600;
}
.btn-primary:hover {
  background:   var(--fs-peach) !important;
  border-color: var(--fs-peach) !important;
}
.btn-secondary {
  border-color: var(--fs-aubergine-mid) !important;
  color:        var(--fs-aubergine-mid) !important;
  background:   transparent !important;
}
.btn-secondary:hover { background: var(--fs-aubergine-light) !important; }
.btn-info {
  background:   var(--fs-aubergine-mid) !important;
  border-color: var(--fs-aubergine-mid) !important;
  color: #fff !important;
}

/* ----------------------------------------------------------
   8. TABLES
   ---------------------------------------------------------- */
.table {
  border-collapse: separate !important;
  border-spacing:  0 !important;
}
.table thead th {
  background:      var(--fs-aubergine-light) !important;
  color:           var(--fs-aubergine) !important;
  border-color:    var(--fs-border) !important;
  border-bottom:   2px solid var(--fs-aubergine-mid) !important;
  border-top:      none !important;
  font-size:       0.8rem !important;
  letter-spacing:  0.04em !important;
  text-transform:  uppercase !important;
  padding:         0.75rem 1rem !important;
  transition:      all 150ms ease !important;
}
.table > thead { border-bottom: none !important; }
/* Apply padding only to regular tables, avoid blowing up small utility tables */
.table:not(.table-sm) td {
  padding:        0.7rem 1rem !important;
}
.table td {
  vertical-align: middle !important;
  border-color:   var(--fs-border) !important;
  transition:     all 150ms ease !important;
  word-break:     break-word !important;
  white-space:    normal !important;
}
.table th { border-color: var(--fs-border) !important; }
.table > :not(caption) > * > * { border-bottom-color: var(--fs-border) !important; }
.table-striped tr:nth-of-type(odd) { background: rgba(255,203,164,.10) !important; }
.table tbody tr { transition: background 120ms ease !important; }
.table tbody tr:hover { background: rgba(255,140,105,.10) !important; }

/* ----------------------------------------------------------
   9. BADGES
   ---------------------------------------------------------- */
.badge-primary,
.badge.bg-primary { background: var(--fs-peach-deep) !important; color: var(--fs-aubergine) !important; }
.badge-secondary   { background: var(--fs-aubergine-light) !important; color: var(--fs-aubergine-mid) !important; }
.badge-info        { background: var(--fs-aubergine-mid) !important; color: #fff !important; }

/* ----------------------------------------------------------
   10. ALERTS
   ---------------------------------------------------------- */
.alert-primary {
  background:   var(--fs-peach-faint) !important;
  border-color: var(--fs-peach) !important;
  color:        var(--fs-aubergine) !important;
}
.alert-info {
  background:   var(--fs-aubergine-light) !important;
  border-color: var(--fs-border) !important;
  color:        var(--fs-aubergine-mid) !important;
}

/* ----------------------------------------------------------
   11. FORMS
   ---------------------------------------------------------- */
label { color: var(--fs-aubergine-mid) !important; }

.form-control,
.form-select,
.select2-container .select2-selection {
  background-color: rgba(255,243,235,.75) !important;
  border-color:     var(--fs-border) !important;
  color:            var(--fs-text-dark) !important;
  transition:       all 150ms ease !important;
}
.form-control:focus,
.form-select:focus {
  background-color: rgba(255,243,235,.95) !important;
  border-color:     var(--fs-peach-deep) !important;
  box-shadow: 0 0 0 0.2rem rgba(255,140,105,.25) !important;
}

/* ----------------------------------------------------------
   12. PAGINATION
   ---------------------------------------------------------- */
.page-link,
.pag-items {
  color:        var(--fs-aubergine-mid) !important;
  border-color: var(--fs-border) !important;
  transition:   all 150ms ease !important;
}
.page-link:hover,
.pag-items:hover { background: var(--fs-aubergine-light) !important; }
.page-item.active .page-link,
.pag-items-curr {
  background:   var(--fs-aubergine-mid) !important;
  border-color: var(--fs-aubergine-mid) !important;
  color: #fff !important;
}

/* ----------------------------------------------------------
   13. CAROUSEL
   ---------------------------------------------------------- */
.carousel-caption {
  background:    rgba(45,0,64,.6) !important;
  border-radius: 6px;
  padding:       0.75rem 1rem !important;
}
.carousel-indicators li,
.carousel-indicators button { background-color: var(--fs-peach) !important; }

/* ----------------------------------------------------------
   14. STAT TILES  (dashboard icon bar — icons.blade.php)
       Uses explicit .stat-tile class only. No broad selectors.
   ---------------------------------------------------------- */
.stat-tile {
  border-radius: 10px !important;
  border:        0.5px solid var(--fs-border) !important;
  background:    rgba(237,224,244,.60) !important;
  padding:       0.6rem 1rem !important;
  transition:    background 150ms ease !important;
}
.stat-tile:hover { background: rgba(237,224,244,.90) !important; }

/* ----------------------------------------------------------
   15. FOOTER
   ---------------------------------------------------------- */
footer,
.footer,
#footer {
  background: var(--fs-aubergine) !important;
  color:      var(--fs-text-light) !important;
  padding:    1rem !important;
}
footer a,
#footer a { color: var(--fs-peach) !important; }
footer a:hover,
#footer a:hover { color: var(--fs-peach-deep) !important; }

#footer .card,
footer .card {
  border-radius: 0 !important;
  box-shadow:    none !important;
  border:        none !important;
  border-top:    1px solid var(--fs-aubergine-mid) !important;
  background:    transparent !important;
}
#footer .card-header,
footer .card-header {
  border-left:   none !important;
  border-radius: 0 !important;
  background:    transparent !important;
  border-bottom: none !important;
}

/* Footer 3-column bottom bar */
.fs-footer-bar {
  background:   var(--fs-aubergine) !important;
  color:        var(--fs-text-light) !important;
  border-top:   1px solid var(--fs-aubergine-mid) !important;
  font-size:    0.8rem !important;
  padding:      0.85rem 1.25rem !important;
  align-items:  center !important;
}
.fs-footer-bar a        { color: var(--fs-peach) !important; text-decoration: none !important; }
.fs-footer-bar a:hover  { color: var(--fs-peach-deep) !important; text-decoration: underline !important; }

/* ----------------------------------------------------------
   16. DISPO NAVBAR  (#Dispo_NavBar — secondary nav bar)
   ---------------------------------------------------------- */
#Dispo_NavBar {
  background:     var(--fs-aubergine) !important;
  border-bottom:  1px solid var(--fs-aubergine-mid) !important;
  padding-top:    0 !important;
  padding-bottom: 0.35rem !important;
  margin-top:     0 !important;
}
#Dispo_NavBar .container-fluid {
  padding-left:  1rem !important;
  padding-right: 1rem !important;
}
#Dispo_NavBar .navbar-brand {
  padding-top:    0.35rem !important;
  padding-bottom: 0.35rem !important;
  margin-right:   1.5rem !important;
  font-size:      1.1rem !important;
  font-weight:    700 !important;
  color:          var(--fs-peach) !important;
  letter-spacing: 0.02em !important;
}
#Dispo_NavBar .img-mh30 { max-height: 30px !important; width: auto !important; }
#Dispo_NavBar .navbar-toggler {
  border-color: var(--fs-aubergine-mid) !important;
  color:        var(--fs-text-light) !important;
  padding:      0.25rem 0.5rem !important;
}
#Dispo_NavBar .navbar-toggler i { color: var(--fs-peach) !important; font-size: 1.1rem !important; }
#Dispo_NavBar .navbar-nav   { align-items: center !important; gap: 0.1rem !important; }
#Dispo_NavBar .nav-link {
  color:          var(--fs-text-light) !important;
  font-size:      0.92rem !important;
  letter-spacing: 0.01em !important;
  padding:        0.55rem 0.7rem !important;
  border-radius:  6px !important;
  position:       relative !important;
  transition:     color 150ms ease, background 150ms ease !important;
}
#Dispo_NavBar .nav-link:hover {
  color:       var(--fs-peach) !important;
  background:  rgba(255,203,164,.10) !important;
}
#Dispo_NavBar .nav-link.active {
  color:       var(--fs-peach-deep) !important;
  background:  rgba(255,140,105,.12) !important;
}
#Dispo_NavBar .nav-link.active::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important; left: 0.7rem !important; right: 0.7rem !important;
  height: 2px !important;
  background:    var(--fs-peach-deep) !important;
  border-radius: 2px 2px 0 0 !important;
}
#Dispo_NavBar .dropdown-toggle::after { border-top-color: var(--fs-text-light) !important; opacity: 0.7 !important; }
#Dispo_NavBar .dropdown-menu {
  background:   var(--fs-aubergine) !important;
  border:       0.5px solid var(--fs-aubergine-mid) !important;
  border-radius:8px !important;
  box-shadow:   0 6px 20px rgba(45,0,64,.40) !important;
  padding:      0.35rem !important;
  margin-top:   0.25rem !important;
  min-width:    180px !important;
}
#Dispo_NavBar .dropdown-item {
  color:         var(--fs-text-light) !important;
  font-size:     0.9rem !important;
  border-radius: 6px !important;
  padding:       0.45rem 0.85rem !important;
  transition:    background 120ms ease, color 120ms ease !important;
}
#Dispo_NavBar .dropdown-item:hover,
#Dispo_NavBar .dropdown-item:focus {
  background: rgba(255,203,164,.14) !important;
  color:      var(--fs-peach) !important;
}
#Dispo_NavBar .dropdown-item.active,
#Dispo_NavBar .dropdown-item:active {
  background: var(--fs-aubergine-mid) !important;
  color:      var(--fs-peach-deep) !important;
}
#Dispo_NavBar .dropdown-divider {
  border-color: var(--fs-aubergine-mid) !important;
  margin:       0.25rem 0.5rem !important;
  opacity:      0.5 !important;
}
#Dispo_NavBar .dropdown-header {
  color:          var(--fs-peach) !important;
  font-size:      0.7rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding:        0.35rem 0.85rem 0.2rem !important;
}

/* ----------------------------------------------------------
   17. METAR/TAF embed
   ---------------------------------------------------------- */
#metartaf-DispoThM {
  background-color: var(--fs-aubergine) !important;
  border-radius:    0 0 10px 10px !important;
  padding:          0.75rem 1rem !important;
  display:          block !important;
}
.card:has(#metartaf-DispoThM) {
  overflow:      hidden !important;
  border-radius: 12px !important;
  border:        0.5px solid var(--fs-border) !important;
}
.card:has(#metartaf-DispoThM) .card-header {
  background:    var(--fs-aubergine) !important;
  color:         var(--fs-text-light) !important;
  border-bottom: 1px solid var(--fs-aubergine-mid) !important;
  border-left:   3px solid var(--fs-peach-deep) !important;
  padding:       0.65rem 1rem !important;
  border-radius: 11px 11px 0 0 !important;
}
.card:has(#metartaf-DispoThM) .card-header * { color: var(--fs-text-light) !important; }
.card-body:has(#metartaf-DispoThM)           { background: var(--fs-aubergine) !important; padding: 0 !important; }

/* ----------------------------------------------------------
   18. LEAFLET MAP — fully isolated, zero interference
   ---------------------------------------------------------- */

/*
  #live-map-card is the outer Bootstrap .card wrapping the live map.
  Bootstrap sets overflow:hidden on cards with border-radius, which clips
  Leaflet's absolutely-positioned tile panes — making the map invisible.
  We target this card by its explicit ID (set in salami/widgets/live_map.blade.php)
  so the fix is applied on page load, BEFORE Leaflet initializes.
*/
#live-map-card {
  overflow:      visible !important;  /* critical — do NOT change to hidden */
  background:    transparent !important;
  border-radius: 12px !important;
}
#live-map-card .card-header {
  border-radius: 12px 12px 0 0 !important;
}

/* #cardBodyMap: overflow:hidden here clips rounded corners at the bottom
   AND traps the map-info-box rivets template inside the map area
   so it can't bleed out into the page below the card */
/* #cardBodyMap */
#cardBodyMap {
  padding:       0 !important;
  border-radius: 0 0 12px 12px !important;
  position:      relative !important;
}

/* #map: position:relative is required by Leaflet so it can correctly
   anchor all its internal absolutely-positioned panes (tile-pane,
   overlay-pane, shadow-pane, etc.) */
#map {
  position: relative !important;
}

/* The Leaflet container rendered inside #map */
.leaflet-container {
  background-color: #e0d8ea !important;
}

/* Tile images — never apply any filter or hide them */
.leaflet-tile-pane img,
.leaflet-tile,
.leaflet-tile-container img {
  filter:     none !important;
  opacity:    1    !important;
  visibility: visible !important;
  display:    block !important;
  max-width:  none !important;
}

/* Flight route SVG lines */
.leaflet-pane > svg path.leaflet-interactive {
  fill:   none !important;
  stroke: var(--fs-peach-deep) !important;
}

/* Zoom control */
.leaflet-control-zoom {
  border:        0.5px solid var(--fs-border) !important;
  border-radius: 8px !important;
  overflow:      hidden !important;
}
.leaflet-control-zoom a {
  background:         var(--fs-aubergine) !important;
  color:              var(--fs-peach) !important;
  border-bottom-color:var(--fs-aubergine-mid) !important;
  font-weight:        500 !important;
  transition:         background 150ms ease !important;
}
.leaflet-control-zoom a:hover {
  background: var(--fs-aubergine-mid) !important;
  color:      var(--fs-peach-deep) !important;
}

/* Attribution bar */
.leaflet-control-attribution {
  background:    rgba(45,0,64,.75) !important;
  color:         var(--fs-text-light) !important;
  font-size:     0.7rem !important;
  border-radius: 6px 0 0 0 !important;
}
.leaflet-control-attribution a { color: var(--fs-peach) !important; }

/* Popups */
.leaflet-popup-content-wrapper {
  background:    var(--fs-aubergine) !important;
  color:         var(--fs-text-light) !important;
  border:        0.5px solid var(--fs-aubergine-mid) !important;
  border-radius: 8px !important;
  box-shadow:    0 4px 14px rgba(45,0,64,.45) !important;
}
.leaflet-popup-tip         { background: var(--fs-aubergine) !important; }
.leaflet-popup-content a   { color: var(--fs-peach) !important; }

/* ----------------------------------------------------------
   19. LOGO IMAGES — no colour filters
       Targets img tags inside logo wrappers by pattern.
   ---------------------------------------------------------- */
img[src*="logo_ivao"],
img[src*="logo_vatsim"],
img[src*="logo_ivao_partner"],
img[src*="logo_ivao_main"],
.card-img {
  filter: none !important;
}

/* Avatar images — very subtle sepia only */
.card .img-mh80 { filter: sepia(0.08) !important; }

/* Ensure generic img.img-fluid inside col gets no filter */
.col img.img-fluid { filter: none !important; }