/* ═══════════════════════════════════════════════════════════
   TrailMind – Public Styles
   ═══════════════════════════════════════════════════════════ */

:root {
  --tm-green:      #2d6a4f;
  --tm-green-lt:   #52b788;
  --tm-green-bg:   #e8f5e9;
  --tm-orange:     #f8961e;
  --tm-red:        #c1121f;
  --tm-text:       #1a202c;
  --tm-muted:      #64748b;
  --tm-border:     #e2e8f0;
  --tm-card-bg:    #ffffff;
  --tm-bg:         #f7faf8;
  --tm-radius:     12px;
  --tm-shadow:     0 2px 12px rgba(0,0,0,.08);
  --tm-font:       -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.tm-wrap { font-family: var(--tm-font); color: var(--tm-text); max-width: 900px; margin: 0 auto; padding: 20px 16px 60px; }

/* ── Progress ─────────────────────────────────────────────── */
.tm-progress-wrap    { margin-bottom: 32px; }
.tm-progress-bar     { height: 6px; background: var(--tm-border); border-radius: 99px; overflow: hidden; margin-bottom: 16px; }
.tm-progress-fill    { height: 100%; background: linear-gradient(90deg, var(--tm-green), var(--tm-green-lt)); border-radius: 99px; transition: width .4s ease; }
.tm-steps            { display: flex; justify-content: space-between; }
.tm-step             { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; }
.tm-step-num         { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--tm-border); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: var(--tm-muted); background: #fff; transition: all .3s; }
.tm-step-label       { font-size: 11px; color: var(--tm-muted); text-align: center; }
.tm-step.active .tm-step-num { border-color: var(--tm-green); background: var(--tm-green); color: #fff; }
.tm-step.done .tm-step-num   { border-color: var(--tm-green-lt); background: var(--tm-green-lt); color: #fff; }
.tm-step.active .tm-step-label, .tm-step.done .tm-step-label { color: var(--tm-green); font-weight: 600; }

/* ── Step Panels ──────────────────────────────────────────── */
.tm-step-panel        { display: none; }
.tm-step-panel.active { display: block; animation: tm-fade .3s ease; }
@keyframes tm-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.tm-panel-header      { text-align: center; margin-bottom: 32px; }
.tm-panel-icon        { font-size: 48px; margin-bottom: 8px; }
.tm-panel-header h2   { font-size: 24px; color: var(--tm-green); margin: 0 0 6px; }
.tm-panel-header p    { color: var(--tm-muted); margin: 0; }

/* ── Form ─────────────────────────────────────────────────── */
.tm-form-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tm-field       { display: flex; flex-direction: column; gap: 6px; }
.tm-field--full { grid-column: 1 / -1; }
.tm-field label { font-weight: 600; font-size: 13px; color: var(--tm-text); }
.tm-req         { color: var(--tm-red); }

.tm-field input,
.tm-field select,
.tm-field textarea {
  padding: 10px 14px;
  border: 1.5px solid var(--tm-border);
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--tm-font);
  color: var(--tm-text);
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}
.tm-field input:focus,
.tm-field select:focus,
.tm-field textarea:focus {
  border-color: var(--tm-green);
  box-shadow: 0 0 0 3px rgba(45,106,79,.12);
}
.tm-field textarea { resize: vertical; }

/* Radio Cards */
.tm-radio-cards       { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tm-radio-card        { cursor: pointer; }
.tm-radio-card input  { display: none; }
.tm-radio-card-body   { display: block; padding: 14px; border: 1.5px solid var(--tm-border); border-radius: 10px; text-align: center; transition: all .2s; }
.tm-radio-card-body strong { display: block; margin-bottom: 4px; }
.tm-radio-card-body small  { color: var(--tm-muted); font-size: 12px; }
.tm-radio-card input:checked + .tm-radio-card-body {
  border-color: var(--tm-green);
  background: var(--tm-green-bg);
  box-shadow: 0 0 0 3px rgba(45,106,79,.12);
}

/* ── Buttons ──────────────────────────────────────────────── */
.tm-btn-row         { display: flex; gap: 12px; justify-content: flex-end; margin-top: 28px; flex-wrap: wrap; }
.tm-btn-row--center { justify-content: center; }

.tm-btn             { display: inline-flex; align-items: center; gap: 6px; padding: 11px 22px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; border: 2px solid transparent; transition: all .2s; white-space: nowrap; }
.tm-btn--primary    { background: var(--tm-green); color: #fff; border-color: var(--tm-green); }
.tm-btn--primary:hover { background: #1b4332; border-color: #1b4332; }
.tm-btn--secondary  { background: #fff; color: var(--tm-green); border-color: var(--tm-green); }
.tm-btn--ghost      { background: transparent; color: var(--tm-muted); border-color: var(--tm-border); }
.tm-btn--ghost:hover { background: var(--tm-bg); }
.tm-btn--danger     { background: var(--tm-red); color: #fff; border-color: var(--tm-red); }
.tm-btn--small      { padding: 6px 14px; font-size: 12px; }

/* ── Result Cards ─────────────────────────────────────────── */
.tm-result-cards  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px; }
.tm-result-card   { background: var(--tm-card-bg); border: 1px solid var(--tm-border); border-radius: var(--tm-radius); padding: 20px; display: flex; align-items: center; gap: 14px; box-shadow: var(--tm-shadow); }
.tm-result-card-icon  { font-size: 32px; }
.tm-result-card-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--tm-muted); margin-bottom: 2px; }
.tm-result-card-value { font-size: 22px; font-weight: 700; color: var(--tm-text); }
.tm-result-card-sub   { font-size: 12px; color: var(--tm-muted); }

/* ── Sections ─────────────────────────────────────────────── */
.tm-section        { background: var(--tm-card-bg); border: 1px solid var(--tm-border); border-radius: var(--tm-radius); padding: 24px; margin-bottom: 20px; box-shadow: var(--tm-shadow); }
.tm-section h3     { margin: 0 0 16px; font-size: 17px; color: var(--tm-green); }
.tm-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.tm-section-header h3 { margin: 0; }
.tm-muted          { color: var(--tm-muted); font-size: 14px; }

/* ── Weight ───────────────────────────────────────────────── */
.tm-weight-grid   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.tm-weight-stat   { text-align: center; padding: 12px; background: var(--tm-bg); border-radius: 8px; }
.tm-weight-stat strong { display: block; font-size: 20px; color: var(--tm-green); }
.tm-weight-stat span   { font-size: 11px; color: var(--tm-muted); }

.tm-weight-bar       { margin-bottom: 8px; }
.tm-weight-bar-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--tm-muted); margin-bottom: 3px; }
.tm-weight-bar-track { height: 8px; background: var(--tm-bg); border-radius: 99px; overflow: hidden; }
.tm-weight-bar-fill  { height: 100%; background: linear-gradient(90deg, var(--tm-green), var(--tm-green-lt)); border-radius: 99px; transition: width .8s ease; }

/* ── Packing List ─────────────────────────────────────────── */
.tm-packing-controls { display: flex; gap: 8px; margin-bottom: 16px; }
.tm-filter-btn       { padding: 5px 14px; border-radius: 99px; border: 1.5px solid var(--tm-border); background: #fff; font-size: 12px; cursor: pointer; transition: all .2s; }
.tm-filter-btn.active { background: var(--tm-green); color: #fff; border-color: var(--tm-green); }

.tm-packing-category  { margin-bottom: 20px; }
.tm-cat-header        { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1.5px solid var(--tm-border); }
.tm-cat-header h4     { margin: 0; font-size: 14px; color: var(--tm-green); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.tm-cat-weight        { font-size: 12px; color: var(--tm-muted); }

.tm-checklist         { list-style: none; padding: 0; margin: 0; }
.tm-check-item        { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--tm-bg); transition: opacity .2s; }
.tm-check-item:last-child { border-bottom: none; }
.tm-check-item label  { display: flex; align-items: center; gap: 10px; cursor: pointer; flex: 1; }
.tm-check-item input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--tm-green); cursor: pointer; flex-shrink: 0; }
.tm-item-name         { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.tm-item-note         { font-size: 11px; color: var(--tm-muted); font-style: italic; }
.tm-optional          { font-size: 11px; color: var(--tm-muted); margin-left: 4px; }
.tm-item-weight       { font-size: 12px; color: var(--tm-muted); white-space: nowrap; margin-left: 12px; }
.tm-check-item.is-checked .tm-item-name { text-decoration: line-through; opacity: .5; }

/* ── Badges ───────────────────────────────────────────────── */
.tm-badge           { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--tm-green); color: #fff; }
.tm-badge--outline  { background: transparent; border: 1.5px solid var(--tm-border); color: var(--tm-muted); }
.tm-badge--large    { padding: 6px 16px; font-size: 14px; }

/* ── Dashboard ────────────────────────────────────────────── */
.tm-dash-header       { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }
.tm-dash-header h2    { margin: 0 0 4px; }
.tm-dash-header p     { color: var(--tm-muted); margin: 0; }

.tm-stats-row         { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.tm-stat-card         { background: var(--tm-card-bg); border: 1px solid var(--tm-border); border-radius: var(--tm-radius); padding: 20px; text-align: center; box-shadow: var(--tm-shadow); }
.tm-stat-num          { font-size: 28px; font-weight: 700; color: var(--tm-green); }
.tm-stat-label        { font-size: 12px; color: var(--tm-muted); margin-top: 2px; }

.tm-trek-cards        { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.tm-trek-card         { background: var(--tm-card-bg); border: 1px solid var(--tm-border); border-radius: var(--tm-radius); padding: 20px; box-shadow: var(--tm-shadow); display: flex; flex-direction: column; gap: 12px; }
.tm-trek-card-header  { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.tm-trek-card-header h3 { margin: 0; font-size: 16px; color: var(--tm-text); }
.tm-trek-meta         { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--tm-muted); }
.tm-trek-meta span    { display: flex; align-items: center; gap: 6px; }
.tm-trek-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Trek Detail ──────────────────────────────────────────── */
.tm-detail-header  { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.tm-detail-header h1 { margin: 0 0 4px; font-size: 26px; }
.tm-info-box       { background: var(--tm-bg); border-left: 4px solid var(--tm-green); padding: 14px 16px; border-radius: 0 8px 8px 0; font-size: 14px; line-height: 1.6; }
.tm-info-grid      { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.tm-info-grid div  { font-size: 14px; }
.tm-info-grid strong { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--tm-muted); margin-bottom: 2px; }

/* ── Guide Content ────────────────────────────────────────── */
.tm-guide-content h4 { color: var(--tm-green); margin: 16px 0 8px; }
.tm-guide-content ul { padding-left: 20px; margin: 0 0 12px; }
.tm-guide-content li { margin-bottom: 4px; font-size: 14px; line-height: 1.5; }

/* ── Notice ───────────────────────────────────────────────── */
.tm-notice         { padding: 14px 18px; border-radius: 8px; margin: 16px 0; background: #fff3cd; border: 1px solid #ffc107; font-size: 14px; }
.tm-notice--warning { background: #fff3cd; border-color: #ffc107; }
.tm-notice--error   { background: #fee2e2; border-color: var(--tm-red); }
.tm-notice a        { color: var(--tm-green); font-weight: 600; }

/* ── Loading / Empty ──────────────────────────────────────── */
.tm-loading   { text-align: center; padding: 40px; color: var(--tm-muted); font-size: 14px; }
.tm-empty     { text-align: center; padding: 60px 20px; color: var(--tm-muted); }
.tm-empty a   { color: var(--tm-green); font-weight: 600; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .tm-form-grid      { grid-template-columns: 1fr; }
  .tm-field--full    { grid-column: 1; }
  .tm-radio-cards    { grid-template-columns: 1fr; }
  .tm-result-cards   { grid-template-columns: 1fr; }
  .tm-stats-row      { grid-template-columns: 1fr 1fr; }
  .tm-weight-grid    { grid-template-columns: 1fr 1fr; }
  .tm-steps          { display: none; }
  .tm-btn-row        { justify-content: center; }
  .tm-detail-header  { flex-direction: column; }
}

/* ── Print ────────────────────────────────────────────────── */
@media print {
  .tm-btn-row, .tm-progress-wrap, .tm-packing-controls, .tm-filter-btn { display: none !important; }
  .tm-step-panel   { display: block !important; }
  .tm-section      { box-shadow: none; border: 1px solid #ccc; page-break-inside: avoid; }
  .tm-wrap         { max-width: 100%; padding: 0; }
}