/* ==========================================================================
   Draco Staff Development — v8 Layout
   Page scaffolding + the three PURPOSE-BUILT layout modes.

   Breakpoints (see DESIGN-STANDARDS.md):
     Mobile  : max-width 767px        -> compact header, off-canvas drawer,
                                          bottom tab bar (native-app feel)
     Tablet  : 768px – 1179px         -> full header, slide-over drawer nav
     Desktop : min-width 1180px       -> full header, persistent collapsible
                                          sidebar rail
   These are NOT scaled versions of one layout — each class gets a layout
   built for how that device is actually held and used.
   ========================================================================== */

/* ------------------------- Background watermark ------------------------- */
/* Centered, subtle Draco logo behind every page. */
.watermark {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--watermark-src);
  background-repeat: no-repeat;
  background-position: center 46%;
  background-size: min(560px, 62vmin);
  opacity: var(--watermark-opacity);
  filter: saturate(0.4);
}

/* =========================================================================
   PUBLIC PAGE SCAFFOLD (landing, login, contact, reset)
   Sticky header at top; footer moves with content.
   ========================================================================= */
.page {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}
.page-main { flex: 1 0 auto; position: relative; z-index: 1; }
.site-footer { flex-shrink: 0; position: relative; z-index: 1; }

/* =========================================================================
   APP SHELL (dashboards)
   ========================================================================= */
.app-shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.topbar {
  position: sticky;   /* header stays fixed at the top on scroll */
  top: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  /* Promote to its own compositor layer so it repaints in sync with the scroll
     (eliminates the one-frame "sticky drift" jitter in Chrome). Safe: the only
     positioned descendant, the profile/notes dropdown, is absolute within it. */
  transform: translateZ(0);
  will-change: transform;
}

.sidebar {
  z-index: var(--z-sidebar);
}

.app-main {
  display: flex;
  flex-direction: column;
  /* Fill the space left by the sticky topbar via flex, NOT a `calc(100vh - header)`
     min-height. `100vh` ignores the scrollbar gutter, so the calc made the shell
     EXACTLY the viewport height — any sub-pixel then spawned a vertical scrollbar,
     which shrank the width and spawned a phantom horizontal one (the cascade). */
  flex: 1 0 auto;
  min-height: 0;
}
.app-content { flex: 1 0 auto; }
.app-footer  { flex-shrink: 0; }

/* Scrim behind an open drawer (tablet/mobile) */
.scrim {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
  z-index: var(--z-overlay);
}

/* Bottom tab bar — mobile only */
.bottomnav { display: none; }

/* =========================================================================
   DESKTOP  (>= 1180px) — persistent, collapsible sidebar rail
   ========================================================================= */
@media (min-width: 1180px) {
  .sidebar {
    position: fixed;
    top: var(--header-h);
    left: 0;
    width: var(--sidebar-w);
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    transition: width var(--transition);
    overflow: hidden;
  }
  .app-main {
    margin-left: var(--sidebar-w);
    transition: margin-left var(--transition);
  }
  /* Collapsed to icon rail */
  .sidebar-collapsed .sidebar { width: var(--sidebar-w-rail); }
  .sidebar-collapsed .app-main { margin-left: var(--sidebar-w-rail); }
  /* Hover/focus expand: the full sidebar widens and PUSHES the page content to the
     right (margin follows to the full width) — no overlap. A subtle shadow keeps
     the edge legible during the transition. */
  .sidebar-collapsed.sidebar-peek .sidebar { width: var(--sidebar-w); z-index: 60; overflow-y: auto; box-shadow: 6px 0 20px rgba(16, 33, 58, 0.10); }
  .sidebar-collapsed.sidebar-peek .app-main { margin-left: var(--sidebar-w); }

  .topbar .nav-toggle--drawer { display: none; }  /* desktop uses collapse, not drawer */
  .scrim { display: none; }
}

/* =========================================================================
   TABLET  (768px – 1179px) — slide-over drawer navigation
   Content gets the full width; nav slides over on demand.
   ========================================================================= */
@media (min-width: 768px) and (max-width: 1179px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-w);
    height: 100vh;
    height: 100dvh;
    transform: translateX(-100%);
    transition: transform var(--transition-slow);
    box-shadow: var(--shadow-xl);
    z-index: var(--z-drawer);   /* overlay above the top bar, with its own header */
  }
  .drawer-open .sidebar { transform: translateX(0); }
  .drawer-open .scrim { opacity: 1; visibility: visible; }
  .app-main { margin-left: 0; }
  .topbar .sidebar-collapse-btn { display: none; }  /* tablet uses drawer toggle */
}

/* =========================================================================
   MOBILE  (<= 767px) — compact header, off-canvas drawer + bottom tab bar
   ========================================================================= */
@media (max-width: 767px) {
  .topbar { height: var(--header-h-mobile); }
  .app-main {
    margin-left: 0;
    min-height: calc(100vh - var(--header-h-mobile));
    padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));   /* clear the bottom tab bar */
  }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: min(86vw, 320px);
    height: 100vh;
    height: 100dvh;
    transform: translateX(-100%);
    transition: transform var(--transition-slow);
    box-shadow: var(--shadow-xl);
    z-index: var(--z-drawer);   /* overlay above the top bar, with its own header */
  }
  .drawer-open .sidebar { transform: translateX(0); }
  .drawer-open .scrim { opacity: 1; visibility: visible; }
  .topbar .sidebar-collapse-btn { display: none; }

  .bottomnav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    z-index: var(--z-header);
  }
}

/* Prevent body scroll while a drawer is open */
body.no-scroll { overflow: hidden; }