/* ============================================================================
   MeinZuhause — polish layer: dark mode, skeletons, empty/error states,
   toasts, splash, guided tour, focus/motion, mobile. Loaded after Tailwind.
   ============================================================================ */

/* ---------- motion & a11y ---------- */
*:focus-visible { outline: 3px solid var(--accent, #1300FF); outline-offset: 2px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }
.tab-content { animation: mzfade .35s cubic-bezier(.22,1,.36,1); }
@keyframes mzfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.card { transition: box-shadow .25s, border-color .25s, transform .25s, background .25s; }

/* ---------- toasts ---------- */
#mz-toasts { position: fixed; right: 16px; bottom: 84px; z-index: 1200; display: flex; flex-direction: column; gap: 8px; max-width: 92vw; }
.mz-toast { display: flex; align-items: center; gap: 10px; background: #232323; color: #fff; padding: 12px 16px; border-radius: 14px;
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.5); font-size: 14px; font-weight: 600; transform: translateY(8px); opacity: 0;
  animation: mztoast-in .3s cubic-bezier(.22,1,.36,1) forwards; max-width: 360px; }
.mz-toast.out { animation: mztoast-out .25s ease forwards; }
.mz-toast .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.mz-toast.ok .dot { background: #34D399; } .mz-toast.err .dot { background: #FF5C41; } .mz-toast.info .dot { background: #C6FA02; }
@keyframes mztoast-in { to { transform: translateY(0); opacity: 1; } }
@keyframes mztoast-out { to { transform: translateY(8px); opacity: 0; } }

/* ---------- skeleton / empty / error ---------- */
.mz-skel { background: linear-gradient(100deg, #ECEAE6 30%, #F6F4F1 50%, #ECEAE6 70%); background-size: 200% 100%;
  animation: mzshimmer 1.2s infinite linear; border-radius: 10px; height: 14px; margin: 8px 0; }
.mz-skel.lg { height: 28px; } .mz-skel.w50 { width: 50%; } .mz-skel.w70 { width: 70%; }
@keyframes mzshimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.mz-empty { text-align: center; color: #9A948B; padding: 28px 16px; font-size: 14px; }
.mz-empty .ico { font-size: 26px; display: block; margin-bottom: 6px; opacity: .7; }
.mz-error { background: #FFE8E2; border: 1px solid rgba(255,92,65,.3); color: #B23A1E; border-radius: 12px; padding: 12px 14px; font-size: 13px; }

/* ---------- count-up ---------- */
.mz-countup { font-variant-numeric: tabular-nums; }

/* ---------- button busy spinner ---------- */
.mz-busy { position: relative; color: transparent !important; pointer-events: none; }
.mz-busy::after { content: ''; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: mzspin .7s linear infinite; color: #fff; }
@keyframes mzspin { to { transform: rotate(360deg); } }

/* ---------- splash (role picker / login) ---------- */
#mz-splash { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 20px;
  background: radial-gradient(1200px 600px at 50% -10%, #ECEAFF, #F6F4F1 60%); }
#mz-splash .panel { width: 100%; max-width: 520px; background: #fff; border: 1px solid #E7E4E0; border-radius: 24px;
  box-shadow: 0 50px 90px -30px rgba(19,0,255,.28); padding: 28px; animation: mzfade .4s; }
.mz-role { width: 100%; text-align: left; border: 1.5px solid #E7E4E0; border-radius: 16px; padding: 16px; display: flex; gap: 14px; align-items: center;
  transition: border-color .2s, transform .2s, box-shadow .2s; background: #fff; margin-top: 10px; }
.mz-role:hover { border-color: var(--accent, #1300FF); transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(19,0,255,.35); }
.mz-role .mk { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 800; flex: none; }

/* ---------- guided tour ---------- */
#mz-tour-mask { position: fixed; inset: 0; z-index: 1150; background: rgba(20,18,40,.55); }
#mz-tour-ring { position: fixed; z-index: 1151; border: 3px solid #C6FA02; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(20,18,40,.55);
  transition: all .35s cubic-bezier(.22,1,.36,1); pointer-events: none; }
#mz-tour-pop { position: fixed; z-index: 1152; max-width: 320px; background: #fff; border-radius: 16px; padding: 16px 18px;
  box-shadow: 0 30px 60px -22px rgba(0,0,0,.4); transition: all .35s cubic-bezier(.22,1,.36,1); }
#mz-tour-pop h4 { font-family: var(--font-display, sans-serif); font-size: 16px; margin-bottom: 4px; }
#mz-tour-pop p { font-size: 13px; color: #4F4F4F; line-height: 1.5; }
#mz-tour-pop .row { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
#mz-tour-pop .step { font-size: 12px; color: #9A948B; }

/* ---------- trust strip ---------- */
.mz-trust { display: flex; flex-wrap: wrap; gap: 8px; }
.mz-trust span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: #4F4F4F;
  background: #fff; border: 1px solid #E7E4E0; border-radius: 999px; padding: 5px 11px; }
.mz-trust .g { width: 7px; height: 7px; border-radius: 50%; background: #10B981; }

/* ---------- portfolio Leitstand overlay ---------- */
#mz-leitstand { position: fixed; inset: 0; z-index: 1090; background: #F6F4F1; display: none; }
.mz-ls-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid #E7E4E0; background: #fff; position: sticky; top: 0; z-index: 2; }
.mz-ls-body { padding: 20px; max-width: 1100px; margin: 0 auto; height: calc(100vh - 62px); overflow-y: auto; }
html[data-theme="dark"] #mz-leitstand { background: #141228; }
html[data-theme="dark"] .mz-ls-top { background: #1A1733; border-color: rgba(255,255,255,.1); }

/* ---------- mobile nav ---------- */
@media (max-width: 640px) { #mz-toasts { bottom: 88px; left: 16px; right: 16px; } }

/* ============================================================================
   DARK MODE — overrides the Tailwind utilities the app uses (CareerKit night)
   ============================================================================ */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body { background: #141228 !important; color: #F3F1ED; }
html[data-theme="dark"] .bg-surface, html[data-theme="dark"] header.bg-surface, html[data-theme="dark"] nav.bg-surface { background-color: #1A1733 !important; }
html[data-theme="dark"] .bg-bg { background-color: #16142F !important; }
html[data-theme="dark"] .card { background: #1A1733 !important; border-color: rgba(255,255,255,.10) !important; }
html[data-theme="dark"] .card-accent { background: #221D4D !important; border-color: rgba(140,124,255,.3) !important; }
html[data-theme="dark"] .text-ink, html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4 { color: #F3F1ED !important; }
html[data-theme="dark"] .text-ink-soft { color: #C9C5BE !important; }
html[data-theme="dark"] .text-ink-light, html[data-theme="dark"] .label { color: #9A948B !important; }
html[data-theme="dark"] .border-line { border-color: rgba(255,255,255,.10) !important; }
html[data-theme="dark"] .border-line-strong { border-color: rgba(255,255,255,.16) !important; }
html[data-theme="dark"] .divide-line > * { border-color: rgba(255,255,255,.08) !important; }
html[data-theme="dark"] .bg-primary-soft { background-color: #251F52 !important; }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: #16142F !important; color: #F3F1ED; border-color: rgba(255,255,255,.14) !important; }
html[data-theme="dark"] .grain { mix-blend-mode: screen; opacity: .05; }
html[data-theme="dark"] .mz-skel { background: linear-gradient(100deg, #221D4D 30%, #2A2459 50%, #221D4D 70%); background-size: 200% 100%; }
html[data-theme="dark"] #mz-splash { background: radial-gradient(1200px 600px at 50% -10%, #251F52, #141228 60%); }
html[data-theme="dark"] #mz-splash .panel, html[data-theme="dark"] .mz-role, html[data-theme="dark"] #mz-tour-pop { background: #1A1733; border-color: rgba(255,255,255,.12); color: #F3F1ED; }
html[data-theme="dark"] .mz-trust span { background: #1A1733; border-color: rgba(255,255,255,.12); color: #C9C5BE; }
html[data-theme="dark"] footer { border-color: rgba(255,255,255,.1) !important; }

/* ---- Mobile overscroll containment --------------------------------------- */
/* Scrolling inside full-screen overlays must not chain to (or rubber-band) the
   page behind them; the page itself is locked via overflow-x:hidden +
   overscroll-behavior:none on html/body (see index.html). */
#mz-leitstand, .mz-ls-body,
#modal, #modal > div,
#chat-messages {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ---- Mobile header fit (no horizontal overflow) -------------------------- */
@media (max-width: 639px) {
  /* Operator 'Hausverwaltung' button collapses to icon-only so the header row
     (logo mark + operator btn + persona toggle + theme + avatar) fits ≤ 390px. */
  #mz-ls-btn .ls-label { display: none; }
  #mz-ls-btn { padding-left: 9px; padding-right: 9px; }
}