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

body {
  background-color: #f3f4f6;
}

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

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

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

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

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

.gss-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.). */
.gss-main dl.row dd {
  overflow-wrap: anywhere;
  word-break: break-word;
}

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

.gss-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(--gss-navy);
}

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

.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: 2rem 1rem;
}

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

.dash-tile-icon {
  display: block;
  font-size: 1.75rem;
  color: var(--gss-accent, var(--gss-navy));
  margin-bottom: .5rem;
}

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

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

/* Business Card display (Contacts view page) — a standard-size card that
   flips in place between its front and back face when both are on file.
   See templates/contacts/view.html. */
.bcard-flip-wrap {
  perspective: 1200px;
}

.bcard-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.bcard-flip-inner.is-flippable {
  cursor: pointer;
}

.bcard-flip-inner.is-flipped {
  transform: rotateY(180deg);
}

.bcard-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.bcard-face-back {
  transform: rotateY(180deg);
}

.bcard-flip-badge {
  position: absolute;
  bottom: 6px;
  right: 6px;
  pointer-events: none;
}

/* In-app contextual Help panel (Bootstrap Offcanvas) — see
   templates/_help_drawer.html and static/js/help.js. Two independently
   scrolling columns: a narrow tree on the left, the page content on the
   right, matching the left-nav/right-content shape described for this
   feature rather than Bootstrap's single-scroll offcanvas-body default. */
.gss-help-drawer {
  --bs-offcanvas-width: min(760px, 100vw);
}

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

.gss-help-nav {
  width: 240px;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

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

.gss-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(--gss-navy);
}

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

.gss-help-section-toggle .bi-chevron-right {
  font-size: .7em;
  transition: transform .15s ease;
}

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

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

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

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

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

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

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

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