/**
 * UncutTravel app-core — layout source of truth + YouTube dark chrome.
 * Load LAST (after web-app.css, brand-uncut.css, inspo-overrides.css).
 */

/* ── Shell ─────────────────────────────────────────── */
body.app-layout,
body.app-bg {
  color-scheme: dark;
  background: #070b14 !important;
  color: #f6efe4 !important;
}

@media (min-width: 1024px) {
  body.app-layout.app-bg {
    display: block !important;
  }

  body.app-layout .web-nav,
  body.app-layout .web-nav[data-mounted="true"] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 240px !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 40 !important;
    overflow-y: auto !important;
    margin: 0 !important;
  }

  body.app-layout .app-shell {
    margin-left: 240px !important;
    width: auto !important;
    max-width: none !important;
    min-height: 100vh;
    padding: 28px 32px 56px !important;
    justify-self: unset !important;
  }

  body.app-layout .app-shell > * {
    width: min(1120px, 100%);
    margin-inline: auto;
  }

  body.app-layout .app-shell.app-shell--wide > * {
    width: min(1200px, 100%);
  }
}

body.app-layout .web-nav {
  background: #070b14 !important;
  border-right: 1px solid rgba(246, 239, 228, 0.12) !important;
  box-shadow: none !important;
}

body.app-layout .web-nav .brand,
body.app-layout .web-nav .brand-text {
  color: #ff5a3d !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

body.app-layout .web-nav .nav-link {
  display: flex !important;
  align-items: center;
  gap: 10px;
  color: #a9bbd4 !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

body.app-layout .web-nav .nav-link:hover {
  background: rgba(255, 90, 61, 0.1) !important;
  color: #f6efe4 !important;
}

body.app-layout .web-nav .nav-link.active {
  background: rgba(255, 90, 61, 0.16) !important;
  color: #f6efe4 !important;
  box-shadow: inset 3px 0 0 #ff5a3d !important;
}

body.app-layout .web-nav .nav-link__icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

body.app-layout .web-nav .nav-link__icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

body.app-layout .web-nav .nav-link.active .nav-link__icon {
  color: #ff5a3d;
}

body.app-layout .web-nav .nav-user,
body.app-layout .web-nav .nav-sign-out {
  color: #a9bbd4 !important;
}

body.app-layout .web-nav .nav-sign-out:hover {
  color: #ff5a3d !important;
}

body.app-layout .web-nav .nav-links-footer {
  border-top: 1px solid rgba(246, 239, 228, 0.12) !important;
}

/* ── Cards / type ──────────────────────────────────── */
body.app-layout .card {
  background: #121820 !important;
  border: 1px solid rgba(255, 90, 61, 0.14) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 10px 28px rgba(0, 0, 0, 0.22) !important;
  color: #f6efe4 !important;
}

body.app-layout .page-header h1 {
  color: #f6efe4 !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em;
}

body.app-layout .muted,
body.app-layout .subtitle,
body.app-layout .empty-state {
  color: #a9bbd4 !important;
}

body.app-layout .btn-primary {
  background: #ff5a3d !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
}

body.app-layout .btn-outline {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #f6efe4 !important;
  border: 1px solid rgba(169, 187, 212, 0.28) !important;
  border-radius: 10px !important;
}

body.app-layout input,
body.app-layout textarea,
body.app-layout select,
body.app-layout .field input,
body.app-layout .field textarea,
body.app-layout .field select {
  background: #0f1628 !important;
  color: #f6efe4 !important;
  border-color: rgba(169, 187, 212, 0.28) !important;
}

/* ── Trip page ─────────────────────────────────────── */
.dashboard-grid--trip {
  display: grid !important;
  gap: 20px !important;
  grid-template-columns: 1fr !important;
}

.dashboard-grid--trip .card--map,
.dashboard-grid--trip .card--timeline,
.dashboard-grid--trip .card--chat,
.dashboard-grid--trip .dashboard-grid__full,
.dashboard-grid--trip .card--analysis,
.dashboard-grid--trip .card--partnership,
.dashboard-grid--trip .card--highlights,
.dashboard-grid--trip .card--publish {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Collapsed <details> sections were borderless thin lines that looked overlapped. */
body.app-layout .dashboard-grid--trip details.card,
body.app-layout .dashboard-grid--trip .card--analysis,
body.app-layout .dashboard-grid--trip .card--partnership,
body.app-layout .dashboard-grid--trip .card--publish,
body.app-layout .dashboard-grid--trip .card--highlights {
  background: #121820 !important;
  border: 1px solid rgba(255, 90, 61, 0.16) !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  margin: 0 !important;
  box-shadow: none !important;
}

body.app-layout .dashboard-grid--trip details.card::before,
body.app-layout .dashboard-grid--trip details.card::after,
body.app-layout .dashboard-grid--trip .card--analysis::before,
body.app-layout .dashboard-grid--trip .card--analysis::after,
body.app-layout .dashboard-grid--trip .card--partnership::before,
body.app-layout .dashboard-grid--trip .card--partnership::after,
body.app-layout .dashboard-grid--trip .card--publish::before,
body.app-layout .dashboard-grid--trip .card--publish::after,
body.app-layout .dashboard-grid--trip .card--highlights::before,
body.app-layout .dashboard-grid--trip .card--highlights::after {
  display: none !important;
}

body.app-layout .dashboard-grid--trip .trip-analysis-summary {
  display: flex !important;
  align-items: center !important;
  min-height: 28px !important;
  padding: 2px 0 !important;
  margin: 0 !important;
  border-bottom: none !important;
  color: #ff5a3d !important;
}

body.app-layout .dashboard-grid--trip details.card[open] > .trip-analysis-summary {
  border-bottom: 1px solid rgba(255, 90, 61, 0.16) !important;
  margin-bottom: 14px !important;
  padding-bottom: 12px !important;
}

/* Timeline is a fixed full-height section (page scrolls — no nested scroll box). */
body.app-layout .dashboard-grid--trip .trip-main-row {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

body.app-layout .dashboard-grid--trip .card--timeline {
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  max-height: none !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 1 !important;
  background: #121820 !important;
  border: 1px solid rgba(255, 90, 61, 0.16) !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
}

body.app-layout .dashboard-grid--trip .card--timeline .trip-panel-scroll,
body.app-layout .dashboard-grid--trip .card--timeline #timeline-list,
body.app-layout .dashboard-grid--trip .card--timeline .timeline-list {
  max-height: none !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
  flex: none !important;
}

body.app-layout .dashboard-grid--trip .card--map {
  background: #121820 !important;
  border: 1px solid rgba(255, 90, 61, 0.16) !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  overflow: hidden !important;
}

body.app-layout .dashboard-grid--trip .card--chat,
body.app-layout .dashboard-grid--trip .card--highlights,
body.app-layout .dashboard-grid--trip .card--analysis,
body.app-layout .dashboard-grid--trip .card--partnership,
body.app-layout .dashboard-grid--trip .card--publish {
  position: relative !important;
  z-index: 2 !important;
  isolation: isolate !important;
}

.card--map,
.card--timeline,
.card--chat {
  min-width: 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Leaflet needs an explicit pixel height — tiles stay light; chrome darkens */
body.app-layout #trip-map.trip-map,
body.app-layout .card--map .trip-map,
body.app-layout .trip-map.trip-map--compact,
body.trip-page-stable #trip-map {
  height: 360px !important;
  min-height: 360px !important;
  max-height: 360px !important;
  flex: none !important;
  width: 100% !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(169, 187, 212, 0.2) !important;
  background: #0c1018 !important;
  position: relative !important;
}

body.app-layout .trip-map > .trip-map-root,
body.app-layout .trip-map-root,
body.app-layout .trip-map .leaflet-container {
  height: 100% !important;
  width: 100% !important;
  min-height: 360px !important;
}

body.app-layout .trip-map .empty-state {
  display: grid;
  place-items: center;
  height: 100%;
  margin: 0;
  padding: 24px;
  text-align: center;
  color: #a9bbd4 !important;
  font-size: 0.95rem;
  line-height: 1.45;
}

.page-header--trip .page-header__row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
}

.trip-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.app-layout .timeline-item {
  padding: 16px 0 !important;
  border-bottom: 1px solid rgba(246, 239, 228, 0.12) !important;
}

body.app-layout .timeline-item__title {
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  color: #f6efe4 !important;
  margin: 0 0 6px !important;
}

body.app-layout .timeline-date {
  color: #f6efe4 !important;
  font-weight: 750 !important;
  font-size: 0.95rem !important;
}

body.app-layout .timeline-type {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(255, 90, 61, 0.18);
  color: #ff7a63 !important;
}

body.app-layout .timeline-type--transport,
body.app-layout .timeline-type--car,
body.app-layout .timeline-type--train,
body.app-layout .timeline-type--bus {
  background: rgba(20, 184, 166, 0.16);
  color: #5eead4 !important;
}

body.app-layout .timeline-type--hotel {
  background: rgba(255, 90, 61, 0.14);
  color: #ff9a86 !important;
}

body.app-layout .timeline-type--activity {
  background: rgba(20, 184, 166, 0.14);
  color: #2dd4bf !important;
}

/* ── Trips list home ───────────────────────────────── */
body.app-layout .trip-card {
  background: #121820 !important;
  border: 1px solid rgba(255, 90, 61, 0.14) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28) !important;
}

body.app-layout .trip-card__title {
  color: #f6efe4 !important;
  font-weight: 750 !important;
}

body.app-layout .trips-layout {
  gap: 24px;
}

@media (min-width: 1024px) {
  body.app-layout .trip-map--trips-sidebar,
  body.app-layout #trip-map.trip-map--trips-sidebar {
    height: 420px !important;
    min-height: 420px !important;
    max-height: 420px !important;
  }
}

/* ── Tools ─────────────────────────────────────────── */
.tools-section__title {
  color: #f6efe4 !important;
  font-weight: 800 !important;
}

.tools-section__subtitle {
  color: #a9bbd4 !important;
}

.inspo-tool-card {
  background: #121820 !important;
  border: 1px solid rgba(255, 90, 61, 0.14) !important;
}

.inspo-tool-card__title {
  color: #f6efe4 !important;
}

.inspo-tool-card__subtitle {
  color: #a9bbd4 !important;
}

/* ── Import ────────────────────────────────────────── */
.import-panel,
.import-strip {
  background: #121820 !important;
  border: 1px solid rgba(255, 90, 61, 0.14) !important;
}

.import-panel h2 {
  color: #f6efe4 !important;
}

.import-forward__addr {
  background: #0f1628 !important;
  color: #f6efe4 !important;
  border: 1px solid rgba(169, 187, 212, 0.2) !important;
}

/* ── Group chat ────────────────────────────────────── */
.card--chat .section-head--compact {
  margin-bottom: 12px;
}

.trip-chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 280px;
}

.trip-chat__list {
  flex: 1;
  max-height: 360px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 2px 8px;
}

.trip-chat__bubble {
  max-width: min(520px, 92%);
  padding: 10px 12px;
  border-radius: 12px;
  background: #0c1018;
  border: 1px solid rgba(255, 90, 61, 0.14);
  align-self: flex-start;
}

.trip-chat__bubble--mine {
  align-self: flex-end;
  background: rgba(255, 90, 61, 0.16);
  border-color: rgba(255, 90, 61, 0.35);
}

.trip-chat__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  font-size: 0.75rem;
  color: #a9bbd4;
  margin-bottom: 4px;
}

.trip-chat__meta strong {
  color: #f6efe4;
}

.trip-chat__text {
  margin: 0;
  color: #f6efe4;
  font-size: 0.95rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.trip-chat__img {
  display: block;
  max-width: 220px;
  border-radius: 8px;
  margin: 4px 0 8px;
}

.trip-chat__delete {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: #7f93b0;
  font-size: 0.72rem;
  cursor: pointer;
  padding: 0;
}

.trip-chat__delete:hover {
  color: #ff5a3d;
}

.trip-chat__composer {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid rgba(246, 239, 228, 0.12);
}

.trip-chat__composer input {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(169, 187, 212, 0.28);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  background: #0f1628;
  color: #f6efe4;
}

.tool-simple-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tool-simple-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(246, 239, 228, 0.12);
  color: #f6efe4;
}

.budget-summary__total {
  margin: 0;
  font-size: 1.25rem;
}

/* ── Layout overlap fixes (Today, Settings, Import, Trips) ── */

body.app-layout .dashboard-grid:not(.dashboard-grid--trip):not(.dashboard-grid--dashboard):not(.bucket-layout) {
  gap: 20px !important;
}

body.app-layout .dashboard-grid:not(.dashboard-grid--trip):not(.dashboard-grid--dashboard):not(.bucket-layout) .card {
  padding: 18px 20px !important;
  background: #121820 !important;
  border: 1px solid rgba(255, 90, 61, 0.16) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  margin: 0 !important;
  min-width: 0 !important;
}

body.app-layout .dashboard-grid:not(.dashboard-grid--trip):not(.bucket-layout) .card::before,
body.app-layout .dashboard-grid:not(.dashboard-grid--trip):not(.bucket-layout) .card::after {
  display: none !important;
}

body.app-layout .import-page .import-stack {
  gap: 16px;
}

body.app-layout .import-page .import-panel--docs {
  margin-top: 24px;
}

body.app-layout .inbound-docs-card {
  min-width: 0;
}

body.app-layout .inbound-docs-card__body {
  flex: 1 1 200px;
  min-width: 0;
}

body.app-layout .inbound-docs-card .import-source-actions {
  flex: 0 0 auto;
}

@media (min-width: 1024px) {
  body.app-layout .trips-body__map {
    z-index: 2;
  }

  body.app-layout .trips-body__map .trips-map-card {
    background: #121820 !important;
  }
}

body.app-layout .timeline-day__items {
  gap: 12px !important;
}

body.app-layout .timeline-item {
  border-bottom: none !important;
}

body.app-layout .timeline-list .timeline-item:last-child {
  border-bottom: none !important;
}

body.app-layout .trip-journey {
  margin-top: 14px;
  padding-top: 4px;
  clear: both;
}

body.app-layout .card--map .trip-journey {
  position: relative;
  z-index: 1;
}