/* Gemeinsame Gestaltung für Dashboard und alle Apps.
   Apps binden diese Datei ein: <link rel="stylesheet" href="/shared/portal.css"> */

:root {
  --p-bg: #f5f4f0;
  --p-surface: #ffffff;
  --p-surface-2: #faf9f6;
  --p-text: #1c1c1e;
  --p-muted: #6a6a70;
  --p-border: #e3e1da;
  --p-accent: #2f5bea;
  --p-accent-text: #ffffff;
  --p-ok: #12805c;
  --p-warn: #a15c00;
  --p-danger: #c62f2f;
  --p-shadow: 0 1px 2px rgba(20, 20, 30, .05), 0 4px 16px rgba(20, 20, 30, .05);
  --p-radius: 14px;
  --p-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --p-bg: #131316;
    --p-surface: #1c1c21;
    --p-surface-2: #222228;
    --p-text: #f1f1f3;
    --p-muted: #9b9ba4;
    --p-border: #2e2e36;
    --p-accent: #7c98ff;
    --p-accent-text: #0d1020;
    --p-ok: #3ccf95;
    --p-warn: #f0b04a;
    --p-danger: #ff7272;
    --p-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--p-bg);
  color: var(--p-text);
  font-family: var(--p-font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--p-accent); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: 1.6rem; letter-spacing: -.01em; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }

.portal-muted { color: var(--p-muted); }
.portal-small { font-size: .85rem; }

/* Leiste oben in Apps (wird von Portal.init({ bar: true }) eingefügt) */
.portal-bar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--p-surface) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--p-border);
}
.portal-bar__back {
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none; color: var(--p-text); font-weight: 500;
  padding: 6px 10px; border-radius: 9px;
}
.portal-bar__back:hover { background: var(--p-surface-2); }
.portal-bar__title { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-bar__user { color: var(--p-muted); font-size: .85rem; white-space: nowrap; }

/* Bausteine */
.portal-card {
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  box-shadow: var(--p-shadow);
  padding: 20px;
}

.portal-btn, button.portal-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600;
  padding: 9px 16px; border-radius: 10px;
  border: 1px solid transparent;
  background: var(--p-accent); color: var(--p-accent-text);
  cursor: pointer; text-decoration: none;
  transition: filter .15s, transform .05s;
}
.portal-btn:hover { filter: brightness(1.07); }
.portal-btn:active { transform: translateY(1px); }
.portal-btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.portal-btn.portal-btn--ghost { background: transparent; color: var(--p-text); border-color: var(--p-border); }
.portal-btn.portal-btn--ghost:hover { background: var(--p-surface-2); filter: none; }
.portal-btn.portal-btn--danger { background: transparent; color: var(--p-danger); border-color: color-mix(in srgb, var(--p-danger) 40%, transparent); }

.portal-input, .portal-select, textarea.portal-input {
  width: 100%;
  font: inherit; color: var(--p-text);
  background: var(--p-surface-2);
  border: 1px solid var(--p-border);
  border-radius: 10px;
  padding: 9px 12px;
}
.portal-input:focus, .portal-select:focus { outline: 2px solid color-mix(in srgb, var(--p-accent) 45%, transparent); outline-offset: 1px; border-color: var(--p-accent); }
.portal-label { display: block; font-weight: 600; font-size: .85rem; margin: 0 0 6px; }
.portal-field { margin-bottom: 14px; }

.portal-badge {
  display: inline-block; font-size: .75rem; font-weight: 600;
  padding: 2px 9px; border-radius: 999px;
  background: var(--p-surface-2); color: var(--p-muted);
  border: 1px solid var(--p-border);
}
.portal-badge--ok { color: var(--p-ok); border-color: color-mix(in srgb, var(--p-ok) 35%, transparent); background: color-mix(in srgb, var(--p-ok) 10%, transparent); }
.portal-badge--warn { color: var(--p-warn); border-color: color-mix(in srgb, var(--p-warn) 35%, transparent); background: color-mix(in srgb, var(--p-warn) 10%, transparent); }
.portal-badge--danger { color: var(--p-danger); border-color: color-mix(in srgb, var(--p-danger) 35%, transparent); background: color-mix(in srgb, var(--p-danger) 10%, transparent); }

.portal-center { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.portal-message { max-width: 420px; text-align: center; }
.portal-message p { color: var(--p-muted); margin-bottom: 20px; }

/* Hinweis-Meldungen */
.portal-toasts { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 1000; max-width: calc(100vw - 32px); }
.portal-toast {
  background: var(--p-text); color: var(--p-bg);
  padding: 10px 14px; border-radius: 10px; box-shadow: var(--p-shadow);
  font-weight: 500; animation: portal-in .2s ease-out;
}
.portal-toast--error { background: var(--p-danger); color: #fff; }
@keyframes portal-in { from { opacity: 0; transform: translateY(6px); } }