/* passage.css — theme overrides on top of Bulma 1.0.2
 *
 * Bulma 1.0+ uses CSS custom properties for every colour and size.
 * We override only the variables we care about here; everything else
 * inherits from Bulma's defaults.
 *
 * Colour palette: deep forest green, institutional, trustworthy.
 */

/* ─── Light-mode theme variables ────────────────────────────────────────── */
:root {
  /* Primary brand colour — drives Bulma's "is-primary" modifier everywhere */
  --bulma-primary-h:          152deg;
  --bulma-primary-s:          41%;
  --bulma-primary-l:          30%;

  /* Link colour matches primary */
  --bulma-link-h:             152deg;
  --bulma-link-s:             41%;
  --bulma-link-l:             30%;

  /* Navbar */
  --bulma-navbar-background-color:            #f3f7f5;
  --bulma-navbar-item-color:                  #1a1f1c;
  --bulma-navbar-item-hover-color:            #2e6b4f;
  --bulma-navbar-item-hover-background-color: #e6efea;

  /* Menu (sidebar) */
  --bulma-menu-item-color:                    #1a1f1c;
  --bulma-menu-item-hover-color:              #2e6b4f;
  --bulma-menu-item-hover-background-color:   #e6efea;
  --bulma-menu-item-active-color:             #ffffff;
  --bulma-menu-item-active-background-color:  #2e6b4f;

  /* Project-specific tokens */
  --passage-sidebar-width:    13rem;
  --passage-sidebar-bg:       #f3f7f5;
  --passage-sidebar-border:   #c8d5cd;
  --passage-navbar-height:    3.25rem;
  --passage-stat-label-color: #6b7280;
  --passage-footer-bg:        #f3f7f5;
  --passage-footer-border:    #c8d5cd;
  --passage-footer-color:     #6b7280;

  /* Layout */
  --passage-max-width:        1280px;
}

/* ─── Dark-mode overrides (auto via prefers-color-scheme) ───────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --bulma-primary-h: 152deg;
    --bulma-primary-s: 35%;
    --bulma-primary-l: 55%;

    --bulma-link-h: 152deg;
    --bulma-link-s: 35%;
    --bulma-link-l: 55%;

    --bulma-navbar-background-color:            #1a2620;
    --bulma-navbar-item-color:                  #dde8e2;
    --bulma-navbar-item-hover-color:            #5ba882;
    --bulma-navbar-item-hover-background-color: #223328;

    --bulma-menu-item-color:                    #dde8e2;
    --bulma-menu-item-hover-color:              #5ba882;
    --bulma-menu-item-hover-background-color:   #223328;
    --bulma-menu-item-active-color:             #c8edd9;
    --bulma-menu-item-active-background-color:  #1f4a35;

    --passage-sidebar-bg:       #1a2620;
    --passage-sidebar-border:   #3a4f44;
    --passage-stat-label-color: #9ab8aa;
    --passage-footer-bg:        #141e1a;
    --passage-footer-border:    #3a4f44;
    --passage-footer-color:     #7a9e8c;
  }
}

/* ─── Brand wordmark (auth pages) ───────────────────────────────────────── */
.passage-wordmark {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--bulma-primary);
  letter-spacing: -0.03em;
  display: block;
  text-align: center;
  margin-bottom: 1.5rem;
}

/* ─── Admin sticky navbar ───────────────────────────────────────────────── */
.passage-navbar {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--passage-sidebar-border);
}

/* Admin navbar brand */
.passage-admin-brand {
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

/* ─── Fixed-width page container ────────────────────────────────────────── */
/*
 * Centres the admin UI at a comfortable reading/working width with responsive
 * horizontal padding. Used both inside the navbar and wrapping the shell+footer.
 */
.passage-admin-container {
  width: 100%;
  max-width: var(--passage-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  box-sizing: border-box;
}

/* Navbar uses container internally for brand alignment.
 * Bulma's navbar-brand already provides its own internal padding, so we
 * zero out the container's side padding here to avoid double-padding. */
.passage-navbar .passage-admin-container {
  display: flex;
  align-items: stretch;
  padding-left: 0;
  padding-right: 0;
}

/* ─── Admin page body wrapper ───────────────────────────────────────────── */
/*
 * Wraps the shell + footer, filling the full viewport height below the navbar
 * so the footer is always pushed to the bottom even on short pages.
 */
.passage-admin-body {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--passage-navbar-height));
}

/* ─── Admin shell layout ─────────────────────────────────────────────────── */
/*
 * Flex row: sidebar left, main content right.
 * flex: 1 makes the shell grow to fill all available space above the footer.
 */
.passage-admin-shell {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
}

/* ─── Admin sidebar ─────────────────────────────────────────────────────── */
/*
 * The sidebar background stretches to the full shell height (align-items:
 * stretch on the parent). The inner content stays sticky under the navbar
 * while long main content scrolls past.
 */
.passage-admin-sidebar {
  flex: 0 0 var(--passage-sidebar-width);
  width: var(--passage-sidebar-width);
  background-color: var(--passage-sidebar-bg);
  border-right: 1px solid var(--passage-sidebar-border);
  padding: 1.25rem 0.75rem;
  /* Stick under the navbar; ensures the sidebar never cuts off short */
  position: sticky;
  top: var(--passage-navbar-height);
  max-height: calc(100vh - var(--passage-navbar-height));
  overflow-y: auto;
  /* align-self intentionally omitted: parent's align-items: stretch lets the sidebar
     background fill the full shell height on content-heavy pages */
  /* Minimum height so the sidebar background fills the viewport on short pages */
  min-height: calc(100vh - var(--passage-navbar-height));
}

/* ─── Admin content area ────────────────────────────────────────────────── */
.passage-admin-content {
  flex: 1 1 0;
  min-width: 0;
  padding: 1.75rem 2rem;
}

/* ─── Admin footer ──────────────────────────────────────────────────────── */
/*
 * Full-bleed footer bar: background spans the viewport width, inner content
 * is constrained to --passage-max-width (matches the rest of the admin UI).
 * Separate from .passage-admin-container because we don't want the 1.25rem
 * side padding on the footer's background edge.
 */
.passage-admin-footer {
  background-color: var(--passage-footer-bg);
  border-top: 1px solid var(--passage-footer-border);
  padding: 0.875rem 1.25rem;
  color: var(--passage-footer-color);
  font-size: 0.8rem;
}

.passage-admin-footer-inner {
  max-width: var(--passage-max-width);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.passage-admin-footer a {
  color: var(--passage-footer-color);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.passage-admin-footer a:hover {
  color: var(--bulma-primary);
}

.passage-admin-footer-sep {
  opacity: 0.4;
}

/* ─── Responsive breakpoints ────────────────────────────────────────────── */

/* ── Tablet (769px – 1023px): narrower sidebar, slightly tighter padding ── */
@media screen and (min-width: 769px) and (max-width: 1023px) {
  :root {
    --passage-sidebar-width: 11rem;
  }

  .passage-admin-content {
    padding: 1.25rem 1.5rem;
  }
}

/* ── Mobile (≤768px): stack sidebar above content ── */
@media screen and (max-width: 768px) {
  .passage-admin-shell {
    flex-direction: column;
    align-items: stretch;
  }

  .passage-admin-sidebar {
    position: static;
    width: 100%;
    max-height: none;
    min-height: 0;
    border-right: none;
    border-bottom: 1px solid var(--passage-sidebar-border);
  }

  .passage-admin-content {
    padding: 1rem;
  }

  .passage-admin-footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }

  .passage-admin-footer-sep {
    display: none;
  }
}

/* ─── User app dashboard card grid ─────────────────────────────────────────
 * Each column stretches to full height so all cards in a row are equal height.
 * The card itself uses flex-column so card-content grows and card-footer stays
 * pinned to the bottom regardless of how much content is in card-content.
 */
.passage-dashboard-grid > .column {
  display: flex;
  flex-direction: column;
}

.passage-dashboard-grid .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.passage-dashboard-grid .card-content {
  flex: 1 1 auto;
}

/* ─── Dashboard stat tiles ──────────────────────────────────────────────── */
.passage-stat {
  text-align: center;
  padding: 1.5rem 1.25rem;
  min-width: 8rem;
}

.passage-stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--bulma-primary);
}

.passage-stat-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--passage-stat-label-color, #6b7280);
  margin-top: 0.35rem;
}