/* VIALENUM Design System - Komponenten-CSS.
   Automatisch erzeugt aus dem Claude-Design-Handoff (components/<Gruppe>/<Name>.jsx, injectStyle).
   Nicht von Hand aendern: Anpassungen gehoeren in static/css/vialenum.css. */

/* ---- core/Button (vl-button) ---- */
.vl-btn{
  --_bg:var(--vl-navy); --_fg:#fff; --_bd:transparent; --_bgh:var(--vl-navy-hover);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-sans); font-weight:var(--fw-semibold); font-size:var(--fs-body-sm);
  line-height:1; letter-spacing:0; white-space:nowrap; text-decoration:none;
  border:1px solid var(--_bd); border-radius:var(--radius-sm);
  background:var(--_bg); color:var(--_fg); cursor:pointer;
  padding:0 16px; height:40px;
  transition:background var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard);
}
.vl-btn:hover{ background:var(--_bgh); }
.vl-btn:active{ transform:translateY(0.5px); }
.vl-btn:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
.vl-btn[disabled]{ background:var(--vl-gray-20); color:var(--vl-gray-50); border-color:transparent; cursor:not-allowed; }

.vl-btn--secondary{ --_bg:transparent; --_fg:var(--vl-navy); --_bd:var(--vl-navy); --_bgh:rgba(15,39,68,0.06); }
.vl-btn--secondary[disabled]{ background:transparent; border-color:var(--vl-gray-30); color:var(--vl-gray-50); }
.vl-btn--tertiary{ --_bg:transparent; --_fg:var(--text-link); --_bd:transparent; --_bgh:rgba(15,98,254,0.08); padding:0 8px; }
.vl-btn--accent{ --_bg:var(--vl-emerald); --_fg:#fff; --_bgh:var(--vl-emerald-hover); }
.vl-btn--danger{ --_bg:var(--vl-error); --_fg:#fff; --_bgh:#b81922; }

.vl-btn--sm{ height:32px; font-size:var(--fs-caption); padding:0 12px; }
.vl-btn--lg{ height:48px; font-size:var(--fs-body); padding:0 24px; }
.vl-btn--block{ width:100%; }

/* ---- core/IconButton (vl-iconbutton) ---- */
.vl-iconbtn{
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid transparent; border-radius:var(--radius-sm);
  color:var(--vl-gray-70); cursor:pointer; padding:0; width:40px; height:40px;
  transition:background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.vl-iconbtn:hover{ background:var(--vl-gray-10); color:var(--vl-gray-100); }
.vl-iconbtn:active{ background:var(--vl-gray-20); }
.vl-iconbtn:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
.vl-iconbtn[disabled]{ color:var(--vl-gray-30); cursor:not-allowed; background:transparent; }
.vl-iconbtn--sm{ width:32px; height:32px; }
.vl-iconbtn--lg{ width:48px; height:48px; }
.vl-iconbtn--solid{ background:var(--vl-navy); color:#fff; }
.vl-iconbtn--solid:hover{ background:var(--vl-navy-hover); color:#fff; }
.vl-iconbtn--outline{ border-color:var(--border-subtle); }
.vl-iconbtn--outline:hover{ border-color:var(--border-strong); }

/* ---- forms/TextField (vl-field) ---- */
.vl-field{ display:flex; flex-direction:column; gap:6px; font-family:var(--font-sans); }
.vl-field__label{ font-size:var(--fs-body-sm); font-weight:var(--fw-medium); color:var(--vl-gray-100); }
.vl-field__opt{ color:var(--vl-gray-50); font-weight:var(--fw-regular); }
.vl-field__wrap{ position:relative; display:flex; align-items:center; }
.vl-field__icon{ position:absolute; left:12px; color:var(--vl-gray-50); pointer-events:none; display:flex; }
.vl-field__input{
  width:100%; box-sizing:border-box; font-family:var(--font-sans);
  font-size:var(--fs-body); color:var(--vl-gray-100);
  height:44px; padding:0 12px; background:#fff;
  border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  transition:border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.vl-field__input::placeholder{ color:var(--text-placeholder); }
.vl-field__input:hover{ border-color:var(--vl-gray-50); }
.vl-field__input:focus{ outline:none; border-color:var(--vl-navy); box-shadow:0 0 0 2px rgba(15,39,68,0.18); }
.vl-field--hasicon .vl-field__input{ padding-left:38px; }
.vl-field--error .vl-field__input{ border-color:var(--vl-error); }
.vl-field--error .vl-field__input:focus{ box-shadow:0 0 0 2px rgba(218,30,40,0.2); }
.vl-field__input:disabled{ background:var(--vl-gray-10); color:var(--vl-gray-50); cursor:not-allowed; border-color:var(--border-subtle); }
.vl-field__help{ font-size:var(--fs-caption); color:var(--text-helper); display:flex; align-items:center; gap:4px; }
.vl-field--error .vl-field__help{ color:var(--vl-error); }
.vl-field--sm .vl-field__input{ height:36px; font-size:var(--fs-body-sm); }
.vl-field--lg .vl-field__input{ height:48px; }

/* ---- forms/Select (vl-select) ---- */
.vl-select{ display:flex; flex-direction:column; gap:6px; font-family:var(--font-sans); }
.vl-select__label{ font-size:var(--fs-body-sm); font-weight:var(--fw-medium); color:var(--vl-gray-100); }
.vl-select__wrap{ position:relative; display:flex; align-items:center; }
.vl-select__chev{ position:absolute; right:12px; color:var(--vl-gray-60); pointer-events:none; display:flex; }
.vl-select__el{
  appearance:none; -webkit-appearance:none; width:100%; box-sizing:border-box;
  font-family:var(--font-sans); font-size:var(--fs-body); color:var(--vl-gray-100);
  height:44px; padding:0 38px 0 12px; background:#fff;
  border:1px solid var(--border-strong); border-radius:var(--radius-sm); cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.vl-select__el:hover{ border-color:var(--vl-gray-50); }
.vl-select__el:focus{ outline:none; border-color:var(--vl-navy); box-shadow:0 0 0 2px rgba(15,39,68,0.18); }
.vl-select__el:disabled{ background:var(--vl-gray-10); color:var(--vl-gray-50); cursor:not-allowed; }
.vl-select__el[data-placeholder="true"]{ color:var(--text-placeholder); }

/* ---- forms/Checkbox (vl-checkbox) ---- */
.vl-check{ display:inline-flex; align-items:flex-start; gap:10px; font-family:var(--font-sans); cursor:pointer; user-select:none; }
.vl-check input{ position:absolute; opacity:0; width:0; height:0; }
.vl-check__box{
  flex:0 0 auto; width:18px; height:18px; margin-top:1px; border-radius:4px;
  border:1.5px solid var(--border-strong); background:#fff; color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.vl-check:hover .vl-check__box{ border-color:var(--vl-navy); }
.vl-check input:checked + .vl-check__box{ background:var(--vl-navy); border-color:var(--vl-navy); }
.vl-check input:focus-visible + .vl-check__box{ outline:2px solid var(--focus-ring); outline-offset:2px; }
.vl-check input:disabled + .vl-check__box{ background:var(--vl-gray-10); border-color:var(--vl-gray-30); }
.vl-check__box svg{ opacity:0; transition:opacity var(--dur-fast) var(--ease-standard); }
.vl-check input:checked + .vl-check__box svg{ opacity:1; }
.vl-check__label{ font-size:var(--fs-body-sm); color:var(--vl-gray-100); line-height:1.4; }
.vl-check--disabled{ cursor:not-allowed; }
.vl-check--disabled .vl-check__label{ color:var(--vl-gray-50); }

/* ---- forms/Switch (vl-switch) ---- */
.vl-switch{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-sans); cursor:pointer; user-select:none; }
.vl-switch input{ position:absolute; opacity:0; width:0; height:0; }
.vl-switch__track{
  flex:0 0 auto; width:40px; height:22px; border-radius:999px; background:var(--vl-gray-30);
  position:relative; transition:background var(--dur-base) var(--ease-standard);
}
.vl-switch__thumb{
  position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:999px; background:#fff;
  transition:transform var(--dur-base) var(--ease-standard);
}
.vl-switch input:checked + .vl-switch__track{ background:var(--vl-emerald); }
.vl-switch input:checked + .vl-switch__track .vl-switch__thumb{ transform:translateX(18px); }
.vl-switch input:focus-visible + .vl-switch__track{ outline:2px solid var(--focus-ring); outline-offset:2px; }
.vl-switch input:disabled + .vl-switch__track{ background:var(--vl-gray-20); }
.vl-switch__label{ font-size:var(--fs-body-sm); color:var(--vl-gray-100); }

/* ---- display/Card (vl-card) ---- */
.vl-card{ background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-md); padding:var(--space-lg); font-family:var(--font-sans);
  transition:border-color var(--dur-fast) var(--ease-standard); }
.vl-card--hover{ cursor:pointer; }
.vl-card--hover:hover{ border-color:var(--vl-navy); }
.vl-card--flush{ padding:0; overflow:hidden; }
.vl-card--subtle{ background:var(--surface-subtle); border-color:transparent; }

/* ---- display/StatTile (vl-stat) ---- */
.vl-stat{ display:flex; flex-direction:column; gap:4px; background:var(--surface-card);
  border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  padding:var(--space-lg); font-family:var(--font-sans); min-width:0; }
.vl-stat__head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.vl-stat__label{ font-size:var(--fs-body-sm); color:var(--vl-gray-60); }
.vl-stat__icon{ color:var(--vl-navy); display:flex; }
.vl-stat__value{ font-size:36px; font-weight:var(--fw-semibold); color:var(--vl-gray-100); line-height:1.1; letter-spacing:-0.01em; }
.vl-stat__sub{ font-size:var(--fs-caption); color:var(--vl-gray-60); }
.vl-stat__link{ margin-top:8px; display:inline-flex; align-items:center; gap:6px;
  font-size:var(--fs-body-sm); font-weight:var(--fw-medium); color:var(--text-link);
  text-decoration:none; }
.vl-stat__link:hover{ text-decoration:underline; }
.vl-stat__value--accent{ color:var(--vl-emerald); }

/* ---- display/Badge (vl-badge) ---- */
.vl-badge{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-sans);
  font-size:var(--fs-body-sm); color:var(--vl-gray-100); white-space:nowrap; }
.vl-badge__dot{ width:8px; height:8px; border-radius:999px; background:var(--vl-gray-50); flex:0 0 auto; }
.vl-badge--success .vl-badge__dot{ background:var(--vl-success); }
.vl-badge--info .vl-badge__dot{ background:var(--vl-info); }
.vl-badge--warning .vl-badge__dot{ background:var(--vl-warning); }
.vl-badge--error .vl-badge__dot{ background:var(--vl-error); }
.vl-badge--neutral .vl-badge__dot{ background:var(--vl-gray-50); }

.vl-badge--solid{ padding:2px 10px; border-radius:999px; font-size:var(--fs-caption); font-weight:var(--fw-medium); }
.vl-badge--solid.vl-badge--success{ background:var(--vl-success-soft); color:#0E6027; }
.vl-badge--solid.vl-badge--info{ background:var(--vl-info-soft); color:#0043CE; }
.vl-badge--solid.vl-badge--warning{ background:var(--vl-warning-soft); color:#8E6A00; }
.vl-badge--solid.vl-badge--error{ background:var(--vl-error-soft); color:#A2191F; }
.vl-badge--solid.vl-badge--neutral{ background:var(--vl-gray-10); color:var(--vl-gray-70); }
.vl-badge--solid .vl-badge__dot{ display:none; }

/* ---- display/Tag (vl-tag) ---- */
.vl-tag{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-sans);
  font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--vl-gray-70);
  background:var(--vl-gray-10); border:1px solid var(--border-subtle);
  padding:3px 10px; border-radius:999px; white-space:nowrap; }
.vl-tag--navy{ background:rgba(15,39,68,0.06); color:var(--vl-navy); border-color:transparent; }
.vl-tag--emerald{ background:var(--vl-emerald-soft); color:#0E6027; border-color:transparent; }
.vl-tag__close{ display:inline-flex; cursor:pointer; color:inherit; opacity:0.6; }
.vl-tag__close:hover{ opacity:1; }

/* ---- display/Avatar (vl-avatar) ---- */
.vl-avatar{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  border-radius:999px; overflow:hidden; font-family:var(--font-sans); font-weight:var(--fw-semibold);
  background:var(--vl-navy); color:#fff; text-transform:uppercase; }
.vl-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.vl-avatar--emerald{ background:var(--vl-emerald); }
.vl-avatar--soft{ background:var(--vl-emerald-soft); color:#0E6027; }
.vl-avatar--gray{ background:var(--vl-gray-20); color:var(--vl-gray-70); }

/* ---- navigation/SideNav (vl-sidenav) ---- */
.vl-sidenav{ display:flex; flex-direction:column; width:248px; flex:0 0 248px; height:100%;
  background:var(--vl-navy); color:#fff; font-family:var(--font-sans); }
.vl-sidenav__brand{ display:flex; align-items:center; height:64px; padding:0 20px; flex:0 0 auto; }
.vl-sidenav__nav{ flex:1 1 auto; overflow-y:auto; padding:12px 12px; display:flex; flex-direction:column; gap:2px; }
.vl-sidenav__item{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--radius-sm);
  color:rgba(255,255,255,0.74); font-size:var(--fs-body-sm); font-weight:var(--fw-regular);
  cursor:pointer; border:none; background:none; width:100%; text-align:left;
  transition:background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.vl-sidenav__item:hover{ background:rgba(255,255,255,0.08); color:#fff; }
.vl-sidenav__item--active{ background:rgba(255,255,255,0.12); color:#fff; font-weight:var(--fw-medium); }
.vl-sidenav__item--active .vl-sidenav__ic{ color:var(--vl-emerald); }
.vl-sidenav__ic{ display:flex; color:rgba(255,255,255,0.7); flex:0 0 auto; }
.vl-sidenav__item--active .vl-sidenav__ic{ color:var(--vl-emerald); }
.vl-sidenav__count{ margin-left:auto; font-size:var(--fs-caption); background:rgba(255,255,255,0.16); color:#fff; padding:1px 7px; border-radius:999px; }
.vl-sidenav__user{ flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:14px 16px;
  border-top:1px solid rgba(255,255,255,0.12); cursor:pointer; }
.vl-sidenav__uname{ font-size:var(--fs-body-sm); color:#fff; }
.vl-sidenav__chev{ margin-left:auto; color:rgba(255,255,255,0.6); display:flex; }

/* ---- navigation/Tabs (vl-tabs) ---- */
.vl-tabs{ display:flex; gap:0; border-bottom:1px solid var(--border-subtle); font-family:var(--font-sans); }
.vl-tab{ appearance:none; background:none; border:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; padding:12px 16px;
  font-size:var(--fs-body-sm); font-weight:var(--fw-medium); color:var(--vl-gray-60);
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); }
.vl-tab:hover{ color:var(--vl-gray-100); }
.vl-tab--active{ color:var(--vl-navy); border-bottom-color:var(--vl-navy); font-weight:var(--fw-semibold); }
.vl-tab:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:-2px; }

/* ---- navigation/DataTable (vl-table) ---- */
.vl-table{ width:100%; border-collapse:collapse; font-family:var(--font-sans); font-size:var(--fs-body-sm); }
.vl-table th{ text-align:left; font-weight:var(--fw-semibold); color:var(--vl-gray-70);
  font-size:var(--fs-caption); letter-spacing:0.02em; text-transform:none;
  padding:12px 16px; border-bottom:1px solid var(--border-subtle); background:var(--vl-gray-10); white-space:nowrap; }
.vl-table td{ padding:14px 16px; border-bottom:1px solid var(--border-subtle); color:var(--vl-gray-100); vertical-align:middle; }
.vl-table tbody tr{ transition:background var(--dur-fast) var(--ease-standard); }
.vl-table--hover tbody tr:hover{ background:var(--vl-gray-10); cursor:pointer; }
.vl-table tbody tr:last-child td{ border-bottom:none; }
.vl-table th:first-child, .vl-table td:first-child{ padding-left:20px; }
.vl-table th:last-child, .vl-table td:last-child{ padding-right:20px; }
.vl-table__num{ text-align:right; font-variant-numeric:tabular-nums; }

/* ---- feedback/InlineNotification (vl-note) ---- */
.vl-note{ display:flex; gap:12px; align-items:flex-start; font-family:var(--font-sans);
  border:1px solid var(--border-subtle); border-left:3px solid var(--vl-info);
  background:var(--vl-info-soft); border-radius:var(--radius-sm); padding:14px 16px; }
.vl-note__ic{ display:flex; flex:0 0 auto; color:var(--vl-info); margin-top:1px; }
.vl-note__body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.vl-note__title{ font-size:var(--fs-body-sm); font-weight:var(--fw-semibold); color:var(--vl-gray-100); }
.vl-note__text{ font-size:var(--fs-body-sm); color:var(--vl-gray-70); }
.vl-note__close{ margin-left:auto; cursor:pointer; color:var(--vl-gray-60); display:flex; background:none; border:none; }
.vl-note--success{ background:var(--vl-success-soft); border-left-color:var(--vl-success); }
.vl-note--success .vl-note__ic{ color:var(--vl-success); }
.vl-note--warning{ background:var(--vl-warning-soft); border-left-color:var(--vl-warning); }
.vl-note--warning .vl-note__ic{ color:#8E6A00; }
.vl-note--error{ background:var(--vl-error-soft); border-left-color:var(--vl-error); }
.vl-note--error .vl-note__ic{ color:var(--vl-error); }

/* ---- feedback/ProgressBar (vl-progress) ---- */
.vl-progress{ font-family:var(--font-sans); display:flex; flex-direction:column; gap:6px; }
.vl-progress__head{ display:flex; justify-content:space-between; font-size:var(--fs-caption); color:var(--vl-gray-60); }
.vl-progress__track{ height:6px; background:var(--vl-gray-20); border-radius:999px; overflow:hidden; }
.vl-progress__fill{ height:100%; background:var(--vl-emerald); border-radius:999px;
  transition:width var(--dur-slow) var(--ease-standard); }
.vl-progress--navy .vl-progress__fill{ background:var(--vl-navy); }
.vl-progress--warning .vl-progress__fill{ background:var(--vl-warning); }