/*@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);
  
  --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;

   margin:0; padding:0; font:var(--bodyM); letter-spacing:var(--bodyM-spacing); 
}

/*[data-svg*=highlighted] { --item-bgcolor:#f2da5f; --item-color:white; } */
/*.error { --item-color:var(--on-color); --item-bgcolor:var(--red); }  */

[data-svg*=pickup-scheduled], [data-svg*=reservation], [data-svg*=employee], [data-user-type=employee], [data-recipient-type=employee], .traceability, .blue { --item-color:var(--blue); --item-bgcolor:var(--blue-22); }    
[data-svg*=order-prepared], [data-svg*=order-in-preparation], [data-svg*=donation], [data-user-type=donation], [data-recipient-type=donation], .preparation, .green { --item-color:var(--green); --item-bgcolor:var(--green-22); }     
[data-svg*=basket], [data-svg*=buyer], [data-user-type=buyer], [data-recipient-type=buyer] { --item-color:var(--yellow); --item-bgcolor:var(--yellow-22); } 
[data-svg*=pickup-cancelled], [data-svg*=unsigned], [data-svg*=client], [data-user-type=client], [data-recipient-type=client], [data-svg*=report], .red { --item-color:var(--red); --item-bgcolor:var(--red-22); }      
[data-svg*=pending], [data-svg*=pickup-alert], [data-svg*=notification] { --item-color:var(--on-color); --item-bgcolor:var(--red); }      
[data-svg*=order-delivered], [data-svg*=handler], [data-user-type=handler], [data-recipient-type=handler], .on-body { --item-color:var(--on-body-80); --item-bgcolor:var(--body-bg-80); }      
[data-svg*=order-completed], .on-container { --item-color:var(--on-container-80); --item-bgcolor:var(--on-container-8); }  


   * { 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:600; text-decoration:underline; }
   kbd { display:inline-block; padding:6px 8px; margin-inline:4px; font-family:monospace; font-weight:700; line-height:1; white-space:nowrap; color:var(--on-container); background-color:#eeeeee; border:1px solid #b4b4b4; border-radius:4px; box-shadow:0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset; }
   img:not[src] { opacity:0; }

   :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 { flex:none; 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]:not([data-svg-alt]) > svg + svg { display:none; }
   [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]:not(.icon,.FAB) > svg, button > [data-svg] > svg { flex:none; width:18px; height:auto; }
   button[data-svg].large > svg { flex:none; width:24px; height:auto; }
   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].icon:is(:disabled,[aria-disabled]):not([aria-disabled=false]) { pointer-events:none; fill:var(--on-container-38); }
/* -------------------------------------------------------------------------- */
   [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-badge] { position:relative; contain:layout!important; }
   [data-badge]::before { 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-badge]:not([data-badge=null],[data-badge=undefined],[data-badge=""],[data-badge="0"])::before { content:attr(data-badge); }
   :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"])::before { max-width:16px!important; padding-inline:0!important; }
   .icon[data-badge]::before { inset:auto auto calc(100% - 12px - 8px) calc(100% - 12px - 8px); }
   button.icon[data-badge]::before { inset:auto auto calc(100% - 12px - 12px) calc(100% - 12px - 12px); }
/* -------------------------------------------------------------------------- */
   [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; overflow:visible; 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; }
   [role=group]:has([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]:not(button) { flex:none; position:relative; contain:strict; display:inline-block; width:24px; height:24px; fill:inherit; background-color:transparent; border:none; margin:0; padding:0; user-select:none; stroke:none; }
   [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; }
   [data-svg][data-svg-alt]:is([aria-selected],[aria-current],[aria-pressed]) > svg:last-child { opacity:1; transform:scale(1); z-index:1; }
   .svg-hover:hover > [data-svg][data-svg-alt] > svg:first-child { opacity:0; transform:scale(.5); z-index:0; }
   .svg-hover:hover > [data-svg][data-svg-alt] > svg:last-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:not([aria-selected],[aria-current],[aria-pressed]) > [data-svg][data-svg-alt] > svg:last-child { opacity:0; transform:scale(.5); z-index:0; }
   li:is([aria-selected],[aria-current],[aria-pressed]) > [data-svg][data-svg-alt] > svg:first-child { opacity:0; transform:scale(.5); z-index:0; }
   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:16px; height:40px; display:inline-flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; border:none; border-radius:99px; background-color:transparent; 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.large { padding-inline:24px; height:48px; border-radius:99px; font:var(--titleM); letter-spacing:var(--titleM-spacing); line-height:24px; white-space:nowrap; gap:8px; }
   button.large[data-svg][data-svg-alt] { padding-inline:56px 24px; }
   button.large[data-svg][data-svg-alt] > svg { inset:auto auto auto 24px; }
   button.filled { background-color:var(--btn-bg); color:var(--on-btn); fill:var(--on-btn); }
   button.filled-alt { padding-inline:24px; 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 { background-color:transparent; background:transparent; color:var(--btn-bg); fill:var(--btn-bg); }
   button.text-alt { flex:none!important; 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.tonal { background:var(--body-bg); color:var(--on-container-80); fill:var(--on-body); outline:1px solid var(--on-body-38); outline-offset:-1px; }
   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!important; background:var(--on-container-8)!important; background-color:var(--on-container-8)!important; color:var(--on-container-38)!important; fill:var(--on-container-38)!important; outline:1px solid var(--on-container-12)!important; }*/
   button:is(:disabled,[aria-disabled]):not(.icon,[aria-disabled=false]) { pointer-events:none!important; background:var(--on-container-12)!important; background-color:var(--on-container-12)!important; color:var(--on-container-38)!important; fill:var(--on-container-38)!important; outline:1px solid var(--on-container-16)!important; }
   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:not(:has(nav)) [role=presentation] { margin-inline:16px 0; }*/
   [role=presentation] > header { position:sticky; z-index:3; contain:layout; flex:none; height:64px; top:0; fill:var(--container-80); display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; column-gap:24px; }
   [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:28px 0; }
   [role=presentation] > header #logo > img { height:100%; width:auto; }
   [role=presentation] > header menu { position:relative; contain:layout; flex:none; height:64px; margin-inline:auto 8px; display:flex; flex-flow:row nowrap; justify-content:flex-end; align-items:center; gap:8px; }
   [role=presentation] > header menu #basket { z-index:1; fill:var(--on-body); }
   [role=presentation] > header menu #basket:not([data-code]) { pointer-events:none; fill:var(--on-body-38)!important; }
   [role=presentation] > header.handler menu #basket { pointer-events:all; }
   [role=presentation] > header.handler menu #basket { pointer-events:all; }
   [role=presentation] > header.handler menu #basket[data-badge='0']::after { content:attr(data-badge)!important; }
   [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-color:var(--body-bg); --bg-16:var(--on-body-16); --bg-24:var(--on-body-16); }
   nav { contain:content; flex:none; width:0; margin-inline:0 16px; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; gap:0; transition:width 200ms var(--easing-emphasized); }
   nav:has(li):not([aria-hidden]) { width:80px; margin-inline:0; transition:width 350ms var(--decelerate-emphasized); }
   nav[aria-expanded] { flex:none; min-width:220px; width:300px!important; max-width:360px; }

   nav li { flex:none; contain:layout; height:64px; padding-inline:12px; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:flex-start; row-gap:0; }
   nav li:has(.FAB) { height:56px; }
   nav li > button[data-svg]:not(.FAB), nav li > button[data-svg].icon { contain:layout; flex:none; width:56px; height:32px; padding-inline:0; margin-block:0 auto; 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; margin-block:auto; margin-inline:16px auto; } 
   nav > li > button[data-svg]:not(.FAB):hover, nav > li:is([aria-selected],[aria-current]) > button[data-svg]:not(.FAB) { backdrop-filter:brightness(.84); }
   nav li > button[data-svg][data-svg-alt]:hover > svg:first-child { opacity:0; transform:scale(.5); z-index:0; }
   nav li > button[data-svg][data-svg-alt]:hover > svg:last-child { opacity:1; transform:scale(1); z-index:1; }
   nav li > button[data-svg][data-badge]:not([data-badge=""],[data-badge="0"])::before { inset:0 auto auto calc(100% - 16px - 10px); outline:2px solid var(--bg-color); }
   nav li > button[aria-label]::after { content:attr(aria-label); position:absolute; inset:auto -12px -16px -12px; margin-inline:auto; font:var(--labelM); letter-spacing:var(--labelM-spacing); }

   nav[aria-expanded] li > button[data-svg]:not(.FAB) { height:56px; width:unset; margin-block:0 auto; align-self:stretch; border-radius:28px; }
   nav[aria-expanded] li > button[aria-label]::after { content:attr(aria-label); position:unset; margin-left:56px; font:var(--titleS); letter-spacing:var(--titleS-spacing); }
   nav[aria-expanded] li > button[data-svg]:not(.FAB):hover::before { width:calc(320px - 24px); height:56px; border-radius:28px; transition:width 200ms var(--easing-emphasized) height 200ms var(--easing-emphasized) border 200ms var(--easing-emphasized); }

   nav > #spacer { height:40px; }
   nav > #menu { height:64px; }
   nav li > button#btn_menu:hover > svg:first-child { opacity:1; transform:scale(1); z-index:1; }
   nav li > button#btn_menu:hover > svg:last-child { opacity:0; transform:scale(.5); z-index:0; }
   nav[aria-expanded] li > button#btn_menu > svg:first-child { opacity:0; transform:scale(.5); z-index:0; }
   nav[aria-expanded] li > button#btn_menu > svg:last-child { opacity:1; transform:scale(1); z-index:1; }
   
   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-fab > .FAB { box-shadow:none; }
   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 #nav-fab:not(:has(.FAB)) { display:none; }

   nav #nav-projects { position:relative; width:80px; }
   nav #nav-projects > button { contain:layout; position:absolute; inset:0 0 auto 0; margin-inline:auto; 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 + ul { contain:content; height:0; padding-block:8px 0; transform:scaleY(0); transition:height 350ms var(--easing-emphasized), transform 200ms var(--easing-emphasized); }
   nav #nav-projects + ul > li { max-height:56px; }
   nav #nav-projects + ul > li > button[data-svg]:not(.FAB):hover, nav li:is([aria-selected],[aria-current]) > button[data-svg]:not(.FAB) { background-color:var(--bg-24); --bg-color:var(--bg-24); }
   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: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; }

   nav#admin { width:96px; padding-block:24px 0; align-items:center; }
   nav#admin > li#nav-home { display:none; }
   nav#admin > li.spacer { height:24px; }

   [role="document"]:has(main:is(.user-mob,.user-db)) > nav li#nav-users > button::after { content:"Clients"; }
   
/* -------------------------------------------------------------------------- */

/* ======================----->>>   searchbox   <<<-----===================== */
   header search { flex:none; height:48px; min-width:360px; max-width:720px; margin-inline:auto 16px; 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]:has(#searchbox:is(:focus,[aria-selected])) { background-color:var(--container-bg); }
   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 h4 { min-width:108px; text-decoration:underline; text-underline-offset:4px; line-height:34px; }
   header search > #filter-box [role=group] { flex:1; 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; font:var(--bodyL); letter-spacing:var(--bodyL-spacing); display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; column-gap:8px; }
   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; pointer-events:none; z-index:10; width:0; height:0; margin:auto; padding:0; backdrop-filter:blur(1px) contrast(60%) brightness(40%); transition:backdrop-filter 125ms var(--easing-emphasized) 125ms, opacity 75ms var(--easing-emphasized) 225ms, width 25ms var(--easing-emphasized) 300ms, height 25ms var(--easing-emphasized) 300ms; }
   aside[aria-hidden=false].scrim { pointer-events:all; opacity:1; z-index:10; width:100dvw; height:100dvh; transition:opacity 125ms var(--easing-emphasized), backdrop-filter 175ms var(--easing-emphasized); }
   aside.scrim:not([aria-hidden=true]) + [role=dialog] { z-index:11; pointer-events:all; transform:translateY(-5dvh); height:var(--dialog-height); padding:24px; transition:opacity 150ms var(--easing-emphasized) 100ms, transform 400ms var(--easing-emphasized) 100ms, height 350ms var(--sharp-easing) 125ms, padding 350ms var(--sharp-easing) 125ms; }
   body:has(aside[aria-hidden=false].scrim) :is([role=presentation],[role=complementary]) { opacity:.38; transition:opacity 125ms var(--easing-emphasized); }
   [role=dialog] { --dialog-width:500px; --dialog-height:360px; z-index:11; pointer-events:none; position:absolute; inset:0; transform-origin:top; transform:translateY(calc(-50dvh - 50%)); min-width:280px; width:var(--dialog-width); max-width:600px; height:0; padding:0; margin:calc(45dvh - var(--dialog-height) / 2) auto auto auto; contain:content; flex:none; display:block; border-radius:28px; background-color:var(--container-bg); display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; row-gap:16px; transition:opacity 75ms var(--easing-emphasized) 200ms, transform 250ms var(--easing-emphasized), height 150ms var(--easing-emphasized), padding 100ms var(--easing-emphasized); }
   [role=dialog] > [data-svg] { flex:none; width:36px; height:36px; }
   [role=dialog] > [data-svg] > svg { width:36px; height:36px; }
   [role=dialog] > .headline { font:var(--headlineS); letter-spacing:var(--headlineS-spacing); text-align:center; }
   [role=dialog] > .text { font:var(--bodyL); letter-spacing:var(--bodyL-spacing); }
   [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; }

   #dialog-select-export + [role=dialog] { --dialog-height:278px; }
   #dialog-select-export-format + [role=dialog] { --dialog-height:360px; }
   #dialog-upload + [role=dialog] { --dialog-height:412px; }
   #dialog-help + [role=dialog] ul > li > kbd:last-child { margin-inline:4px 16px; }
   #dialog-help + [role=dialog] ul { display:none; margin-block:16px 0; margin-inline:12px 0; font:var(--bodyL); letter-spacing:var(--bodyL-spacing); }
   #dialog-help + [role=dialog] ul > li { padding-block:12px; }
   body:has(main > ol#catalog) > #dialog-help + [role=dialog] { --dialog-height:440px; }
   body:has(main > ol#catalog) > #dialog-help + [role=dialog] ul#catalog-shortcuts { display:block; }
   body:has(main > ol#catalog) > #dialog-help + [role=dialog] .headline > div::after { content:" catalogue produits"; }

   body:has([role=document][data-type=calendar]) > #dialog-help + [role=dialog] { --dialog-height:530px; }
   body:has([role=document][data-type=calendar]) > #dialog-help + [role=dialog] ul#calendar-shortcuts { display:block; }
   body:has([role=document][data-type=calendar]) > #dialog-help + [role=dialog] .headline > div::after { content:" planning de récupération"; }

   body:has([role=document][data-type=list]) > #dialog-help + [role=dialog] ul#datalist-shortcuts { display:block; }
   body:has([role=document][data-type=list]) > #dialog-help + [role=dialog] ul#datalist-shortcuts > li:is(#export-all-users,#export-all-products,#import-products) { display:none; }
   body:has([role=document][data-type=list] ol#users) > #dialog-help + [role=dialog] { --dialog-height:510px; }
   body:has([role=document][data-type=list] ol#users) > #dialog-help + [role=dialog] .headline > div::after { content:" liste des inscrits"; }
   body:has([role=document][data-type=list] ol#users) > #dialog-help + [role=dialog] ul#datalist-shortcuts > li#export-all-users { display:block; }
   body:has([role=document][data-type=list] ol#projects) > #dialog-help + [role=dialog] { --dialog-height:456px; }
   body:has([role=document][data-type=list] ol#projects) > #dialog-help + [role=dialog] .headline > div::after { content:" liste des projets"; }
   body:has([role=document][data-type=list] ol#user-requests) > #dialog-help + [role=dialog] { --dialog-height:456px; }
   body:has([role=document][data-type=list] ol#user-requests) > #dialog-help + [role=dialog] .headline > div::after { content:" liste des commandes"; }
   body:has([role=document][data-type=list] ol#inventory) > #dialog-help + [role=dialog] { --dialog-height:510px; }
   body:has([role=document][data-type=list] ol#inventory) > #dialog-help + [role=dialog] .headline > div::after { content:" inventaire des produits"; }
   body:has([role=document][data-type=list] ol#inventory) > #dialog-help + [role=dialog] ul#datalist-shortcuts > li:is(#export-all-products,#import-products) { display:block; }



/* -------------------------------------------------------------------------- */
   [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:empty { display:none; }
   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:0; }

   [role=list].data li { 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:height 275ms var(--accelerate-emphasized), transform 350ms var(--easing-emphasized), opacity 275ms var(--accelerate-legacy), gap 250ms var(--easing-emphasized), margin 250ms var(--easing-emphasized), outline 150ms var(--easing-emphasized), backdrop-filter 150ms var(--easing-emphasized); }
   [role=list].data li[aria-hidden] { contain:content; height:0; opacity:0; transition:height 350ms var(--decelerate-emphasized), opacity 225ms var(--easing-emphasized) 50ms; }
   [role=list].data li:has([data-key=profile][data-svg*=cancel]) { backdrop-filter:brightness(0.97); border-radius:36px; overflow:hidden; outline:1px solid var(--on-container-38); outline-offset:-1.5px; color:var(--on-container-38)!important; fill:var(--on-container-38)!important; }
   [role=list].data li:has([data-key=profile][data-svg*=cancel]) * { background-color:transparent!important; color:var(--on-container-38)!important; fill:var(--on-container-38)!important; }

   [role=list].data li.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.outgoing { opacity:0; }
   [role=list].data li.incoming { opacity:0; transform:translateY(400px); }
   [role=list].data li > .avatar.icon { flex:none; aspect-ratio:1 / 1; width:48px; height:auto; background-color:var(--item-bgcolor); fill:var(--item-color); }
   [role=list].data li [role=group] { flex:none; display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; column-gap:8px; }
   [role=list].data li [role=group].icon-holder { flex:1; column-gap:12px; justify-content:center; }
   [role=list].data li [role=group].block { flex:1; flex-flow:column nowrap; justify-content:center; align-items:flex-start; }
   [role=list].data li [role=group].title { flex:1; row-gap:0; align-items:baseline; column-gap:16px; }
   [role=list].data li [role=group].location { flex:1; justify-content:flex-start; }
   [role=list].data li [role=group].date, [role=list].data li [role=group].date > [role=group] { flex:1; }
   [role=list].data li:has([data-key=step]:is([data-svg*=warning],[data-svg*=obsolete],[data-svg*=rescheduled])) [role=group].date { fill:var(--red); color:var(--red); }
   [role=list].data li :has([data-key=step][data-svg*=rescheduled]) [data-key=pickup_date]::after { content:"Rdv à replanifier !"; }
   [role=list].data li [role=group].date > [role=group]:not(.block) { flex:1; flex-flow:row wrap; }
   [role=list].data li [role=group].date > [role=group].block { flex:none; max-width:100px; }
   /*[role=list].data li [role=group].date > [role=group]:not(.block) [data-key='pickup_date'] { padding-inline:0 8px; }*/
   [role=list].data li [role=group].date > [role=group]:not(.block) [data-key='pickup_start']:not(:empty)::before { content:'à'; padding-inline:0 4px; }
   [role=list].data:not(#projects) li [role=group].date > [role=group]:not(.block) [data-key='pickup_start']:not(:empty) + [data-key='pickup_end'] { display:none; }
   [role=list].data li [role=group].date > [role=group].block [data-key='pickup_start']:not(:empty) + [data-key='pickup_end']:not(:empty)::before { content:" - "; }

   [role=list].data li [data-key=step][data-svg*='basket.svg'] + [role=group].date { opacity:0; }
   [role=list].data li [data-key=step][data-svg*=order] + [role=group].date:has(:is(h4,h5):empty) > [data-svg][data-svg-alt] > svg:first-child { opacity:0; }
   [role=list].data li [data-key=step][data-svg*=order] + [role=group].date:has(:is(h4,h5):empty) > [data-svg][data-svg-alt] > svg:last-child { fill:var(--red); z-index:1; opacity:1; transform:scale(1); }
   [role=list].data li [data-key=step][data-svg*=order] + [role=group].date:has(:is(h4,h5):empty) > [role=group] { display:none; }
   [role=list].data li [role=group].date:has([data-svg*=rescheduled]) { opacity:1!important; }
   [role=list].data li [role=group].date:has([data-svg*=rescheduled]) svg { fill:var(--red)!important; }
   [role=list].data li [role=group].date h4 + h5 { display:flex; flex-flow:row nowrap; gap:8px; }

   body:has(> [role=complementary][aria-expanded]:not([aria-expanded=false])) ol[role=list].data { padding-inline:16px 8px; }
   body:has(> [role=complementary][aria-expanded]:not([aria-expanded=false])) [role=list].data li { column-gap:12px; }
   body:has(> [role=complementary][aria-expanded]:not([aria-expanded=false])) [role=list].data li [role=group].icon-holder { margin-inline:0!important; column-gap:4px; }
   body:has(> [role=complementary][aria-expanded]:not([aria-expanded=false])) [role=list].data li [role=group].icon-holder > :last-child { margin-inline:8px 0!important; }


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

   main > [role=list].data li:not([aria-selected]).highlight::before { 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 > [data-svg] { width:24px; height:24px; padding:3px; }
   .chip > [data-svg] > svg { width:18px!important; height:18px!important; }