/* =====================================================================================================================
   Customer (client banking) portal on a desktop screen: the "open canvas" window.

   Two surfaces on one soft background, with no boxes inside boxes:
     1. the menu, on the left, sits straight on the canvas: no border, no frame;
     2. the page content, on the right, is one clean rounded panel with a hairline border and a soft shadow, with its own top bar and its own
        scrolling.
   There is an even gap around the panel and between it and the menu, so the page reads as one calm surface floating over the canvas.

   Only for screens 981px wide and up. Below that the menu is a drawer and the page is full width, exactly as before (customer-mobile.css),
   and print is untouched. Colours are the portal's sage / olive palette; dark mode (the portal-dark class on #mainApp) has its own set.
   ===================================================================================================================== */

@media screen and (min-width: 981px) {
  #mainApp.app-wrap {
    --shell-pad: 18px;            /* around the page panel, and between the menu and the panel */
    --shell-canvas: #eef2e6;      /* the soft background everything sits on */
    --shell-panel: #ffffff;
    --shell-edge: #e8ede5;        /* the panel's hairline border */
    --shell-radius: 26px;
  }
  #mainApp.app-wrap.portal-dark {
    --shell-canvas: #181b0f;
    --shell-panel: #212415;
    --shell-edge: #414737;
  }

  /* the canvas */
  #mainApp.app-wrap {
    background: var(--shell-canvas) !important;
    padding: 0;
    min-height: 100vh;
    overflow: visible;
  }

  /* the window is as tall as the screen, so the page itself does not scroll; the menu and the panel scroll by themselves */
  .portal-app-shell {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    padding: var(--shell-pad) var(--shell-pad) var(--shell-pad) 6px;
    gap: 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
  }

  /* 1. the menu: no box of its own; it scrolls by itself (wheel, trackpad, keyboard) when the screen is short, with its scrollbar hidden */
  .portal-sidebar {
    position: relative;
    top: auto;
    height: auto;
    align-self: stretch;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .portal-sidebar::-webkit-scrollbar { display: none; }
  .portal-sidebar .cp-nav-item.active {
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(54, 59, 33, 0.12), 0 0 0 1px rgba(72, 78, 30, 0.1);
  }

  /* 2. the content: one rounded panel with its own scrolling; the top bar stays at the top of the panel */
  .portal-main-column {
    min-height: 0;
    height: auto;
    align-self: stretch;
    margin: 0;
    border: 1px solid var(--shell-edge);
    border-radius: var(--shell-radius);
    background: var(--shell-panel);
    box-shadow: 0 2px 4px rgba(40, 46, 18, 0.05), 0 24px 48px -24px rgba(40, 46, 18, 0.28);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(72, 78, 30, 0.3) transparent;
  }
  .portal-topbar {
    background: var(--shell-panel);
    border-bottom: 1px solid var(--shell-edge);
  }

  /* dark mode: the same shapes, darker tones (the portal's own dark rules force the colours with !important, so these do too) */
  #mainApp.app-wrap.portal-dark .portal-sidebar { background: transparent !important; }
  #mainApp.app-wrap.portal-dark .portal-main-column { background: var(--shell-panel) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35), 0 24px 48px -24px rgba(0, 0, 0, 0.7); }
  #mainApp.app-wrap.portal-dark .portal-topbar { background: var(--shell-panel) !important; border-bottom-color: var(--shell-edge); }
  #mainApp.app-wrap.portal-dark .portal-sidebar .cp-nav-item.active { background: #333715 !important; box-shadow: 0 0 0 1px #414737; }
}