/*
  Core2Flow Design System
  Pure visual layer: keine Navigation, keine Workflows, keine Businesslogik.
  Ziel: ruhige, hochwertige ERP-Oberflaeche im Apple/Linear/Notion-Gefuehl.
*/

:root{
  --c2f-primary:#58A236;
  --c2f-primary-700:#397524;
  --c2f-primary-100:#ECF7E8;
  --c2f-ink:#111827;
  --c2f-text:#243027;
  --c2f-muted:#667085;
  --c2f-subtle:#94A3B8;
  --c2f-bg:#F8FAFC;
  --c2f-bg-soft:#F3F7F2;
  --c2f-card:#FFFFFF;
  --c2f-border:#E5E7EB;
  --c2f-line:rgba(17,24,39,.08);
  --c2f-shadow-xs:0 1px 2px rgba(17,24,39,.04);
  --c2f-shadow-sm:0 8px 24px rgba(17,24,39,.06);
  --c2f-shadow-md:0 18px 54px rgba(17,24,39,.09);
  --c2f-radius-sm:10px;
  --c2f-radius:16px;
  --c2f-radius-lg:22px;
  --c2f-focus:0 0 0 4px rgba(88,162,54,.16);
  --c2f-font:Inter,"SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --c2f-ease:cubic-bezier(.2,.8,.2,1);
}

html{
  background:var(--c2f-bg);
  color-scheme:light;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body{
  background:
    radial-gradient(circle at 22% 18%, rgba(88,162,54,.08), transparent 28rem),
    linear-gradient(135deg,#FBFDFB 0%,var(--c2f-bg) 45%,#F5F8F4 100%) !important;
  color:var(--c2f-text) !important;
  font-family:var(--c2f-font) !important;
  font-size:16px;
  line-height:1.45;
}

*{
  scrollbar-width:thin;
  scrollbar-color:rgba(17,24,39,.22) transparent;
}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:rgba(17,24,39,.18);
  border:3px solid transparent;
  border-radius:999px;
  background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background-color:rgba(17,24,39,.28)}

h1,h2,h3,h4{
  color:var(--c2f-ink);
  letter-spacing:-.035em;
  line-height:1.08;
}
h1{font-size:clamp(28px,2.2vw,36px);font-weight:820}
h2{font-size:clamp(23px,1.7vw,28px);font-weight:780}
h3{font-size:clamp(19px,1.3vw,22px);font-weight:740}
p,li,td,th,input,select,textarea,button{font-family:var(--c2f-font) !important}
small,.muted,.hint,.sub,.server,.status{font-size:14px;color:var(--c2f-muted)}
label,.label,.field label,th{
  color:var(--c2f-muted) !important;
  font-size:12px !important;
  font-weight:760 !important;
  letter-spacing:.02em;
}

.card,
.panel,
.box,
.tile,
.kpi,
.modal,
.dialog,
.popover,
.sheet,
section[class*="card"],
aside[class*="card"],
main>section,
main>aside{
  background:rgba(255,255,255,.92) !important;
  border:1px solid rgba(229,231,235,.92) !important;
  border-radius:var(--c2f-radius) !important;
  box-shadow:var(--c2f-shadow-sm) !important;
  backdrop-filter:saturate(1.12) blur(12px);
}

.card:hover,
.panel:hover,
.tile:hover,
.kpi:hover{
  box-shadow:0 12px 30px rgba(17,24,39,.075) !important;
  transform:translateY(-1px);
}

.card,.panel,.tile,.kpi,button,.btn,.tab,input,select,textarea,tr{
  transition:background-color 200ms var(--c2f-ease),
             border-color 200ms var(--c2f-ease),
             box-shadow 200ms var(--c2f-ease),
             color 200ms var(--c2f-ease),
             transform 200ms var(--c2f-ease),
             opacity 200ms var(--c2f-ease);
}

button,
.btn,
input[type="button"],
input[type="submit"],
a.button{
  min-height:38px;
  border-radius:12px !important;
  border:1px solid rgba(229,231,235,.95) !important;
  background:#fff !important;
  color:var(--c2f-ink) !important;
  box-shadow:var(--c2f-shadow-xs) !important;
  font-weight:760 !important;
  padding:.62rem .95rem !important;
}

button:hover,
.btn:hover,
a.button:hover{
  transform:translateY(-1px);
  box-shadow:0 9px 20px rgba(17,24,39,.08) !important;
}

button:active,
.btn:active{transform:translateY(0) scale(.99)}

.primary,
.btn.primary,
button.primary,
.tab.active,
nav .active,
.active>.tab{
  background:linear-gradient(180deg,#62B83D,var(--c2f-primary)) !important;
  border-color:rgba(88,162,54,.72) !important;
  color:#fff !important;
  box-shadow:0 10px 24px rgba(88,162,54,.22) !important;
}

.secondary,.btn.secondary{
  background:var(--c2f-primary-100) !important;
  color:var(--c2f-primary-700) !important;
  border-color:rgba(88,162,54,.22) !important;
}

.danger,.err,.error{
  color:#9F2A2A !important;
  border-color:#F3D4D4 !important;
  background:#FFF7F7 !important;
}

input,
select,
textarea{
  min-height:40px;
  border:1px solid var(--c2f-border) !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.95) !important;
  color:var(--c2f-ink) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85) !important;
  padding:.58rem .78rem !important;
}

textarea{min-height:90px}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
.btn:focus-visible{
  outline:none !important;
  border-color:rgba(88,162,54,.55) !important;
  box-shadow:var(--c2f-focus) !important;
}

nav,
.tabs,
.tabbar,
.subtabs,
.process-tabs,
.topbar,
header,
.toolbar{
  background:rgba(255,255,255,.86) !important;
  border-color:var(--c2f-line) !important;
  backdrop-filter:saturate(1.25) blur(18px);
}

.tab,
nav a,
.nav-item,
.process,
.process-button{
  border-radius:12px !important;
  color:var(--c2f-muted) !important;
  font-weight:760 !important;
}

.tab:hover,
nav a:hover,
.nav-item:hover,
.process:hover,
.process-button:hover{
  background:rgba(88,162,54,.08) !important;
  color:var(--c2f-ink) !important;
}

table{
  width:100%;
  border-collapse:separate !important;
  border-spacing:0 !important;
  background:#fff !important;
  border-radius:var(--c2f-radius) !important;
  overflow:hidden;
}

thead th{
  background:#F6F9F5 !important;
  border-bottom:1px solid var(--c2f-line) !important;
  padding:12px 14px !important;
  text-align:left;
  white-space:nowrap;
}

tbody td{
  border-bottom:1px solid rgba(17,24,39,.055) !important;
  padding:13px 14px !important;
  vertical-align:middle;
}

tbody tr:hover{
  background:rgba(88,162,54,.055) !important;
}

tbody tr:last-child td{border-bottom:0 !important}

.badge,
.pill,
.chip,
.tag,
[class*="badge"],
[class*="pill"],
[class*="chip"]{
  border-radius:999px !important;
  border:1px solid rgba(88,162,54,.18) !important;
  background:rgba(88,162,54,.10) !important;
  color:var(--c2f-primary-700) !important;
  font-weight:780 !important;
  padding:.25rem .56rem !important;
}

.modal,
.dialog,
[role="dialog"]{
  box-shadow:var(--c2f-shadow-md) !important;
}

.skeleton,
.loading-line,
.placeholder{
  position:relative;
  overflow:hidden;
  background:linear-gradient(90deg,#EEF3EE 0%,#F9FBF9 45%,#EEF3EE 100%) !important;
  background-size:220% 100% !important;
  animation:c2f-skeleton 1.3s var(--c2f-ease) infinite;
}

@keyframes c2f-skeleton{
  0%{background-position:100% 0}
  100%{background-position:-100% 0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

@media (max-width:900px){
  body{font-size:15px}
  h1{font-size:28px}
  h2{font-size:23px}
  button,.btn,.tab,input,select{min-height:44px}
  .card,.panel,.tile,.kpi{border-radius:18px !important}
  table{font-size:14px}
  thead th,tbody td{padding:11px 12px !important}
}

@media (max-width:640px){
  body{
    padding-bottom:env(safe-area-inset-bottom);
    background:#F8FAFC !important;
  }
  main{padding:12px !important}
  .card,.panel,.tile,.kpi{
    box-shadow:0 8px 24px rgba(17,24,39,.055) !important;
  }
  button,.btn,.tab,input,select,textarea{
    font-size:16px !important;
    min-height:46px;
  }
}

/* Core2Flow Shell: Hauptnavigation und Prozess-Reiter nur visuell veredeln. */
.app-header,
.topbar{
  box-shadow:0 1px 0 rgba(17,24,39,.05), 0 10px 30px rgba(17,24,39,.035) !important;
}

.sidebar{
  background:rgba(255,255,255,.78) !important;
  border:1px solid rgba(229,231,235,.86) !important;
  border-radius:22px !important;
  box-shadow:0 16px 44px rgba(17,24,39,.07) !important;
  backdrop-filter:saturate(1.25) blur(20px);
}

.sidebar-header{
  border-bottom:1px solid rgba(17,24,39,.06) !important;
}

.v-tabs{
  gap:10px !important;
  padding:12px !important;
}

.v-tab{
  min-height:54px !important;
  border:1px solid rgba(229,231,235,.86) !important;
  border-radius:15px !important;
  background:rgba(255,255,255,.76) !important;
  box-shadow:0 1px 2px rgba(17,24,39,.035) !important;
  color:var(--c2f-ink) !important;
}

.v-tab:hover{
  background:rgba(88,162,54,.07) !important;
  border-color:rgba(88,162,54,.22) !important;
}

.v-tab[aria-selected="true"]{
  background:linear-gradient(180deg,#F6FFF2,#EEF9EA) !important;
  border-color:rgba(88,162,54,.38) !important;
  box-shadow:0 10px 24px rgba(88,162,54,.12) !important;
}

.v-tab .step{
  border:0 !important;
  background:#EEF2F0 !important;
  color:var(--c2f-muted) !important;
}

.v-tab[aria-selected="true"] .step{
  background:var(--c2f-primary) !important;
  color:#fff !important;
  box-shadow:0 8px 18px rgba(88,162,54,.22) !important;
}

.v-panel{
  background:transparent !important;
}

.embed-frame,
iframe{
  border-radius:18px !important;
  background:transparent !important;
}

.process-inner-head{
  background:rgba(255,255,255,.88) !important;
  border:1px solid rgba(229,231,235,.9) !important;
  border-radius:18px !important;
  box-shadow:0 10px 30px rgba(17,24,39,.045) !important;
}

.process-inner-tabs{
  gap:8px !important;
}

.process-inner-tab{
  border-radius:999px !important;
  border:1px solid rgba(229,231,235,.92) !important;
  background:#fff !important;
  color:var(--c2f-muted) !important;
  min-height:38px !important;
  padding:.55rem .9rem !important;
}

.process-inner-tab.active{
  background:var(--c2f-primary) !important;
  color:#fff !important;
  border-color:var(--c2f-primary) !important;
  box-shadow:0 9px 22px rgba(88,162,54,.18) !important;
}

.global-assistant{
  border-radius:999px !important;
  box-shadow:0 16px 38px rgba(54,104,36,.25) !important;
}

@media (max-width:700px){
  .mobile-dock{
    border-radius:24px !important;
    box-shadow:0 18px 48px rgba(17,24,39,.16) !important;
  }
  .mobile-dock button{
    min-height:54px !important;
    border-radius:18px !important;
  }
}

/* --------------------------------------------------------------------------
   Design System 2.0 – sichtbare Workspace-Sprache
   Ausschliesslich Darstellung; Struktur und Businesslogik bleiben unveraendert.
   -------------------------------------------------------------------------- */

body{
  background:#F5F7F5 !important;
}

/* Die Arbeitsplattform bekommt eine ruhige, klar erkennbare Produkthuelle. */
.topbar{
  background:rgba(255,255,255,.94) !important;
  border-bottom:1px solid rgba(17,24,39,.06) !important;
  box-shadow:0 8px 32px rgba(17,24,39,.055) !important;
}

.topbar .brand .brand-t .n{
  color:#101713 !important;
  font-weight:820 !important;
  letter-spacing:-.025em !important;
}

.topbar .brand .brand-t .s{
  color:#7B857E !important;
  font-weight:600 !important;
}

.workflow{
  gap:16px !important;
}

.sidebar{
  border:0 !important;
  background:rgba(255,255,255,.96) !important;
  border-radius:20px !important;
  box-shadow:0 14px 44px rgba(17,24,39,.075),0 0 0 1px rgba(17,24,39,.045) !important;
}

.sidebar-header{
  padding:15px 16px 12px !important;
  border-bottom:0 !important;
}

.sidebar-header h2{
  color:#8A948D !important;
  font-size:11px !important;
  font-weight:780 !important;
  letter-spacing:.09em !important;
}

.v-tabs{
  gap:7px !important;
  padding:6px 10px 12px !important;
}

.v-tab{
  min-height:52px !important;
  padding:0 16px !important;
  border:1px solid transparent !important;
  border-radius:14px !important;
  background:transparent !important;
  box-shadow:none !important;
  font-size:14px !important;
  font-weight:680 !important;
  letter-spacing:-.012em !important;
}

.v-tab:hover{
  background:#F1F5F0 !important;
  border-color:transparent !important;
  transform:none !important;
}

.v-tab[aria-selected="true"]{
  color:#fff !important;
  background:linear-gradient(135deg,#4E982F,#62AE43) !important;
  border-color:transparent !important;
  box-shadow:0 9px 22px rgba(69,137,43,.22) !important;
}

.process-inner-head{
  min-height:58px !important;
  padding:8px 12px !important;
  border:0 !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.97) !important;
  box-shadow:0 10px 34px rgba(17,24,39,.06),0 0 0 1px rgba(17,24,39,.045) !important;
}

.process-inner-tabs{
  padding:3px !important;
  gap:4px !important;
  border-radius:14px !important;
  background:#F1F4F1 !important;
}

.process-inner-tab{
  min-height:38px !important;
  padding:0 14px !important;
  border:0 !important;
  border-radius:11px !important;
  background:transparent !important;
  box-shadow:none !important;
  font-size:13px !important;
}

.process-inner-tab.active{
  background:#fff !important;
  color:#244D1B !important;
  box-shadow:0 3px 12px rgba(17,24,39,.09) !important;
}

.embed-frame,iframe{
  border-radius:20px !important;
}

/* Smart Waage: eigene Altregeln gezielt in das neue System ueberfuehren. */
body:has(.weighbox){
  background:#F3F6F3 !important;
  font-size:14px !important;
  color:#17201A !important;
}

body:has(.weighbox) nav{
  height:62px !important;
  padding:8px 14px !important;
  gap:6px !important;
  border:0 !important;
  border-radius:0 0 18px 18px !important;
  box-shadow:0 10px 30px rgba(17,24,39,.055) !important;
}

body:has(.weighbox) nav .tab{
  min-height:42px !important;
  display:inline-flex !important;
  align-items:center !important;
  padding:0 16px !important;
  border:0 !important;
  border-radius:12px !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#68736B !important;
  font-size:14px !important;
}

body:has(.weighbox) nav .tab.active{
  background:#111A14 !important;
  color:#fff !important;
  box-shadow:0 8px 20px rgba(17,24,39,.16) !important;
}

body:has(.weighbox) main{
  padding:14px !important;
  gap:14px !important;
}

body:has(.weighbox) .card,
body:has(.weighbox) .panel{
  border:0 !important;
  border-radius:18px !important;
  background:#fff !important;
  box-shadow:0 12px 36px rgba(17,24,39,.065),0 0 0 1px rgba(17,24,39,.045) !important;
  backdrop-filter:none !important;
}

body:has(.weighbox) .card:hover,
body:has(.weighbox) .panel:hover{
  transform:none !important;
}

body:has(.weighbox) .top{
  min-height:56px !important;
  padding:10px 16px !important;
}

body:has(.weighbox) .top h1{
  font-size:18px !important;
  font-weight:800 !important;
  letter-spacing:-.025em !important;
}

body:has(.weighbox) .workspace{
  gap:14px !important;
  grid-template-columns:minmax(250px,30%) minmax(480px,43%) minmax(250px,27%) !important;
}

body:has(.weighbox) .panel{
  padding:16px !important;
}

body:has(.weighbox) .panel h2{
  margin-bottom:12px !important;
  color:#18211B !important;
  font-size:14px !important;
  font-weight:790 !important;
  letter-spacing:-.015em !important;
}

body:has(.weighbox) .fields{
  gap:10px !important;
}

body:has(.weighbox) .field label{
  margin-bottom:5px !important;
  color:#7A857D !important;
  font-size:10px !important;
  letter-spacing:.055em !important;
}

body:has(.weighbox) .field input,
body:has(.weighbox) .field select,
body:has(.weighbox) .field textarea{
  min-height:44px !important;
  padding:10px 12px !important;
  border:1px solid #E3E8E4 !important;
  border-radius:12px !important;
  background:#FAFBFA !important;
  box-shadow:none !important;
  font-size:14px !important;
}

body:has(.weighbox) .field input:focus,
body:has(.weighbox) .field select:focus,
body:has(.weighbox) .field textarea:focus{
  background:#fff !important;
  border-color:#79B95F !important;
  box-shadow:0 0 0 4px rgba(88,162,54,.12) !important;
}

body:has(.weighbox) .list,
body:has(.weighbox) .history,
body:has(.weighbox) .summary,
body:has(.weighbox) .weighbox{
  border:1px solid #E7EBE7 !important;
  border-radius:14px !important;
  background:#F8FAF8 !important;
}

body:has(.weighbox) .ai{
  border:0 !important;
  border-radius:14px !important;
  background:linear-gradient(145deg,#EFF8EB,#F8FCF6) !important;
  box-shadow:inset 0 0 0 1px rgba(88,162,54,.16) !important;
  padding:12px !important;
}

body:has(.weighbox) .actions{
  gap:8px !important;
}

body:has(.weighbox) .actions .btn{
  min-height:42px !important;
  padding:0 14px !important;
  border-radius:12px !important;
}

@media(max-width:1100px){
  body:has(.weighbox) .workspace{
    grid-template-columns:1fr 1.35fr !important;
  }
  body:has(.weighbox) .right{grid-column:1/-1 !important}
}

@media(max-width:760px){
  body:has(.weighbox) main{padding:10px !important}
  body:has(.weighbox) nav{
    overflow-x:auto !important;
    justify-content:flex-start !important;
  }
  body:has(.weighbox) .workspace{grid-template-columns:1fr !important}
  body:has(.weighbox) .right{grid-column:auto !important}
}

/* --------------------------------------------------------------------------
   Reference Edition – kompakt, praezise, Apple/Linear-orientiert
   Palette und Raster entsprechen der freigegebenen Designreferenz.
   -------------------------------------------------------------------------- */
:root{
  --c2f-primary:#22C55E;
  --c2f-primary-700:#168A43;
  --c2f-primary-100:#ECFDF3;
  --c2f-blue:#3B82F6;
  --c2f-purple:#8B5CF6;
  --c2f-orange:#F59E0B;
  --c2f-red:#EF4444;
  --c2f-ink:#111827;
  --c2f-text:#6B7280;
  --c2f-muted:#8A919C;
  --c2f-bg:#FAFAFA;
  --c2f-card:#FFFFFF;
  --c2f-border:#E5E7EB;
  --c2f-shadow-xs:0 1px 2px rgba(15,23,42,.025);
  --c2f-shadow-sm:0 4px 16px rgba(15,23,42,.045);
  --c2f-shadow-md:0 18px 48px rgba(15,23,42,.10);
  --c2f-radius-sm:8px;
  --c2f-radius:12px;
  --c2f-radius-lg:16px;
}

html,body{
  background:#FAFAFA !important;
}

body{
  color:var(--c2f-text) !important;
  font-size:14px !important;
  line-height:1.42 !important;
}

h1,h2,h3,h4{
  color:var(--c2f-ink) !important;
  letter-spacing:-.025em !important;
}

h1{font-size:28px !important}
h2{font-size:22px !important}
h3{font-size:17px !important}

.card,.panel,.box,.tile,.kpi,.modal,.dialog,.popover,.sheet,
section[class*="card"],aside[class*="card"],main>section,main>aside{
  border:1px solid var(--c2f-border) !important;
  border-radius:12px !important;
  background:#fff !important;
  box-shadow:0 3px 14px rgba(15,23,42,.035) !important;
  backdrop-filter:none !important;
}

.card:hover,.panel:hover,.tile:hover,.kpi:hover{
  transform:none !important;
  border-color:#D8DDE5 !important;
  box-shadow:0 6px 18px rgba(15,23,42,.055) !important;
}

button,.btn,input[type="button"],input[type="submit"],a.button{
  min-height:34px !important;
  padding:0 12px !important;
  border-radius:8px !important;
  border:1px solid var(--c2f-border) !important;
  box-shadow:none !important;
  font-size:12px !important;
  font-weight:700 !important;
}

.primary,.btn.primary,button.primary,.tab.active,nav .active,.active>.tab{
  background:#22C55E !important;
  border-color:#22C55E !important;
  color:#fff !important;
  box-shadow:0 3px 9px rgba(34,197,94,.18) !important;
}

input,select,textarea{
  min-height:34px !important;
  padding:7px 10px !important;
  border-radius:8px !important;
  border-color:#E5E7EB !important;
  background:#fff !important;
  box-shadow:0 1px 2px rgba(15,23,42,.02) !important;
  font-size:12px !important;
}

input:focus,select:focus,textarea:focus,button:focus-visible,.btn:focus-visible{
  border-color:#86EFAC !important;
  box-shadow:0 0 0 3px rgba(34,197,94,.11) !important;
}

.badge,.pill,.chip,.tag,[class*="badge"],[class*="pill"],[class*="chip"]{
  min-height:20px !important;
  padding:2px 7px !important;
  border:0 !important;
  border-radius:999px !important;
  background:#ECFDF3 !important;
  color:#168A43 !important;
  font-size:10px !important;
  font-weight:750 !important;
}

/* Desktop-Shell wie in der Referenz: schmale Seitenleiste, viel Nutzflaeche. */
.topbar{
  height:56px !important;
  padding:0 18px !important;
  background:rgba(255,255,255,.96) !important;
  border-bottom:1px solid #ECEEF1 !important;
  box-shadow:none !important;
}

.topbar .brand{min-width:168px !important}
.topbar .brand .brand-t .n{font-size:13px !important}
.topbar .brand .brand-t .s{font-size:9px !important}
.command-bar{max-width:360px !important}
.command-bar input{height:34px !important;background:#FAFAFA !important}

.app{
  padding-left:12px !important;
  padding-right:12px !important;
}

.workflow{
  grid-template-columns:176px minmax(0,1fr) !important;
  gap:12px !important;
}

.sidebar{
  border:1px solid #E8EAED !important;
  border-radius:14px !important;
  background:#fff !important;
  box-shadow:0 3px 14px rgba(15,23,42,.035) !important;
}

.sidebar-header{
  padding:13px 14px 6px !important;
}

.sidebar-header h2{
  font-size:10px !important;
  color:#9AA1AA !important;
  letter-spacing:.08em !important;
}

.v-tabs{
  padding:5px 8px 10px !important;
  gap:2px !important;
}

.v-tab{
  position:relative !important;
  min-height:38px !important;
  padding:0 10px 0 34px !important;
  border:0 !important;
  border-radius:9px !important;
  color:#687280 !important;
  background:transparent !important;
  box-shadow:none !important;
  font-size:11px !important;
  font-weight:620 !important;
}

.v-tab::before{
  position:absolute;
  left:11px;
  top:50%;
  width:16px;
  transform:translateY(-50%);
  color:#8E98A5;
  font-size:13px;
  line-height:1;
  text-align:center;
}

#tab-cockpit::before{content:"\25C8"}
#tab-haendlerfreigabe::before{content:"\25CE"}
#tab-vertragsmanagement::before{content:"\2197"}
#tab-disposition::before{content:"\21C4"}
#tab-waage::before{content:"\25A3"}
#tab-faktura::before{content:"\2261"}

.v-tab:hover{
  background:#F6F7F7 !important;
  color:#111827 !important;
}

.v-tab[aria-selected="true"]{
  color:#168A43 !important;
  background:#EFFAF2 !important;
  box-shadow:none !important;
}

.v-tab[aria-selected="true"]::before{color:#22C55E !important}

.process-inner-head{
  min-height:48px !important;
  padding:6px 10px !important;
  border:1px solid #E8EAED !important;
  border-radius:12px !important;
  background:#fff !important;
  box-shadow:0 3px 14px rgba(15,23,42,.03) !important;
}

.process-inner-head h2{
  font-size:16px !important;
  padding-left:6px !important;
}

.process-inner-tabs{
  padding:2px !important;
  gap:2px !important;
  background:#F4F5F6 !important;
  border-radius:9px !important;
}

.process-inner-tab{
  min-height:30px !important;
  padding:0 10px !important;
  border:0 !important;
  border-radius:7px !important;
  background:transparent !important;
  color:#7B8490 !important;
  box-shadow:none !important;
  font-size:11px !important;
}

.process-inner-tab.active{
  background:#fff !important;
  color:#111827 !important;
  box-shadow:0 1px 4px rgba(15,23,42,.09) !important;
}

.embed-frame,iframe{border-radius:12px !important}

/* Tabellen werden zu ruhigen Listen-Cards, ohne Informationen zu entfernen. */
table{
  border:1px solid #ECEEF1 !important;
  border-radius:12px !important;
  box-shadow:0 2px 10px rgba(15,23,42,.025) !important;
}

thead th{
  height:38px !important;
  padding:8px 10px !important;
  background:#FAFAFA !important;
  color:#8A919C !important;
  border-bottom:1px solid #ECEEF1 !important;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
  text-transform:none !important;
}

tbody td{
  height:42px !important;
  padding:8px 10px !important;
  color:#4B5563 !important;
  border-bottom:1px solid #F0F1F3 !important;
  font-size:11px !important;
}

tbody tr:hover{background:#FAFCFA !important}

/* KPI-Karten: gleicher Aufbau, dezente semantische Akzente wie in der Referenz. */
.kpis,.kpi-row,[class*="kpi-grid"]{
  gap:8px !important;
}

.kpi{
  position:relative !important;
  min-height:78px !important;
  padding:13px 46px 12px 14px !important;
  overflow:hidden !important;
}

.kpi::after{
  content:"";
  position:absolute;
  top:12px;
  right:12px;
  width:28px;
  height:28px;
  border-radius:50%;
  background:#ECFDF3;
  box-shadow:inset 0 0 0 1px rgba(34,197,94,.08);
}

.kpi:nth-child(5n+2)::after{background:#EFF6FF;box-shadow:inset 0 0 0 1px rgba(59,130,246,.08)}
.kpi:nth-child(5n+3)::after{background:#F5F3FF;box-shadow:inset 0 0 0 1px rgba(139,92,246,.08)}
.kpi:nth-child(5n+4)::after{background:#FFF7ED;box-shadow:inset 0 0 0 1px rgba(245,158,11,.08)}
.kpi:nth-child(5n+5)::after{background:#FEF2F2;box-shadow:inset 0 0 0 1px rgba(239,68,68,.08)}
.kpi b,.kpi .n,.kpi .value{
  color:#111827 !important;
  font-size:20px !important;
  font-weight:760 !important;
  letter-spacing:-.025em !important;
}
.kpi small,.kpi .l,.kpi .label{
  color:#8A919C !important;
  font-size:10px !important;
  font-weight:620 !important;
}

/* Prozessseiten: kompakt und konsequent statt grosser ERP-Flaechen. */
body:has(.weighbox) nav{
  height:48px !important;
  padding:6px 10px !important;
  border-radius:0 !important;
  border-bottom:1px solid #ECEEF1 !important;
  box-shadow:none !important;
}

body:has(.weighbox) nav .tab{
  min-height:32px !important;
  padding:0 11px !important;
  border-radius:8px !important;
  font-size:11px !important;
}

body:has(.weighbox) nav .tab.active{
  background:#22C55E !important;
  color:#fff !important;
  box-shadow:0 3px 8px rgba(34,197,94,.18) !important;
}

body:has(.weighbox) main{padding:10px !important;gap:10px !important}
body:has(.weighbox) .workspace{gap:10px !important}
body:has(.weighbox) .card,body:has(.weighbox) .panel{
  border:1px solid #E8EAED !important;
  border-radius:12px !important;
  box-shadow:0 3px 14px rgba(15,23,42,.035) !important;
}
body:has(.weighbox) .panel{padding:11px !important}
body:has(.weighbox) .top{min-height:46px !important;padding:8px 12px !important}
body:has(.weighbox) .top h1{font-size:15px !important}
body:has(.weighbox) .fields{gap:7px !important}
body:has(.weighbox) .field input,
body:has(.weighbox) .field select,
body:has(.weighbox) .field textarea{
  min-height:36px !important;
  padding:7px 9px !important;
  border-radius:8px !important;
  font-size:12px !important;
}
body:has(.weighbox) .list,
body:has(.weighbox) .history,
body:has(.weighbox) .summary,
body:has(.weighbox) .weighbox,
body:has(.weighbox) .ai{border-radius:10px !important}

/* Mobile wie in der Referenz: Content zuerst, feste Navigation unten. */
@media(max-width:700px){
  :root{--top-offset:56px !important}
  body{padding-bottom:76px !important;background:#FAFAFA !important}
  .topbar{
    height:56px !important;
    padding:env(safe-area-inset-top) 12px 0 !important;
  }
  .topbar .brand{min-width:0 !important;margin:auto !important}
  .topbar .brand .brand-t .n{font-size:12px !important}
  .topbar .brand .brand-t .s{display:none !important}
  .logout-btn{min-width:34px !important;width:34px !important;padding:0 !important}
  .app{
    padding:calc(62px + env(safe-area-inset-top)) 6px calc(76px + env(safe-area-inset-bottom)) !important;
  }
  .workflow{display:block !important}
  .sidebar{display:none !important}
  .menu-toggle{display:none !important}
  .v-panel,.embed-frame{
    width:100% !important;
    border-radius:10px !important;
  }
  .process-inner-head{
    min-height:44px !important;
    padding:5px 7px !important;
    overflow-x:auto !important;
  }
  .process-inner-head h2{font-size:15px !important;white-space:nowrap !important}
  .process-inner-tabs{flex:0 0 auto !important;white-space:nowrap !important}
  .mobile-dock{
    display:grid !important;
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    z-index:190 !important;
    grid-template-columns:repeat(4,1fr) !important;
    gap:0 !important;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom)) !important;
    border:0 !important;
    border-top:1px solid #E5E7EB !important;
    border-radius:0 !important;
    background:rgba(255,255,255,.97) !important;
    box-shadow:0 -8px 24px rgba(15,23,42,.055) !important;
    backdrop-filter:blur(18px) saturate(160%) !important;
  }
  .mobile-dock button{
    min-height:48px !important;
    padding:4px 2px !important;
    border:0 !important;
    border-radius:8px !important;
    background:transparent !important;
    color:#8A919C !important;
    box-shadow:none !important;
    font-size:9px !important;
  }
  .mobile-dock button span{font-size:17px !important}
  .mobile-dock button.active{
    color:#168A43 !important;
    background:#EFFAF2 !important;
  }
  .global-assistant{
    left:auto !important;
    right:12px !important;
    bottom:calc(66px + env(safe-area-inset-bottom)) !important;
    width:auto !important;
    height:38px !important;
    min-height:38px !important;
    padding:0 13px !important;
    border-radius:999px !important;
    font-size:11px !important;
    box-shadow:0 8px 22px rgba(15,23,42,.13) !important;
  }
  body:has(.weighbox){padding-bottom:10px !important}
  body:has(.weighbox) nav{position:sticky !important;top:0 !important;z-index:20 !important;overflow-x:auto !important}
  body:has(.weighbox) .workspace{grid-template-columns:1fr !important}
  body:has(.weighbox) .camera-grid{height:auto !important;min-height:190px !important}
  body:has(.weighbox) .fields{grid-template-columns:1fr !important}
  body:has(.weighbox) .field.span2,
  body:has(.weighbox) .field.span3{grid-column:auto !important}
  .kpis,.kpi-row,[class*="kpi-grid"]{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  .kpi{
    min-width:0 !important;
    min-height:86px !important;
    padding:12px 38px 11px 12px !important;
  }
  .kpi b,.kpi .n,.kpi .value{font-size:18px !important}
}