/* Tour Package Builder - hand-rolled CSS (mobile-first) */

:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --ink: #1a2230;
  --muted: #5b6b7c;
  --line: #d9e0e7;
  --brand: #0b6e4f;
  --brand-ink: #ffffff;
  --accent: #123a5f;
  --warn-bg: #fff4e5;
  --warn-ink: #8a5a00;
  --danger: #b3261e;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .06);
  /* theme-aware surfaces (light defaults) */
  --hover: #f0f3f6;
  --brand-hover: #095c42;
  --danger-line: #e7c3c1;
  --danger-bg: #fbeceb;
  --field: #ffffff;
  --subcard: #fcfdfe;
  --subcard-head: #f4f7f9;
  --grad-a: #fbfcfd;
  --grad-b: #f6f8fa;
  --warn-line: #f2d9a8;
}

html[data-theme="dark"] {
  --bg: #10151c;
  --surface: #1a222d;
  --ink: #e6ebf1;
  --muted: #93a1b0;
  --line: #2e3b4a;
  --brand: #1d8a64;
  --accent: #8ab8e8;
  --warn-bg: #33291a;
  --warn-ink: #e0b45c;
  --danger: #e0655d;
  --shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .4);
  --hover: #232f3d;
  --brand-hover: #239b70;
  --danger-line: #5a322f;
  --danger-bg: #332220;
  --field: #121924;
  --subcard: #161e28;
  --subcard-head: #1d2733;
  --grad-a: #1c2530;
  --grad-b: #18202a;
  --warn-line: #5c4a26;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
}

.hidden { display: none !important; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.topbar .inner {
  width: 100%;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.topbar h1 {
  font-size: 18px;
  margin: 0;
  color: var(--accent);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar .title {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brand-dot { color: var(--brand); }

/* ---------- Buttons ---------- */
button {
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  padding: 8px 12px;
  border-radius: 8px;
  transition: background .12s, border-color .12s, transform .04s;
}
button:hover { background: var(--hover); }
button:active { transform: translateY(1px); }
button.primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
  font-weight: 600;
}
button.primary:hover { background: var(--brand-hover); }
button.ghost { background: transparent; }
button.danger { color: var(--danger); border-color: var(--danger-line); }
button.danger:hover { background: var(--danger-bg); }
button.small { padding: 5px 9px; font-size: 13px; }

/* ---------- Layout ---------- */
.wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px;
  padding-bottom: 80px;
}

/* ---------- Editor two-panel layout ---------- */
.editor-wrap { max-width: 1240px; }
.editor-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  align-items: start;
}
.panel-left .totals { margin-bottom: 0; }
@media (min-width: 920px) {
  .editor-grid { grid-template-columns: 340px minmax(0, 1fr); }
  .panel-left {
    position: sticky;
    top: 72px;
    align-self: start;
  }
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 16px;
  overflow: hidden;
}
.card > .card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--grad-a), var(--grad-b));
}
.card > .card-head h2 {
  font-size: 15px;
  margin: 0;
  color: var(--accent);
}
.card > .card-body { padding: 14px; }

/* ---------- Accordions (Room Configuration, Tour Places) ---------- */
.card[data-acc] > .card-head {
  cursor: pointer;
  user-select: none;
}
.card[data-acc] > .card-head .acc-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.card[data-acc] > .card-head .acc-chev {
  display: inline-block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  transition: transform .15s ease;
}
.card[data-acc]:not(.collapsed) > .card-head .acc-chev {
  transform: rotate(90deg);
}
.card.collapsed > .card-body { display: none; }
.card.collapsed > .card-head { border-bottom-color: transparent; }

/* Per-place accordions (subcards) */
.subcard[data-acc] > .subcard-head {
  cursor: pointer;
  user-select: none;
}
.subcard[data-acc] > .subcard-head .acc-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.subcard[data-acc] > .subcard-head .acc-chev {
  display: inline-block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  transition: transform .15s ease;
}
.subcard[data-acc]:not(.collapsed) > .subcard-head .acc-chev {
  transform: rotate(90deg);
}
.subcard.collapsed > .subcard-body { display: none; }

/* Keyboard focus ring for accordion headers */
.card[data-acc] > .card-head:focus-visible,
.subcard[data-acc] > .subcard-head:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* ---------- Form fields ---------- */
label.field {
  display: block;
  margin-bottom: 12px;
}
label.field > span {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 4px;
  font-weight: 600;
}
input, select, textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(11, 110, 79, .15);
}
textarea { resize: vertical; min-height: 64px; }

.grid {
  display: grid;
  gap: 0 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .grid.cols-2 { grid-template-columns: 1fr 1fr; }
  .grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
  .grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- List view ---------- */
.list-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.pkg-list { list-style: none; margin: 0; padding: 0; }
.pkg-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.pkg-item .meta {
  flex: 1 1 auto;
  min-width: 0;
}
.pkg-item .name {
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pkg-item .sub {
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}
.pkg-item .price { text-align: right; }
.pkg-item .price .amt { font-weight: 700; color: var(--brand); }
.empty {
  text-align: center;
  color: var(--muted);
  padding: 40px 16px;
}

/* ---------- Editor ---------- */
.editor-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.editor-top .title {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  flex: 1 1 auto;
  min-width: 120px;
}
.save-note { font-size: 12px; color: var(--muted); }

.subcard {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 12px;
  background: var(--subcard);
}
.subcard > .subcard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--subcard-head);
}
.subcard > .subcard-head h3 {
  margin: 0;
  font-size: 14px;
  color: var(--ink);
}
.subcard > .subcard-body { padding: 12px; }

.item-row {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--field);
}
.item-row .row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.item-row .row-head .tag {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.calc-select {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.calc-select label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
}
.calc-select input { width: auto; }

.hint {
  background: var(--warn-bg);
  color: var(--warn-ink);
  border: 1px solid var(--warn-line);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  margin-top: 6px;
}

/* ---------- Totals ---------- */
.totals {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  margin-bottom: 16px;
}
.totals h2 { font-size: 15px; margin: 0 0 10px; color: var(--accent); }
.tot-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  font-size: 14px;
  border-bottom: 1px dotted var(--line);
}
.tot-row .k { color: var(--muted); }
.tot-row .v { font-variant-numeric: tabular-nums; text-align: right; }
.tot-row.subtotal { margin-top: 8px; border-bottom: 1px solid var(--line); font-weight: 600; }
.tot-row.grand {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 2px solid var(--ink);
  border-bottom: none;
  font-size: 17px;
  font-weight: 800;
}
.tot-row.grand .v { color: var(--brand); }
.tot-row.perpax {
  margin-top: 6px;
  font-weight: 700;
  color: var(--accent);
}
.place-sub {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  padding: 2px 0 2px 6px;
}

/* Rooms-required readout (per place, in Stay) + Live Total block */
.roomcount-line {
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: 8px;
  padding: 7px 10px;
}
.roomcount-line strong { color: var(--accent); font-size: 15px; }
.hint-inline { font-size: 12px; opacity: 0.85; }
label.field.no-stay { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
label.field.no-stay input { width: auto; }
.roomcount-block {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.roomcount-block .rc-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 4px;
}
.rc-extra { color: var(--danger); font-weight: 600; font-size: 12px; }
.rc-breakdown {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
  padding-left: 8px;
  opacity: 0.9;
}
.pq-sub { font-size: 12px; color: #666; padding-left: 12px; }

/* ---------- Print quote ---------- */
#print-quote { display: none; }
@media print {
  /* Quote always prints on white paper, even in dark mode. */
  html, body { background: #fff !important; }
  body * { visibility: hidden !important; }
  /* Collapse the screen app so its height can't create trailing blank pages. */
  #app {
    width: 0;
    height: 0;
    overflow: hidden;
  }
  #print-quote, #print-quote * { visibility: visible !important; }
  /* Normal in-flow positioning: the quote's own content determines the
     document height. (position:absolute + inset:0 let overflowing content
     spill past the body and produced blank pages at the end.) */
  #print-quote {
    display: block;
    width: 100%;
    background: #fff;
    color: #000;
    padding: 24px 28px;
    font-size: 12px;
  }
  .pq-header { border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 12px; }
  .pq-header h1 { margin: 0; font-size: 20px; }
  .pq-row { display: flex; justify-content: space-between; gap: 12px; margin: 3px 0; }
  .pq-validity {
    background: #f2f2f2;
    border: 1px solid #bbb;
    padding: 6px 8px;
    font-weight: 700;
    margin: 10px 0;
  }
  .pq-section { margin-top: 14px; }
  .pq-section h2 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid #999;
    padding-bottom: 3px;
    margin: 0 0 6px;
  }
  table.pq-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
  }
  table.pq-table th, table.pq-table td {
    border: 1px solid #bbb;
    padding: 5px 7px;
    text-align: left;
    vertical-align: top;
  }
  table.pq-table th { background: #f0f0f0; }
  .pq-pricing td:last-child, .pq-pricing th:last-child { text-align: right; }
  .pq-grand td { font-weight: 800; border-top: 2px solid #000; }
  .pq-perpax td { font-weight: 700; }
  .pq-footer p { margin: 4px 0; white-space: pre-wrap; }
  /* Keep Arrival / Departure intact: heading is never orphaned from its
     rows across a page break. (Print-only; screen layout untouched.) */
  .pq-arrival, .pq-departure {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  /* Day-by-day itinerary */
  .pq-day {
    font-weight: 700;
    margin-top: 10px;
    padding-bottom: 2px;
    border-bottom: 1px solid #ccc;
  }
  .pq-line { margin: 3px 0; }
  .pq-line.pq-sub { font-size: 12px; color: #555; padding-left: 10px; }
  @page { margin: 16mm; }
}

/* ---------- Arrival & Departure card ---------- */
.ad-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ad-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
/* Room checkboxes: 1 per row on small screens, up to 3 per row on wide ones */
.ad-room-checks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 12px;
}
@media (min-width: 480px) {
  .ad-room-checks { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 640px) {
  .ad-room-checks { grid-template-columns: repeat(3, 1fr); }
}
.ad-room-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink);
  background: var(--subcard);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  user-select: none;
}
.ad-room-check:hover {
  background: var(--hover);
}
.ad-room-check input {
  width: auto;
  flex: none;
}
.ad-form > button {
  align-self: flex-start;
}
#ad-lists {
  margin-top: 16px;
  display: grid;
  gap: 12px;
}
.ad-group-head {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 8px;
}

/* ---------- Keyboard shortcut hints ---------- */
kbd {
  display: inline-block;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: var(--muted);
  background: var(--hover);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 5px;
  margin-left: 4px;
  vertical-align: middle;
}
/* ---------- Boot pre-loader (module.wasm download) ----------
   Theme-aware via CSS variables; shown statically in index.html,
   faded out + removed by app.wasm.js when the engine is ready. */
#boot-loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  transition: opacity .35s ease;
}
#boot-loader.bl-done { opacity: 0; pointer-events: none; }
.bl-card { text-align: center; color: var(--ink); }
.bl-spinner {
  width: 42px;
  height: 42px;
  margin: 0 auto 16px;
  border: 3px solid var(--line);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: bl-spin .9s linear infinite;
}
@keyframes bl-spin { to { transform: rotate(360deg); } }
.bl-title { font-size: 20px; font-weight: 700; margin: 0; }
.bl-pct { color: var(--muted); font-variant-numeric: tabular-nums; }
/* Error state (5.b): spinner off, red message */
#boot-loader.bl-error .bl-spinner { display: none; }
#boot-loader.bl-error .bl-title { color: var(--danger); }