/* ============================================================================
   Bizopia app rail — the shell shared by Leads, Customers, Plans, Proposals.

   The four pages come from four different places (04_html_report.py generates
   Leads, crm_build_view.py generates Customers, plans/proposals are static
   files), so the rail MARKUP is inlined in each of them rather than injected
   by script: navigation is the last thing that should depend on JS having run,
   and a page that fails to render its own nav is a dead end. test_app_nav.py
   asserts the four copies stay identical.

   This file is the single home for how the rail LOOKS. Styling is what churns;
   the markup is four destinations that change once a year.
   ============================================================================ */

:root{
  --rail-w: 72px;      /* desktop: fixed left strip */
  --rail-h: 58px;      /* under 900px: bottom tab bar */
  --rail-bg: #0a0c0f;
  --rail-line: #222a33;
  --rail-idle: #7d8792;
  --rail-live: #ffffff;
  --rail-accent: #e6002e;
}

/* The rail is fixed, so pages reserve its strip with body padding rather than
   a layout column. These four pages use three different shells (flex body,
   .app flex column, CSS grid) and padding is the one offset all three tolerate
   without touching their internals. */
body{ padding-left: var(--rail-w); }

.apprail{
  position: fixed; inset: 0 auto 0 0; width: var(--rail-w); z-index: 200;
  display: flex; flex-direction: column; gap: 10px;
  padding: 10px 8px 12px;
  background: var(--rail-bg);
  border-right: 1px solid var(--rail-line);
}

.apprail .rail-items{ display: flex; flex-direction: column; gap: 3px; }

.apprail .rail-items a{
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 9px 2px 8px; border-radius: 10px;
  color: var(--rail-idle); text-decoration: none;
  font: 600 9.5px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: .02em;
  transition: color .15s ease, background-color .15s ease;
}
.apprail .rail-items a svg{
  width: 19px; height: 19px; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.apprail .rail-items a:hover{ color: var(--rail-live); background: rgba(255,255,255,.06); }
.apprail .rail-items a:focus-visible{ outline: 2px solid var(--rail-accent); outline-offset: 2px; }

/* Active state is carried by aria-current, so the thing screen readers announce
   and the thing you see are the same attribute — they cannot drift apart. */
.apprail .rail-items a[aria-current="page"]{ color: var(--rail-live); background: rgba(230,0,46,.13); }
.apprail .rail-items a[aria-current="page"]::before{
  content: ""; position: absolute; left: -8px; top: 50%;
  width: 3px; height: 22px; margin-top: -11px;
  border-radius: 0 3px 3px 0; background: var(--rail-accent);
}

/* ---- Under 900px: the rail becomes a bottom tab bar --------------------- */
/* 900px matches the Leads dashboard's own mobile breakpoint, so the rail and
   the page's off-canvas drawer switch shells at the same width. */
@media (max-width: 900px){
  body{
    padding-left: 0;
    padding-bottom: calc(var(--rail-h) + env(safe-area-inset-bottom, 0px));
  }
  .apprail{
    inset: auto 0 0 0; width: auto; height: auto;
    flex-direction: row; gap: 0;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    border-right: 0; border-top: 1px solid var(--rail-line);
    /* Under the Leads drawer (z 80) and its backdrop (z 70): an open drawer is
       modal and should dim the tab bar like everything else. */
    z-index: 65;
  }
  .apprail .rail-items{ flex-direction: row; flex: 1; gap: 2px; }
  .apprail .rail-items a{ flex: 1 1 0; min-width: 0; }
  /* No edge indicator down here. The bar's items are pills with their own
     padding, so any indicator either floats detached above the pill or clips
     its rounded corner. The accent-tinted pill plus the white label is the
     conventional tab-bar active state and reads cleanly at this size;
     aria-current still carries it for assistive tech. */
  .apprail .rail-items a[aria-current="page"]::before{ display: none; }

  /* Pages whose shell is a full-viewport column must lose the bar's height too,
     or they scroll by exactly the bar. Leads has no .app wrapper, so this only
     reaches Customers / Plans / Proposals. */
  body > .app{
    height: calc(100dvh - var(--rail-h) - env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce){
  .apprail .rail-items a{ transition: none; }
}