/* =========================================================================
   PAGE CONTENT HEADER — modern title bar shown above every panel.
   Replaces the dated gray/text-shadow/uppercase bar with a clean themed
   header (icon + title). Responsive: follows the sidebar offset on desktop,
   spans full width on mobile (where the sidebar is off-canvas).
   Loaded after styles.css so .pch-modern overrides win.
   ========================================================================= */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap");

.page-content-header.pch-modern {
  display: flex;
  align-items: center;
  gap: 11px;
  position: fixed;
  top: 60px;
  left: 250px;
  right: 0;
  height: 52px;
  padding: 0 24px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid #e7ecf3;
  /* reset the legacy look */
  color: #1f2a37;
  text-shadow: none;
  text-transform: none;
  font-weight: 700;
  transition: left 0.2s ease-out;
}
.page-content-header.pch-modern .pch-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 17px;
  color: #fff;
  background: linear-gradient(135deg, #2b9cd3, #00b4ff);
  box-shadow: 0 4px 12px rgba(0, 180, 255, 0.3);
}
.page-content-header.pch-modern .pch-title {
  font-family: "Montserrat", sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1f2a37;
  line-height: 1.1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* collapsed sidebar — title bar slides to the narrow rail offset */
.page-content-header.pch-modern.menu-closed {
  left: 70px;
}

/* content must clear the taller (52px) fixed header — the legacy 60px top
   padding was sized for the old 40px bar. */
#mainContentWrapper.page-content {
  padding-top: 64px !important;
}

/* ===== responsive: on mobile the sidebar is off-canvas, so span full width
   and show the header (the legacy markup hid it under d-none d-lg-block). ===== */
@media (max-width: 991px) {
  .page-content-header.pch-modern {
    left: 0 !important;
    right: 0;
    padding: 0 16px;
    height: 48px;
  }
  .page-content-header.pch-modern .pch-icon {
    width: 30px;
    height: 30px;
    font-size: 15px;
  }
  .page-content-header.pch-modern .pch-title {
    font-size: 15px;
  }
}