/*
 * The Glacier app frame: header on top, green accent line under it, then the
 * L1 rail and the content area side by side.
 *
 * PMISync runs the **Simple Shell** -- header + accent line + L1 rail of
 * direct links, no groups and no L2 flyout. That is what Glacier's shell
 * decision logic gives for an app with 3-5 standalone features (Transfers,
 * Mappings, Jobs, Account); the two-level rail is reserved for 6+ features
 * with logical grouping. If PMISync grows past five, revisit this and add L2
 * rather than crowding the rail.
 *
 * Class names here keep Glacier's `ptag-` prefix on purpose: the shell is the
 * one part of the markup that is shared vocabulary across every PTAG app --
 * the print rules in this file and in the spec both key off these names. The
 * app's own blocks (dashboard, mapping, auth) keep their BEM names and simply
 * draw on Glacier tokens.
 */

/* The ground under the shell, painted on html as well as body. The job
   console loads Bulma, which paints html white; without this the console ends
   in a white band below the content while every other screen does not. */
html {
  background: var(--surface-secondary);
}

.ptag-app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

/* Header and rail are both sticky rather than fixed, so the frame is one
   normal-flow column and the content area scrolls the window. A fixed shell
   with its own scroller breaks in-page anchors and the browser's find-on-page
   scroll, which an operator uses constantly on the transfers table. */
.ptag-app__body {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* --- content ------------------------------------------------------------ */

.ptag-content {
  flex: 1;
  /* Without this a wide table stretches the flex item instead of scrolling
     inside its own wrapper, and the rail gets pushed off-screen. */
  min-width: 0;
  background: var(--surface-secondary);
}

/* --- mobile rail backdrop ------------------------------------------------
   Below 1024px the rail overlays the content rather than pushing it, so it
   needs something to dismiss against. */
.ptag-sidebar-overlay {
  display: none;
}

@media (max-width: 1023px) {
  .ptag-sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    top: calc(var(--header-height) + var(--accent-line-height));
    background: rgba(0, 0, 0, 0.3);
    z-index: var(--z-mobile-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-normal) ease-in-out;
  }

  .ptag-sidebar-overlay[data-visible="true"] {
    opacity: 1;
    pointer-events: auto;
  }
}

/* --- print ---------------------------------------------------------------
   Glacier section 17. Chrome goes, the content area goes full width, and the
   theme is forced light whatever the operator is running -- a dark screenshot
   of a transfer log is unreadable on paper. */
@media print {
  .ptag-header,
  .ptag-accent-line,
  .ptag-sidebar,
  .ptag-sidebar-overlay,
  .skip-link,
  .print-hidden {
    display: none !important;
  }

  .ptag-app__body {
    display: block !important;
  }

  .ptag-content {
    padding: 0 !important;
    overflow: visible !important;
  }

  body {
    background: #fff !important;
  }

  [data-theme="dark"] {
    color-scheme: light;
    --neutral-0: #FFFFFF;
    --neutral-50: #F8F8FC;
    --neutral-100: #F2F2F8;
    --neutral-200: #E5E5EE;
    --neutral-300: #D1D1DE;
    --neutral-400: #B0B0C4;
    --neutral-500: #8E8EA8;
    --neutral-600: #6B6B8A;
    --neutral-700: #4A4A68;
    --neutral-800: #2D2D44;
    --neutral-900: #1A1A2E;
  }
}