/* v7 — native top layer; CSS alone owns dialog geometry.
   #overlay-root is a plain body child. A dialog's ::backdrop is its native
   top-layer sibling, painted immediately below the dialog by the browser. */
:root{--overlay-gap:16px;--overlay-panel-width:620px;--overlay-padding:24px}
#overlay-root{position:relative;z-index:var(--layer-overlay);transform:none;filter:none;backdrop-filter:none;overflow:visible;contain:none}
#overlay-root dialog{
 position:fixed;
 inset:calc(var(--safe-top) + var(--overlay-gap)) calc(var(--safe-right) + var(--overlay-gap)) calc(var(--safe-bottom) + var(--overlay-gap)) calc(var(--safe-left) + var(--overlay-gap));
 margin:auto;width:calc(100% - var(--safe-left) - var(--safe-right) - 2 * var(--overlay-gap));max-width:var(--overlay-panel-width);min-width:0;
 height:fit-content;block-size:fit-content;min-height:0;min-block-size:0;
 max-height:calc(var(--viewport-height) - var(--safe-top) - var(--safe-bottom) - 2 * var(--overlay-gap));
 max-block-size:calc(var(--viewport-height) - var(--safe-top) - var(--safe-bottom) - 2 * var(--overlay-gap));
 padding:var(--overlay-padding);border:1px solid var(--glass-border);border-radius:18px;
 background:var(--elevated);color:var(--text);box-shadow:var(--glass-shadow);
 overflow-y:auto;overscroll-behavior:contain;scroll-padding:24px;
 transform:none;animation:none;transition:none;z-index:var(--layer-drawer);
}
#overlay-root dialog:not([open]){display:none}
#overlay-root dialog.confirmation,#overlay-root #drawer.compact-drawer{--overlay-panel-width:440px}
#overlay-root dialog.confirmation{z-index:var(--layer-modal)}
/* No clipping, inset compensation, system-area strips or overlay pseudo-panels. */
#overlay-root dialog::backdrop{position:fixed;inset:0;clip-path:none;background:rgba(9,11,15,.27);-webkit-backdrop-filter:blur(7px) saturate(105%);backdrop-filter:blur(7px) saturate(105%)}
:root[data-theme=light] #overlay-root dialog::backdrop{background:rgba(66,58,46,.13)}
/* Confirmations retain their native blurred backdrop, including over a form. */
#overlay-root #drawer.day-details-drawer{
 inset:auto var(--safe-right) 0 var(--safe-left);margin:0 auto;
 width:calc(100% - var(--safe-left) - var(--safe-right));max-width:620px;
 border-radius:20px 20px 0 0;
}
#overlay-root #drawer .drawer-top{position:static;min-height:44px;padding:0;margin-bottom:20px;background:transparent}
#overlay-root #drawer .drawer-top .icon-button{width:44px;height:44px;border:0;box-shadow:none}
#overlay-root #drawer .drawer-footer{position:sticky;bottom:-24px;z-index:var(--layer-sticky);margin-top:16px;margin-bottom:-24px;margin-inline:calc(0px - var(--overlay-padding));padding:16px var(--overlay-padding) 24px;background:var(--elevated);border-top:1px solid var(--glass-border)}
#overlay-root #drawer>:last-child:not(form):not(.drawer-footer){margin-bottom:0}
#overlay-root #drawer .client-summary-text{height:auto;min-height:0;max-height:40dvh;resize:vertical}
#overlay-root .account-popover,#overlay-root .client-menu-options,#overlay-root .period-picker{
 position:fixed;margin:0;z-index:var(--layer-popover);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);background:var(--elevated);
 max-width:calc(100vw - var(--safe-left) - var(--safe-right) - 24px);
 max-height:calc(var(--viewport-height) - var(--safe-top) - var(--safe-bottom) - 100px);
 overflow-y:auto;overscroll-behavior:contain;animation:none;transform:none;
}
#overlay-root .account-popover{inset:auto;left:var(--account-left,12px);top:max(calc(var(--safe-top) + 12px),var(--account-top,80px))}
#overlay-root [popover]::backdrop{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 #overlay-root dialog,#overlay-root #drawer.day-details-drawer,#overlay-root .account-popover,#overlay-root .client-menu-options,#overlay-root .period-picker{
  background:var(--glass-panel);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturation));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturation));
 }
 #overlay-root #drawer .drawer-footer{background:var(--glass-actions);-webkit-backdrop-filter:blur(var(--glass-actions-blur)) saturate(var(--glass-saturation));backdrop-filter:blur(var(--glass-actions-blur)) saturate(var(--glass-saturation))}
}
@media(max-width:700px){:root{--overlay-padding:20px}#overlay-root dialog{padding:var(--overlay-padding)}#overlay-root #drawer .drawer-footer{bottom:-20px;margin-bottom:-20px;padding-bottom:20px}}
/* Main-page chrome consumes safe-top once and never adds document height. */
#app::before{content:"";position:fixed;inset:0 0 auto;height:var(--safe-top);background:var(--bg);z-index:1000;pointer-events:none}

/* v7.1 — two visual corrections only. */
#overlay-root #drawer.day-details-drawer{
 --sheet-padding:24px;
 padding-bottom:calc(var(--sheet-padding) + var(--safe-bottom));
}
#overlay-root #drawer.day-details-drawer .drawer-footer{
 bottom:0;
 margin-bottom:calc(0px - var(--sheet-padding) - var(--safe-bottom));
 padding-bottom:calc(var(--sheet-padding) + var(--safe-bottom));
}
@media(max-width:700px){#overlay-root #drawer.day-details-drawer{--sheet-padding:20px}}
/* The normal chrome remains unchanged when no modal is open. */
body:has(#overlay-root dialog[open]) #app::before{visibility:hidden}

/* v7.2: internal list sizing only; retain the native dialog and its outer bounds.
   The list owns scrolling, so neither the header nor actions cover its rows. */
#overlay-root #drawer.day-details-drawer[open]{display:flex;flex-direction:column;overflow-y:hidden;border-color:transparent;box-shadow:inset 0 1px 0 var(--glass-border),var(--glass-shadow)}
#overlay-root #drawer.day-details-drawer>*{flex:0 0 auto}
#overlay-root #drawer.day-details-drawer .day-details-list{flex:0 1 auto;min-height:0;min-block-size:0;overflow-y:auto;overscroll-behavior-y:contain;scroll-padding-block:4px;padding:4px;margin-inline:-4px}
#overlay-root #drawer.day-details-drawer .day-detail{flex:0 0 auto}
#overlay-root #drawer.day-details-drawer .drawer-footer{position:relative;bottom:auto;margin-bottom:calc(0px - var(--sheet-padding) - var(--safe-bottom));flex:0 0 auto}
/* Non-sticky actions inherit their panel's glass without a second painted slab. */
#overlay-root .confirmation-actions,#overlay-root .account-actions{background:transparent}

/* v7.3: form>* has max-width:100% for native controls. Action footers alone
   must stretch across the panel padding reclaimed by their inline margins.
   Keep width auto: stretch includes those margins without a viewport calc. */
#overlay-root #drawer .drawer-footer{
 width:auto;inline-size:auto;max-width:none;max-inline-size:none;min-width:0;
 box-sizing:border-box;align-self:stretch;flex-shrink:0;
 height:auto;block-size:auto;max-height:none;max-block-size:none;
 overflow:visible;
}

/* v7.4: a dedicated, non-interactive glass surface fills each action footer.
   The existing sticky/relative footer z-index contains this negative layer;
   controls paint above it. No filter is applied to the buttons or their text. */
#overlay-root #drawer .drawer-footer{
 background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;
}
#overlay-root #drawer .drawer-footer::before{
 content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:var(--elevated);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 #overlay-root #drawer .drawer-footer::before{
  background:var(--glass-actions);
  -webkit-backdrop-filter:blur(var(--glass-actions-blur)) saturate(var(--glass-saturation));
  backdrop-filter:blur(var(--glass-actions-blur)) saturate(var(--glass-saturation));
 }
}
/* A read-only preview is a document region, not a native editing control.
   Let gestures chain to the containing dialog at its scroll boundary. */
#overlay-root #drawer .client-summary-text{
 display:block;width:100%;min-width:0;box-sizing:border-box;
 margin-top:9px;border:1px solid var(--border-strong);border-radius:8px;color:var(--text);
 resize:none;overflow-y:auto;touch-action:pan-y pinch-zoom;overscroll-behavior-y:auto;
 -webkit-user-select:text;user-select:text;
}
#overlay-root #drawer .client-summary-text:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* v7.4.1: balance ordinary action footers; keep day-sheet safe-area padding. */
#overlay-root #drawer:not(.day-details-drawer) .drawer-footer{padding-bottom:16px}