/* Clone-only visual fixes, loaded after every page's own CSS (templates/mbiz/base.html).
   Live MBiz and the Caspio DataPages are unchanged. Approved deviation from the
   "exact MBiz clone" rule, 2026-10-01: small consistency fixes, no redesign.
   Page CSS uses !important heavily, so rules here need it too (plus enough
   specificity to win). */

/* ── Header banner: keeps each page's own look (inset, rounded, shadow).
   clone-overrides.js moves the logo, Logout and Feedback into the banner;
   here they get one size and one spot on every page, inside the banner.
   Desktop only: the pages' own mobile rules restack the header. ── */
@media only screen and (min-width: 851px) {
  body div.nav-welcome.clone-banner {
    position: relative !important;
    box-sizing: border-box !important;
    min-height: 110px;
    /* Room for the logo (left) and buttons (right); the title and menu sit
       centred between them. */
    padding-left: 190px !important;
    padding-right: 190px !important;
    /* Pages narrow the banner to 70% and float it right below 1200px, to
       leave room for the logo beside it; the logo is inside it now. */
    float: none !important;
    max-width: none !important;
  }
  /* Some pages wrap the banner in an inline-block, right-aligned block that
     shrinks to fit, leaving a gap on the left where the logo used to sit.
     The logo is inside the banner now, so let the block fill the row. */
  body .block:has(> .block-content > div.nav-welcome.clone-banner) {
    display: block !important;
    width: 100% !important;
  }
  /* nav.navbar must not be the positioning box for anything in it. */
  body div.nav-welcome.clone-banner nav.navbar {
    position: static !important;
  }
  body div.nav-welcome.clone-banner > img.peg-logo {
    position: absolute !important;
    width: 150px !important;
    height: auto !important;
    max-height: calc(100% - 16px);
    object-fit: contain;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%);
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2;
  }
  body div.nav-welcome.clone-banner > .clone-banner-actions {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 2;
  }
  body div.nav-welcome.clone-banner > .clone-banner-actions > button {
    position: static !important;
    margin: 0 !important;
    float: none !important;
    transform: none !important;
  }
  /* Menu items float left, so a wrapped second row hugs the left edge.
     Lay them out as a centred, wrapping row instead. */
  body div.nav-welcome.clone-banner ul.navbar-nav {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    float: none !important;
    row-gap: 6px;
  }
  body div.nav-welcome.clone-banner ul.navbar-nav > li {
    float: none !important;
  }
}

/* ── Slim one-row header (design + builder PEGShare pages): logo, menu and
   Logout are already inside the bar, so clone-overrides.js skips it. Its
   page CSS still floats it right at 70% width below 1200px, a leftover from
   when the logo sat beside it; keep it full width. ── */
@media only screen and (min-width: 851px) {
  body div.nav-welcome:has(img.peg-logo-design) {
    float: none !important;
    max-width: none !important;
  }
}

/* ── Nav: "Project Request" is live text + icon; its neighbours are images of
   white condensed caps. Match them. ── */
body a#project-request {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  padding-top: 0 !important;
  font-family: "Open Sans Bold Condensed", "Arial Narrow", sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  font-size: 17px !important;
  line-height: 1 !important;
  white-space: nowrap;
}
body a#project-request img {
  height: 20px !important;
  width: auto !important;
}

/* ── Caspio result tables: pages put them in a 90%-wide centred block, and
   wide tables spill out of it to the right, leaving the left margin empty.
   A block holding a result set fills the row instead. Result sets only:
   forms (e.g. login) keep their normal layout. No overflow scrolling here:
   it would clip Caspio's calendar popups in the search form above. ── */
body .block:has(.cbResultSetData):not(:has(.nav-welcome)) {
  width: 100% !important;
  max-width: 100% !important;
}

/* ── Nav icons (2026-10-06): MBiz's image buttons (icon + caps text baked into
   one PNG) are real text now, with a Bootstrap Icons SVG from the menu item's
   "icon" (app/mbiz_menus.py). Scheduling navs share one text style
   (peg-nav-text, the Oswald caps the images used); other navs keep theirs. ── */
.peg-nav-icon {
  display: inline-block !important;
  width: 1.05em !important;
  height: 1.05em !important;
  margin: 0 .4em 0 0 !important;
  vertical-align: -.15em !important;
  flex: none;
}
/* :not(#peg-nav) lifts the rule above the pages' own #id rules (e.g. #project-request). */
body a.peg-nav-text:not(#peg-nav) {
  font-family: 'Oswald', sans-serif !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  line-height: 20px !important;
  display: block !important; /* #project-request was inline-flex, 4px higher */
  letter-spacing: .02em;
  white-space: nowrap;
}