/* ================================================================
   TRAVEL WEATHER — WHEN TO GO V8
   Load after the main application stylesheet.
   Use this as the only when-to-go patch after the main application stylesheet.
   ================================================================ */

/* One-step planner ------------------------------------------------ */
.planner-layout {
    grid-template-columns: 330px minmax(0, 1fr) !important;
}

.planner-sidebar {
    padding: 20px 20px 24px !important;
}

.planner-description {
    margin-top: 6px;
}

.planner-control {
    margin-top: 18px !important;
}

.planner-control-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.planner-control-label-row .input-label {
    margin: 0 !important;
}

.planner-control-days {
    margin-top: 16px !important;
}

.planner-sidebar .search-button {
    margin-top: 22px !important;
}

/* Compact map header ---------------------------------------------- */
.planner-content,
.planner-main-content,
.planner-map {
    min-width: 0;
    min-height: 0;
    height: 100%;
}

.planner-main-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.planner-main-content.has-results {
    grid-template-columns: minmax(0, 1fr) 380px;
}

.map-header {
    min-height: 40px !important;
    padding: 6px 14px !important;
    gap: 0 !important;
}

.map-header h3 {
    margin: 0;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    color: #374151;
}

.map-header p {
    margin: 2px 0 0;
    font-size: 10px;
    line-height: 1.2;
    color: #8a929d;
}

/* Right decision sidebar ----------------------------------------- */
.when-opportunities-sidebar {
    min-width: 0;
    height: 100%;
    max-height: none !important;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    padding: 16px 14px 22px !important;
    background: #f8f9fa;
    border-left: 1px solid #e5e7eb;
    scrollbar-width: thin;
}

.when-results-list-view,
.when-period-detail {
    width: 100%;
    min-width: 0;
}

.opportunities-sidebar-header {
    margin-bottom: 0 !important;
}

.opportunities-sidebar-title {
    margin: 0;
    font-size: 17px !important;
    line-height: 1.2;
    font-weight: 750;
    color: #111827;
}

.opportunities-sidebar-description {
    margin: 4px 0 0 !important;
    font-size: 10px !important;
    line-height: 1.35;
    color: #8a929d;
}

.opportunities-action-hint {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 9px 0 12px;
    font-size: 10.5px;
    line-height: 1.4;
    color: #6b7280;
}

.opportunities-action-hint-icon {
    flex: 0 0 auto;
    color: #9ca3af;
}

.opportunities-sidebar-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
}

.when-opportunity-card {
    cursor: pointer;
    padding: 13px 13px 12px !important;
}

.when-opportunity-card:hover {
    border-color: #b9c1cc;
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.06);
    transform: translateY(-1px);
}

.when-card-date {
    font-size: 13px !important;
}

.when-card-score-value {
    font-size: 18px !important;
}

.when-card-destination {
    margin-top: 6px !important;
    font-size: 12px !important;
}

.when-card-suitability {
    margin-top: 8px !important;
    font-size: 11px !important;
}

/* Human-readable facts ------------------------------------------- */
.when-card-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}

.when-card-fact {
    display: inline-flex;
    align-items: center;
    min-height: 21px;
    padding: 3px 7px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #fafbfc;
    font-size: 9.5px;
    line-height: 1.2;
    font-weight: 600;
    color: #4b5563;
    white-space: normal;
}

.when-card-fact-temperature {
    letter-spacing: -0.01em;
}

.when-card-fact-reliability-good {
    background: #f3faf5;
    border-color: #cfe7d5;
    color: #2f6f43;
}

.when-card-fact-reliability-warning {
    background: #fffaf0;
    border-color: #ecd9ad;
    color: #8a6519;
}

.when-card-fact-reliability-poor {
    background: #fff6f4;
    border-color: #eccfc8;
    color: #a14f43;
}

/* Reasons: check = positive, warning = limitation ---------------- */
.when-card-reasons {
    margin-top: 9px;
}

.when-card-reason,
.period-detail-reason {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding-left: 0 !important;
}

.when-card-reason::before,
.period-detail-reason::before {
    content: none !important;
}

.when-card-reason + .when-card-reason {
    margin-top: 5px;
}

.when-card-reason-icon {
    flex: 0 0 12px;
    width: 12px;
    font-size: 10px;
    line-height: 1.35;
    font-weight: 800;
    text-align: center;
}

.when-card-reason-text {
    font-size: 10px;
    line-height: 1.35;
    color: #5d6673;
}

.when-card-reason-good .when-card-reason-icon,
.period-detail-reason-good .period-detail-reason-icon {
    color: #3f7b50;
}

.when-card-reason-warning .when-card-reason-icon,
.period-detail-reason-warning .period-detail-reason-icon {
    color: #b17a18;
}

/* Method info ----------------------------------------------------- */
.when-method-info {
    margin: 0 0 12px;
}

.when-method-summary {
    cursor: pointer;
    list-style: none;
    font-size: 10px;
    line-height: 1.35;
    font-weight: 650;
    color: #687386;
}

.when-method-summary::-webkit-details-marker {
    display: none;
}

.when-method-summary::before {
    content: "ⓘ";
    margin-right: 6px;
    color: #8a94a3;
}

.when-method-content {
    margin-top: 7px;
    padding: 9px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    color: #6b7280;
    font-size: 10px;
    line-height: 1.45;
}

.when-method-content p {
    margin: 0 0 6px;
}

.when-method-content p:last-child {
    margin-bottom: 0;
}

/* Results became stale after changing map/form ------------------- */
.results-stale-banner {
    margin-bottom: 11px;
    padding: 9px 10px;
    border: 1px solid #ecd9ad;
    border-radius: 8px;
    background: #fffaf0;
    color: #7a5a1a;
    font-size: 10px;
    line-height: 1.4;
}

.results-stale-banner strong,
.results-stale-banner span {
    display: block;
}

.results-stale-banner span {
    margin-top: 2px;
    color: #8b6d31;
}

/* Sidebar detail -------------------------------------------------- */
.when-period-detail {
    margin-top: 0 !important;
}

.period-detail-card {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #dfe3e8;
    border-radius: 11px;
    box-shadow: 0 4px 14px rgba(17, 24, 39, 0.045);
}

.period-detail-back {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 13px 14px 0;
    border: 0;
    background: transparent;
    color: #667085;
    font-size: 10.5px;
    font-weight: 650;
    cursor: pointer;
}

.period-detail-back:hover {
    color: #111827;
}

.period-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 14px 13px;
    border-bottom: 1px solid #eef0f2;
}

.period-detail-date {
    margin-bottom: 4px;
    font-size: 9px;
    line-height: 1.2;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #8a929d;
}

.period-detail-title {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 750;
    color: #111827;
}

.period-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 5px;
    font-size: 10px;
    line-height: 1.35;
    color: #6b7280;
}

.period-detail-score {
    flex: 0 0 auto;
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.period-detail-score-value {
    font-size: 27px;
    line-height: 1;
    font-weight: 760;
    color: #111827;
}

.period-detail-score-max {
    font-size: 9px;
    color: #9ca3af;
}

.period-detail-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 14px;
}

.period-detail-section-title {
    margin: 0 0 9px;
    font-size: 9.5px;
    line-height: 1.2;
    font-weight: 750;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    color: #6b7280;
}

.period-detail-reasons {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.period-detail-reason-icon {
    flex: 0 0 14px;
    width: 14px;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    text-align: center;
}

.period-detail-reason-text {
    font-size: 11px;
    line-height: 1.4;
    color: #374151;
}

.period-detail-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.period-detail-metric {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 9px;
    background: #fafbfc;
    border: 1px solid #eef0f2;
    border-radius: 8px;
}

.period-detail-metric-label {
    font-size: 8px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9ca3af;
}

.period-detail-metric-value {
    font-size: 10.5px;
    line-height: 1.35;
    font-weight: 700;
    color: #374151;
}

.period-detail-cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 13px 14px 14px;
    background: #f8fbfa;
    border-top: 1px solid #e6efeb;
}

.period-detail-cta-copy-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.period-detail-cta-title {
    font-size: 11px;
    line-height: 1.3;
    color: #263a30;
}

.period-detail-cta-copy {
    font-size: 9.5px;
    line-height: 1.35;
    color: #6b7280;
}

.period-detail-booking {
    width: 100% !important;
    box-sizing: border-box;
    margin: 0 !important;
    white-space: normal;
}

/* Responsive ------------------------------------------------------ */
@media (max-width: 1100px) and (min-width: 701px) {
    .planner-layout {
        grid-template-columns: 300px minmax(0, 1fr) !important;
    }

    .planner-main-content.has-results {
        grid-template-columns: minmax(0, 1fr) 340px;
    }

    .planner-sidebar {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

@media (max-width: 820px) {
    .planner-main-content.has-results {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(420px, 55vh) auto;
        height: auto;
    }

    .when-opportunities-sidebar {
        height: auto;
        max-height: none !important;
        border-left: 0;
        border-top: 1px solid #e5e7eb;
    }
}

@media (max-width: 700px) {
    .planner-layout {
        display: flex !important;
        flex-direction: column;
    }

    .planner-map {
        min-height: 420px;
    }

    .period-detail-metrics {
        grid-template-columns: 1fr 1fr;
    }
}


/* ================================================================
   V7 OVERRIDES
   Keep the map visible when results are shown and clarify the
   "search period" control.
   ================================================================ */

/*
   Older experimental styles used :has(...) to turn the results area
   into a full-width block and hide the map. These stronger overrides
   intentionally restore the final three-column interaction:
       controls | map | recommendations
*/
.planner-main-content.has-results,
.planner-main-content:has(
    .when-opportunities-sidebar[style*="display: block"]
) {
    display: grid !important;
    grid-template-columns: minmax(420px, 1fr) 340px !important;
    grid-template-rows: minmax(0, 1fr) !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
}

.planner-main-content.has-results .planner-map,
.planner-main-content:has(
    .when-opportunities-sidebar[style*="display: block"]
) .planner-map {
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    height: 100% !important;
}

.planner-main-content.has-results .when-opportunities-sidebar,
.planner-main-content:has(
    .when-opportunities-sidebar[style*="display: block"]
) .when-opportunities-sidebar {
    display: block;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    padding: 16px 14px 22px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #f8f9fa !important;
    border-left: 1px solid #e5e7eb !important;
}

/* Search period --------------------------------------------------- */
.planner-control-period .input-label {
    margin-bottom: 0 !important;
}

.period-search-help {
    margin: 5px 0 9px !important;
    max-width: 285px;
    font-size: 10.5px !important;
    line-height: 1.45 !important;
    color: #667085 !important;
}

.period-search-footnote {
    margin: 7px 0 0 !important;
    font-size: 9.5px !important;
    line-height: 1.35 !important;
    color: #98a2b3 !important;
}

/*
   The date picker represents a search window, not necessarily a fixed
   trip. Give it a subtle container so "from → to" reads as one period.
*/
.planner-control-period .date-picker-range {
    width: 100%;
}

.planner-control-period .DateRangePicker,
.planner-control-period .DateRangePickerInput {
    width: 100%;
}

.planner-control-period .DateRangePickerInput {
    box-sizing: border-box;
}

/* Mid-sized desktop: preserve useful map space before stacking. */
@media (max-width: 1180px) and (min-width: 821px) {
    .planner-main-content.has-results,
    .planner-main-content:has(
        .when-opportunities-sidebar[style*="display: block"]
    ) {
        grid-template-columns: minmax(360px, 1fr) 320px !important;
    }
}

/* Small screens keep the existing stacked behavior. */
@media (max-width: 820px) {
    .planner-main-content.has-results,
    .planner-main-content:has(
        .when-opportunities-sidebar[style*="display: block"]
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(420px, 55vh) auto !important;
        height: auto !important;
    }

    .planner-main-content.has-results .when-opportunities-sidebar,
    .planner-main-content:has(
        .when-opportunities-sidebar[style*="display: block"]
    ) .when-opportunities-sidebar {
        height: auto !important;
        border-left: 0 !important;
        border-top: 1px solid #e5e7eb !important;
    }
}


/* ================================================================
   V8 — SEARCH PERIOD SHORTCUTS
   ================================================================ */

.period-shortcuts-block {
    margin: 8px 0 10px;
}

.period-shortcuts-label {
    display: block;
    margin-bottom: 6px;
    font-size: 9.5px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    color: #98a2b3;
}

.period-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.period-shortcut-button {
    appearance: none;
    border: 1px solid #d8dde5;
    border-radius: 999px;
    padding: 6px 9px;
    background: #ffffff;
    color: #475467;
    font: inherit;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 650;
    cursor: pointer;

    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
}

.period-shortcut-button:hover {
    border-color: #aeb7c4;
    background: #f8fafc;
    color: #1f2937;
}

.period-shortcut-button:focus-visible {
    outline: none;
    border-color: #7fcfc3;
    box-shadow: 0 0 0 3px rgba(127, 207, 195, 0.18);
}

/*
   The two-month shortcut matches the initial state, so a very subtle
   treatment helps users understand the intended default without
   implying that the date range is locked to it.
*/
.period-shortcut-default {
    border-color: #c9e9e4;
    background: #f2fbf9;
    color: #246b63;
}

.period-shortcut-default:hover {
    border-color: #9bd8cf;
    background: #eaf8f5;
    color: #1f625b;
}


/* ==================================================================
   FORECAST + HISTORICAL RESULT GROUPS
   ================================================================== */

.when-results-group {
    margin-top: 14px;
}

.when-results-group + .when-results-group {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #e3e7eb;
}

.when-results-group-header {
    margin-bottom: 9px;
}

.when-results-group-title {
    margin: 0;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 750;
    letter-spacing: 0.01em;
    color: #26303d;
}

.when-results-group-description {
    margin: 4px 0 0;
    font-size: 9.5px;
    line-height: 1.4;
    color: #8a929d;
}

/* Forecast section gets a light visual cue without looking like
   a separate product/card system. */
.when-results-group-forecast .when-results-group-title {
    color: #246b63;
}

.when-results-group-forecast .when-results-group-header {
    padding-left: 9px;
    border-left: 2px solid #9ed7cf;
}

.when-results-group-historical .when-results-group-title {
    color: #4b5563;
}

/* Forecast cards -------------------------------------------------- */

.when-opportunity-card-forecast {
    border-color: #d6e8e4 !important;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfefd 100%
        );
}

.when-opportunity-card-forecast:hover {
    border-color: #a9d3cc !important;
    box-shadow:
        0 5px 15px rgba(36, 107, 99, 0.08);
}

.when-opportunity-card-forecast .when-card-suitability {
    color: #46756f;
    font-weight: 650;
}

/* Make ranking less visually important than date and score. */
.when-card-rank {
    color: #a6adb7 !important;
    font-size: 9px !important;
    font-weight: 650 !important;
}

/* Keep cards dense but give forecast/historical context a bit more
   breathing room. */
.when-results-group .opportunities-sidebar-list {
    gap: 8px !important;
}

/* ==================================================================
   FORECAST DETAIL
   ================================================================== */

.period-detail-forecast {
    padding: 11px;
    border: 1px solid #dcece8;
    border-radius: 9px;
    background: #f8fcfb;
}

.period-detail-forecast .period-detail-section-title {
    color: #37746c;
}

.period-detail-forecast .period-detail-reason {
    margin-bottom: 9px;
}

.period-detail-forecast .period-detail-metrics {
    margin-top: 9px;
}

.period-detail-forecast .period-detail-metric {
    background: #ffffff;
    border-color: #e2efec;
}

/* Historical context below a forecast should read as secondary,
   not as another competing forecast block. */
.period-detail-forecast + .period-detail-reasons-block,
.period-detail-forecast + .period-detail-conditions {
    padding-top: 1px;
}

/* Slight hierarchy cleanup for right sidebar ---------------------- */

.when-opportunities-results > .opportunities-sidebar-header {
    padding-bottom: 1px;
}

.when-opportunities-results > .when-method-info {
    margin-bottom: 4px;
}

/* Mobile */
@media (max-width: 820px) {
    .when-results-group + .when-results-group {
        margin-top: 18px;
        padding-top: 15px;
    }

    .when-results-group-header {
        margin-bottom: 8px;
    }
}


/* Compact trip radios, matching the planner's period shortcuts. */
.planner-sidebar .trip-weekday-radios label,
.planner-sidebar .trip-duration-radios label {
    min-height: 32px;
    padding: 6px 4px;
    font-size: 10.5px;
    border-radius: 7px;
}

.planner-sidebar .trip-weekday-radios input[type="radio"],
.planner-sidebar .trip-duration-radios input[type="radio"] {
    width: 11px;
    height: 11px;
}

.planner-sidebar #trip-pattern-help {
    margin-top: 9px;
    font-size: 10.5px;
    line-height: 1.45;
    color: #667085;
}

@media (max-width: 700px) {
    .planner-sidebar .trip-weekday-radios label,
    .planner-sidebar .trip-duration-radios label {
        min-height: 40px;
        font-size: 12px;
    }
}


/* Show the decision sidebar immediately, including the first search. */
.when-calculation-status {
    display: none;
}

.when-calculation-status.is-running {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 12px;
    border: 1px solid #dcece8;
    border-radius: 9px;
    background: #f8fcfb;
}

.when-loading-spinner {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    border: 3px solid #dcece8;
    border-top-color: #246b63;
    border-radius: 50%;
    animation: when-loading-spin 0.8s linear infinite;
}

.when-loading-copy strong {
    display: block;
    color: #246b63;
    font-size: 12px;
    line-height: 1.4;
}

.when-loading-copy p {
    margin: 4px 0 0;
    color: #667085;
    font-size: 10.5px;
    line-height: 1.45;
}

.when-opportunities-sidebar:has(.when-calculation-status.is-running) {
    display: block !important;
}

.planner-main-content:has(.when-calculation-status.is-running) {
    display: grid !important;
    grid-template-columns: minmax(420px, 1fr) 340px !important;
    grid-template-rows: minmax(0, 1fr) !important;
}

/* Previous cards must not look like the result of an ongoing search. */
.when-opportunities-sidebar:has(.when-calculation-status.is-running) >
:is(.when-results-list-view, .when-period-detail, .results-stale-banner) {
    display: none !important;
}

@keyframes when-loading-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .when-loading-spinner { animation: none; }
}

@media (max-width: 1180px) and (min-width: 821px) {
    .planner-main-content:has(.when-calculation-status.is-running) {
        grid-template-columns: minmax(360px, 1fr) 320px !important;
    }
}

@media (max-width: 820px) {
    .planner-main-content:has(.when-calculation-status.is-running) {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(420px, 55vh) auto !important;
        height: auto !important;
    }
}


/* Short, rule-based advice above the recommendation cards. */
.when-results-summary {
    margin: 12px 0;
    padding: 12px 13px;
    border: 1px solid #dcebe7;
    border-radius: 10px;
    background: #f4faf8;
}

.when-results-summary-title {
    margin: 0 0 6px;
    color: #246b63;
    font-size: 12px;
    font-weight: 700;
}

.when-results-summary-text {
    margin: 0;
    color: #475569;
    font-size: 11px;
    line-height: 1.6;
}


/* Review: readable advice, explicit readiness and results first on mobile. */
.when-results-summary-text { font-size: 12px; line-height: 1.55; }
.find-dates-help { margin: 8px 0 0; color: #667085; font-size: 11px; line-height: 1.4; }
.when-card:focus-visible, .when-opportunity-card:focus-visible,
.accommodation-button:focus-visible { outline: 3px solid #63b7ad; outline-offset: 3px; }
@media (max-width: 820px) {
    body { overflow: auto; }
    #_dash-app-content, .app-shell { height: auto; min-height: 100vh; overflow: visible; }
    .main { display: block; }
    .planner-layout { display: flex !important; flex-direction: column; }
    .planner-sidebar { overflow: visible; border-right: 0; border-bottom: 1px solid #e5e7eb; }
    .planner-content, .planner-main-content { height: auto; }
    .planner-sidebar .trip-weekday-radios label,
    .planner-sidebar .trip-duration-radios label { min-height: 44px; }
    .planner-main-content.has-results,
    .planner-main-content:has(.when-calculation-status.is-running) {
        grid-template-rows: auto minmax(300px, 45vh) !important;
    }
    .planner-main-content.has-results .when-opportunities-sidebar,
    .planner-main-content:has(.when-calculation-status.is-running) .when-opportunities-sidebar {
        grid-row: 1; border-top: 0 !important; border-bottom: 1px solid #e5e7eb;
        overflow-y: visible !important;
    }
    .planner-main-content.has-results .planner-map,
    .planner-main-content:has(.when-calculation-status.is-running) .planner-map {
        grid-row: 2; min-height: 300px !important;
    }
    .when-card-fact, .when-card-reason { font-size: 11px !important; }
    .when-opportunity-card { padding: 16px !important; }
}

.trip-duration-radios label:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }

.forecast-status-notice { margin: 12px 0; padding: 12px; border-radius: 10px; background: #fff6df; color: #604817; font-size: 0.9rem; line-height: 1.5; }