/*@import url(custom.mod.css);*/
:root { 
   /*Using the sharp curve (also referred to as “ease in out”) elements quickly accelerate and decelerate. It is used by exiting elements that may return to the screen at any time.*/
   --sharp-easing:cubic-bezier(0.4, 0.0, 0.6, 1); --easing-standard:cubic-bezier(.2,0,0,1);
   --easing-legacy:cubic-bezier(.4,0,.2,1);     --decelerate-legacy:cubic-bezier(0,0,.2,1);   --accelerate-legacy:cubic-bezier(.4,0,1,1);
   --easing-emphasized:cubic-bezier(.2,0,0,1);  --decelerate-emphasized:cubic-bezier(.05,.7,.1,1);   --accelerate-emphasized:cubic-bezier(.3,0,.8,.15);
   --shadow-0:0 0 1px 0 rgba(0,0,0,.15), 0 0 2px 1px rgba(0,0,0,.08);   --shadow-1:0 1px 2px 0 rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15);
   --shadow-2:0 1px 2px 0 rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.15);   --shadow-3:0 1px 3px 0 rgba(0,0,0,.3), 0 4px 8px 3px rgba(0,0,0,.15); 
   --shadow-4:0 0 1px 0 rgba(0,0,0,.45), 0 1px 3px 0 rgba(0,0,0,.3), 0 4px 8px 3px rgba(0,0,0,.15); 

   --boxShadowTransition:box-shadow 75ms var(--sharp-easing);
   --colorTransition:color 75ms var(--sharp-easing);
   --opacityTransition:opacity 100ms var(--sharp-easing), visibility 100ms var(--sharp-easing);

   margin:0; padding:0; font:var(--bodyM); letter-spacing:var(--bodyM-spacing); 
  
  --displayL:400 calc(var(--font-scale) * 57px)/calc(var(--font-scale) * 64px) var(--font-title-family);	--displayL-spacing:-0.25px;
  --displayM:400 calc(var(--font-scale) * 45px)/calc(var(--font-scale) * 52px) var(--font-title-family);	--displayM-spacing:0;
  --displayS:400 calc(var(--font-scale) * 36px)/calc(var(--font-scale) * 44px) var(--font-title-family);	--displayS-spacing:0;
  --headlineL:400 calc(var(--font-scale) * 32px)/calc(var(--font-scale) * 40px) var(--font-title-family);	--headlineL-spacing:0;
  --headlineM:400 calc(var(--font-scale) * 28px)/calc(var(--font-scale) * 36px) var(--font-title-family);	--headlineM-spacing:0;
  --headlineS:400 calc(var(--font-scale) * 24px)/calc(var(--font-scale) * 32px) var(--font-title-family);	--headlineS-spacing:0;
 
  --titleXL:400 calc(var(--font-scale) * 22px)/calc(var(--font-scale) * 28px) var(--font-title-family);		--titleL-spacing:0;
  --titleL:400 calc(var(--font-scale) * 20px)/calc(var(--font-scale) * 26px) var(--font-title-family);		--titleL-spacing:0;
  --titleM:500 calc(var(--font-scale) * 16px)/calc(var(--font-scale) * 24px) var(--font-title-family);		--titleM-spacing:.15px;
  --titleS:500 calc(var(--font-scale) * 14px)/calc(var(--font-scale) * 20px) var(--font-title-family);		--titleS-spacing:.1px;		

  --bodyL:400 calc(var(--font-scale) * 15px)/calc(var(--font-scale) * 22px) var(--font-family);			--bodyL-spacing:.15px;
  --bodyM:400 calc(var(--font-scale) * 14px)/calc(var(--font-scale) * 20px) var(--font-family);		  --bodyM-spacing:.15px;
  --bodyS:400 calc(var(--font-scale) * 12px)/calc(var(--font-scale) * 16px) var(--font-family);	    --bodyS-spacing:.25px;

  --labelL:500 calc(var(--font-scale) * 14px)/calc(var(--font-scale) * 20px) var(--font-family);	  --labelL-spacing:.1px;
  --labelM:500 calc(var(--font-scale) * 12px)/calc(var(--font-scale) * 16px) var(--font-family);	  --labelM-spacing:.25px;
  --labelS:500 calc(var(--font-scale) * 11px)/calc(var(--font-scale) * 16px) var(--font-family);	  --labelS-spacing:.25px;
}

[data-svg*=order-prepared], [data-svg*=order-in-preparation], [data-svg*=donation], [data-user-type=donation], .green { --item-color:var(--green); --item-bgcolor:var(--green-22); }     
[data-svg*=order-scheduled], [data-svg*=reservation], [data-svg*=employee], [data-user-type=employee], .blue { --item-color:var(--blue); --item-bgcolor:var(--blue-22); }    
[data-svg*=rescheduled], [data-svg*=order-delivered], [data-svg*=buyer], [data-user-type=buyer], [data-svg*=notification], [data-svg*=report], .red { --item-color:var(--red); --item-bgcolor:var(--red-22); }      
[data-svg*=basket], [data-svg*=client], [data-user-type=client], .on-body { --item-color:var(--on-body-80); --item-bgcolor:var(--body-bg-80); }      
[data-svg*=voucher-signed], [data-svg*=handler], [data-user-type=handler], .on-container { --item-color:var(--on-container-80); --item-bgcolor:var(--on-container-8); }  
[data-svg*=pending], .error { --item-color:var(--container-bg); --item-bgcolor:var(--red); }  


   * { box-sizing:border-box; }
   template, [inert] { display:none!important; position:absolute!important; z-index:0!important; inset:100% 100% auto auto!important; pointer-events:none!important; user-select:none!important; }
   h1, h2, h3, h4, h5, h6 { -webkit-appearance:unset; appearance:unset; margin-block:0; margin-inline:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
   h1 { font:var(--headlineS); letter-spacing:var(--headlineS-spacing); }
   h2 { font:var(--titleL); letter-spacing:var(--titleL-spacing); }
   h3 { font:var(--titleM); letter-spacing:var(--titleM-spacing); }
   h4 { font:var(--titleS); letter-spacing:var(--titleS-spacing); }
   h5 { font:var(--bodyL); letter-spacing:var(--bodyL-spacing); }
   b { color:var(--red); font-weight:500; text-decoration:underline; }

   :any-link, a, [onclick] { text-decoration:none; color:inherit; cursor:pointer; }
   [data-value]::after { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
   [data-copy-value] { cursor:copy; }

   menu, ol, ul, li { user-select:none; list-style:none; -webkit-appearance:unset; appearance:unset; margin-block:unset; margin-inline:unset; padding-block:unset; padding-inline:unset; }
   [data-type="product-card"] { user-select:none; }
   strong, optgroup { font-weight:600; }
   ::placeholder { color:transparent; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; transition:var(--opacityTransition); }
   ::backdrop, :fullscreen { background-color:var(--body-bg); }

/* ===============----->>>   scrollbar   <<<-----=============== */
   ::-webkit-scrollbar{ width:16px; outline:6px solid var(--body-bg); outline-offset:-6px; background-color:var(--body-bg); transition:outline 150ms var(--easing-legacy), background-color 150ms var(--easing-legacy); }
   ::-webkit-scrollbar:hover{ background-color:var(--on-body-16); }
   ::-webkit-scrollbar-thumb{ background-color:var(--on-body-16); outline:7.5px solid var(--body-bg); outline-offset:-6px; box-shadow:none; border-radius:8px; transition:outline 150ms var(--easing-legacy), background-color 150ms var(--easing-legacy); }
   :hover::-webkit-scrollbar-thumb { background-color:var(--on-body-22); outline-width:7.5px; outline-offset:-6px; }
   ::-webkit-scrollbar-thumb:hover { background-color:var(--on-body-38); outline-width:5.5px; outline-offset:-4px; }
   ::-webkit-scrollbar-thumb:active { background-color:var(--on-body-48); outline-width:5.5px; outline-offset:-4px; }

   @media only screen and (max-width:599px) { ::-webkit-scrollbar { display:none; } }
/* -------------------------------------------------------------------------- */

/* ===============----->>>   svg   <<<-----=============== */
   [data-svg].icon { flex:none; position:relative; contain:strict; display:inline-block; aspect-ratio:1 / 1; width:40px; height:auto; border-radius:50%; fill:inherit; background-color:transparent; border:none; margin:0; padding:0; user-select:none; stroke:none;  }
   [data-svg] > svg { display:block; aspect-ratio:1 / 1; margin:0; padding:0; fill:inherit; stroke:none; pointer-events:none; background:none; border:none; }
   [data-svg].icon > svg { position:absolute; inset:0; display:block; width:24px; margin:auto; }
   [data-svg]:empty { opacity:0; }
   [data-svg].icon.small { width:36px; height:auto; background-color:var(--item-bgcolor); fill:var(--item-color); }
   [data-svg].icon.small > svg { width:22px; filter:brightness(.94); }
   [data-svg].icon.avatar { width:48px; height:auto; background-color:var(--item-bgcolor); fill:var(--item-color); }
   [data-svg].icon.avatar:is(.green,.blue,.red) > svg { filter:brightness(.92); }
   button[data-svg].icon { width:48px; }
   button[data-svg].icon.outlined { outline-width:1px; outline-offset:-1px; }
   button[data-svg].icon.outlined:hover { background-color:var(--on-container-8); }
   button[data-svg]:not(.icon,.FAB) > svg, button > [data-svg] > svg { flex:none; width:18px; }
/* -------------------------------------------------------------------------- */
   [data-svg].green { fill:var(--green); }  [data-svg].blue { fill:var(--blue); }  [data-svg].red { fill:var(--red); }  [data-svg].yellow { fill:var(--yellow); }

/* ===============----->>>   badge :: small | 1 digit | 3 digits   <<<-----=============== */
   [data-svg][data-badge] { position:relative; contain:layout;}
   [data-svg][data-badge]::after { z-index:3; position:absolute; display:block; min-width:16px; max-width:34px; height:16px; padding-inline:4px; border-radius:8px; background-color:var(--red); color:var(--on-color); font:var(--labelS); letter-spacing:var(--labelS-spacing); white-space:nowrap; overflow:hidden; text-align:center; }
   [data-svg][data-badge]:not([data-badge=null],[data-badge=undefined],[data-badge=''],[data-badge='0'])::after { content:attr(data-badge); }
   [data-svg]:is([data-badge="1"],[data-badge="2"],[data-badge="3"],[data-badge="4"],[data-badge="5"],[data-badge="6"],[data-badge="7"],[data-badge="8"],[data-badge="9"])::after { max-width:16px!important; padding-inline:0!important; }
   [data-svg].icon[data-badge]::after { inset:3px auto auto calc(100% - 19px); }
   button[data-svg].icon[data-badge]::after { inset:8px auto auto calc(100% - 22px); }
   button[data-svg].icon:is(:disabled,[aria-disabled]):not([aria-disabled=false]) { pointer-events:none; fill:var(--on-container-38); }
/* -------------------------------------------------------------------------- */
   [role=presentation] [data-svg].icon:is([data-badge=null],[data-badge=undefined],[data-badge=''],[data-badge='0'],[data-hidden-value=''],[data-copy-value=''],[aria-disabled]:not([aria-disabled=false])) { pointer-events:none; z-index:0; color:var(--on-container-38)!important; fill:var(--on-container-38)!important; }
   [role=presentation] button.icon.outlined:is([data-badge=null],[data-badge=undefined],[data-badge=''],[data-badge='0'],[data-hidden-value=''],[data-copy-value=''],[aria-disabled]:not([aria-disabled=false])) { outline-color:var(--on-container-12)!important; }

   [data-svg]:is([data-tooltip],[data-copy-value]) { contain:layout; position:relative; z-index:1; }
   [data-svg]:is([data-tooltip],[data-copy-value])::before { opacity:0; position:absolute; display:block; inset:auto -50% -16px auto; /*margin-block:24px auto; margin-inline:-12px auto; transform:translateX(-50%);*/ padding-inline:8px; transition:opacity 250ms var(--easing-emphasized) 150ms; }
   [data-svg]:is([data-tooltip],[data-copy-value])::before { pointer-events:none; contain:content; font:var(--labelM); letter-spacing:.5px; line-height:22px; white-space:nowrap; color:var(--container-bg); background-color:var(--on-container-80); outline:1.5px solid var(--container-bg); border-radius:4px; }
   [data-svg]:is([data-tooltip],[data-copy-value]):hover { z-index:3!important; }
   [data-svg]:is([data-tooltip],[data-copy-value]):hover::before { opacity:1; z-index:3; }
   [data-svg][data-tooltip]::before { content:attr(data-tooltip); z-index:1; }
   [data-svg][data-copy-value]::before { content:attr(data-copy-value); z-index:1; }

    [data-svg]:is([data-tooltip],[data-copy-value]).tooltip-end::before { right:-8px; }

   [data-svg][data-svg-alt] { position:relative; }
   [data-svg][data-svg-alt] > svg { position:absolute; z-index:0; opacity:0; transform:scale(0.5); inset:0; margin:auto; fill:inherit; will-change:transform,opacity,fill; transition:transform 100ms var(--easing-emphasized), opacity 75ms var(--easing-emphasized), fill 75ms var(--easing-emphasized); }
   [data-svg][data-svg-alt]:not([aria-selected],[aria-current],[aria-pressed]) > svg:first-child { opacity:1; transform:scale(1); z-index:1; }
   li:not([aria-selected],[aria-current],[aria-pressed]) > [data-svg][data-svg-alt] > svg:first-child { opacity:1; transform:scale(1); z-index:1; }
   li:is([aria-selected],[aria-current],[aria-pressed]) > [data-svg][data-svg-alt] { opacity:1; transform:scale(1); z-index:1; }
   li:is([aria-selected],[aria-current],[aria-pressed]) > [data-svg][data-svg-alt] > svg:last-child { opacity:1; transform:scale(1); z-index:1; }
   #btn_projects:is([aria-selected],[aria-current],[aria-pressed]) > svg:last-child { opacity:1; transform:scale(1); z-index:1; }


/* ===============----->>>   buttons :: generic   <<<-----=============== */
   button { position:relative; flex:none; padding-inline:24px; height:40px; display:inline-flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; border:none; border-radius:99px; font:var(--bodyL); letter-spacing:var(--bodyL-spacing); line-height:18px; white-space:nowrap; gap:8px; }
   button { transition:opacity 150ms var(--easing-legacy), color 150ms var(--easing-legacy), fill 150ms var(--easing-legacy), background-color 200ms var(--easing-legacy), outline 150ms var(--easing-legacy), filter 200ms var(--easing-legacy), backdrop-filter 200ms var(--easing-legacy), width 250ms var(--easing-emphasized), height 250ms var(--easing-emphasized);  }
   button:has( > [data-svg]:first-child) { padding-inline:16px 24px; }
   button.filled { background-color:var(--btn-bg); color:var(--on-btn); fill:var(--on-btn); }
   button.filled-alt { background-color:var(--btn-bg); color:var(--on-btn); fill:var(--on-btn); outline:2px solid var(--container-bg); outline-offset:-3.5px; }
   button.text { padding-inline:12px; background-color:transparent; background:transparent; color:var(--btn-bg); fill:var(--btn-bg); }
   button.text-alt { flex:none!important; padding-inline:12px; background-color:transparent; background:transparent; color:var(--on-container-80); fill:var(--on-container-80); }
   button.outlined { background:transparent; color:var(--on-container-80); fill:var(--on-container-80); outline:1.5px solid var(--on-container-38); outline-offset:-1.5px; }
   button[aria-label]:not(.icon)::after { content:attr(aria-label); }  button[data-label]:not(.icon)::after { content:attr(data-label); }
   button:is(:invalid,[aria-invalid]):not([aria-invalid=false]) { pointer-events:none; z-index:0; color:var(--red)!important; fill:var(--red)!important; outline-color:var(--red-24)!important; background-color:var(--red-12)!important; }
   button:is(:disabled,[aria-disabled]):not(.icon,[aria-disabled=false]) { pointer-events:none; background-color:var(--on-container-12); color:var(--on-container-38); fill:var(--on-container-38); outline:1px solid var(--on-container-12); }
   button[data-disabled-label]:is(:disabled,[aria-disabled]):not(.icon,[aria-disabled=false])::after { content:attr(data-disabled-label); }
/* -------------------------------------------------------------------------- */

/* ===============----->>>   buttons :: FAB   <<<-----=============== */
   button.FAB { flex:none; min-width:unset; gap:unset; width:56px; height:56px; padding:16px; border-radius:16px; box-shadow:var(--shadow-2); transition:max-width 250ms var(--easing-emphasized), top 200ms var(--easing-emphasized), margin-bottom 200ms var(--easing-emphasized), transform 200ms var(--decelerate-emphasized); }
   button.FAB > [data-svg] { flex:none; fill:inherit; width:24px; height:24px; aspect-ratio:1; padding:0; margin:0; }
   button.FAB:is(:active,:focus) { box-shadow:var(--shadow-1); }
   button.FAB.extended { display:flex; /*min-width:80px;*/ max-width:calc(100vw - 32px); width:fit-content; flex-flow:row nowrap; justify-content:flex-start; align-items:center; gap:8px; }
   button.FAB.extended > :not([data-svg]) { flex:1; width:fit-content; padding:0; }
   button.FAB.small { width:40px; height:40px; padding:8px; border-radius:12px; }
   button.FAB.large { width:96px; height:96px; padding:28px; border-radius:28px; }
   button.FAB.large > [data-svg] { flex:none; fill:inherit; width:40px; height:40px; aspect-ratio:1; padding:0; margin:0; }
   button.FAB.large > [data-svg] > svg { width:100%; height:100%; }
   button.FAB[aria-hidden=true] { transform-origin:bottom right; transform:scale(0); transition:transform 200ms var(--accelerate-emphasized); }
/* -------------------------------------------------------------------------- */


/* ======================----->>>   SnackBar   <<<-----====================== */
   aside.snackbar { contain:content; position:absolute; inset:auto 0 48px 0; transform:translateY(100px); display:block; width:fit-content; height:48px; padding-inline:16px 12px; margin-inline:auto; display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; border-radius:4px; background-color:var(--on-body); color:var(--body-bg); fill:var(--body-bg); box-shadow:var(--shadow-3); font:var(--labelL); letter-spacing:var(--labelL-spacing); line-height:48px; gap:12px; transition:transform 250ms var(--easing-emphasized); }
   aside.snackbar > svg { order:2; }
   aside.snackbar[aria-hidden=false] { transform:translateY(0); }
/* -------------------------------------------------------------------------- */

/* =================----->>>   document structure   <<<-----================= */
   body { position:relative; contain:content; height:100dvh; width:100vw; margin:0; padding:0; display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:stretch; background-color:var(--body-bg); color:var(--on-body); fill:var(--on-body); }

   [role=presentation] { position:relative; z-index:1; contain:content; flex:1; overflow-y:scroll; overflow-x:clip; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; }
   body:has([role=complementary]:is([aria-expanded=false],:not([aria-expanded]))) [role=presentation] { z-index:2; margin-inline:0 8px; }
   body:not(:has(nav)) [role=presentation] { margin-inline:16px 0; }
   [role=presentation] > header { position:relative; z-index:3; contain:layout; flex:none; height:64px; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; column-gap:24px; }
   /*[role=presentation] > header { position:relative; top:0; backdrop-filter:blur(15px) contrast(0.5) brightness(1.5); background-color:rgba(244,244,233,.76); }*/
   [role=presentation] > [role=document] { position:relative; contain:content; flex:1; overflow:hidden; padding-block:0 4px; color:var(--on-container); fill:var(--on-container); display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:stretch; transition:margin 75ms var(--easing-emphasized); }
   [role=presentation] > [role=document] > main { position:relative; contain:content; flex:1; padding-block:24px; padding-inline:0; overflow:hidden; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; border-radius:28px; /*border-radius:28px 28px 24px 24px;*/ background-color:var(--container-bg); }
   [role=presentation] > footer { position:relative; contain:content; flex:none; min-height:120px; }

   [role=presentation] > header #logo { contain:content; flex:none; height:44px; margin-inline:12px 0; }
   [role=presentation]:has(> main) > header #logo { height:48px; }
   [role=presentation] > header #logo > img { height:100%; width:auto; }
   [role=presentation] > header menu { position:relative; contain:layout; flex:none; height:64px; margin-inline:0 8px; display:flex; flex-flow:row nowrap; justify-content:flex-end; align-items:center; gap:8px; }
   [role=presentation] > header menu #basket { z-index:1; pointer-events:all; fill:var(--on-body); }
   [role=presentation] > header menu #basket:not([data-code]) { fill:var(--on-body-38)!important; pointer-events:none; }
   [role=presentation] > header menu :is(button,search[aria-expanded=false])[role=menuitem]:hover { backdrop-filter:brightness(0.94); }  
   [role=presentation] > header menu :is(button,search)[role=menuitem]:hover > svg { filter:brightness(.94); }

   [role=presentation] > header menu :is(#all-delivery-voucher,#all-preparation-voucher) { display:none; }
   [role=presentation]:has(main#datalist > [role=list]#user-requests) > header menu :is(#all-delivery-voucher,#all-preparation-voucher) { display:block; }

/* -------------------------------------------------------------------------- */
   .divider { contain:content; height:1px; border-bottom:1px solid var(--on-body-48); flex:none; margin-block:8px; width:90%; margin-inline:5%; align-self:center; }

/* ===================----->>>   navigation bar   <<<-----=================== */
   nav { --color:var(--on-body); --bg-16:var(--on-body-16); --bg-24:var(--on-body-16); }
   nav { display:none; contain:content; flex:none; width:80px; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; gap:0; }
   nav[aria-expanded]:not([aria-expanded=false]) { flex:none; min-width:220px; width:320px; max-width:360px; padding-inline:12px 8px; }

   nav > #menu { height:64px; }
   nav > #menu > button > svg:first-child { opacity:1!important; transform:scale(1)!important; z-index:1!important; }
   nav > #menu > button > svg:last-child { opacity:0!important; transform:scale(.5)!important; z-index:0!important; }

   nav[aria-expanded]:not([aria-expanded=false]) > #menu > button { flex:none; min-width:56px; max-width:56px; min-height:56px; max-height:56px; }
   nav[aria-expanded]:not([aria-expanded=false]) > #menu > button > svg:last-child { opacity:1!important; transform:scale(1)!important; z-index:1!important; }
   nav[aria-expanded]:not([aria-expanded=false]) > #menu > button > svg:first-child { opacity:0!important; transform:scale(.5)!important; z-index:0!important; }

   nav li { flex:none; height:56px; display:flex; flex-flow:row wrap; justify-content:center; align-items:center; row-gap:0; }
   nav > #spacer { height:40px; }
   /*nav > li { height:64px; }*/
   nav li > button[data-svg]:not(.FAB), nav li > button[data-svg].icon { flex:none; width:56px; height:32px; /*padding:4px 16px;*/ padding-inline:16px; background-color:transparent; color:var(--color); fill:var(--color); border-radius:16px; cursor:pointer; }
   nav li > button[data-svg]:not(.FAB) > svg { width:24px!important; } 
   nav[aria-expanded]:not([aria-expanded=false]) li { height:unset; justify-content:flex-start; }
   nav[aria-expanded]:not([aria-expanded=false]) li > button { flex:1; height:56px; /*padding:16px 8px 16px 16px;*/ border-radius:28px; }
   nav[aria-expanded]:not([aria-expanded=false]) li > button[aria-label]::after { content:attr(aria-label); margin-left:36px; font:var(--titleS); letter-spacing:var(--titleS-spacing); }


   nav#filters > li > button[data-svg]:not(.FAB) > svg { inset:0 auto 0 16px; } 
   nav#filters > li > button:hover[data-svg][data-svg-alt] > svg:first-child { opacity:0; transform:scale(.5); z-index:0; }
   nav#filters > li > button:hover[data-svg][data-svg-alt] > svg:last-child { opacity:1; transform:scale(1); z-index:1; }
   nav#filters[aria-expanded]:not([aria-expanded=false]) > li > button[data-svg] { min-width:100%; }
   nav#filters[aria-expanded]:not([aria-expanded=false]) > li > button:hover > svg { fill:var(--on-container); }
   nav#filters[aria-expanded]:not([aria-expanded=false]) > li > button[aria-label]:hover::after { color:var(--on-container); }
   nav#filters:is([aria-expanded=false],:not([aria-expanded])) > li > button[aria-label]::after { display:none; }
   
   nav#filters > li > button[data-svg] + [role=list] { contain:content; flex:0; max-height:0; overflow:hidden; padding-inline:16px 12px; display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:flex-start; column-gap:24px; row-gap:12px; } 
   nav#filters[aria-expanded]:not([aria-expanded=false]) > li > button[data-svg] + [role=list] { flex:1; max-height:unset; overflow:visible; margin-block:0 16px; } 
   nav#filters[aria-expanded]:not([aria-expanded=false]) > li > [role=list] > label { height:24px; display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; column-gap:8px; } 
   nav#filters[aria-expanded]:not([aria-expanded=false]) > li > [role=list] > label[aria-hidden] { display:none; } 
   nav#filters[aria-expanded]:not([aria-expanded=false]) > li > [role=list] > label::after { content:attr(aria-label); font:var(--labelL); letter-spacing:var(--labelL-spacing); } 
   nav#filters > li:has([role=list]:empty) { display:none!important; } 

   nav:has(li):not([aria-hidden]) { display:flex; }

   nav > .FAB[data-svg] { align-self:center; margin-block:0 20px; background-color:var(--yellow); color:var(--container-bg); fill:var(--container-bg); }
   nav button.green { --color:var(--green); --bg-16:var(--green-16); --bg-24:var(--green-24); }  nav button.blue { --color:var(--blue); --bg-16:var(--blue-16); --bg-24:var(--blue-24); }  
   nav button.red { --color:var(--red); --bg-16:var(--red-16); --bg-24:var(--red-24); }  nav button.yellow { --color:var(--yellow); --bg-16:var(--yellow-16); --bg-24:var(--yellow-24); }

   nav #nav-home { height:64px; }
   nav #nav-home > button { width:48px; height:48px; border-radius:50%; }
   nav #nav-fab { position:relative; height:76px!important; }
   nav #nav-fab > .FAB { position:absolute; inset:8px 0 auto 0; margin:auto; box-shadow:var(--shadow-0); }
   nav #nav-fab > .FAB#btnAdd { z-index:1; background-color:var(--btn-fab-bg
); color:var(--on-btn-fab); fill:var(--on-btn-fab); opacity:1; pointer-events:all; }
   nav #nav-fab > .FAB#btnNotification:is([data-badge='0'],:not([data-badge]),[aria-disabled]) { display:none; z-index:1; pointer-events:none; background-color:transparent; outline:1px solid var(--on-container-38); fill:var(--on-container-38); cursor:default; }
   nav #nav-fab > .FAB#btnNotification[data-badge]:not([data-badge='0']) { display:none; z-index:1; background-color:var(--container-bg-48); outline:1px solid var(--red); fill:var(--on-body); }

   nav:not(#nav-home,#nav-fab) button:hover { background-color:var(--bg-16); }  
   nav:not(#nav-home,#nav-fab) :hover > svg { filter:brightness(.92); }
   nav [aria-selected] button.icon, nav button:not(#btn_project)[aria-selected].icon { background-color:var(--bg-24); }
   nav [aria-selected] button.icon > svg, nav button[aria-selected].icon > svg { filter:brightness(.92); }

   nav button[data-svg][data-badge]:not([data-badge=""],[data-badge="0"])::after { inset:1px auto auto calc(100% - 25px); }
   /*nav button { transition:opacity 150ms var(--easing-emphasized), color 200ms var(--easing-emphasized), filter 200ms var(--easing-emphasized), background-color 200ms var(--easing-emphasized); }*/

   nav #nav-projects { position:relative; }
   nav #nav-projects > button { contain:layout; position:absolute; inset:12px; opacity:0; z-index:0; transform:scale(0.5); transition:transform 100ms var(--easing-emphasized), opacity 75ms var(--easing-emphasized), fill 75ms var(--easing-emphasized); }
   nav #nav-projects > button[aria-label]:not([aria-label=''])::after { contain:content; user-select:none; position:absolute; inset:calc(100% + 4px) 0 auto 0; display:block; font:var(--labelM); letter-spacing:normal; font-weight:600; white-space:nowrap; color:var(--on-body); }
   nav #nav-projects + ul { contain:content; height:0; transform:scaleY(0); transition:height 350ms var(--easing-emphasized), transform 200ms var(--easing-emphasized); }
   nav #nav-projects + ul button { opacity:0; pointer-events:none; transition:opacity 75ms var(--easing-legacy) }

   nav #nav-projects:has(#btn_project:not([aria-selected])) > #btn_projects { opacity:1; z-index:1; transform:scale(1); }
   nav #nav-projects > button[aria-selected] { opacity:1; z-index:1; transform:scale(1); }
   nav #nav-projects > #btn_project[aria-selected]:not([aria-label='']) { inset:4px 12px auto 12px; }
   nav #nav-projects > #btn_project[aria-selected]:not([aria-label=''])::after { content:attr(aria-label); }
   nav #nav-projects:has(#btn_project[aria-selected]) + ul { height:224px; transform:scaleY(1); }
   nav #nav-projects:has(#btn_project[aria-selected]) + ul button { opacity:1; pointer-events:auto; }
   nav #nav-projects:has(#btn_project[aria-selected]) + ul > li[aria-selected] > button { opacity:1; pointer-events:none; }
/* -------------------------------------------------------------------------- */

/* ======================----->>>   searchbox   <<<-----===================== */
   header search { flex:none; height:48px; min-width:360px; max-width:720px; margin-inline:auto; margin-block:0; display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:flex-start; border-radius:24px; color:var(--on-body); fill:var(--on-body); background-color:rgba(255,255,255,.36); outline:1px solid var(--on-body-48); outline-offset:-1px; }
   /*header search { height:calc(48px + 48px * var(--num-lines) + 16px); margin-block:8px; align-self:flex-start; }*/
   header search { transition:width 200ms var(--easing-emphasized), height 250ms var(--easing-emphasized), padding 200ms var(--easing-emphasized), box-shadow 200ms var(--easing-emphasized), background-color 200ms var(--easing-legacy), outline 200ms var(--easing-legacy); }
   header search > #btn_clear { display:none; }
   header search > input { flex:1; height:48px; margin-block:0; margin-inline:4px; border:unset; outline:unset; background-color:transparent; color:var(--on-container-80); font:var(--bodyL); letter-spacing:var(--bodyL-spacing); line-height:44px; text-align:left; }
   header search > input::placeholder { color:var(--on-container-80); white-space:nowrap; font:var(--bodyL); letter-spacing:var(--bodyL-spacing); }
   header search > #searchbox ~ [role=listbox]:not(:empty) { top:48px; border-radius:0 0 16px 16px; background-color:var(--container-bg); box-shadow:var(--shadow-0); outline:1px solid var(--on-body-48); transition:height 400ms var(--easing-emphasized), box-shadow 350ms var(--easing-emphasized); }
   header search > #searchbox:not(:focus,[aria-selected]) ~ [role=listbox]:not(:empty) { transition:height 250ms var(--easing-emphasized), visibility 1ms var(--easing-emphasized) 249ms, box-shadow 150ms var(--easing-emphasized); }
   header search > #searchbox ~ [role=listbox] > [role=option] { padding-inline:48px 16px; }
   header search > #divider { display:none; position:absolute; inset:47px 0 auto 0; width:90%; height:1px; flex:none; margin-block:0; margin-inline:auto; border-bottom:1px solid transparent; }
   header search[aria-expanded] { contain:layout; width:540px; min-width:unset; transition:width 350ms var(--decelerate-emphasized), padding 350ms var(--decelerate-emphasized), background-color 300ms var(--easing-legacy), backdrop-filter 300ms var(--easing-legacy), fill 250ms var(--easing-legacy), color 250ms var(--easing-legacy), outline 300ms var(--easing-legacy), border-radius 75ms var(--easing-legacy) 250ms; }
   header search[aria-expanded]:has( > #searchbox:is(:focus,[aria-selected])) { box-shadow:var(--shadow-0); backdrop-filter:blur(24px) brightness(110%) opacity(0.8);/*blur(24px) sepia(.84); background-color:var(--container-bg);*/ transition:width 350ms var(--decelerate-emphasized), padding 350ms var(--decelerate-emphasized), background-color 300ms var(--easing-legacy), backdrop-filter 300ms var(--easing-legacy), fill 250ms var(--easing-legacy), color 250ms var(--easing-legacy), outline 300ms var(--easing-legacy); }
   /*header search[aria-expanded]:has( > #searchbox:is(:focus,[aria-selected]) ~ [role=listbox]:empty) { height:48px; }*/
   header search[aria-expanded]:has( > #searchbox:is(:focus,[aria-selected]) ~ [role=listbox]:not(:empty)) { border-radius:24px 24px 0 0; }
   header search[aria-expanded]:has( > #searchbox:is(:focus,[aria-selected]) ~ [role=listbox]:not(:empty)) > #divider { border-bottom:1px solid var(--on-body-22);  }

   header search[aria-expanded] > #searchbox:is(:focus,[aria-selected]) ~ [role=listbox]:not(:empty), header search[aria-expanded] > #searchbox ~ [role=listbox]:hover, header search[aria-expanded] > #searchbox ~ [role=listbox]:has([role=option]:hover) { z-index:2; visibility:visible; height:calc(48px * var(--num-lines) + 16px); padding-block:8px; }
   header search[aria-expanded] > #searchbox:is(:focus,[aria-selected]) ~ [role=listbox]:not(:empty) > [role=option], header search[aria-expanded] > #searchbox ~ [role=listbox]:hover  > [role=option], header search[aria-expanded] > #searchbox ~ [role=listbox]  > [role=option]:is(:active,:focus) { opacity:1; height:48px; overflow:hidden; }
   header search[aria-expanded]:has([role=listbox]#suggest-catalog) > :is(#filter-box,#btn_filter) { display:none; }
   header search[aria-expanded]:has([role=listbox]#suggest-catalog) > #searchbox:not(:placeholder-shown) ~ #btn_clear { display:block; }

   header search[aria-expanded=false] { contain:content; width:48px; padding-inline:0; background-color:transparent; outline-width:0; }
   header search[aria-expanded=false] > button[data-svg]:is(:first-child,:last-child) { margin-inline:0; }

   header search[aria-expanded]:has( > #filter-box[aria-expanded]:not([aria-expanded=false])) { box-shadow:var(--shadow-0); backdrop-filter:blur(24px) sepia(.84); background-color:var(--container-bg); }
   header search[aria-expanded]:has( > #filter-box[aria-expanded]:not([aria-expanded=false])) { border-radius:24px 24px 0 0; }
   header search > #filter-box { contain:content; position:absolute; opacity:0; max-height:0; z-index:0; top:48px; left:1px; width:calc(100% - 2px); padding-inline:16px; overflow-y:hidden; overflow-x:clip; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; border-radius:0 0 16px 16px; background-color:var(--container-bg); font:var(--bodyL); letter-spacing:var(--bodyL-spacing); }
   header search > #filter-box[aria-expanded]:not(:empty,[aria-expanded=false]) { opacity:1; max-height:90vh; z-index:2; box-shadow:var(--shadow-0); outline:1px solid var(--on-body-48); transition:height 400ms var(--easing-emphasized), box-shadow 350ms var(--easing-emphasized); }
   header search > #filter-box section { display:none; position:relative; /*border-top:1px solid var(--on-container-38);*/ padding-block:12px; flex-flow:row nowrap; justify-content:flex-start; align-items:flex-start; }
   header search > #filter-box section:first-child { padding-block:16px 12px; border-top:none; }
   header search > #filter-box section:last-child { display:flex; padding-block:0 16px; align-self:flex-end; border-top:none; }
   header search > #filter-box h5 { min-width:108px; text-decoration:underline; text-underline-offset:4px; line-height:34px; }
   header search > #filter-box [role=group] { display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:stretch; align-content:baseline; column-gap:24px; }
   header search > #filter-box :is([role=option],[role=checkbox]) { flex:1; flex-basis:150px; height:36px; display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; }
   header search > #filter-box :is([role=option],[role=checkbox])[aria-label]::after { content:attr(aria-label); }   

   [role=presentation]:has([role=document][data-type=list] [role=list]#users) > header search > #filter-box section[data-list=users] { display:flex; }
   [role=presentation]:has([role=document][data-type=list] [role=list]#user-requests) header search #filter-box section[data-list='user-requests'] { display:flex; } 
   [role=presentation]:has([role=document][data-type=list] [role=list]#inventory) header search #filter-box section[data-list=inventory] { display:flex; } 
   [role=presentation]:has([role=document][data-type=list] [role=list]#monitoring) header search #filter-box section[data-list=monitoring] { display:flex; } 
   [role=presentation]:has([role=document][data-type=calendar]) header search #filter-box section[data-list=calendar] { display:flex; } 
/* -------------------------------------------------------------------------- */

/* =======================----->>>   dialog   <<<-----======================= */
   aside.scrim { position:fixed; contain:content; inset:0; opacity:0; z-index:0; width:0; height:0; margin:auto; padding:0; backdrop-filter:brightness(0.5); display:flex; flex-flow:column nowrap; justify-content:center; align-items:center; }
   aside[aria-hidden=false].scrim { opacity:1; z-index:5; width:100dvw; height:100dvh; transition:opacity 125ms var(--easing-emphasized); }
   [role=dialog] { contain:content; z-index:1; flex:none; max-height:0; min-width:280px; max-width:560px; padding:24px; border-radius:28px; background-color:var(--container-bg); display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; gap:16px; }
   [aria-hidden=false].scrim > article[role=dialog] { max-height:380px; transition:max-height 300ms var(--easing-emphasized) 100ms; }
   [role=dialog] > .headline { font:var(--headlineS); letter-spacing:var(--headlineS-spacing); text-align:center; }
   [role=dialog] > .text { font:var(--bodyM); letter-spacing:var(--bodyM-spacing); line-height:22px; }
   [role=dialog] > .text > div:not(:first-child) { margin-block:16px 0; }
   [role=dialog] > form { margin-inline:24px; }
   [role=dialog] > .buttons { padding-block:8px 0; display:flex; flex-flow:row nowrap; justify-content:flex-end; align-items:center; gap:8px; }
/* -------------------------------------------------------------------------- */
   [role=dialog]#upload { width:420px; }
   [role=dialog]#upload > form > div { position:relative; margin-inline:auto; contain:content; display:block; width:124px; height:124px; }
   [role=dialog]#upload > form [data-svg] { position:absolute; z-index:1; inset:0; padding:34px; display:block; border-radius:50%; outline:2.5px dashed var(--on-body-48); outline-offset:-3px; }
   [role=dialog]#upload > form [data-svg] > svg { width:56px!important }
   [role=dialog]#upload > form input { position:absolute; opacity:0; z-index:2; inset:0; padding:34px; display:block; border-radius:50%; }

/* ===============----->>>   document list presentation   <<<-----=============== */
   main#datalist { padding-block:16px; }
   main#datalist > section#filters { flex:none; min-height:16px; padding-inline:28px 24px; display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; column-gap:24px; }
   main#datalist > section#filters > button { height:34px; padding-inline:18px 12px; }
   main#datalist > section#filters > button > svg { order:2; }

   ol[role=list].data { position:relative; contain:content; padding-inline:24px 16px; padding-block:4px; margin-block:12px 8px; margin-inline:8px; overflow-y:scroll; overflow-x:clip; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; transition:padding 300ms var(--easing-emphasized); }
   body:has(> [role=complementary][aria-expanded]:not([aria-expanded=false])) ol[role=list].data { padding-inline:16px 8px; }
   [role=list] :is(h1,h2,h3,h4) { display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; column-gap:8px; }
   [role=list] :is(h3,h4) { column-gap:0; }
   [role=list] h2 + h3 { padding-block:1px 0; }

   [role=list].data [role=listitem] { user-select:none; position:relative; contain:layout; opacity:1; transform:translateY(0); flex:none; height:72px; margin-block:0; color:var(--on-container); fill:var(--on-container-80); outline-color:var(--on-container-80); display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; column-gap:24px; transition:transform 350ms var(--easing-emphasized), opacity 275ms var(--accelerate-legacy), gap 250ms var(--easing-emphasized), outline 150ms var(--easing-emphasized), backdrop-filter 150ms var(--easing-emphasized); }
   [role=list].data [role=listitem].no-content { align-self:center; height:116px; margin-block:56px; flex-flow:column; font:var(--headlineS); color:var(--on-container-80); row-gap:16px; }
   /*[role=list].data [role=listitem].no-content > svg { width:40px; height:40px; }*/
   [role=list].data.outgoing { opacity:0; }
   [role=list].data [role=listitem].incoming { opacity:0; transform:translateY(400px); }
   [role=list].data [role=listitem] > .avatar.icon { flex:none; aspect-ratio:1 / 1; width:48px; height:auto; background-color:var(--item-bgcolor); fill:var(--item-color); }
   [role=list].data [role=listitem] [role=group] { flex:none; display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; column-gap:8px; }
   [role=list].data [role=listitem] [role=group].icon-holder { flex:1; column-gap:12px; justify-content:center; }
   [role=list].data [role=listitem] [role=group].block { flex:1; flex-flow:column nowrap; justify-content:center; align-items:flex-start; }
   [role=list].data [role=listitem] [role=group].title { flex:1; row-gap:0; align-items:baseline; column-gap:16px; }
   [role=list].data [role=listitem] [role=group].location { flex:1; justify-content:flex-start; }
   [role=list].data [role=listitem] [role=group].date { flex:1; /*justify-content:center;*/ column-gap:12px; }
   [role=list].data [role=listitem] [role=group].date > [role=group]:not(.block) { flex:1; flex-flow:row wrap; }
   [role=list].data [role=listitem] [role=group].date > [role=group].block { flex:none; max-width:100px; }
   [role=list].data [role=listitem] [role=group].date > [role=group]:not(.block) [data-key='pickup_start']:not(:empty)::before { content:' à '; }
   [role=list].data [role=listitem] [role=group].date > [role=group]:not(.block) [data-key='pickup_start']:not(:empty) + [data-key='pickup_end'] { display:none; }
   [role=list].data [role=listitem] [role=group].date > [role=group].block [data-key='pickup_start']:not(:empty) + [data-key='pickup_end']:not(:empty)::before { content:" - "; }
   [role=list].data [role=listitem] [role=group].date:has(:is(h4,h5):empty) { opacity:0; }
   [role=list].data [role=listitem] [role=group].date h4 + h5 { display:flex; flex-flow:row nowrap; gap:8px; }


   main > [role=list].data [role=listitem]::before { content:""; position:absolute; inset:auto 48px -1px 64px; display:block; height:2px; border-bottom:1px solid var(--on-container-48); }
   main > [role=list].data [role=listitem].no-content::before { inset:auto 36px 4px 36px; border-bottom:1.5px solid var(--on-container-80); }
   main > [role=list].data [role=listitem][aria-selected] { z-index:2; }
   main > [role=list].data [role=listitem][aria-selected]::after { content:""; position:absolute; inset:0 -8px 0 auto; width:calc(100% + 16px); height:calc(100% + 2px); outline:1.5px solid var(--on-body-48); outline-offset:-1.5px; border-radius:16px; backdrop-filter:sepia(32%) brightness(96%); }

   main > [role=list].data [role=listitem]:not([aria-selected]).highlight::after { content:""; position:absolute; inset:0 -8px 0 auto; width:calc(100% + 16px); height:calc(100% + 2px); outline:1.5px solid transparent; outline-offset:-1.5px; border-radius:16px; backdrop-filter:sepia(0) brightness(100%); transition:outline 500ms var(--easing-emphasized) 4s, backdrop-filter 500ms var(--easing-emphasized) 4s; }
/* -------------------------------------------------------------------------- */

   [role=group].inline { flex:none; display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; gap:12px; }
   [role=input][aria-label]::before { content:attr(aria-label); }

   :is(#shortcut-btn,.shortcut-btn) button:is([aria-disabled],[data-value=''],[data-badge=''],[data-badge='0']) { user-select:none; pointer-events:none; z-index:0; background-color:var(--on-container-12)!important; color:var(--on-container-38)!important; fill:var(--on-container-38)!important;  }

   .chip { contain:content; flex:none; user-select:none; height:32px; min-width:56px; padding-inline:12px 8px; border-radius:8px; outline:1px solid var(--on-container-38); outline-offset:-1px; background-color:var(--container-bg); color:var(--on-body); fill:var(--on-body); font:var(--bodyM); letter-spacing:var(--bodyM-spacing); white-space:nowrap; display:inline-flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; gap:8px; }
   .chip > svg { width:18px!important; order:2; cursor:pointer; }