:root {
  --pims-navy: #1f3864;
  --pims-navy-dark: #16294a;
  --pims-accent: #2e74b5;
}

body {
  background-color: #f3f4f6;
}

#app-shell {
  min-height: 100vh;
}

.pims-sidebar {
  width: 260px;
  min-width: 260px;
  background-color: var(--pims-navy);
}

.pims-sidebar .nav-link {
  border-radius: .375rem;
}

.pims-sidebar .nav-link.active {
  background-color: var(--pims-accent);
  color: #fff;
}

.pims-sidebar .nav-link:not(.active):hover {
  background-color: var(--pims-navy-dark);
  color: #fff;
}

.pims-main {
  background-color: #f3f4f6;
  min-width: 0;
}

/* Let long unbroken values (URLs, file paths, IDs) wrap inside the
   detail list instead of forcing the page wider than the viewport.
   Scoped to just the value cells so it never affects normal text
   (table headers, short labels, table row content, etc.). */
.pims-main dl.row dd {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.pims-auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--pims-navy), var(--pims-accent));
}

.pims-auth-card {
  max-width: 440px;
  width: 100%;
}

.seed-phrase-box {
  font-family: "Consolas", "SFMono-Regular", monospace;
  font-size: 1.1rem;
  line-height: 2.2rem;
  letter-spacing: .02em;
  background: #fff8e6;
  border: 1px solid #e8d9a8;
  border-radius: .5rem;
  padding: 1rem 1.25rem;
}

.stat-card .stat-number {
  font-size: 2rem;
  font-weight: 600;
  color: var(--pims-navy);
}

.module-placeholder {
  text-align: center;
  padding: 4rem 1rem;
  color: #6c757d;
}

/* Dashboard: the four big "go to module" tiles (Points of Interest,
   Product Design, Schedules, Custom) and the metrics bar below them --
   see templates/dashboard.html and the Main Dashboard Design mockup. */
.dash-tile-link {
  display: block;
}

.dash-tile {
  border-radius: .75rem;
  transition: box-shadow .15s ease, transform .15s ease;
}

.dash-tile-link:hover .dash-tile {
  box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .12) !important;
  transform: translateY(-2px);
}

.dash-tile .card-body {
  padding: 2.75rem 1rem;
}

.dash-tile-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--pims-navy);
  line-height: 1.25;
}

.dash-tile-subtitle {
  font-size: 1rem;
  color: #6c757d;
  margin-top: .25rem;
}

.dash-metrics-bar {
  background-color: #e9ecf1;
  border-radius: .75rem;
  padding: 1.25rem;
}

/* ==========================================================================
   Help Module -- ported from "Book to Movie" studio's identical drawer
   (Zeb: "create a 'Help Module' for TMS exactly following the pattern of
   the Help features in [that] project ... with a tree structure"), just
   recolored from that project's dark theme onto TMS's own light one
   (--pims-navy / --pims-accent, same palette the sidebar already uses).
   See templates/_help_drawer.html and static/js/help.js.
   ========================================================================== */

/* Persistent Help affordance, top-right of the shell on every signed-in
   page. Fixed rather than placed in a pane so it survives whatever page
   content is doing underneath it. */
.app-help {
  position: fixed;
  top: .6rem;
  right: 1rem;
  z-index: 1040;
}

/* Reserves clearance above every page's own content so its top-right
   button row (Edit/Delete/Back, and similar) never sits underneath the
   fixed Help chip above -- Zeb: "Help button is overlapped and does not
   show properly. Check this for all forms." Both are right-aligned near
   the same corner, so the fix is vertical separation: push the content
   down far enough (3rem) to clear the Help chip's ~2.3rem footprint
   (its .6rem top offset + its own padding/border/line-height), with a
   bit of headroom, rather than trying to dodge it horizontally on a
   page-by-page basis. Left/right padding (px-4, set on the same element
   in base.html) and bottom padding are unchanged from before. */
.app-content {
  padding-top: 3rem;
  padding-bottom: 1.5rem;
}

.app-help-link {
  font: inherit;
  background: #fff;
  border: 1px solid #dee2e6;
  cursor: pointer;
  font-size: .8rem;
  color: var(--pims-navy);
  text-decoration: none;
  padding: .3rem .65rem;
  border-radius: .375rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.app-help-link:hover {
  background: var(--pims-navy);
  color: #fff;
  border-color: var(--pims-navy);
}

/* Two independently scrolling columns (tree + page), rather than
   Bootstrap's single-scroll offcanvas-body default. */
.help-drawer {
  --bs-offcanvas-width: min(760px, 100vw);
}

.help-body {
  display: flex;
  height: 100%;
  min-height: 0;
}

.help-nav {
  width: 240px;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background-color: #f8f9fa;
}

.help-tree {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: .5rem 0;
}

.help-section-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: .45rem .75rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--pims-navy);
}

.help-section-toggle:hover {
  background-color: #e9ecf1;
}

.help-chevron {
  display: inline-block;
  width: 1rem;
  margin-right: .15rem;
  font-size: 1.1em;
  line-height: 1;
  transition: transform .15s ease;
}

.help-section-toggle[aria-expanded="true"] .help-chevron {
  transform: rotate(90deg);
}

.help-page-list {
  list-style: none;
  margin: 0;
  padding: 0 0 .25rem;
}

.help-page-link {
  display: block;
  padding: .3rem .75rem .3rem 2rem;
  font-size: .85rem;
  color: #495057;
  text-decoration: none;
  border-radius: 0 .25rem .25rem 0;
}

.help-page-link:hover {
  background-color: #e9ecf1;
  color: #212529;
}

.help-page-link.active {
  background-color: var(--pims-accent);
  color: #fff;
  font-weight: 500;
}

.help-content {
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
}

.help-content :last-child {
  margin-bottom: 0;
}

.help-content pre {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: .375rem;
  padding: .75rem;
  overflow-x: auto;
}

.help-content code {
  color: var(--pims-accent);
}

.help-content a {
  color: var(--pims-accent);
}

@media (max-width: 576px) {
  .help-body {
    flex-direction: column;
  }
  .help-nav {
    width: 100%;
    min-width: 0;
    max-height: 40vh;
    border-right: none !important;
    border-bottom: 1px solid #dee2e6;
  }
}