/* ============================================================================
   Unified Neleso UI for the DCS suite (Flask/Jinja/Vanilla).
   Technical calm: Geist, quiet neutral surfaces and Neleso Blue #0a72ef.
   Konvention: Komponenten-Klassen mit n--Präfix; Tokens als HSL-Triplets
   (shadcn-Stil), Nutzung via hsl(var(--token)).
   ========================================================================== */

/* ---- Fonts (liegen unter /neleso-branding/fonts/ auf allen Subdomains) ------ */
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/neleso-branding/fonts/geist-latin-wght-normal.woff2') format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/neleso-branding/fonts/geist-mono-latin-wght-normal.woff2') format('woff2')}
/* Compatibility aliases keep older portal-local declarations on the same files. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/neleso-branding/fonts/geist-latin-wght-normal.woff2') format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/neleso-branding/fonts/geist-latin-wght-normal.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/neleso-branding/fonts/geist-mono-latin-wght-normal.woff2') format('woff2')}

/* ---- Design-Tokens (shadcn Zinc, hell) ----------------------------------- */
:root{
  --background:0 0% 100%;
  --foreground:0 0% 9%;
  --card:0 0% 100%;
  --card-foreground:0 0% 9%;
  --popover:0 0% 100%;
  --popover-foreground:0 0% 9%;
  --primary:0 0% 9%;
  --primary-foreground:0 0% 98%;
  --secondary:0 0% 96%;
  --secondary-foreground:0 0% 9%;
  --muted:0 0% 98%;
  --muted-foreground:0 0% 40%;
  --accent:0 0% 96%;
  --accent-foreground:0 0% 9%;
  --destructive:0 72.2% 50.6%;
  --destructive-foreground:0 0% 98%;
  --border:0 0% 92%;
  --input:0 0% 86%;
  --ring:212 93% 49%;
  --radius:0.5rem;

  /* Neleso Blue #0a72ef — the only interactive brand accent */
  --brand:212 93% 49%;
  --brand-hover:212 100% 40%;
  --brand-foreground:0 0% 100%;
  --brand-muted:212 92% 96%;
  --brand-border:212 80% 87%;

  /* Semantische Status (entsättigt, shadcn-soft) */
  --success:142 60% 30%;
  --success-muted:142 50% 95%;
  --warning:32 90% 34%;
  --warning-muted:38 92% 94%;
  --destructive-muted:0 78% 96%;

  --sidebar:0 0% 98%;
  --font-sans:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --shadow-xs:0 1px 2px 0 rgb(0 0 0 / .035);
  --shadow-sm:0 1px 3px 0 rgb(0 0 0 / .055),0 1px 2px -1px rgb(0 0 0 / .045);
  --shadow-md:0 4px 6px -1px rgb(0 0 0 / .08),0 2px 4px -2px rgb(0 0 0 / .08);
  --shadow-lg:0 10px 15px -3px rgb(0 0 0 / .09),0 4px 6px -4px rgb(0 0 0 / .09);
}
.dark{
  --background:240 10% 3.9%;
  --foreground:0 0% 98%;
  --card:240 10% 3.9%;
  --card-foreground:0 0% 98%;
  --popover:240 10% 3.9%;
  --popover-foreground:0 0% 98%;
  --primary:0 0% 98%;
  --primary-foreground:240 5.9% 10%;
  --secondary:240 3.7% 15.9%;
  --secondary-foreground:0 0% 98%;
  --muted:240 3.7% 15.9%;
  --muted-foreground:240 5% 64.9%;
  --accent:240 3.7% 15.9%;
  --accent-foreground:0 0% 98%;
  --border:240 3.7% 15.9%;
  --input:240 3.7% 15.9%;
  --brand:212 93% 65%;
  --brand-muted:212 55% 16%;
  --brand-border:212 45% 30%;
  --sidebar:240 6% 7%;
}

/* ---- Base ----------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;border-color:hsl(var(--border))}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
body{margin:0;font-family:var(--font-sans);font-size:.875rem;line-height:1.5;
  background:hsl(var(--background));color:hsl(var(--foreground));
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.025em;line-height:1.2}
h1{font-size:1.5rem}h2{font-size:1.125rem}h3{font-size:1rem}h4{font-size:.875rem}
p{margin:0}
a{color:hsl(var(--brand));text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
code,pre,.n-mono{font-family:var(--font-mono);font-size:.8125rem}
code{background:hsl(var(--muted));padding:.125rem .375rem;border-radius:calc(var(--radius) - 4px)}
pre{background:hsl(var(--muted));padding: .75rem 1rem;border-radius:var(--radius);overflow-x:auto}
pre code{background:transparent;padding:0}
:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px;border-radius:calc(var(--radius) - 4px)}
::selection{background:hsl(var(--brand) / .18)}
svg{flex-shrink:0}

/* Dezente Scrollbars */
*{scrollbar-width:thin;scrollbar-color:hsl(var(--border)) transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-thumb{background:hsl(var(--border));border-radius:4px}

/* ---- App-Shell: Topbar + Sidebar + Main ----------------------------------- */
.n-topbar{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:1rem;
  height:3.5rem;padding:0 1.25rem;background:hsl(var(--background) / .85);
  backdrop-filter:blur(8px);border-bottom:1px solid hsl(var(--border))}
.n-topbar .n-brand{display:flex;align-items:center;gap:.625rem;font-weight:700;
  font-size:1rem;letter-spacing:-.02em;color:hsl(var(--foreground))}
.n-topbar .n-brand:hover{text-decoration:none}
.n-topbar .n-brand img,.n-topbar .n-brand svg{height:1.5rem;width:auto}
.n-topbar .n-brand img{height:1.25rem}
.n-product-name{padding-left:.625rem;border-left:1px solid hsl(var(--border));
  color:hsl(var(--muted-foreground));font-size:.8125rem;font-weight:500;letter-spacing:0}
.n-topbar-spacer{flex:1}

.n-shell{display:flex;min-height:calc(100vh - 3.5rem)}
.n-sidebar{width:15rem;flex-shrink:0;background:hsl(var(--sidebar));
  border-right:1px solid hsl(var(--border));padding: .75rem;
  display:flex;flex-direction:column;gap:.25rem}
.n-sidebar-group{margin-top:1rem}
.n-sidebar-group:first-child{margin-top:.25rem}
.n-sidebar-group-label{padding:.375rem .625rem;font-size:.6875rem;font-weight:500;
  color:hsl(var(--muted-foreground));letter-spacing:.02em}
.n-sidebar-item{display:flex;align-items:center;gap:.625rem;padding:.5rem .625rem;
  border-radius:calc(var(--radius) - 2px);font-size:.875rem;font-weight:400;
  color:hsl(var(--foreground));cursor:pointer;transition:background .12s}
.n-sidebar-item:hover{background:hsl(var(--accent));text-decoration:none;color:hsl(var(--foreground))}
/* Design invariant: active navigation uses surface, type and icon only.
   Never add a coloured edge rail, bracket, inset stroke or pseudo-element. */
.n-sidebar-item.active{background:hsl(var(--brand-muted));color:hsl(var(--brand));font-weight:500}
.n-sidebar-item.active svg{color:hsl(var(--brand))}
.n-sidebar-item svg{width:1rem;height:1rem;color:hsl(var(--muted-foreground))}
.n-main{flex:1;min-width:0;padding:1.5rem 2rem;max-width:1400px}
.n-btn.n-burger{display:none}
@media(max-width:860px){
  .n-btn.n-burger{display:inline-flex}
  .n-sidebar{position:fixed;left:0;top:3.5rem;bottom:0;z-index:90;transform:translateX(-100%);transition:transform .18s}
  .n-sidebar.open{transform:none;box-shadow:var(--shadow-lg)}
  .n-main{padding:1rem}
}

/* ---- Page-Header ----------------------------------------------------------- */
.n-page-header{margin-bottom:1.5rem}
.n-page-header h1{font-size:1.5rem;font-weight:700}
.n-page-desc{margin-top:.25rem;color:hsl(var(--muted-foreground));font-size:.875rem}

/* ---- Buttons ---------------------------------------------------------------
   Höhe 2.25rem, radius-md, shadow-xs — exakt shadcn.                          */
.n-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  height:2.25rem;padding:0 1rem;border-radius:calc(var(--radius) - 2px);
  font-family:var(--font-sans);font-size:.875rem;font-weight:500;line-height:1;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background .12s,border-color .12s,color .12s,box-shadow .12s;
  background:hsl(var(--primary));color:hsl(var(--primary-foreground));box-shadow:var(--shadow-xs)}
.n-btn:hover{background:hsl(var(--primary) / .9);text-decoration:none}
.n-btn:disabled{opacity:.5;pointer-events:none}
.n-btn svg{width:1rem;height:1rem}
.n-btn-brand{background:hsl(var(--brand));color:hsl(var(--brand-foreground))}
.n-btn-brand:hover{background:hsl(var(--brand-hover))}
.n-btn-secondary{background:hsl(var(--secondary));color:hsl(var(--secondary-foreground));box-shadow:none}
.n-btn-secondary:hover{background:hsl(var(--secondary) / .75)}
.n-btn-outline{background:hsl(var(--background));color:hsl(var(--foreground));border-color:hsl(var(--input))}
.n-btn-outline:hover{background:hsl(var(--accent))}
.n-btn-ghost{background:transparent;color:hsl(var(--foreground));box-shadow:none}
.n-btn-ghost:hover{background:hsl(var(--accent))}
.n-btn-destructive{background:hsl(var(--destructive));color:hsl(var(--destructive-foreground))}
.n-btn-destructive:hover{background:hsl(var(--destructive) / .9)}
.n-btn-link{background:transparent;color:hsl(var(--brand));box-shadow:none;padding:0;height:auto}
.n-btn-link:hover{text-decoration:underline}
.n-btn-sm{height:2rem;padding:0 .75rem;font-size:.8125rem;border-radius:calc(var(--radius) - 2px)}
.n-btn-lg{height:2.5rem;padding:0 1.5rem}
.n-btn-icon{width:2.25rem;padding:0}
.n-btn-icon.n-btn-sm{width:2rem}

/* ---- Card ------------------------------------------------------------------ */
.n-card{background:hsl(var(--card));color:hsl(var(--card-foreground));
  border:1px solid hsl(var(--border));border-radius:var(--radius);
  box-shadow:var(--shadow-xs)}
.n-card-header{display:flex;flex-direction:column;gap:.25rem;padding:1.25rem 1.25rem 0}
.n-card-header.row{flex-direction:row;align-items:center;justify-content:space-between}
.n-card-title{font-size:.875rem;font-weight:600;line-height:1.3}
.n-card-desc{font-size:.875rem;font-weight:400;color:hsl(var(--muted-foreground))}
.n-card-content{padding:1.25rem}
.n-card-footer{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem 1.25rem}

/* Stat-Kachel (Dashboard) */
.n-stat{display:flex;flex-direction:column;gap:.25rem;padding:1.25rem}
.n-stat-label{font-size:.875rem;font-weight:400;color:hsl(var(--muted-foreground))}
.n-stat-value{font-size:1.75rem;font-weight:600;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.n-stat-value.brand{color:hsl(var(--brand))}
.n-stat-delta{font-size:.75rem;color:hsl(var(--muted-foreground))}
.n-stat-delta.up{color:hsl(var(--success))}
.n-stat-delta.down{color:hsl(var(--destructive))}

/* ---- Neleso Charging Platform cockpit ---------------------------------------------------
   Dense operational hierarchy without decorative edge accents. */
.n-cockpit-page-head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:1.5rem;margin-bottom:1.25rem}
.n-cockpit-page-head h1{font-size:1.75rem;font-weight:700;margin-top:.2rem}
.n-cockpit-page-head p{max-width:760px;margin-top:.35rem;color:hsl(var(--muted-foreground));
  font-size:.9375rem}
.n-cockpit-eyebrow{font-family:var(--font-mono);font-size:.6875rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:hsl(var(--brand))}
.n-cockpit-state{display:grid;grid-template-columns:minmax(260px,1fr) minmax(520px,1.6fr);
  gap:1.25rem;padding:1.25rem}
.n-cockpit-state-copy{display:flex;flex-direction:column;justify-content:center}
.n-cockpit-state-title{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin:.3rem 0}
.n-cockpit-state-title>strong{font-size:1.125rem}
.n-cockpit-state-copy p{font-size:.8125rem;color:hsl(var(--muted-foreground))}
.n-cockpit-state-dot,.n-cockpit-flow-status{width:.5rem;height:.5rem;border-radius:9999px;
  background:hsl(var(--success));flex:0 0 auto}
.n-cockpit-state-dot.is-warning,.n-cockpit-flow-step.is-warning .n-cockpit-flow-status{
  background:hsl(var(--warning))}
.n-cockpit-flow-step:not(.is-ok):not(.is-warning) .n-cockpit-flow-status{
  background:hsl(var(--muted-foreground))}
.n-cockpit-state-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
.n-cockpit-state-metrics>div{display:flex;flex-direction:column;justify-content:center;
  min-height:4.5rem;padding:.65rem .75rem;border-radius:var(--radius);background:hsl(var(--muted))}
.n-cockpit-state-metrics strong{font-size:1.125rem;font-weight:600;font-variant-numeric:tabular-nums}
.n-cockpit-state-metrics span{font-size:.6875rem;line-height:1.35;color:hsl(var(--muted-foreground))}
.n-cockpit-section{margin-top:2rem}
.n-cockpit-section-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:1rem;margin-bottom:.75rem}
.n-cockpit-section-head h2{font-size:1rem;font-weight:600}
.n-cockpit-section-head p{margin-top:.2rem;color:hsl(var(--muted-foreground));font-size:.8125rem}
.n-cockpit-flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:hidden}
.n-cockpit-flow-step{display:grid;grid-template-columns:auto 1fr;align-content:center;
  column-gap:.5rem;row-gap:.2rem;min-height:6rem;padding:1rem;color:hsl(var(--foreground))}
.n-cockpit-flow-step+.n-cockpit-flow-step{border-left:1px solid hsl(var(--border))}
.n-cockpit-flow-step:hover{background:hsl(var(--muted));text-decoration:none}
.n-cockpit-flow-step strong{font-size:.8125rem;font-weight:600}
.n-cockpit-flow-step>span:last-child{grid-column:2;font-size:.6875rem;line-height:1.35;
  color:hsl(var(--muted-foreground))}
.n-cockpit-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.n-cockpit-product{display:flex;flex-direction:column;padding:1.25rem;min-height:18rem}
.n-cockpit-product-wide{grid-column:1/-1;min-height:0}
.n-cockpit-product-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.n-cockpit-product-head h3{font-size:1rem;font-weight:600}
.n-cockpit-product-desc{margin-top:.55rem;max-width:74ch;color:hsl(var(--muted-foreground));
  font-size:.8125rem;line-height:1.5}
.n-cockpit-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:.5rem;margin-top:1rem}
.n-cockpit-metric{display:flex;flex-direction:column;min-height:5.25rem;padding:.7rem .75rem;
  border-radius:var(--radius);background:hsl(var(--muted))}
.n-cockpit-metric-value{font-size:1.25rem;font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.n-cockpit-metric-label{margin-top:.15rem;font-size:.6875rem;line-height:1.3;
  color:hsl(var(--muted-foreground))}
.n-cockpit-metric-note{margin-top:auto;padding-top:.35rem;font-size:.625rem;
  color:hsl(var(--muted-foreground));font-family:var(--font-mono)}
.n-cockpit-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:auto;padding-top:1rem}
.n-cockpit-performance{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,.75fr);
  align-items:start;gap:1rem}
.n-cockpit-performance>.n-card{margin-top:0}
@media(max-width:1100px){
  .n-cockpit-state{grid-template-columns:1fr}
  .n-cockpit-flow{grid-template-columns:repeat(3,minmax(0,1fr))}
  .n-cockpit-flow-step:nth-child(4){border-left:0;border-top:1px solid hsl(var(--border))}
  .n-cockpit-flow-step:nth-child(5){border-top:1px solid hsl(var(--border))}
  .n-cockpit-performance{grid-template-columns:1fr}
}
@media(max-width:760px){
  .n-cockpit-page-head{flex-direction:column}
  .n-cockpit-state-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .n-cockpit-flow{grid-template-columns:1fr}
  .n-cockpit-flow-step+.n-cockpit-flow-step,.n-cockpit-flow-step:nth-child(4){
    border-left:0;border-top:1px solid hsl(var(--border))}
  .n-cockpit-products{grid-template-columns:1fr}
  .n-cockpit-product-wide{grid-column:auto}
  .n-cockpit-product{min-height:0}
}

/* ---- Formulare ------------------------------------------------------------- */
.n-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}
.n-input,.n-select,.n-textarea{width:100%;height:2.25rem;padding:0 .75rem;
  font-family:var(--font-sans);font-size:.875rem;color:hsl(var(--foreground));
  background:transparent;border:1px solid hsl(var(--input));
  border-radius:calc(var(--radius) - 2px);box-shadow:var(--shadow-xs);
  transition:border-color .12s,box-shadow .12s}
.n-textarea{height:auto;min-height:4.5rem;padding:.5rem .75rem;resize:vertical}
.n-input::placeholder,.n-textarea::placeholder{color:hsl(var(--muted-foreground))}
.n-input:focus,.n-select:focus,.n-textarea:focus{outline:none;
  border-color:hsl(var(--ring));box-shadow:0 0 0 3px hsl(var(--ring) / .25)}
.n-select{appearance:none;padding-right:2rem;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .625rem center}
.n-field{margin-bottom:1rem}
.n-hint{margin-top:.375rem;font-size:.8125rem;color:hsl(var(--muted-foreground))}

/* Switch */
.n-switch{position:relative;display:inline-block;width:2.25rem;height:1.25rem;flex-shrink:0}
.n-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.n-switch-track{position:absolute;inset:0;background:hsl(var(--input));
  border-radius:9999px;transition:background .15s}
.n-switch-track::after{content:'';position:absolute;top:2px;left:2px;width:1rem;height:1rem;
  background:#fff;border-radius:50%;box-shadow:var(--shadow-sm);transition:transform .15s}
.n-switch input:checked + .n-switch-track{background:hsl(var(--brand))}
.n-switch input:checked + .n-switch-track::after{transform:translateX(1rem)}

/* Checkbox */
.n-checkbox{width:1rem;height:1rem;accent-color:hsl(var(--brand));cursor:pointer}

/* ---- Badge ----------------------------------------------------------------- */
.n-badge{display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .625rem;
  border-radius:9999px;font-size:.75rem;font-weight:500;line-height:1.4;
  border:1px solid transparent;white-space:nowrap}
.n-badge-default{background:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.n-badge-brand{background:hsl(var(--brand));color:hsl(var(--brand-foreground))}
.n-badge-secondary{background:hsl(var(--secondary));color:hsl(var(--secondary-foreground))}
.n-badge-outline{background:transparent;color:hsl(var(--foreground));border-color:hsl(var(--border))}
.n-badge-brand-soft{background:hsl(var(--brand-muted));color:hsl(var(--brand));border-color:hsl(var(--brand-border))}
.n-badge-success{background:hsl(var(--success-muted));color:hsl(var(--success))}
.n-badge-warning{background:hsl(var(--warning-muted));color:hsl(var(--warning))}
.n-badge-destructive{background:hsl(var(--destructive-muted));color:hsl(var(--destructive))}
.n-dot{width:.375rem;height:.375rem;border-radius:50%;background:currentColor}

/* ---- Tabelle ---------------------------------------------------------------- */
.n-table-wrap{overflow-x:auto;border:1px solid hsl(var(--border));
  border-radius:var(--radius)}
.n-table{width:100%;border-collapse:collapse;font-size:.875rem}
.n-table th{padding:.625rem 1rem;text-align:left;font-weight:500;font-size:.8125rem;
  color:hsl(var(--muted-foreground));border-bottom:1px solid hsl(var(--border));
  background:hsl(var(--muted) / .5)}
.n-table td{padding:.75rem 1rem;border-bottom:1px solid hsl(var(--border));vertical-align:middle}
.n-table tbody tr:last-child td{border-bottom:none}
.n-table tbody tr{transition:background .1s}
.n-table tbody tr:hover{background:hsl(var(--muted) / .5)}
.n-table .num{text-align:right;font-variant-numeric:tabular-nums}

/* ---- Tabs (shadcn: Pill-Liste auf Muted) ------------------------------------ */
.n-tabs-list{display:inline-flex;gap:.25rem;padding:.25rem;background:hsl(var(--muted));
  border-radius:var(--radius);max-width:100%;overflow-x:auto}
.n-tab{padding:.3125rem .75rem;border:none;background:transparent;cursor:pointer;white-space:nowrap;
  border-radius:calc(var(--radius) - 2px);font-family:var(--font-sans);
  font-size:.875rem;font-weight:500;color:hsl(var(--muted-foreground));
  transition:background .12s,color .12s}
.n-tab.active{background:hsl(var(--background));color:hsl(var(--foreground));box-shadow:var(--shadow-xs)}
.n-tab-panel{display:none;padding-top:1rem}
.n-tab-panel.active{display:block}

/* ---- Alert ------------------------------------------------------------------ */
.n-alert{display:flex;gap:.75rem;padding: .875rem 1rem;border:1px solid hsl(var(--border));
  border-radius:var(--radius);background:hsl(var(--card));font-size:.875rem}
.n-alert svg{width:1rem;height:1rem;margin-top:.125rem}
.n-alert-title{font-weight:600;margin-bottom:.125rem}
.n-alert-desc{color:hsl(var(--muted-foreground));font-size:.8125rem}
.n-alert-brand{border-color:hsl(var(--brand-border));background:hsl(var(--brand-muted))}
.n-alert-brand svg,.n-alert-brand .n-alert-title{color:hsl(var(--brand))}
.n-alert-destructive{border-color:hsl(var(--destructive) / .4);background:hsl(var(--destructive-muted))}
.n-alert-destructive svg,.n-alert-destructive .n-alert-title{color:hsl(var(--destructive))}

/* ---- Separator, Skeleton, Avatar, Kbd, Progress ----------------------------- */
.n-separator{height:1px;background:hsl(var(--border));border:none;margin:1rem 0}
.n-separator-v{width:1px;align-self:stretch;background:hsl(var(--border))}
.n-skeleton{background:hsl(var(--muted));border-radius:calc(var(--radius) - 2px);
  animation:n-pulse 1.6s ease-in-out infinite}
@keyframes n-pulse{50%{opacity:.55}}
.n-avatar{display:inline-flex;align-items:center;justify-content:center;
  width:2rem;height:2rem;border-radius:50%;background:hsl(var(--brand-muted));
  color:hsl(var(--brand));font-size:.75rem;font-weight:600;overflow:hidden}
.n-avatar img{width:100%;height:100%;object-fit:cover}
.n-kbd{display:inline-block;padding:.125rem .375rem;font-family:var(--font-mono);
  font-size:.6875rem;border:1px solid hsl(var(--border));border-bottom-width:2px;
  border-radius:calc(var(--radius) - 4px);background:hsl(var(--muted))}
.n-progress{height:.5rem;background:hsl(var(--secondary));border-radius:9999px;overflow:hidden}
.n-progress > div{height:100%;background:hsl(var(--brand));border-radius:9999px;transition:width .3s}

/* ---- Dropdown ---------------------------------------------------------------- */
.n-dropdown{position:relative;display:inline-block}
.n-dropdown-menu{position:absolute;right:0;top:calc(100% + .375rem);min-width:11rem;
  background:hsl(var(--popover));border:1px solid hsl(var(--border));
  border-radius:var(--radius);box-shadow:var(--shadow-md);padding:.25rem;z-index:120;
  display:none}
.n-dropdown.open .n-dropdown-menu{display:block;animation:n-in .12s ease-out}
.n-dropdown-item{display:flex;align-items:center;gap:.5rem;width:100%;text-align:left;
  padding:.4375rem .625rem;border:none;background:transparent;cursor:pointer;
  border-radius:calc(var(--radius) - 4px);font-family:var(--font-sans);
  font-size:.875rem;color:hsl(var(--popover-foreground))}
.n-dropdown-item:hover{background:hsl(var(--accent));text-decoration:none}
.n-dropdown-item.destructive{color:hsl(var(--destructive))}
.n-dropdown-separator{height:1px;background:hsl(var(--border));margin:.25rem -.25rem}
.n-dropdown-label{padding:.375rem .625rem;font-size:.75rem;color:hsl(var(--muted-foreground))}
@keyframes n-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---- Dialog ------------------------------------------------------------------ */
.n-dialog-backdrop{position:fixed;inset:0;background:rgb(0 0 0 / .55);z-index:150;
  display:none;align-items:center;justify-content:center;padding:1rem}
.n-dialog-backdrop.open{display:flex;animation:n-fade .15s ease-out}
.n-dialog{width:100%;max-width:28rem;background:hsl(var(--background));
  border:1px solid hsl(var(--border));border-radius:calc(var(--radius) + 4px);
  box-shadow:var(--shadow-lg);padding:1.5rem;animation:n-in .15s ease-out}
.n-dialog-title{font-size:1.125rem;font-weight:600;letter-spacing:-.01em}
.n-dialog-desc{margin-top:.375rem;font-size:.875rem;color:hsl(var(--muted-foreground))}
.n-dialog-footer{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1.25rem}
@keyframes n-fade{from{opacity:0}to{opacity:1}}

/* ---- Toast ------------------------------------------------------------------- */
.n-toast-region{position:fixed;bottom:1rem;right:1rem;z-index:180;
  display:flex;flex-direction:column;gap:.5rem;max-width:22rem}
.n-toast{display:flex;align-items:flex-start;gap:.625rem;padding:.875rem 1rem;
  background:hsl(var(--background));border:1px solid hsl(var(--border));
  border-radius:var(--radius);box-shadow:var(--shadow-lg);font-size:.875rem;
  animation:n-toast-in .18s ease-out}
.n-toast.success{border-left:3px solid hsl(var(--success))}
.n-toast.error{border-left:3px solid hsl(var(--destructive))}
.n-toast.brand{border-left:3px solid hsl(var(--brand))}
.n-toast-title{font-weight:600}
.n-toast-desc{color:hsl(var(--muted-foreground));font-size:.8125rem}
@keyframes n-toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---- Tooltip (CSS-only, data-n-tip) ------------------------------------------ */
[data-n-tip]{position:relative}
[data-n-tip]:hover::after{content:attr(data-n-tip);position:absolute;bottom:calc(100% + 6px);
  left:50%;transform:translateX(-50%);background:hsl(var(--primary));
  color:hsl(var(--primary-foreground));padding:.25rem .5rem;font-size:.6875rem;
  font-weight:500;border-radius:calc(var(--radius) - 4px);white-space:nowrap;z-index:160}

/* ---- Breadcrumb, Empty-State, Code-Endpoint ---------------------------------- */
.n-breadcrumb{display:flex;align-items:center;gap:.375rem;font-size:.8125rem;
  color:hsl(var(--muted-foreground));margin-bottom:.75rem}
.n-breadcrumb a{color:hsl(var(--muted-foreground))}
.n-breadcrumb a:hover{color:hsl(var(--foreground));text-decoration:none}
.n-breadcrumb .sep{opacity:.5}
.n-breadcrumb .current{color:hsl(var(--foreground));font-weight:500}
.n-empty{display:flex;flex-direction:column;align-items:center;gap:.5rem;
  padding:3rem 1rem;text-align:center;color:hsl(var(--muted-foreground))}
.n-empty svg{width:2rem;height:2rem;opacity:.5}
.n-endpoint{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;
  background:hsl(var(--muted));border:1px solid hsl(var(--border));
  border-radius:calc(var(--radius) - 2px);font-family:var(--font-mono);
  font-size:.8125rem;overflow-x:auto;white-space:nowrap}
.n-endpoint .n-btn{margin-left:auto}

/* ---- Grid-Utilities (minimal) ------------------------------------------------ */
.n-grid{display:grid;gap:1rem}
.n-grid > *{min-width:0}
.n-grid-2{grid-template-columns:repeat(2,1fr)}
.n-grid-3{grid-template-columns:repeat(3,1fr)}
.n-grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.n-grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.n-grid-2,.n-grid-3,.n-grid-4{grid-template-columns:1fr}}
.n-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.n-col{display:flex;flex-direction:column;gap:.75rem}
.n-muted{color:hsl(var(--muted-foreground))}
.n-small{font-size:.8125rem}
.n-right{margin-left:auto}
.n-mt{margin-top:1.5rem}.n-mb{margin-bottom:1.5rem}

.n-fw-med{font-weight:500}

/* ---- Unified Shell: lange scrollbare Sidebar + klappbare Gruppen --------- */
@media(min-width:861px){
  .n-sidebar{position:sticky;top:calc(28px + 3.5rem);align-self:flex-start;
    max-height:calc(100vh - 28px - 3.5rem);overflow-y:auto}
}
.n-sidebar-group-body{display:flex;flex-direction:column;gap:.0625rem}
.n-sidebar-group-label{display:flex;align-items:center;justify-content:space-between;
  width:100%;border:0;background:transparent;font:inherit;text-align:left;
  cursor:pointer;user-select:none;border-radius:calc(var(--radius) - 2px)}
.n-sidebar-group-label:hover{background:hsl(var(--accent))}
.n-sidebar-group-label .chev{font-size:.65rem;opacity:.45;transition:transform .15s}
.n-sidebar-group.collapsed .n-sidebar-group-body{display:none}
.n-sidebar-group.collapsed .n-sidebar-group-label .chev{transform:rotate(-90deg)}
.n-sidebar-item{font-size:.8125rem;padding:.375rem .625rem}
.n-sidebar-item svg{width:.5rem;height:.5rem;opacity:.5}
.n-sidebar-item.active svg{opacity:1}
.n-sidebar-item .live{margin-left:auto;font-size:.5625rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;color:hsl(var(--brand));background:hsl(var(--brand-muted));
  padding:.05rem .3rem;border-radius:4px}

/* ---- Topbar Usermenu (self-contained für die Shell) --------------------- */
.n-usermenu{position:relative}
.n-usermenu-btn{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  height:2rem;padding:0 .625rem;border-radius:calc(var(--radius) - 2px);
  border:1px solid transparent;background:transparent;font:inherit;font-size:.8125rem;
  color:hsl(var(--foreground))}
.n-usermenu-btn:hover{background:hsl(var(--accent))}
@media(max-width:860px){
  .n-usermenu-btn{width:2rem;padding:0;justify-content:center}
  .n-usermenu-btn>span:not(.n-avatar){display:none}
}
.n-usermenu-pop{position:absolute;right:0;top:calc(100% + .375rem);min-width:12rem;
  background:hsl(var(--popover));border:1px solid hsl(var(--border));
  border-radius:var(--radius);box-shadow:var(--shadow-md);padding:.25rem;display:none;z-index:130}
.n-usermenu.open .n-usermenu-pop{display:block}
.n-usermenu-pop .lbl{padding:.375rem .625rem;font-size:.75rem;color:hsl(var(--muted-foreground))}
.n-usermenu-pop hr{border:0;border-top:1px solid hsl(var(--border));margin:.25rem -.25rem}
.n-usermenu-item{display:flex;width:100%;text-align:left;padding:.4375rem .625rem;border:0;
  background:transparent;cursor:pointer;border-radius:calc(var(--radius) - 4px);
  font:inherit;font-size:.875rem;color:hsl(var(--popover-foreground))}
.n-usermenu-item:hover{background:hsl(var(--accent))}
.n-usermenu-item.danger{color:hsl(var(--destructive))}