/* =========================================================
   Global single page canvas — 2026-06-21 (v3)
   - One translucent white canvas for every visible page.
   - The desktop parent iframe host remains transparent so it never creates
     a second white layer around the embedded page.
   ========================================================= */

:root{
  --ops-page-canvas-alpha: 0.34;
  --ops-page-canvas-gap: 14px;
  --ops-page-canvas-radius: 28px;
  --ops-page-canvas-border: rgba(255,255,255,0.46);
  --ops-page-canvas-shadow: 0 18px 44px rgba(15,23,42,0.07);
}

/* Do not paint another solid parent surface behind the page canvas. */
body:not(.login-page):not(.pwa-offline):not(.pwa-start) .main-content{
  background: transparent !important;
  box-shadow: none !important;
}

/* This is the visible white background for a page. In persistent-shell mode,
   it applies only inside the iframe page—not to the parent host. */
body:not(.login-page):not(.pwa-offline):not(.pwa-start) .main-content > main:not(.ops-shell-host-main){
  align-self: stretch !important;
  box-sizing: border-box !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 var(--ops-page-canvas-gap) var(--ops-page-canvas-gap) !important;
  border: 1px solid var(--ops-page-canvas-border) !important;
  border-radius: var(--ops-page-canvas-radius) !important;
  background-color: rgba(255,255,255,var(--ops-page-canvas-alpha)) !important;
  background-image: none !important;
  background-clip: padding-box !important;
  box-shadow: var(--ops-page-canvas-shadow) !important;
}

/* Desktop persistent iframe shell: transparent parent only. The iframe page
   above is canvas #2 and must be the only visible background layer. */
body.page-shell-host .main-content > main.ops-shell-host-main{
  align-self: stretch !important;
  box-sizing: border-box !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.page-shell-host .ops-shell-frame-wrap,
body.page-shell-host .ops-shell-frame{
  background: transparent !important;
  box-shadow: none !important;
}

/* Some old page CSS uses display:block/grid !important for its main element.
   The host marks that legacy element hidden once its iframe finishes loading;
   enforce the hidden state to prevent Expenses from appearing twice. */
body.page-shell-host .main-content > main[data-ops-shell-legacy="1"][hidden]{
  display: none !important;
}

/* Keep all page layouts inside the same width rules without changing page logic. */
body:not(.login-page):not(.pwa-offline):not(.pwa-start) :is(
  main.products-shell,
  main.expenses-layout,
  main.history-page-shell,
  main.backup-page-shell,
  main.kpis-main,
  main.tasks-v2-main,
  main.messages-body,
  main.page-body,
  main.container-full-width,
  main.ua-page-body
){
  box-sizing: border-box !important;
  min-width: 0 !important;
}

/* Expenses by User: remove the narrow legacy layout canvas and centre its actual content. */
main.expenses-layout{
  max-width: none !important;
  width: auto !important;
}

main.expenses-layout > :is(#userTabs,#usersInfo){
  width: min(100%,1080px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Page-specific workspace wrappers are structural only; the shared canvas above
   owns the visible page background. */
:where(body.products-page,body.proposals-page,body.kits-page) :where(
  .products-proposals-view.proposals-folders-card,
  .proposals-folders-card,
  .products-proposal-detail,
  .proposals-panel
){
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* =========================================================
   2026-07-08: Content-only page surfaces
   - Remove the global translucent full-page canvas from every page.
   - Keep the system cover/photo background visible around the real content.
   - Leave each page's own white cards/panels responsible for the content area,
     so the white background follows the actual content height only.
   ========================================================= */
:root{
  --ops-page-canvas-alpha: 0;
  --ops-page-canvas-border: transparent;
  --ops-page-canvas-shadow: none;
}

body:not(.login-page):not(.pwa-offline):not(.pwa-start) .main-content,
body:not(.login-page):not(.pwa-offline):not(.pwa-start) .main-content > main,
body:not(.login-page):not(.pwa-offline):not(.pwa-start) .main-content > main:not(.ops-shell-host-main){
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body:not(.login-page):not(.pwa-offline):not(.pwa-start) .main-content > main:not(.ops-shell-host-main){
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Keep only real content cards/panels white; do not paint a page-height backdrop. */
:where(
  body.current-orders-page,
  body.operations-orders-page,
  body.orders-review-page,
  body[data-orders-view="maintenance"],
  body.page-orders-maintenance-orders,
  body.stocktaking-page,
  body.page-stocktaking,
  body.user-access-page,
  body.page-user-access
) :where(#current-orders.card, #sv-orders.card, .page-body > section.card, .main-content > main.container-full-width > section.card:has(.groups-grid), .ua-folders-panel, .ua-members-panel){
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  border: 1px solid rgba(229, 231, 235, 0.9) !important;
  border-radius: 24px !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

:where(
  body.current-orders-page,
  body.operations-orders-page,
  body.orders-review-page,
  body[data-orders-view="maintenance"],
  body.page-orders-maintenance-orders,
  body.stocktaking-page,
  body.page-stocktaking
) :where(#current-orders.card, #sv-orders.card, .page-body > section.card, .main-content > main.container-full-width > section.card:has(.groups-grid)){
  padding: 16px !important;
}

:where(body.page-orders-new, body.shell-embedded.page-orders-new) .order-type-step{
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  border: 1px solid rgba(229, 231, 235, 0.9) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Lists themselves stay transparent so their cards keep the clean floating look. */
:where(body.current-orders-page, body.operations-orders-page, body.orders-review-page, body[data-orders-view="maintenance"], body.page-orders-maintenance-orders) :where(#orders-list, #requested-list, #sv-list){
  background: transparent !important;
}


/* =========================================================
   2026-08-18: default system background when no user cover exists
   - A real user cover keeps the existing cover-photo backdrop.
   - Without a cover, use a clean white system background instead of exposing
     the dark shell through the transparent content surface.
   - Embedded iframe pages stay transparent so a parent shell cover can still
     remain visible behind them.
   ========================================================= */
/* Theme-aware default page canvas. Light mode stays white, while dark mode
   uses a true black workspace behind the page content/cards. */
body:not(.login-page):not(.pwa-offline):not(.pwa-start):not(.shell-embedded):not(.ops-has-system-cover) .main-content{
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
}

html[data-theme="dark"] body:not(.login-page):not(.pwa-offline):not(.pwa-start):not(.shell-embedded):not(.ops-has-system-cover) .main-content{
  background: #000000 !important;
  background-color: #000000 !important;
  background-image: none !important;
}

/* =========================================================
   2026-10-07: Current Orders list surface cleanup
   Remove the large white wrapper behind the individual order cards.
   The order cards themselves keep their own card styling.
   ========================================================= */
body.current-orders-page .next-classic-orders-parity #current-orders.card {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 4px 18px !important;
}