/* Journey dashboard: clear navigation, destination photography and compact live data. */
:root {
  --v2-blue: #087ec4;
  --v2-blue-strong: #08669e;
  --v2-navy: #164664;
  --v2-ink: #173349;
  --v2-muted: #596f80;
  --v2-line: #dfe7ed;
  --v2-paper: #f6f9fb;
  --v2-sky: #edf7ff;
  --v2-shadow: none;
  --v2-shadow-soft: none;
}

body { color: var(--v2-ink); background: #fff; padding-bottom: 0; }
button, input, select, textarea { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid #0284c7;
  outline-offset: 3px;
}
[data-icon], .icon-button > svg { display: inline-flex; flex: 0 0 auto; width: 22px; height: 22px; }
[data-icon] svg { width: 100%; height: 100%; }
.icon-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-height: 44px; padding: 10px; flex: 0 0 auto;
  border: 1px solid var(--v2-line); border-radius: 6px;
  color: var(--v2-blue-strong); background: #fff; box-shadow: none;
}
.icon-button:hover { color: #064c79; background: #edf7ff; }
.icon-button:disabled { opacity: .4; cursor: default; }
.app-shell {
  display: grid; grid-template-columns: 214px minmax(0, 1fr); grid-template-rows: 78px 1fr;
  min-height: 100dvh; padding: 0; background: #fff;
}
.app-header {
  grid-column: 1 / -1; grid-row: 1; position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 78px; padding: 10px 28px 10px 18px;
  border-bottom: 1px solid var(--v2-line); background: #fff;
}
.app-brand { display: flex; align-items: center; gap: 12px; min-width: 0; color: #096c9e; text-decoration: none; font-size: 18px; font-weight: 750; }
.app-brand .brand-logo.small { display: block; width: 68px; height: 52px; max-height: 52px; object-fit: contain; flex: 0 0 auto; }
.app-header-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.trip-duration { color: var(--v2-muted); font-size: 14px; white-space: nowrap; }
.app-header .icon-button { border-color: transparent; }
.account-menu { position: relative; }
.account-menu summary {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px;
  color: var(--v2-ink); font-size: 14px; cursor: pointer; border-radius: 6px; list-style: none;
}
.account-menu summary::-webkit-details-marker { display: none; }
#clientName { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu[open] summary { background: #edf7ff; }
.account-actions { position: absolute; top: calc(100% + 10px); right: 0; width: 220px; padding: 10px; display: grid; gap: 8px; background: #fff; border: 1px solid var(--v2-line); border-radius: 6px; box-shadow: 0 8px 24px #1733491a; }
.app-header .menu-toggle { display: none; }
.sidebar {
  grid-column: 1; grid-row: 2; position: sticky; top: 78px; width: auto; height: calc(100dvh - 78px);
  padding: 20px 12px; border-right: 1px solid var(--v2-line); background: #fff;
  box-shadow: none; overflow-y: auto; z-index: 90;
}
.sidebar-menu { display: flex; flex-direction: column; gap: 10px; min-height: 100%; }
.main-nav { display: grid; gap: 5px; }
.nav-item {
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
  width: 100%; min-height: 48px; gap: 12px; padding: 10px 12px;
  border: 0; border-radius: 6px; color: #35556d; background: transparent;
  font-size: 14px; font-weight: 550; text-align: left; box-shadow: none;
}
.nav-item.active, .nav-item.active:hover { color: #fff; background: #087ec4; box-shadow: none; }
.nav-item:hover { background: #edf7ff; }
.support-actions { display: grid; gap: 6px; margin-top: auto; padding-top: 24px; }
.support-button, .offline-button { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 6px; font-size: 13px; line-height: 1.4; text-align: left; box-shadow: none; }
.support-button.whatsapp { color: #18734f; background: #edf9f3; }
.offline-button { color: var(--v2-muted); background: transparent; }
.offline-status { margin: 0; padding: 0 10px; font-size: 12px; overflow-wrap: anywhere; }
.content-shell { grid-column: 2; grid-row: 2; width: 100%; max-width: 1350px; min-width: 0; margin: 0 auto; padding: 28px 32px 32px; }
.search-panel { display: none; margin: 0 0 24px; padding: 16px; background: #f6f9fb; border: 1px solid var(--v2-line); border-radius: 6px; box-shadow: none; }
.app-shell.search-open .search-panel { display: block; }
.search-box { display: flex; gap: 8px; }
.search-box input { min-width: 0; flex: 1; }
.section { padding: 0; }
.section-heading { margin: 0 0 22px; gap: 16px; }
.section-heading h2, .today-section-heading h1 { color: var(--v2-ink); font-size: 30px; line-height: 1.2; margin: 0; letter-spacing: 0; }
.section-heading p { color: var(--v2-muted); font-size: 14px; line-height: 1.5; margin: 7px 0 0; }
.today-section-heading { display: flex; justify-content: space-between; align-items: center; }
.today-section-heading h1 { font-size: 34px; }
.overview-day-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.overview-day-nav > span { min-width: 44px; text-align: center; font-size: 13px; font-weight: 600; color: var(--v2-muted); }
.overview-day-nav .link-button { font-size: 13px; padding: 8px; min-height: 44px; }
.today-panel { display: block; padding: 0; border: 0; background: transparent; box-shadow: none; }
.dashboard-photo { width: 100%; height: 194px; aspect-ratio: auto; margin: 0 0 18px; border-radius: 6px; overflow: hidden; }
.dashboard-photo img { width: 100%; height: 100%; object-fit: cover; }
.dashboard-photo figcaption { font-size: 11px; }
.dashboard-notice { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; padding: 14px 16px; border: 1px solid #f2d896; border-radius: 6px; color: #6b4c08; background: #fff8e8; }
.dashboard-notice > svg { flex: 0 0 24px; width: 24px; height: 24px; }
.dashboard-notice > div { flex: 1; min-width: 0; }
.dashboard-notice strong { font-size: 14px; }
.dashboard-notice p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; }
.dashboard-notice .icon-button { width: 40px; min-height: 40px; height: 40px; color: inherit; border-color: transparent; background: transparent; }
.dashboard-notice.info { color: #22547a; border-color: #c9e3f4; background: #edf7ff; }
.dashboard-notice.alert { color: #a72035; border-color: #efb4bc; background: #fff1f3; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(285px, 1fr); gap: 28px; }
.dashboard-grid h2 { font-size: 20px; line-height: 1.3; color: var(--v2-ink); margin: 0 0 16px; }
.dashboard-status { min-width: 0; border-left: 1px solid var(--v2-line); padding-left: 24px; }
.dashboard-agenda { min-width: 0; }
.dashboard-next { padding: 22px; background: #edf7ff; border-left: 4px solid #087ec4; border-radius: 6px; }
.dashboard-kicker { display: block; margin: 0 0 8px; color: #367296; font-size: 12px; font-weight: 700; line-height: 1.5; }
.dashboard-next h3 { font-size: 24px; line-height: 1.3; margin: 0 0 10px; color: #173349; overflow-wrap: anywhere; }
.dashboard-next p { margin: 8px 0; font-size: 14px; line-height: 1.65; color: #446176; }
.dashboard-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.dashboard-actions a, .dashboard-actions button, .dashboard-hotel > a, .dashboard-hotel > button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 14px; min-height: 44px; border-radius: 6px; font-size: 13px; font-weight: 650; text-decoration: none; line-height: 1.4; box-shadow: none; }
.dashboard-actions svg, .dashboard-hotel > a svg, .dashboard-hotel > button svg { width: 18px; height: 18px; flex: 0 0 auto; }
.dashboard-actions .primary-action { color: #fff; background: #087ec4; border: 1px solid #087ec4; }
.dashboard-actions .secondary-action, .dashboard-hotel .secondary-action { color: #08669e; background: #fff; border: 1px solid #b8d5e6; }
.dashboard-timeline { display: grid; gap: 0; list-style: none; padding: 0 0 0 20px; margin: 24px 0 12px 8px; border-left: 2px solid #d6e8f3; }
.dashboard-timeline li { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 12px; position: relative; padding: 12px 0; font-size: 14px; line-height: 1.5; }
.dashboard-timeline li::before { content: ""; position: absolute; left: -27px; top: 17px; width: 12px; height: 12px; background: #fff; border: 2px solid #55a4d2; border-radius: 50%; }
.dashboard-timeline time { font-size: 12px; color: #557184; font-weight: 600; }
.dashboard-timeline strong { font-weight: 600; }
.dashboard-timeline li.is-current::before { background: #087ec4; border-color: #087ec4; }
.dashboard-timeline li.is-past { color: #687d8c; }
.dashboard-text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #086da8; background: transparent; border: 0; padding: 8px 0; font-size: 13px; font-weight: 650; box-shadow: none; text-decoration: none; }
.dashboard-text-link svg { width: 18px; height: 18px; }
.dashboard-weather { display: flex; align-items: center; gap: 18px; width: 100%; min-height: 167px; padding: 20px; color: #fff; background: #087ec4; border: 0; border-radius: 6px; box-shadow: none; text-align: left; }
.dashboard-weather:hover { background: #0874b6; }
.dashboard-weather-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 62px; }
.dashboard-weather .weather-icon { width: 62px; height: 62px; min-width: 0; padding: 0; color: #fff; background: transparent; border: 0; box-shadow: none; }
.dashboard-weather .weather-icon svg, .dashboard-weather-icon > svg { width: 62px; height: 62px; }
.dashboard-weather-icon > svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dashboard-weather-copy { display: grid; gap: 6px; min-width: 0; }
.dashboard-weather-copy > strong { color: #fff; font-size: 17px; line-height: 1.4; }
.dashboard-temperature { font-size: 36px; line-height: 1.1; font-weight: 750; }
.dashboard-temperature small { display: inline-block; margin-left: 8px; font-size: 12px; font-weight: 450; }
.dashboard-weather-copy > span:not(.dashboard-temperature), .dashboard-weather-copy > small { font-size: 12px; line-height: 1.5; }
.dashboard-weather-copy > small { color: #fff; opacity: .9; }
.dashboard-rail { margin: 20px 0; padding: 0 0 14px; border-bottom: 1px solid var(--v2-line); }
.dashboard-rail > header, .dashboard-documents > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.dashboard-rail h3, .dashboard-documents h3 { font-size: 17px; color: var(--v2-ink); margin: 0; }
.dashboard-rail-summary { display: flex; gap: 10px; align-items: flex-start; }
.dashboard-status-icon { display: inline-flex; flex: 0 0 24px; color: #60788b; }
.dashboard-status-icon svg { width: 24px; height: 24px; }
.dashboard-rail-summary strong { font-size: 14px; line-height: 1.5; }
.dashboard-rail-summary p { color: var(--v2-muted); font-size: 13px; line-height: 1.6; margin: 5px 0 8px; }
.dashboard-rail.ok .dashboard-status-icon { color: #128058; }
.dashboard-rail.alert .dashboard-status-icon, .dashboard-provider.alert { color: #ba2338; }
.dashboard-rail.unknown .dashboard-status-icon, .dashboard-provider.unknown { color: #926400; }
.dashboard-provider { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid #edf1f4; font-size: 12px; line-height: 1.5; }
.dashboard-provider span:last-child { text-align: right; }
.dashboard-updated { display: block; margin-top: 8px; font-size: 11px; color: #596f80; line-height: 1.5; }
.dashboard-doc-list { display: grid; gap: 8px; }
.dashboard-doc-list a { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 10px 12px; border: 1px solid var(--v2-line); border-radius: 6px; text-decoration: none; color: #284f6a; font-size: 13px; line-height: 1.45; }
.dashboard-doc-list a:hover { border-color: #8cc0df; background: #f5fbff; }
.dashboard-file-icon, .dashboard-open-icon { display: inline-flex; width: 20px; flex: 0 0 20px; color: #2884ba; }
.dashboard-open-icon { margin-left: auto; width: 16px; flex-basis: 16px; }
.dashboard-file-icon svg, .dashboard-open-icon svg { width: 100%; height: 20px; }
.dashboard-hotel { display: flex; align-items: center; gap: 18px; border-top: 1px solid var(--v2-line); border-bottom: 1px solid var(--v2-line); margin-top: 28px; padding: 22px 0; }
.dashboard-hotel > div { flex: 1; min-width: 0; }
.dashboard-hotel-icon { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; flex: 0 0 62px; background: #edf7ff; color: #087ec4; border-radius: 6px; }
.dashboard-hotel-icon svg { width: 30px; height: 30px; }
.dashboard-hotel h3 { margin: 0; font-size: 18px; line-height: 1.4; }
.dashboard-hotel p { margin: 5px 0 0; color: var(--v2-muted); font-size: 13px; line-height: 1.5; }
.dashboard-hotel .dashboard-kicker { margin-bottom: 3px; }
.dashboard-footer-actions { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.dashboard-footer-actions a { color: #18734f; }
.dashboard-footer-actions > a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; text-decoration: none; }
.dashboard-footer-actions > a svg { width: 20px; height: 20px; }
.trip-reference { border-top: 1px solid var(--v2-line); padding: 8px 0; margin-top: 8px; }
.trip-reference > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; cursor: pointer; font-weight: 650; font-size: 15px; padding: 14px 0; }
.trip-reference > summary::-webkit-details-marker { display: none; }
.trip-reference[open] > summary { margin-bottom: 20px; }
.trip-reference[open] > summary svg { transform: rotate(180deg); }
.trip-reference .section-heading h2 { font-size: 20px; }
.item-card, .document-group, .travel-card, .weather-forecast-day, .rail-provider-card, .essential-doc, .info-card { border-radius: 6px; box-shadow: none; }
.item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.item-card h3, .travel-card h3 { font-size: 20px; }
.item-card p, .travel-card p { font-size: 14px; line-height: 1.6; }
.day-detail { padding: 0; background: transparent; border: 0; box-shadow: none; }
.day-detail-header { border-radius: 6px; }
.day-detail > .day-detail-header { padding: 0 0 20px; background: #fff; }
.day-detail-header h3 { font-size: 28px; line-height: 1.25; }
.day-cover-photo { min-height: 0; height: 210px; }
.day-detail > .weather-day-card, .day-detail > .rail-day-panel, .day-detail > .day-columns { margin-left: 0; margin-right: 0; }
.agenda-list > li { padding: 0; border: 0; background: transparent; }
.agenda-item summary { border: 0; border-radius: 0; background: #f6faff; }
.agenda-item summary::after, .history-note summary::after { color: #087ec4; background: transparent; }
.weather-card .weather-icon { color: #fff; background: #087ec4; }
.day-tabs { top: 78px; }
.weather-hero { background: #087ec4; border-radius: 6px; box-shadow: none; }
.weather-focus-card, .weather-focus-card.has-alert { grid-template-columns: 180px minmax(0, 1fr); gap: 22px; padding: 24px; background: #087ec4; border-radius: 6px; box-shadow: none; }
.weather-focus-icon { width: 138px; }
.weather-focus-copy > strong { font-size: 30px; }
.weather-focus-date, .weather-focus-summary { font-size: 16px; }
.weather-focus-temp-row { margin-top: 12px; }
.weather-focus-temp { font-size: 48px; }
.weather-focus-rain { margin-top: 12px; padding-top: 12px; }
.weather-focus-rain strong { font-size: 26px; }
.weather-focus-source { padding-top: 16px; }
.weather-forecast-heading h3, .weather-alert-headline strong, .rail-alert-panel header strong { font-size: 22px; }
.weather-day-card { box-shadow: none; border-radius: 6px; }
.app-footer { margin-top: 28px; color: var(--v2-muted); }
.login-shell { background: #f3f8fc; }
.login-panel { border-radius: 8px; border: 1px solid #d9e7f0; border-top: 4px solid #087ec4; background: #fff; box-shadow: 0 12px 40px #1a587512; }
.login-panel h1 { font-size: 38px; letter-spacing: 0; }
.is-loading svg { animation: dashboard-spin 1.2s linear infinite; }
@keyframes dashboard-spin { to { transform: rotate(360deg); } }

@media (max-width: 1120px) and (min-width: 900px) {
  .app-shell { grid-template-columns: 192px minmax(0, 1fr); }
  .content-shell { padding: 24px; }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr) minmax(260px, .95fr); gap: 20px; }
  .dashboard-status { padding-left: 20px; }
  .dashboard-next { padding: 18px; }
  .dashboard-next h3 { font-size: 21px; }
  .dashboard-weather { padding: 16px; gap: 10px; }
  .dashboard-weather-icon { flex-basis: 44px; }
  .dashboard-weather .weather-icon, .dashboard-weather .weather-icon svg { width: 44px; height: 44px; }
}
@media (max-width: 899px) {
  .app-shell { display: block; padding: 0; }
  .app-header { height: 72px; padding: 8px 16px; gap: 8px; }
  .app-brand { font-size: 15px; gap: 8px; }
  .app-brand .brand-logo.small { width: 56px; height: 46px; max-height: 46px; }
  .app-header-actions { gap: 4px; }
  .app-header .menu-toggle { display: inline-flex; }
  #clientName { display: none; }
  .account-menu summary { width: 44px; justify-content: center; padding: 10px; }
  .sidebar { display: none; position: fixed; top: 80px; bottom: auto; left: 12px; right: 12px; height: auto; max-height: calc(100dvh - 92px); width: auto; padding: 12px; border: 1px solid #d5e5f0; border-radius: 8px; background: #fff; box-shadow: 0 12px 36px #163d5429; z-index: 110; overflow-y: auto; }
  .menu-open .sidebar { display: block; }
  .sidebar-menu, .sidebar.menu-open .sidebar-menu { display: flex; position: static; flex-direction: column; width: auto; min-height: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
  .main-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .nav-item { min-height: 48px; padding: 10px; font-size: 14px; gap: 10px; flex-direction: row; }
  .support-actions { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--v2-line); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offline-button { margin: 0; }
  .content-shell { padding: 22px 20px; width: 100%; }
  .search-panel { display: none; }
  .app-shell.search-open .search-panel { display: block; }
  .today-section-heading { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
  .today-section-heading h1 { font-size: 28px; }
  .section-heading h2 { font-size: 26px; }
  .section-heading p { font-size: 13px; }
  .dashboard-photo { height: 180px; }
  .dashboard-grid { display: flex; flex-direction: column; gap: 20px; }
  .dashboard-agenda, .dashboard-status { display: contents; }
  #dashboardAgendaTitle, #dashboardStatusTitle { display: none; }
  .dashboard-next { order: 1; }
  .dashboard-weather { order: 2; min-height: 145px; }
  .dashboard-rail { order: 3; margin: 0; }
  .dashboard-timeline { order: 4; margin-top: 0; margin-bottom: 0; }
  .dashboard-agenda > .dashboard-text-link { order: 5; align-self: flex-start; }
  .dashboard-documents { order: 6; }
  .dashboard-next h3 { font-size: 22px; }
  .dashboard-hotel { flex-wrap: wrap; gap: 12px; }
  .dashboard-hotel > a, .dashboard-hotel > button { margin-left: 74px; }
  .dashboard-hotel > div { min-width: calc(100% - 80px); }
  .day-tabs { top: 72px; }
  .day-detail { padding: 0; }
  .day-detail > .day-detail-header { grid-template-columns: minmax(0, 1fr); padding: 0 0 20px; }
  .day-detail-header h3 { font-size: 25px; }
  .day-cover-photo { width: 100%; height: 210px; aspect-ratio: auto; }
  .item-grid { grid-template-columns: 1fr; }
  .app-footer { padding-bottom: 12px; }
}
@media (max-width: 480px) {
  .app-header { padding: 8px 10px; gap: 2px; }
  .app-brand { gap: 4px; font-size: 12px; line-height: 1.35; }
  .app-brand > span { max-width: 88px; }
  .app-brand .brand-logo.small { width: 42px; height: 40px; max-height: 40px; }
  .trip-duration { font-size: 11px; }
  .app-header-actions { gap: 2px; }
  .app-header .icon-button, .account-menu summary { width: 40px; height: 44px; padding: 8px; }
  .content-shell { padding: 20px 16px; }
  .today-section-heading { display: block; }
  .overview-day-nav { justify-content: flex-start; margin-top: 14px; }
  .dashboard-photo { height: 148px; }
  .dashboard-notice { gap: 10px; padding: 12px; align-items: flex-start; }
  .dashboard-notice > svg { margin-top: 2px; width: 20px; flex-basis: 20px; }
  .dashboard-notice .icon-button { width: 32px; padding: 6px; }
  .dashboard-next { padding: 18px; }
  .dashboard-next h3 { font-size: 21px; }
  .dashboard-actions { gap: 8px; }
  .dashboard-actions a, .dashboard-actions button { font-size: 12px; padding: 11px 12px; }
  .dashboard-actions .primary-action, .dashboard-actions .secondary-action { width: auto; flex: 1 1 110px; }
  .dashboard-timeline li { grid-template-columns: 75px minmax(0, 1fr); gap: 8px; }
  .dashboard-weather { gap: 18px; padding: 18px; }
  .dashboard-hotel h3 { font-size: 16px; }
  .main-nav { gap: 4px; }
  .nav-item { font-size: 12px; padding: 10px 8px; gap: 8px; }
  .support-button { font-size: 12px; padding: 10px 8px; }
  .login-panel h1 { font-size: 32px; }
  .weather-focus-card, .weather-focus-card.has-alert { grid-template-columns: 76px minmax(0, 1fr); padding: 16px; gap: 16px; }
  .weather-focus-icon { width: 76px; }
  .weather-focus-copy > strong { font-size: 25px; }
  .weather-focus-temp { font-size: 40px; }
  .weather-focus-source { font-size: 12px; gap: 8px; }
  .weather-focus-source strong { font-size: 12px; }
  .weather-focus-rain { gap: 6px; }
  .weather-focus-rain strong { font-size: 22px; }
  .weather-focus-rain span:last-child { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .is-loading svg { animation: none; }
}