/* ===== App Design Tokens (consolidated) ===== */
:root {
  /* Brand (emerald) */
  --brand:       #10b981;   /* emerald-500 */
  --brand-600:   #059669;   /* emerald-600 */

  /* Background & Gradient */
  --bg:          #1e293b;   /* slate-800 – fallback */
  --bg-2:        #0f172a;   /* slate-900 */
  --bg-gradient:
    radial-gradient(1000px at 80% -10%, rgba(16,185,129,0.40), transparent 60%),
    radial-gradient(800px at -10% 0%, rgba(96,28,191,0.45), transparent 70%),
    linear-gradient(90deg, var(--bg) 0%, var(--bg-2) 100%);

  /* Surfaces, borders, text */
  --surface:           rgba(30,41,59,0.78);
  --surface-strong:    #1e293b;
  --surface-raise:     rgba(17,24,39,0.55);   /* dunklere Tiefe */
  --border:            #334155;
  --border-strong:     #3b4a62;
  --edge-highlight:    rgba(255,255,255,0.06);
  --elev-shadow:       0 12px 32px rgba(0,0,0,.35), 0 2px 0 rgba(255,255,255,.04) inset;
  --text:           #f1f5f9;               /* slate-100 */
  --muted:          #94a3b8;               /* slate-400 */
  --danger:         #ef4444;
}

/* ===== Base ===== */
html, body { height: 100%; }
html{
  background-image: var(--bg-gradient);
  background-color: var(--bg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
body{
  background: transparent;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font: 400 16px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Compact header typography */
header { line-height: 1.2; }
#client-nav, header .nav-link-box, header .nav-link-gold { font-size: .95rem; }

/* ===== Generic Components (compatible with existing pages) ===== */
.container{ max-width: 72rem; margin-inline:auto; padding-inline:1rem; }

/* Card */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;            /* consistent rounded-2xl look */
  transition: transform .15s ease, filter .15s ease, border-color .15s ease;
  backdrop-filter: blur(6px);
}
.card:hover { transform: translateY(-1px); border-color: var(--border-strong); }
.card-body{ padding: 1.25rem; }
.card-title{ font-weight:600; margin:0 0 .5rem; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem 1rem; border-radius:.75rem;
  border:1px solid var(--border);
  font-weight:500; text-decoration:none; cursor:pointer;
  background: transparent; color: var(--text);
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.btn-primary{
  background: var(--brand); border-color: var(--brand); color:#081016;
}
.btn-primary:hover{ background: var(--brand-600); border-color: var(--brand-600); }
.btn-outline:hover{ border-color: var(--brand); }
.btn-ghost{ background: transparent; }

/* Section titles */
.section-title{
  font-size: clamp(1.25rem, 1vw + 1rem, 1.5rem);
  font-weight: 600;
  margin-bottom:.75rem;
}

/* Badges/Tags */
.badge{
  display:inline-block; padding:.15rem .5rem; border-radius:.5rem;
  background:#0b3b2f; color:#b7f5df; border:1px solid #145a4b; font-size:.75rem;
}

/* Tables */
.table{ width:100%; border-collapse: collapse; font-size:.9rem; }
.table th, .table td{ padding:.5rem .75rem; border-bottom:1px solid var(--border); }
.table thead th{ background: var(--surface-strong); color:#cbd5e1; text-align:left; }

/* Forms */
.input, .select, .textarea{
  width:100%; background:#0b1220; color:var(--text);
  border:1px solid var(--border); border-radius:.65rem; padding:.5rem .75rem;
}
.textarea{ min-height: 7rem; resize: vertical; }
.input:focus, .select:focus, .textarea:focus{
  outline: 2px solid color-mix(in srgb, var(--brand) 60%, transparent);
  outline-offset: 2px; border-color: var(--brand);
}

/* Links */
a{ color: inherit; }
a:hover{ color: var(--brand); }

/* Accessibility */
.visually-hidden{
  position:absolute!important; width:1px!important; height:1px!important;
  padding:0!important; margin:-1px!important; overflow:hidden!important;
  clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important;
}
:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--brand) 70%, transparent);
  outline-offset: 2px;
}

/* Print */
@media print{
  body{ background:#fff; color:#111; }
  .bg-slate-900,.bg-slate-900\/60,.border-slate-800{ background:#fff !important; border-color:#ddd !important; }
  .card{ background:#fff !important; border-color:#ddd !important; }
  a{ color:#0366d6; }
}

/* ===== Header & Client-Nav refinements ===== */
.nav-link-gold{
  color:#fbbf24; font-weight:600; border:1px solid #fbbf24;
  padding:.25rem .75rem; border-radius:.5rem;
  transition: background-color .15s ease, color .15s ease;
}
.nav-link-gold:hover{ background-color:#fbbf24; color:#111; }

.nav-link-box{
  padding:.25rem .75rem; border-radius:.5rem; color:var(--text);
  transition: background-color .15s ease, color .15s ease;
}
.nav-link-box:hover{ background-color:var(--surface-strong); color: var(--brand); }

.nav-link-active{
  background-color:var(--surface-strong);
  color: var(--brand); border:1px solid var(--brand);
  border-radius:.5rem; padding:.25rem .75rem;
}

#client-nav { font-size:.95rem; gap:.5rem; }
#client-nav .nav-link-box, #client-nav .nav-link-gold { padding:.35rem .65rem; }
#client-nav details{ position:relative; display:inline-block; }
#client-nav summary{ list-style:none; cursor:pointer; }
#client-nav summary::-webkit-details-marker{ display:none; }
#client-nav .menu-list{
  position:absolute; top:calc(100% + .35rem); left:0; min-width:14rem; z-index:50;
  display:none; flex-direction:column; padding:.5rem;
  background:var(--surface); border:1px solid var(--border); border-radius:.5rem;
  box-shadow:0 16px 36px rgba(0,0,0,.35);
}
#client-nav details[open] > .menu-list{ display:flex; }
#client-nav .menu-pill{
  display:block; padding:.45rem .6rem; color:var(--text);
  border-radius:.35rem; text-decoration:none; white-space:nowrap;
}
#client-nav .menu-pill + .menu-pill{ margin-top:.25rem; }
#client-nav .menu-pill:hover{ background:var(--surface-strong); color:var(--brand); }

header .breadcrumb, header p, #userEmail{ font-size:.9rem; color:var(--muted); }
header{ overflow:visible; }
.hero-bg, .header{ margin-bottom:.25rem; }

/* ===== VS Code Tabs (Markdown/Docs) ===== */
.vsc-tabs{display:flex;align-items:end;gap:2px;border-bottom:1px solid rgba(148,163,184,.2);overflow-x:auto;scrollbar-width:thin}
.vsc-tab{position:relative;padding:.45rem .75rem;font-size:.75rem;line-height:1;background:rgba(15,23,42,.55);color:rgba(226,232,240,.85);border:1px solid transparent;border-bottom:0;border-top-left-radius:.5rem;border-top-right-radius:.5rem;user-select:none;white-space:nowrap}
.vsc-tab:hover{background:rgba(30,41,59,.65)}
.vsc-tab.is-active{background:rgba(2,6,23,.85);color:#e2e8f0;border-color:rgba(148,163,184,.25)}
.vsc-tab.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--brand);border-bottom-left-radius:2px;border-bottom-right-radius:2px}
#wiz-doc{background:rgba(2,6,23,.55);border:1px solid rgba(148,163,184,.15);border-radius:.75rem;padding:1rem}
#wiz-doc pre{background:rgba(2,6,23,.8);border:1px solid rgba(148,163,184,.15);padding:.75rem;border-radius:.5rem;overflow:auto}
#wiz-doc code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}

/* ===== Data-Model Cards ===== */
.dm-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
}
.dm-tabs{ display:flex; gap:.75rem; border-bottom:1px solid var(--border); }
.dm-tab{
  padding:.5rem .85rem; border-radius:.75rem .75rem 0 0;
  color: var(--muted); background: transparent; cursor:pointer;
  border:1px solid transparent; transform: translateY(1px);
}
.dm-tab:hover{ color: var(--text); background: color-mix(in srgb, var(--surface-strong) 70%, transparent); }
.dm-tab.is-active{ color: var(--text); background: var(--surface-strong); border-color: var(--border); box-shadow: 0 6px 18px rgba(0,0,0,.25); }
#dm-graph{ height: 540px; border-radius: 1rem; overflow: hidden; }
.dm-legend{ display:flex; gap:.75rem; align-items:center; color:var(--muted); }
.dm-chip{
  display:inline-flex; align-items:center; gap:.4rem; padding:.25rem .5rem; border-radius:999px;
  background: color-mix(in srgb, var(--brand) 18%, transparent);
  color: color-mix(in srgb, var(--brand) 60%, white 0%);
  border:1px solid color-mix(in srgb, var(--brand) 50%, transparent);
  font-size:.75rem;
}
.dm-code{
  background: color-mix(in srgb, #020617 65%, transparent);
  border:1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: .75rem; padding: 1rem 1.25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  line-height: 1.35; white-space: pre; overflow:auto;
}
.dm-table{ width:100%; border-collapse:collapse; font-size:.95rem; }
.dm-table th,.dm-table td{ padding:.55rem .7rem; border-bottom:1px solid var(--border); }
.dm-table th{ text-align:left; color:var(--muted); }
.dm-table .ok{ color: color-mix(in srgb, var(--brand) 70%, white 0%); }
.dm-table .miss{ color:#fca5a5; }

/* ===== Brand-ready PV Components (used by the desk page) ===== */
.pv-bg{ /* for <body> if needed in other pages */
  background:
    radial-gradient(1000px at 80% -10%, rgba(16,185,129,.40), transparent 60%),
    radial-gradient(800px at -10% 0%, rgba(96,28,191,.45), transparent 70%),
    linear-gradient(90deg, var(--bg) 0%, var(--bg-2) 100%);
  background-attachment: fixed;
  color: var(--text);
}

/* Sidebar */
.pv-side{ background: var(--surface-strong); border-right:1px solid var(--border); }
.pv-nav{
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .6rem; border-radius:.6rem;
  color:var(--text); text-decoration:none;
  border:1px solid transparent; transition: background-color .15s ease, color .15s ease, border-color .15s;
}
.pv-nav:hover{ background: rgba(255,255,255,.05); color: var(--brand); }
.pv-nav.is-active{ background: rgba(255,255,255,.06); border-color: var(--brand); color: var(--brand); }
.pv-ico{
  width:1.25rem; height:1.25rem; display:grid; place-items:center;
  border-radius:5px; font-size:.95rem;
  background: color-mix(in srgb, var(--brand) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--brand) 42%, transparent);
}

/* Header bar */
.pv-top{ background: var(--surface-strong); border-bottom:1px solid var(--border); backdrop-filter: blur(6px); }
.pv-muted{ color: var(--muted); }

/* PV buttons mapped to generic look */
.pv-btn-primary{ composes: btn btn-primary; }  /* if CSS Modules not used, duplicate styles: */
.pv-btn-primary{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.45rem .85rem; border-radius:.6rem;
  background: var(--brand); border:1px solid var(--brand); color:#081016; font-weight:600; cursor:pointer;
}
.pv-btn-primary:hover{ background: var(--brand-600); border-color: var(--brand-600); }

.pv-btn-ghost{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.45rem .85rem; border-radius:.6rem;
  border:1px solid var(--border); background: transparent; color: var(--text); cursor:pointer;
}
.pv-btn-ghost:hover{ border-color: var(--brand); color: var(--brand); }

/* KPI square helper (if du mal ohne Tailwind aspect-square arbeitest) */
.kpi-card{
  aspect-ratio: 1 / 1; display:grid; place-items:center;
  background: var(--surface); border:1px solid var(--border); border-radius: 1rem;
}
/* Basis-Karten */
.card, .pv-card{
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00)) , var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  box-shadow: var(--elev-shadow);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}

/* feine Lichtkante oben */
.card::before, .pv-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--edge-highlight), transparent 35%);
  pointer-events:none;
  mix-blend-mode: screen;
}

/* stärkerer Hover ohne „Springen“ */
.card:hover, .pv-card:hover{
  transform: translateY(-1px);
  border-color: var(--border-strong);
  box-shadow: 0 16px 38px rgba(0,0,0,.42), 0 2px 0 rgba(255,255,255,.05) inset;
}

/* Variante für KPI-Karten (mehr Kontrast in großen Flächen) */
.kpi .card, .kpi.pv-card, .kpi-card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00)), var(--surface-raise);
  border-color: var(--border-strong);
}
.rail .card{ background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)), var(--surface); }
.topbar{ box-shadow: 0 6px 18px rgba(0,0,0,.28); }
/* Sidebar-Links: keine grüne Umrandung mehr */
.pv-nav{
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .6rem; border-radius:.6rem;
  color:var(--text); text-decoration:none;
  border: 1px solid transparent;                 /* keine sichtbare Border */
  background: transparent;
}
.pv-nav:hover{
  background: rgba(255,255,255,.05);
  color: var(--brand);                            /* nur Text färbt sich, kein Rahmen */
}
.pv-nav.is-active{
  background: rgba(255,255,255,.06);
  border-color: transparent;                      /* aktiv ohne grünen Rahmen */
  color: var(--text);                             /* bei Wunsch: var(--brand) -> in Textfarbe ändern */
}

/* Fokus-Ring in der Sidebar neutral (kein Grün) */
.pv-side .pv-nav:focus-visible{
  outline: 2px solid rgba(255,255,255,.12);
  outline-offset: 2px;
}

/* Icons unverändert, aber ohne „glow“-Rand */
.pv-ico{
  width:1.25rem; height:1.25rem; display:grid; place-items:center;
  border-radius:5px; font-size:.95rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
/* Sidebar-Grundlayout */
.pv-side{
  position: sticky; top: 0; height: 100vh;
  background: var(--surface-strong);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;  /* Kopf + Liste */
}

/* fixierter Kopf mit Toggle rechts */
.pv-sidehead{
  position: sticky; top: 0; z-index: 2;
  display:flex; align-items:center; justify-content:space-between;
  padding: .5rem .5rem;
  background: var(--surface-strong);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.pv-sidehead-label{ font-size:.7rem; letter-spacing:.12em; color:var(--muted); text-transform:uppercase; }

/* Toggle-Button – immer sichtbar */
.pv-toggle{
  display:grid; place-items:center; width:36px; height:36px;
  border:1px solid var(--border); border-radius:8px;
  background: transparent; color: var(--text); cursor: pointer;
}
.pv-toggle:hover{ border-color: var(--brand); color: var(--brand); }

/* scrollbare Linkliste */
.pv-sidenav-list{
  flex: 1 1 auto; overflow-y: auto; padding: .5rem;
  display:flex; flex-direction:column; gap: .35rem;
}

/* Links – ohne grüne Umrandung */
.pv-nav{
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .6rem; border-radius:.6rem;
  color:var(--text); text-decoration:none; border:1px solid transparent;
}
.pv-nav:hover{ background: rgba(255,255,255,.05); color:var(--brand); }
.pv-nav.is-active{ background: rgba(255,255,255,.06); color:var(--text); border-color: transparent; }

.pv-ico{
  width:1.25rem; height:1.25rem; display:grid; place-items:center;
  border-radius:5px; font-size:.95rem;
  background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
}

/* Einklapp-Zustand – nur Texte ausblenden, Icons bleiben */
body.nav-collapsed .pv-text,
body.nav-collapsed .pv-sidehead-label{ display:none; }
body.nav-collapsed .pv-sidenav-list{ padding: .5rem .25rem; }
body.nav-collapsed .pv-nav{ justify-content:center; padding:.55rem 0; }
/* Grundlayout für alle Private-Seiten */
body.desk{min-height:100vh;display:grid;grid-template-columns:260px 1fr;gap:0;}
body.nav-collapsed{grid-template-columns:68px 1fr;}
/* Sidebar als erste Spalte */
.pv-side{grid-column:1;position:sticky;top:0;height:100vh;overflow:auto;}
/* Hauptbereich = rechte Spalte (wenn du mal eine Seite ohne Wrapper hast) */
.pv-main{grid-column:2;}
/* 2-Spalten-Grundlayout für alle Private-Seiten */
body.desk{
  min-height:100vh;
  display:grid;
  grid-template-columns:260px 1fr; /* Sidebar | Content */
  gap:0;
}

/* Collapsed Sidebar */
body.nav-collapsed{ grid-template-columns:68px 1fr; }

/* Sidebar: linke Spalte, volle Höhe */
.pv-side{
  grid-column:1;
  position:sticky; top:0;
  height:100vh; overflow:auto;
}

/* Rechte Spalte: Wrapper für Topbar+Content+Footer */
.pv-main{ grid-column:2; min-height:100vh; display:grid; grid-template-rows:auto 1fr auto; }

/* Optional: Falls Tailwind/andere Styles dazwischenfunken */
body.desk > .pv-side{ grid-column:1 !important; }
body.desk > .pv-main{ grid-column:2 !important; }
/* ===== Modal (global nutzbar) ===== */
.pv-modal{position:fixed; inset:0; display:grid; place-items:center;
  background:rgba(2,6,23,.6); backdrop-filter:blur(4px); z-index:1000}
.pv-modal[aria-hidden="true"]{display:none}
.pv-dialog{width:min(720px, 92vw)}
.pv-modal .pv-card{padding:1rem}
.pv-modal .pv-modal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem}
.pv-modal .pv-close{display:inline-flex; align-items:center; justify-content:center; 
  width:36px;height:36px;border:1px solid var(--border);border-radius:8px; background:transparent}
body.modal-open{overflow:hidden}
/* Drop-Layout */
.ed-slot{border:1px dashed rgba(148,163,184,.35); border-radius:.75rem; height:3.5rem; display:grid; place-items:center; color:#94a3b8}
.ed-slot:hover{background:rgba(148,163,184,.05); cursor:pointer}
.ed-ghost{opacity:.6; transform:scale(.98)}
.ed-trash{position:absolute; right:1rem; bottom:1rem; width:10rem; height:4rem; border:1px dashed #ef4444; color:#ef4444; display:grid; place-items:center; border-radius:.75rem}
.ed-trash.drop{background:rgba(239,68,68,.1)}
/* XL-Spalten ohne Tailwind-Build */
@media (min-width:1280px){
  .xl-span-1{grid-column:span 1 / span 1}
  .xl-span-2{grid-column:span 2 / span 2}
  .xl-span-3{grid-column:span 3 / span 3}
  .xl-span-4{grid-column:span 4 / span 4}
  .xl-span-5{grid-column:span 5 / span 5}
  .xl-span-6{grid-column:span 6 / span 6}
  .xl-span-7{grid-column:span 7 / span 7}
  .xl-span-8{grid-column:span 8 / span 8}
  .xl-span-9{grid-column:span 9 / span 9}
  .xl-span-10{grid-column:span 10 / span 10}
  .xl-span-11{grid-column:span 11 / span 11}
  .xl-span-12{grid-column:span 12 / span 12}
}
/* WYS-Editor Modal: Inputs klar lesbar */
.ed-modal .pv-input,
.ed-modal .select,
.ed-modal .textarea { color:#e5e7eb; }          /* Text */
.ed-modal .pv-input::placeholder,
.ed-modal .textarea::placeholder { color:#94a3b8; opacity:1; }  /* Placeholder */
.ed-modal .pv-input, 
.ed-modal .select, 
.ed-modal .textarea { background-color:#0b1220; border-color:#1f2a44; }
/* Inputs auf dunklem Hintergrund gut lesbar machen */
.pv-input, .select, .textarea { color: #576d80; }
.pv-input::placeholder, .textarea::placeholder { color: #576d80 !important; opacity: 1; }
/* Title/placeholder in Wizard besser lesbar */
.pv-card input.pv-input::placeholder { color: rgba(226,232,240,0.85); } /* slate-200-ish */
/* Editor-Leiste klebt unter der Seiten-Topbar, ohne zu überlagern */
.pv-editor-bar{position:sticky;top:56px;z-index:30;display:flex;gap:.5rem;padding:.5rem 1rem;background:linear-gradient(180deg,rgba(2,6,23,.85),rgba(2,6,23,.45));backdrop-filter:blur(6px);border-bottom:1px solid rgba(30,41,59,.5)}
/* kleine Utility, damit Titel-Feld im Wizard gut lesbar ist */
.pv-input-title{color:#576d80!important}
/* Editor-WYS: verhindert "Bubbles"/Überlagerungen und erhöht Lesbarkeit */
.pv-card { overflow: visible; }
#user-layout [data-ed-ctrl] { pointer-events: auto; }
#user-layout .pv-input, 
#user-layout .select, 
#user-layout .textarea { color: #e5e7eb; } /* helle Schrift im Dialog */
.ascii-avatar {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  line-height: 1;                 /* dichteres Raster */
  letter-spacing: 0;              /* keine Lücken */
  white-space: pre;               /* wichtige Beibehaltung */
}

.ascii-avatar {
  font-family: 'Courier New', Courier, monospace;
  line-height: 1;
  letter-spacing: 0;
  white-space: pre;
  font-size: 10px; /* Passt die Schriftgröße an, je nach Bedarf */
}

.avatar-wrapper {
  border: 2px solid #666;
  padding: 10px;
  border-radius: 5px;
  background-color: #222; /* Dunkler Hintergrund */
  max-width: 200px;
  text-align: center;
  margin: 0 auto;
}

.avatar-wrapper::before {
  content: "User ID: 37e07f82"; /* Beispiel ID, dynamisch anpassbar */
  display: block;
  color: #bbb;
  font-size: 12px;
  margin-bottom: 5px;
}
/* global einmalig */
.ascii-avatar{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  white-space: pre;
  line-height: 1;         /* dicht */
  letter-spacing: 0;
  font-size: 9px;         /* kleiner = mehr „Auflösung“ */
}
#asciiPreview{
  max-height: 60vh;       /* oder was dir gefällt */
  overflow: auto;
}