/* ================================================
   CAREER PREVIEW — layered on top of career.css (career.html only)
   Sticky top bar, consistent card headers, tighter spacing, crew ID card.
   ================================================ */

.content-wrapper { overflow-x: clip; } /* hidden makes a scroll box and breaks sticky */

/* ── Top bar ── */
.ctb {
    position: sticky;
    top: 10px;
    z-index: 980;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 52px;
    margin: 0 0 .9rem;
    padding: 6px 8px;
    box-sizing: border-box;
    border-radius: 20px;
}
/* Frosted bar: top bar, Edit Flights save bar, Calendar tap hint */
.ctb, .ef-savebar, #tap-hint {
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid #e2e8f0;
    box-shadow: 0 6px 20px -10px rgba(15, 23, 42, .25);
}
/* Mini crew ID: collapsed until the crew ID card scrolls under the bar (.show-id) */
.ctb-id {
    display: flex; align-items: center; gap: .6rem; flex: none; cursor: pointer; /* click = back to top */
    max-width: 0; opacity: 0; overflow: hidden; margin-right: -1rem; /* cancels the bar gap while hidden */
    transition: max-width .35s ease, opacity .25s ease, margin-right .35s ease;
}
.ctb.show-id .ctb-id, .ctb .ctb-id.jp-id, .ctb .ctb-id.ff-id, .ctb .ctb-id.hub-id { max-width: 300px; opacity: 1; margin-right: 0; }
.ctb-logo {
    width: 68px; height: 36px; flex: none; border-radius: 10px; overflow: hidden;
    display: grid; place-items: center; background: transparent; border: 0;
    color: var(--career-primary); font-size: .9rem;
}
/* Whole logo, fitted inside the box (wordmarks like Air France have no spare space to crop) */
.ctb-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px 6px; box-sizing: border-box; }
.ctb-title { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; font-weight: 600; font-size: .9rem; color: #1e293b; max-width: 190px; }
.ctb-title > * { overflow: hidden; text-overflow: ellipsis; }
.ctb-title small { font-size: .7rem; font-weight: 500; color: #64748b; }
.ctb-links { display: flex; gap: .15rem; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ctb-links::-webkit-scrollbar { display: none; }
.ctb-links a { padding: .35rem .75rem; border-radius: 999px; font-size: .8rem; font-weight: 500; color: #64748b; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.ctb-links a:hover { color: #1e293b; background: rgba(64, 146, 204, .08); }
.ctb-links a.is-active { color: var(--career-primary); background: rgba(64, 146, 204, .12); font-weight: 600; }
.ctb-clocks { margin-left: auto; flex: none; display: flex; align-items: center; gap: .75rem; height: 38px; padding: 0 .9rem; border-radius: 999px; background: #f1f5f9; font-size: .82rem; color: #64748b; }
.ctb-clocks b { margin-left: .25rem; color: #1e293b; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ctb-clocks i { width: 1px; height: 16px; background: #cbd5e1; }
.ctb-acts { flex: none; display: flex; align-items: center; min-width: 40px; padding-left: 6px; border-left: 1px solid #e2e8f0; }

/* The site's account/bell cluster, moved in from the corner by careerpage.js */
.ctb .ifly-topbar { position: static; padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.dark-mode .ctb .ifly-topbar { background: none; border: 0; }

body.dark-mode .ctb, body.dark-mode .ef-savebar, body.dark-mode #tap-hint { background: rgba(44, 44, 46, .9); border-color: #3a3a3c; }
body.dark-mode .ctb-logo img { background: #fff; border-radius: 8px; } /* dark logos stay legible */
body.dark-mode .ctb-title { color: #f1f5f9; }
body.dark-mode .ctb-links a { color: #a1a1aa; }
body.dark-mode .ctb-links a:hover { color: #f1f5f9; background: rgba(255, 255, 255, .06); }
body.dark-mode .ctb-links a.is-active { background: rgba(64, 146, 204, .2); }
body.dark-mode .ctb-clocks { background: #1f1f21; color: #a1a1aa; }
body.dark-mode .ctb-clocks b { color: #f1f5f9; }
body.dark-mode .ctb-clocks i, body.dark-mode .ctb-acts { border-color: #3a3a3c; }
body.dark-mode .ctb-clocks i { background: #3a3a3c; }
body.airline-branding .ctb-links a.is-active { color: var(--airline-color, var(--career-primary)); }

/* Laptop: drop the airline/rank text, keep the logo */
@media (max-width: 1280px) { .ctb-title { display: none; } .ctb.show-id .ctb-id { max-width: 74px; } }
/* Tablet: shorter clock labels ("EDT" not "Local · EDT") */
@media (max-width: 1100px) {
    .ctb { gap: .6rem; }
    .ctb-id { margin-right: -.6rem; }
    .ctb-wide { display: none; }
    .ctb-clocks { gap: .5rem; padding: 0 .7rem; font-size: .78rem; }
}
/* Tablet + phone: clocks + account on row 1, links get their own row 2 */
@media (max-width: 1024px) {
    .ctb { flex-wrap: wrap; gap: .35rem .5rem; border-radius: 16px; }
    .ctb-links { order: 3; width: 100%; }
    .ctb-clocks { margin-left: 0; }
    .ctb-acts { margin-left: auto; border-left: 0; padding-left: 0; }
}
/* Phone: row 1 also clears the fixed hamburger */
@media (max-width: 768px) {
    .ctb { padding: 6px 8px 6px 56px; top: 8px; }
    .ctb-id { display: none; }
    .ctb-links { order: 3; margin-left: -48px; width: calc(100% + 48px); } /* row 2 runs under the hamburger gap */
    .ctb-links a { padding: .4rem .7rem; }
    .ctb-clocks { margin-left: 0; height: 34px; font-size: .74rem; }
    .ctb-acts { margin-left: auto; border-left: 0; padding-left: 0; }
}
@media (max-width: 380px) { .ctb-clocks { gap: .35rem; padding: 0 .5rem; font-size: .7rem; } }

/* ── Consistent section headers: coloured icon tile + left title + actions right ── */
#career-dashboard-section .content-card h2,
#career-dashboard-section .sidebar-card > h3 {
    display: flex; align-items: center; justify-content: flex-start; gap: .7rem;
    margin: 0 0 .8rem; text-align: left;
    font-family: 'Poppins', sans-serif; font-size: 1rem; font-weight: 600; letter-spacing: .01em;
    color: #1e293b; text-transform: none;
}
#career-dashboard-section .content-card h2::after,
#career-dashboard-section .sidebar-card > h3::after { display: none !important; }
#career-dashboard-section .section-toggle-header { justify-content: flex-start !important; display: flex; align-items: center; }
#career-dashboard-section .section-toggle-header h2 { margin: 0; }
#career-dashboard-section .content-card h2.section-toggle-header > span { display: flex; align-items: center; gap: .7rem; }
#career-dashboard-section .career-week-header { justify-content: space-between; margin-bottom: .8rem; }
#career-dashboard-section .career-week-header h2 { margin: 0; }
#career-dashboard-section .sidebar-card.leaderboard-sidebar > h3 { width: 100%; }
#career-dashboard-section .sidebar-card.leaderboard-sidebar > h3 .leaderboard-toggle { margin-left: auto; }
.cs-ic {
    width: 34px; height: 34px; flex: none; border-radius: 10px;
    display: inline-grid; place-items: center;
    background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); font-size: .9rem;
}
.cs-ic i { margin: 0 !important; color: inherit !important; width: auto; }
body.dark-mode #career-dashboard-section .content-card h2,
body.dark-mode #career-dashboard-section .sidebar-card > h3 { color: #f1f5f9; }
body.dark-mode .cs-ic { background: color-mix(in srgb, var(--c) 22%, transparent); }

/* ── One card shell + tighter spacing ── */
#career-dashboard-section .content-card,
#career-dashboard-section .sidebar-card {
    border-radius: 14px; border: 1px solid #e8edf3; padding: 1.05rem 1.25rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 14px rgba(15, 23, 42, .05);
}
#career-dashboard-section .career-main-column,
#career-dashboard-section .career-sidebar-column { gap: .65rem; }
#career-dashboard-section .career-main-grid { gap: .9rem; margin-top: .9rem; }
#career-dashboard-section .content-card[id],
#career-dashboard-section .sidebar-card { scroll-margin-top: 80px; }
body.dark-mode #career-dashboard-section .content-card,
body.dark-mode #career-dashboard-section .sidebar-card { border-color: #3a3a3c; box-shadow: 0 2px 10px rgba(0, 0, 0, .3); }
/* Leaflet controls are z-index 1000; keep them under the sticky bar */
#career-dashboard-section .leaflet-container { isolation: isolate; }

/* ── Employer: crew ID card / Contract: pay + timeline ── */
.ec-row-wrap { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: .9rem; } /* crew 60 / contract 40 */
/* Shared card shell (all previews) */
.ec-id, .jp-card, #jobs-status-header .current-status-panel, .adir-profile-col, #adir-openings:not(:empty), .jp-noapp,
.hub-card, .hub-week, .sp-hero, body[data-career-page="scheduling"] .sched-steps,
.nw-hero, .nw-feature, .nw-card, .nw-page, .nw-log {
    border-radius: 14px; background: #fff; border: 1px solid #e8edf3; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 14px rgba(15, 23, 42, .05);
}
.ec-id { overflow: hidden; }
/* Shared coloured band: blue, or the airline colour when branding is on (Dashboard's mode cards set their own) */
.ec-band, #jobs-status-header .csp-header, .hub-band, .sp-band, .pv-band, .nw-hero-band, .nw-page-band { position: relative; overflow: hidden; display: flex; align-items: center; color: #fff; }
.ec-band, #jobs-status-header .csp-header, .sp-band, .pv-band, .nw-hero-band { background: linear-gradient(115deg, #2d6fae, #4092cc 60%, #5aa7e0); }
/* Band in its own colour (--hub-c): Dashboard mode cards, What's New page cards */
.hub-band, .nw-page-band { background: linear-gradient(115deg, color-mix(in srgb, var(--hub-c) 72%, #000), var(--hub-c)); }
body.airline-branding .ec-band, body.airline-branding #jobs-status-header .csp-header, body.airline-branding .sp-band { background: linear-gradient(115deg, color-mix(in srgb, var(--airline-color, #4092cc) 80%, #000), var(--airline-color, #4092cc)); }
.ec-band { gap: .8rem; padding: .9rem 1.1rem; }
.ec-band::after, #jobs-status-header .csp-header::after, .hub-band::after, .sp-band::after, .pv-band::after, .nw-hero-band::after, .nw-page-band::after { content: ''; position: absolute; right: -20px; top: -30px; width: 170px; height: 120px; background: repeating-linear-gradient(-55deg, rgba(255, 255, 255, .14) 0 12px, transparent 12px 24px); pointer-events: none; }
/* White logo box: crew card, Add Flight pass, Edit rows, Logbook airline tiles */
.ec-logo, .af-pass-logo, .ef-logo, .airline-exp-logo-container { background: #fff; display: grid; place-items: center; overflow: hidden; }
.ec-logo { width: 96px; height: 64px; flex: none; border-radius: 12px; color: #2d6fae; }
.ec-logo img, .hub-band-ic img, .af-pass-logo img, .ef-logo img, .airline-exp-logo { width: 100%; height: 100%; object-fit: contain; padding: 6px 8px; box-sizing: border-box; }
.ec-band-txt { min-width: 0; }
.ec-band-txt b { display: block; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-band-txt small { font-size: .74rem; opacity: .9; }
.ec-band .employment-status-badge { margin-left: auto; position: relative; z-index: 1; background: #22c55e !important; color: #fff !important; border: 0 !important; } /* stays green on the band, branded or not */
.ec-body { padding: .9rem 1.1rem 1rem; }
.ec-rank { display: flex; align-items: center; justify-content: flex-start; gap: .6rem; padding-bottom: .7rem; border-bottom: 1px dashed #e2e8f0; font-size: 1.15rem; font-weight: 600; color: #1e293b; }
.ec-rank .rank-badge { flex: none; }
.ec-facts small, .ec-pay small { display: block; font-size: .68rem; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; }
.ec-facts small i { margin-right: .2rem; }
.ec-facts b, .ec-pay b { display: block; color: #1e293b; font-size: .92rem; font-weight: 600; overflow-wrap: anywhere; }
.ec-con { margin: 0; }
.ec-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .8rem; }
.ec-head h2 { margin: 0 !important; }
.ec-chip { font-size: .72rem; font-weight: 600; color: #6366f1; background: rgba(99, 102, 241, .1); padding: .2rem .6rem; border-radius: 999px; white-space: nowrap; }
.ec-pay { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: .8rem; align-items: end; }
.ec-pay b { white-space: nowrap; }
.ec-big { font-size: 1.6rem !important; color: #16a34a !important; line-height: 1.1; }
.ec-big span { font-size: .85rem; color: #64748b; font-weight: 500; }
.ec-tl { margin-top: 1.9rem; }
.ec-track { position: relative; height: 8px; border-radius: 999px; background: #eef2f6; }
.ec-track > i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, #6366f1, #4092cc); }
.ec-now { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; border: 3px solid #4092cc; box-sizing: border-box; }
.ec-now em { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: .66rem; font-weight: 600; color: #4092cc; white-space: nowrap; }
.ec-ends { display: flex; justify-content: space-between; gap: 1rem; margin-top: .5rem; font-size: .76rem; color: #64748b; flex-wrap: wrap; row-gap: .15rem; }

body.dark-mode .ec-id, body.dark-mode .jp-card, body.dark-mode .adir-profile-col, body.dark-mode #adir-openings:not(:empty), body.dark-mode .jp-noapp,
body.dark-mode .hub-card, body.dark-mode .hub-week, body.dark-mode .nw-hero, body.dark-mode .nw-feature, body.dark-mode .nw-card,
body.dark-mode .nw-page, body.dark-mode .nw-log { background: #2c2c2e; border-color: #3a3a3c; }
body.dark-mode .ec-rank { color: #f1f5f9; border-bottom-color: #3a3a3c; }
body.dark-mode .ec-facts b, body.dark-mode .ec-pay b, body.dark-mode .ec-ends b { color: #f1f5f9; }
body.dark-mode .ec-track { background: #3a3a3c; }
body.dark-mode .ec-now { background: #2c2c2e; }
body.dark-mode .ec-big { color: #4ade80 !important; }

@media (max-width: 1100px) { .ec-row-wrap { grid-template-columns: 1fr; } }
@media (max-width: 576px) { .ec-pay { grid-template-columns: 1fr 1fr; } .ec-facts > :first-child { grid-column: 1 / -1; } .ec-logo { width: 72px; height: 50px; } }

/* Empty page header above the bar: less dead space */
.dashboard-header { display: none; } /* empty on this page */
.dashboard-container { padding-top: 0; }
/* Pages with no header row (Dashboard, Free Flight): start the bar 10px down so its sticky offset keeps the gap below */
.dashboard-container:not(:has(> .dashboard-header)) { padding-top: 10px !important; }
/* career.css paints these in the airline colour when branded; unreadable on dark cards */
body.dark-mode.airline-branding .ec-facts #base-airport,
body.dark-mode.airline-branding .ec-facts #primary-aircraft { color: #f1f5f9; }

/* ── Tablet: sidebar cards in two columns under the main column (career.css stacks at 1024) ── */
@media (min-width: 640px) and (max-width: 1024px) {
    #career-dashboard-section .career-sidebar-column { display: block; columns: 2; column-gap: .65rem; }
    #career-dashboard-section .career-sidebar-column > .sidebar-card { break-inside: avoid; margin: 0 0 .65rem; }
}
/* ── Phone: slimmer cards ── */
@media (max-width: 576px) {
    #career-dashboard-section .content-card,
    #career-dashboard-section .sidebar-card { padding: .9rem 1rem; border-radius: 12px; }
    #career-dashboard-section .content-card h2,
    #career-dashboard-section .sidebar-card > h3 { font-size: .95rem; gap: .6rem; }
    .cs-ic { width: 30px; height: 30px; border-radius: 9px; font-size: .82rem; }
    .ec-band { padding: .8rem .9rem; }
    .ec-body { padding: .8rem .9rem .9rem; }
    .ec-big { font-size: 1.4rem !important; }
}

/* Shop sub-headings: centred, without the old letter-spacing */
#career-dashboard-section .shop-section h3 { justify-content: center; text-align: center; letter-spacing: .01em; font-size: .9rem; font-weight: 600; color: #64748b; }
body.dark-mode #career-dashboard-section .shop-section h3 { color: #a1a1aa; }
/* Phone: keep the week header on one row; less dead space above the bar */
@media (max-width: 768px) {
    #career-dashboard-section .career-week-header { flex-direction: row; }
    .dashboard-container { padding-top: 1rem; }
}

/* Bell inside the bar: badge sits on the bell's corner with a ring, never at the bar edge */
.ctb .ifly-bell-wrap .ifly-topbar-btn { width: 38px; height: 38px; }
.ctb .ifly-topbar-badge { top: 2px; right: 0; min-width: 17px; height: 17px; font-size: 10px; border: 2px solid #fff; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; line-height: 13px; font-family: Arial, Helvetica, sans-serif; font-variant-numeric: tabular-nums; }
body.dark-mode .ctb .ifly-topbar-badge { border-color: #2c2c2e; }
/* Clocks: fixed-width digits so the seconds ticking never shifts the bar */
.ctb-clocks b .d { display: inline-block; width: .62em; text-align: center; }
.ctb-clocks b .s { display: inline-block; text-align: center; }
.ec-now[hidden] { display: none; }

/* Contract timeline: inset the track so the marker and "Today" never touch the card edge */
.ec-track, .ec-ends { margin-left: 14px; margin-right: 14px; } /* labels line up with the track ends */
.ec-now[data-edge="end"] em { left: auto; right: -6px; transform: none; }
.ec-now[data-edge="start"] em { left: -6px; transform: none; }
.ec-crew-id { font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.ec-crew-id:empty { display: none; }

/* Side menu rail lines up with the top bar (careerpage.js sets --ctb-rail-top) */
@media screen and (min-width: 769px) {
    .sidenav { top: var(--ctb-rail-top, 10px); max-height: calc(100vh - var(--ctb-rail-top, 10px) - 10px); }
}

/* Crew card: Aircraft + Seniority values centred under their labels (Base stays left) */
.ec-facts > div:nth-child(2), .ec-facts > div:nth-child(3) { text-align: center; }

/* ── Crew card extras: standing badge, rank progress, hours, type ratings ── */
.ec-badges { margin-left: auto; display: flex; gap: .35rem; align-items: center; position: relative; z-index: 1; }
.ec-band .ec-badges .employment-status-badge { margin-left: 0; }
/* White pill on a band: crew standing, Dashboard Last used, Scheduling countdown */
.ec-standing, .hub-last, .sp-clock, .ac-role { padding: .2rem .6rem; border-radius: 999px; background: rgba(255, 255, 255, .92); white-space: nowrap; }
.ec-standing, .hub-last { font-size: .7rem; font-weight: 700; }
.ec-standing { color: #15803d; }
.ec-standing[data-tier="fair"] { color: #b45309; }
.ec-standing[data-tier="poor"], .ec-standing[data-tier="atrisk"] { color: #b91c1c; }
.ec-prog { margin-left: auto; width: min(260px, 48%); font-size: .7rem; font-weight: 500; color: #64748b; }
.ec-prog-top { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .3rem; white-space: nowrap; }
.ec-prog-top span:last-child { color: #8b5cf6; font-weight: 600; }
/* Bar track: crew rank progress, Logbook landing + type-rating bars */
.ec-prog-bar, .lb-bar, .progress-bar { height: 6px; border-radius: 999px; background: #eef2f6; overflow: hidden; }
.ec-prog-bar i, .lb-bar i, .progress-fill { display: block; height: 100%; border-radius: inherit; }
.ec-prog-bar i { background: linear-gradient(90deg, #a78bfa, #8b5cf6); }
.ec-prog[hidden] { display: none; }
.ec-more { display: flex; justify-content: space-between; align-items: center; gap: .6rem 1rem; margin-top: .75rem; padding-top: .7rem; border-top: 1px dashed #e2e8f0; font-size: .78rem; color: #64748b; flex-wrap: nowrap; }
.ec-more:has(.ec-hours:empty):has(.ec-ratings:empty) { display: none; }
.ec-hours i { color: #4092cc; margin-right: .2rem; }
.ec-hours b { color: #1e293b; font-weight: 600; }
.ec-ratings { display: flex; gap: .3rem; flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; justify-content: flex-start; overflow: hidden; }
.ec-rating { font-size: .7rem; font-weight: 600; padding: .15rem .5rem; border-radius: 6px; background: rgba(139, 92, 246, .1); color: #7c3aed; flex: none; }
/* Contract extras */
.ec-pending { display: block; font-size: .72rem; color: #16a34a; font-weight: 600; margin-top: .1rem; }
.ec-ends b { color: #1e293b; }
body.dark-mode .ec-prog-bar, body.dark-mode .lb-bar, body.dark-mode .progress-bar { background: #3a3a3c; }
body.dark-mode .ec-more { border-top-color: #3a3a3c; }
body.dark-mode .ec-hours b { color: #f1f5f9; }
body.dark-mode .ec-rating { background: rgba(167, 139, 250, .18); color: #c4b5fd; }
body.dark-mode .ec-pending { color: #4ade80; }
@media (max-width: 576px) { .ec-prog { width: 100%; margin: .5rem 0 0; } .ec-rank { flex-wrap: wrap; } }

/* ================================================
   SCHEDULED FLIGHTS — design H
   Map on top with the day chain under it; legs as a timeline.
   ================================================ */
#scheduled-flights-section .sf-head { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: .8rem; }
#scheduled-flights-section .sf-head h2 { margin: 0 !important; }
.sf-sub { font-size: .76rem; color: #64748b; }
.sf-tools { margin-left: auto; display: flex; gap: .4rem; }
.sf-seg { display: inline-flex; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 2px; }
.sf-seg button { all: unset; cursor: pointer; font-size: .7rem; font-weight: 600; color: #64748b; padding: .2rem .55rem; border-radius: 6px; }
.sf-seg button.on { background: #fff; color: #1e293b; box-shadow: 0 1px 2px rgba(15, 23, 42, .14); }

/* Map + chain share one rounded frame */
.sf-maphead { border: 1px solid #e8edf3; border-radius: 12px; overflow: hidden; margin-bottom: .9rem; }
.sf-maphead .scheduled-flights-map-container { margin: 0; border: 0; border-radius: 0; }
.sf-maphead .career-route-map { border-radius: 0; height: 340px; } /* Free Flight uses the same height */
.sf-chain { display: flex; align-items: flex-start; overflow-x: auto; padding: .7rem .9rem .5rem; background: #fff; scrollbar-width: thin; border-top: 1px solid #e8edf3; }
.sf-chain:empty { display: none; }
.sf-node { flex: none; min-width: 58px; text-align: center; }
.sf-dot { display: grid; place-items: center; width: 40px; height: 40px; margin: 0 auto .2rem; border-radius: 50%; background: #f8fafc; border: 2px solid #e2e8f0; font-size: .7rem; font-weight: 700; color: #1e293b; box-sizing: border-box; } /* 40px incl. border, so its centre is the chain line */
.sf-node.base .sf-dot { background: var(--career-primary); border-color: var(--career-primary); color: #fff; }
.sf-node small { display: block; min-height: 1em; font-size: .64rem; color: #64748b; }
.sf-break { flex: none; width: 14px; }
.sf-hop { all: unset; box-sizing: border-box; cursor: pointer; flex: 1 1 0; min-width: 104px; position: relative; text-align: center; height: 58px; padding: 0; }
.sf-hop::before { content: ''; position: absolute; left: 0; right: 0; border-top: 2px dashed #cbd5e1; top: 19px; }
.sf-hop.sel::before { border-top: 3px solid var(--career-primary); top: 18.5px; }
.sf-hop.ot::before { border-top-color: #f59e0b; }
.sf-lbl { background: #fff; font-size: .68rem; font-weight: 600; color: #64748b; white-space: nowrap; position: absolute; left: 50%; top: 20px; transform: translate(-50%, -50%); line-height: 1; padding: 2px .45rem; display: inline-flex; align-items: center; gap: .25rem; }
.sf-lbl i { margin-right: .25rem; margin: 0; }
.sf-hop.sel .sf-lbl { color: var(--career-primary); }
.sf-hop.ot .sf-lbl { color: #b45309; }
.sf-hop.cover .sf-lbl { color: #b91c1c; }
.sf-hop.ferry .sf-lbl { color: #4338ca; }
.sf-tm { display: block; margin-top: 16px; font-size: .64rem; color: #94a3b8; white-space: nowrap; position: absolute; left: 0; right: 0; top: 34px; margin: 0; }

/* Legs as a timeline */
#scheduled-flights-section .sched-bubbles { position: relative; gap: .6rem; padding-left: 28px; font-family: 'Poppins', sans-serif; }
#scheduled-flights-section .sched-bubbles::before { content: ''; position: absolute; left: 9px; top: 18px; bottom: 18px; width: 2px; background: #e2e8f0; }
/* sched-divider is restyled as a small "Scheduled" header further down */
#scheduled-flights-section .sched-bubble { border-radius: 12px; border: 1px solid #e8edf3; box-shadow: none; outline: 0; padding: .8rem 1rem; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
#scheduled-flights-section .sched-bubble::before { content: ''; position: absolute; top: 18px; width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%; background: #fff; border: 3px solid #94a3b8; left: -25px; } /* centred on the rail (10px) */
#scheduled-flights-section .sched-bubble.next-flight::before { background: var(--career-primary); border-color: var(--career-primary); box-shadow: 0 0 0 4px rgba(64, 146, 204, .18); }
#scheduled-flights-section .sched-bubble.opentime-flight::before { border-color: #f59e0b; }
#scheduled-flights-section .sched-bubble.overtime-flight::before { border-color: #ef4444; }
#scheduled-flights-section .sched-bubble.ferry-flight::before { border-color: #6366f1; }
#scheduled-flights-section .sched-bubble.next-flight,
#scheduled-flights-section .sched-bubble.sf-sel { border-color: color-mix(in srgb, var(--career-primary) 50%, #e8edf3); box-shadow: 0 6px 18px -12px rgba(64, 146, 204, .6); }
/* time small, airport code big (next leg biggest), name under */
#scheduled-flights-section .sb-pt .t { font-size: .85rem; font-weight: 500; color: #64748b; letter-spacing: 0; }
#scheduled-flights-section .sb-pt .i { font-size: 1.45rem; font-weight: 700; color: #1e293b; line-height: 1.15; }
#scheduled-flights-section .sched-bubble.next-flight .sb-pt .i { font-size: 1.9rem; }
#scheduled-flights-section .sb-pt .c { font-size: .72rem; color: #64748b; }
#scheduled-flights-section .sb-dots::before,
#scheduled-flights-section .sb-dots::after { border-top: 2px dashed #e2e8f0; }
#scheduled-flights-section .sb-dots i { background: none; width: auto; height: auto; }
#scheduled-flights-section .sb-fltchip { background: #1e293b; color: #fff; }
/* one button set: Briefing primary, Gate plain, trackers quiet, Sick outline, Complete green */
#scheduled-flights-section .sb-foot { justify-content: flex-start; align-items: center; gap: .45rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px dashed #e2e8f0; }
#scheduled-flights-section .sb-foot > * { display: inline-flex; align-items: center; gap: .45rem; height: 34px; padding: 0 .85rem; border-radius: 9px; font: 600 .8rem 'Poppins', sans-serif; border: 1px solid transparent; box-shadow: none; transform: none; text-decoration: none; cursor: pointer; }
#scheduled-flights-section .sb-foot .btn-briefing { background: var(--career-primary); color: #fff; }
#scheduled-flights-section .sb-foot .btn-briefing.briefing-signed { background: rgba(34, 197, 94, .13); color: #15803d; }
#scheduled-flights-section .sb-foot .btn-gate { background: #f8fafc; color: #1e293b; border-color: #e2e8f0; }
#scheduled-flights-section .sb-foot .btn-fr24,
#scheduled-flights-section .sb-foot .btn-flightaware { background: transparent; color: #64748b; padding: 0 .55rem; }
#scheduled-flights-section .sb-foot .btn-fr24:hover,
#scheduled-flights-section .sb-foot .btn-flightaware:hover { color: var(--career-primary); background: #f8fafc; }
#scheduled-flights-section .sb-foot .btn-sick-day { margin-left: auto; background: transparent; color: #dc2626; border-color: rgba(220, 38, 38, .35); }
#scheduled-flights-section .sb-foot .btn-complete-flight { background: #16a34a; color: #fff; }

body.dark-mode .sf-seg { background: #242426; border-color: #3a3a3c; }
body.dark-mode .sf-seg button.on { background: #2c2c2e; color: #f1f5f9; }
body.dark-mode .sf-maphead, body.dark-mode .sf-chain { border-color: #3a3a3c; }
body.dark-mode .sf-chain, body.dark-mode .sf-lbl { background: #2c2c2e; }
body.dark-mode .sf-dot { background: #242426; border-color: #3a3a3c; color: #f1f5f9; }
body.dark-mode #scheduled-flights-section .sched-bubbles::before { background: #3a3a3c; }
body.dark-mode #scheduled-flights-section .sched-bubble { border-color: #3a3a3c; }
body.dark-mode #scheduled-flights-section .sched-bubble::before { background: #2c2c2e; }
body.dark-mode #scheduled-flights-section .sb-pt .i { color: #f1f5f9; }
body.dark-mode #scheduled-flights-section .sb-foot,
body.dark-mode #scheduled-flights-section .sb-dots::before,
body.dark-mode #scheduled-flights-section .sb-dots::after { border-color: #3a3a3c; }
body.dark-mode #scheduled-flights-section .sb-foot .btn-gate { background: #242426; color: #f1f5f9; border-color: #3a3a3c; }
body.airline-branding #scheduled-flights-section .sb-foot .btn-briefing:not(.briefing-signed) { background: var(--airline-color, var(--career-primary)); }

@media (max-width: 640px) {
    .sf-tools { margin-left: 0; width: 100%; }
    .sf-maphead .career-route-map { height: 240px; }
    #scheduled-flights-section .sched-bubbles { padding-left: 22px; }
    #scheduled-flights-section .sched-bubbles::before { left: 6px; }
    #scheduled-flights-section .sched-bubble::before { left: -22px; }
    #scheduled-flights-section .sb-pt .c { display: none; }
    #scheduled-flights-section .sb-foot .btn-sick-day { margin-left: 0; }
}

/* Flight card header band: match the new card padding/corners (career.css cancels the old 1.3rem) */
#scheduled-flights-section .sb-top { margin: -.8rem -1rem .7rem; padding: .55rem 1rem; border-radius: 12px 12px 0 0; }
/* Phone: buttons stay a wrapping row instead of a full-width stack */
@media (max-width: 640px) {
    #scheduled-flights-section .sb-top { margin: -.8rem -1rem .7rem; border-radius: 12px 12px 0 0; }
    #scheduled-flights-section .sb-foot { flex-direction: row; flex-wrap: wrap; }
    #scheduled-flights-section .sb-foot > * { width: auto !important; flex: 0 0 auto; justify-content: center; }
    #scheduled-flights-section .sb-foot .btn-sick-day,
    #scheduled-flights-section .sb-foot .btn-complete-flight { flex: 1 1 0; }
}

/* Type rating chips: in-training + overflow link */
.ec-rating.training { background: rgba(245, 158, 11, .12); color: #b45309; }
.ec-rating.more { text-decoration: none; background: #f1f5f9; color: #64748b; }
/* Contract: pending pay line + completed-contract note */
.ec-pending.none { color: #94a3b8; font-weight: 500; }
.ec-note { display: flex; align-items: center; gap: .45rem; margin: .8rem 14px 0; padding: .55rem .75rem; border-radius: 10px; background: rgba(34, 197, 94, .1); color: #15803d; font-size: .78rem; text-decoration: none; }
.ec-note:hover { background: rgba(34, 197, 94, .16); }
.ec-note .fa-arrow-right { margin-left: auto; }
.ec-note[hidden] { display: none; }
body.dark-mode .ec-note { color: #4ade80; background: rgba(74, 222, 128, .12); }
body.dark-mode .ec-rating.more { background: #3a3a3c; color: #a1a1aa; }

/* Route map: no +/- zoom buttons (scroll / pinch zoom still works) */
#scheduled-flights-map .leaflet-control-zoom { display: none; }

/* "Up Next" status: timeline blue, no pulsing green glow */
#scheduled-flights-section .sb-status.is-next { color: var(--career-primary); }
#scheduled-flights-section .sb-status.is-next .sb-status-dot { background: var(--career-primary); box-shadow: none; animation: none; }
/* Small section headers in the timeline: "Next flight", then "Scheduled" */
#scheduled-flights-section .sf-label,
#scheduled-flights-section .sched-divider {
    display: flex; align-items: center; gap: .6rem; margin: .2rem 0 -.15rem;
    font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8;
}
#scheduled-flights-section .sched-divider { margin-top: .5rem; }
#scheduled-flights-section .sf-label::after,
#scheduled-flights-section .sched-divider::after { content: ''; flex: 1; border-top: 1px dashed #e2e8f0; }
#scheduled-flights-section .sched-divider::before { display: none; }
body.dark-mode #scheduled-flights-section .sf-label::after,
body.dark-mode #scheduled-flights-section .sched-divider::after { border-color: #3a3a3c; }

/* Bell deep-links still scroll to the section, but without the blue outline flash */
.notif-target-flash { animation: none; }

/* Career Timeline: line and dots share one centre (9px from the left), dot centre 15px down each item */
#career-timeline.career-timeline { padding-left: 0; }
#career-timeline .timeline-item { padding-left: 28px; }
#career-timeline .timeline-item::before { left: 8px; top: 15px; width: 2px; height: 100%; }
#career-timeline .timeline-item::after { left: 2px; top: 8px; width: 14px; height: 14px; box-sizing: border-box; }

/* Ratings share the hours line and fill the rest of it (overflow handled by fitRatings) */
.ec-hours { flex: none; white-space: nowrap; }
.ec-ratings > :first-child { margin-left: auto; } /* right-aligned, but overflow spills right where it can be measured */
.ec-rating[hidden] { display: none; }
@media (max-width: 576px) { .ec-more { flex-wrap: wrap; } .ec-ratings { flex-basis: 100%; } .ec-ratings > :first-child { margin-left: 0; } }
/* Contract footer: wrap between the two halves, never inside a date */
.ec-ends > span { white-space: nowrap; }

/* Crew card rows: [rank ▮▮▮ ........ base]  /  [aircraft  seniority ........ rank progress] */
.ec-base { margin-left: auto; text-align: right; min-width: 0; font-size: .92rem; font-weight: 600; }
.ec-base small { display: block; font-size: .68rem; font-weight: 500; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; }
.ec-base small i { margin-right: .2rem; }
.ec-base b { display: block; color: #1e293b; font-weight: 600; overflow-wrap: anywhere; }
.ec-facts > div:nth-child(1), .ec-facts > div:nth-child(2) { text-align: left; flex: none; }
body.dark-mode .ec-base b { color: #f1f5f9; }
@media (max-width: 576px) {
    .ec-base { flex-basis: 100%; margin: .45rem 0 0; text-align: left; }
    .ec-facts .ec-prog { width: 100%; margin: 0; grid-column: 1 / -1; }
}

/* styles.css paints every bare button green and lifts it on hover; neutralise it for the
   preview's own buttons (element-qualified so it outranks button:hover) */
.sf-chain button.sf-hop, .sf-chain button.sf-hop:hover,
.sf-seg button, .sf-seg button:hover {
    background-color: transparent; box-shadow: none; transform: none;
}
.sf-chain button.sf-hop:hover .sf-lbl { color: var(--career-primary); }
.sf-seg button.on, .sf-seg button.on:hover { background-color: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .14); }
body.dark-mode .sf-seg button.on, body.dark-mode .sf-seg button.on:hover { background-color: #2c2c2e; }
.sf-seg button:not(.on):hover { color: #1e293b; }
body.dark-mode .sf-seg button:not(.on):hover { color: #f1f5f9; }

/* Crew card row 2: aircraft and seniority share the space evenly; progress keeps the right */
.ec-facts { margin-top: .7rem; align-items: center; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(220px, 1.4fr); gap: 1rem; }
.ec-facts .ec-prog { width: auto; margin-left: 0; }
@media (max-width: 576px) {
    .ec-facts { grid-template-columns: 1fr 1fr; }
}

/* Tablets: base drops under the rank so "First Officer" never splits */
@media (max-width: 1024px) {
    .ec-rank { flex-wrap: wrap; }
    .ec-rank > #current-position { white-space: nowrap; }
    .ec-base { flex-basis: 100%; margin: .45rem 0 0; text-align: left; }
}

/* Airline branding on: the day chain and timeline use the airline colour */
body.airline-branding .sf-node.base .sf-dot { background: var(--airline-color, var(--career-primary)); border-color: var(--airline-color, var(--career-primary)); }
body.airline-branding .sf-hop.sel::before { border-top-color: var(--airline-color, var(--career-primary)); }
body.airline-branding .sf-hop.sel .sf-lbl,
body.airline-branding .sf-chain button.sf-hop:hover .sf-lbl { color: var(--airline-color, var(--career-primary)); }
body.airline-branding #scheduled-flights-section .sched-bubble.next-flight::before { background: var(--airline-color, var(--career-primary)); border-color: var(--airline-color, var(--career-primary)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--airline-color, #4092cc) 18%, transparent); }
body.airline-branding #scheduled-flights-section .sb-status.is-next { color: var(--airline-color, var(--career-primary)); }
body.airline-branding #scheduled-flights-section .sb-status.is-next .sb-status-dot { background: var(--airline-color, var(--career-primary)); }
body.airline-branding #scheduled-flights-section .sched-bubble.next-flight,
body.airline-branding #scheduled-flights-section .sched-bubble.sf-sel { border-color: color-mix(in srgb, var(--airline-color, #4092cc) 50%, #e8edf3); }

/* Hover hints (js/tips.js) */
.pv-tip { position: fixed; z-index: 3000; max-width: 260px; padding: .4rem .6rem; border-radius: 8px; background: #1e293b; color: #fff; font: 500 .74rem/1.35 'Poppins', sans-serif; box-shadow: 0 6px 18px rgba(15, 23, 42, .25); pointer-events: none; }
.pv-tip[hidden] { display: none; }
[data-tip] { cursor: help; }
a[data-tip], button[data-tip] { cursor: pointer; }
body.dark-mode .pv-tip { background: #f1f5f9; color: #1e293b; }

/* Same space under the top bar on every page (all previews load this sheet) */
#career-topbar.ctb { margin-bottom: 1.25rem; }

/* ================================================
   Airline HQ + Current Location: same tiles as the crew ID / contract cards
   ================================================ */
#airline-hq-section .hq-stat,
#career-location-strip .cloc-stat,
#career-location-strip .cloc-conditions-left,
#career-location-strip .cloc-diagram-box,
#career-location-strip .cloc-runways { box-sizing: border-box; }
/* Shared light stat tile (all previews) */
#airline-hq-section .hq-stat, #career-location-strip .cloc-stat, #career-location-strip .cloc-conditions-left,
#career-location-strip .cloc-diagram-box, #career-location-strip .cloc-runways,
.ff-clocks > div, .ff-plan-grid > div, .ffm-grid > div, .hub-stats > div, .sp-hero .sched-fact, .pv-stat, .airline-card {
    background: #f8fafc; border: 1px solid #eef2f6; border-radius: 12px;
}
#airline-hq-section .hq-stat-label, #airline-hq-section .hq-feed-title,
#career-location-strip .cloc-stat-label, #career-location-strip .cloc-section-label {
    font-size: .68rem; font-weight: 600; letter-spacing: .04em; color: #94a3b8;
}
#airline-hq-section .hq-stat-label i, #career-location-strip .cloc-stat-label i { font-size: .7rem; color: var(--t, #94a3b8); }
body.dark-mode #airline-hq-section .hq-stat,
body.dark-mode #career-location-strip .cloc-stat,
body.dark-mode #career-location-strip .cloc-conditions-left,
body.dark-mode #career-location-strip .cloc-diagram-box,
body.dark-mode #career-location-strip .cloc-runways,
body.dark-mode .ff-clocks > div, body.dark-mode .ff-plan-grid > div, body.dark-mode .ffm-grid > div, body.dark-mode .ffm-weeks,
body.dark-mode .hub-stats > div, body.dark-mode .sp-hero .sched-fact, body.dark-mode .pv-stat, body.dark-mode .airline-card { background: #242426; border-color: #3a3a3c; }
body.dark-mode #airline-hq-section .hq-stat-label, body.dark-mode #airline-hq-section .hq-stat-sub,
body.dark-mode #career-location-strip .cloc-stat-label, body.dark-mode #career-location-strip .cloc-stat-sub,
body.dark-mode #career-location-strip .cloc-stat-unit, body.dark-mode #career-location-strip .cloc-weather-sub,
body.dark-mode #career-location-strip .cloc-wind-line, body.dark-mode #career-location-strip .cloc-airport-sub { color: #a1a1aa; }

/* ── Airline HQ ── */
.airline-hq-header .section-toggle-chevron { margin-left: auto; }
.hq-stats-grid { gap: .6rem; }
.hq-stat { padding: .65rem .8rem; }
.hq-stat:nth-child(1) { --t: #4092cc; }
.hq-stat:nth-child(2) { --t: #0ea5e9; }
.hq-stat:nth-child(3) { --t: #22c55e; }
.hq-stat:nth-child(4) { --t: #f59e0b; }
.hq-stat-value { font-size: 1.35rem; color: #1e293b; margin-top: .1rem; }
.hq-stat-sub { font-size: .7rem; }
/* Wide: Pilot of the Week | Roster Activity side by side, reset line as the footer */
#airline-hq-body:not(.collapsed) {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: 1rem;
    grid-template-areas: "stats stats" "potw ft" "potw feed" "reset reset";
    grid-template-rows: auto auto 1fr auto;
}
#airline-hq-stats { grid-area: stats; }
#airline-hq-potw-wrap { grid-area: potw; align-self: start; }
#airline-hq-body > .hq-feed-title { grid-area: ft; }
#airline-hq-feed { grid-area: feed; }
/* Feed ends level with the bottom of the Pilot of the Week boards and scrolls inside;
   height:0 keeps it from stretching the row, min-height fills the row the boards set */
#airline-hq-body:not(.collapsed) #airline-hq-feed { height: 0; min-height: 100%; max-height: none; }
#airline-hq-reset { grid-area: reset; }
/* Nobody has flown yet this week: the feed takes the full width */
#airline-hq-body:not(.collapsed):has(#airline-hq-potw-wrap[style*="none"]) { grid-template-columns: 1fr; grid-template-areas: "stats" "ft" "feed" "reset"; }
#airline-hq-body:not(.collapsed):has(#airline-hq-potw-wrap[style*="none"]) #airline-hq-feed { height: auto; min-height: 0; max-height: 15rem; }
.hq-feed-title { margin: 1rem 0 .45rem; text-transform: uppercase; }
.hq-potw { display: flex; flex-direction: column; gap: .35rem; }
.hq-potw-row { padding: .5rem .65rem; border: 1px solid #eef2f6; background: #fff; }
.hq-potw-1 { background: linear-gradient(90deg, #fef9c3, #fff 85%); border-color: #fde68a; }
.hq-potw-medal, .hq-feed-icon { border-radius: 8px; width: 1.75rem; height: 1.75rem; }
.hq-feed { max-height: 15rem; padding-right: .25rem; }
.hq-feed-item { padding: .45rem 0; }
.hq-reset-strip { margin-top: .9rem; background: none; padding: .6rem 0 0; border-top: 1px dashed #e2e8f0; border-radius: 0; font-size: .74rem; }
body.dark-mode .hq-stat-value { color: #f1f5f9; }
body.dark-mode .hq-potw-row { background: #242426; border-color: #3a3a3c; }
body.dark-mode .hq-potw-1 { background: linear-gradient(90deg, rgba(250, 204, 21, .14), #242426 85%); border-color: rgba(250, 204, 21, .3); }
body.dark-mode .hq-reset-strip { border-top-color: #3a3a3c; }
@media (max-width: 700px) {
    #airline-hq-body:not(.collapsed) { grid-template-columns: 1fr; grid-template-areas: "stats" "potw" "ft" "feed" "reset"; grid-template-rows: none; }
    #airline-hq-body:not(.collapsed) #airline-hq-feed { height: auto; min-height: 0; max-height: 15rem; }
}

/* ── Current Location ── */
#career-location-strip .cloc-header { padding-bottom: .8rem; margin-bottom: .8rem; border-bottom: 1px dashed #e2e8f0; }
#career-location-strip .cloc-icao-badge { font-size: .95rem; font-weight: 700; padding: .45rem .75rem; border-radius: 10px; }
#career-location-strip .cloc-airport-name { font-size: 1rem; font-weight: 600; color: #1e293b; }
#career-location-strip .cloc-airport-sub { font-size: .76rem; color: #64748b; }
/* header pills: one chip style (same as the contract card's tier chip) */
#career-location-strip .cloc-fr24-badge,
#career-location-strip .cloc-category-badge,
#career-location-strip .cloc-times-block { font-size: .72rem; font-weight: 600; padding: .25rem .65rem; letter-spacing: 0; }
#career-location-strip .cloc-times-block { font-variant-numeric: tabular-nums; }
#career-location-strip .cloc-body { gap: .6rem; }
#career-location-strip .cloc-conditions-left { padding: .8rem; }
#career-location-strip .cloc-weather-text { font-size: .95rem; font-weight: 600; color: #1e293b; }
#career-location-strip .cloc-stats-grid { gap: .6rem; }
#career-location-strip .cloc-stats-block { gap: .6rem; }
#career-location-strip .cloc-stat { padding: .65rem .8rem; }
#career-location-strip .cloc-stat:nth-child(1) { --t: #ef4444; }
#career-location-strip .cloc-stat:nth-child(2) { --t: #0ea5e9; }
#career-location-strip .cloc-stat:nth-child(3) { --t: #8b5cf6; }
#career-location-strip .cloc-stat:nth-child(4) { --t: #14b8a6; }
#career-location-strip .cloc-stat-value { font-size: 1.15rem; color: #1e293b; margin-top: .1rem; }
#career-location-strip .cloc-stat-sub { font-size: .7rem; }
#career-location-strip .cloc-runways { padding: .65rem .8rem; }
#career-location-strip .cloc-metar-strip { background: none; padding: .55rem 0 0; border-top: 1px dashed #e2e8f0; border-radius: 0; font-size: .72rem; color: #64748b; }
body.dark-mode #career-location-strip .cloc-header, body.dark-mode #career-location-strip .cloc-metar-strip { border-color: #3a3a3c; }
body.dark-mode #career-location-strip .cloc-airport-name,
body.dark-mode #career-location-strip .cloc-weather-text,
body.dark-mode #career-location-strip .cloc-stat-value { color: #f1f5f9; }
body.dark-mode #career-location-strip .cloc-metar-strip { background: none; color: #a1a1aa; }

/* Shared small grey label (tile captions on Jobs / Free Flight / Dashboard) */
.jp-rank-lbl, .ff-clocks small, .ff-plan-grid small, .ffm-grid small, .ffx-lbl, .hub-stats small, .pv-stat small, .pv-field > label, .af-pass-route small, .lb-sub, .flight-log-table th, .cal-sub, .cal-wrap .weekday-header {
    font-size: .64rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8;
}

/* ================================================
   Week calendar: Dashboard This Week, the Career / Free Flight week grids (career.js / dashboard.js markup)
   and the Calendar page month grid (.cal-wrap)
   --wk-c = today + Career chip colour; Free Flight chips are sky blue
   ================================================ */
#career-week-section { --wk-c: var(--airline-color, #4092cc); }
#ff-week, #ff-next-week { --wk-c: #0ea5e9; }
#career-dashboard-section .career-week-grid, #month-container { gap: 0; margin-top: 0; min-height: 0; border: 1px solid #eef2f6; border-radius: 12px; overflow: hidden; }
.hub-week-grid, #career-dashboard-section .career-week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.hub-day, #career-dashboard-section .career-week-day, .cal-wrap .day-cell { min-width: 0; min-height: 150px; padding: .6rem .5rem .7rem; border: 0; border-right: 1px solid #eef2f6; border-radius: 0; background: none; display: flex; flex-direction: column; gap: .4rem; overflow: visible; }
.hub-day:last-child, #career-dashboard-section .career-week-day:last-child { border-right: 0; }
.hub-day.past, #career-dashboard-section .career-week-day.past, .cal-wrap .day-cell.past { background: #fafbfc; }
.hub-day-date, #career-dashboard-section .career-week-date, .cal-wrap .date-container { display: flex; align-items: baseline; gap: .35rem; padding: 0 .2rem .2rem; border: 0; background: none; text-align: left; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; }
.hub-day-date b, #career-dashboard-section .career-week-date b, .cal-wrap .date-container b { font-size: 1.05rem; letter-spacing: 0; color: #1e293b; }
.hub-day.today .hub-day-date, #career-dashboard-section .career-week-date.current, .cal-wrap .current-day .date-container { background: none; color: var(--wk-c); }
.hub-day.today .hub-day-date b, #career-dashboard-section .career-week-date.current b, .cal-wrap .current-day .date-container b { display: inline-grid; place-items: center; min-width: 26px; height: 26px; border-radius: 8px; background: var(--wk-c); color: #fff; font-size: .9rem; }
#career-dashboard-section .career-week-content { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; gap: .4rem; padding: 0; }
.hub-day-empty, #career-dashboard-section .career-week-rest { margin: auto; height: auto; color: #cbd5e1; font-size: .9rem; font-style: normal; }

.hub-fl, #career-dashboard-section .career-week-flight, .cal-wrap .flight-card { --c: var(--ff-c); display: block; position: relative; padding: .4rem .5rem .4rem .6rem; border-radius: 8px; text-decoration: none; color: #1e293b; text-align: left; word-break: normal;
    background: color-mix(in srgb, var(--c) 9%, #fff); border-left: 3px solid var(--c); font-size: .74rem; line-height: 1.3; transition: background .15s; }
.hub-fl.car, #career-dashboard-section .career-week-flight, .cal-wrap .flight-card.src-career { --c: var(--wk-c); }
.hub-fl:hover, #career-dashboard-section .career-week-flight:hover, .cal-wrap .flight-card:hover { background: color-mix(in srgb, var(--c) 16%, #fff); }
.hub-fl b, #career-dashboard-section .career-week-flight .week-flight-number, .cal-wrap .flight-number { display: block; font-size: .76rem; font-weight: 700; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-fl span, #career-dashboard-section .career-week-flight .week-flight-route, .cal-wrap .flight-route { display: block; font-size: .74rem; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-fl small, #career-dashboard-section .career-week-flight .week-flight-detail { display: block; color: #64748b; font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-fl.done, #career-dashboard-section .career-week-flight.completed, .cal-wrap .flight-card.completed { opacity: .6; }
.hub-fl.done::after, #career-dashboard-section .career-week-flight.completed::after, .cal-wrap .flight-card.completed::after { content: '\f00c'; font: 900 .62rem 'Font Awesome 6 Free'; position: absolute; top: .4rem; left: auto; right: .45rem; border: 0; transform: none; color: #16a34a; }

body.dark-mode #career-dashboard-section .career-week-grid, body.dark-mode #month-container { border-color: #3a3a3c; }
body.dark-mode .hub-day, body.dark-mode #career-dashboard-section .career-week-day, body.dark-mode .cal-wrap .day-cell { border-color: #3a3a3c; }
body.dark-mode .hub-day-date b, body.dark-mode #career-dashboard-section .career-week-date b, body.dark-mode .hub-fl, body.dark-mode #career-dashboard-section .career-week-flight,
body.dark-mode .cal-wrap .date-container b, body.dark-mode .cal-wrap .flight-card { color: #f1f5f9; }
body.dark-mode .hub-day.today .hub-day-date b, body.dark-mode #career-dashboard-section .career-week-date.current b, body.dark-mode .cal-wrap .current-day .date-container b { color: #fff; }
body.dark-mode .hub-day.past, body.dark-mode #career-dashboard-section .career-week-day.past, body.dark-mode .cal-wrap .day-cell.past { background: #262628; }
body.dark-mode .hub-fl, body.dark-mode #career-dashboard-section .career-week-flight, body.dark-mode .cal-wrap .flight-card { background: color-mix(in srgb, var(--c) 18%, #2c2c2e); }
body.dark-mode .hub-fl:hover, body.dark-mode #career-dashboard-section .career-week-flight:hover, body.dark-mode .cal-wrap .flight-card:hover { background: color-mix(in srgb, var(--c) 28%, #2c2c2e); }
body.dark-mode .hub-fl small, body.dark-mode #career-dashboard-section .career-week-flight .week-flight-detail { color: #a1a1aa; }
body.dark-mode .hub-day-empty, body.dark-mode #career-dashboard-section .career-week-rest { color: #52525b; }

/* Colour key: Free Flight sky, Career (--car-c) */
.hub-key { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 600; color: #475569; }
.hub-key::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--ff-c); }
.hub-key.car::before { background: var(--car-c); }
.hub-key + .hub-key { margin-left: .5rem; }
body.dark-mode .hub-key { color: #cbd5e1; }

/* Tablet: days wrap 4 + 3; phone: one row per day, date on the left */
@media (max-width: 1024px) {
    .hub-week-grid, #career-dashboard-section .career-week-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hub-day, #career-dashboard-section .career-week-day { border-bottom: 1px solid #eef2f6; }
    body.dark-mode .hub-day, body.dark-mode #career-dashboard-section .career-week-day { border-bottom-color: #3a3a3c; }
}
@media (max-width: 600px) {
    .hub-week-grid, #career-dashboard-section .career-week-grid, #month-container { grid-template-columns: 1fr; }
    .hub-day { min-height: 0; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: .4rem .6rem; border-right: 0; padding: .55rem 1rem; }
    #career-dashboard-section .career-week-day, .cal-wrap .day-cell { min-height: 0; flex-direction: row; align-items: flex-start; gap: .6rem; border-right: 0; padding: .55rem 1rem; }
    .hub-day-date { grid-row: 1 / span 20; }
    .hub-day-date, #career-dashboard-section .career-week-date, .cal-wrap .date-container { flex-direction: column; gap: 0; padding: .15rem 0 0; }
    #career-dashboard-section .career-week-date, .cal-wrap .date-container { width: 56px; flex: none; }
    .hub-fl, .hub-day-empty { grid-column: 2; }
    .hub-day-empty, #career-dashboard-section .career-week-rest { margin: .2rem 0 0; }
}

/* ================================================
   Shared controls: page head, segmented switch, form box, buttons, dialog
   (Dashboard, Jobs filters, What's New, Add Flight, Edit Flights, Logbook, Account)
   ================================================ */
/* Top bar icon on pages without a crew ID; --c sets the colour */
.ctb-logo.hub-bar-ic { width: 36px; border-radius: 10px; background: color-mix(in srgb, var(--c, #4092cc) 12%, transparent); color: var(--c, var(--career-primary)); display: grid; place-items: center; }
/* Page title under the bar; .pv-head adds a right-hand slot */
.hub-head { margin: .4rem 0 1.2rem; }
.hub-head h1 { margin: 0; font: 700 1.6rem 'Poppins', sans-serif; color: #1e293b; text-align: left; letter-spacing: 0; }
.hub-head h1::after { display: none !important; }
.hub-head p { margin: .2rem 0 0; color: #64748b; font-size: .9rem; }
.pv-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem 1.2rem; flex-wrap: wrap; }
body.dark-mode .hub-head h1 { color: #f1f5f9; }

/* Segmented switch (Jobs Airlines/Jobs, tool pages); element-qualified so styles.css's green button can't win */
.jp-filters .adir-view-toggle, .pv-seg { display: flex; gap: 2px; padding: 3px; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; overflow: hidden; }
.jp-filters .adir-view-toggle button,
.jp-filters .adir-view-toggle button:hover,
.jp-filters .adir-view-toggle button:focus,
.pv-seg > *, .pv-seg > *:hover, .pv-seg > *:focus {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    height: 32px; margin: 0; padding: 0 .7rem; border: 0; border-radius: 7px;
    background: transparent; color: #64748b; font: 600 .8rem 'Poppins', sans-serif;
    box-shadow: none; transform: none; transition: background .15s, color .15s;
}
.pv-seg > * { cursor: pointer; white-space: nowrap; }
.jp-filters .adir-view-toggle button:hover, .pv-seg > *:hover { color: #1e293b; }
.jp-filters .adir-view-toggle button.active,
.jp-filters .adir-view-toggle button.active:hover,
.pv-seg > .active, .pv-seg > .active:hover, .pv-seg > .selected, .pv-seg > .selected:hover { background: #fff; color: var(--career-primary); box-shadow: 0 1px 2px rgba(15, 23, 42, .14); }
body.dark-mode .jp-filters .adir-view-toggle, body.dark-mode .pv-seg { background: #242426; border-color: #3a3a3c; }
body.dark-mode .jp-filters .adir-view-toggle button:hover, body.dark-mode .pv-seg > *:hover { color: #f1f5f9; }
body.dark-mode .jp-filters .adir-view-toggle button.active,
body.dark-mode .jp-filters .adir-view-toggle button.active:hover,
body.dark-mode .pv-seg > .active, body.dark-mode .pv-seg > .active:hover,
body.dark-mode .pv-seg > .selected, body.dark-mode .pv-seg > .selected:hover { background: #2c2c2e; color: #5aa7e0; }

/* Form box: Jobs sort select + tool-page inputs/selects (selects get the chevron) */
.jp-filters select.adir-sort-select, .pv-input {
    height: 40px; padding: 0 .85rem; box-sizing: border-box;
    border: 1px solid #e2e8f0; border-radius: 10px; background-color: #fff;
    font: 500 .82rem 'Poppins', sans-serif; color: #1e293b; box-shadow: none;
}
.jp-filters select.adir-sort-select, select.pv-input {
    -webkit-appearance: none; appearance: none; padding-right: 2.2rem; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .8rem center;
}
.jp-filters select.adir-sort-select:hover, .pv-input:hover { border-color: color-mix(in srgb, var(--career-primary) 45%, #e2e8f0); }
.jp-filters select.adir-sort-select:focus, .pv-input:focus { outline: none; border-color: var(--career-primary); box-shadow: 0 0 0 3px rgba(64, 146, 204, .15); }
body.dark-mode .jp-filters select.adir-sort-select, body.dark-mode .pv-input { background-color: #2c2c2e; border-color: #3a3a3c; color: #f1f5f9; }
body.dark-mode .pv-input { color-scheme: dark; }
/* Labelled field (label uses the shared small grey label) */
.pv-field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.pv-field .pv-input { width: 100%; }
.pv-field.error .pv-input { border-color: #ef4444; }
.pv-help { font-size: .72rem; color: #94a3b8; }

/* Buttons: filled (Dashboard "Open …" + tool pages, colour from --hub-c) and outline */
.hub-go, .pv-btn { display: inline-flex; align-items: center; gap: .5rem; height: 38px; padding: 0 1.1rem; border-radius: 10px; background: var(--hub-c, var(--career-primary)); color: #fff; font-weight: 600; font-size: .86rem; }
.pv-btn { justify-content: center; border: 0; font-family: 'Poppins', sans-serif; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: none; transform: none; transition: background .15s; }
.pv-btn:hover { background: color-mix(in srgb, var(--hub-c, var(--career-primary)) 84%, #000); color: #fff; box-shadow: none; transform: none; }
.pv-btn:disabled { opacity: .55; cursor: not-allowed; }
.pv-btn.go { --hub-c: #16a34a; }
.pv-btn.danger { --hub-c: #dc2626; }
button.jp-noapp-go, button.jp-noapp-go:hover, .pv-btn.ghost, .pv-btn.ghost:hover { display: inline-flex; align-items: center; gap: .45rem; height: 34px; padding: 0 .95rem; border: 1px solid #e2e8f0; border-radius: 9px; background: #f8fafc; color: #1e293b; font: 600 .8rem 'Poppins', sans-serif; box-shadow: none; transform: none; cursor: pointer; }
button.jp-noapp-go:hover, .pv-btn.ghost:hover { border-color: var(--career-primary); color: var(--career-primary); }
.pv-btn.ghost, .pv-btn.ghost:hover { height: 38px; border-radius: 10px; } /* matches the filled button beside it */
.pv-btn.ghost.danger:hover { border-color: #dc2626; color: #dc2626; }
body.dark-mode button.jp-noapp-go, body.dark-mode .pv-btn.ghost { background: #242426; border-color: #3a3a3c; color: #f1f5f9; }

/* Inner panel: white box inside a card (Edit rows, Add Flight pass, Logbook tiles, map, table) */
.flight-edit-item, .af-pass, .lb-land, .aircraft-type-card, .flight-log-table-container, #flight-map { border: 1px solid #e8edf3; border-radius: 12px; background: #fff; }
body.dark-mode .flight-edit-item, body.dark-mode .af-pass, body.dark-mode .lb-land, body.dark-mode .aircraft-type-card,
body.dark-mode .flight-log-table-container, body.dark-mode #flight-map { background: #2c2c2e; border-color: #3a3a3c; }

/* Dialog: Add Flight success popup, Logbook delete confirm */
.popup-overlay, .confirm-dialog { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(15, 23, 42, .45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.popup-modal, .confirm-dialog-content { width: min(420px, 100%); margin: 0; padding: 1.5rem; box-sizing: border-box; border-radius: 16px; background: #fff; border: 1px solid #e8edf3; box-shadow: 0 24px 60px -20px rgba(15, 23, 42, .45); text-align: left; }
.popup-modal h3, .confirm-dialog-content h3 { margin: 0 0 .4rem; font: 700 1.1rem 'Poppins', sans-serif; color: #1e293b; text-align: left; }
.popup-modal h3::after, .confirm-dialog-content h3::after { display: none; }
.popup-modal p, .confirm-dialog-content p { margin: 0 0 1.2rem; font-size: .88rem; line-height: 1.55; color: #64748b; }
body.dark-mode .popup-modal, body.dark-mode .confirm-dialog-content { background: #2c2c2e; border-color: #3a3a3c; }
body.dark-mode .popup-modal h3, body.dark-mode .confirm-dialog-content h3 { color: #f1f5f9; }
body.dark-mode .popup-modal p, body.dark-mode .confirm-dialog-content p { color: #a1a1aa; }

/* ── Early Access banner, compact under the top bar (career.html) ── */
.testing-warning-banner.is-compact {
    flex-direction: row; justify-content: flex-start; flex-wrap: nowrap; gap: .5rem;
    margin: 0 0 .9rem; padding: .65rem .65rem .65rem 1rem;
    font-size: .78rem; line-height: 1.4; text-align: left;
    background: #fffbeb; color: #92400e;
    border: 1px solid #fde68a; border-radius: 10px; box-shadow: none;
}
.testing-warning-banner.is-compact > span:first-of-type { flex: 1; min-width: 0; }
.testing-warning-banner.is-compact i { font-size: .8rem; color: #f59e0b; animation: none; }
.testing-warning-banner.is-compact .career-guide-text { display: none; }
.testing-warning-banner.is-compact .career-guide-link {
    flex: none; font-size: .74rem; padding: .35rem .75rem; border-radius: 7px;
    background: #f59e0b; color: #fff;
}
.testing-warning-banner.is-compact .career-guide-link i { color: #fff; }
.testing-warning-banner.is-compact .career-guide-link:hover { background: #d97706; }
body.dark-mode .testing-warning-banner.is-compact { background: rgba(245, 158, 11, .1); border-color: rgba(245, 158, 11, .3); color: #fcd34d; }
@media (max-width: 576px) {
    .testing-warning-banner.is-compact { flex-wrap: wrap; }
}

/* ── Contract card: payday strip at the foot, fills the space beside the taller crew card ── */
.ec-con { display: flex; flex-direction: column; }
.ec-con .ec-pay { grid-template-columns: repeat(2, auto); }
.ec-payday { display: flex; align-items: center; gap: .75rem; margin: auto 14px 0; padding: .7rem .9rem; border-radius: 10px; background: rgba(34, 197, 94, .08); border: 1px solid rgba(34, 197, 94, .2); }
.ec-con .ec-tl { margin-bottom: 1.2rem; } /* minimum gap above the payday strip */
.ec-payday-ic { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 8px; background: rgba(34, 197, 94, .15); color: #16a34a; font-size: .85rem; }
.ec-payday small { display: block; font-size: .68rem; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; }
.ec-payday b { display: block; color: #1e293b; font-size: .92rem; font-weight: 600; }
.ec-payday .ec-pending { margin: 0 0 0 auto; font-size: .82rem; white-space: nowrap; }
body.dark-mode .ec-payday { background: rgba(74, 222, 128, .08); border-color: rgba(74, 222, 128, .2); }
body.dark-mode .ec-payday b { color: #f1f5f9; }
body.dark-mode .ec-payday-ic { color: #4ade80; }
@media (max-width: 1100px) { .ec-payday { margin-top: 0; } }

/* ── Beta banner close button (added by js/topbar.js) ── */
.testing-warning-banner .banner-close {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; margin-left: .25rem; padding: 0;
    border: none; border-radius: 7px; background: transparent; color: inherit;
    cursor: pointer; opacity: .75; transition: opacity .15s ease, background .15s ease;
}
.testing-warning-banner .banner-close:hover { opacity: 1; background: rgba(0, 0, 0, .08); }
.testing-warning-banner .banner-close i { font-size: .85rem; color: inherit; animation: none; }
body.dark-mode .testing-warning-banner .banner-close:hover { background: rgba(255, 255, 255, .1); }

/* Pilot names that open /profile (seniority list, Airline HQ) */
a.pilot-link, a.pilot-link:link, a.pilot-link:visited { color: inherit; text-decoration: none; font: inherit; }
a.pilot-link:hover { color: var(--career-primary); text-decoration: underline; }
body.dark-mode a.pilot-link:hover { color: #93c5fd; }