/* ─── travel module styles (v10.21) ────────────────────────────────
   Panel chrome comes from module-lib.css. This file styles only what's
   INSIDE the panel body and sub-modals. */

/* Travel uses a wide panel; body scrolls and stacks vertically */
.travel-panel .ml-panel-inner { max-width: 900px; }
.travel-panel .ml-panel-body {
  flex-direction: column;
  overflow-y: auto;
  padding: 12px;
  display: block;
}

/* trip list */
.travel-list-toolbar {
  display: flex; gap: 10px; margin-bottom: 12px;
  flex-wrap: wrap;
}
.travel-toolbar-btn, .travel-back-btn {
  cursor: pointer; text-decoration: none;
  padding: 8px 14px;
  border: 1px solid var(--accent2);
  color: var(--accent);
  font-size: 0.92em;
  border-radius: 2px;
}
.travel-toolbar-btn:hover, .travel-back-btn:hover {
  background: rgba(176,230,176,0.1);
  border-color: var(--accent);
}
.travel-section-label {
  font-size: 0.82em;
  color: var(--dim);
  margin: 14px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.travel-trip-list { list-style: none; padding: 0; margin: 0; }
.travel-trip-row {
  padding: 12px 14px;
  border: 1px solid var(--accent2);
  margin-bottom: 8px;
  cursor: pointer;
  border-radius: 2px;
  position: relative;
}
.travel-trip-row:hover {
  background: rgba(176,230,176,0.06);
  border-color: var(--accent);
}
.travel-trip-name { font-size: 1.0em; font-weight: bold; color: var(--fg); }
.travel-trip-meta { font-size: 0.84em; color: var(--dim); margin-top: 4px; }
.travel-trip-dates { color: var(--accent); font-family: var(--mono, monospace); }
.travel-shared-badge {
  font-size: 0.72em;
  background: rgba(255,208,112,0.12);
  color: #ffd070;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 6px;
}
.travel-empty {
  padding: 24px 12px;
  text-align: center;
  font-style: italic;
}

/* trip detail toolbar / tabs */
.travel-trip-toolbar {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.travel-trip-tabs {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.travel-tab {
  cursor: pointer; text-decoration: none;
  padding: 6px 12px;
  border: 1px solid var(--accent2);
  color: var(--dim);
  font-size: 0.88em;
  border-radius: 2px;
}
.travel-tab:hover { color: var(--accent); }
.travel-tab.active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(176,230,176,0.08);
}
.travel-trip-actions { display: flex; gap: 6px; }
.travel-action {
  cursor: pointer; text-decoration: none;
  padding: 4px 8px;
  font-size: 0.85em;
  color: var(--dim);
  border: 1px solid transparent;
  border-radius: 2px;
}
.travel-action:hover {
  color: var(--accent);
  border-color: var(--accent2);
}

.travel-meta-strip {
  font-size: 0.85em;
  margin-bottom: 14px;
  padding: 6px 10px;
  background: rgba(176,230,176,0.04);
  border-left: 2px solid var(--accent2);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.travel-cond-chip {
  display: inline-block;
  font-size: 0.78em;
  padding: 1px 8px;
  background: rgba(176,230,176,0.1);
  color: var(--accent);
  border-radius: 8px;
  margin-right: 4px;
}
.travel-conds { display: inline-flex; gap: 4px; flex-wrap: wrap; }

/* pack tab */
.travel-pack-toolbar {
  display: flex; gap: 8px; margin-bottom: 12px;
  align-items: center; flex-wrap: wrap;
}
.travel-pack-progress {
  color: var(--accent);
  font-size: 0.92em;
  margin-right: auto;
}
.travel-pack-btn {
  cursor: pointer; text-decoration: none;
  padding: 5px 12px;
  border: 1px solid var(--accent2);
  color: var(--fg);
  font-size: 0.85em;
  border-radius: 2px;
}
.travel-pack-btn:hover {
  background: rgba(176,230,176,0.08);
  border-color: var(--accent);
  color: var(--accent);
}
.travel-pack-btn.active {
  background: rgba(176,230,176,0.12);
  color: var(--accent);
  border-color: var(--accent);
}
.travel-pack-list { display: flex; flex-direction: column; gap: 14px; }
.travel-pack-category { }
.travel-pack-cat-header {
  font-size: 0.88em;
  color: var(--accent);
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--accent2);
  text-transform: capitalize;
}
.travel-pack-items { list-style: none; padding: 0; margin: 0; }
.travel-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 2px;
}
.travel-item-row:hover { background: rgba(176,230,176,0.04); }
.travel-item-row.is-packed { opacity: 0.55; }
.travel-item-row.is-packed .travel-item-name { text-decoration: line-through; }
.travel-item-check { cursor: pointer; flex-shrink: 0; }
.travel-item-main { flex: 1; min-width: 0; }
.travel-item-name {
  font-size: 0.92em;
  color: var(--fg);
  word-break: break-word;
}
.travel-item-loc {
  font-size: 0.78em;
  color: var(--dim);
  margin-top: 1px;
}
.travel-qty { color: var(--brass, #ffd070); font-weight: bold; }
.travel-per-day { font-size: 0.75em; }
.travel-item-actions { display: flex; gap: 4px; flex-shrink: 0; }
.travel-item-action {
  cursor: pointer;
  text-decoration: none;
  padding: 4px 8px;
  font-size: 0.82em;
  color: var(--dim);
  border-radius: 2px;
  border: 1px solid transparent;
}
.travel-item-action:hover {
  background: rgba(176,230,176,0.08);
  color: var(--accent);
}
.travel-item-del:hover { color: #e07a7a; background: rgba(224,122,122,0.08); }

/* containers tab */
.travel-containers-toolbar {
  display: flex; gap: 8px; margin-bottom: 14px;
}
.travel-containers-tree { display: flex; flex-direction: column; gap: 14px; }
.travel-tree-suitcase {
  border: 1px solid var(--accent2);
  border-radius: 4px;
  padding: 10px;
}
.travel-tree-suitcase-header {
  font-size: 0.95em;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px dashed var(--accent2);
  padding-bottom: 6px;
  margin-bottom: 8px;
}
.travel-tree-suitcase-header strong { color: var(--accent); }
.travel-tree-bag {
  border-left: 2px solid var(--accent2);
  padding-left: 10px;
  margin: 6px 0 6px 8px;
}
.travel-tree-bag-header {
  font-size: 0.88em;
  color: var(--fg);
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 4px;
}
.travel-tree-actions {
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
}
.travel-tree-items {
  display: flex; flex-direction: column; gap: 2px;
  margin-left: 6px;
}
.travel-tree-item {
  font-size: 0.85em;
  color: var(--fg);
  padding: 2px 0;
}
.travel-tree-item.is-packed {
  color: var(--dim);
  text-decoration: line-through;
}
.travel-tree-empty {
  font-size: 0.8em;
  font-style: italic;
  margin: 4px 0 0 6px;
}
.travel-tree-section-label {
  font-size: 0.82em;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 14px 0 4px;
}

/* search tab */
.travel-search-toolbar { margin-bottom: 12px; }
.travel-search-input {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: 1px solid var(--accent2);
  color: var(--fg);
  padding: 8px 12px;
  font-family: var(--mono, monospace);
  font-size: 1em;
  border-radius: 2px;
}
.travel-search-input:focus {
  outline: none;
  border-color: var(--accent);
}
.travel-search-results { min-height: 100px; }
.travel-search-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.travel-search-row {
  padding: 8px 10px;
  border: 1px solid var(--accent2);
  border-radius: 2px;
}
.travel-search-item-name { font-size: 0.92em; color: var(--fg); }
.travel-search-chain {
  font-size: 0.85em;
  color: var(--accent);
  margin-top: 4px;
  font-family: var(--mono, monospace);
}
.travel-search-trip { font-size: 0.78em; margin-top: 2px; }

/* sub-modal dialog overrides for travel */
.travel-dialog .ml-submodal-inner { max-width: 480px; }
.travel-dialog .ml-submodal-body .field { margin-bottom: 10px; }
.travel-dialog .ml-submodal-body .field label {
  display: block;
  color: var(--dim);
  font-size: 0.82em;
  margin-bottom: 3px;
}
.travel-row-inputs { display: flex; gap: 10px; }
.travel-row-inputs .field { flex: 1; }

/* condition checkboxes (used in trip/item dialogs) */
.travel-cb {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-right: 10px;
  margin-bottom: 4px;
  font-size: 0.88em;
  color: var(--fg);
  cursor: pointer;
}
.travel-cb input[type="checkbox"] {
  width: 16px; height: 16px;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}
.travel-cond-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px 0;
}

/* share dialog list */
.travel-share-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--accent2);
  border-radius: 2px;
}
.travel-share-list .travel-cb {
  margin: 0;
  padding: 4px 6px;
}
.travel-share-list .travel-cb:hover {
  background: rgba(176,230,176,0.05);
}

/* dialog actions row */
.travel-dialog-actions {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.travel-dialog-actions .btn {
  background: transparent;
  border: 1px solid var(--accent2);
  color: var(--fg);
  padding: 6px 14px;
  font-family: var(--mono, monospace);
  font-size: 0.9em;
  cursor: pointer;
  border-radius: 2px;
}
.travel-dialog-actions .btn:hover {
  background: rgba(176,230,176,0.1);
  border-color: var(--accent);
}
.travel-dialog-actions .btn.primary {
  color: var(--accent);
  border-color: var(--accent);
}
.travel-dialog-actions .btn.primary:hover {
  background: rgba(176,230,176,0.15);
}
.travel-dialog-actions .btn.destructive {
  color: #e07a7a;
  border-color: rgba(224,122,122,0.4);
}
.travel-dialog-actions .btn.destructive:hover {
  background: rgba(224,122,122,0.1);
}

/* v10.21: dates collapsible inside edit dialog */
.travel-dates-details {
  margin-bottom: 10px;
  padding: 6px 8px;
  border: 1px dashed var(--accent2);
  border-radius: 2px;
}
.travel-dates-details summary {
  cursor: pointer;
  font-size: 0.85em;
  padding: 2px 0;
}
.travel-dates-details summary:hover { color: var(--accent); }
.travel-dates-details .field:first-of-type { margin-top: 8px; }

/* v10.21: template-edit item rows are simpler than trip pack rows */
.travel-tpl-item-main { flex: 1; }

/* mobile */
@media (max-width: 600px) {
  .travel-trip-toolbar { flex-direction: column; align-items: stretch; }
  .travel-trip-tabs { margin-left: 0; justify-content: center; }
  .travel-row-inputs { flex-direction: column; }
}