/* ========================================================================== 
   Two3rd Portal - Shared layout primitives
   --------------------------------------------------------------------------
   Companion stylesheet to templates/_partials/layout_macros.html. Defines the
   base look for portal_shell(), portal_card(), portal_section_header(), and
   the .portal-grid utility. Every value resolves to a token from tokens.css.
   ========================================================================== */

.portal-shell-wrap {
  padding-inline: var(--token-page-gutter);
  padding-block: var(--token-space-md);
}

.portal-page {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: calc(var(--bs-gutter-x, 1.5rem) / 2);
  padding-block: 1rem;
  font-family: var(--token-font-sans);
  font-size: var(--token-font-size-base);
  line-height: var(--token-line-height-base);
  color: var(--token-surface-fg);
}

.hr-hub-shell .portal-page,
.billing-hub-shell .portal-page,
.clients-hub-shell .portal-page,
.vhq-shell .portal-page,
.boyz-portal-shell .portal-page,
.cmcs-shell .portal-page {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

#main-content.portal-shell-main .portal-page:not(.portal-page--bleed),
#main-content.hr-hub-main       .portal-page:not(.portal-page--bleed),
#main-content.billing-hub-main  .portal-page:not(.portal-page--bleed),
#main-content.clients-hub-main  .portal-page:not(.portal-page--bleed),
#main-content.vhq-main          .portal-page:not(.portal-page--bleed),
#main-content.cmcs-main         .portal-page:not(.portal-page--bleed) {
  padding-inline: calc(var(--page-gutter, 1rem) + (var(--bs-gutter-x, 1.5rem) / 2));
}

.portal-page.portal-page--bleed {
  max-width: none;
  padding-inline: 0;
}

.portal-page.portal-page--tight {
  padding-block: .5rem;
}

.portal-page :where(h1, .h1) {
  font-family: var(--token-font-heading);
  font-weight: var(--token-font-weight-semi);
  font-size: clamp(1.4rem, 1.8vw, 1.75rem);
  line-height: 1.2;
  margin: 0 0 var(--token-space-sm);
  color: var(--token-surface-fg);
}

.portal-page :where(h2, .h2) {
  font-family: var(--token-font-heading);
  font-weight: var(--token-font-weight-semi);
  font-size: clamp(1.2rem, 1.5vw, 1.45rem);
  line-height: 1.25;
  margin: 0 0 var(--token-space-sm);
  color: var(--token-surface-fg);
}

.portal-page :where(h3, .h3) {
  font-family: var(--token-font-heading);
  font-weight: var(--token-font-weight-semi);
  font-size: 1.1rem;
  line-height: 1.3;
  margin: 0 0 var(--token-space-xs);
  color: var(--token-surface-fg);
}

.portal-page > .portal-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--token-space-md);
  margin-bottom: var(--token-space-md);
  padding-bottom: var(--token-space-sm);
  border-bottom: 1px solid var(--token-surface-border);
}

.portal-page > .portal-page-header > .portal-page-header__copy {
  min-width: 0;
}

.portal-page > .portal-page-header .portal-page-header__title {
  font-family: var(--token-font-heading);
  font-size: clamp(1.3rem, 1.7vw, 1.6rem);
  font-weight: var(--token-font-weight-semi);
  color: var(--token-surface-fg);
  margin: 0 0 .15rem 0;
  line-height: 1.2;
}

.portal-page > .portal-page-header .portal-page-header__subtitle {
  font-size: var(--token-font-size-sm);
  color: var(--token-surface-muted);
  margin: 0;
}

.portal-page > .portal-page-header .portal-page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--token-space-sm);
  flex-shrink: 0;
}

@media (max-width: 575.98px) {
  .portal-page > .portal-page-header {
    flex-direction: column;
    align-items: stretch;
  }

  .portal-page > .portal-page-header .portal-page-header__actions {
    justify-content: flex-start;
  }
}

.portal-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--token-space-md);
  margin-bottom: var(--token-space-md);
  padding-bottom: var(--token-space-sm);
  border-bottom: 1px solid var(--token-surface-border);
}

.portal-section-header__title {
  font-family: var(--token-font-heading);
  font-size: 1.35rem;
  font-weight: var(--token-font-weight-semi);
  color: var(--token-surface-fg);
  margin: 0 0 .15rem 0;
  line-height: 1.2;
}

.portal-section-header__subtitle {
  font-size: var(--token-font-size-sm);
  color: var(--token-surface-muted);
  margin: 0;
}

.portal-section-header__actions {
  display: flex;
  align-items: center;
  gap: var(--token-space-sm);
}

.portal-grid {
  display: grid;
  gap: var(--token-grid-gap);
  grid-template-columns: 1fr;
}

.portal-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.portal-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.portal-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 991.98px) {
  .portal-grid--2,
  .portal-grid--3,
  .portal-grid--4 {
    grid-template-columns: 1fr;
  }
}

.cmcs-card {
  border: 1px solid var(--token-surface-border);
  border-radius: var(--token-radius-md);
  background: var(--token-surface-panel);
  box-shadow: var(--token-shadow-sm);
}

.cmcs-card .card-body {
  padding: var(--token-card-padding);
  font-family: var(--token-font-sans);
  color: var(--token-surface-fg);
}

.cmcs-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--token-space-sm);
  padding: var(--token-space-md) var(--token-card-padding);
  border-bottom: 1px solid var(--token-surface-border);
}

.cmcs-card-header h2,
.cmcs-card-header .h6 {
  font-family: var(--token-font-heading);
  font-weight: var(--token-font-weight-semi);
  color: var(--token-surface-fg);
}

.cmcs-card-header__actions {
  display: flex;
  align-items: center;
  gap: var(--token-space-xs);
}

/* ========================================================================== 
   Navbar Logo Guard
   --------------------------------------------------------------------------
   Let the actual SVG image render. An older guard painted a cropped pseudo-logo
   and hid the real img, which masked the corrected logo assets in the navbar.
   ========================================================================== */
html body nav.navbar.app-navbar.navbar.sticky-top.bg-body.border-bottom > .container-fluid.container-fluid a.navbar-brand.navbar-brand.d-flex.align-items-center,
html body nav.navbar.app-navbar.navbar > .container-fluid.container-fluid a.navbar-brand.navbar-brand.d-flex.align-items-center {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
}

html body nav.navbar.app-navbar.navbar.sticky-top.bg-body.border-bottom > .container-fluid.container-fluid a.navbar-brand.navbar-brand.d-flex.align-items-center::before,
html body nav.navbar.app-navbar.navbar > .container-fluid.container-fluid a.navbar-brand.navbar-brand.d-flex.align-items-center::before {
  content: none !important;
  display: none !important;
  flex: 0 0 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: none !important;
}

html body nav.navbar.app-navbar.navbar.sticky-top.bg-body.border-bottom > .container-fluid.container-fluid a.navbar-brand.navbar-brand.d-flex.align-items-center::after,
html body nav.navbar.app-navbar.navbar > .container-fluid.container-fluid a.navbar-brand.navbar-brand.d-flex.align-items-center::after {
  pointer-events: none !important;
  z-index: 0 !important;
}

html body nav.navbar.app-navbar.navbar.sticky-top.bg-body.border-bottom > .container-fluid.container-fluid a.navbar-brand.navbar-brand.d-flex.align-items-center img.navbar-brand-logo.navbar-brand-logo,
html body nav.navbar.app-navbar.navbar > .container-fluid.container-fluid a.navbar-brand.navbar-brand.d-flex.align-items-center img.navbar-brand-logo.navbar-brand-logo {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  flex: 0 0 var(--nav-contract-logo-width, 104px) !important;
  width: var(--nav-contract-logo-width, 104px) !important;
  min-width: var(--nav-contract-logo-width, 104px) !important;
  max-width: var(--nav-contract-logo-width, 104px) !important;
  height: var(--nav-contract-logo-height, 28px) !important;
  min-height: var(--nav-contract-logo-height, 28px) !important;
  max-height: var(--nav-contract-logo-height, 28px) !important;
  object-fit: contain !important;
  object-position: left center !important;
  margin: 0 !important;
  padding: 0 !important;
  filter: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transform: none !important;
  visibility: visible !important;
  z-index: 2 !important;
}

/* The portal-wide 23rd-dark palette + widget rules now live in
   static/css/tokens.css and derive every color from THEME_CHOICES
   (portal_app/__init__.py). Home gets the same look automatically via the
   cascade; no home-scoped duplicate needed here. */