/* =====================================================================
   Project profile tab-shell — MHD-1837

   The `.cpn-*` chrome (breadcrumb, banner, tab strip) is inherited from
   /company-profile/article.css so this page shares the exact styling with
   /company/{slug}/{tab}. Overrides below cover:
     1. Hiding the <project-profile> component's built-in header +
        vertical sidebar + mobile bottom-nav (the shell owns navigation now)
     2. A project-specific header treatment (meta chips row, mini-quote
        aligned right, share button)
     3. Full-width tab content since there's no sidebar
   ===================================================================== */

/* --- Reset the .pp-page card wrapper the component ships with. The tab
   shell frames the layout itself; the extra card + shadow underneath
   read as a nested surface. -------------------------------------------- */
.ppn-tab-shell .pp-page {
  margin: 0;
  max-width: none;
  width: auto;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  min-height: 0;
}

/* --- Hide the component's built-in chrome — shell owns it now. --- */
.cpn-tab-mount #pp-header,
.cpn-tab-mount .cp-header {
  display: none;
}
.cpn-tab-mount #pp-sidebar,
.cpn-tab-mount .cp-sidebar {
  display: none;
}
.cpn-tab-mount #pp-mobile-nav,
.cpn-tab-mount .cp-mobile-nav {
  display: none !important;
}

/* Component's layout uses grid `sidebar + content`. With the sidebar
   hidden let content fill the width. */
.cpn-tab-mount .cp-layout {
  display: block;
}
.cpn-tab-mount .cp-content,
.cpn-tab-mount #pp-content {
  padding: 0;
  min-width: 0;
}

/* --- Project header ------------------------------------------------
   The company shell puts a logo + ticker + name in the header. Projects
   don't have their own logo, so the header is title-first with a chip
   row underneath for owner / ticker / stage / commodities / location,
   plus a mini-quote and share button on the right. */
.ppn-project-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  margin-bottom: 0;
}
.ppn-project-header__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}
.ppn-project-header__title {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  color: var(--cpn-text);
  margin: 0;
  word-break: break-word;
}
.ppn-project-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.ppn-project-header__actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.ppn-project-header__share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--cpn-border);
  border-radius: 6px;
  background: #fff;
  color: var(--cpn-muted);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.ppn-project-header__share:hover {
  background: #f5f7fa;
  color: var(--cpn-text);
  border-color: #cbd2d9;
}
.ppn-project-header__share .material-symbols-outlined {
  font-size: 18px;
}

/* Mini-quote alignment — the ASX MiniQuote class + qmod widget both render
   into #ppn-mini-quote. Cap the width so the share button always fits. */
.ppn-mini-quote {
  display: inline-flex;
  align-items: center;
  max-width: 260px;
  min-width: 0;
  font-size: 13px;
}
.ppn-mini-quote:empty { display: none; }
.ppn-mini-quote .pp-mini-quote-host {
  width: 100%;
}

/* --- Tabs -----------------------------------------------------------
   Reuses .cpn-tabs from article.css. Reduce the bottom margin slightly
   so the tab content sits closer to the strip than the article-body
   default (which was tuned for a text article, not a dashboard). */
.ppn-tab-shell .cpn-tabs {
  margin-bottom: 20px;
}

/* --- Mobile ---------------------------------------------------------
   Chip row already wraps. Stack actions under the title so the mini-quote
   doesn't crowd the headline on narrow viewports. */
@media (max-width: 599px) {
  .ppn-project-header {
    flex-direction: column;
  }
  .ppn-project-header__actions {
    order: 2;
    align-self: stretch;
    justify-content: flex-end;
  }
  .ppn-project-header__title {
    font-size: 20px;
  }
}