/* VC UI System 20260811
   Freigegebener, zentraler Komponentenstandard nach dem Werkzeugbau-Look.
   Layout und Fachlogik bleiben modulspezifisch; diese Schicht vereinheitlicht
   ausschliesslich Oberflaechen, Bedienelemente und die mobile Portal-Shell. */

body.vc-ui-system{
  --vc-ui-page:#09111c;
  --vc-ui-sidebar:#08111f;
  --vc-ui-topbar:#0b1424;
  --vc-ui-surface:#121d2b;
  --vc-ui-surface-deep:#0e1723;
  --vc-ui-surface-soft:#182638;
  --vc-ui-field:#091321;
  --vc-ui-line:rgba(142,174,218,.22);
  --vc-ui-line-strong:rgba(142,174,218,.36);
  --vc-ui-text:#f1f5fb;
  --vc-ui-muted:#9facbf;
  --vc-ui-blue:#4b91ff;
  --vc-ui-blue-strong:#2f7cf6;
  --vc-ui-cyan:#43c2bd;
  --vc-ui-green:#35bd7d;
  --vc-ui-amber:#e7a73d;
  --vc-ui-red:#ee6b78;
  --vc-ui-space-1:4px;
  --vc-ui-space-2:8px;
  --vc-ui-space-3:12px;
  --vc-ui-space-4:16px;
  --vc-ui-space-5:24px;
  --vc-ui-space-6:32px;
  --vc-ui-radius-small:10px;
  --vc-ui-radius:14px;
  --vc-ui-radius-pill:999px;
  --vc-ui-control-height:40px;
  --vc-ui-control-height-mobile:44px;
  --vc-ui-shadow:0 16px 36px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.025);
  --vc-ui-shadow-soft:0 9px 22px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.02);
  color:var(--vc-ui-text);
}

body.vc-ui-standard{
  background:
    radial-gradient(circle at 78% 0%,rgba(46,96,161,.09),transparent 31%),
    linear-gradient(180deg,#0c1522 0%,var(--vc-ui-page) 100%) !important;
}

/* Jede reguläre Seite besitzt eine deckende Hauptfläche. Transparenz an
   dieser Stelle führt in Safari zum Durchscheinen des hellen Browser-Canvas
   und bei spät geladenen Modulstyles zu einem Weißblitz. */
body.vc-ui-standard :is(.layout,.projectShell,.mc-shell,.portalShell){
  background:#09111c !important;
}

body.vc-ui-standard :is(.main,.projectMain,.mc-main,.portalMain){
  background:
    radial-gradient(circle at 76% 0%,rgba(46,96,161,.08),transparent 32%),
    linear-gradient(180deg,#0c1522 0%,#09111c 100%) !important;
}

body.vc-ui-standard .content{
  background:transparent !important;
}

/* Personalwesen: Safari darf die Hauptflaeche nicht aus dem transparenten
   Dokument-Canvas ableiten. Die bestehende Personal-Oberflaeche ist dunkel;
   deshalb wird sie hier ausdruecklich deckend weitergefuehrt. */
body.vc-ui-system.vc-ui-standard.pw-ui,
body.vc-ui-system.vc-ui-standard.pw-ui .layout{
  background:#0b0f14 !important;
}

body.vc-ui-system.vc-ui-standard.pw-ui .main{
  color:var(--pw-text,#f1f5f9) !important;
  background:
    linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),
    #0b0f14 !important;
  background-size:100% 36px !important;
}

body.vc-ui-system.vc-ui-standard.pw-ui .content{
  background:transparent !important;
}

/* Seitenkopf: eine wiedererkennbare, ruhige Kopfkachel. */
body.vc-ui-standard :is(
  .vc-page-head,
  .dn-page-head,
  .pageHead,
  .page-head,
  .detailHero,
  .summaryHero,
  .profile-page-hero,
  .portalTop,
  .automation-page-head
){
  position:relative;
  overflow:hidden;
  border:1px solid rgba(93,145,217,.42) !important;
  border-radius:var(--vc-ui-radius) !important;
  background:
    radial-gradient(circle at 90% 12%,rgba(75,145,255,.16),transparent 29%),
    linear-gradient(135deg,#19283b 0%,#121d2b 53%,#101824 100%) !important;
  box-shadow:inset 4px 0 0 var(--vc-ui-cyan),var(--vc-ui-shadow) !important;
}

body.vc-ui-standard :is(.pageHead,.page-head,.portalTop,.automation-page-head){
  min-height:88px;
  margin-bottom:var(--vc-ui-space-3);
  padding:var(--vc-ui-space-4) !important;
}

body.vc-ui-standard :is(.dn-page-head,.detailHero,.summaryHero,.profile-page-hero){
  box-shadow:inset 4px 0 0 var(--vc-ui-cyan),var(--vc-ui-shadow) !important;
}

body.vc-ui-standard :is(.eyebrow,.dn-eyebrow,.pageEyebrow,.heroEyebrow){
  color:#8edbd5 !important;
  font-size:10px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}

body.vc-ui-standard :is(.pageHead,.page-head,.dn-page-head,.portalTop,.profile-page-hero) h1{
  color:var(--vc-ui-text);
  letter-spacing:-.025em;
}

body.vc-ui-standard :is(.pageHead,.page-head,.dn-page-head,.portalTop,.profile-page-hero) p{
  color:var(--vc-ui-muted);
  line-height:1.45;
}

/* Kacheln und Panels: nur visuelle Eigenschaften, keine Fachlayouts. */
body.vc-ui-standard :is(
  .vc-surface,
  .dn-panel,
  .panel,
  .card,
  .section,
  .softCard,
  .box,
  .portalContentCard,
  .projectPanel,
  .mc-card,
  .pw-card,
  .detail-section,
  .detailSection
){
  min-width:0;
  border-color:var(--vc-ui-line) !important;
  border-radius:var(--vc-ui-radius) !important;
  background:linear-gradient(180deg,var(--vc-ui-surface) 0%,var(--vc-ui-surface-deep) 100%) !important;
  box-shadow:var(--vc-ui-shadow-soft) !important;
}

body.vc-ui-standard :is(.panelHead,.sectionHead,.section-head,.cardHead,.dn-section-head,.dn-section-title){
  border-bottom-color:rgba(142,174,218,.14) !important;
}

body.vc-ui-standard :is(.panelSub,.sectionSub,.section-sub,.sectionLead,.muted,.fieldHelp){
  color:var(--vc-ui-muted) !important;
}

/* Kennzahlen: gleiche Form, Farbe nur noch als Signal. */
body.vc-ui-standard :is(
  .vc-metric,
  .dn-metric,
  .metric,
  .stat,
  .kpi,
  .bankStat,
  .summaryCard,
  .trendSummaryCard,
  .reviewSummaryItem
){
  min-width:0;
  border-color:var(--vc-ui-line) !important;
  border-radius:var(--vc-ui-radius) !important;
  background:linear-gradient(155deg,var(--vc-ui-surface-soft),var(--vc-ui-surface-deep)) !important;
  box-shadow:inset 0 3px 0 var(--vc-ui-blue),var(--vc-ui-shadow-soft) !important;
}

body.vc-ui-standard :is(.warning,.warn,.attention).vc-metric,
body.vc-ui-standard :is(.dn-metric,.metric,.stat,.kpi,.bankStat).warning,
body.vc-ui-standard :is(.dn-metric,.metric,.stat,.kpi,.bankStat).attention{
  box-shadow:inset 0 3px 0 var(--vc-ui-amber),var(--vc-ui-shadow-soft) !important;
}

body.vc-ui-standard :is(.dn-metric,.metric,.stat,.kpi,.bankStat).danger{
  box-shadow:inset 0 3px 0 var(--vc-ui-red),var(--vc-ui-shadow-soft) !important;
}

body.vc-ui-standard :is(.dn-metric,.metric,.stat,.kpi,.bankStat).success{
  box-shadow:inset 0 3px 0 var(--vc-ui-green),var(--vc-ui-shadow-soft) !important;
}

/* Bedienelemente. */
body.vc-ui-system button,
body.vc-ui-system .btn,
body.vc-ui-system [role="button"]{
  border-radius:9px;
}

body.vc-ui-system :is(
  .btn,
  .dn-btn,
  .ppBtn,
  .mc-button,
  .quick-btn,
  .mini-btn,
  .icon-btn,
  .iconBtn,
  .refresh-button,
  .response-button,
  button.primary,
  button.secondary,
  button.danger
){
  min-height:var(--vc-ui-control-height);
  border-color:var(--vc-ui-line);
  font-weight:800;
}

body.vc-ui-system :is(.btn.primary,.dn-btn.primary,.ppBtn.primary,button.primary){
  border-color:#3e84f3 !important;
  color:#fff !important;
  background:linear-gradient(180deg,#347eea,#2868c9) !important;
  box-shadow:0 8px 20px rgba(31,111,235,.18);
}

body.vc-ui-system :is(.btn.ghost,.btn.secondary,.dn-btn.secondary,.ppBtn.secondary,button.secondary){
  border-color:var(--vc-ui-line) !important;
  color:#dce7f6 !important;
  background:rgba(255,255,255,.035) !important;
}

body.vc-ui-system :is(.btn.danger,.dn-btn.danger,.ppBtn.danger,button.danger){
  border-color:rgba(238,107,120,.42) !important;
  color:#ffb4bd !important;
  background:rgba(238,107,120,.11) !important;
}

body.vc-ui-system :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]){
  min-width:0;
  border-color:rgba(153,181,218,.24) !important;
  border-radius:var(--vc-ui-radius-small) !important;
  color:var(--vc-ui-text) !important;
  background:var(--vc-ui-field) !important;
}

body.vc-ui-system :is(input,select):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="file"]){
  min-height:var(--vc-ui-control-height);
}

body.vc-ui-system :is(input,select,textarea):focus{
  border-color:rgba(75,145,255,.78) !important;
  outline:none;
  box-shadow:0 0 0 3px rgba(75,145,255,.14) !important;
}

body.vc-ui-system :is(input,textarea)::placeholder{color:#73849b;opacity:1}

/* Status-Chips. */
body.vc-ui-system :is(
  .vc-status,
  .dn-status,
  .pill,
  .dn-pill,
  .badge,
  .chip,
  .mini-chip,
  .metaChip,
  .tag,
  .statusPill,
  .status-badge,
  .taskBadge,
  .taskMetaTag,
  .issueTag,
  .repBadge,
  .docType
){
  border-radius:var(--vc-ui-radius-pill) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.035);
  font-weight:850;
  white-space:nowrap;
}

body.vc-ui-system :is(.success,.ok,.green).vc-status,
body.vc-ui-system :is(.pill,.badge,.chip,.tag,.statusPill,.status-badge).success,
body.vc-ui-system :is(.pill,.badge,.chip,.tag,.statusPill,.status-badge).ok,
body.vc-ui-system :is(.pill,.badge,.chip,.tag,.statusPill,.status-badge).green{
  border-color:rgba(53,189,125,.38) !important;
  color:#8be1b6 !important;
  background:rgba(53,189,125,.11) !important;
}

body.vc-ui-system :is(.pill,.badge,.chip,.tag,.statusPill,.status-badge).warning,
body.vc-ui-system :is(.pill,.badge,.chip,.tag,.statusPill,.status-badge).warn,
body.vc-ui-system :is(.pill,.badge,.chip,.tag,.statusPill,.status-badge).amber{
  border-color:rgba(231,167,61,.38) !important;
  color:#ffd47e !important;
  background:rgba(231,167,61,.11) !important;
}

body.vc-ui-system :is(.pill,.badge,.chip,.tag,.statusPill,.status-badge).danger,
body.vc-ui-system :is(.pill,.badge,.chip,.tag,.statusPill,.status-badge).error,
body.vc-ui-system :is(.pill,.badge,.chip,.tag,.statusPill,.status-badge).red{
  border-color:rgba(238,107,120,.4) !important;
  color:#ff9aa5 !important;
  background:rgba(238,107,120,.11) !important;
}

/* Filter, Tabs und Tabellen. */
body.vc-ui-standard :is(
  .toolbar,
  .filters,
  .filterbar,
  .filterBar,
  .dn-filterbar,
  .ppToolbar,
  .quick-filter,
  .tabs,
  .dn-hub-tabs,
  .segmented
){
  min-width:0;
  border-color:var(--vc-ui-line) !important;
  border-radius:var(--vc-ui-radius-small) !important;
}

body.vc-ui-standard :is(.tabs,.dn-hub-tabs,.segmented,.quick-filter){
  background:#0a1422 !important;
  box-shadow:var(--vc-ui-shadow-soft);
}

body.vc-ui-standard :is(
  .tableWrap,
  .table-wrap,
  .tableShell,
  .table-shell,
  .dn-table-shell,
  .ordersWrap,
  .listTable,
  .resultTable,
  .metricCompare
){
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  border-color:var(--vc-ui-line) !important;
  border-radius:var(--vc-ui-radius-small) !important;
  background:var(--vc-ui-field) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.018);
  -webkit-overflow-scrolling:touch;
}

body.vc-ui-standard table th{
  border-bottom-color:var(--vc-ui-line-strong) !important;
  color:#9dacbf !important;
  background:#172231 !important;
}

body.vc-ui-standard table td{border-bottom-color:rgba(137,164,200,.13) !important}
body.vc-ui-standard table tbody tr:nth-child(even) td{background:rgba(255,255,255,.011)}
body.vc-ui-standard table tbody tr:hover td{background:rgba(75,145,255,.065)}

/* Dialoge sowie Lade-, Leer- und Fehlerzustaende. */
body.vc-ui-standard :is(dialog,.dialog,.modal,.dialogCard,.dialogShell,.modal-card,.drawer){
  border-color:var(--vc-ui-line) !important;
  border-radius:var(--vc-ui-radius) !important;
  color:var(--vc-ui-text) !important;
  background:linear-gradient(180deg,var(--vc-ui-surface),var(--vc-ui-surface-deep)) !important;
  box-shadow:0 24px 64px rgba(0,0,0,.48) !important;
}

body.vc-ui-standard :is(.empty-state,.emptyState,.ppEmpty,.dn-empty,.loadingState,.errorState){
  border:1px dashed var(--vc-ui-line) !important;
  border-radius:var(--vc-ui-radius-small) !important;
  color:var(--vc-ui-muted) !important;
  background:rgba(255,255,255,.022) !important;
}

@media (hover:hover) and (pointer:fine){
  body.vc-ui-standard :is(.panel,.card,.section,.softCard,.box,.dn-metric,.metric,.stat,.kpi){
    transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease;
  }
}

/* Mobile Shell: Menü links, Titel mittig, Aktionen rechts – ohne hohe Stapelung. */
@media (max-width:900px){
  body.vc-ui-system{
    --vc-ui-control-height:var(--vc-ui-control-height-mobile);
  }

  /* Im Personalwesen war die komplette Navigation mobil oberhalb des Inhalts
     aufgeklappt. Der vorhandene Menue-Button und Backdrop werden wieder als
     echtes Offcanvas-Menue genutzt. */
  html body.vc-ui-system.vc-ui-standard.pw-ui .layout > .sidebar.sidebar{
    position:fixed !important;
    top:0 !important;
    right:auto !important;
    bottom:0 !important;
    left:0 !important;
    width:min(320px,86vw) !important;
    min-width:0 !important;
    max-width:none !important;
    height:100dvh !important;
    flex-basis:auto !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    transform:translateX(-110%) !important;
    transition:transform .22s ease !important;
    z-index:140 !important;
  }

  html body.vc-ui-system.vc-ui-standard.pw-ui.menu-open .layout > .sidebar.sidebar{
    transform:translateX(0) !important;
  }

  html body.vc-ui-system.vc-ui-standard.pw-ui.menu-open #menuBackdrop.menu-backdrop{
    display:block !important;
    position:fixed !important;
    inset:0 !important;
    background:rgba(0,0,0,.58) !important;
    z-index:130 !important;
  }

  body.vc-ui-system #wbTopbar > .topbar{
    display:grid !important;
    grid-template-columns:44px minmax(0,1fr) auto !important;
    grid-template-rows:auto !important;
    align-items:center !important;
    min-height:64px !important;
    padding:10px 12px !important;
    gap:8px !important;
  }

  body.vc-ui-system #wbTopbar > .topbar > .topbar-left{
    grid-column:2 !important;
    grid-row:1 !important;
    display:flex !important;
    width:auto !important;
    min-width:0 !important;
    gap:2px !important;
  }

  body.vc-ui-system #wbTopbar > .topbar > .topbar-actions{
    display:contents !important;
    width:auto !important;
    margin:0 !important;
  }

  body.vc-ui-system #wbTopbar #btnMenu{
    grid-column:1 !important;
    grid-row:1 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    padding:0 !important;
    font-size:0 !important;
  }

  body.vc-ui-system #wbTopbar #btnMenu::before{
    content:"☰";
    font-size:18px;
    line-height:1;
  }

  body.vc-ui-system #wbTopbar #btnHome{display:none !important}

  body.vc-ui-system #wbTopbar .action-menu{
    grid-column:3 !important;
    grid-row:1 !important;
  }

  body.vc-ui-system #wbTopbar #btnMore{
    width:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    padding:0 !important;
  }

  body.vc-ui-system #wbTopbar .topbar-title{
    overflow:hidden;
    font-size:16px !important;
    line-height:1.15 !important;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  body.vc-ui-system #wbTopbar .topbar-sub{
    overflow:hidden;
    font-size:10px !important;
    line-height:1.2 !important;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  body.vc-ui-system #wbTopbar .action-dropdown{
    top:46px;
    right:0;
  }

  body.vc-ui-standard :is(.pageHead,.page-head,.portalTop,.automation-page-head){
    min-height:0;
    padding:var(--vc-ui-space-3) !important;
    border-radius:12px !important;
  }

  body.vc-ui-standard :is(.dn-page-head,.detailHero,.summaryHero,.profile-page-hero){
    border-radius:12px !important;
  }

  body.vc-ui-standard :is(.panel,.card,.section,.softCard,.box,.portalContentCard,.projectPanel,.mc-card,.pw-card,.detail-section,.detailSection),
  body.vc-ui-standard :is(.dn-metric,.metric,.stat,.kpi,.bankStat,.summaryCard,.trendSummaryCard,.reviewSummaryItem){
    border-radius:12px !important;
  }

  body.vc-ui-standard :is(.actions,.toolbarActions,.page-actions,.dn-actions){
    gap:var(--vc-ui-space-2) !important;
  }

  body.vc-ui-standard :is(.actions,.page-actions,.dn-actions) :is(.btn,.dn-btn,button.primary,button.secondary){
    min-height:var(--vc-ui-control-height-mobile);
  }
}

@media (max-width:560px){
  body.vc-ui-standard :is(.pageHead,.page-head,.dn-page-head,.portalTop){
    grid-template-columns:1fr !important;
  }
}

/* Einkauf laedt seine Seitennavigation zur Laufzeit nach. Diese bewusst
   staerkeren Selektoren halten Arbeitsflaechen und mobile Topbar trotzdem
   im gemeinsamen System, ohne die Einkaufslogik oder Aktionsbuttons zu
   veraendern. */
html body.vc-ui-system.vc-ui-standard.purchase-shell :is(.panel.panel,.articleWorkspace.articleWorkspace,.viewSurface.viewSurface){
  border:1px solid var(--vc-ui-line) !important;
  border-radius:var(--vc-ui-radius) !important;
}

html body.vc-ui-system.vc-ui-standard.purchase-shell .pill.pill{
  border-radius:var(--vc-ui-radius-pill) !important;
}

@media (max-width:900px){
  html body.vc-ui-system.vc-ui-standard.purchase-shell #wbTopbar > .topbar.topbar{
    display:grid !important;
    grid-template-columns:44px minmax(0,1fr) auto !important;
    grid-template-rows:44px !important;
    align-items:center !important;
    min-height:64px !important;
    height:64px !important;
    padding:10px 12px !important;
    gap:8px !important;
  }

  html body.vc-ui-system.vc-ui-standard.purchase-shell #wbTopbar > .topbar > .topbar-left.topbar-left{
    display:flex !important;
    grid-column:2 !important;
    grid-row:1 !important;
    width:auto !important;
    min-width:0 !important;
  }

  html body.vc-ui-system.vc-ui-standard.purchase-shell #wbTopbar > .topbar > .topbar-actions.topbar-actions{
    display:contents !important;
    width:auto !important;
    margin:0 !important;
  }

  html body.vc-ui-system.vc-ui-standard.purchase-shell #wbTopbar .purchaseUtility.purchaseUtility{
    display:none !important;
  }

  html body.vc-ui-system.vc-ui-standard.purchase-shell #wbTopbar #btnMenu{
    grid-column:1 !important;
    grid-row:1 !important;
  }

  html body.vc-ui-system.vc-ui-standard.purchase-shell #wbTopbar .action-menu.action-menu{
    display:inline-flex !important;
    grid-column:3 !important;
    grid-row:1 !important;
    margin-left:0 !important;
  }

  /* Das Kundenportal verwendet dieselbe Shell-Idee mit eigenen Klassen. */
  body.vc-ui-system .portalTopbar{
    display:grid !important;
    grid-template-columns:44px minmax(0,1fr) 44px !important;
    grid-template-rows:44px !important;
    align-items:center !important;
    min-height:64px !important;
    height:64px !important;
    padding:10px 12px !important;
    gap:8px !important;
  }

  body.vc-ui-system .portalTopbarLeft{
    grid-column:2 !important;
    grid-row:1 !important;
    min-width:0 !important;
  }

  body.vc-ui-system .portalTopbarActions{
    display:contents !important;
  }

  body.vc-ui-system .portalMenuBtn{
    display:inline-flex !important;
    grid-column:1 !important;
    grid-row:1 !important;
    width:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    padding:0 !important;
  }

  body.vc-ui-system .portalTopbarActions > a.portalTopbarBtn{
    display:none !important;
  }

  body.vc-ui-system .portalActionMenu{
    grid-column:3 !important;
    grid-row:1 !important;
  }

  body.vc-ui-system .portalTopbarTitle{
    overflow:hidden;
    font-size:16px !important;
    line-height:1.15 !important;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  body.vc-ui-system .portalTopbarSub{
    overflow:hidden;
    margin-top:2px !important;
    font-size:10px !important;
    line-height:1.2 !important;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

@media (prefers-reduced-motion:reduce){
  body.vc-ui-system *,body.vc-ui-system *::before,body.vc-ui-system *::after{
    scroll-behavior:auto !important;
    transition:none !important;
  }
}