/* ============================================================================
   Wizz AYCF Planner — Design System
   Dark terminal/data-dashboard aesthetic: deep near-black base, amber +
   teal accents, monospace UI type with a grotesque display face for
   headings, dotted-rule lists, pill badges, glass-panel cards.
   ============================================================================ */

:root{
  --bg:#0d0e11; --bg2:#15171d; --panel:#181a21; --panel2:#1f222b;
  --line:#2c2f3a; --line2:#3a3e4b;
  --ink:#ece9e0; --mut:#8b8f9c; --dim:#62656f;
  --amber:#f2ad42; --amber-d:#3a2c12;
  --teal:#52cdb2; --teal-d:#123029;
  --coral:#e8694a; --coral-d:#371810;

  --radius-sm:8px; --radius:14px; --radius-lg:20px;
  --shadow:0 10px 30px -10px rgba(0,0,0,.6);
  --shadow-sm:0 4px 14px -4px rgba(0,0,0,.5);
  --bottom-nav-h:62px; /* height reserved for the mobile bottom nav — see the max-width:680px block */

  --font-mono:'Space Mono',ui-monospace,monospace;
  --font-display:'Bricolage Grotesque',sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:14px;line-height:1.6;
  background-image:
    radial-gradient(900px 500px at 80% -8%, rgba(242,173,66,.07), transparent 70%),
    radial-gradient(700px 500px at 0% 110%, rgba(82,205,178,.06), transparent 70%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--teal);text-decoration:none}
a:hover{color:var(--amber)}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;line-height:1.15;margin:0 0 .5em}
h1{font-size:1.7rem;font-weight:800}
h2{font-size:1.3rem}
h3{font-size:1.05rem}
p{margin:0 0 1em;color:var(--mut)}

.container{max-width:1320px;margin:0 auto;padding:0 24px}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes toastIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* ---------------------------------------------------------------------- Nav */
.topbar{
  position:sticky;top:0;z-index:800;
  background:rgba(13,14,17,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;height:62px;gap:16px;flex-wrap:wrap}
.brand-group{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:9px;font-family:var(--font-display);font-weight:800;font-size:14px;color:var(--ink)}
.brand .dot{width:9px;height:9px;border-radius:2px;background:var(--amber);box-shadow:0 0 12px rgba(242,173,66,.5);display:inline-block;align-self:center}
.brand small{display:block;font-family:var(--font-mono);font-weight:500;font-size:10px;color:var(--dim);letter-spacing:.12em;text-transform:uppercase}
/* Deliberately NOT styled like the nav-links pill buttons — this is an
   external "escape hatch" back to the main site, kept reachable but
   visually distinct from the Map & Routes / Dashboard tab group. */
.main-site-link{
  display:inline-flex;align-items:center;gap:5px;color:var(--dim);
  font-size:.72rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  padding:4px 2px;border-bottom:1px dotted var(--line2);transition:color .15s,border-color .15s;
}
.main-site-link:hover{color:var(--amber);border-color:var(--amber)}
.nav-username-link{color:var(--mut);transition:color .15s}
.nav-username-link:hover{color:var(--amber)}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{color:var(--mut);font-weight:700;font-size:.82rem;padding:8px 13px;border-radius:7px;transition:background .15s,color .15s}
.nav-links a:hover{background:var(--panel2);color:var(--ink)}
.nav-links a.active{color:#0d0e11;background:var(--amber)}
.nav-cta{display:flex;gap:9px;align-items:center}

/* Mobile bottom nav — markup is always rendered (see includes/nav.php) so
   it works without JS; hidden here and shown only under max-width:680px,
   where the header's own nav-links/nav-cta are hidden in turn (see that
   block) so the same controls aren't duplicated on screen at once. */
.bottom-nav{display:none}

/* ------------------------------------------------------------------- Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid var(--line2);background:var(--panel2);color:var(--ink);
  font-family:var(--font-mono);font-weight:700;font-size:.82rem;
  padding:9px 16px;border-radius:7px;cursor:pointer;
  transition:transform .12s ease,border-color .15s,background .15s,color .15s;
  text-decoration:none;letter-spacing:.01em;
}
.btn:hover{background:#262b38;border-color:var(--line2);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--amber);color:#1a1304;border-color:var(--amber)}
.btn-primary:hover{background:#ffc766;border-color:#ffc766}
.btn-ghost{background:transparent;border-color:var(--line)}
.btn-danger{background:var(--coral-d);border-color:#5a2a1a;color:#ffb39c}
.btn-danger:hover{background:#4a2216}
.btn-sm{padding:6px 11px;font-size:.74rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}

/* --------------------------------------------------------------------- Cards */
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;box-shadow:var(--shadow-sm);
}
.card + .card{margin-top:18px}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;gap:10px;flex-wrap:wrap}
.card-header h2,.card-header h3{margin:0}

/* --------------------------------------------------------------------- Badges */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:3px 10px;border-radius:100px;border:1px solid var(--line2);
  background:var(--panel2);color:var(--mut);
}
.badge-green{background:rgba(82,205,178,.1);color:var(--teal);border-color:rgba(82,205,178,.3)}
.badge-violet{background:rgba(167,139,250,.12);color:#a78bfa;border-color:rgba(167,139,250,.35);margin-left:6px}
.badge-amber{background:rgba(242,173,66,.1);color:var(--amber);border-color:rgba(242,173,66,.3)}
.badge-red{background:rgba(232,105,74,.1);color:var(--coral);border-color:rgba(232,105,74,.3)}
.badge-yellow{background:rgba(232,212,60,.12);color:#e8d43c;border-color:rgba(232,212,60,.35)}
.badge-muted{background:var(--panel2);color:var(--dim);border-color:var(--line)}

/* Freshness indicator — mirrors how "Last run" freshness is communicated
   throughout: a small dot + label, color-coded by how old the cached
   Wizz Air pull is (fresh = pulled recently, stale/old = cron may be broken). */
.freshbadge{
  display:inline-flex;align-items:center;gap:6px;font-size:.7rem;letter-spacing:.03em;
  padding:4px 11px;border-radius:100px;border:1px solid var(--line2);background:var(--panel2);color:var(--mut);
  font-family:var(--font-mono);text-transform:uppercase;vertical-align:middle;
}
.freshdot{width:6px;height:6px;border-radius:50%;background:var(--mut);flex:none}
.freshbadge.fresh{border-color:#1f5247;color:var(--teal)}
.freshbadge.fresh .freshdot{background:var(--teal);box-shadow:0 0 6px var(--teal);animation:pulse 2.4s infinite}
.freshbadge.stale{border-color:#4a3c1a;color:var(--amber)}
.freshbadge.stale .freshdot{background:var(--amber)}
.freshbadge.old{border-color:#4a221a;color:var(--coral)}
.freshbadge.old .freshdot{background:var(--coral)}

/* --------------------------------------------------------------------- Forms */
label{display:block;font-family:var(--font-mono);font-size:.74rem;font-weight:700;color:var(--dim);letter-spacing:.05em;text-transform:uppercase;margin-bottom:7px}
.char-counter{float:right;font-weight:400;letter-spacing:0;text-transform:none;color:var(--dim)}
input,select,textarea{
  width:100%;background:var(--bg2);border:1px solid var(--line2);color:var(--ink);
  padding:10px 12px;border-radius:7px;font-size:.86rem;font-family:var(--font-mono);
  transition:border-color .15s,box-shadow .15s;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(242,173,66,.14)}
input::placeholder{color:var(--dim)}

/* Custom dropdown styling — ditch the OS-default select chrome so it
   matches the dark theme instead of flashing a plain white native popup. */
select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  cursor:pointer;
  padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2362656f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 9px center;
  background-size:15px;
}
select:hover{border-color:var(--line2);background-color:#1a1d26}
select:focus{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f2ad42' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
select option{background:var(--bg2);color:var(--ink)}
select:disabled{opacity:.5;cursor:not-allowed}

/* ----------------------------------------------------------- Custom combo dropdown
   Progressive enhancement over a native <select> (see combo.js) — gives a
   fully themed open/expanded state, which a CSS-restyled native select
   can't do since the browser still renders its own unthemed popup list. */
.combo-native-hidden{display:none}
.combo{position:relative}
.combo-trigger{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:var(--bg2);border:1px solid var(--line2);color:var(--ink);
  padding:10px 12px;border-radius:7px;font-size:.86rem;font-family:var(--font-mono);
  cursor:pointer;text-align:left;transition:border-color .15s,box-shadow .15s,background .15s;
}
.combo-trigger:hover{background:#1a1d26}
.combo .combo-chevron{color:var(--dim);flex-shrink:0;transition:transform .15s}
.combo.open .combo-trigger{border-color:var(--amber);box-shadow:0 0 0 3px rgba(242,173,66,.14)}
.combo.open .combo-chevron{transform:rotate(180deg);color:var(--amber)}
.combo-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.combo-panel{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;
  background:var(--panel);border:1px solid var(--line2);border-radius:9px;
  box-shadow:var(--shadow);overflow:hidden;display:none;
}
.combo.open .combo-panel{display:block;animation:toastIn .15s ease}

.combo-search-wrap{position:relative;padding:8px;border-bottom:1px solid var(--line)}
.combo-search-wrap.hidden{display:none}
.combo-search-wrap svg{position:absolute;left:17px;top:18px;color:var(--dim);pointer-events:none}
.combo-search{padding-left:30px !important;margin:0}

.combo-list{max-height:230px;overflow-y:auto}
.combo-option{
  padding:8px 12px;font-size:.82rem;color:var(--mut);cursor:pointer;
  border-bottom:1px dotted var(--line);
}
.combo-option:last-child{border-bottom:none}
.combo-option:hover{background:rgba(242,173,66,.08);color:var(--ink)}
.combo-option.selected{color:var(--amber);font-weight:700;background:rgba(242,173,66,.06)}
.combo-option.is-hidden{display:none}

/* ------------------------------------------------------------- Segmented toggle */
.seg{display:flex;gap:3px;background:var(--bg2);border:1px solid var(--line2);border-radius:7px;padding:3px}
.seg button{
  background:none;border:none;color:var(--mut);font-family:var(--font-mono);font-weight:700;
  font-size:.72rem;padding:6px 11px;border-radius:5px;cursor:pointer;transition:background .12s,color .12s;
}
.seg button.on{background:var(--amber);color:#1a1304}
.seg button:not(.on):hover{color:var(--ink)}

/* ----------------------------------------------------- Connection suggestion */
.connection-suggestion{
  background:var(--bg2);border:1px solid var(--line2);border-radius:9px;padding:14px;margin-bottom:10px;
}
.connection-suggestion .cs-title{
  font-size:.8rem;font-weight:700;color:var(--ink);margin-bottom:11px;
  display:flex;align-items:center;gap:7px;
}
.connection-suggestion .cs-title svg{color:var(--amber);flex-shrink:0}
.connection-suggestion .cs-hop{background:var(--panel2);border:1px solid var(--line2);border-radius:6px;padding:4px 8px;font-weight:700;color:var(--ink);font-size:.76rem}
.connection-suggestion .cs-arrow{color:var(--dim);display:flex}

.cs-options{
  display:flex;flex-direction:column;gap:8px;max-height:380px;overflow-y:auto;
  margin-right:-6px;padding:2px 6px 2px 2px;
  scrollbar-width:thin;scrollbar-color:var(--line2) transparent;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding-top:10px;padding-bottom:10px;
}
.cs-options::-webkit-scrollbar{width:7px}
.cs-options::-webkit-scrollbar-track{background:transparent}
.cs-options::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px}
.cs-options::-webkit-scrollbar-thumb:hover{background:var(--dim)}
.cs-option{
  background:var(--panel2);border:1px solid var(--line2);border-radius:9px;padding:10px 11px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  transition:border-color .12s,background .12s;
}
.cs-option.is-best{border-color:rgba(242,173,66,.45);background:rgba(242,173,66,.07)}
.cs-option .cs-path{display:flex;align-items:center;flex-wrap:wrap;gap:5px;font-size:.78rem;flex:1;min-width:0}
.cs-option .cs-legs-badge{
  font-size:.62rem;font-weight:700;color:var(--mut);background:var(--bg2);border:1px solid var(--line);
  border-radius:5px;padding:3px 7px;letter-spacing:.03em;text-transform:uppercase;flex-shrink:0;margin-right:2px;
  display:inline-flex;align-items:center;gap:3px;
}
.cs-option .cs-legs-badge.best{color:#1a1304;background:var(--amber);border-color:var(--amber)}
.cs-option .cs-add-btn{flex-shrink:0}

/* ----------------------------------------------------------- Map city panel
   Lives BELOW the map (not floating over it, not in the sidebar — the map
   and the "Find a route" panel stay deliberately separate systems). Shown
   permanently; its content switches between a placeholder ("Select a
   city") and the selected city's departures/arrivals. */
.map-col{display:flex;flex-direction:column;gap:18px;min-width:0}
.map-city-section .mcp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:11px}
.mcp-name{font-family:var(--font-display);font-weight:800;font-size:1.15rem;color:var(--ink);overflow-wrap:break-word}
.mcp-name.placeholder{color:var(--mut);font-weight:700}
.mcp-sub{font-size:.76rem;color:var(--mut);margin-top:3px;line-height:1.5}
.mcp-close{
  background:none;border:1px solid var(--line2);color:var(--mut);cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;gap:5px;padding:6px 10px;border-radius:7px;font-size:.72rem;
  font-family:var(--font-mono);
}
.mcp-close:hover{color:var(--ink);border-color:var(--dim)}

.mcp-toggle{display:flex;gap:5px;margin-bottom:13px;flex-wrap:wrap}
.mcp-search-field{margin-bottom:11px}
.mcp-search-field .search-box input{font-size:.8rem;padding:8px 12px 8px 32px}
.mcp-toggle button{
  flex:1;max-width:160px;background:var(--bg2);border:1px solid var(--line2);color:var(--mut);
  font-family:var(--font-mono);font-size:.74rem;font-weight:700;padding:9px 8px;border-radius:7px;
  cursor:pointer;transition:background .12s,color .12s;text-align:center;
  display:inline-flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap;
}
.mcp-toggle button.dep.on{background:var(--amber);color:#1a1304;border-color:var(--amber)}
.mcp-toggle button.arr.on{background:var(--teal);color:#08241c;border-color:var(--teal)}
.mcp-toggle button.rt.on{background:#a78bfa;color:#1a1304;border-color:#a78bfa}
.mcp-toggle button:not(.on):hover{color:var(--ink)}

.city-dest-list{max-height:280px;overflow-y:auto}
.city-dest-list.scrollbar-thin{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
@media(max-width:760px){.city-dest-list.scrollbar-thin{grid-template-columns:1fr}}
.city-dest{padding:9px 2px;border-bottom:1px dotted var(--line);cursor:pointer;transition:background .12s}
.city-dest:hover{background:rgba(242,173,66,.06)}
.city-dest .top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.city-dest .nm{font-size:.8rem;color:var(--ink);font-weight:700;min-width:0;overflow-wrap:break-word}
.city-dest .nm .ar{font-size:.7rem;margin:0 4px;color:var(--dim)}
.city-dest .add{font-size:.66rem;color:var(--dim);flex-shrink:0}
.city-dest:hover .add{color:var(--amber)}
/* Round-trip destination row: a real button sitting to the right of the
   pair, rather than the plain "+ add" text used by the dep/arr lists —
   this is the row the round-trip destinations live in. */
.city-dest-rt{cursor:default;display:flex;align-items:center;justify-content:space-between;gap:10px}
.city-dest-rt:hover{background:rgba(167,139,250,.07)}
.city-dest-rt .top{flex:1;min-width:0}
.city-dest-rt .rt-add-btn{flex-shrink:0}

.leg-date-badge{
  display:inline-flex;align-items:center;gap:3px;margin-left:8px;
  font-size:.62rem;font-weight:700;color:var(--mut);background:var(--panel2);
  border:1px solid var(--line2);border-radius:5px;padding:1px 6px;vertical-align:middle;
}
.field{margin-bottom:15px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}

/* Departure/Arrival stacked vertically (not side-by-side) so each field
   has the full panel width — long city names no longer clip — with a
   swap button in its own row between them. Deliberately NOT absolutely
   positioned/overlapping anything, so there's no possible z-index conflict
   with the combo dropdown that could steal its clicks. */
.dep-arr-stack{margin-bottom:15px}
.dep-arr-stack .field{margin-bottom:0}
.swap-row{display:flex;justify-content:center;margin:6px 0;position:relative;z-index:65}
.swap-btn{
  width:32px;height:32px;border-radius:50%;
  background:var(--panel2);border:1px solid var(--line2);color:var(--mut);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .12s,color .12s,border-color .12s,transform .25s;
}
.swap-btn:hover{background:var(--amber);color:#1a1304;border-color:var(--amber)}
.swap-btn.spin{transform:rotate(180deg)}
.help-text{font-size:.72rem;color:var(--dim);margin-top:5px}
.checkbox-label{
  display:flex;align-items:center;gap:9px;font-size:.8rem;color:var(--mut);
  cursor:pointer;user-select:none;position:relative;
}
.checkbox-label input[type=checkbox]{
  position:absolute;opacity:0;width:1px;height:1px;margin:0;
}
.checkbox-box{
  width:19px;height:19px;border-radius:6px;flex-shrink:0;
  border:1.5px solid var(--line2);background:var(--bg2);
  display:flex;align-items:center;justify-content:center;
  transition:background .12s,border-color .12s,box-shadow .12s;
}
.checkbox-box svg{opacity:0;transform:scale(.6);transition:opacity .12s,transform .12s;color:#1a1304}
.checkbox-label input:checked ~ .checkbox-box{background:var(--amber);border-color:var(--amber)}
.checkbox-label input:checked ~ .checkbox-box svg{opacity:1;transform:scale(1)}
.checkbox-label input:focus-visible ~ .checkbox-box{box-shadow:0 0 0 3px rgba(242,173,66,.25)}
.checkbox-label:hover .checkbox-box{border-color:var(--dim)}
.error-text{font-size:.72rem;color:var(--coral);margin-top:5px}

/* Search inputs get a leading icon, terminal-prompt style */
.search-box{position:relative}
.search-box input{padding-left:32px}
.search-box svg{position:absolute;left:9px;top:9px;color:var(--dim);pointer-events:none}

.alert{padding:11px 15px;border-radius:8px;font-size:.82rem;margin-bottom:15px;border:1px solid;font-family:var(--font-mono)}
.alert-error{background:rgba(232,105,74,.08);border-color:rgba(232,105,74,.3);color:#ffb39c}
.alert-success{background:rgba(82,205,178,.08);border-color:rgba(82,205,178,.3);color:var(--teal)}
.alert-info{background:rgba(242,173,66,.08);border-color:rgba(242,173,66,.3);color:var(--amber)}

/* ----------------------------------------------------------------- Auth page */
.auth-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card{width:100%;max-width:420px}
.auth-card .card{padding:30px}
.auth-logo{text-align:center;margin-bottom:20px}
.auth-footer-link{text-align:center;margin-top:16px;font-size:.82rem;color:var(--mut)}

/* ---------------------------------------------------------------- Dashboard */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:2px}
.stat-box{background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:14px 15px}
.stat-box .num{font-family:var(--font-display);font-size:1.5rem;font-weight:800;color:var(--ink)}
.stat-box .label{font-size:.68rem;color:var(--dim);text-transform:uppercase;letter-spacing:.08em;margin-top:2px}

/* Account summary card at the top of profile.php */
.profile-summary-card{background:linear-gradient(160deg, rgba(242,173,66,.06), rgba(167,139,250,.04) 60%, transparent);}
.profile-summary-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.profile-avatar{
  width:52px;height:52px;border-radius:50%;flex-shrink:0;
  background:var(--panel2);border:1.5px solid var(--line2);
  display:flex;align-items:center;justify-content:center;color:var(--amber);
}
.profile-summary-name{font-family:var(--font-display);font-weight:800;font-size:1.15rem;color:var(--ink)}
.profile-summary-email{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--mut);margin-top:2px}
.profile-summary-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:520px){.profile-summary-stats{grid-template-columns:repeat(2,1fr)}}
.profile-summary-since{margin-top:14px;font-size:.72rem;color:var(--dim);text-align:right}

.plan-table{width:100%;border-collapse:collapse}
.plan-table th{text-align:left;font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;color:var(--dim);padding:9px 11px;border-bottom:1px solid var(--line)}
.plan-table td{padding:11px;border-bottom:1px dotted var(--line);font-size:.84rem;vertical-align:middle}
.plan-table tr:hover td{background:rgba(255,255,255,.02)}
.plan-actions{display:flex;gap:6px;flex-wrap:wrap}

@media(max-width:640px){
  .plan-table th:nth-child(3), .plan-table td:nth-child(3),
  .plan-table th:nth-child(4), .plan-table td:nth-child(4),
  .plan-table th:nth-child(5), .plan-table td:nth-child(5){display:none}
  .plan-actions .btn-duplicate, .plan-actions .btn-export{display:none}
}

/* Route summary shown as connected chips + arrows (same visual language
   as the itinerary list in the planner) instead of a bare text string. */
.route-line-cell{min-width:170px}
.route-line{display:flex;align-items:center;flex-wrap:wrap;gap:0;margin:3px 0}
.route-line + .route-line{margin-top:6px}
.route-line-chip{
  font-family:var(--font-mono);font-weight:700;font-size:.72rem;color:var(--ink);
  background:var(--panel2);border:1px solid var(--line2);border-radius:5px;
  padding:2px 7px;letter-spacing:.02em;
}
.route-line-arrow{display:inline-flex;align-items:center;color:#a78bfa;margin:0 4px;flex-shrink:0}

/* Status bubble: the badge itself is now a button that opens a small
   dropdown to change the plan's status without leaving the dashboard. */
.status-bubble-wrap{position:relative;display:inline-block}
.status-bubble{cursor:pointer;border:none;gap:5px}
.status-bubble-chevron{transition:transform .15s}
.status-bubble-wrap.open .status-bubble-chevron{transform:rotate(180deg)}
.status-dropdown{
  position:fixed;z-index:1200;min-width:150px;
  background:var(--panel);border:1px solid var(--line2);border-radius:9px;
  box-shadow:var(--shadow);overflow:hidden;
}

/* Horizontal-scroll wrapper around the "Saved plans" table — themed thin
   scrollbar (instead of the browser default) plus rounded corners so the
   scroll affordance reads as an intentional part of the design. */
.plan-table-scroll{
  overflow-x:auto;border-radius:10px;padding-bottom:2px;
  scrollbar-width:thin;scrollbar-color:var(--line2) transparent;
}
.plan-table-scroll::-webkit-scrollbar{height:8px}
.plan-table-scroll::-webkit-scrollbar-track{background:transparent}
.plan-table-scroll::-webkit-scrollbar-thumb{background:var(--line2);border-radius:6px}
.plan-table-scroll::-webkit-scrollbar-thumb:hover{background:var(--dim)}
.status-option{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  background:none;border:none;color:var(--mut);font-family:var(--font-mono);
  font-size:.76rem;font-weight:700;padding:9px 12px;cursor:pointer;transition:background .12s,color .12s;
}
.status-option:hover{background:var(--panel2);color:var(--ink)}
.status-option.current{color:var(--ink)}
.status-option.current::after{content:'✓';margin-left:auto;color:var(--amber)}
.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;display:inline-block;background:var(--mut)}
.status-dot-draft{background:var(--coral)}
.status-dot-active{background:var(--teal)}
.status-dot-archived{background:#e8d43c}

/* --------------------------------------------------------------- Planner UI */
.planner-layout{display:grid;grid-template-columns:480px 1fr;gap:18px;align-items:start}
@media(max-width:1120px){.planner-layout{grid-template-columns:1fr}}

.map-wrap{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
#map{height:640px;width:100%;background:#0b0c0f}
#dashboardMap{height:380px;width:100%;background:#0b0c0f;border-radius:0 0 var(--radius) var(--radius);position:relative}
@media(max-width:760px){#dashboardMap{height:280px}}
.dash-map-legend{display:flex;gap:14px;flex-wrap:wrap}
@media(max-width:980px){#map{height:440px}}

.map-legend{position:absolute;bottom:14px;left:14px;z-index:400}
.legend-toggle{
  width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(13,14,17,.9);border:1px solid var(--line2);color:var(--mut);
  font-family:var(--font-display);font-weight:800;font-size:.85rem;cursor:pointer;
  backdrop-filter:blur(6px);transition:background .12s,color .12s,border-color .12s;
}
.legend-toggle:hover,.legend-toggle.open{background:var(--amber);color:#1a1304;border-color:var(--amber)}
.legend-panel{
  position:absolute;bottom:34px;left:0;min-width:200px;
  background:rgba(13,14,17,.94);border:1px solid var(--line2);border-radius:9px;
  padding:10px 14px;font-size:.72rem;backdrop-filter:blur(6px);font-family:var(--font-mono);
}
.legend-panel strong{font-family:var(--font-display);font-weight:700}
.legend-panel .legend-row,.dash-map-legend .legend-row{display:flex;align-items:center;gap:8px;margin:5px 0 0;color:var(--mut)}
.legend-swatch{width:16px;height:3px;border-radius:2px;display:inline-block}


.route-list{max-height:320px;overflow-y:auto;margin-top:10px;border-top:1px solid var(--line)}
.route-item{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 2px;border-bottom:1px dotted var(--line);font-size:.8rem;cursor:pointer;
}
.route-item:hover{background:rgba(255,255,255,.03)}
.route-item > div:first-child{min-width:0;flex:1}
.route-item .route-codes{font-weight:700;color:var(--ink);font-family:var(--font-mono);overflow-wrap:break-word;word-break:break-word}
.route-item .route-cities{color:var(--dim);font-size:.7rem;margin-top:1px;overflow-wrap:break-word;word-break:break-word}
.route-item .btn-sm{flex-shrink:0}

.itinerary-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.itinerary-leg{
  display:flex;align-items:center;gap:10px;background:var(--bg2);border:1px solid var(--line);
  border-radius:9px;padding:10px 12px;cursor:grab;transition:border-color .12s,opacity .12s,transform .12s;
}
.itinerary-leg:active{cursor:grabbing}
.itinerary-leg.dragging{opacity:.4}
.itinerary-leg.drag-over{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber) inset}
.itinerary-leg .leg-index{
  width:23px;height:23px;border-radius:50%;background:var(--amber);color:#1a1304;
  font-family:var(--font-mono);font-weight:800;font-size:.7rem;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.itinerary-leg .leg-route{flex:1;min-width:0;font-weight:700;font-size:.84rem;overflow-wrap:break-word;word-break:break-word}
.itinerary-leg .leg-sub{color:var(--dim);font-size:.7rem;margin-top:1px;overflow-wrap:break-word;word-break:break-word}
.itinerary-leg .leg-notes{color:var(--teal);display:flex;align-items:center;gap:4px}
.itinerary-leg .leg-notes svg{flex-shrink:0}
.itinerary-empty{color:var(--dim);font-size:.8rem;padding:18px 4px;text-align:center;border:1px dashed var(--line);border-radius:9px}

/* ------------------------------------------------------- Flight schedule UI
   Live departure/arrival times per leg (AviationStack, see
   FlightScheduleService) and the layover gap calculated between legs. */
.leg-schedule{
  display:flex;align-items:center;gap:5px;font-size:.72rem;margin-top:5px;
  font-family:var(--font-mono);color:var(--mut);flex-wrap:wrap;
}
.leg-schedule.loading{color:var(--dim);font-style:italic}
.leg-schedule.unavailable{color:var(--dim)}
.leg-schedule.available .sched-time{color:var(--ink);font-weight:700}
.leg-schedule.available .sched-arrow{color:var(--dim);display:flex}
.leg-schedule .leg-duration{color:var(--dim)}
.leg-schedule .leg-flight-no{
  color:var(--mut);background:var(--panel2);border:1px solid var(--line);border-radius:4px;
  padding:1px 5px;font-size:.66rem;letter-spacing:.02em;
}
.leg-schedule .sched-stale{
  display:inline-flex;align-items:center;gap:3px;color:var(--coral);
  font-size:.66rem;text-transform:uppercase;letter-spacing:.03em;
}
.leg-schedule .sched-airport{
  color:var(--dim);font-size:.62rem;border:1px solid var(--line);border-radius:3px;
  padding:0 3px;cursor:help;
}
.leg-schedule .sched-pushed{
  color:#1a1304;background:var(--amber);border-radius:4px;padding:1px 5px;
  font-size:.62rem;font-weight:800;letter-spacing:.02em;
}
.leg-schedule.unavailable .sched-reason{display:inline-flex;color:var(--coral);cursor:help}

.layover-slot{display:block}
.layover-indicator{
  display:flex;align-items:center;gap:6px;font-size:.72rem;font-family:var(--font-mono);
  padding:7px 12px;margin:2px 0 2px 11px;border-left:2px dotted var(--line2);
}
.layover-indicator svg{flex-shrink:0}
.layover-indicator.good{color:var(--teal)}
.layover-indicator.good svg{color:var(--teal)}
.layover-indicator.tight{color:var(--coral)}
.layover-indicator.tight svg{color:var(--coral)}
.layover-indicator.unknown{color:var(--dim)}

.scrollbar-thin::-webkit-scrollbar{width:8px}
.scrollbar-thin::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px}
.route-list::-webkit-scrollbar{width:8px}
.route-list::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px}

/* --------------------------------------------------------------- SVG map */
/* D3 + topojson world map — coastlines via world-atlas, natural-earth
   projection, bowed flight-path arcs — the same rendering approach as the
   Daily Archive's Route Map tab and the Live tracker's minimap. */
.mapsvg{display:block;width:100%;height:100%;cursor:grab}
.mapsvg:active{cursor:grabbing}
.land{fill:#1c1f28;stroke:#343849;stroke-width:.75}

.city-label{
  fill:#cdd2dc;font-family:var(--font-mono);font-size:10px;font-weight:600;
  paint-order:stroke;stroke:#060708;stroke-width:3px;stroke-linejoin:round;
  white-space:nowrap;pointer-events:none;user-select:none;
}
.city-label.city-label-hidden{display:none!important}
.city{cursor:pointer}

.svgmap-tip{
  position:absolute;pointer-events:none;transform:translate(-50%,-130%);
  background:#0a0b0d;border:1px solid var(--line2);border-radius:7px;
  padding:5px 9px;font-size:11px;color:var(--ink);white-space:nowrap;
  opacity:0;transition:opacity .1s;box-shadow:var(--shadow);z-index:5;
}

/* --------------------------------------------------------------------- Misc */
.flex{display:flex}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.gap-8{gap:8px} .gap-12{gap:12px}
.mt-0{margin-top:0} .mt-12{margin-top:12px} .mt-20{margin-top:20px}
.text-muted{color:var(--mut)}
.text-sm{font-size:.82rem}
.text-center{text-align:center}
.hidden{display:none !important}

footer.site-footer{text-align:center;color:var(--dim);font-size:.74rem;padding:36px 0 28px;font-family:var(--font-mono)}

.modal-backdrop{position:fixed;inset:0;background:rgba(5,6,8,.74);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:1000}
.modal-card{width:100%;max-width:480px;margin:16px}

/* Custom confirm/choice modal — replaces window.confirm()/prompt() with a
   themed card + button row; buttons resolve the calling confirmModal()
   promise with whichever `value` was configured for them. */
.confirm-modal-card .card-header{margin-bottom:10px}
.confirm-modal-btns{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:14px}
@media(max-width:480px){.confirm-modal-btns{justify-content:stretch}.confirm-modal-btns .btn{flex:1}}

/* Share-plan modal (dashboard.js openShareModal) */
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.switch{position:relative;display:inline-block;width:38px;height:22px;flex-shrink:0}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.switch-slider{position:absolute;inset:0;background:var(--line2);border-radius:999px;transition:background .15s;pointer-events:none}
.switch-slider::before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;background:var(--mut);border-radius:50%;transition:transform .15s,background .15s}
.switch input:checked ~ .switch-slider{background:rgba(242,173,66,.35)}
.switch input:checked ~ .switch-slider::before{transform:translateX(16px);background:var(--amber)}
.switch input:focus-visible ~ .switch-slider{box-shadow:0 0 0 3px rgba(242,173,66,.25)}
.share-link-row{display:flex;gap:7px;align-items:center}
.share-link-row input{flex:1;font-size:.78rem;color:var(--mut)}
.share-on-badge{margin-left:5px;padding:1px 6px;font-size:.62rem;vertical-align:1px}

/* --------------------------------------------------------- Add-leg day picker
   Popup timetable shown whenever a route (or an Outbound+Return round-trip
   pair) is about to be added to the trip — lets the person pick one or
   more of the next 4 bookable days (today + 3), previewing each day's
   known schedule. Multi-select: clicking a day toggles it, independent of
   the others. */
.addleg-modal-card{max-width:560px}
.addleg-leg + .addleg-leg{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.addleg-leg-route{font-weight:700;font-size:.88rem;color:var(--ink);margin-bottom:10px}
.addleg-tag{
  display:inline-block;font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  color:#a78bfa;background:rgba(167,139,250,.12);border:1px solid rgba(167,139,250,.35);
  border-radius:5px;padding:1px 7px;margin-right:6px;vertical-align:middle;
}
.daypick-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(max-width:460px){.daypick-row{grid-template-columns:repeat(2,1fr)}}
.daypick-card{
  background:var(--bg2);border:1.5px solid var(--line2);border-radius:9px;
  padding:9px 6px;text-align:center;cursor:pointer;color:var(--mut);
  font-family:var(--font-mono);transition:border-color .12s,background .12s,color .12s;
}
.daypick-card:hover{border-color:var(--dim);color:var(--ink)}
.daypick-card.selected{border-color:var(--amber);background:rgba(242,173,66,.1);color:var(--ink)}
.daypick-date{font-weight:800;font-size:.78rem;margin-bottom:4px}
.daypick-card.selected .daypick-date{color:var(--amber)}
.daypick-sched{font-size:.64rem;color:var(--dim);min-height:1.2em}
.daypick-card.selected .daypick-sched{color:var(--mut)}

.spinner{width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:var(--ink);animation:spin .7s linear infinite}

.toast-stack{position:fixed;top:74px;right:18px;z-index:2000;display:flex;flex-direction:column;gap:9px}
.toast{
  background:var(--panel);border:1px solid var(--line2);border-radius:9px;
  padding:11px 15px;font-size:.8rem;font-family:var(--font-mono);
  box-shadow:var(--shadow);min-width:240px;animation:toastIn .18s ease;
}
.toast.toast-error{border-color:rgba(232,105,74,.4)}
.toast.toast-success{border-color:rgba(82,205,178,.4)}

/* Refresh icon spins while a fetch is in flight */

/* ------------------------------------------------------- Data-age status pill
   Fixed bottom-right indicator showing whether the cached availability data
   is from today's or yesterday's Wizz Air PDF pull (or older, which usually
   means the cron job needs attention) — styled as a small glass-panel chip
   with a glowing status dot, matching the compact pill/chip language used
   for stats and status badges across the site. The exact snapshot date is
   part of the same markup throughout (see api.js) and is purely shown or
   hidden by width via .bubble-date below — no JS resize handling needed. */
.data-age-bubble{
  position:fixed;bottom:18px;right:18px;z-index:900;
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(15,18,26,.78);backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);
  border:1px solid var(--line2);border-radius:100px;
  padding:8px 15px 8px 12px;
  font-family:var(--font-mono);font-size:.74rem;font-weight:700;letter-spacing:.01em;
  color:var(--mut);box-shadow:0 8px 24px rgba(0,0,0,.35);
  animation:toastIn .2s ease;
  transition:border-color .2s,box-shadow .2s;
}
.data-age-bubble .freshdot{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--dim);
  box-shadow:0 0 0 3px rgba(255,255,255,.05);
}
.data-age-bubble .bubble-text{color:inherit;white-space:nowrap}
.data-age-bubble .bubble-date{color:var(--dim);font-weight:600}

.data-age-bubble.fresh{border-color:rgba(82,205,178,.32);color:var(--teal)}
.data-age-bubble.fresh .freshdot{background:var(--teal);box-shadow:0 0 9px var(--teal);animation:pulse 2.4s infinite}
.data-age-bubble.stale{border-color:rgba(242,173,66,.32);color:var(--amber)}
.data-age-bubble.stale .freshdot{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.data-age-bubble.old{border-color:rgba(232,105,74,.32);color:var(--coral)}
.data-age-bubble.old .freshdot{background:var(--coral);box-shadow:0 0 8px var(--coral)}

/* ===================================================== Phone compatibility
   Single breakpoint for restructuring navigation onto a fixed bottom bar —
   the header's nav-links/nav-cta (Main Site / Map & Routes / Dashboard /
   Log in / Sign up / Log out) are hidden entirely below this width rather
   than shrunk into the header, since cramming six text links and buttons
   into a phone-width header is illegible regardless of how small they're
   made; .bottom-nav (always rendered server-side — see includes/nav.php)
   becomes visible instead and carries the same destinations as icons. */
@media(max-width:680px){
  body{padding-bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom))}
  .topbar .nav-links,.topbar .nav-cta{display:none}
  .topbar-inner{height:54px}
  .brand{font-size:12px}
  .brand small{font-size:9px}
  .main-site-link{font-size:.62rem;gap:3px}
  .main-site-link span,.main-site-link svg{flex-shrink:0}

  .bottom-nav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:850;
    height:var(--bottom-nav-h);
    background:rgba(13,14,17,.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .bottom-nav a{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    color:var(--dim);text-decoration:none;font-family:var(--font-mono);
    font-size:.6rem;letter-spacing:.02em;text-transform:uppercase;
    transition:color .12s;
  }
  .bottom-nav a svg{flex-shrink:0}
  .bottom-nav a.active{color:var(--amber)}
  .bottom-nav a:active{color:var(--ink)}

  .data-age-bubble{
    bottom:calc(var(--bottom-nav-h) + 10px);right:12px;left:auto;
    max-width:calc(100% - 24px);
  }
  .data-age-bubble .bubble-date{display:none}

  .container{padding:0 14px}
  .card{padding:16px 16px}
  .auth-card .card{padding:20px}
  .auth-shell{padding:14px}
  .field-row{grid-template-columns:1fr}
  #map{height:380px}
}