/*
 * NovaCore 6.1.56 · Modern UI · Schritt 1: Designsystem
 * Rein visuelle Vereinheitlichung. Keine Navigations-, Preis-, Import-,
 * Synchronisations- oder Berechnungslogik wird hier verändert.
 */

:root{
  --nc-bg-0:#07101a;
  --nc-bg-1:#0a1420;
  --nc-bg-2:#0d1825;
  --nc-surface-1:#101c2a;
  --nc-surface-2:#132131;
  --nc-surface-3:#17283a;
  --nc-border:rgba(159,184,211,.14);
  --nc-border-strong:rgba(159,184,211,.22);
  --nc-text:#f2f6fb;
  --nc-text-2:#c2ceda;
  --nc-muted:#8798aa;
  --nc-accent:#36c9f4;
  --nc-accent-2:#5f8dff;
  --nc-success:#58d68d;
  --nc-warning:#efbd5f;
  --nc-danger:#f06f82;
  --nc-info:#73b7ff;
  --nc-radius-xs:8px;
  --nc-radius-sm:10px;
  --nc-radius-md:14px;
  --nc-radius-lg:18px;
  --nc-radius-xl:22px;
  --nc-shadow-sm:0 6px 18px rgba(0,0,0,.18);
  --nc-shadow-md:0 14px 36px rgba(0,0,0,.22);
  --nc-focus:0 0 0 3px rgba(54,201,244,.14);

  /* vorhandene Variablen auf das Designsystem mappen */
  --bg:var(--nc-bg-0);
  --bg2:var(--nc-bg-1);
  --surface:var(--nc-surface-1);
  --surface2:var(--nc-surface-2);
  --surface3:var(--nc-surface-3);
  --line:var(--nc-border);
  --line2:var(--nc-border-strong);
  --text:var(--nc-text);
  --muted:var(--nc-muted);
  --soft:var(--nc-text-2);
  --green:var(--nc-success);
  --gold:var(--nc-warning);
  --brand-cyan:var(--nc-accent);
  --brand-blue:var(--nc-accent-2);
  --shadow:var(--nc-shadow-md);
  --radius:var(--nc-radius-lg);
  --radius-sm:var(--nc-radius-sm);
}

html{
  background:var(--nc-bg-0);
}
body{
  color:var(--nc-text);
  font-family:"Segoe UI Variable Text","Segoe UI",Inter,Arial,sans-serif;
  font-size:14px;
  line-height:1.5;
  background:
    radial-gradient(circle at 13% -10%,rgba(54,201,244,.07),transparent 30%),
    radial-gradient(circle at 94% -8%,rgba(95,141,255,.055),transparent 26%),
    linear-gradient(180deg,var(--nc-bg-0),#08111c 44%,#070f18);
}
body::before{
  opacity:.28;
  background:linear-gradient(180deg,rgba(255,255,255,.018),transparent 12%,transparent 88%,rgba(255,255,255,.012));
}

/* Typografie: klare Hierarchie, weniger übertriebene Größen/Glow */
h1,h2,h3,h4,strong,.brand-name{letter-spacing:-.018em}
.page-header h1,.hero-copy h1{font-weight:780}
.page-header p,.hero-copy p,.side-sub,.status-sub{color:var(--nc-muted)}
.eyebrow,
.storage-field label,
th{
  letter-spacing:.085em;
}

/* App-Chrome */
.appbar{
  height:68px;
  padding:0 18px;
  gap:14px;
  background:rgba(7,14,24,.93);
  border-bottom:1px solid var(--nc-border);
  box-shadow:0 10px 28px rgba(0,0,0,.22);
}
.brand{gap:10px}
.brand-mark{
  width:38px;height:38px;border-radius:11px;
  background:var(--nc-surface-2);
  box-shadow:inset 0 0 0 1px var(--nc-border-strong),0 6px 16px rgba(0,0,0,.2);
}
.brand img{width:32px;height:32px;border-radius:8px}
.brand-name{font-size:17px;font-weight:780}
.brand-sub{color:var(--nc-muted);font-size:10.5px}
.tabbar{gap:5px}
.tab{
  padding:9px 12px;
  border-radius:10px;
  color:#c8d2dc;
  font-weight:650;
  transition:background .14s ease,border-color .14s ease,color .14s ease;
}
.tab:hover{
  transform:none;
  background:rgba(255,255,255,.035);
  border-color:var(--nc-border);
}
.tab.active{
  color:#f7fbff;
  background:rgba(54,201,244,.09);
  border-color:rgba(54,201,244,.22);
  box-shadow:none;
}
.tab.active::after{
  left:12px;right:12px;bottom:-10px;height:2px;
  background:var(--nc-accent);
}
.actions{gap:7px}

/* Buttons: eine Sprache statt vieler Gradient-Stile */
.btn,
.toolbar-btn,
.factory-group-tab,
.factory-section-tab,
.recipe-hub-tab,
.production-times-filter,
.nc-auto-sync-options button,
.nc-scale-option{
  border-color:var(--nc-border)!important;
  background:var(--nc-surface-2)!important;
  color:#e9f0f7!important;
  box-shadow:none!important;
  border-radius:var(--nc-radius-sm)!important;
  transition:background .14s ease,border-color .14s ease,color .14s ease,transform .14s ease!important;
}
.btn{padding:9px 12px}
.btn:hover,
.toolbar-btn:hover,
.factory-group-tab:hover,
.factory-section-tab:hover,
.recipe-hub-tab:hover,
.production-times-filter:hover,
.nc-auto-sync-options button:hover,
.nc-scale-option:hover{
  transform:translateY(-1px);
  background:var(--nc-surface-3)!important;
  border-color:var(--nc-border-strong)!important;
}
.btn:focus-visible,
.tab:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:none!important;
  box-shadow:var(--nc-focus)!important;
  border-color:rgba(54,201,244,.48)!important;
}
.btn.login,
.global-sync-btn{
  background:linear-gradient(180deg,rgba(48,137,210,.96),rgba(38,105,181,.96))!important;
  border-color:rgba(115,183,255,.42)!important;
  color:#fff!important;
  box-shadow:none!important;
  font-weight:760!important;
}
.btn.login:hover,
.global-sync-btn:hover{
  background:linear-gradient(180deg,rgba(56,151,226,.98),rgba(42,116,196,.98))!important;
}
.global-sync-btn{min-width:136px}
.btn.ghost-red{
  background:rgba(240,111,130,.08)!important;
  border-color:rgba(240,111,130,.22)!important;
  color:#ffcad2!important;
}
.btn.ghost-red:hover{background:rgba(240,111,130,.13)!important}
.btn:disabled,button:disabled{opacity:.45;filter:saturate(.7)}
.version-chip{
  min-width:auto;
  padding:7px 10px;
  border-radius:999px;
  border-color:var(--nc-border);
  background:rgba(255,255,255,.025);
  color:var(--nc-muted);
  font-size:10.5px;
  letter-spacing:.03em;
}

/* Flächen/Karten */
.panel,
.station,
.hero-card,
.statusbar,
.storage-metric,
.storage-capacity,
.sawmill-recipe-card,
.recipe-hub-selector,
.recipe-hub-workspace,
.production-times-group,
.production-time-card,
.announcement,
.modal,
.business-card,
.vapi-result-card{
  border-color:var(--nc-border)!important;
  box-shadow:var(--nc-shadow-sm)!important;
}
.panel,
.station,
.recipe-hub-workspace,
.business-card,
.vapi-result-card{
  background:linear-gradient(180deg,rgba(15,27,41,.94),rgba(11,21,33,.96))!important;
  border-radius:var(--nc-radius-lg)!important;
}
.hero-card{
  border-radius:var(--nc-radius-xl);
  background:linear-gradient(135deg,rgba(13,25,39,.96),rgba(10,20,32,.96))!important;
  min-height:184px;
}
.hero-card::before{
  background:linear-gradient(90deg,rgba(7,15,25,.90),rgba(7,15,25,.72) 48%,rgba(7,15,25,.48))!important;
}
.hero-card::after{
  background:radial-gradient(circle at 18% 15%,rgba(54,201,244,.095),transparent 24%),radial-gradient(circle at 82% 18%,rgba(95,141,255,.075),transparent 25%)!important;
}
.hero-bg{opacity:.26!important;filter:saturate(.86) contrast(.96)!important}
.hero-content{padding:22px 24px 16px}
.stats{gap:10px;padding:0 24px 22px}
.stat{
  border-radius:var(--nc-radius-md);
  border-color:var(--nc-border);
  background:rgba(17,31,46,.90);
  box-shadow:none;
  padding:14px 15px;
  min-height:96px;
}
.stat::before{opacity:.28}
.stat-icon{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.045)}
.stat strong{font-size:29px;font-weight:760}
.statusbar{
  border-radius:var(--nc-radius-md);
  background:rgba(14,26,39,.92);
  padding:12px 15px;
  box-shadow:none!important;
}
.station{margin-bottom:12px}
.station-head{
  padding:15px 17px;
  background:rgba(20,34,49,.86)!important;
  border-bottom-color:var(--nc-border)!important;
}
.station-head h2{font-size:20px}
.side-panel{padding:16px}
.side-title{font-size:23px}
.nav{border-radius:11px;padding:11px 12px}
.nav:hover{background:rgba(255,255,255,.035)}

/* Formulare */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea,
.storage-select,
.production-time-skill input{
  min-height:40px;
  border:1px solid var(--nc-border)!important;
  border-radius:var(--nc-radius-sm)!important;
  background:#0c1723!important;
  color:var(--nc-text)!important;
  box-shadow:none!important;
}
input::placeholder,textarea::placeholder{color:#65788b!important}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):hover,
select:hover,
textarea:hover{border-color:var(--nc-border-strong)!important}
.mini-search{
  height:43px;
  padding:0 12px;
  border-color:var(--nc-border);
  background:#0d1824;
  border-radius:var(--nc-radius-sm);
}

/* Tabellen */
.tablewrap{
  border-radius:0 0 var(--nc-radius-lg) var(--nc-radius-lg);
  scrollbar-color:#344a60 transparent;
}
table{font-size:13.5px}
th{
  background:#111e2b!important;
  color:#91a3b6!important;
  font-size:10.5px!important;
  font-weight:760!important;
  padding:11px 15px!important;
  border-bottom:1px solid var(--nc-border)!important;
}
td{
  padding:12px 15px!important;
  border-top-color:rgba(159,184,211,.085)!important;
}
tbody tr:hover td{background:rgba(54,201,244,.025)!important}
.price{font-size:15px}
.company-chip,
.demand,
.pill,
.manual-badge,
.system-state{
  border-radius:999px!important;
  box-shadow:none!important;
}

/* Semantik: dieselben Farben bedeuten überall dasselbe */
.pill.live,
.storage-status.ok,
.system-state.ok,
.success,
.status-success{
  color:#bff4d2!important;
}
.pill.live{background:rgba(88,214,141,.10)!important;border-color:rgba(88,214,141,.24)!important}
.announcement.success{background:#10261d!important;border-color:rgba(88,214,141,.24)!important}
.announcement.warning{background:#2a2314!important;border-color:rgba(239,189,95,.25)!important}
.announcement.error{background:#2a171d!important;border-color:rgba(240,111,130,.25)!important}
.storage-status.error,.status-error,.error{color:#ff9aa9}
.demand{background:rgba(88,214,141,.11);color:#aef0c8}
.demand.medium{background:rgba(239,189,95,.12);color:#f7d58f}
.demand.low{background:rgba(240,111,130,.12);color:#ffb1bc}

/* Modale/Benachrichtigungen */
.modal{
  background:#0e1925!important;
  border-radius:var(--nc-radius-xl)!important;
  box-shadow:0 28px 80px rgba(0,0,0,.46)!important;
}
.announcement{
  border-radius:var(--nc-radius-md);
  background:#111e2b;
  box-shadow:var(--nc-shadow-md)!important;
}

/* Produktions- und Rezeptkarten ruhiger */
.sawmill-recipe-card,
.recipe-hub-option,
.production-time-card,
.production-time-variant{
  background:rgba(14,25,38,.92)!important;
  border-color:var(--nc-border)!important;
  box-shadow:none!important;
}
.recipe-hub-option{border-radius:var(--nc-radius-md)!important}
.recipe-hub-option.active{
  background:rgba(54,201,244,.07)!important;
  border-color:rgba(54,201,244,.32)!important;
  box-shadow:none!important;
}
.production-times-group{background:rgba(12,22,34,.82)!important;border-radius:var(--nc-radius-lg)!important}
.production-times-filter.active,
.nc-auto-sync-options button.active,
.nc-scale-option.active{
  background:rgba(54,201,244,.10)!important;
  border-color:rgba(54,201,244,.32)!important;
  color:#f4fbff!important;
}

/* Standardansicht etwas kompakter, ohne die vorhandenen drei Skalierungen zu ersetzen */
.main{padding:19px 22px 50px}
body.ui-scale-compact .main{padding:14px 18px 44px}
body.ui-scale-compact .panel,
body.ui-scale-compact .station{border-radius:12px!important}
body.ui-scale-large .main{padding:22px 26px 58px}
body.ui-scale-large .btn{padding:10px 13px}

/* Scrollbars dezent und einheitlich */
*{scrollbar-width:thin;scrollbar-color:#31465a transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#31465a;border-radius:999px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:#425d77;background-clip:padding-box}

@media(max-width:1100px){
  .appbar{gap:10px;padding:0 12px}
  .tab{padding:8px 10px}
  .main{padding-left:16px;padding-right:16px}
}

@media(prefers-reduced-motion:reduce){
  .btn,.tab,.nav,.recipe-hub-option{transition:none!important}
}