/* =====================================================================
   Page banner = the dashboard hero, copied value for value
   (deep green, gold accent, ISU seal, same title size, same buttons).
   Applied to the header of EVERY sidebar page. No page markup changes:
   it restyles the existing .page-header block. Load this file LAST.
   The :not(#ph) part only raises specificity so it wins over the older
   "white band" rules in design-system.css, mono.css and dark.css.
   ===================================================================== */
body.page-app .app-content .page-header:not(#ph) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  /* Fixed rows = fixed positions, measured on the dashboard banner (237px tall):
       43px  empty slot where the dashboard shows the date
       80px  title   (its centre = where "Good afternoon, Marlon." sits)
       40px  subtitle (starts where "All caught up..." starts)
       46px  buttons  (28px above the bottom edge, like the dashboard)  */
  grid-template-rows: 43px 80px 40px 46px;
  column-gap: 24px;
  row-gap: 0;
  margin: 0 0 24px;
  padding: 0 36px 28px;
  box-sizing: border-box;
  height: 237px;           /* same height as the dashboard banner on every page: only the words change */
  border: 0;
  border-radius: 22px;
  color: #fff;
  /* gradient + gold diagonal panel + faint rings, all on the element itself */
  background:
    radial-gradient(circle at 88% 50%, transparent 0 120px, rgba(232, 190, 90, .14) 121px 122px, transparent 123px 170px, rgba(232, 190, 90, .10) 171px 172px, transparent 173px),
    linear-gradient(120deg, transparent 0 62%, rgba(214, 170, 70, .55) 62.2% 62.5%, rgba(120, 130, 60, .55) 62.5% 80%, rgba(176, 140, 52, .85) 100%),
    linear-gradient(100deg, #0b2f21 0%, #123f2b 48%, #174a31 62%, #8a6d2a 100%);
  box-shadow: 0 10px 30px rgba(8, 40, 26, .28);
}

/* title block (same as .dx-hero-main) */
body.page-app .app-content .page-header:not(#ph) > div:first-child { display: contents; }
body.page-app .app-content .page-header:not(#ph) > div:first-child > h2 {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  min-width: 0;
}
body.page-app .app-content .page-header:not(#ph) > div:first-child > :not(h2) {
  grid-column: 1;
  grid-row: 3;
  align-self: start;
  min-width: 0;
}
body.page-app .app-content .page-header:not(#ph) h2 {
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-size: clamp(1.6rem, 2.3vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: #fff;
}
body.page-app .app-content .page-header:not(#ph) p,
body.page-app .app-content .page-header:not(#ph) small,
body.page-app .app-content .page-header:not(#ph) .breadcrumb,
body.page-app .app-content .page-header:not(#ph) .muted,
body.page-app .app-content .page-header:not(#ph) > div:first-child > div {
  margin: 0;
  font-size: .875rem !important;                /* pages set 14px inline */
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: rgba(255, 255, 255, .88) !important;   /* pages set a grey colour inline */
}
body.page-app .app-content .page-header:not(#ph) strong { color: #f3c969; }
body.page-app .app-content .page-header:not(#ph) a:not(.btn) { color: #f3c969; }

/* buttons: exactly like "Create Ticket" and "All requests" on the dashboard */
body.page-app .app-content .page-header:not(#ph) .page-header-actions {
  grid-column: 1;
  grid-row: 4;
  align-self: end;            /* bottom of the button row = bottom of the dashboard buttons */
  justify-self: start;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/* buttons: ALL banner buttons use one style - transparent, white outline, white bold text + icon.
   Same in light and dark mode, on the dashboards and on every other page. */
body.page-app .app-content .page-header:not(#ph) .btn,
body.page-app .app-content .page-header:not(#ph) a.btn,
body.page-app .app-content .page-header:not(#ph) button.btn,
body.page-app .app-content .dx-hero:not(#ph) .dx-actions .btn,
html[data-theme="dark"] body.page-app .app-content .page-header:not(#ph) .btn,
html[data-theme="dark"] body.page-app .app-content .dx-hero:not(#ph) .dx-actions .btn {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: none;
  font-weight: 700;
}
body.page-app .app-content .page-header:not(#ph) .btn:hover,
body.page-app .app-content .dx-hero:not(#ph) .dx-actions .btn:hover,
html[data-theme="dark"] body.page-app .app-content .page-header:not(#ph) .btn:hover,
html[data-theme="dark"] body.page-app .app-content .dx-hero:not(#ph) .dx-actions .btn:hover {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

/* seal (with the gold glow) */
body.page-app .app-content .page-header:not(#ph)::before {
  content: "";
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: start;
  margin-top: 76px;                            /* seal centre = banner centre, like the dashboard */
  width: 84px;
  height: 84px;
  margin-left: 12px;
  border-radius: 50%;
  background: url("../img/isu-seal.png") center / cover no-repeat;
  box-shadow: 0 0 0 4px rgba(243, 201, 105, .25), 0 0 28px rgba(243, 201, 105, .35);
}
/* white rule + campus name */
body.page-app .app-content .page-header:not(#ph)::after {
  content: "Isabela State University\A Cauayan City Campus";
  white-space: pre;
  grid-column: 3;
  grid-row: 1 / -1;
  align-self: start;
  margin-top: 81px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-height: 74px;
  margin-left: -4px;
  padding-left: 22px;
  background: linear-gradient(rgba(255, 255, 255, .85), rgba(255, 255, 255, .85)) 0 50% / 2px 74px no-repeat;
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #fff;
}

@media (max-width: 1100px) {
  body.page-app .app-content .page-header:not(#ph)::after { display: none; }
}
@media (max-width: 760px) {
  body.page-app .app-content .page-header:not(#ph) { display: flex; flex-direction: column; align-items: flex-start; padding: 22px 20px; gap: 16px; height: auto; }
  body.page-app .app-content .page-header:not(#ph)::before { order: -1; margin: 0; width: 56px; height: 56px; }
  body.page-app .app-content .page-header:not(#ph) > div:first-child { display: block; }
  body.page-app .app-content .page-header:not(#ph) .page-header-actions { margin-top: 0; }
}

@media print {
  body.page-app .app-content .page-header:not(#ph) { background: none; color: #000; box-shadow: none; padding: 0; border-radius: 0; }
  body.page-app .app-content .page-header:not(#ph)::before,
  body.page-app .app-content .page-header:not(#ph)::after { display: none; }
  body.page-app .app-content .page-header:not(#ph) h2,
  body.page-app .app-content .page-header:not(#ph) > div:first-child > div { color: #000 !important; }
}

/* =====================================================================
   Blurred campus photo behind the page - same as the dashboards,
   now on every sidebar page (copied from dashboard.css, "dash-bg").
   ===================================================================== */
body.page-app .app-main {
  --ad-bg-opacity: .34;
  isolation: isolate;
  overflow: clip;
}
html[data-theme="dark"] body.page-app .app-main { --ad-bg-opacity: .22; }

body.page-app .app-main::before {
  content: "";
  position: sticky;
  top: 0;
  z-index: -1;
  display: block;
  height: 100vh;
  margin-bottom: -100vh;
  background: url("../img/campus-bg-blur.jpg") center / cover no-repeat;
  opacity: var(--ad-bg-opacity);
  pointer-events: none;
}
@supports (height: 100dvh) {
  body.page-app .app-main::before { height: 100dvh; margin-bottom: -100dvh; }
}
@media print {
  body.page-app .app-main::before { display: none; }
}

/* =====================================================================
   Eye comfort (banner). Small, safe tweaks - delete this whole block to undo.
   - softer gold on the right (less glare), softer shadow and seal glow
   - clearer, slightly brighter subtitle, light shadow under the title
   - a clear gold focus ring on keyboard focus
   - respects "reduce motion"
   ===================================================================== */
body.page-app .app-content .page-header:not(#ph),
body.page-app .app-content .dx-hero:not(#ph) {
  background:
    radial-gradient(circle at 88% 50%, transparent 0 120px, rgba(232, 190, 90, .12) 121px 122px, transparent 123px 170px, rgba(232, 190, 90, .08) 171px 172px, transparent 173px),
    linear-gradient(120deg, transparent 0 62%, rgba(214, 170, 70, .45) 62.2% 62.5%, rgba(110, 125, 62, .50) 62.5% 80%, rgba(160, 130, 56, .78) 100%),
    linear-gradient(100deg, #0b2f21 0%, #123f2b 48%, #174a31 62%, #7d6528 100%);
  box-shadow: 0 8px 24px rgba(8, 40, 26, .22);
}
body.page-app .app-content .page-header:not(#ph)::before {
  box-shadow: 0 0 0 4px rgba(243, 201, 105, .20), 0 0 22px rgba(243, 201, 105, .25);
}
body.page-app .app-content .page-header:not(#ph) h2 { text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
body.page-app .app-content .page-header:not(#ph) > div:first-child > :not(h2) { color: rgba(255, 255, 255, .92) !important; }

body.page-app .app-content .page-header:not(#ph) .btn,
body.page-app .app-content .dx-hero:not(#ph) .dx-actions .btn {
  border-color: rgba(255, 255, 255, .7);
  transition: background-color .15s ease, border-color .15s ease;
}
body.page-app .app-content .page-header:not(#ph) .btn:focus-visible,
body.page-app .app-content .dx-hero:not(#ph) .dx-actions .btn:focus-visible {
  outline: 3px solid #f3c969;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  body.page-app .app-content .page-header:not(#ph) .btn,
  body.page-app .app-content .dx-hero:not(#ph) .dx-actions .btn { transition: none; }
}

/* Phone top bar (the strip with the Menu button): transparent, so the blurred
   campus photo shows behind it too, with no white band or line. */
body.page-app .app-topbar:not(#ph),
html[data-theme="dark"] body.page-app .app-topbar:not(#ph) {
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
}