/**
 * ===============================================================================
 * TripTiles - Trip-Workbench
 * Vereint Komposition (Profil/Radar), Tagesplan (3-Lane-Timeline),
 * Vault (Dokumente), Kosten und Plan-B in einer einzigen Reise-Workbench.
 * Eingesetzt als Fullscreen-Overlay aus rahmen.php heraus.
 * Developed by Toni Sciacca - mail@tonisciacca.com
 * ===============================================================================
 */

/* Workbench-Layer */
.wb-overlay {
    position: fixed; inset: 0; z-index: 9500;
    background: var(--sh-bg, #f5f5f5);
    display: none; flex-direction: column;
    font-family: 'Outfit', sans-serif;
    animation: wbFadeIn 0.2s ease-out;
}
.wb-overlay.open { display: flex; }
@keyframes wbFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Header — durchgehend, Trip-Identitaet immer sichtbar */
.wb-head {
    height: 64px; flex-shrink: 0;
    background: var(--sh-card, #fff);
    border-bottom: 1px solid var(--sh-border, #e8e8e8);
    display: flex; align-items: center; gap: 16px;
    padding: 0 20px;
}
.wb-back {
    width: 36px; height: 36px; border-radius: 10px;
    border: 1px solid var(--sh-border, #e8e8e8); background: var(--sh-card, #fff);
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.wb-back:hover { border-color: var(--sh-pink, #FF385C); }
.wb-back [data-lucide] { width: 18px; height: 18px; color: var(--sh-text2, #6b6b6b); }

.wb-titlewrap { flex: 1; min-width: 0; }
.wb-title {
    font-size: 18px; font-weight: 700; color: var(--sh-text, #1a1a1a);
    line-height: 1.2;
    display: flex; align-items: center; gap: 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wb-title-edit {
    background: none; border: none; cursor: pointer;
    width: 24px; height: 24px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.15s;
}
.wb-title:hover .wb-title-edit { opacity: 1; }
.wb-title-edit [data-lucide] { width: 13px; height: 13px; color: var(--sh-text3, #9a9a9a); }
.wb-meta { display: flex; gap: 14px; font-size: 12px; color: var(--sh-text2, #6b6b6b); margin-top: 2px; }
.wb-meta-item { display: inline-flex; align-items: center; gap: 4px; }
.wb-meta-item [data-lucide] { width: 12px; height: 12px; }

.wb-tabs { display: flex; gap: 4px; }
.wb-tab {
    background: none; border: none; cursor: pointer;
    font: inherit; font-size: 13px; font-weight: 600;
    padding: 8px 14px; border-radius: 999px;
    color: var(--sh-text2, #6b6b6b);
    display: inline-flex; align-items: center; gap: 6px;
    transition: all 0.12s;
}
.wb-tab [data-lucide] { width: 14px; height: 14px; }
.wb-tab:hover { background: var(--sh-bg, #f5f5f5); }
.wb-tab.active {
    background: var(--sh-pink-lt, rgba(255,56,92,0.08));
    color: var(--sh-pink, #FF385C);
}

.wb-head-actions { display: flex; gap: 6px; align-items: center; }
.wb-action {
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--sh-card, #fff); border: 1px solid var(--sh-border, #e8e8e8);
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.wb-action:hover { border-color: var(--sh-pink, #FF385C); }
.wb-action [data-lucide] { width: 16px; height: 16px; color: var(--sh-text2, #6b6b6b); }
.wb-action.primary { background: var(--sh-pink, #FF385C); border-color: var(--sh-pink, #FF385C); }
.wb-action.primary [data-lucide] { color: #fff; }

/* Radar-Mini in Header */
.wb-radar-mini { width: 36px; height: 36px; }

/* Body */
.wb-body { flex: 1; overflow: hidden; position: relative; }
.wb-pane { position: absolute; inset: 0; overflow: hidden; display: none; }
.wb-pane.active { display: flex; }

/* ─────────────────────────────────────────────────────────
   PANE: KOMPOSITION (Radar + Routenliste + Reise-Profil)
   ───────────────────────────────────────────────────────── */
.wb-kompose {
    display: grid;
    grid-template-columns: 360px 1fr 360px;
    width: 100%;
}
.wb-kompose-left, .wb-kompose-right {
    background: var(--sh-card, #fff);
    border-right: 1px solid var(--sh-border, #e8e8e8);
    overflow-y: auto; padding: 20px;
}
.wb-kompose-right { border-right: none; border-left: 1px solid var(--sh-border, #e8e8e8); }
.wb-kompose-mid { padding: 24px 28px; overflow-y: auto; }

.wb-profile-card {
    background: linear-gradient(135deg, #fff, #f9f9fb);
    border: 1px solid var(--sh-border, #e8e8e8);
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 16px;
}
.wb-profile-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--sh-text3, #9a9a9a); margin-bottom: 12px; }
.wb-profile-radar { width: 100%; max-width: 280px; margin: 0 auto; }
.wb-profile-bars { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.wb-profile-bar { display: grid; grid-template-columns: 90px 1fr 36px; gap: 10px; align-items: center; font-size: 12px; }
.wb-profile-bar-track { height: 6px; border-radius: 999px; background: var(--sh-bg, #f5f5f5); overflow: hidden; }
.wb-profile-bar-fill { height: 100%; background: var(--sh-pink, #FF385C); border-radius: 999px; transition: width 0.4s; }
.wb-profile-bar-val { font-weight: 600; color: var(--sh-text, #1a1a1a); text-align: right; }

.wb-section-title {
    font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
    color: var(--sh-text3, #9a9a9a);
    margin: 8px 0 10px;
    display: flex; align-items: center; justify-content: space-between;
}
.wb-section-title button {
    background: var(--sh-pink, #FF385C); color: #fff;
    border: none; border-radius: 999px;
    padding: 4px 10px; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px;
}
.wb-section-title button [data-lucide] { width: 11px; height: 11px; }

.wb-route-row {
    display: grid; grid-template-columns: 4px 1fr auto;
    gap: 10px; padding: 10px 12px;
    background: var(--sh-card, #fff);
    border: 1px solid var(--sh-border, #e8e8e8);
    border-radius: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color 0.12s, transform 0.12s;
}
.wb-route-row:hover { border-color: var(--sh-pink, #FF385C); transform: translateY(-1px); }
.wb-route-row.active { border-color: var(--sh-pink, #FF385C); background: var(--sh-pink-lt, rgba(255,56,92,0.04)); }
.wb-route-color { width: 4px; border-radius: 999px; background: var(--c, var(--sh-pink, #FF385C)); }
.wb-route-name { font-size: 13px; font-weight: 600; color: var(--sh-text, #1a1a1a); }
.wb-route-meta { font-size: 11px; color: var(--sh-text3, #9a9a9a); margin-top: 2px; }
.wb-route-drag { width: 24px; display: flex; align-items: center; justify-content: center; color: var(--sh-text3, #9a9a9a); }

/* ─────────────────────────────────────────────────────────
   PANE: TAGESPLAN (3-Lane Timeline)
   ───────────────────────────────────────────────────────── */
.wb-tagesplan { display: flex; flex-direction: column; width: 100%; }
.wb-day-bar {
    flex-shrink: 0;
    display: flex; gap: 6px; padding: 12px 20px;
    background: var(--sh-card, #fff);
    border-bottom: 1px solid var(--sh-border, #e8e8e8);
    overflow-x: auto;
}
.wb-day-chip {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 999px;
    background: var(--sh-bg, #f5f5f5);
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 12px; font-weight: 600; color: var(--sh-text2, #6b6b6b);
    transition: all 0.12s;
}
.wb-day-chip:hover { background: #fff; border-color: var(--sh-border, #e8e8e8); }
.wb-day-chip.active { background: var(--sh-pink, #FF385C); color: #fff; border-color: var(--sh-pink, #FF385C); }
.wb-day-chip-num {
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(255,255,255,0.3);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800;
}
.wb-day-chip:not(.active) .wb-day-chip-num { background: rgba(0,0,0,0.06); color: var(--sh-text2, #6b6b6b); }

.wb-timeline { flex: 1; display: grid; grid-template-columns: 80px 1fr 360px; overflow: hidden; }
.wb-time-rail {
    border-right: 1px solid var(--sh-border, #e8e8e8);
    background: var(--sh-card, #fff);
    padding: 16px 0 0; overflow-y: auto;
}
.wb-time-tick { height: 60px; font-size: 11px; color: var(--sh-text3, #9a9a9a); text-align: center; padding-top: 0; border-bottom: 1px dashed var(--sh-border, #e8e8e8); }

.wb-lanes { padding: 16px; overflow-y: auto; position: relative; background: linear-gradient(to bottom, #fff 0, #fafafa 100%); }
.wb-lane-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; height: 100%; min-height: 1440px; position: relative; }
.wb-lane-col {
    background: var(--sh-card, #fff);
    border-radius: 12px; border: 1px solid var(--sh-border, #e8e8e8);
    padding: 10px; position: relative;
    min-height: 100%;
}
.wb-lane-head {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--sh-text3, #9a9a9a);
    padding-bottom: 8px; border-bottom: 1px solid var(--sh-border, #e8e8e8);
    margin-bottom: 8px;
}
.wb-lane-head [data-lucide] { width: 12px; height: 12px; }
.wb-lane-col.lane-route .wb-lane-head [data-lucide] { color: #4338ca; }
.wb-lane-col.lane-poi   .wb-lane-head [data-lucide] { color: var(--sh-pink, #FF385C); }
.wb-lane-col.lane-stay  .wb-lane-head [data-lucide] { color: #047857; }

.wb-event {
    position: absolute; left: 8px; right: 8px;
    background: var(--sh-pink-lt, rgba(255,56,92,0.08));
    border-left: 3px solid var(--sh-pink, #FF385C);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12px;
    cursor: grab;
    transition: transform 0.12s;
}
.wb-event:hover { transform: translateX(2px); }
.wb-event.lane-route { background: rgba(99, 102, 241, 0.08); border-left-color: #4338ca; }
.wb-event.lane-stay  { background: rgba(16, 185, 129, 0.08); border-left-color: #047857; }
.wb-event-title { font-weight: 600; color: var(--sh-text, #1a1a1a); }
.wb-event-meta { font-size: 11px; color: var(--sh-text3, #9a9a9a); margin-top: 2px; }
.wb-event-time { font-size: 10px; font-weight: 700; color: var(--sh-text2, #6b6b6b); }

.wb-day-map {
    border-left: 1px solid var(--sh-border, #e8e8e8);
    background: var(--sh-card, #fff);
    position: relative;
}
.wb-day-map-inner { position: absolute; inset: 0; }

.wb-suggest-strip {
    position: absolute; bottom: 12px; left: 12px; right: 372px;
    background: var(--sh-card, #fff);
    border: 1px solid var(--sh-border, #e8e8e8);
    border-radius: 14px;
    padding: 10px 14px;
    display: flex; gap: 8px; align-items: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    font-size: 12px;
}
.wb-suggest-strip [data-lucide] { width: 16px; height: 16px; color: var(--sh-pink, #FF385C); }

/* ─────────────────────────────────────────────────────────
   PANE: VAULT
   ───────────────────────────────────────────────────────── */
.wb-vault { padding: 20px; overflow-y: auto; width: 100%; }
.wb-vault-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

/* ─────────────────────────────────────────────────────────
   PANE: KOSTEN
   ───────────────────────────────────────────────────────── */
.wb-kosten { padding: 24px; overflow-y: auto; width: 100%; max-width: 1100px; margin: 0 auto; }
.wb-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.wb-kpi {
    background: var(--sh-card, #fff);
    border: 1px solid var(--sh-border, #e8e8e8);
    border-radius: 14px;
    padding: 18px;
}
.wb-kpi-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--sh-text3, #9a9a9a); }
.wb-kpi-val { font-size: 24px; font-weight: 700; color: var(--sh-text, #1a1a1a); margin-top: 4px; }
.wb-kpi-sub { font-size: 12px; color: var(--sh-text3, #9a9a9a); margin-top: 4px; }
.wb-kpi.warn .wb-kpi-val { color: #b45309; }
.wb-kpi.ok .wb-kpi-val { color: #047857; }

.wb-cat-bars { background: var(--sh-card, #fff); border-radius: 14px; border: 1px solid var(--sh-border, #e8e8e8); padding: 18px; }
.wb-cat-row { display: grid; grid-template-columns: 130px 1fr 120px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--sh-border, #e8e8e8); font-size: 13px; }
.wb-cat-row:last-child { border-bottom: none; }
.wb-cat-track { height: 8px; background: var(--sh-bg, #f5f5f5); border-radius: 999px; overflow: hidden; }
.wb-cat-fill { height: 100%; background: var(--sh-pink, #FF385C); border-radius: 999px; }
.wb-cat-row.over .wb-cat-fill { background: #dc2626; }

/* ─────────────────────────────────────────────────────────
   PANE: HEALTH (Reise-Health-Check Ampel)
   ───────────────────────────────────────────────────────── */
.wb-health { padding: 24px; overflow-y: auto; width: 100%; max-width: 800px; margin: 0 auto; }
.wb-health-card {
    background: var(--sh-card, #fff);
    border: 1px solid var(--sh-border, #e8e8e8);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 10px;
    display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center;
}
.wb-health-led { width: 12px; height: 12px; border-radius: 50%; }
.wb-health-led.ok   { background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,0.18); }
.wb-health-led.warn { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.18); }
.wb-health-led.err  { background: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,0.18); }
.wb-health-body { font-size: 14px; }
.wb-health-title { font-weight: 600; color: var(--sh-text, #1a1a1a); }
.wb-health-msg { font-size: 12px; color: var(--sh-text2, #6b6b6b); margin-top: 2px; }
.wb-health-action {
    background: var(--sh-pink, #FF385C); color: #fff;
    border: none; border-radius: 999px; padding: 6px 12px;
    font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
}

/* Plan-B Layer */
.wb-planb-toggle {
    position: absolute; top: 12px; right: 12px;
    background: var(--sh-card, #fff);
    border: 1px solid var(--sh-border, #e8e8e8);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 11px; font-weight: 600;
    color: var(--sh-text2, #6b6b6b);
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
}
.wb-planb-toggle.active { background: var(--sh-pink, #FF385C); color: #fff; border-color: var(--sh-pink, #FF385C); }
.wb-planb-toggle [data-lucide] { width: 12px; height: 12px; }

@media (max-width: 1100px) {
    .wb-kompose { grid-template-columns: 1fr; }
    .wb-kompose-left, .wb-kompose-right { border: none; }
    .wb-timeline { grid-template-columns: 56px 1fr; }
    .wb-day-map { display: none; }
    .wb-suggest-strip { right: 12px; }
    .wb-kpis { grid-template-columns: repeat(2, 1fr); }
}