/* Shared authenticated navigation and market context. */
.app-shell {
  /* Composed here rather than on :root so the responsive --content-gutter overrides below
     actually reach it: both declarations land on this element, so the gutter is resolved
     first and this picks up the winning value. The 100% resolves against whichever band
     applies it, which is why it belongs on a full-width band and not on a nested box. */
  --content-pad: max(var(--content-gutter), calc((100% - var(--content-max)) / 2));

  --shell-ink: #203b60;
  --shell-muted: #65778b;
  --shell-line: #e3e9ee;
  --shell-green: #187459;
  --shell-mint: #e7f8f1;
  --shell-background: #f6f8fa;
}

body.app-shell.theme-light {
  background: var(--shell-background);
  color: var(--shell-ink);
}

.app-shell > #container > .navbar {
  background: #fff;
  border-bottom: 1px solid var(--shell-line);
  padding: 0;
  --navbar-avatar-size: 36px;
}

.app-shell .navbar > .container-fluid {
  min-height: 72px;
  padding: var(--spacing-md) 42px;
  gap: var(--spacing-lg);
  flex-wrap: nowrap;
}

/* Only pages whose body sits in the content column pull the brand into it; on a page that
   still lays its content out full width, moving the brand inwards would leave it indented
   against a title at the page gutter. Today that is the portfolio page; other pages line up
   as they add their own page class here. */
.app-shell.portfolio-page .navbar > .container-fluid { padding-inline: var(--content-pad); }

.app-shell .navbar-brand { margin: 0; }
.app-shell .navbar-brand-name { font-weight: 700; }
.app-shell .app-main-nav { flex: 1; min-width: 0; }
.app-shell .navbar-nav {
  justify-content: center;
  flex-direction: row;
  gap: 6px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0 !important;
}

.app-shell .navbar .nav-item { min-width: 0; width: auto; }
.app-shell .navbar .nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 9px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--shell-muted) !important;
}

.app-shell .navbar .nav-link.active {
  background: var(--shell-mint);
  color: var(--shell-green) !important;
}

.app-shell .navbar .nav-link:hover { background: #f1f5f7; }
.app-shell .navbar .nav-link.active:hover { background: #dcf5e9; }
.app-shell .navbar .nav-link i { width: auto; }
.app-shell .profile-and-actions { order: initial; flex-shrink: 0; }
.app-shell .navbar-notification-button {
  border: 0;
  border-radius: 8px;
  box-shadow: none;
}
.app-shell .navbar-notification-button i { font-size: 18px; }
.app-shell .navbar-notification-button .new-dot { width: 6px; height: 6px; top: 5px; right: 7px; }
.app-shell .avatar-nav-wrapper .tier-badge { width: 17px; height: 17px; font-size: 7px; border-color: #fff; }

.app-shell .market-trends-container {
  padding: var(--spacing-sm) var(--content-pad);
  gap: var(--spacing-lg);
  border-color: var(--shell-line);
}
.app-shell .trend-item {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--shell-line);
  border-radius: 0;
  padding: 0 var(--spacing-lg) 0 0;
  gap: var(--spacing-sm);
}
.app-shell .trend-item:last-child { border-right: 0; }
.app-shell .trend-item:hover { background: transparent; box-shadow: none; transform: none; }
.app-shell .trend-label, .app-shell .trend-price, .app-shell .trend-value { font-size: var(--text-xs); }
.app-shell .market-headlines-bar {
  background: transparent;
  border-bottom: 0;
  padding-block: var(--spacing-sm);
  padding-inline: var(--content-pad);
}

@media (min-width: 1024px) {
  /* This intentionally overrides app.css for all authenticated side panels.
     The width goes through Bootstrap's own custom property on purpose: bootstrap.min.css is
     imported after our stylesheets, so its `.offcanvas.offcanvas-end { width: var(--bs-offcanvas-width) }`
     matches at the same specificity and wins on source order. Setting the property makes
     Bootstrap's rule compute our width instead of fighting it. */
  .app-shell .sidebar {
    --bs-offcanvas-width: min(520px, 32vw);
    min-width: 360px;
    max-width: 520px;
  }

  /* The corner belongs to a panel; below this width the panel is the whole screen. */
  .app-shell .sidebar {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
  }

  .app-shell .sidebar .sidebar-content {
    padding: var(--spacing-lg);
  }

  .app-shell .sidebar .sidebar-content > header {
    margin-bottom: var(--spacing-lg);
  }

  /* Matches the page heading it was opened from; at its old clamp the panel title was half
     again as large as the page title behind it. */
  .app-shell .sidebar .sidebar-content > header h1 {
    font-size: var(--text-lg);
    font-weight: 800;
    letter-spacing: -0.03em;
  }

  .app-shell .sidebar .sidebar-content > footer {
    margin-top: var(--spacing-lg);
  }

  /* Chat owns its vertical layout and intentionally keeps the bottom padding at zero. */
  .app-shell .sidebar .sidebar-content:has(.chat-sidebar-main) {
    padding-bottom: 0;
  }
}

@media (max-width: 1023px) {
  .app-shell .sidebar .sidebar-content {
    padding: var(--spacing-md);
  }
}

/* Panel controls.
   The panels still carry the app's original button language: 30px pills with 30px of
   horizontal padding, 16px labels and a second navy (#1d3354 against the shell's #203b60).
   A panel opens on top of the page it belongs to, so that difference reads as two products
   in one window. This is scoped to the panel on purpose: the same language lives in the
   global `.btn` in app.css, which drives 128 templates, and migrating those pages is its
   own pass. */
.app-shell .sidebar {
  border-color: var(--shell-line);
}

/* Label size covers link buttons too: they sit next to real buttons in the same row, and a
   16px link beside a 12px button is the mismatch in miniature. Only the box treatment below
   skips them, a link button has no box to size. */
.app-shell .sidebar .btn:not(.asset-type-card) {
  font-size: var(--text-xs);
  font-weight: 700;
}

.app-shell .sidebar .btn:not(.asset-type-card):not(.btn-link) {
  --bs-btn-border-radius: var(--radius-sm);
  --bs-btn-padding-x: var(--spacing-md);
  --bs-btn-padding-y: var(--spacing-sm);
  min-height: 40px;
}

.app-shell .sidebar .btn-primary,
.app-shell .sidebar .btn-primary:disabled {
  --bs-btn-bg: var(--shell-ink);
  --bs-btn-border-color: var(--shell-ink);
  --bs-btn-hover-bg: #2c4e77;
  --bs-btn-hover-border-color: #2c4e77;
  --bs-btn-active-bg: #2c4e77;
  --bs-btn-active-border-color: #2c4e77;
}

.app-shell .sidebar .btn-secondary {
  --bs-btn-bg: #fff;
  --bs-btn-color: var(--shell-ink);
  --bs-btn-border-color: var(--shell-line);
  --bs-btn-border-width: 1px;
  --bs-btn-hover-bg: #edf2f5;
  --bs-btn-hover-color: var(--shell-ink);
  --bs-btn-hover-border-color: var(--shell-line);
  --bs-btn-active-bg: #edf2f5;
  --bs-btn-active-color: var(--shell-ink);
}

/* Fields keep their 16px text: below that iOS zooms the page when one takes focus. Only
   the corner follows the page. */
.app-shell .sidebar .form-control,
.app-shell .sidebar .form-select {
  border-radius: var(--radius-sm);
}

/* The type cards keep their own size, they are cards rather than buttons, but they follow
   the card corner and drop to the label size that stops "Cryptovaluta" truncating in a
   three-across row. */
.app-shell .sidebar .asset-type-card {
  --bs-btn-border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

/* The label carries Bootstrap's .h6, which sets its own 16px and wins over the card above,
   and the card is only wide enough for about 90px of nowrap text: "Cryptovaluta" has been
   rendering as "Cryptoval..." because of it. */
.app-shell .sidebar .asset-type-card .h6 {
  font-size: var(--text-sm);
}

.app-shell .sidebar .accordion-button {
  font-size: var(--text-sm);
  font-weight: 700;
}

/* Through Bootstrap's own property rather than `background`, so anything else reading it
   (its JS, its focus ring) sees the same colour. */
.app-shell .sidebar .accordion-button {
  --bs-accordion-active-bg: var(--shell-ink);
}

.app-shell .sidebar .action-add-portfolio {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--shell-ink);
}
/* 12px is the floor the type scale sets for visible text; the headline bar used to sit
   below it at 9 and 10px. */
.app-shell .headline-text { color: var(--shell-muted); font-size: var(--text-xs); }
.app-shell .headline-eyebrow { font-size: var(--text-xs); }
.app-shell .headline-source { font-size: var(--text-xs); }

@media (max-width: 1150px) {
  .app-shell { --content-gutter: var(--spacing-lg); }
  .app-shell .navbar > .container-fluid { padding-inline: var(--spacing-lg); gap: var(--spacing-md); }
  .app-shell .navbar .nav-link { padding-inline: 10px; }
}

@media (max-width: 991px) {
  .app-shell { --content-gutter: var(--spacing-md); }
  .app-shell .navbar > .container-fluid { flex-wrap: wrap; padding: var(--spacing-md) var(--spacing-md) 0; gap: var(--spacing-md); }
  .app-shell .navbar-brand { margin-right: auto; }
  .app-shell .app-main-nav { order: 3; flex-basis: 100%; overflow-x: auto; padding-bottom: 12px; }
  .app-shell .navbar-nav { justify-content: space-between; overflow: visible; }
  .app-shell .navbar .nav-link { padding: 10px 8px; font-size: 12px; }
  .app-shell .navbar .nav-link i { margin-right: 6px !important; }
  .app-shell .market-trends-container { gap: var(--spacing-md); }
}

@media (max-width: 420px) {
  .app-shell .navbar .nav-link { padding-inline: 5px; font-size: 10px; }
  .app-shell .navbar .nav-link i { margin-right: 5px !important; }
}