/**
 * Gemeinsames App-Theme (Sora + Pressfloor-Look).
 * Wird von auth.js auf allen geschützten Seiten geladen.
 */
:root {
  --app-ink: #12202c;
  --app-text: #1a2b38;
  --app-muted: #5b6f7e;
  --app-line: rgba(18, 32, 44, 0.12);
  --app-panel: #ffffff;
  --app-accent: #0f766e;
  --app-accent-soft: #ccfbf1;
  --app-accent-hover: #0d9488;
  --app-ok: #047857;
  --app-danger: #b91c1c;
  --app-warn: #b45309;
  --app-radius: 14px;
  --app-font: "Sora", "Segoe UI", sans-serif;
  --app-mono: "JetBrains Mono", ui-monospace, monospace;
  --app-shadow: 0 10px 30px rgba(18, 32, 44, 0.08);
  --app-shadow-soft: 0 4px 16px rgba(18, 32, 44, 0.05);

  /* Aliase für bestehende Seiten */
  --pe-ink: var(--app-ink);
  --pe-text: var(--app-text);
  --pe-muted: var(--app-muted);
  --pe-line: var(--app-line);
  --pe-panel: var(--app-panel);
  --pe-accent: var(--app-accent);
  --pe-accent-soft: var(--app-accent-soft);
  --pe-ok: var(--app-ok);
  --pe-danger: var(--app-danger);
  --pe-radius: var(--app-radius);
  --pe-font: var(--app-font);
  --pe-mono: var(--app-mono);
  --pe-shadow: var(--app-shadow);
}

html.app-theme body {
  font-family: var(--app-font) !important;
  color: var(--app-text) !important;
  margin: 0 !important;
  padding: 0 !important;
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(15, 118, 110, 0.16), transparent 55%),
    radial-gradient(900px 480px at 100% 0%, rgba(14, 116, 144, 0.14), transparent 50%),
    linear-gradient(165deg, #e8eef2 0%, #dfe8ee 42%, #edf3f6 100%) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
}

/* Nav kantenbündig (wie Produktion) — auf allen Seiten */
html.app-theme .topnav {
  border-radius: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}

html.app-theme .subnav {
  border-radius: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box;
}

html.app-theme .app-shell {
  padding: 16px 20px 28px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  position: relative;
  z-index: 1;
}

html.app-theme body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.32;
  background-image:
    linear-gradient(rgba(18, 32, 44, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 32, 44, 0.035) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
  z-index: 0;
}

/* Nav über Inhalt (Dropdowns müssen klickbar bleiben) */
html.app-theme .topnav,
html.app-theme .subnav {
  position: relative;
  z-index: 10000;
}

html.app-theme .container,
html.app-theme .wrap,
html.app-theme .page,
html.app-theme .pe-wrap,
html.app-theme main,
html.app-theme .start-wrap,
html.app-theme .card,
html.app-theme .grid,
html.app-theme .toolbar {
  position: relative;
  z-index: 1;
}

/* Typo-Helfer */
html.app-theme h1,
html.app-theme h2,
html.app-theme h3 {
  color: var(--app-ink);
  letter-spacing: -0.02em;
}

html.app-theme .muted,
html.app-theme .hint,
html.app-theme .sub {
  color: var(--app-muted) !important;
}

/* Karten / Panels */
html.app-theme .card {
  background: var(--app-panel) !important;
  border: 1px solid var(--app-line) !important;
  border-radius: var(--app-radius) !important;
  box-shadow: var(--app-shadow) !important;
}

html.app-theme .card-head h3,
html.app-theme .card-title {
  font-family: var(--app-font);
  letter-spacing: -0.02em;
}

/* Formulare */
html.app-theme input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.app-theme select,
html.app-theme textarea {
  font-family: var(--app-font);
  border-radius: 10px;
  border-color: var(--app-line);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

html.app-theme input:not([type="checkbox"]):not([type="radio"]):focus,
html.app-theme select:focus,
html.app-theme textarea:focus {
  outline: none;
  border-color: var(--app-accent) !important;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.18);
}

html.app-theme .time-input,
html.app-theme .time-simple,
html.app-theme input.b,
html.app-theme input.e,
html.app-theme input.pb,
html.app-theme input.pe,
html.app-theme .mono {
  font-family: var(--app-mono) !important;
  font-variant-numeric: tabular-nums;
}

html.app-theme .btn,
html.app-theme button.btn,
html.app-theme .toolbar-btns .btn,
html.app-theme .pe-btn {
  font-family: var(--app-font);
  border-radius: 10px;
  font-weight: 600;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}

html.app-theme .btn:not(.btn-primary):not(.btn-danger),
html.app-theme button.btn:not(.btn-primary):not(.btn-danger) {
  background: #fff;
  border: 1px solid var(--app-line);
  color: var(--app-text);
}

html.app-theme .btn:not(.btn-primary):not(.btn-danger):hover {
  border-color: rgba(15, 118, 110, 0.35);
  background: #f3f7f8;
}

html.app-theme .btn-danger,
html.app-theme button.btn-danger {
  background: #fff !important;
  border: 1px solid rgba(185, 28, 28, 0.35) !important;
  color: var(--app-danger) !important;
}

html.app-theme .pill {
  border-radius: 999px;
  font-family: var(--app-font);
}

html.app-theme .emp-drawer,
html.app-theme .emp-overlay + .emp-drawer {
  font-family: var(--app-font);
}

html.app-theme .emp-drawer-head h3 {
  letter-spacing: -0.02em;
  color: var(--app-ink);
}

html.app-theme .btn-primary,
html.app-theme .pe-btn-primary,
html.app-theme button.btn-primary {
  background: var(--app-accent) !important;
  border-color: var(--app-accent) !important;
  color: #fff !important;
}

html.app-theme .btn-primary:hover,
html.app-theme .pe-btn-primary:hover {
  background: var(--app-accent-hover) !important;
  border-color: var(--app-accent-hover) !important;
}

html.app-theme .btn:active,
html.app-theme .pe-btn:active {
  transform: translateY(1px);
}

/* Tabellen */
html.app-theme table.data,
html.app-theme .table,
html.app-theme .ma-table {
  font-family: var(--app-font);
}

html.app-theme table.data th,
html.app-theme .table th {
  color: var(--app-muted);
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* Page hero (optional) */
.app-hero {
  margin: 0 0 14px;
  animation: app-rise 0.45s ease-out;
}
.app-kicker {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--app-accent);
  font-weight: 600;
}
.app-title {
  margin: 2px 0 0;
  font-size: clamp(1.45rem, 2.6vw, 1.95rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--app-ink);
  line-height: 1.15;
}

@keyframes app-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .app-hero { animation: none; }
}