/* Zapasio UI Design Master 1.1 – reversible local test layer. */
:root{
  --zapasio-green-900:#123F2D;--zapasio-green-800:#194C37;
  --zapasio-olive-600:#637C43;--zapasio-sage-300:#DCE4CF;
  --zapasio-sage-150:#EDF1E7;--zapasio-cream:#F5F1E8;
  --zapasio-surface:#FFFDF8;--zapasio-text:#17221D;
  --zapasio-text-muted:#667069;--zapasio-border:#E4E2DA;
  --zapasio-warning:#B66A12;--zapasio-warning-bg:#FFF4DE;
  --zapasio-danger:#B83A32;--zapasio-danger-bg:#FFF0ED;
  --zapasio-success:#477332;--zapasio-success-bg:#EDF5E7;
  --z-color-primary:var(--zapasio-green-900);--z-color-primary-dark:var(--zapasio-green-900);
  --z-color-accent:var(--zapasio-olive-600);--z-color-page:var(--zapasio-cream);
  --z-color-surface:var(--zapasio-surface);--z-color-text:var(--zapasio-text);
  --z-color-muted:var(--zapasio-text-muted);--z-color-border:var(--zapasio-border);
  --g:var(--zapasio-green-900);--bg:var(--zapasio-cream);
  --card:var(--zapasio-surface);--text:var(--zapasio-text);
  --muted:var(--zapasio-text-muted);--line:var(--zapasio-border);
  --gs-cream:var(--zapasio-cream);--gs-white:var(--zapasio-surface);
  --gs-green-950:var(--zapasio-green-900);--gs-green-900:var(--zapasio-green-800);
  --gs-ink:var(--zapasio-text);--gs-soft:var(--zapasio-text-muted);
  --gs-radius:12px;--gs-shadow:0 4px 14px rgba(18,63,45,.07);
  --gs-shadow-soft:0 4px 14px rgba(18,63,45,.05);
  --z-radius-card:12px;
}
html,body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;background:var(--zapasio-cream);color:var(--zapasio-text)}
.appShell{grid-template-columns:224px minmax(0,1fr);width:100%;min-width:0;max-width:100%}
.appMain{width:100%;min-width:0;max-width:100%;overflow-x:clip}
.sidebar{width:224px;padding:22px 12px 16px;background:var(--zapasio-green-900);box-shadow:none}
.sidebarBrand{min-height:70px;padding:3px 12px 21px;gap:12px}
.sidebarBrand img{background:transparent;border-radius:8px!important}
.sidebarBrand strong{font-size:21px;letter-spacing:0;color:#fff}
.sideNav{gap:1px;min-height:0;scrollbar-width:thin}
.sideNavBtn,.zNavToggle155{font-size:15px;border-radius:10px;min-height:48px;color:#f6faf6;padding:10px 12px;box-shadow:none}
.zNavToggle155{font-size:15px}
.sideNavBtn.active,.sideNavBtn.zNavToday155.active,.zNavGroup155:has(.sideNavBtn.active)>.zNavToggle155{background:#ffffff2b;color:white;box-shadow:none;border-color:transparent}
.sideNavBtn.active .navIcon{color:#fff}
.zNavGroup155{border:0;padding:0}
.zNavGroup155[data-group=system]{margin-top:auto;border-top:1px solid #ffffff40;padding-top:12px}
.zNavGroup155[data-group=system]>.zNavChildren155{display:grid;gap:3px;padding:0}
.zNavGroup155[data-group=system]>.zNavChildren155 .sideNavBtn{padding-left:12px}
.zNavGroup155[data-group=system]>.zNavChildren155 .sideNavBtn:before{display:none}
.zNavGroup155[data-group=system]>.zNavChildren155 .sideNavBtn:first-child:before{display:none}
.zNavChildren155{padding-left:15px}
.zNavChildren155>.zPrimaryHidden158{display:none!important}
.zNavToggle155[hidden]{display:none!important}
#sidebarLogin133[hidden]{display:none!important}
.sidebarFooter .sidebarStatus{font-size:13px}
.sidebarFooter .sidebarStatus i{background:var(--zapasio-text-muted)}
.sidebarFooter .sidebarStatus.zConnected158 i{background:var(--zapasio-success)}
.sidebarFooter .activeUserBox{margin-top:8px}
.sidebarFooter .activeUserBox label{font-size:13px}
.appMain>.topbar{height:74px;min-height:74px;width:100%;box-sizing:border-box;overflow:hidden;display:flex!important;align-items:center;justify-content:space-between;padding:10px 32px;background:var(--zapasio-surface);border-bottom:1px solid var(--zapasio-border);color:var(--zapasio-text);box-shadow:none;gap:20px}
.topbarBrand{width:205px;height:52px;flex:none}
.topbarBrand img{width:258px!important;left:-31px;top:-39px;mix-blend-mode:multiply}
.zHeaderInfo158{margin-left:auto;display:flex;flex:0 0 auto;align-items:center;gap:18px;font-size:14px;min-width:0}
.zBusiness158{padding:10px 15px;border:1px solid var(--zapasio-border);border-radius:10px;font-weight:650}
.zLive158{display:flex;align-items:center;gap:7px;white-space:nowrap;font-size:14px}
.zLive158 i{width:8px;height:8px;border-radius:50%;background:var(--zapasio-text-muted);flex:none}
.zLive158.online i{background:var(--zapasio-success)}
.zAvatar158{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--zapasio-olive-600);color:#fff;font-weight:700;flex:none}
.zUserName158{font-weight:600}
.contentWrap{width:100%;max-width:1280px;min-width:0;box-sizing:border-box;padding:28px 32px 64px}
.contentWrap>.tabPanel{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
#tabRanking>.card,#desktopRanking118{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
#tabRanking>.card{overflow:hidden}
#tabRanking .rankingPodium118{width:100%;min-width:0;grid-template-columns:repeat(3,minmax(0,1fr))}
#tabRanking .rankingPlace118{min-width:0;overflow-wrap:anywhere;background:var(--zapasio-sage-150);border-color:var(--zapasio-border)}
#tabRanking .rankingMedal118{background:var(--zapasio-olive-600)}
#tabRanking .rankingRow118{min-width:0;max-width:100%;box-sizing:border-box}
.card,.dashboardCard,.calcCard143,.purchasePage,.planningShell>.card,.dashPanel140{border:1px solid var(--zapasio-border);border-radius:12px;background:var(--zapasio-surface);box-shadow:0 4px 14px rgba(18,63,45,.05)}
.contentWrap h1,.mobileWorkApp h1{color:var(--zapasio-green-900)}
.contentWrap p,.contentWrap li,.contentWrap td,.mobileWorkApp p{line-height:1.45}
.pageHeader,.mobileSimpleHeader{background:transparent}
.pageHeader h1{font-size:clamp(30px,3vw,40px)!important;letter-spacing:-.025em}
.pageHeader p{color:var(--zapasio-text-muted)}
.contentWrap .primary,.mobileWorkApp .primary,.modal .primary{background:var(--zapasio-green-900);color:#fff}
.contentWrap .soft,.mobileWorkApp .soft,.modal .soft{background:var(--zapasio-surface);color:var(--zapasio-green-900);border:1px solid var(--zapasio-border)}
.contentWrap button,.mobileWorkApp button,.modal button{border-radius:10px}
.contentWrap button:focus-visible,.mobileWorkApp button:focus-visible,.sidebar button:focus-visible,.modal button:focus-visible,.mobileBottomNav button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--zapasio-olive-600);outline-offset:2px}
.contentWrap :is(input,textarea,select),.mobileWorkApp :is(input,textarea,select){max-width:100%;min-height:48px;border-color:var(--zapasio-border)}
.contentWrap :is(.card,.dashboardCard,.purchasePage) :is(button,summary){min-height:44px}
.field label{color:var(--zapasio-text);font-size:14px}
.muted,.tiny,.planMuted{color:var(--zapasio-text-muted)}
.contentWrap table th,.contentWrap table td{padding:12px;vertical-align:middle}
.contentWrap table tr{min-height:48px}
.contentWrap :is(.warning,.stockLow,.planWarn){border-color:var(--zapasio-warning);background:var(--zapasio-warning-bg)}
.contentWrap :is(.dangerNotice,.dangerAlert){background:var(--zapasio-danger-bg)}
.mobileWorkCard,.mobileTask,.stockCard,.stockFold,.planFold,.settingsFold{border-radius:12px}
.modal .card,dialog{border-radius:12px}
.modal .close,dialog header button[aria-label*="Schließ"],.imageModal button[aria-label*="Schließ"]{min-width:48px;min-height:48px}
.zDesktop158,.zMobile158{display:grid;gap:16px}
.zDesktop158 svg,.zMobile158 svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.zGreeting158 h1{font-size:clamp(36px,3.4vw,44px);line-height:1.1;letter-spacing:-.035em;margin:0 0 2px}
.zStatusCard158,.zNextCard158,.zPanel158,.zModule158{border:1px solid var(--zapasio-border);border-radius:12px;box-shadow:0 4px 14px rgba(18,63,45,.04)}
.zStatusCard158{background:var(--zapasio-sage-150);padding:22px 24px;display:flex;align-items:center;gap:20px;min-height:110px}
.zStatusCard158.hasAttention{background:var(--zapasio-warning-bg)}
.zStatusCard158.hasCritical{background:var(--zapasio-danger-bg)}
.zStatusIcon158{background:var(--zapasio-olive-600);color:#fff;border-radius:50%;width:56px;height:56px;display:grid;place-items:center;flex:none}
.hasAttention .zStatusIcon158{background:var(--zapasio-warning)}
.hasCritical .zStatusIcon158{background:var(--zapasio-danger)}
.zStatusIcon158 svg{width:34px;height:34px;stroke-width:2.4}
.zStatusCard158 strong{display:block;font-size:24px;line-height:1.25}
.zStatusCard158 small{font-size:16px;line-height:1.4;display:block;margin-top:4px}
.zNextCard158{background:var(--zapasio-surface);display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:center;gap:18px;padding:18px 22px}
.zNextIcon158{background:var(--zapasio-sage-150);border-radius:50%;width:56px;height:56px;display:grid;place-items:center;color:var(--zapasio-green-900)}
.zNextIcon158 svg{width:30px;height:30px}
.zNextCard158 small{display:block;color:var(--zapasio-olive-600);font-size:14px;font-weight:700;margin-bottom:2px}
.zNextCard158 strong{font-size:19px;line-height:1.35;display:block}
.zNextCard158 p{font-size:15px;color:var(--zapasio-text-muted);margin:3px 0 0}
.zNextCard158 button{min-height:48px;min-width:156px}
.zModules158{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.zModule158{min-width:0;text-align:left;background:var(--zapasio-sage-150);color:var(--zapasio-text);padding:17px;min-height:170px;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.zModule158.notice{background:var(--zapasio-warning-bg)}
.zModule158 svg{width:28px;height:28px;margin-bottom:8px;color:var(--zapasio-green-900)}
.zModule158.notice svg,.zModule158.notice strong{color:#915111}
.zModule158 span{font-weight:700;font-size:17px;line-height:1.2}
.zModule158 strong{font-size:33px;line-height:1.2;font-variant-numeric:tabular-nums;color:var(--zapasio-green-900)}
.zModule158 strong.zDate158{font-size:21px;margin-top:7px}
.zModule158 small{font-size:14px;color:var(--zapasio-text-muted);line-height:1.3}
.zPanel158{background:var(--zapasio-surface);padding:16px 18px}
.zPanel158 h2{margin:0 0 14px;font-size:18px;color:var(--zapasio-text)}
.zQuickActions158{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.zQuickActions158 button{min-height:60px;display:flex;align-items:center;gap:10px;text-align:left;padding:10px 14px;background:var(--zapasio-surface);color:var(--zapasio-text);border:1px solid var(--zapasio-border);font-weight:650;font-size:15px}
.zQuickActions158 svg{color:var(--zapasio-green-900)}
.zAttention158{padding-bottom:10px}
.zAttentionRow158{width:100%;display:grid;grid-template-columns:28px minmax(0,1fr) auto 12px;align-items:center;gap:9px;min-height:52px;border:0;border-top:1px solid var(--zapasio-border);border-radius:0;text-align:left;padding:8px 4px;background:transparent;color:var(--zapasio-text)}
.zAttentionRow158>span:first-child{color:var(--zapasio-warning)}
.zAttentionRow158.critical>span:first-child{color:var(--zapasio-danger)}
.zAttentionRow158 b{font-size:15px;font-weight:650}
.zAttentionRow158 small{font-size:14px;color:var(--zapasio-text-muted)}
.zChevron158{font-size:23px}
.zEmpty158{margin:4px 0 0;color:var(--zapasio-text-muted);font-size:15px}
.zMobile158{padding:0 0 32px}
.zMobileSearch158{display:grid;grid-template-columns:24px minmax(0,1fr) 48px;align-items:center;gap:8px;border:1px solid var(--zapasio-border);border-radius:12px;background:var(--zapasio-surface);padding:4px 5px 4px 12px}
.zMobileSearch158 input{border:0!important;background:transparent!important;min-width:0!important;box-shadow:none!important;padding:8px 4px!important}
.zMobileSearch158 button{height:48px;width:48px;display:grid;place-items:center;background:transparent;color:var(--zapasio-green-900);padding:0}
.zMobileSearch158 svg{color:var(--zapasio-green-900)}
.srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.zMobileActions158{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.zMobileActions158 button{min-height:98px;background:var(--zapasio-surface);border:1px solid var(--zapasio-border);color:var(--zapasio-text);display:grid;place-content:center;justify-items:center;gap:8px;font-size:15px}
.zMobileActions158 svg{width:30px;height:30px;color:var(--zapasio-green-900)}
.zPanelHead158{display:flex;align-items:center;justify-content:space-between;gap:12px}
.zPanelHead158 h2{margin-bottom:0}
.zPanelHead158 .soft{min-height:44px;padding:8px 12px;font-size:14px}
.zTaskRow158{min-height:60px;border-top:1px solid var(--zapasio-border);display:flex;align-items:center;gap:12px;font-size:15px;line-height:1.45}
.zTaskRow158:first-of-type{margin-top:12px}
.zTaskRow158 input{width:24px;height:24px;min-height:24px;accent-color:var(--zapasio-green-900);flex:none}
.zPersonalImage158 img{display:block;max-height:160px;max-width:100%;border-radius:12px;object-fit:cover}
.zPersonalImage158{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.zPersonalImage158 img{flex-basis:100%}
.mobileBottomNav{background:var(--zapasio-surface)!important;border-top:1px solid var(--zapasio-border)!important}
.mobileBottomNav button{color:var(--zapasio-text-muted)}
.mobileBottomNav button.active{color:var(--zapasio-green-900)!important;background:var(--zapasio-sage-150)!important}
.mobileBottomNav svg{width:22px;height:22px}
.faqGroup156{background:var(--zapasio-surface);border:1px solid var(--zapasio-border);border-radius:12px;padding:0;margin:0 0 12px;overflow:hidden}
.faqGroup156>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;padding:17px 20px;min-height:56px;font-weight:700;font-size:18px;color:var(--zapasio-green-900)}
.faqGroup156>summary::-webkit-details-marker{display:none}
.faqGroup156>summary::after{content:'+';font-size:25px;font-weight:400}
.faqGroup156[open]>summary::after{content:'−'}
.faqGroup156 .faqItem156{margin:0 16px 10px;border-radius:10px}
.faqGroup156 .faqItem156:first-of-type{margin-top:6px}
.faq156{border:0;box-shadow:none;padding:0;background:transparent}
.zHelpTopics158{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 24px}
.zHelpTopics158 button{min-height:48px}
#opsDialog92{box-sizing:border-box;max-width:min(940px,calc(100vw - 24px));overflow-x:hidden}
#opsDialog92 .opsBody92{min-width:0;max-width:100%;box-sizing:border-box;overflow-x:hidden}
#opsDialog92 .securityCheck139{display:flex;align-items:flex-start;max-width:100%;box-sizing:border-box;gap:12px}
#opsDialog92 .securityCheck139 input[type="checkbox"]{width:22px!important;min-width:22px!important;max-width:22px!important;height:22px!important;min-height:22px!important;margin:2px 0 0;padding:0;flex:0 0 22px}
#opsDialog92 .securityCheck139>span{display:block;min-width:0;overflow-wrap:anywhere;line-height:1.45}
#opsDialog92 .securityCheck139 .privacyMeta139{display:block;font-size:13px}
.dashboardWarnings .warningGroupHead,#alerts .warningGroupHead,#stockWarnings .warningGroupHead{display:grid;grid-template-columns:minmax(0,1fr) 80px 30px;align-items:start;gap:8px}
.dashboardWarnings .warningGroupHead>div,#alerts .warningGroupHead>div,#stockWarnings .warningGroupHead>div{min-width:0;overflow-wrap:anywhere}
.dashboardWarnings .warningGroupBadge,#alerts .warningGroupBadge,#stockWarnings .warningGroupBadge{width:80px;box-sizing:border-box;justify-content:center;white-space:nowrap}
.dashboardWarnings .warningFoldToggle,#alerts .warningFoldToggle,#stockWarnings .warningFoldToggle{margin:0;grid-column:3}
#tabPlanning .planningTools135{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;max-width:100%;box-sizing:border-box}
#tabPlanning .planningTools135 input{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
#tabPlanning .planningTools135 button{min-width:0;white-space:normal;line-height:1.3}
@media(max-width:1199px){.zModules158{grid-template-columns:repeat(2,minmax(0,1fr))}.zQuickActions158{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1100px){#tabPlanning .planningTools135{grid-template-columns:repeat(2,minmax(0,1fr))}#tabPlanning .planningTools135 input{grid-column:1/-1}#tabPlanning .planningTools135 button{width:100%}}
@media(min-width:821px) and (max-width:1050px){.zBusiness158,.zUserName158{display:none}.zHeaderInfo158{gap:12px}}
@media(max-width:820px){
  .appShell{display:block}
  .sidebar{width:min(320px,88vw)}
  .appMain>.topbar{height:65px;min-height:65px;padding:8px 16px;gap:8px}
  .topbarBrand{width:150px;height:46px}
  .topbarBrand img{width:215px!important;left:-27px;top:-33px}
  .zHeaderInfo158{gap:8px}
  .zBusiness158,.zUserName158{display:none}
  .zLive158{font-size:0}
  .zLive158 i{width:9px;height:9px}
  .zAvatar158{width:35px;height:35px;font-size:14px}
  .mobileMenuBtn{display:none!important}
  .contentWrap{padding:16px 16px calc(104px + env(safe-area-inset-bottom))!important}
  .mobileWorkApp{padding-left:16px;padding-right:16px;padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .mobileWorkScreen{padding-bottom:calc(22px + env(safe-area-inset-bottom))}
  .zStatusCard158{min-height:85px;padding:14px;gap:12px}
  .zStatusIcon158{width:46px;height:46px}
  .zStatusIcon158 svg{width:27px;height:27px}
  .zStatusCard158 strong{font-size:17px}
  .zStatusCard158 small{font-size:14px}
  .zNextCard158{grid-template-columns:45px minmax(0,1fr);gap:9px;padding:14px}
  .zNextIcon158{width:43px;height:43px}
  .zNextIcon158 svg{width:24px;height:24px}
  .zNextCard158 strong{font-size:16px}
  .zNextCard158 p{font-size:14px}
  .zNextCard158 button{grid-column:1/-1;width:100%;min-height:48px}
  .zPanel158{padding:14px}
  .zAttentionRow158{grid-template-columns:25px minmax(0,1fr) 12px}
  .zAttentionRow158 small{grid-column:2;grid-row:2}
  .zAttentionRow158 .zChevron158{grid-column:3;grid-row:1/3}
  .mobileBottomNav{height:calc(76px + env(safe-area-inset-bottom))!important;padding-bottom:env(safe-area-inset-bottom)!important}
  .mobileBottomNav button{min-height:50px}
  .contentWrap :is(.articleFormGrid,.cateringFormGrid,.opsGrid92,.packEditRow,.packEditRow.noDrain){grid-template-columns:minmax(0,1fr)!important}
  .contentWrap :is(.articleFormGrid,.cateringFormGrid,.opsGrid92,.packEditRow,.packEditRow.noDrain)>*{grid-column:1/-1;min-width:0}
  .contentWrap .table,.contentWrap table{max-width:100%;overflow-x:auto}
  .helpPanel{max-width:100%}
  .faq156{padding:0}
  .faqGroup156>summary{padding:15px;font-size:16px}
}
@media(max-width:500px){#tabPlanning .planningTools135{grid-template-columns:minmax(0,1fr)}#tabPlanning .planningTools135 input{grid-column:1}}
