/* ================================================
   CALENDAR PREVIEW (calendar.html) — on career.css + shared.css
   Day cells, dates, flight chips, key, labels and buttons are shared (week calendar + controls);
   this is the page layout, the month-grid specifics and resets for styles.css's generic .flight-card.
   ================================================ */
.cal-wrap { --ff-c: #0ea5e9; --car-c: #4092cc; --wk-c: #4092cc; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: .9rem; align-items: start; }
.cal-mode .pv-seg { min-width: 340px; }
.cal-mode .mode-label { cursor: pointer; }

/* ---- Sidebar: key, standby, flights to place ---- */
#career-dashboard-section .cal-wrap .sidebar { position: sticky; top: 80px; display: flex; flex-direction: column; max-height: calc(100vh - 100px); }
.cal-sub { margin: 0 0 .45rem; }
.standby-creator { margin-bottom: .9rem; }
.standby-creator.disabled { opacity: .4; pointer-events: none; }
.duration-buttons { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .3rem; }
.cal-wrap .duration-button, .cal-wrap .duration-button:hover { height: 32px; padding: 0; justify-content: center; font-size: .76rem; }
.available-flights { flex: 1; min-height: 60px; overflow-y: auto; display: flex; flex-direction: column; gap: .4rem; padding: .1rem .15rem .1rem 0; scrollbar-width: thin; }
.available-flights:empty::before { content: 'Everything is on the calendar'; padding: 1rem .5rem; border: 1px dashed #e2e8f0; border-radius: 10px; text-align: center; font-size: .78rem; color: #94a3b8; }
.unschedule-section { display: flex; flex-direction: column; gap: .4rem; margin-top: .8rem; padding-top: .8rem; border-top: 1px dashed #e2e8f0; }
.unschedule-section .pv-btn { width: 100%; }

/* ---- Flight chips: reset styles.css's generic .flight-card, then card behaviour ---- */
.cal-wrap .flight-card { margin: 0; max-width: none; user-select: none; cursor: grab; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); border-left: 3px solid var(--c); } /* full border so chips don't fade into the cell */
.cal-wrap .flight-card:hover { transform: none; box-shadow: none; }
.cal-wrap .flight-info > div { display: block; order: 0; margin: 0; padding: 0; background: none; border-radius: 0; }
.cal-wrap .flight-card.dragging { opacity: .45; }
.cal-wrap .flight-card.picked { box-shadow: 0 0 0 2px var(--c); }
/* Airline logo on every chip: beside the text in the list, on top in a day cell */
.cal-wrap .flight-card img { display: block; height: 20px; max-width: 72px; padding: 2px 5px; box-sizing: content-box; border-radius: 5px; background: #fff; object-fit: contain; }
.available-flights .flight-card { display: flex; align-items: center; gap: .6rem; flex: none; }
.available-flights .flight-card img { width: 46px; height: 24px; flex: none; }
.available-flights .flight-info { min-width: 0; }
#month-container .flight-card img { margin-bottom: .3rem; }
/* Standby blocks: amber, with complete + delete */
.cal-wrap .standby-card { --c: #f59e0b; max-width: none; margin: 0; box-shadow: none; overflow: visible; } /* chip look is shared; this undoes styles.css's .standby-card */
.cal-wrap .standby-controls { display: flex; align-items: center; gap: .4rem; margin-top: .25rem; }
.standby-checkbox { margin: 0; accent-color: #16a34a; cursor: pointer; }
button.delete-standby, button.delete-standby:hover { all: unset; margin-left: auto; padding: 0 .2rem; font-size: 1rem; line-height: 1; color: #94a3b8; cursor: pointer; }
button.delete-standby:hover { color: #dc2626; }

/* ---- Month: blue band header, tinted weekday row, cells ---- */
#career-dashboard-section .cal-wrap .main-content { padding: 0; overflow: hidden; }
.calendar-header { justify-content: space-between; gap: .6rem 1rem; flex-wrap: wrap; padding: .75rem 1rem; }
.cal-nav, .calendar-actions { position: relative; z-index: 1; display: flex; align-items: center; gap: .5rem; }
#career-dashboard-section .calendar-header h2 { display: block; min-width: 170px; margin: 0; font: 600 1.15rem 'Poppins', sans-serif; color: #fff; text-align: center; } /* beats the shared card-title rule */
/* Colour key on the band: white text, swatches ringed so they read on blue */
.cal-key { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .3rem 0; margin-left: auto; }
.calendar-header .hub-key { color: #fff; }
.calendar-header .hub-key::before { box-shadow: 0 0 0 1.5px #fff; }
.cal-key .hub-key.sb::before { background: #f59e0b; }
/* Month / Week / Day switch on the band (shared switch, white-on-blue) */
.calendar-header .cal-view { position: relative; z-index: 1; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .22); }
.calendar-header .cal-view > *, .calendar-header .cal-view > *:hover { height: 28px; padding: 0 .75rem; color: rgba(255, 255, 255, .85); }
.calendar-header .cal-view > *:hover { color: #fff; }
.calendar-header .cal-view > .active, .calendar-header .cal-view > .active:hover { background: #fff; color: var(--career-primary); }
/* White-on-band buttons */
.calendar-header .pv-btn.ghost, .calendar-header .pv-btn.ghost:hover { background: rgba(255, 255, 255, .16); border-color: transparent; color: #fff; }
.calendar-header .pv-btn.ghost:hover { background: rgba(255, 255, 255, .26); }
.cal-wrap .nav-button, .cal-wrap .nav-button:hover { width: 38px; padding: 0; justify-content: center; }
.cal-wrap .nav-button:disabled { opacity: .35; cursor: not-allowed; }
.cal-wrap .nav-button.drag-hover { background: #fff; color: var(--career-primary); box-shadow: 0 0 0 3px rgba(255, 255, 255, .45); }
#month-container { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 0; border-radius: 0; } /* sits flush under the band */
.cal-wrap .weekday-header { font-size: .6rem; padding: .55rem .7rem; background: #eef5fb; border-bottom: 1px solid #e2ecf5; color: #4f7da6; }
.cal-wrap .day-cell { min-height: 130px; border-bottom: 1px solid #eef2f6; }
.cal-wrap .day-cell:nth-child(7n) { border-right: 0; }
.cal-wrap .day-cell:nth-child(7n), .cal-wrap .day-cell:nth-child(7n - 1) { background: #f7fafd; } /* weekend */
.cal-wrap .day-cell.current-day { background: color-mix(in srgb, var(--wk-c) 8%, #fff); box-shadow: inset 0 3px 0 var(--wk-c); }
/* Week: tall day columns; Day: one wide day with flights side by side */
#month-container.view-week .day-cell { min-height: 420px; }
#month-container.view-day { grid-template-columns: 1fr; }
#month-container.view-day .day-cell { min-height: 360px; border-right: 0; padding: .9rem 1rem; }
#month-container.view-day .flight-card-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); align-content: start; gap: .5rem; }
#month-container.view-day .flight-card img { height: 26px; }
.cal-wrap .day-cell.other-month { background: repeating-linear-gradient(-45deg, #fafbfc 0 8px, #f5f7fa 8px 16px); }
.flight-card-container { flex: 1; display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
/* Calendar only: smaller weekday + date than the week calendars */
.cal-wrap .date-container { font-size: .6rem; }
.cal-wrap .date-container b { font-size: .88rem; }
.cal-wrap .current-day .date-container b { min-width: 22px; height: 22px; border-radius: 7px; font-size: .78rem; }
body.dark-mode .cal-wrap .flight-card { border-color: color-mix(in srgb, var(--c) 45%, #3a3a3c); border-left-color: var(--c); }

/* Google Calendar import steps (dialog look is shared) */
.cal-gsteps { margin: 0 0 1rem; padding-left: 1.2rem; font-size: .86rem; line-height: 1.55; color: #475569; }
.cal-gsteps li + li { margin-top: .35rem; }
body.dark-mode .cal-gsteps { color: #cbd5e1; }

/* Tap-to-place hint (frosted bar look is shared) */
#tap-hint { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 900; display: flex; align-items: center; gap: .75rem; max-width: calc(100vw - 2rem); padding: .55rem .6rem .55rem 1rem; border-radius: 16px; font-size: .8rem; color: #334155; }
#tap-hint button, #tap-hint button:hover { all: unset; flex: none; padding: .35rem .8rem; border-radius: 9px; background: var(--career-primary); color: #fff; font-size: .75rem; font-weight: 600; cursor: pointer; }
@media (pointer: coarse) { .cal-wrap .day-cell, .cal-wrap .flight-card { cursor: pointer; } }

/* ---- Dark mode ---- */
body.dark-mode .available-flights:empty::before, body.dark-mode .unschedule-section { border-color: #3a3a3c; }
body.dark-mode .cal-wrap .weekday-header { background: #263240; border-color: #3a3a3c; color: #9cc3e6; }
body.dark-mode .cal-wrap .day-cell:nth-child(7n), body.dark-mode .cal-wrap .day-cell:nth-child(7n - 1) { background: #29292c; }
body.dark-mode .cal-wrap .day-cell.current-day { background: color-mix(in srgb, var(--wk-c) 16%, #2c2c2e); }
body.dark-mode .cal-wrap .day-cell.other-month { background: repeating-linear-gradient(-45deg, #262628 0 8px, #232325 8px 16px); }
body.dark-mode #tap-hint { color: #e2e8f0; }

/* ---- Responsive: below 1400px the flights panel sits above the month (full-width days),
   flights scroll sideways; phone = one row per day ---- */
@media (max-width: 1400px) {
    .cal-wrap { grid-template-columns: 1fr; }
    #career-dashboard-section .cal-wrap .sidebar { position: static; max-height: none; }
    .available-flights { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: .1rem 0 .5rem; }
    .available-flights .flight-card { width: 220px; }
    .available-flights:empty::before { flex: 1; }
    .unschedule-section { flex-direction: row; flex-wrap: wrap; }
    .unschedule-section .pv-btn { width: auto; flex: 1 1 220px; }
}
@media (max-width: 600px) {
    .cal-wrap .weekday-header, .cal-wrap .day-cell.other-month { display: none; }
    .cal-wrap .day-cell { min-height: 0; }
    .cal-mode, .cal-mode .pv-seg { width: 100%; min-width: 0; }
    .calendar-header { justify-content: center; }
    #month-container.view-week .day-cell, #month-container.view-day .day-cell { min-height: 0; }
    .cal-wrap .day-cell:nth-child(n) { background: none; }
    .cal-wrap .day-cell.current-day { background: color-mix(in srgb, var(--wk-c) 8%, #fff); }
}

/* ---- Print: just the month ---- */
@media print {
    .ctb, .hub-head, .cal-wrap .sidebar, .calendar-actions, .cal-nav .nav-button { display: none !important; }
    .cal-wrap { grid-template-columns: 1fr; }
    #career-dashboard-section .main-content { border: 0; box-shadow: none; padding: 0; }
}