/* Google Fonts loaded via <link> in index.php — @import removed to avoid duplicate request */

/* === RESET & GLOBAL === */

* {

  box-sizing: border-box;

}



body {

  margin: 0;

  font-family: 'Poppins', sans-serif;

  background: linear-gradient(135deg, #003366, #0055aa);

  color: #fff;

  min-height: 100vh;
 overflow-x: hidden !important;

}
/* === SCROLLBAR PERSONALIZAT - STYLE 6 === */
#style-6::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
  border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}

#style-6::-webkit-scrollbar {
	width: 10px;
	background-color: #F5F5F5;
  border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}

#style-6::-webkit-scrollbar-thumb {
	background-color: #F90;
  border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	background-image: -webkit-linear-gradient(
		45deg,
		rgba(255, 255, 255, 0.2) 25%,
		transparent 25%,
		transparent 50%,
		rgba(255, 255, 255, 0.2) 50%,
		rgba(255, 255, 255, 0.2) 75%,
		transparent 75%,
		transparent

	);
}


/* === HEADER === */

.main-header {

  background: rgba(0, 0, 0, 0.4);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 14px 28px;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);

  position: sticky;

  top: 0;

  z-index: 1000;

  border-bottom: 1px solid rgba(255, 255, 255, 0.15);

}



.header-logo img {

  height: 38px;

  width: auto;

}
.header-link {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-link .logo-info {
  height: 62px;
  width: auto;
  transition: transform 0.3s ease, filter 0.3s ease;
  cursor: pointer;
}

.header-link .logo-info:hover {
  transform: scale(1.08);
  filter: brightness(1.15);
}




.topbar .linie-curenta span {

  font-size: 1.1rem;

  font-weight: 600;

  color: #0053a5;

}



.topbar .linie-curenta .linie-id {

  display: inline-block;

  padding: 6px 20px;

  background: #FFD700;

  color: #000;

  border-radius: 8px;

  font-size: 1.5rem;

  font-weight: 800;

  min-width: 80px;

  text-align: center;

}



/* === LAYOUT === */

.container {
  display: grid;
  grid-template-columns: 320px 1fr;
  align-items: stretch;   /* 🟩 aliniează coloanele pe verticală */
  gap: 24px;
  padding: 20px;
}




@media (max-width: 1023px) {

  .container {

    display: block;

    padding: 12px;

  }

}



/* === SIDEBAR STAȚII === */

.linie-left {
  display: flex;
  flex-direction: column;
  gap: 16px;

  /* 🔧 nou: sincronizează înălțimea cu gridul */
  height: 100%;
  align-self: stretch;
  min-height: 400px;
  max-height: none;
  overflow-y: auto;

  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(15px);
  border-radius: 12px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}




.linie-switch {

  display: flex;

  gap: 10px;

}



.switch-btn {

  flex: 1;

  padding: 10px 12px;

  border: 0;

  background: rgba(255, 255, 255, 0.1);

  border-radius: 8px;

  cursor: pointer;

  font-weight: 600;

  font-size: 0.95rem;

  color: #fff;

  transition: all 0.2s ease;

}



.switch-btn.active {

  background: #FFD700;

  color: #000;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);

}



.switch-btn:hover {

  background: #FFD700;

  color: #000;

}



.linie-statii {

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.linie-statie {

  cursor: pointer;

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 10px 12px;

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

  border-radius: 10px;

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

  transition: all 0.25s ease;

  color: #fff;

}



.linie-statie:hover {

  background: rgba(255, 255, 255, 0.15);

  transform: translateX(5px);

}



.linie-statie.active {

  background: rgba(255, 215, 0, 0.8);

  color: #000;

  border: 1px solid #FFD700;

  font-weight: 600;

  box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);

}



.bulina {

  width: 12px;

  height: 12px;

  border-radius: 50%;

  background: #FFD700;

  border: 2px solid #fff;

}



/* === TABEL === */

.linie-content {

  display: flex;

  flex-direction: column;

  gap: 16px;

}



.linie-tabel table {

  width: 100%;

  border-collapse: collapse;

  background: rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(15px);

  border-radius: 12px;

  overflow: hidden;

  font-size: 0.8rem;

}



.linie-tabel th {

  background: rgba(255, 215, 0, 0.95);

  padding: 14px;

  font-weight: 700;

  text-align: center;

  color: #000;

}



.linie-tabel td {

  padding: 12px;

  text-align: center;

  color: #fff;

}



.linie-tabel tr:nth-child(even) td {

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

}



.linie-tabel tr:hover td {

  background: rgba(255, 255, 255, 0.2);

  transition: 0.25s;

}



/* === HARTA === */

.linie-transport {

  width: 100%;

  height: 65vh;

  border-radius: 12px;

  overflow: hidden;

  background: rgba(0, 0, 0, 0.1);

  backdrop-filter: blur(10px);

  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);

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

}



/* .linie-transport height at ≤1023px: handled by full-screen block (calc(100dvh - 113px)) */





/* === SELECTOR LINII === */

.linie-selector {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-evenly;

  flex-direction: row;

  gap: 6px;

  align-items: flex-center;

  padding: 15px 130px;

  background: rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(10px);

  border-bottom: 1px solid rgba(255, 255, 255, 0.2);

}



.linie-btn {

  display: inline-flex;

  justify-content: center;

  align-items: center;

  width: 36px;

  height: 36px;

  color: #fff;

  font-weight: 700;

  font-size: 0.8rem;

  text-decoration: none;

  border-radius: 8px;

  transition: transform 0.2s ease, box-shadow 0.2s ease;

  backdrop-filter: blur(12px);

  background: rgba(255, 255, 255, 0.15);

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

}



.linie-btn:hover {

  transform: translateY(-3px);

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);

  background: #FFD700;

  color: #000;

}



.linie-btn.active {

  outline: 2px solid #FFD700;

  background: #FFD700;

  color: #000;

}



/* === FOOTER === */



.main-footer {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center; /* STP Timișoara centrat */
  gap: 12px;
  padding: 12px 20px;
  background: #222;
  color: #fff;
  font-size: 0.70rem;
  position: relative;
}

/* Linkul Preferințe cookie rămâne în dreapta */
.cookie-pref-link {
  position: absolute;
  right: 20px;
  color: #FFD700;
  text-decoration: underline dotted;
  font-weight: 600;
  cursor: pointer;
}


.main-footer span {

  cursor: help;

  opacity: 0.70;

  display: inline-block;

  margin: 0;

  padding: 0;

}



#linkedin-text {

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translateY(-50%) translateX(-48vw) scale(0);

  opacity: 0;

  color: #FFD700;

  font-weight: 300;
	letter-spacing: 0.4px;
opacity: 0.85;

  text-decoration: none;

  font-size: 0.70rem;

  transition: transform 0.6s ease, opacity 0.6s ease;

  white-space: nowrap;

}



#linkedin-text.visible {

  opacity: 1;

  transform: translateY(-50%) translateX(-48vw) scale(1);

}



/* === TOOLTIP LINKEDIN === */

#linkedin-text:hover {

  color: #fff;

}



#linkedin-text::after {

  content: 'Profil LinkedIn 🚀';

  position: absolute;

  left: 50%;

  bottom: 140%;

  transform: translateX(-50%);

  background: #FFD700;

  color: #000;

  padding: 6px 10px;

  border-radius: 6px;

  font-size: 0.7rem;
font-weight: 400;
letter-spacing: 0.3px;

  opacity: 0;

  pointer-events: none;

  white-space: nowrap;

  transition: opacity 0.3s ease, transform 0.3s ease;

}



#linkedin-text:hover::after {

  opacity: 1;

  transform: translateX(-50%) translateY(-4px);

}

/* === ICONIȚĂ LINIE - global === */
.topbar .linie-curenta img.linie-icon {
  width: 40px !important;
  height: auto !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.topbar .linie-curenta {
  display: flex;
  align-items: center;
  gap: 5px;
}


/* === ANIMAȚII === */

@keyframes slideToLeft {

  from {

    left: 50%;

    transform: translate(-50%, -50%);

    opacity: 0;

  }

  to {

    left: 20px;

    transform: translate(0, -50%);

    opacity: 1;

  }

}



.confetti {

  position: fixed;

  top: 0;

  border-radius: 50%;

  z-index: 9999;

  pointer-events: none;

}



/* === MISC === */

#station-title {
  color: #fff !important;
  background: rgba(0, 0, 0, 0.3);
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

@media (max-width: 1023px) {
  #station-title {
    text-align: center;
    font-size: 0.95rem;
    margin-top: 8px;
  }
}




.loading-spinner {

  display: flex;

  flex-direction: column;

  align-items: center;

  padding: 20px;

  opacity: 0.9;

}



.loading-spinner p {

  margin-top: 10px;

  font-size: 0.9rem;

  color: #ddd;

}



.spinner {

  width: 32px;

  height: 32px;

  border: 3px solid rgba(255, 255, 255, 0.3);

  border-top-color: #FFD700;

  border-radius: 50%;

  animation: spin 0.9s linear infinite;

}



@keyframes spin {

  to {

    transform: rotate(360deg);

  }

}



.linie-wrapper {

  max-width: 1600px;

  margin: 20px auto;

  padding: 20px;

  background: rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(10px);

  border-radius: 16px;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);

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

  font-size: 0.8rem;

}



@media (max-width: 1023px) {

  .linie-wrapper {

    padding: 12px;

    margin: 10px;

  }

}



/* 📱 MOBIL - ascunde totul în afară de header și hartă */

@media (max-width: 600px) {


  .main-header {

    flex-direction: row;

    justify-content: space-between;

    align-items: center;

    padding: 10px 14px;

    text-align: left;

  }

.main-footer {

  position: fixed;

  bottom: 0;

  left: 0;

  width: 100%;

}



/* .linie-transport height on mobile is controlled by the full-screen block below (calc(100dvh - 113px)) */
.topbar .linie-curenta img.linie-icon {
  width: 16px !important;        /* micșorează imaginea */
  height: auto !important;
  display: inline-block !important;
  vertical-align: middle !important; /* o aliniază frumos cu textul */
  margin-top: 0 !important;          /* ajustează dacă e nevoie */
  margin-bottom: 0 !important;
}
.topbar .linie-curenta {
  display: flex;
  align-items: center;
  gap: 5px;
}








  .header-logo img {

    height: 38px;

    width: auto;

  }



  .header-link a {

    font-size: 0.70rem;

    padding: 6px 8px;

    display: flex;

    align-items: center;

    gap: 6px;

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.15);

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

    color: #fff;

    font-weight: 600;

    width: auto;

    white-space: nowrap;

  }



  .header-link a svg {

    width: 16px;

    height: 16px;

    fill: currentColor;

    transition: transform 0.3s ease;

  }



  .header-link a:hover {

    background: #FFD700;

    color: #000;

  }



  .header-link a:hover svg {

    transform: translateX(3px);

  }



  .topbar,

  .linie-left,

  .linie-selector,

  .linie-wrapper h2,

  .linie-tabel,

  #station-title {

    display: none !important;

  }



  .container {

    display: block !important;

    padding: 0 !important;

  }



  html,

  body {

    height: auto;           /* ✅ permite înălțime flexibilă */

    overflow-y: auto;       /* ✅ permite scroll vertical */

    -webkit-overflow-scrolling: touch;

  }

/* toolbar-ul mobil este ascuns pe desktop via map-style.css (@media min-width: 1024px) */


}

.linie-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.3);  /* fundal transparent elegant */
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  margin-bottom: 0px;
}
body.dark .linie-header {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #020202;
}
.linie-header h2 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  color: #333;
}
body.dark .linie-header h2 {
  color: #0c0c0c;
}
.linie-header .linie-curenta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;    /* grow to fill remaining row space so the chain has a defined width */
  min-width: 0;      /* allow shrinking below content */
  overflow: hidden;  /* propagate clip down the chain */
}
.linie-header .linie-curenta span {
  font-weight: 600;
  color: #222;
}
.linie-header .linie-curenta span {
  font-weight: 600;
  color: #fff;
  font-size: 1rem;
}
.linie-header .linie-curenta .linie-id {
  background: rgba(255, 215, 0, 0.9);
  color:#fff;
  padding: 6px 14px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 1.1rem;
  min-width: 60px;
  text-align: center;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}
.linie-header #station-title {
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  margin: 0;
  flex: 1;
  text-align: right;
}
/* #station-title is intentionally hidden on mobile (≤600px) via display:none in the mobile block above */







/* ═══════════════════════════════════════════════════════════
   ALERT SYSTEM — replaces news ticker
   ═══════════════════════════════════════════════════════════ */

/* ── Outer container ── */
.linie-news {
  width: 100%;
  background: var(--panel-bg);
  backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass);
  border-radius: 12px;
  border: 1px solid var(--border-alert);
  box-shadow: var(--shadow-alert);
  overflow: visible;
}

/* ── Loading / error placeholder ── */
.ab-loading,
.ab-empty {
  padding: 12px 16px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.45);
  font-weight: 400;
}
.ab-empty--error { color: rgba(255,200,80,0.7); }

/* ── Bar header row ── */
.ab-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  min-height: 44px;
  cursor: pointer;
  transition: filter .2s ease;
}
.ab-header:hover {
  filter: brightness(1.08);
}
.ab-icon {
  font-size: 20px;
  color: #FFC107;
  flex: 0 0 auto;
  line-height: 1;
  filter: drop-shadow(0 0 5px rgba(255,193,7,.28));
}
.ab-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #FFFFFF;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: baseline;
}
.ab-count-badge {
  background: rgba(255,193,7,0.18);
  border: 1px solid rgba(255,193,7,0.45);
  color: #FFC107;
  font-family: 'Poppins', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
  flex-shrink: 0;
}
.ab-view-all {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.75);
  font-family: 'Poppins', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 4px 13px;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
}
.ab-view-all:hover {
  background: rgba(255,193,7,0.12);
  color: #FFC107;
  border-color: rgba(255,193,7,0.45);
}

/* ── Category row (desktop/tablet) ── */
.ab-cat-row {
  display: flex;
  flex-wrap: nowrap;    /* keep all cards on one row */
  align-items: stretch; /* equal card heights */
  gap: 10px;
  padding: 12px 14px 14px;
}
.ab-cat-group {
  flex: 1;              /* equal card widths, fill full bar */
  min-width: 80px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--alert-cat-bg);
  border: 1px solid var(--alert-cat-border);
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ab-cat-group:hover {
  border-color: var(--alert-cat-hover-border);
  box-shadow: 0 2px 14px rgba(0,0,0,0.20);
}
.ab-cat-label {
  display: flex;
  align-items: center;
  gap: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  color: var(--alert-cat-color);
  font-family: 'Poppins', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0;
  width: 100%;
  text-align: left;
  transition: color 0.15s;
}
.ab-cat-label:hover { color: var(--alert-cat-active); }
.ab-cat-icon {
  font-size: 0.9rem;
  line-height: 1;
  flex-shrink: 0;
}
.ab-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Line badges (shared: bar + panel + sheet) ── */
.ab-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.ab-badge {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 6px 14px;
  border-radius: 10px;
  border: none;
  outline: none;
  background-color: var(--badge-bg, #555);
  color: var(--badge-color, #fff);
  font-family: 'Poppins', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: filter 0.12s, transform 0.12s, box-shadow 0.12s;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  text-shadow: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.ab-badge:hover {
  filter: brightness(1.2);
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 4px 12px rgba(0,0,0,0.45);
}
.ab-badge:active { transform: translateY(0) scale(0.95); }
.ab-badge--selected {
  box-shadow: 0 0 0 2px #fff, 0 2px 10px rgba(0,0,0,0.4);
  filter: brightness(1.1);
}

/* ── Mobile: header + badge row ── */
.ab-mobile-header {
  display: none; /* shown only via mobile media query */
}
.ab-mobile-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #FFFFFF;
  overflow: hidden;
  display: flex;
  align-items: baseline;
}
.ab-mobile-count {
  background: rgba(255,208,0,0.16);
  border: 1px solid rgba(255,208,0,0.52);
  color: #FFD700;
  font-family: 'Poppins', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 20px;
  flex-shrink: 0;
}
.ab-mobile-chevron {
  font-size: 18px;
  color: rgba(255,255,255,.9);
  font-weight: 700;
  flex: 0 0 auto;
  line-height: 1;
  transition: transform 0.2s ease;
  display: inline-block;
}
.ab-mobile-chevron--open {
  transform: rotate(180deg);
  color: #FFFFFF;
}
/* ── Mobile alert bar: modern SVG chevron ── */
.ab-mobile-header .ab-mobile-chevron {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ab-mobile-header .ab-mobile-chevron svg {
  width: 23px;
  height: 23px;
  display: block;
  flex-shrink: 0;
}
body.touch-alert-ux .ab-mobile-header:active {
  filter: brightness(0.88);
}
/* ── Inline line list in alert bar header ── */
.ab-bar-label {
  flex: 0 0 auto;
  white-space: nowrap;
}
.ab-bar-lines {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #FFC107;
  font-weight: 700;
  margin-left: 0.25em;
}
.ab-mobile-cat-icon {
  font-size: 0.85rem;
  flex-shrink: 0;
  pointer-events: none;
  margin-right: 1px;
}
.ab-mobile-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 4px 14px 10px;
}
.ab-sep {
  color: rgba(255,255,255,0.35);
  font-size: 0.75rem;
  flex-shrink: 0;
  align-self: center;
  margin: 0 1px;
  user-select: none;
  pointer-events: none;
}

/* ── Mobile dropdown overlay (categorized line list) ── */
.ab-mobile-dropdown {
  position: fixed;
  /* top / left / right set by JS */
  z-index: 600;
  background: linear-gradient(160deg, rgba(8,14,42,0.97) 0%, rgba(3,8,24,0.99) 100%);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 0 0 14px 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.60), 0 4px 12px rgba(0,0,0,0.28);
  padding: 10px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  will-change: transform; /* iOS: keeps own CoreAnimation layer so z-index beats WebGL canvas / backdrop-filter siblings */
}
body.touch-alert-ux .ab-mobile-dropdown {
  border-radius: 0;
  border-left: none;
  border-right: none;
  box-shadow: 0 8px 28px rgba(0,0,0,0.50), 0 2px 8px rgba(0,0,0,0.22);
}
.ab-mobile-dropdown--open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.ab-dropdown-section {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ab-dropdown-label {
  font-family: 'Poppins', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.48);
  opacity: 1;
}
.ab-dropdown-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* ═══════════════════════════════════════════════════════════
   DETAIL PANEL — in-flow, inserted right after #alert-bar
   ═══════════════════════════════════════════════════════════ */

/* .ab-bar--panel-open removed — panel is now position:fixed, not connected to bar */

.ab-panel {
  /* Floating overlay — never in-flow, never pushes content */
  position: fixed;
  z-index: 500;
  /* top / left / right set dynamically by JS */
  background: linear-gradient(160deg, rgba(8,14,42,0.97) 0%, rgba(3,8,24,0.99) 100%);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.11);
  border-left: 3px solid var(--panel-accent, rgba(180,180,255,0.35));
  border-radius: 14px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.65), 0 2px 8px rgba(0,0,0,0.35);
  max-height: 440px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  will-change: transform; /* iOS: own CoreAnimation layer prevents squashing behind WebGL/backdrop-filter layers */
}
.ab-panel--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* Panel header: optional title (left) + close button (right) */
.ab-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 6px;
  position: sticky;
  top: 0;
  background: rgba(8,14,42,0.98);
  border-radius: 14px 14px 0 0;
  z-index: 1;
}
.ab-panel-title {
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 8px;
}
.ab-panel-close {
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.65);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 4px 9px;
  border-radius: 6px;
  transition: color 0.12s, background 0.12s;
  font-family: 'Poppins', sans-serif;
  line-height: 1;
}
.ab-panel-close:hover {
  color: #fff;
  background: rgba(255,255,255,0.16);
}

/* ── Alert cards ── */
.ab-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 12px 14px;
}
.ab-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: flex-start;
}
.ab-card-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ab-card-right {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  text-align: right;
  min-width: 110px;
  padding-top: 2px;
}
body.touch-alert-ux .ab-card {
  flex-direction: column;
  gap: 10px;
}
body.touch-alert-ux .ab-card-right {
  align-items: flex-start;
  text-align: left;
  min-width: 0;
  padding-top: 0;
}
.ab-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.ab-effects {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ab-effect {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255,255,255,0.82);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 5px;
  padding: 3px 9px;
  white-space: nowrap;
}
.ab-stop-badge {
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.78);
  font-size: 0.7rem;
  padding: 4px 9px;
  border-radius: 8px;
  font-weight: 600;
}
.ab-selected-notice {
  font-size: 0.7rem;
  font-weight: 700;
  color: #FFD700;
  background: rgba(255,215,0,0.1);
  border: 1px solid rgba(255,215,0,0.22);
  border-radius: 6px;
  padding: 4px 10px;
  align-self: flex-start;
}
.ab-card-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  line-height: 1.5;
}
.ab-dates {
  font-size: 0.73rem;
  color: rgba(255,255,255,0.55);
  font-weight: 500;
  line-height: 1.4;
}
.ab-days {
  font-size: 0.7rem;
  font-weight: 600;
}
.ab-days--urgent { color: #e31e25; }
.ab-days--warn   { color: #FFD700; }
.ab-days--ok     { color: rgba(255,255,255,0.7); }
.ab-days--muted  { color: rgba(255,255,255,0.32); }
.ab-desc p {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.65;
  margin: 0 0 4px;
}
.ab-cause {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.38);
  margin-top: 2px;
}
.ab-empty-filter {
  padding: 16px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.38);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE BOTTOM SHEET
   ═══════════════════════════════════════════════════════════ */
.ab-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1050;          /* above linie-header (1000) */
  background: linear-gradient(180deg, rgba(8,14,42,0.97) 0%, rgba(3,8,24,0.99) 100%);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-radius: 18px 18px 0 0;
  border-top: 1px solid rgba(255,255,255,0.11);
  box-shadow: 0 -10px 40px rgba(0,0,0,0.58), 0 -2px 8px rgba(0,0,0,0.26);
  max-height: 78vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32,0.72,0,1);
  will-change: transform;
}
.ab-sheet--open { transform: translateY(0); }
.ab-sheet-handle {
  width: 36px;
  height: 4px;
  background: rgba(255,255,255,0.25);
  border-radius: 2px;
  margin: 10px auto 0;
  flex-shrink: 0;
}
.ab-sheet-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.ab-sheet-back {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.6);
  font-family: 'Poppins', sans-serif;
  font-size: 0.72rem;
  cursor: pointer;
  padding: 0;
}
.ab-sheet-back:hover { color: #fff; }
.ab-sheet-title {
  flex: 1;
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  gap: 6px;
}
.ab-sheet-close {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 4px 6px;
  font-family: 'Poppins', sans-serif;
}
.ab-sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px 80px;
  scrollbar-width: none;
}
.ab-sheet-body::-webkit-scrollbar { display: none; }
.ab-sheet-cat {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.ab-sheet-cat:last-child { border-bottom: none; }
.ab-sheet-cat-label {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.6);
  font-family: 'Poppins', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0 0 6px;
  transition: color 0.12s;
}
.ab-sheet-cat-label:hover { color: #fff; }
.ab-sheet-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.ab-sheet-badges .ab-badge {
  font-size: 0.78rem;
  padding: 5px 10px;
  min-width: 36px;
}

/* ── Touch: compact badge sizing for the alert bar row ── */
body.touch-alert-ux .ab-mobile-row .ab-badge {
  padding: 4px 10px !important;
  font-size: 0.73rem !important;
  border-radius: 8px !important;
  min-width: 28px !important;
}



/* 📱📲 TABLETĂ LANDSCAPE — păstrează layout 2 coloane fără overflow */
@media (min-width: 901px) and (max-width: 1023px) {

  /* Micșorăm sidebarul ca să nu împingă harta în afară */
  .container {
    grid-template-columns: 260px 1fr !important;
    gap: 16px !important;
    padding: 16px !important;
  }

  .linie-left {
    max-height: calc(100vh - 120px);
  }

  /* Prevenim orice overflow orizontal pe body și html */
  html, body {
    overflow-x: hidden !important;
  }

  /* Dacă panoul de stație/alertă are lățime fixă, îi dăm 100% */
  .linie-header,
  .alert-box,
  #station-title {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Previne harta să depășească containerul */
  .linie-transport {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ✅ FIX: Prevenim extinderea elementelor pe tablete landscape */
@media (min-width: 901px) and (max-width: 1023px) {

  /* ✅ Header linie și stație */
  .linie-header {
    max-width: 100% !important;
    flex-wrap: wrap !important;   /* permite textului să treacă pe rândul 2 */
  }

  #station-title {
    max-width: 100% !important;
    white-space: normal !important;  /* permite textului lung să se rupă */
    text-align: right;
  }

  /* ✅ News ticker / alert box */
  .linie-news,
  .news-ticker,
  .news-text {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* ✅ Harta – blochează auto-lărgirea */
  .linie-transport {
    max-width: 100% !important;
    width: 100% !important;
  }
}




/* =======================================================
   ✅ COOKIE BANNER (MINIMAL, BOTTOM, CENTERED, GLASS UI)
======================================================= */
.cookie-bar {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  width: min(600px, 90vw);
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 14px;
  padding: 18px 20px;
  z-index: 9999;
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
  font-family: 'Poppins', sans-serif;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  text-align: left;
}

.cookie-bar.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.cookie-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 0.9rem;
  line-height: 1.45;
}

.cookie-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.cb-btn {
  appearance: none;
  border-radius: 10px;
  padding: 8px 16px;
  font-weight: 700;
  cursor: pointer;
  font-size: .85rem;
  border: 1px solid rgba(255,255,255,0.32);
  transition: all .2s ease;
}

.cb-accept {
  background: #FFD700;
  color: #000;
  border-color: #FFD700;
}

.cb-accept:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 14px rgba(255,215,0,0.35);
}

.cb-settings {
  background: transparent;
  color: #fff;
}

.cb-settings:hover {
  background: rgba(255,255,255,0.15);
}
/* Ascunde cookie bar pe mobil și tabletă */
@media (max-width: 1024px) {
    .cookie-bar {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* =====================================
   ✅ LEGAL MODAL (Politica + Termeni)
===================================== */
#legal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10050;
  display: none;
  opacity: 0;
  transition: opacity .25s ease;
}
#legal-overlay.visible {
  display: block;
  opacity: 1;
}

#legal-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -46%) scale(.98);
  width: min(760px, 92vw);
  max-height: min(78vh, 820px);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 16px;
  box-shadow: 0 14px 44px rgba(0,0,0,0.4);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: #fff;
  z-index: 10060;
  display: none;
  opacity: 0;
  transition: transform .28s ease, opacity .28s ease;
  font-family: 'Poppins', sans-serif;
}
#legal-modal.visible {
  display: block;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.lm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

.lm-title {
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 1.05rem;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
}

.lm-close {
  appearance: none;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 10px;
  transition: background .2s ease;
}
.lm-close:hover {
  background: rgba(255,255,255,0.12);
}

.lm-body {
  padding: 14px 16px 16px 16px;
  overflow-y: auto;
  max-height: calc(min(78vh, 820px) - 60px);
  font-size: 0.9rem;
  line-height: 1.6;
  color: #ddd;
}

.lm-body h3 {
  margin: 16px 0 8px;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}

.lm-body a {
  color: #FFD700;
  text-decoration: underline dotted;
}

.chip {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.15);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .3px;
  color: #fff;
}

/* ✅ Scrollbar dacă vrei vizual identic cu zona statii */
#legal-modal .lm-body#style-6::-webkit-scrollbar { width: 10px; }
#legal-modal .lm-body#style-6::-webkit-scrollbar-thumb {
  background-color: #F90;
  border-radius: 10px;
}

/* ✅ Responsivitate pentru mobil */
@media (max-width: 520px){
  #legal-modal { width: 94vw; }
  .lm-title { font-size: 1rem; }
}



/* ===========================
   COOKIE BAR (BOTTOM FIXED)
=========================== */
/* ===========================
   GDPR Cookie UI Styling
=========================== */
/* =====================================
   ✅ COOKIE BAR (bottom)
===================================== */
/* =====================================
   ✅ COOKIE BAR (bottom, glass style)
===================================== */
.cookie-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 20px;
  font-size: 0.85rem;
  z-index: 9999;
  transform: translateY(100%);
  transition: transform .35s ease;

  /* 🟡 Glassmorphism */
  background: rgba(30, 30, 30, 0.45);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
  color: #f2f2f2;
}
.cookie-bar.visible {
  transform: translateY(0);
}


.cookie-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
}

.cookie-text {
  flex: 1;
  line-height: 1.35;
  min-width: 260px;
}

.cookie-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.cb-btn {
  padding: 7px 16px;
  border-radius: 6px;
  font-size: 0.8rem;
  border: none;
  cursor: pointer;
  font-weight: 600;
}

.cb-accept   { background: #2ecc71; color: #fff; }
.cb-settings { background: #555;     color: #fff; }
.cb-reject   { background: #e74c3c; color: #fff; }


.cookie-link {
  color: #FFD700;
  text-decoration: underline dotted;
  cursor: pointer;
}

/* =====================================
   ✅ FOOTER FIX
===================================== */
.main-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 20px;
  font-size: 0.70rem;
  position: relative;

  background: var(--panel-bg);
  backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass);
  border-top: 1px solid var(--border);
  box-shadow: var(--shadow-footer);
  color: var(--text-footer);
}


/* Footer link polish — higher specificity overrides the inline #FFD700 rule in index.php */
#footer-confetti a {
  color: var(--text-footer-link);
  text-decoration: none;
  transition: color 0.2s ease;
}
#footer-confetti a:hover {
  color: var(--accent);
}

.cookie-pref-link {
  position: absolute;   /* MUTAT ÎN DREAPTA FĂRĂ SĂ DESTRAMĂ LAYOUT-UL */
  right: 20px;
  color: #FFC107;
  text-decoration: none;
  cursor: pointer;
  font-size: .78rem;
  font-weight: 600;
  transition: color 0.2s ease;
}
.cookie-pref-link:hover {
  color: rgba(255,220,100,0.95);
}

/* =====================================
   ✅ MODAL GENERAL (Legal + Settings)
===================================== */
#legal-overlay,
#cookie-settings-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
  z-index: 9998;
}
#legal-overlay.visible,
#cookie-settings-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ---- Legal Modal (mare, scrollbar fix) ---- */
/* =====================================
   ✅ LEGAL MODAL (full glass, big)
===================================== */
#legal-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.85);
  width: min(720px, 92vw);
  max-height: 88vh;
  border-radius: 16px;
  padding: 0;
  opacity: 0;
  transition: transform .35s ease, opacity .35s ease;
  z-index: 9999;
  overflow: hidden;

  /* 🟡 SAME GLASS STYLE */
  background: rgba(30, 30, 30, 0.45);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.38);
  color: #f2f2f2;
}
#legal-modal.visible {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.lm-body {
  padding: 18px 22px;
  font-size: .9rem;
  line-height: 1.55;
  max-height: calc(88vh - 58px);
  overflow-y: auto;
}


/* ---- Cookie Settings Popup (mic, glass) ---- */
/* =====================================
   ✅ COOKIE SETTINGS POPUP (glass)
===================================== */
#cookie-settings-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.85);
  width: min(420px, 92vw);
  padding: 0;
  border-radius: 16px;
  opacity: 0;
  transition: transform .35s ease, opacity .35s ease;
  z-index: 9999;

  /* 🟡 SAME GLASS AS COOKIE BAR */
  background: rgba(30, 30, 30, 0.45);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 0 26px rgba(0, 0, 0, 0.32);
  color: #f2f2f2;
}
#cookie-settings-modal.visible {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}


.lm-header,
.csm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  font-weight: 700;

  background: rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(255,255,255,0.15);
}


.lm-close,
.csm-close {
  background: none;
  border: none;
  font-size: 22px;
  color: #fff;
  cursor: pointer;
}

.csm-body {
  padding: 16px 20px 22px;
  font-size: .9rem;
  line-height: 1.5;
}

.csm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.cookie-policy-inline {
  font-size: 0.78rem;
  text-decoration: underline dotted;
  color: #FFD700;
  margin-left: auto;
}

/* =====================================
   ✅ RESPONSIVE (mobil sub 600px)
===================================== */
@media (max-width: 600px) {
  .cookie-row {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
  }
  .cookie-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* 📱 FULL WIDTH MAP — MOBILE ONLY */
@media (max-width: 600px) {

  .linie-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .container {
    padding: 0 !important;
  }

  .linie-content {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* .linie-transport sizing handled by full-screen block (max-width: 1023px) */

}

/* MAP FULL HEIGHT: handled by full-screen block (max-width: 1023px → calc(100dvh - 113px)) */

/* 📱 ALERT BAR EDGE TO EDGE */
@media (max-width: 600px) {

  .alert-box {
    border-radius: 0 !important;
    margin: 0 !important;
  }

}

@media (max-width: 600px) {

  /* Scoate spațiul dintre alert și hartă */
  .container {
    padding-top: 0 !important;
  }

  .linie-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }


  /* Scoate spațiul Leaflet de sus */
@media (max-width: 600px) {
  .linie-news { margin-bottom: 0 !important; }
  .linie-transport { margin-top: 0 !important; }
}
}

@media (max-width: 600px) {

  /* bara de alerte = linie-news */
  .linie-news {
    border-radius: 0 !important;
    margin: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  /* dacă tickerul are background/overflow, îl "dreptunghiem" și pe el */
  .news-ticker {
    border-radius: 0 !important;
  }

  /* în caz că textul/inner-ul creează efectul */
  .news-text {
    border-radius: 0 !important;
  }
}

@media (max-width: 600px) {
  .linie-content { gap: 0 !important; }
}

/* ── Touch alert UX: compact header + bottom sheet (phones, tablets, iPad) ── */
body.touch-alert-ux .ab-header { display: none; }
body.touch-alert-ux .ab-mobile-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  min-height: 42px;
  cursor: pointer;
  transition: filter .2s ease;
}
body.touch-alert-ux .linie-news {
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: 1px solid rgba(255,255,255,0.09);
  background: linear-gradient(180deg, rgba(16,26,68,0.94) 0%, rgba(10,18,50,0.96) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,0.13);
  box-shadow: 0 4px 18px rgba(0,0,0,0.38), inset 0 -1px 0 rgba(255,215,0,0.18);
}
body.touch-alert-ux .ab-mobile-row {
  padding: 4px 14px 10px;
}
body.touch-alert-ux .ab-empty {
  padding: 10px 14px;
  font-size: 0.78rem;
}
body.touch-alert-ux .ab-icon {
  filter: drop-shadow(0 0 7px rgba(255,193,7,0.50));
}

/* ── iOS-specific alert bar sizing: comfortable tap targets ── */
html.ios-device .ab-mobile-header,
body.ios-device .ab-mobile-header {
  min-height: 42px;
  padding: 10px 16px !important;
}
html.ios-device .ab-mobile-title,
body.ios-device .ab-mobile-title {
  font-size: 0.90rem !important;
  font-weight: 600 !important;
}
html.ios-device .ab-icon,
body.ios-device .ab-icon {
  font-size: 20px !important;
}
html.ios-device .ab-mobile-chevron,
body.ios-device .ab-mobile-chevron {
  font-size: 20px !important;
  padding: 6px !important;
  margin-left: auto;
}

/* ── Narrow screens: scale alert title down to keep single line ── */
@media (max-width: 380px) {
  .ab-mobile-title {
    font-size: 0.82rem !important;
  }
  body.touch-alert-ux .ab-mobile-header {
    gap: 8px;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}
@media (max-width: 340px) {
  .ab-mobile-title {
    font-size: 0.76rem !important;
  }
}

/* ── iOS: alert dropdown above map toolbar when open ──
   .map-toolbar-mobile has z-index:10000 + backdrop-filter + transform
   which creates a compositing layer that wins over dropdown z-index:600.
   Scoped to ios-device + alert-dropdown-open so nothing else is affected. */
body.ios-device.alert-dropdown-open .ab-mobile-dropdown {
  z-index: 10010 !important;
}
body.ios-device.alert-dropdown-open .map-toolbar-mobile {
  z-index: 100 !important;
}
body.ios-device.alert-dropdown-open .toolbar-dropdown-mobile {
  z-index: 101 !important;
}
body.ios-device.alert-dropdown-open .direction-toggle {
  z-index: 102 !important;
}

/* ── iOS: alert bottom sheet above map toolbar when open ──
   Same CoreAnimation compositing issue as the dropdown fix above.
   Scoped to ios-device + alert-sheet-open so nothing else is affected. */
body.ios-device.alert-sheet-open .ab-sheet {
  z-index: 10020 !important;
}
body.ios-device.alert-sheet-open .map-toolbar-mobile {
  z-index: 100 !important;
}
body.ios-device.alert-sheet-open .toolbar-dropdown-mobile {
  z-index: 101 !important;
}
body.ios-device.alert-sheet-open .direction-toggle {
  z-index: 102 !important;
}

.locate-slot {
  width: 100%;
  margin-bottom: 6px;
}

@media (max-width:600px) {
  .linie-header {
    flex-direction: column;
    align-items: stretch;
  }
}

.container:has(.linie-transport[data-line=""]) {
  grid-template-columns: 0px 1fr;
}

.linie-transport[data-line=""] {
  min-height: 500px;
}

.container:has(.linie-transport[data-line=""]) {
  grid-template-columns: 1fr;
}
.container:has(.linie-transport[data-line=""]) .linie-left {
  display: none;
}

body.apk-mode .header-logo a,
body.apk-mode .header-link a {
  pointer-events: none;
  cursor: default;
}

@media (max-width: 768px) {
  #footer-confetti {
    display: none !important;
  }
}

body.app #footer-confetti{
  display:none;
}


@media (max-width: 1023px){

  /* ascundem panoul normal */
  .linie-content{
    background:transparent;
  }

  /* containerul cu localizare + linia curenta */
  .linie-header{
    position:fixed;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    font-size:13px;
        font-weight:400;
    width:92%;
    max-width:420px;

    background: linear-gradient(180deg, rgba(8,14,42,0.97) 0%, rgba(3,8,24,0.99) 100%);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);

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

    z-index:1000;

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;

    box-shadow:0 -12px 40px rgba(0,0,0,0.55), 0 -2px 8px rgba(0,0,0,0.30);
  }

  /* butonul de localizare */
  .locate-slot{
    width:100%;
    display:flex;
    justify-content:center;
  }

  /* linia curenta centrata */
  .linie-curenta{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    font-size:12px;
    font-weight:400;
  }

}
.linie-curenta span{
   font-weight:400;
 }

 /* butonul cu numarul liniei */
 .linie-id{
   font-size:12px;
   padding:4px 8px;
   font-weight:400;
 }

 /* textul "spre ..." */
 .linie-destinatie{
   font-size:12px;
   font-weight:400;
 }

 /* butonul de localizare */
 .locate-slot button{
   font-size:12px;
   padding:8px 14px;
   font-weight:400;
 }

}

@media (max-width:1023px){

  /* elimină spațiul albastru de jos */
  body{
    margin:0;
    padding:0;
  }

  .linie-wrapper{
    height:100vh;
    padding:0;
  }

  .container{
    height:100vh;
  }

  /* harta ocupa tot ecranul */
  #map{
    height:100vh !important;
    width:100%;
  }

}
/* .linie-transport at ≤1023px: see full-screen block below (calc(100dvh - 113px)) */
@media (max-width:1023px){

  /* harta ocupa tot ecranul */
  #map{
    height:100vh !important;
  }

  /* panoul devine footer */
  .linie-header{
    position:fixed;
    bottom:0;
    left:0;

    width:100%;
    max-width:none;

    transform:none;

    background: linear-gradient(180deg, rgba(8,14,42,0.97) 0%, rgba(3,8,24,0.99) 100%);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    border-top:1px solid rgba(255,255,255,0.10);

    border-radius:18px 18px 0 0;

    padding:10px 12px;

    z-index:1000;
  }

}
@media (max-width:1023px){

  .linie-header{
    display:flex;
    flex-direction:column;
    gap:6px;
  }

  .locate-slot{
    width:100%;
  }

  .locate-slot button{
    width:100%;
    font-size:13px;
    padding:8px;
  }

  .linie-curenta{
    font-size:13px;
    font-weight:400;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
  }

  .linie-id{
    font-size:12px;
    padding:4px 8px;
  }

  .linie-destinatie{
    font-size:13px;
  }

}
/* 📱 HARTA FULL SCREEN */
@media (max-width:1023px){

  html, body{
    height:100dvh;
    margin:0;
    padding:0;
    overflow:hidden;   /* fără scroll */
  }

  .linie-wrapper{
    height:auto;
    margin:0 !important;
    padding:0 !important;
    background:transparent;
    border:none;
    box-shadow:none;
  }

  .container{
    height:auto;
    padding:0 !important;
  }

  .linie-content{
    height:auto;
    margin:0;
    padding:0;
  }

  .linie-transport{
    width:100vw !important;
    height:calc(100dvh - 113px) !important;
    margin:0 !important;
    transform:none !important;
    border-radius:0 !important;
  }

}

/* ─────────────────────────────────────────────────────────────────
   TABLETĂ 601px–1023px: flex layout to prevent content cut-off
   Overrides calc(100dvh - 113px) with a proper flex chain that
   naturally accounts for header + linie-selector heights.
   ≥1024px is untouched (desktop grid layout).
   ≤600px — see mobile block further below.
───────────────────────────────────────────────────────────────── */
@media (min-width: 601px) and (max-width: 1023px) {

  body {
    display: flex;
    flex-direction: column;
  }

  .main-header {
    flex: 0 0 auto;
  }

  .dash-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  .linie-selector {
    flex: 0 0 auto;
  }

  .linie-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .linie-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 0 !important;
  }

  .linie-news {
    flex: 0 0 auto;
  }

  .linie-transport {
    flex: 1;
    height: auto !important;
    width: 100% !important;
    min-height: 0;
  }

  /* Footer is not needed in this range: the fixed .linie-header bottom panel
     serves as the bottom chrome. Hiding the footer removes the body-background
     strip that appears between the fixed panel and the in-flow footer.        */
  .main-footer {
    display: none !important;
  }

}

/* ─────────────────────────────────────────────────────────────────
   MOBIL ≤600px: flex chain so map fills remaining viewport height.
   Replaces the hardcoded calc(100dvh - 113px) which does not
   account for the alert bar height.
   linie-selector, linie-left, linie-tabel are already display:none
   at ≤600px, so the visible chain is:
   main-header → linie-news (alert bar) → linie-transport (map).
───────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {

  body {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden; /* fallback for old WebView */
    overflow: clip;   /* clip without creating a scroll container —
                         prevents body from capturing position:fixed */
  }

  .main-header {
    flex: 0 0 auto;
  }

  .dash-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  .linie-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: auto !important;
    padding: 0 !important;
  }

  .container {
    flex: 1;
    display: flex !important;
    flex-direction: column;
    min-height: 0;
    height: auto !important;
  }

  .linie-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .linie-news {
    flex: 0 0 auto;
  }

  .linie-transport {
    flex: 1 !important;
    height: auto !important;
    width: 100% !important;
    min-height: 0 !important;
  }

}

/* 📱 Ascunde headerul doar în aplicațiile mobile (Android / iOS) */
body.app .main-header,
body.apk-mode .main-header{
  display: none !important;
}

body.app #cookie-banner,
body.apk-mode #cookie-banner{
  display:none !important;
}



/* ===== APP MODE (APK + iOS) ===== */

body.app .linie-wrapper,
body.apk-mode .linie-wrapper{
  margin:0 !important;
  padding:0 !important;
  height:100dvh;
  background:transparent;
  border:none;
  box-shadow:none;
}

body.app .container,
body.apk-mode .container{
  height:100dvh;
  padding:0 !important;
}

body.app .linie-content,
body.apk-mode .linie-content{
  height:100dvh;
  margin:0;
  padding:0;
}

/* HARTA FULL SCREEN */
body.app .linie-transport,
body.apk-mode .linie-transport{
  width:100vw !important;
height:calc(var(--vh, 1vh) * 100) !important;
  border-radius:0 !important;
  margin:0 !important;
}

/* PANOU LINIE JOS */
body.app .linie-header,
body.apk-mode .linie-header{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  max-width:none;

  border-radius:18px 18px 0 0;

  background: linear-gradient(180deg, rgba(8,14,42,0.97) 0%, rgba(3,8,24,0.99) 100%);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-top:1px solid rgba(255,255,255,0.10);

  z-index:1000;
}

/* Mobile browser: shared bottom-chrome offset — single source of truth for all
   bottom controls (.linie-header bottom, legend bottom, locate-btn bottom).
   --vv-bottom-inset: set by JS via visualViewport gap (tab bar, gesture area).
   env(safe-area-inset-bottom): home indicator / gesture bar (viewport-fit=cover).
   18px: minimum floor for Chrome Android where both resolve to 0.
   body.mobile-browser is JS-gated: never fires on APK, iOS app, or desktop. */
@media (max-width: 1023px) {
  body.mobile-browser {
    --mobile-browser-bottom-offset: max(
      env(safe-area-inset-bottom, 0px),
      var(--vv-bottom-inset, 0px),
      55px
    );
  }

  body.mobile-browser .linie-header {
    bottom: var(--mobile-browser-bottom-offset, 40px);
  }
}
/* Desktop narrow viewport: no browser-chrome bar exists, so panel sits flush at bottom.
   pointer:fine / hover:hover = mouse device = desktop Chrome. Never matches real mobile. */
@media (max-width: 1023px) and (hover: hover) and (pointer: fine) {
  body.mobile-browser .linie-header {
    bottom: 0;
  }
}

/* Approximate rendered height of the <=1023px .linie-header bottom sheet
   (padding + locate-button row + linie-curenta row) -- lets other fixed
   bottom elements (e.g. .jp-pin-confirm-bar in map-style.css) sit clear above it. */
@media (max-width: 1023px) {
  :root {
    --jp-linie-header-height: 96px;
  }
}

body.app,
body.apk-mode{
  height:100dvh;
  overflow:hidden;
}

/* ===== ALERT BAR MAI LAT ÎN APLICAȚIE ===== */

body.app .linie-news,
body.apk-mode .linie-news{
  width:100vw;
  margin:0;
  border-radius:0;
  padding:4px 0;   /* crește puțin înălțimea */
}

body.app .news-ticker,
body.apk-mode .news-ticker{
  padding:18px 0;  /* ticker mai înalt */
}

body.app .news-text,
body.apk-mode .news-text{
  font-size:1rem;  /* text puțin mai mare */
}
/* ============================================================
   GPS POPUPS — Modern redesign
   ============================================================ */

/* ── Shared MapLibre popup wrapper ── */
.gps-wait-popup.maplibregl-popup .maplibregl-popup-content,
.gps-error-popup.maplibregl-popup .maplibregl-popup-content {
  padding: 0;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.13), 0 2px 8px rgba(0,0,0,0.07);
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  max-width: 290px;
  min-width: 220px;
  overflow: hidden;
  animation: gpsPopupIn 0.22s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* Hide the arrow tip for GPS popups */
.gps-wait-popup.maplibregl-popup .maplibregl-popup-tip,
.gps-error-popup.maplibregl-popup .maplibregl-popup-tip {
  display: none;
}

/* ── Shared entrance animation ── */
@keyframes gpsPopupIn {
  from { opacity: 0; transform: translateY(10px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ── GPS SEARCH POPUP (loading state) ── */
.gps-search-popup {
  text-align: center;
  padding: 22px 24px 20px;
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
}

.gps-search-popup .gps-icon {
  font-size: 30px;
  display: block;
  margin-bottom: 2px;
  animation: gpsIconPulse 2s ease-in-out infinite;
}

@keyframes gpsIconPulse {
  0%, 100% { transform: scale(1);    opacity: 1;    }
  50%       { transform: scale(1.12); opacity: 0.8; }
}

.gps-spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid rgba(0,122,255,0.15);
  border-top-color: #007AFF;
  margin: 10px auto 12px;
  animation: gpsSpin 0.75s linear infinite;
}

@keyframes gpsSpin {
  to { transform: rotate(360deg); }
}

.gps-search-popup .gps-title {
  font-weight: 600;
  font-size: 15px;
  color: #111;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.gps-search-popup .gps-sub {
  font-size: 12px;
  color: #888;
  margin-top: 5px;
  line-height: 1.45;
}

/* ── GPS ERROR POPUP ── */
.gps-error-popup-inner {
  position: relative;
  padding: 22px 20px 20px;
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  text-align: center;
}

/* Close button — circular, top-right corner */
.gps-error-popup-inner .near-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: #f2f2f2;
  color: #555;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
  /* ensure tap target is large enough on mobile */
  min-width: 28px;
  min-height: 28px;
}

.gps-error-popup-inner .near-close:hover {
  background: #e2e2e2;
  color: #111;
}

/* Warning icon */
.gps-error-icon {
  font-size: 34px;
  display: block;
  margin: 2px 0 10px;
}

/* Error message text */
.gps-error-text {
  font-size: 13px;
  color: #333;
  line-height: 1.5;
  max-width: 230px;
  margin: 0 auto;
}


/* =============================================================
   DESKTOP DASHBOARD LAYOUT
   Applies ONLY at min-width: 1024px.
   Every rule here is inside this query — mobile/tablet are
   completely unaffected.
   ============================================================= */
@media (min-width: 1024px) {

  /* ── No page scroll ── */
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  /* Body becomes a vertical flex column:
     header (shrink) → dash-body (fill) → footer (shrink) */
  body {
    display: flex;
    flex-direction: column;
    min-height: unset;
  }

  /* Header: no longer needs sticky (no page scroll) */
  .main-header {
    flex-shrink: 0;
    position: relative;
    top: auto;
  }

  /* Footer: flush against bottom, no gap */
  .main-footer {
    flex-shrink: 0;
    margin-top: 0;
  }

  /* ── DASHBOARD BODY ──
     Two columns: line-selector sidebar | the rest */
  .dash-body {
    flex: 1;
    display: grid;
    grid-template-columns: 230px 1fr;
    min-height: 0;       /* lets grid children scroll instead of growing */
    overflow: hidden;
  }

  /* ── LEFT SIDEBAR ── */
  .linie-selector {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    padding: 14px 10px;
    gap: 0;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: none;
    background: rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.25);
  }

  /* Sidebar section label */
  .sidebar-title {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.90);
    padding: 0 4px 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* Color-group: flex column — label on top, button grid below */
  .sidebar-group {
    display: flex;
    flex-direction: column;
    padding-bottom: 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .sidebar-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  /* Category label above each group */
  .sidebar-group-label {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 6px;
    padding-left: 2px;
    text-shadow: 0 0 14px rgba(255,255,255,0.10);
  }

  /* Button grid — was on .sidebar-group, now scoped to buttons only */
  .sidebar-group-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    gap: 5px;
  }

  /* Line buttons: compact square grid items */
  .linie-btn {
    width: 100%;         /* fills its grid cell */
    height: 36px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.01em;
  }

  /* Hover: scale + brightness instead of vertical translate */
  .linie-btn:hover {
    transform: scale(1.08);
    filter: brightness(1.18);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
    color: #fff;
  }

  /* ── RIGHT: linie-wrapper fills remaining column ── */
  .linie-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    /* Remove the floating-card look — now part of a flush grid */
    max-width: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Inner 2-col grid:
     station-list (fixed) | panel + map (flex) */
  .container {
    flex: 1;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 0;
    padding: 0;
    min-height: 0;
    align-items: stretch;
  }

  /* ── Station list (left sub-column) ── */
  .linie-left {
    height: 100%;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    border-radius: 0;
    padding: 16px 12px;
    background: rgba(255, 255, 255, 0.04);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
  }

  /* ── Right sub-column: news → header → timetable → map ── */
  .linie-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: 14px 16px;
    gap: 10px;
    overflow: hidden;
    position: relative;
  }

  /* News ticker: fixed, never grows */
  .linie-news {
    flex: 0 0 auto;
  }

  /* Station header row: fixed */
  .linie-header {
    flex: 0 0 auto;
  }

  /* Timetable: capped height, scrollable if long */
  .linie-tabel {
    flex: 0 0 auto;
    max-height: 210px;
    overflow-y: auto;
  }

  /* Map: fills ALL remaining vertical space */
  .linie-transport {
    flex: 1;
    height: auto !important;   /* overrides the base 65vh rule */
    min-height: 0;
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  }

} /* END @media (min-width: 1024px) */

/* ── Desktop visual style: theme-aware (colours via CSS variables) ──────────
   Visual properties only — zero layout/size/spacing here.
   All tokens defined in theme.css; dark = :root defaults, light = overrides.
   ──────────────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {

  /* Top navigation bar */
  .main-header {
    background: var(--panel-bg-deep);
    backdrop-filter: var(--glass);
    -webkit-backdrop-filter: var(--glass);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-header);
  }

  /* Route selector sidebar */
  .linie-selector {
    background: var(--panel-bg);
    backdrop-filter: var(--glass);
    -webkit-backdrop-filter: var(--glass);
    border-right: 1px solid var(--border);
    box-shadow: var(--shadow-sidebar);
  }

  /* Station list panel */
  .linie-left {
    background: var(--panel-bg-subtle);
    border-right: 1px solid var(--border-subtle);
  }

  /* Current route info bar */
  .linie-header {
    background: var(--panel-bg);
    backdrop-filter: var(--glass);
    -webkit-backdrop-filter: var(--glass);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
  }

  /* Timetable */
  .linie-tabel table {
    background: var(--panel-bg);
    backdrop-filter: var(--glass);
    -webkit-backdrop-filter: var(--glass);
    border: 1px solid var(--border-card);
  }
  .linie-tabel th {
    background: var(--table-header-bg);
    color: #000;
  }
  .linie-tabel tr:nth-child(even) td {
    background: var(--table-row-even);
  }
  .linie-tabel tr:hover td {
    background: var(--table-row-hover);
  }

  /* Route direction toggle buttons */
  .switch-btn {
    background: var(--btn-bg-alt);
    border: 1px solid var(--btn-border-alt);
    color: var(--btn-color);
  }
  .switch-btn:hover {
    background: var(--btn-hover-bg);
    border-color: var(--btn-hover-border);
    color: var(--btn-hover-color);
  }
  .switch-btn.active {
    background: var(--btn-active-bg);
    border-color: var(--btn-active-border);
    color: var(--btn-hover-color);
    box-shadow: var(--btn-active-shadow);
  }

  /* Line number buttons */
  .linie-btn {
    background: var(--btn-bg);
    border: 1px solid var(--btn-border);
    color: var(--btn-color);
  }
  .linie-btn:hover {
    background: var(--btn-hover-bg);
    border-color: var(--btn-hover-border);
    color: var(--btn-hover-color);
    box-shadow: var(--btn-hover-shadow);
  }
  .linie-btn.active {
    background: var(--btn-active-bg);
    border-color: var(--btn-active-border);
    color: var(--btn-hover-color);
    outline: 2px solid rgba(255,193,7,0.70);
    box-shadow: var(--btn-active-shadow);
  }

  /* Station list items */
  .linie-statie {
    background: var(--statie-bg);
    border: 1px solid var(--statie-border);
    color: var(--statie-color);
  }
  .linie-statie:hover {
    background: var(--statie-hover-bg);
    border-color: var(--statie-hover-bdr);
  }
  .linie-statie.active {
    background: var(--statie-active-bg);
    border-color: var(--btn-active-border);
    color: var(--btn-hover-color);
    box-shadow: 0 0 12px rgba(255,193,7,0.32);
  }

  /* Sidebar section title and category labels */
  .sidebar-title {
    color: var(--sidebar-title);
    border-bottom-color: var(--sidebar-sep);
  }
  .sidebar-group {
    border-bottom-color: var(--sidebar-group-sep);
  }
  .sidebar-group-label {
    color: var(--sidebar-label);
  }

  /* Map area rim border */
  .linie-transport {
    border: 1px solid var(--border-card);
  }

  /* Thin scrollbars */
  .linie-selector,
  .linie-left {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-color);
  }
  .linie-selector::-webkit-scrollbar,
  .linie-left::-webkit-scrollbar {
    width: 4px;
  }
  .linie-selector::-webkit-scrollbar-track,
  .linie-left::-webkit-scrollbar-track {
    background: transparent;
  }
  .linie-selector::-webkit-scrollbar-thumb,
  .linie-left::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: 2px;
  }
  .linie-selector::-webkit-scrollbar-thumb:hover,
  .linie-left::-webkit-scrollbar-thumb:hover {
    background: var(--scroll-hover);
  }

  /* Line buttons — smooth interactive transitions + resting shadow */
  .linie-btn {
    transition: background 0.18s ease, border-color 0.18s ease,
                color 0.18s ease, box-shadow 0.18s ease,
                transform 0.18s ease, filter 0.18s ease;
    box-shadow: var(--btn-shadow);
  }

  /* Station list items — depth shadows */
  .linie-statie {
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  }
  .linie-statie:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,0.28);
  }
  .linie-statie.active {
    box-shadow: 0 3px 12px rgba(255,193,7,0.28);
  }

  /* Route direction toggle — smooth transitions */
  .switch-btn {
    transition: background 0.18s ease, border-color 0.18s ease,
                color 0.18s ease, box-shadow 0.18s ease;
  }

} /* END desktop visual overrides */


/* ============================================================
   FULL HD COMPACT SCALING — 1024px to 1920px
   Overrides specific sizes from the desktop block above.
   Screens wider than 1920px (4K, QHD) use the base values
   unchanged. No colors, layout structure, or JS touched.
   ============================================================ */
@media (min-width: 1024px) and (max-width: 1920px) {

  /* ── Header: reduce vertical footprint ── */
  .main-header {
    padding: 8px 22px;
  }

  .header-logo img {
    height: 30px;
  }

  .header-link .logo-info {
    height: 48px;
  }

  /* ── Outer sidebar: sized to produce ~40px squares at 5/row ── */
  .dash-body {
    grid-template-columns: 220px 1fr;
  }

  /* ── Sidebar interior: tighter spacing ── */
  .linie-selector {
    padding: 8px 5px;
  }

  .sidebar-title {
    font-size: 0.53rem;
    padding: 0 2px 5px;
    margin-bottom: 4px;
  }

  .sidebar-group {
    padding-bottom: 5px;
    margin-bottom: 3px;
  }

  .sidebar-group-label {
    font-size: 0.50rem;
    margin-bottom: 3px;
  }

  .sidebar-group-buttons {
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
  }

  .linie-btn {
    height: auto;
    aspect-ratio: 1 / 1;
    font-size: 0.62rem;
    border-radius: 5px;
    padding: 2px;
  }

  /* ── Station list: narrower column, tighter padding ── */
  .container {
    grid-template-columns: 240px 1fr;
  }

  .linie-left {
    padding: 8px 6px;
  }

  .linie-statie {
    padding: 5px 8px;
    font-size: 0.73rem;
  }

  .switch-btn {
    padding: 5px 8px;
    font-size: 0.80rem;
  }

  /* ── Right content: less padding and gap ── */
  .linie-content {
    padding: 6px 10px;
    gap: 5px;
  }

  .linie-header {
    padding: 5px 10px;
    gap: 8px;
  }

  /* ── Info panel: reduce badge and text sizes ── */
  .linie-header .linie-curenta {
    gap: 7px;
  }

  .linie-header .linie-curenta span {
    font-size: 0.82rem;
  }

  .linie-header .linie-curenta .linie-id {
    padding: 3px 10px;
    font-size: 0.85rem;
    min-width: auto;
  }

  .linie-header #station-title {
    font-size: 0.70rem;
    padding: 4px 10px;
  }

  /* ── Timetable: shorter cap → map gets more vertical space ── */
  .linie-tabel {
    max-height: 148px;
  }

  .linie-tabel th {
    padding: 5px 8px;
    font-size: 0.67rem;
  }

  .linie-tabel td {
    padding: 5px 8px;
    font-size: 0.67rem;
  }

  /* ── Footer: trim vertical padding ── */
  .main-footer {
    padding: 7px 16px;
  }

} /* END @media (min-width: 1024px) and (max-width: 1920px) */

/* ── Destination scroll (marquee) ───────────────────────────────────────── */
.linie-header .linie-curenta .linie-destinatie {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dest-scroll-outer {
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}

#linie-destinatie-text {
  display: inline-block;
  white-space: nowrap;
  max-width: none;
}

.dest-clone {
  padding-left: 48px;
}

.dest-track {
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;
}

.dest-track.scrolling {
  animation: destScroll linear infinite;
}

@keyframes destScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* ═══════════════════════════════════════════════════════════
   LIGHT THEME — DESKTOP READABILITY OVERRIDES
   (scoped to min-width:1024px — mobile untouched)
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* ── Timetable text ── */
  [data-theme="light"] .linie-tabel td {
    color: #1D2433;
  }

  /* ── Route info bar ── */
  [data-theme="light"] .linie-header {
    color: #1D2433;
    text-shadow: none;
  }
  [data-theme="light"] .linie-header .linie-curenta span {
    color: #1D2433;
  }
  [data-theme="light"] .linie-header .linie-curenta .linie-id {
    color: #000;
  }
  [data-theme="light"] .linie-header #station-title {
    color: #1D2433;
  }

  /* ── Alert bar text ── */
  [data-theme="light"] .ab-title {
    color: #1D2433;
  }
  [data-theme="light"] .ab-bar-label {
    color: #1D2433;
  }
  [data-theme="light"] .ab-view-all {
    border-color: rgba(0,0,0,0.18);
    color: rgba(29,36,51,0.75);
  }
  [data-theme="light"] .ab-view-all:hover {
    background: rgba(255,193,7,0.10);
    color: #997300;
    border-color: rgba(255,193,7,0.45);
  }

  /* ══════════════════════════════════════════════════════════
     ALERT DROPDOWN (ab-mobile-dropdown) — first overlay shown
     when user clicks the alert bar header "▾"
     ══════════════════════════════════════════════════════════ */
  [data-theme="light"] .ab-mobile-dropdown {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    border-top: none !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06) !important;
  }
  /* Category label inside dropdown ("TRAM", "BUS", etc.) */
  [data-theme="light"] .ab-dropdown-label {
    color: rgba(29,36,51,0.45) !important;
  }
  /* Line badge selection ring: dark on light bg */
  [data-theme="light"] .ab-badge--selected {
    box-shadow: 0 0 0 2px #1D2433, 0 2px 8px rgba(0,0,0,0.18);
  }

  /* ══════════════════════════════════════════════════════════
     ALERT DETAIL PANEL (ab-panel) — opens after clicking a badge
     ══════════════════════════════════════════════════════════ */
  [data-theme="light"] .ab-panel {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    border-left: 3px solid var(--panel-accent, #FFC107) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06) !important;
    scrollbar-color: rgba(0,0,0,0.16) transparent;
  }
  [data-theme="light"] .ab-panel-header {
    background: #F5F7FA !important;
    border-bottom: 1px solid rgba(0,0,0,0.07);
  }
  [data-theme="light"] .ab-panel-title {
    color: #1D2433 !important;
  }
  [data-theme="light"] .ab-panel-close {
    background: rgba(0,0,0,0.05) !important;
    border-color: rgba(0,0,0,0.10) !important;
    color: rgba(29,36,51,0.65) !important;
  }
  [data-theme="light"] .ab-panel-close:hover {
    background: rgba(0,0,0,0.09) !important;
    color: #1D2433 !important;
  }

  /* ── Alert cards ── */
  [data-theme="light"] .ab-card {
    background: #F8F9FB !important;
    border-color: rgba(0,0,0,0.07) !important;
  }
  [data-theme="light"] .ab-card-title {
    color: #1D2433 !important;
  }
  [data-theme="light"] .ab-dates {
    color: #5F6B7A !important;
  }
  [data-theme="light"] .ab-effect {
    color: rgba(29,36,51,0.82) !important;
    background: rgba(0,0,0,0.05) !important;
    border-color: rgba(0,0,0,0.10) !important;
  }
  [data-theme="light"] .ab-stop-badge {
    background: rgba(0,0,0,0.05) !important;
    border-color: rgba(0,0,0,0.12) !important;
    color: rgba(29,36,51,0.78) !important;
  }
  [data-theme="light"] .ab-desc p {
    color: rgba(29,36,51,0.72) !important;
  }
  [data-theme="light"] .ab-cause {
    color: rgba(29,36,51,0.45) !important;
  }
  [data-theme="light"] .ab-days--ok {
    color: rgba(29,36,51,0.65) !important;
  }
  [data-theme="light"] .ab-days--muted {
    color: rgba(29,36,51,0.38) !important;
  }
  [data-theme="light"] .ab-empty-filter {
    color: rgba(29,36,51,0.45) !important;
  }
  /* Selected-line notice: amber on light bg */
  [data-theme="light"] .ab-selected-notice {
    color: #7A5800;
    background: rgba(255,215,0,0.12);
    border-color: rgba(255,193,7,0.35);
  }

  /* ── Route buttons: white bg in light mode, category color for text/border ── */
  [data-theme="light"] .linie-btn {
    background: rgba(255,255,255,0.92) !important;
    color: var(--linie-color, #1D2433);
    border-color: var(--linie-color, rgba(0,0,0,0.15));
  }
  [data-theme="light"] .linie-btn:hover {
    background: var(--btn-hover-bg) !important;
    color: var(--btn-hover-color);
    border-color: var(--btn-hover-border);
  }
  [data-theme="light"] .linie-btn.active {
    background: var(--btn-active-bg) !important;
    color: var(--btn-hover-color);
    border-color: var(--btn-active-border);
  }

  /* ── Phase C: Desktop Light Theme refinements ────────────────────────────── */
  /* Header */
  [data-theme="light"] .main-header {
    background: rgba(255,255,255,0.88) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06) !important;
  }
  /* Footer */
  [data-theme="light"] .main-footer {
    background: #EEF2F7 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-top: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.04) !important;
  }
  /* Route selector bar */
  [data-theme="light"] .linie-selector {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.07) !important;
  }
  /* Sidebar */
  [data-theme="light"] .linie-left {
    background: #F7F8FB !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(0,0,0,0.07) !important;
  }
  [data-theme="light"] .switch-btn {
    background: rgba(0,0,0,0.04) !important;
    color: #1D2433 !important;
    border: 1px solid rgba(0,0,0,0.09) !important;
  }
  [data-theme="light"] .switch-btn.active {
    background: #FFC107 !important;
    color: #000 !important;
  }
  /* Station list */
  [data-theme="light"] .linie-statie {
    background: #FAFBFD !important;
    border-color: rgba(0,0,0,0.07) !important;
    color: #1D2433 !important;
  }
  [data-theme="light"] .linie-statie:hover {
    background: #F0F5FF !important;
    border-color: rgba(0,0,0,0.12) !important;
  }
  [data-theme="light"] .linie-statie.active {
    background: #FFE082 !important;
    color: #1D2433 !important;
    border-color: rgba(255,193,7,0.50) !important;
    box-shadow: 0 0 12px rgba(255,193,7,0.20) !important;
  }
  [data-theme="light"] .bulina { border-color: rgba(0,0,0,0.15) !important; }
  /* Alert bar warm cream gradient */
  [data-theme="light"] .linie-news {
    background: linear-gradient(180deg, #FFF8DC 0%, #FFF3C4 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: rgba(255,193,7,0.28) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.55) !important;
  }
  [data-theme="light"] .ab-cat-group {
    background: rgba(255,255,255,0.68) !important;
    border-color: rgba(255,193,7,0.22) !important;
  }
  [data-theme="light"] .ab-cat-group:hover { border-color: rgba(255,193,7,0.45) !important; }
  /* Route buttons: category-tinted via color-mix */
  [data-theme="light"] .linie-btn {
    background: color-mix(in srgb, var(--linie-color, #B07A00) 10%, #F5F7FA) !important;
    color: var(--linie-color, #1D2433) !important;
    border-color: color-mix(in srgb, var(--linie-color, #B07A00) 35%, transparent) !important;
  }
  /* Route info panel */
  [data-theme="light"] .linie-header {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.05) !important;
  }

  /* ── Premium button refinement: Desktop Light Theme ─────────────────────── */
  @keyframes linie-btn-shine {
    from { left: -80%; }
    to   { left: 200%; }
  }

  /* Shared: stacking context + overflow clip for the shine ::before */
  [data-theme="light"] .linie-btn,
  [data-theme="light"] .switch-btn,
  [data-theme="light"] .legend-header {
    position: relative !important;
    overflow: hidden !important;
  }

  /* Route category buttons */
  [data-theme="light"] .linie-btn {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--linie-color, #B07A00) 6%, #FFFFFF) 0%,
      color-mix(in srgb, var(--linie-color, #B07A00) 14%, #F3F5F8) 100%
    ) !important;
    color: var(--linie-color, #1D2433) !important;
    border-color: color-mix(in srgb, var(--linie-color, #B07A00) 32%, transparent) !important;
    box-shadow:
      0 2px 6px rgba(0,0,0,0.08),
      inset 0 1px 0 rgba(255,255,255,0.55) !important;
    transition:
      background 220ms ease,
      border-color 220ms ease,
      box-shadow 220ms ease,
      transform 220ms ease !important;
  }
  [data-theme="light"] .linie-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.48) 50%, transparent 100%);
    transform: skewX(-18deg);
    pointer-events: none;
  }
  [data-theme="light"] .linie-btn:hover {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--linie-color, #B07A00) 3%, #FFFFFF) 0%,
      color-mix(in srgb, var(--linie-color, #B07A00) 10%, #F7F8FB) 100%
    ) !important;
    border-color: color-mix(in srgb, var(--linie-color, #B07A00) 50%, transparent) !important;
    box-shadow:
      0 4px 14px rgba(0,0,0,0.12),
      0 1px 3px rgba(0,0,0,0.06),
      inset 0 1px 0 rgba(255,255,255,0.70) !important;
    transform: translateY(-2px) !important;
    color: var(--linie-color, #1D2433) !important;
  }
  [data-theme="light"] .linie-btn:hover::before {
    animation: linie-btn-shine 300ms ease forwards;
  }
  [data-theme="light"] .linie-btn.active {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--linie-color, #B07A00) 16%, #FFFFFF) 0%,
      color-mix(in srgb, var(--linie-color, #B07A00) 24%, #EFF1F5) 100%
    ) !important;
    border-color: color-mix(in srgb, var(--linie-color, #B07A00) 55%, transparent) !important;
    box-shadow:
      0 3px 10px rgba(0,0,0,0.10),
      inset 0 1px 0 rgba(255,255,255,0.60) !important;
    color: var(--linie-color, #1D2433) !important;
  }

  /* Tur / Retur direction toggle */
  [data-theme="light"] .switch-btn {
    background: linear-gradient(180deg, #FFFFFF 0%, #F3F5F8 100%) !important;
    color: #1D2433 !important;
    border: 1px solid rgba(0,0,0,0.11) !important;
    box-shadow:
      0 2px 6px rgba(0,0,0,0.07),
      inset 0 1px 0 rgba(255,255,255,0.80) !important;
    transition:
      background 220ms ease,
      border-color 220ms ease,
      box-shadow 220ms ease,
      transform 220ms ease !important;
  }
  [data-theme="light"] .switch-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.48) 50%, transparent 100%);
    transform: skewX(-18deg);
    pointer-events: none;
  }
  [data-theme="light"] .switch-btn:hover {
    background: linear-gradient(180deg, #FFFFFF 0%, #EAEDF2 100%) !important;
    border-color: rgba(0,0,0,0.17) !important;
    box-shadow:
      0 4px 12px rgba(0,0,0,0.10),
      inset 0 1px 0 rgba(255,255,255,0.85) !important;
    transform: translateY(-2px) !important;
    color: #1D2433 !important;
  }
  [data-theme="light"] .switch-btn:hover::before {
    animation: linie-btn-shine 300ms ease forwards;
  }
  [data-theme="light"] .switch-btn.active {
    background: linear-gradient(180deg, #FFD740 0%, #FFC107 100%) !important;
    color: #000 !important;
    border-color: rgba(200,150,0,0.35) !important;
    box-shadow:
      0 3px 10px rgba(255,193,7,0.28),
      inset 0 1px 0 rgba(255,255,255,0.50) !important;
  }
  [data-theme="light"] .switch-btn.active:hover {
    transform: translateY(-2px) !important;
    box-shadow:
      0 5px 14px rgba(255,193,7,0.32),
      inset 0 1px 0 rgba(255,255,255,0.55) !important;
  }

  /* Legend accordion header (::after is used for the chevron — ::before is free for shine) */
  [data-theme="light"] .legend-header {
    background: linear-gradient(180deg, #FFFFFF 0%, #F3F5F8 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.80) !important;
    filter: none !important;
    transition:
      background 220ms ease,
      box-shadow 220ms ease,
      transform 220ms ease !important;
  }
  [data-theme="light"] .legend-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.48) 50%, transparent 100%);
    transform: skewX(-18deg);
    pointer-events: none;
  }
  [data-theme="light"] .legend-header:hover {
    background: linear-gradient(180deg, #FFFFFF 0%, #EAEDF2 100%) !important;
    box-shadow:
      0 3px 10px rgba(0,0,0,0.08),
      inset 0 1px 0 rgba(255,255,255,0.85) !important;
    filter: none !important;
  }
  [data-theme="light"] .legend-header:hover::before {
    animation: linie-btn-shine 300ms ease forwards;
  }

} /* END light theme desktop overrides */

/* ═══════════════════════════════════════════════════════════
   LIGHT THEME — MOBILE/TABLET/APK/iOS
   Matches approved Desktop Light Theme visual language.
   Desktop Light Theme (@media min-width:1024px) unchanged.
   Dark Theme completely unaffected.
   ═══════════════════════════════════════════════════════════ */

/* ── Section 1: General mobile/tablet (≤1023px) ── */
@media (max-width: 1023px) {

  /* Page header */
  [data-theme="light"] .main-header {
    background: rgba(255,255,255,0.96) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(0,0,0,0.09) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
  }
  [data-theme="light"] .header-link a {
    color: #1D2433 !important;
    background: rgba(0,0,0,0.05) !important;
    border-color: rgba(0,0,0,0.10) !important;
  }
  [data-theme="light"] .header-link a:hover {
    background: rgba(255,193,7,0.12) !important;
    color: #1D2433 !important;
  }

  /* Route info bar (inline on tablet, floating overlay on phone) */
  [data-theme="light"] .linie-header {
    background: rgba(255,255,255,0.96) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-color: rgba(0,0,0,0.10) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.11), 0 1px 4px rgba(0,0,0,0.05) !important;
    color: #1D2433 !important;
    text-shadow: none !important;
  }
  [data-theme="light"] .linie-header .linie-curenta span       { color: #1D2433 !important; }
  [data-theme="light"] .linie-header .linie-curenta .linie-id  { color: #000; }
  [data-theme="light"] .linie-header #station-title             { color: #1D2433 !important; }

  /* Alert bar — .linie-news background/border auto-inherits from CSS vars (panel-bg, border-alert)
     but placeholder text and header elements are hardcoded white → override */
  [data-theme="light"] .ab-loading,
  [data-theme="light"] .ab-empty       { color: rgba(29,36,51,0.45) !important; }
  [data-theme="light"] .ab-empty--error { color: rgba(160,80,0,0.80) !important; }

  /* Alert bar header elements (desktop/non-touch layout) */
  [data-theme="light"] .ab-title        { color: #1D2433 !important; }
  [data-theme="light"] .ab-bar-label    { color: #1D2433 !important; }
  [data-theme="light"] .ab-bar-lines    { color: #B07A00 !important; }
  [data-theme="light"] .ab-count-badge  {
    background: rgba(255,193,7,0.15) !important;
    border-color: rgba(255,193,7,0.35) !important;
    color: #A07000 !important;
  }
  [data-theme="light"] .ab-view-all {
    border-color: rgba(0,0,0,0.18) !important;
    color: rgba(29,36,51,0.75) !important;
  }
  [data-theme="light"] .ab-view-all:hover {
    background: rgba(255,193,7,0.10) !important;
    color: #997300 !important;
    border-color: rgba(255,193,7,0.45) !important;
  }

  /* Mobile/touch header row elements */
  [data-theme="light"] .ab-mobile-title  { color: #1D2433 !important; }
  [data-theme="light"] .ab-mobile-count  {
    background: rgba(255,193,7,0.15) !important;
    border-color: rgba(255,193,7,0.35) !important;
    color: #A07000 !important;
  }
  [data-theme="light"] .ab-mobile-chevron { color: rgba(29,36,51,0.65) !important; }
  [data-theme="light"] .ab-mobile-header .ab-mobile-chevron svg { stroke: rgba(29,36,51,0.65) !important; }
  [data-theme="light"] .ab-sep           { color: rgba(29,36,51,0.22) !important; }

  /* Mobile dropdown overlay (categorized line list) */
  [data-theme="light"] .ab-mobile-dropdown {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: rgba(0,0,0,0.09) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.11), 0 2px 8px rgba(0,0,0,0.05) !important;
  }
  [data-theme="light"] .ab-dropdown-label  { color: rgba(29,36,51,0.45) !important; }
  [data-theme="light"] .ab-badge--selected {
    box-shadow: 0 0 0 2px #1D2433, 0 2px 8px rgba(0,0,0,0.18) !important;
  }

  /* Alert detail panel (floating fixed overlay) */
  [data-theme="light"] .ab-panel {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: rgba(0,0,0,0.09) !important;
    border-left: 3px solid var(--panel-accent, #FFC107) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.11), 0 2px 8px rgba(0,0,0,0.05) !important;
    scrollbar-color: rgba(0,0,0,0.16) transparent;
  }
  [data-theme="light"] .ab-panel-header {
    background: #F5F7FA !important;
    border-bottom-color: rgba(0,0,0,0.07) !important;
  }
  [data-theme="light"] .ab-panel-title  { color: #1D2433 !important; }
  [data-theme="light"] .ab-panel-close  {
    background: rgba(0,0,0,0.05) !important;
    border-color: rgba(0,0,0,0.10) !important;
    color: rgba(29,36,51,0.65) !important;
  }
  [data-theme="light"] .ab-panel-close:hover {
    background: rgba(0,0,0,0.09) !important;
    color: #1D2433 !important;
  }

  /* Mobile bottom sheet */
  [data-theme="light"] .ab-sheet {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-top-color: rgba(0,0,0,0.09) !important;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.11), 0 -2px 8px rgba(0,0,0,0.05) !important;
  }
  [data-theme="light"] .ab-sheet-handle        { background: rgba(0,0,0,0.16) !important; }
  [data-theme="light"] .ab-sheet-header        { border-bottom-color: rgba(0,0,0,0.07) !important; }
  [data-theme="light"] .ab-sheet-title         { color: #1D2433 !important; }
  [data-theme="light"] .ab-sheet-back          { color: rgba(29,36,51,0.55) !important; }
  [data-theme="light"] .ab-sheet-back:hover    { color: #1D2433 !important; }
  [data-theme="light"] .ab-sheet-close         { color: rgba(29,36,51,0.50) !important; }
  [data-theme="light"] .ab-sheet-cat           { border-bottom-color: rgba(0,0,0,0.07) !important; }
  [data-theme="light"] .ab-sheet-cat-label     { color: rgba(29,36,51,0.55) !important; }
  [data-theme="light"] .ab-sheet-cat-label:hover { color: #1D2433 !important; }

  /* Alert cards (shared: panel + sheet) */
  [data-theme="light"] .ab-card {
    background: #F8F9FB !important;
    border-color: rgba(0,0,0,0.07) !important;
  }
  [data-theme="light"] .ab-card-title     { color: #1D2433 !important; }
  [data-theme="light"] .ab-dates          { color: #5F6B7A !important; }
  [data-theme="light"] .ab-effect {
    color: rgba(29,36,51,0.82) !important;
    background: rgba(0,0,0,0.05) !important;
    border-color: rgba(0,0,0,0.10) !important;
  }
  [data-theme="light"] .ab-stop-badge {
    background: rgba(0,0,0,0.05) !important;
    border-color: rgba(0,0,0,0.12) !important;
    color: rgba(29,36,51,0.78) !important;
  }
  [data-theme="light"] .ab-desc p        { color: rgba(29,36,51,0.72) !important; }
  [data-theme="light"] .ab-cause         { color: rgba(29,36,51,0.45) !important; }
  [data-theme="light"] .ab-days--ok      { color: rgba(29,36,51,0.65) !important; }
  [data-theme="light"] .ab-days--muted   { color: rgba(29,36,51,0.38) !important; }
  [data-theme="light"] .ab-empty-filter  { color: rgba(29,36,51,0.45) !important; }
  [data-theme="light"] .ab-selected-notice {
    color: #7A5800 !important;
    background: rgba(255,215,0,0.12) !important;
    border-color: rgba(255,193,7,0.35) !important;
  }

  /* Route selector buttons (tablet landscape may show these) */
  [data-theme="light"] .linie-btn {
    background: rgba(255,255,255,0.92) !important;
    color: var(--linie-color, #1D2433) !important;
    border-color: var(--linie-color, rgba(0,0,0,0.15)) !important;
  }

} /* END mobile/tablet light theme — general */

/* ── Section 2: Touch-UX alert bar (phones/tablets/APK/iOS via JS class)
   body.touch-alert-ux overrides .linie-news with hardcoded dark gradient.
   Specificity: [data-theme="light"] body.touch-alert-ux .linie-news = (0,3,1)
   beats base body.touch-alert-ux .linie-news = (0,2,1), plus !important. ── */
[data-theme="light"] body.touch-alert-ux .linie-news {
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: 1px solid rgba(0,0,0,0.09) !important;
  border-bottom: 1px solid rgba(0,0,0,0.09) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07) !important;
}

/* ── Section 3: APK / iOS WebView bottom route panel
   body.app/.apk-mode override .linie-header with hardcoded dark gradient. ── */
[data-theme="light"] body.app .linie-header,
[data-theme="light"] body.apk-mode .linie-header {
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: 1px solid rgba(0,0,0,0.09) !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08) !important;
}

/* END light theme mobile/tablet/APK/iOS overrides */

/* ═══════════════════════════════════════════════════════════
   LIGHT MODE — PREMIUM POLISH v2
   Visual refinements only. Dark mode and functionality untouched.
   ═══════════════════════════════════════════════════════════ */

/* 1 ── Body background: warm off-white */
[data-theme="light"] body {
  background: #F8FAFC !important;
}

/* 10 ── Map tile theming: see "MapLibre GL canvas filter" block at end of map-style.css */

@media (min-width: 1024px) {

  /* 2 ── Header: softer glass, slate border */
  [data-theme="light"] .main-header {
    background: rgba(255,255,255,0.86) !important;
    backdrop-filter: blur(12px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
    border-bottom: 1px solid #E5E7EB !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03) !important;
  }

  /* 3 ── Sidebar: pure white, slate border, subtle depth shadow */
  [data-theme="light"] .linie-left {
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    box-shadow: 2px 0 16px rgba(0,0,0,0.04) !important;
  }
  /* Category label bars: rich slate-500 instead of plain gray */
  [data-theme="light"] .sidebar-group-label {
    color: #64748B !important;
  }
  /* Station list items: slightly more airy */
  [data-theme="light"] .linie-statie {
    padding: 11px 14px !important;
  }

  /* 4 ── Route info card: premium radius + slate border */
  [data-theme="light"] .linie-header {
    border-radius: 16px !important;
    border: 1px solid #E5E7EB !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.03) !important;
  }

  /* 4b ── Alert panel header bar: elegant slate instead of plain gray */
  [data-theme="light"] .ab-panel-header {
    background: #64748B !important;
    border-bottom-color: #5A6678 !important;
  }
  [data-theme="light"] .ab-panel-title {
    color: #FFFFFF !important;
  }
  [data-theme="light"] .ab-panel-close {
    background: rgba(255,255,255,0.12) !important;
    border-color: rgba(255,255,255,0.22) !important;
    color: rgba(255,255,255,0.85) !important;
  }
  [data-theme="light"] .ab-panel-close:hover {
    background: rgba(255,255,255,0.22) !important;
    color: #FFFFFF !important;
  }

  /* 5 ── Alert bar: warm amber palette */
  [data-theme="light"] .linie-news {
    background: #FFF7D6 !important;
    border-color: #FACC15 !important;
    box-shadow: 0 2px 12px rgba(250,204,21,0.10), inset 0 1px 0 rgba(255,255,255,0.65) !important;
  }
  [data-theme="light"] .ab-title,
  [data-theme="light"] .ab-bar-label { color: #92400E !important; }
  [data-theme="light"] .ab-bar-lines  { color: #D97706 !important; }
  [data-theme="light"] .ab-count-badge {
    background: rgba(251,191,36,0.18) !important;
    border-color: rgba(217,119,6,0.35) !important;
    color: #92400E !important;
  }
  [data-theme="light"] .ab-icon { color: #D97706 !important; }

  /* 6 ── Per-category route button palettes
     Attribute selectors target PHP-generated inline style="background:X;--linie-color:X".
     Each category provides default + hover + active states (same specificity = later wins). */

  /* Tramvai #e3a900 — amber yellow */
  [data-theme="light"] .linie-btn[style*="--linie-color:#e3a900"]        { background: #FFF7CC !important; color: #A16207 !important; border-color: #FDE68A !important; }
  [data-theme="light"] .linie-btn[style*="--linie-color:#e3a900"]:hover  { background: #FEF08A !important; border-color: #F59E0B !important; color: #92400E !important; transform: translateY(-2px) !important; }
  [data-theme="light"] .linie-btn[style*="--linie-color:#e3a900"].active { background: #FEF08A !important; border-color: #F59E0B !important; color: #92400E !important; box-shadow: 0 3px 10px rgba(245,158,11,0.22), inset 0 1px 0 rgba(255,255,255,0.55) !important; }

  /* Troleibuz #6f2095 — purple */
  [data-theme="light"] .linie-btn[style*="--linie-color:#6f2095"]        { background: #F3E8FF !important; color: #7E22CE !important; border-color: #D8B4FE !important; }
  [data-theme="light"] .linie-btn[style*="--linie-color:#6f2095"]:hover  { background: #E9D5FF !important; border-color: #A855F7 !important; color: #6B21A8 !important; transform: translateY(-2px) !important; }
  [data-theme="light"] .linie-btn[style*="--linie-color:#6f2095"].active { background: #E9D5FF !important; border-color: #A855F7 !important; color: #6B21A8 !important; box-shadow: 0 3px 10px rgba(168,85,247,0.20), inset 0 1px 0 rgba(255,255,255,0.55) !important; }

  /* Autobuz Urban #4d897f — teal */
  [data-theme="light"] .linie-btn[style*="--linie-color:#4d897f"]        { background: #DFF7F4 !important; color: #0F766E !important; border-color: #99F6E4 !important; }
  [data-theme="light"] .linie-btn[style*="--linie-color:#4d897f"]:hover  { background: #CCFBF1 !important; border-color: #0D9488 !important; color: #0F766E !important; transform: translateY(-2px) !important; }
  [data-theme="light"] .linie-btn[style*="--linie-color:#4d897f"].active { background: #CCFBF1 !important; border-color: #0D9488 !important; color: #0F766E !important; box-shadow: 0 3px 10px rgba(13,148,136,0.20), inset 0 1px 0 rgba(255,255,255,0.55) !important; }

  /* Expres #f58134 — orange */
  [data-theme="light"] .linie-btn[style*="--linie-color:#f58134"]        { background: #FFE8D6 !important; color: #C2410C !important; border-color: #FDBA74 !important; }
  [data-theme="light"] .linie-btn[style*="--linie-color:#f58134"]:hover  { background: #FEDDBB !important; border-color: #EA580C !important; color: #9A3412 !important; transform: translateY(-2px) !important; }
  [data-theme="light"] .linie-btn[style*="--linie-color:#f58134"].active { background: #FEDDBB !important; border-color: #EA580C !important; color: #9A3412 !important; box-shadow: 0 3px 10px rgba(234,88,12,0.20), inset 0 1px 0 rgba(255,255,255,0.55) !important; }

  /* Școlar #e31e25 — red */
  [data-theme="light"] .linie-btn[style*="--linie-color:#e31e25"]        { background: #FFE4E6 !important; color: #BE123C !important; border-color: #FDA4AF !important; }
  [data-theme="light"] .linie-btn[style*="--linie-color:#e31e25"]:hover  { background: #FECDD3 !important; border-color: #E11D48 !important; color: #9F1239 !important; transform: translateY(-2px) !important; }
  [data-theme="light"] .linie-btn[style*="--linie-color:#e31e25"].active { background: #FECDD3 !important; border-color: #E11D48 !important; color: #9F1239 !important; box-shadow: 0 3px 10px rgba(225,29,72,0.20), inset 0 1px 0 rgba(255,255,255,0.55) !important; }

  /* Metropolitan #0148A2 — blue (mixed-case hex preserved as-is from PHP) */
  [data-theme="light"] .linie-btn[style*="--linie-color:#0148A2"]        { background: #DBEAFE !important; color: #1D4ED8 !important; border-color: #93C5FD !important; }
  [data-theme="light"] .linie-btn[style*="--linie-color:#0148A2"]:hover  { background: #BFDBFE !important; border-color: #2563EB !important; color: #1E40AF !important; transform: translateY(-2px) !important; }
  [data-theme="light"] .linie-btn[style*="--linie-color:#0148A2"].active { background: #BFDBFE !important; border-color: #2563EB !important; color: #1E40AF !important; box-shadow: 0 3px 10px rgba(37,99,235,0.20), inset 0 1px 0 rgba(255,255,255,0.55) !important; }

  /* Vaporetto #2db8c5 — sky blue */
  [data-theme="light"] .linie-btn[style*="--linie-color:#2db8c5"]        { background: #DDF4FF !important; color: #0369A1 !important; border-color: #7DD3FC !important; }
  [data-theme="light"] .linie-btn[style*="--linie-color:#2db8c5"]:hover  { background: #BAE6FD !important; border-color: #0284C7 !important; color: #075985 !important; transform: translateY(-2px) !important; }
  [data-theme="light"] .linie-btn[style*="--linie-color:#2db8c5"].active { background: #BAE6FD !important; border-color: #0284C7 !important; color: #075985 !important; box-shadow: 0 3px 10px rgba(2,132,199,0.20), inset 0 1px 0 rgba(255,255,255,0.55) !important; }

  /* 7 ── Legend: glass effect, premium radius */
  [data-theme="light"] .map-legend.accordion {
    background: rgba(255,255,255,0.88) !important;
    backdrop-filter: blur(10px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(130%) !important;
    border: 1px solid #E5E7EB !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  /* 8 ── Direction toggle: refined white glass, slate border */
  [data-theme="light"] .direction-toggle {
    background: rgba(255,255,255,0.92) !important;
    border: 1px solid #E5E7EB !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
    border-radius: 14px !important;
  }
  [data-theme="light"] .direction-toggle label.inactive { color: #94A3B8 !important; }
  [data-theme="light"] .direction-toggle label.active   { color: #1D2433 !important; }

  /* 9 ── Footer: white glass, slate text, more vertical breathing room */
  [data-theme="light"] .main-footer {
    background: rgba(255,255,255,0.90) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-top: 1px solid #E5E7EB !important;
    box-shadow: 0 -1px 8px rgba(0,0,0,0.04) !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    color: #64748B !important;
  }
  [data-theme="light"] .main-footer a,
  [data-theme="light"] .main-footer span { color: #64748B !important; }
  [data-theme="light"] .main-footer a:hover { color: #0F172A !important; }

} /* END Light Mode Premium Polish v2 — desktop */

/* MapLibre GL canvas tile filter: see map-style.css — end of file. */