:root{
  --page-bg: #E4DEC9; --board-bg: #F2EEE2; --board-panel: #E9E2CE; --board-line: #D2C6A8;
  --flap: #B05A00; --flap-dim: #D99B4E; --ink: #2B2620; --ink-dim: #6E6656;
  --teal: #0E6E58; --teal-dim: #C7E3D8; --teal-bg: #E1F0E8; --red: #A6362A;
  --card-bg: #FBF9F3; --input-bg: #fff; --red-bg: #F4E4E1; --red-dim: #E0BDB6;
}
body.dark{
  --page-bg: #0A0806; --board-bg: #17140F; --board-panel: #221D14; --board-line: #453A26;
  --flap: #E8A33D; --flap-dim: #B97D2E; --ink: #F0E6D2; --ink-dim: #B0A182;
  --teal: #4FCBAA; --teal-dim: #1F4A3E; --teal-bg: #16332B; --red: #E2685A;
  --card-bg: #1F1A12; --input-bg: #241F16; --red-bg: #3A241F; --red-dim: #5C382F;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{ margin:0; overflow-x:hidden; background-color: var(--page-bg); padding: 40px 10px; font-family: 'Inter', sans-serif; color: var(--ink); }
#app{ background: var(--board-bg); padding: 24px 20px 32px; border-radius: 14px; max-width: 1100px; margin: 0 auto; }
@media (max-width:480px){ #app{padding:16px 12px 24px; border-radius:0;} }
.hdr{ display:flex; justify-space:between; align-items:flex-end; border-bottom:2px solid var(--board-line); padding-bottom:14px; padding-top:14px; margin-bottom:20px; flex-wrap:wrap; gap:8px; position: sticky; top: 0; background: var(--board-bg); z-index: 100; }
.hdr h1{ font-size:20px; font-weight:700; margin:0; color:var(--flap); }
.add-panel, .sync-box{ background:var(--board-panel); border:1px solid var(--board-line); border-radius:8px; padding:16px; margin-bottom:24px; }
.section-label{ font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--teal); margin:14px 0 8px; }
.section-label:first-child{margin-top:0;}
.label{ font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-dim); display:block; margin-bottom:4px; }
.hint{ font-size:10.5px; color:var(--ink-dim); margin:2px 0 10px; line-height:1.5; }
.grid-form{ display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }
.grid-form-2{grid-template-columns:repeat(2, 1fr);} .grid-form-3{grid-template-columns:repeat(3, 1fr);} .grid-form-4{grid-template-columns:repeat(4, 1fr);}
@media (max-width:720px){ .grid-form, .grid-form-2, .grid-form-3, .grid-form-4{grid-template-columns:1fr;} }
input, select, textarea { width: 100%; font-family: 'Inter', sans-serif; font-size: 13px; padding: 8px 9px; border: 1px solid var(--board-line); border-radius: 5px; background: var(--input-bg); color: var(--ink); }
input[type="date"], input[type="number"], .mono, #f-dep-time, #f-arr-time, #f-flightno { font-family: 'Google Sans Code', monospace; }
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--teal); }
.flight-input-group{ display:flex; align-items:stretch; }
.airline-prefix{ display:flex; align-items:center; justify-content:center; padding:0 10px; background:var(--flap-dim); color:#fff; font-weight:700; font-size:12px; border-radius:5px 0 0 5px; min-width:38px; }
.flight-input-group input{ border-radius:0 5px 5px 0; border-left:none; }
.traveller-cols{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:640px){ .traveller-cols{grid-template-columns:1fr;} }
.traveller-col{ background:var(--card-bg); border:1px solid var(--board-line); border-radius:6px; padding:10px; }
.barcode-entry-row { background: var(--card-bg); border: 1px solid var(--board-line); border-radius: 6px; padding: 10px; margin-bottom: 8px; }
.standalone-row{ background:var(--card-bg); border:1px solid var(--board-line); border-radius:6px; padding:10px 12px; margin-top:10px; }
.standalone-row label{ font-size:12px; display:flex; align-items:center; gap:8px; cursor:pointer; }
.standalone-row input[type="checkbox"]{ width:auto; accent-color:var(--teal); }
button{ font-family:'Inter', sans-serif; font-weight:700; font-size:12.5px; padding:10px 16px; border-radius:6px; border:none; background:var(--flap); color:#fff; cursor:pointer; }
button:hover{opacity:0.92;}
.btn-ghost{ background:transparent; color:var(--ink-dim); border:1px solid var(--board-line); }
.btn-small{ padding:6px 10px; font-size:11px; }
.editing-banner{ display:none; background:var(--teal-bg); color:var(--teal); font-size:11.5px; padding:8px 10px; border-radius:5px; margin-bottom:12px; font-weight: bold; }
.board-hdr{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.date-group-hdr { font-size: 14px; font-weight: 700; color: var(--flap); padding: 8px 0; border-bottom: 2px solid var(--board-line); margin: 20px 0 10px 0; }
.date-group-hdr:first-child { margin-top: 0; }

.leg-card {
  position: relative;
  border: 1px solid var(--board-line);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--teal-bg);
}
.leg-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  padding-right: 110px;
}
.leg-who {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.card-title-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.category-badge {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 6px;
  color: #fff;
  display: inline-block;
  letter-spacing: 0.3px;
}
.category-badge-route,
.category-badge-hotel {
  background: var(--flap);
}
.category-badge-service {
  background: var(--teal);
}
.status-badge {
  background: var(--teal);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 3px 7px;
  border-radius: 4px;
}
.price-allin { font-size: 15px; color: var(--ink); font-weight: 700; font-family: 'Google Sans Code', monospace; }

.leg-row {
  display: block;
  font-size: 13px;
  color: var(--ink-dim);
  margin-bottom: 6px;
  line-height: 1.4;
}
.mono-bold {
  font-family: 'Google Sans Code', monospace;
  font-weight: 700;
  color: var(--ink);
  margin-right: 8px;
}
.leg-sub-notes {
  font-size: 11.5px;
  color: var(--ink-dim);
  margin-top: 4px;
  margin-bottom: 6px;
}

.card-top-actions {
  position: absolute;
  top: 14px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.barcodes-container { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--board-line); }
.barcode-box { background: #fff; padding: 6px; border-radius: 4px; border: 1px solid var(--board-line); text-align: center; cursor: pointer; min-width: 80px; }
.barcode-box .pass-name { font-size: 9.5px; font-weight: bold; color: #000; margin-bottom: 4px; }
.barcode-box canvas, .barcode-box img { max-width: 90px; max-height: 90px; }
.icon-btn{ background:none; border:none; color:var(--teal); font-family:'Google Sans Code', monospace; font-size:11px; padding:0; cursor:pointer; text-decoration:underline; }
.icon-btn.del-btn{ color:var(--red); }

.map-icon {
  text-decoration: none !important;
  display: inline-block;
  margin-right: 3px;
}
.map-link {
  color: var(--teal);
  text-decoration: none;
  cursor: pointer;
}
.map-link span.map-text {
  text-decoration: underline;
}

.material-symbols-outlined { vertical-align: middle; font-size: 18px; color: var(--teal); }

#barcode-modal { display:none; position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,0.9); z-index:1000; justify-content:center; align-items:center; flex-direction:column; cursor:pointer; }
#barcode-modal-content { background:#fff; padding:20px; border-radius:12px; text-align:center; max-width:90vw; }
#barcode-modal-title { font-size:16px; font-weight:bold; color:#000; margin-bottom:12px; }
#barcode-modal-render canvas, #barcode-modal-render img { width:260px !important; height:260px !important; }

@media print {
  body { background: #fff !important; color: #000 !important; padding: 0 !important; }
  #app { max-width: 100% !important; padding: 0 !important; background: transparent !important; }
  .hdr, .add-panel, .sync-box, .board-hdr, button, .icon-btn { display: none !important; }
  .date-group-hdr { font-size: 16px; border-bottom: 2px solid #000; color: #000; margin-top: 15px; }
  .leg-card { border: 1px solid #999 !important; background: #fff !important; page-break-inside: avoid; margin-bottom: 12px; }
  .price-allin { color: #000 !important; }
  .category-badge { background: #333 !important; color: #fff !important; }
}