/* Zeitdock v35: Homepage-width parity across all public and app pages.
   One canonical shell is used for header, footer, dashboard, app workspaces,
   legal/content pages and public landing pages. Inner cards may still use
   readable/form max-widths where the UI needs it, but the page axis is shared. */
:root{
  --zd-home-wide-max:1760px;
  --zd-home-panel-max:1640px;
  --zd-home-pad:clamp(32px,4vw,76px);
  --zd-layout-max:var(--zd-home-wide-max);
  --zd-layout-panel-max:var(--zd-home-panel-max);
  --zd-layout-gutter:var(--zd-home-pad);
  --zd-layout-width:min(calc(100% - var(--zd-layout-gutter) - var(--zd-layout-gutter)), var(--zd-layout-max));
  --zd-layout-panel-width:min(calc(100% - var(--zd-layout-gutter) - var(--zd-layout-gutter)), var(--zd-layout-panel-max));
}
@media(max-width:1320px){
  :root{--zd-home-pad:clamp(24px,3vw,44px);--zd-layout-gutter:var(--zd-home-pad);}
}
@media(max-width:760px){
  :root{--zd-home-pad:18px;--zd-layout-gutter:18px;}
}

/* Header, footer and global messages: same visual left/right axis as homepage. */
.nav .nav-container,
.footer-inner,
.flash,
.alert{
  width:var(--zd-layout-width)!important;
  max-width:none!important;
  margin-inline:auto!important;
  box-sizing:border-box!important;
}

/* Direct page shells. This deliberately targets first-level page wrappers, so
   nested cards/forms keep their own useful max-width instead of becoming huge. */
main#main-content > :is(
  .page-shell,
  .dashboard-page,
  .home-page,
  .ads-lp,
  .seo-page,
  .detail-page,
  .public-page,
  .public-content-page,
  .content-page,
  .privacy-page,
  .auth-page,
  .auth-shell,
  .verify-page,
  .delete-page,
  .setup-page,
  .twofa-shell,
  .worktime-page,
  .legal-admin-page,
  .support-admin-page,
  .settings-page,
  .async-workspace-shell,
  .audit-wrap,
  .my-times-page,
  .container
){
  width:var(--zd-layout-width)!important;
  max-width:none!important;
  margin-inline:auto!important;
  box-sizing:border-box!important;
}

/* Shell elements used inside marketing/content routes follow the same homepage shell. */
main#main-content :is(
  .home-shell,
  .ads-shell,
  .seo-shell,
  .public-shell,
  .content-shell,
  .detail-shell,
  .marketing-shell,
  .app-shell,
  .main-shell,
  .layout-shell,
  .settings-shell,
  .profile-shell,
  .employee-shell,
  .report-shell,
  .admin-shell,
  .workspace-shell,
  .async-workspace-shell
){
  width:var(--zd-layout-width)!important;
  max-width:none!important;
  margin-inline:auto!important;
  box-sizing:border-box!important;
}

/* Homepage section panels are intentionally a little calmer than the hero shell;
   reuse that same panel width wherever a page has a large outer panel/frame. */
main#main-content :is(
  .home-section > .home-shell,
  .home-section-trust > .home-shell,
  .dashboard-async-shell,
  .pricing-section-card,
  .public-hero-panel,
  .public-section-soft,
  .seo-final-cta-section
){
  width:var(--zd-layout-panel-width)!important;
  max-width:none!important;
  margin-inline:auto!important;
  box-sizing:border-box!important;
}

/* Known legacy single-page wrappers/cards that previously had 980/1120/1240/1280px caps. */
main#main-content > :is(.page-shell,.settings-page,.legal-admin-page,.support-admin-page,.twofa-shell,.worktime-page,.verify-page,.delete-page) {
  padding-inline:0!important;
}
main#main-content > .setup-page,
main#main-content > .auth-page,
main#main-content > .auth-shell,
main#main-content > .verify-page,
main#main-content > .delete-page,
main#main-content > .twofa-shell,
main#main-content > .worktime-page{
  display:grid!important;
  justify-items:center!important;
}
main#main-content > :is(.auth-page,.auth-shell,.verify-page,.delete-page,.setup-page,.twofa-shell,.worktime-page) > :is(.card,.auth-card,.verify-card,.twofa-card,.worktime-card){
  width:min(100%, 760px)!important;
  max-width:760px!important;
}

/* Tables and media must not break the unified shell on small screens. */
main#main-content :is(.responsive-table,.table-wrap,.app-table-wrap,.pricing-table-wrap,.platform-table){
  max-width:100%!important;
  overflow-x:auto!important;
  -webkit-overflow-scrolling:touch;
}
main#main-content :is(img,video,iframe,svg){
  max-width:100%;
}

@media(max-width:760px){
  .nav .nav-container,
  .footer-inner,
  .flash,
  .alert,
  main#main-content > :is(
    .page-shell,.dashboard-page,.home-page,.ads-lp,.seo-page,.detail-page,.public-page,.public-content-page,.content-page,.privacy-page,.auth-page,.auth-shell,.verify-page,.delete-page,.setup-page,.twofa-shell,.worktime-page,.legal-admin-page,.support-admin-page,.settings-page,.async-workspace-shell,.audit-wrap,.my-times-page,.container
  ),
  main#main-content :is(.home-shell,.ads-shell,.seo-shell,.public-shell,.content-shell,.detail-shell,.marketing-shell,.app-shell,.main-shell,.layout-shell,.settings-shell,.profile-shell,.employee-shell,.report-shell,.admin-shell,.workspace-shell,.async-workspace-shell){
    width:calc(100% - 28px)!important;
  }
  main#main-content :is(.home-section > .home-shell,.home-section-trust > .home-shell,.dashboard-async-shell,.pricing-section-card,.public-hero-panel,.public-section-soft,.seo-final-cta-section){
    width:calc(100% - 28px)!important;
  }
}