/* Scrollable content between sticky header and bottom nav */
.screen-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 24px;
  position: relative;
  background: #ffffff;
  margin-top: 3%;
}

/* Nav-hd or page-header that should stick at top of scroll */
.sticky-header {
  position: sticky;
  top: 0;
  background: #ffffff;
  z-index: 10;
  border-bottom: 1px solid var(--border-lt);
  transition: box-shadow var(--transition);
}
.sticky-header.scrolled {
  box-shadow: 0 4px 12px rgba(3, 0, 22, 0.05);
}

/* Wraps bottom-nav */
.screen-footer {
  position: fixed;
  width: 100%;
  bottom: 0;
  background: transparent;
  z-index: 10;
}

/* Utilities */
.divider {
  width: 100%;
  height: 1px;
  background: var(--border-lt);
}

.spacer-sm {
  width: 100%;
  height: 8px;
  flex-shrink: 0;
}

.spacer-md {
  width: 100%;
  height: 16px;
  flex-shrink: 0;
}

.spacer-lg {
  width: 100%;
  height: 24px;
  flex-shrink: 0;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.flex-1 {
  flex: 1;
}

.w-full {
  width: 100%;
}

.d-flex {
  display: flex;
}

.align-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.flex-col {
  flex-direction: column;
}

.gap-sm {
  gap: 6px;
}

.gap-md {
  gap: 12px;
}

/* Auth pages layout */
.auth-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 24px var(--px);
  width: 100%;
}
.auth-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
}
.auth-logo-mark {
  width: 40px;
  height: 40px;
  background: var(--blue);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}
.auth-card {
  width: 100%;
  max-width: 375px;
  background: #ffffff;
  border-radius: var(--r-xl);
  padding: 28px 24px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-elevated);
}
.auth-heading {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 4px;
  color: var(--ink);
}
.auth-sub {
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: 24px;
}
.auth-footer {
  margin-top: 32px;
  font-size: 11px;
  color: var(--ink-faint);
  text-align: center;
}
.input-password-wrap {
  position: relative;
  width: 100%;
}
.input-password-wrap input {
  padding-right: 44px; /* leaves room for password eye icon toggle */
}
.input-password-toggle {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  z-index: 2;
}
.forgot-link {
  display: block;
  text-align: center;
  margin-top: 16px;
  font-size: 12px;
  color: var(--blue);
  font-weight: 600;
}

.hidden {
  display: none !important;
}

.visible {
  display: block !important;
}

.page-header-plain {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px var(--px) 20px;
}

/* Visibility */
.visible-block  { display: block !important; }
.visible-flex   { display: flex !important; }

/* Spacing */
.mt-0  { margin-top: 0; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mb-0  { margin-bottom: 0; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }

/* Text alignment */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* Flex utilities */
.flex-1  { flex: 1; }
.w-full  { width: 100%; }
.d-flex  { display: flex; }
.gap-8   { gap: 8px; }
.gap-12  { gap: 12px; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }

/* Screen body scroll container */
.screen-body {
    overscroll-behavior: contain;
}

/* Sticky elements */
.sticky-top {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 10;
    border-bottom: 1px solid var(--border-lt);
}

.sticky-bottom {
    position: sticky;
    bottom: 0;
    background: #fff;
    z-index: 10;
}

/* ════════════════════════════════════════════════════════════════
   DESKTOP LAYOUT — sidebar + centred content
   ════════════════════════════════════════════════════════════════ */

/* ── Sidebar component (desktop only; media queries below control
      visibility and width — 72px icon-only, 220px with labels) ── */
.sidebar {
    display: none;
    flex-direction: column;
    gap: 8px;
    background: #ffffff;
    border-right: 1px solid var(--border-lt);
    padding: 16px 12px;
    z-index: 20;
}
.sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 0 16px;
	margin-bottom: 20%;
}
/* Icon-only state (72px sidebar): object-fit:cover scales the image so
   its height fills the 32px box, then crops from the left — showing just
   the icon mark, which occupies the leftmost ~15% of the wordmark. */
.sidebar-logo {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: cover;
    object-position: left center;
    flex-shrink: 0;
}
.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sbi {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    border-radius: var(--r-md);
    color: var(--ink-faint);
    font-size: 13px;
	margin-bottom: 5%;
    font-weight: 600;
    transition: color var(--transition), background var(--transition);
}
.sbi:hover {
    color: var(--ink);
    background: var(--border-lt);
}
.sbi.act {
    color: var(--blue);
    background: rgba(46, 5, 194, 0.06);
}
.sbi svg {
    flex-shrink: 0;
}
.sbi span {
    display: none;
}

@media (min-width: 768px) {

    /* ── Body: fixed viewport height, group centred ──────────
       height + overflow: hidden keeps the page itself from
       scrolling — only .screen-body scrolls internally.
       align-items: stretch makes sidebar and .screen equal height
       automatically without needing explicit heights on either.
    */
    body {
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        padding: 0;
        background:#ffffff;
        height: 100vh;
        overflow: hidden;
        gap: 0;
    }

    /* ── Sidebar: in-flow, fills body height via stretch ─────── */
    .sidebar {
        display: flex;
        position: relative;
        height: auto;
        width: 72px;
        flex-shrink: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* ── Hide bottom nav (the sidebar replaces it) ─────────── */
    .bottom-nav-wrap,
    .screen-footer {
        display: none !important;
    }

    /* ── Content wrapper: fills remaining space, centres card ─ */
    /*
       We need to centre the .screen card in the space to the
       right of the sidebar. The trick: wrap .screen in a flex
       container that takes up all remaining width and uses
       justify-content: center.

       Since we cannot add a wrapper div without touching PHP,
       we achieve this by making body itself the flex container
       and using a margin: auto approach on .screen.
    */

    .screen {
        /* Remove card styling on desktop */
        border-radius: 0;
        border: none;
        box-shadow: none;
        background: #fff;

        /* Cap width for comfortable reading */
        width: 100%;
        max-width: 640px;

        /* Right border only — sidebar's border-right handles the left edge */
        border-right: 1px solid var(--border-lt);

        /* Fill body height (overrides base.css height: 812px) */
        height: 100%;
        flex-shrink: 0;
    }

    /*
       Because the sidebar is sticky and sits outside normal flow
       of the body flex context (it's a flex item), the remaining
       flex space is: viewport-width - sidebar-width.
       .screen with margin: auto centres itself within that space.
    */

    /* ── Right-side background fill ────────────────────────── */
    /*
       After the .screen card, any remaining space shows var(--bg).
       We achieve this by setting body background to var(--bg) (already set)
       and giving .screen a white background — the --bg shows through
       on both sides of the card.
    */

    /* ── Content area: consistent bottom padding ─ */
    .screen-body {
        padding-bottom: 24px;
    }

    /* ── Bottom sheets: centre in the content column ──────────
       The sheet must be centred within the .screen card column,
       not the full viewport. We do this by anchoring the sheet
       to the centre of the content card.

       The content card starts at: sidebar-width + auto-margin.
       At 768px with 72px sidebar, remaining = viewport - 72px.
       Card is centred in that: left-offset = 72px + (remaining - 640px) / 2
       But this varies with viewport width, so we use a simpler
       approach: keep left:50% and use translateX to shift right
       by half the sidebar width.
    */
    .sheet {
        left: 50%;
        transform: translateX(calc(-50% + 36px)) translateY(100%);
        max-width: 640px;
        width: calc(100% - 72px);
    }

    .sheet.open {
        transform: translateX(calc(-50% + 36px)) translateY(0);
    }
}

/* ── Full sidebar with labels at ≥1025px ──────────────────── */
@media (min-width: 1025px) {

    .sidebar {
        width: 220px;
        padding: 40px 16px;
    }

    .sidebar-brand {
        justify-content: flex-start;
        padding-left: 6px;
    }

    /* Full wordmark at 220px sidebar width */
    .sidebar-logo {
        width: 130px;
        height: auto;
        object-fit: contain;
        object-position: left center;
    }

    .sbi {
        justify-content: flex-start;
        padding: 12px 14px;
    }

    .sbi span {
        display: inline;
    }

    .screen {
        max-width: 680px;
    }

    /* Sheet adjusted for full-width sidebar */
    .sheet {
        transform: translateX(calc(-50% + 110px)) translateY(100%);
        width: calc(100% - 220px);
        max-width: 680px;
    }

    .sheet.open {
        transform: translateX(calc(-50% + 110px)) translateY(0);
    }
}

/* ── Wide desktop (≥1400px): more breathing room ──────────── */
@media (min-width: 1400px) {

    .screen {
        max-width: 720px;
    }

    .sheet {
        max-width: 720px;
    }
}

/* ── Mobile: restore original layout ──────────────────────── */
@media (max-width: 767px) {

    body {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 32px 16px;
        background: #ffffff;
    }

    .sidebar {
        display: none !important;
    }

    .bottom-nav-wrap {
        display: block !important;
    }

    .screen {
        width: 375px;
        max-width: 100%;
        border-radius: var(--r-2xl);
        border: 2px solid rgba(46, 5, 194, 0.15);
        box-shadow: none;
        margin-left: 0;
        margin-right: 0;
        min-height: unset;
    }

    .screen-body {
        padding-bottom: 150px !important; /* clears fixed bottom nav; !important prevents inline overrides */
    }

    /* Full-bleed on very small screens */
    @media (max-width: 420px) {
        body {
            padding: 0;
            background: #fff;
        }

        .screen {
            width: 100%;
            border-radius: 0;
            border: none;
        }
    }
}