/* trip.aw2.at -- dunkles, mobile-first Theme.
 *
 * Farbwelt und Kachelgeometrie sind aus lokilab_aw1
 * (lokilab/templates/studio/gallery.html) uebernommen: dieselben
 * CSS-Variablen, dieselben Kartenradien/Schatten, dasselbe Grid
 * (WEBAPP_KONZEPT.md §5).
 *
 * Mitgenommen sind die mobile-first-Details, die lokilab bereits hart
 * erarbeitet hat:
 *   - min-height:100dvh statt 100vh (Safari-Adressleiste)
 *   - env(safe-area-inset-*)-Padding (Notch)
 *   - touch-action:manipulation + -webkit-tap-highlight-color:transparent
 *   - Touch-Targets >= 40px
 *
 * BEWUSST NICHT uebernommen: aspect-ratio:1/1 der Media-Kacheln -- hier
 * stehen Texte drin, die Kacheln wachsen mit dem Inhalt.
 */

:root {
  color-scheme: dark;
  --bg: #02050a;
  --panel: #06101d;
  --line: rgba(148, 163, 184, .22);
  --text: #e5edf8;
  --muted: #8ea3bd;
  --accent: #65f0b0;
  --danger: #ff8fa3;
  --warn: #fcd77a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: radial-gradient(circle at top, #102033, #02050a 58%);
  background-attachment: fixed;
  color: var(--text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

button, input, select, textarea { font: inherit; }
button, a.btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

a { color: var(--accent); }

.page {
  min-height: 100dvh;
  padding: max(16px, env(safe-area-inset-top))
           max(14px, env(safe-area-inset-right))
           max(28px, env(safe-area-inset-bottom))
           max(14px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wrap { width: 100%; max-width: 960px; }

/* --- Kopfzeile --- */
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.topbar h1 {
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: .01em;
  flex: 1 1 auto;
  min-width: 0;
}
.topbar .sub { display: block; font-size: .8rem; color: var(--muted); font-weight: 400; margin-top: 3px; }
.topbar .spacer { flex: 1 1 auto; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(2, 6, 14, .72);
  color: var(--text);
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
}
.chip.accent { border-color: rgba(101, 240, 176, .42); color: var(--accent); background: rgba(9, 35, 26, .7); }
.chip.plain { background: none; color: var(--muted); }

/* --- Hinweisstreifen (Staleness, §4) --- */
.notice {
  display: block;
  border: 1px solid rgba(251, 191, 36, .40);
  background: rgba(88, 58, 8, .38);
  color: var(--warn);
  border-radius: 16px;
  padding: 11px 14px;
  font-size: .84rem;
  line-height: 1.4;
  margin-bottom: 16px;
}

/* --- Kachel-Grid --- */
.items {
  width: 100%;
  display: grid;
  gap: 18px;
  margin: 0 auto;
}
@media (min-width: 780px)  { .items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .items { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card {
  position: relative;
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(11, 22, 38, .96), rgba(3, 8, 16, .96));
  box-shadow: 0 18px 60px rgba(0, 0, 0, .45);
  padding: 18px 20px;
  color: inherit;
  text-decoration: none;
  transition: transform .12s ease, border-color .12s ease;
}
.card:active { transform: scale(.988); }
.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.card .head { display: flex; align-items: baseline; gap: 10px; }
.card .icon { font-size: 1.5rem; line-height: 1; flex: 0 0 auto; }
.card h2 { margin: 0; font-size: 1.06rem; font-weight: 800; min-width: 0; }

.card .lines { margin: 11px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.card .lines li { color: var(--muted); font-size: .88rem; line-height: 1.38; }

/* Tages-Kacheln: heute hervorheben, Vergangenes dimmen (§5) */
.card.tag-heute { border-color: rgba(101, 240, 176, .65); box-shadow: 0 0 0 1px rgba(101, 240, 176, .18) inset, 0 18px 60px rgba(0, 0, 0, .45); }
.card.tag-vorbei { opacity: .55; }
.card.platzhalter { opacity: .72; border-style: dashed; }

/* --- Badges (§5: gruen = fix, bernstein = pruefen, rosa = unsicher) --- */
.tile-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.tm-badge {
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  background: rgba(101, 240, 176, .10);
  color: rgba(191, 255, 225, .88);
}
.tm-badge.warn { background: rgba(251, 191, 36, .14); color: rgba(253, 224, 150, .94); }
.tm-badge.soft { background: rgba(255, 143, 163, .16); color: rgba(255, 213, 220, .95); }

/* --- Detailansicht --- */
.detail { display: grid; gap: 16px; }
.panel {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(11, 22, 38, .96), rgba(3, 8, 16, .96));
  box-shadow: 0 18px 60px rgba(0, 0, 0, .38);
  padding: 18px 20px;
}
.panel h3 { margin: 0 0 12px; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.panel p { margin: 0 0 10px; line-height: 1.5; }
.panel p:last-child { margin-bottom: 0; }

.kv { display: grid; gap: 10px; margin: 0; }
.kv > div { display: grid; grid-template-columns: minmax(0, 8.5rem) 1fr; gap: 10px; align-items: baseline; }
.kv dt { color: var(--muted); font-size: .82rem; }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* Breite Inhalte scrollen in ihrem eigenen Container, der Body nie waagrecht */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -6px; padding: 0 6px; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 380px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid rgba(148, 163, 184, .14); vertical-align: top; }
th { color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; white-space: nowrap; }

ul.list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
ul.list > li { display: grid; gap: 3px; }
ul.list .name { font-weight: 700; }
ul.list .sub { color: var(--muted); font-size: .85rem; line-height: 1.4; }

.total { display: flex; justify-content: space-between; gap: 12px; padding-top: 11px; margin-top: 4px; border-top: 1px solid rgba(148, 163, 184, .22); font-weight: 800; }

.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
a.btn, button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 18px;
  border-radius: 16px;
  border: 0;
  font-weight: 800;
  text-decoration: none;
  background: #111c2d;
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, .12);
}
a.btn.primary, button.btn.primary {
  background: linear-gradient(135deg, #61f0ae, #23c483);
  color: #03130d;
  border-color: transparent;
}
button.btn.danger { color: var(--danger); border-color: rgba(255, 143, 163, .4); background: transparent; }
button:disabled, a.btn.disabled { opacity: .55; cursor: default; }

.muted { color: var(--muted); }
.small { font-size: .82rem; line-height: 1.45; }
.err { color: var(--danger); }
.ok { color: var(--accent); }
.footer { margin-top: 22px; color: #4d5a6d; font-size: .74rem; text-align: center; line-height: 1.5; }

/* --- Chat (Phase 2, WEBAPP_KONZEPT.md §6) ---
 * Muster aus lokilab/templates/chat/chat.html: die Nachrichtenliste scrollt in
 * IHREM Container, der Composer steht fest unten (er scrollt nie weg), das
 * safe-area-Padding von .page gilt weiter. Der Body scrollt hier nicht --
 * sonst schiebt die Safari-Adressleiste am iPhone den Composer aus dem Bild.
 */
body.chat { overflow: hidden; }
body.chat .page { height: 100vh; height: 100dvh; }
body.chat .wrap { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
body.chat .topbar { margin-bottom: 12px; }
body.chat .footer { display: none; }

.chat-shell {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(11, 22, 38, .92), rgba(3, 8, 16, .92));
  box-shadow: 0 18px 60px rgba(0, 0, 0, .38);
  overflow: hidden;
}
.messages {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 14px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.msg { display: flex; }
.msg.user { justify-content: flex-end; }
.bubble {
  max-width: min(88%, 620px);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 10px 13px;
  font-size: .95rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.msg.user .bubble { background: rgba(101, 240, 176, .12); border-color: rgba(101, 240, 176, .32);
                    border-bottom-right-radius: 8px; }
.msg.assistant .bubble { background: rgba(148, 163, 184, .09); border-bottom-left-radius: 8px; }
.msg.error .bubble { background: rgba(75, 20, 29, .5); border-color: rgba(255, 143, 163, .42);
                     color: #ffd9df; border-bottom-left-radius: 8px; }

.chat-empty { color: var(--muted); padding: 6px 4px; display: grid; gap: 8px; }
.chat-empty p { margin: 0; line-height: 1.5; }
.chat-empty strong { color: var(--text); }

.composer {
  flex: 0 0 auto;
  margin-top: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(2, 6, 14, .82);
  padding: 8px;
}
.composer textarea {
  width: 100%;
  min-height: 46px;
  max-height: 150px;
  resize: none;
  outline: none;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(148, 163, 184, .08);
  color: var(--text);
  padding: 12px;
  line-height: 1.35;
}
.composer .send-btn {
  min-width: 54px;
  min-height: 46px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #61f0ae, #23c483);
  color: #03130d;
  font-size: 1.1rem;
  font-weight: 800;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.composer .send-btn:disabled { opacity: .55; }
.chat-status { flex: 0 0 auto; margin: 8px 2px 0; text-align: center; }

.typing { display: inline-flex; gap: 5px; align-items: center; min-height: 22px; }
.typing i { width: 6px; height: 6px; border-radius: 999px; background: var(--muted);
            animation: typing 1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 100% { transform: translateY(0); opacity: .45 }
                    50% { transform: translateY(-3px); opacity: 1 } }

/* --- Login/Auth-Seiten --- */
.center-page { min-height: 100dvh; display: flex; align-items: center; justify-content: center;
               padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
.auth-card { width: 100%; max-width: 380px; }
.auth-card .title { text-align: center; margin-bottom: 22px; }
.auth-card .title h1 { margin: 0; font-size: 1.5rem; }
.auth-card .title .sub { margin-top: 8px; color: var(--muted); font-size: .9rem; }
.auth-block { margin-bottom: 20px; }
.auth-block .label { text-align: center; color: var(--muted); font-size: .74rem; letter-spacing: .08em;
                     text-transform: uppercase; margin-bottom: 10px; }
.auth-block input {
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  font-size: 1rem;
  background: var(--panel);
  color: var(--text);
  border: 1px solid rgba(148, 163, 184, .28);
  text-align: center;
}
.auth-block button { width: 100%; margin-top: 10px; }
.msg { margin-top: 10px; text-align: center; font-size: .88rem; min-height: 1.2em; color: var(--muted); }
.msg.bad { color: var(--danger); }
.msg.good { color: var(--accent); }
.sep { display: flex; align-items: center; gap: 12px; color: #46536a; font-size: .72rem;
       text-transform: uppercase; letter-spacing: .1em; margin: 20px 0; }
.sep::before, .sep::after { content: ""; flex: 1; height: 1px; background: rgba(148, 163, 184, .2); }

.pin-display { font-size: 1.8rem; letter-spacing: .55em; padding-left: .55em; height: 2.4rem;
               text-align: center; border-bottom: 2px solid rgba(148, 163, 184, .3); margin: 6px 0 14px; }
.numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.numpad button {
  min-height: 56px;
  font-size: 1.35rem;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #111c2d;
  color: var(--text);
}
.numpad button:active { background: #1a2942; }
.numpad button.wide { border-radius: 16px; font-size: .95rem; font-weight: 800; }
.numpad button.go { background: linear-gradient(135deg, #61f0ae, #23c483); color: #03130d; border-color: transparent; }
.toggle { display: block; width: 100%; margin-top: 14px; background: none; border: 0; color: var(--muted);
          font-size: .84rem; text-decoration: underline; min-height: 40px; }
.hidden { display: none !important; }