/* ============================================================
   Schalmont PTO — Back Office styles
   Loaded after css/styles.css so it can reuse the site's colors.
   ============================================================ */

body.bo-has-shell {
  margin: 0;
  background: var(--light-bg);
  display: grid;
  grid-template-columns: 244px 1fr;
  min-height: 100vh;
  align-items: start;
}

/* ---------- Sidebar ----------
   Sticks to the top of the viewport while you scroll the main column, but is
   NEVER height-capped or made to internally scroll — however long the nav
   list gets (schools + every section + more), the sidebar simply grows past
   100vh and its own bottom naturally comes into view as you scroll the page,
   same as the rest of the content. Nothing about it is ever cut off. */
.bo-sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  min-height: 100vh;
  background: var(--primary-dark);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 18px 0;
}
.bo-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 0 18px 16px;
  color: #fff; text-decoration: none;
  font-weight: 800; font-size: 15px;
}
.bo-brand img { height: 30px; }
.bo-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 6px 10px 14px; }
.bo-navgroup-label {
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.45); padding: 16px 10px 5px;
}
.bo-navlink {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; border-radius: 7px;
  color: rgba(255,255,255,.82); text-decoration: none;
  font-size: 14px; font-weight: 600;
}
.bo-navlink:hover { background: rgba(255,255,255,.1); color: #fff; }
.bo-navlink.active { background: var(--secondary); color: var(--primary-dark); font-weight: 700; }
.bo-navsub { padding-left: 14px; font-weight: 500; font-size: 13.5px; }
.bo-navicon { width: 18px; text-align: center; }

/* Each school in the sidebar is an accordion: the link navigates to its workspace as
   normal, and whichever school's page you're currently on renders with its own section
   list open right underneath -- see admin-core.js renderShell(). */
.bo-school-group { margin-bottom: 2px; }
.bo-school-toggle { justify-content: space-between; }
.bo-school-toggle-label { display: flex; align-items: center; gap: 9px; }
.bo-navarrow { font-size: 9px; opacity: .6; transition: transform .15s; }
.bo-school-toggle.open .bo-navarrow { transform: rotate(180deg); }
.bo-school-sections {
  display: none; border-radius: 8px; padding: 4px 4px 6px; margin: 2px 6px 6px;
}
.bo-school-sections.open { display: block; }
.bo-school-sections .bo-navlink { font-size: 13px; padding: 7px 10px; color: rgba(255,255,255,.85); }
.bo-school-sections .bo-navlink:hover { background: rgba(255,255,255,.15); color: #fff; }
.bo-school-sections .bo-navlink.active { background: rgba(255,255,255,.92); }
.bo-sidebar-foot {
  padding: 14px 18px; font-size: 12px; flex-shrink: 0;
  color: rgba(255,255,255,.6); border-top: 1px solid rgba(255,255,255,.12);
}
.bo-sidebar-foot a { color: rgba(255,255,255,.85); }
.bo-me { font-weight: 700; color: #fff; margin-bottom: 4px; }

/* ---------- Main column ---------- */
#bo-main { padding: 34px clamp(16px, 4vw, 48px) 90px; max-width: 1080px; }
.bo-h1 { font-size: 26px; margin: 0 0 4px; color: var(--primary-dark); }
.bo-lead { font-size: 15px; color: var(--text); margin: 0 0 26px; line-height: 1.6; max-width: 62ch; }
.bo-crumb { font-size: 13px; color: var(--text-light); margin-bottom: 14px; }
.bo-crumb a { color: var(--primary); }

/* Explainer box — used all over to teach non-technical admins */
.bo-tip {
  background: #eef6ec; border: 1px solid #cfe6c8; border-radius: var(--radius);
  padding: 13px 15px; font-size: 13.5px; color: #2f5d34; line-height: 1.6;
  margin: 0 0 22px;
}
.bo-tip strong { color: var(--primary-dark); }

/* ---------- Cards / grids ---------- */
.bo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.bo-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 20px; text-decoration: none; color: inherit; display: block;
  transition: box-shadow .15s, transform .15s;
}
a.bo-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.bo-card h3 { margin: 0 0 6px; font-size: 16px; color: var(--primary-dark); }
.bo-card p { margin: 0; font-size: 13px; color: var(--text-light); line-height: 1.5; }
.bo-card .bo-cardicon { font-size: 24px; display: block; margin-bottom: 10px; }

/* ---------- Buttons ---------- */
.bo-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px; border-radius: 8px; border: none;
  background: var(--primary); color: #fff; font-weight: 700; font-size: 14px;
  cursor: pointer; text-decoration: none; font-family: inherit;
}
.bo-btn:hover { background: var(--primary-dark); }
.bo-btn.ghost { background: #fff; color: var(--primary); border: 1px solid var(--border); }
.bo-btn.ghost:hover { background: var(--light-bg); }
.bo-btn.danger { background: var(--error); }
.bo-btn.sm { padding: 6px 12px; font-size: 13px; }
.bo-btn:disabled { opacity: .55; cursor: default; }

/* ---------- Tables / lists ---------- */
.bo-list { display: flex; flex-direction: column; gap: 10px; }
.bo-row {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.bo-row .bo-row-main { flex: 1; min-width: 180px; }
.bo-row h4 { margin: 0 0 2px; font-size: 15px; }
.bo-row .bo-meta { font-size: 12px; color: var(--text-light); }
.bo-pill { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; border-radius: 20px; }
.bo-pill.live { background: var(--success-light); color: #216e3c; }
.bo-pill.draft { background: #fde9d0; color: #8a4b16; }

/* ---------- Forms ---------- */
.bo-field { margin-bottom: 16px; max-width: 520px; }
.bo-field label { display: block; font-weight: 700; font-size: 13.5px; margin-bottom: 5px; color: var(--text); }
.bo-field .bo-hint { font-weight: 400; color: var(--text-light); font-size: 12.5px; display: block; margin-top: 3px; }
.bo-field input[type=text], .bo-field input[type=url], .bo-field input[type=email],
.bo-field select, .bo-field textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 8px; font-family: inherit; font-size: 14px; background: #fff;
}
.bo-field textarea { min-height: 90px; resize: vertical; }

/* ---------- Page editor ---------- */
/* THE STANDARD BACK-OFFICE GRID -- any page laying tools/content/preview side by side
   should use this same 12/8/4-column grid, not a one-off ratio, so every admin page
   checks out the same way at the same three breakpoints (desktop/tablet/mobile).
     desktop (>1200px):      12 columns
     tablet  (861-1200px):    8 columns
     mobile  (<=860px):       4 columns
   A column-span child declares `grid-column: span N` for whichever breakpoint it's in
   (see .bo-tools-col below for the pattern: 6 of 12, 4 of 8, 1 of 4). checkGridLayout()
   in admin-core.js watches that a grid's children's spans add up to the current
   breakpoint's total and puts up a loud on-page warning if a future change ever breaks
   that math, instead of silently shipping a gap or overflow. */
.bo-editor { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: start; }
.bo-editor > :last-child { grid-column: span 6; }
@media (max-width: 1200px) {
  .bo-editor { grid-template-columns: repeat(8, 1fr); }
  .bo-editor > :last-child { grid-column: span 4; }
}
@media (max-width: 860px) {
  .bo-editor { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .bo-editor > :last-child { grid-column: span 3; }
}
/* Tools column: 6 of 12 (desktop) / 4 of 8 (tablet) / 1 of 4 (mobile) -- wide enough on
   desktop/tablet to lay its own fields out in two side-by-side columns (see the
   .bo-tools-col > * rule below); short fields pair up automatically, and anything too
   wide to share a row (checkbox rows, the event-details box, the homepage-card panel)
   opts out with the .bo-tools-full class. Pinned to the viewport and scrolls on its own
   once its content runs taller than the visible height, while the preview column scrolls
   normally with the rest of the page -- so you can keep editing without losing your
   place in a long block list, while the preview moves past as you scroll like anything
   else on the page. */
.bo-tools-col {
  grid-column: span 6;
  position: sticky; top: 20px; align-self: start;
  max-height: calc(100vh - 40px); overflow-y: auto; padding-right: 4px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; align-content: start;
}
.bo-tools-col > * { min-width: 0; }
.bo-tools-full { grid-column: 1 / -1; }
@media (max-width: 1200px) { .bo-tools-col { grid-column: span 4; } }
@media (max-width: 860px) { .bo-tools-col { grid-column: span 1; display: block; } }
.bo-richtext-bar { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.bo-richtext-bar button {
  border: 1px solid var(--border); background: #fff; border-radius: 4px; cursor: pointer;
  font-size: 12px; font-weight: 700; padding: 3px 9px; color: var(--text);
}
.bo-richtext-bar button:hover { background: var(--light-bg); }
.bo-richtext {
  width: 100%; min-height: 36px; padding: 6px 8px; border: 1px solid var(--border);
  border-radius: 5px; font-family: inherit; font-size: 13px; margin-bottom: 4px; background: #fff;
}
.bo-richtext:focus { outline: 2px solid var(--primary-light); outline-offset: -1px; }
.bo-richtext ul, .bo-richtext ol { margin: 0 0 0 20px; }
.bo-richtext-para { min-height: 96px; line-height: 1.55; }
.bo-richtext a { color: var(--primary); text-decoration: underline; }
.bo-blocks { display: flex; flex-direction: column; gap: 12px; }
.bo-block {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px;
}
.bo-block-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.bo-block-head .bo-block-type { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-light); flex: 1; }
.bo-block-head button { background: none; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; padding: 3px 7px; font-size: 12px; }
.bo-block-drag { cursor: grab; color: var(--text-light); font-size: 16px; line-height: 1; user-select: none; }
.bo-block.dragging { opacity: .4; }
.bo-block.drag-over { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }
.bo-addbar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.bo-addbar button { background: #fff; border: 1px dashed var(--primary-light); color: var(--primary-dark); border-radius: 8px; padding: 8px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.bo-addbar button:hover { background: #eef6ec; }
.bo-preview {
  /* No sticky positioning here on purpose -- the preview scrolls with the rest of the
     page now; .bo-tools-col (the pinned, independently-scrolling side) is where that
     behavior lives instead. */
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 22px; min-height: 300px;
}
.bo-preview-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-light); margin-bottom: 12px; }

/* rendered page blocks (shared look with public p.html) */
.pg-body { line-height: 1.7; color: var(--text); }
.pg-body h1 { font-size: 28px; color: var(--primary-dark); margin: 0 0 14px; }
.pg-body h2 { font-size: 21px; color: var(--primary-dark); margin: 26px 0 10px; }
.pg-body h3 { font-size: 17px; margin: 20px 0 8px; }
.pg-body p { margin: 0 0 14px; }
.pg-body ul { margin: 0 0 14px 22px; list-style: disc; }
.pg-body ol { margin: 0 0 14px 22px; list-style: decimal; }
.pg-body .pg-richtext { margin: 0 0 14px; }
.pg-body .pg-richtext ul, .pg-body .pg-richtext ol { margin-bottom: 0; }
.pg-body img { border-radius: 10px; margin: 8px 0; }
.pg-body .pg-caption { font-size: 12px; color: var(--text-light); margin-top: -6px; }
/* The site's global `img { display:block }` reset (css/styles.css) means
   text-align on an ancestor has no effect on an image -- centering a block
   element instead needs auto margins on the image itself. */
.pg-photo-center img { margin-left: auto; margin-right: auto; }
.pg-photo-right img { margin-left: auto; margin-right: 0; }
/* X-Large/XX-Large break the photo out past the normal ~760px reading column, into
   the page's full content width -- scoped to #pg-body (the real public page) on
   purpose, so the same block inside the editor's own narrower preview (id="preview"),
   or inside a Row of Columns cell, just falls back to filling its own container
   instead of overflowing it. Percentages self-scale with the column's own rendered
   width rather than assuming a fixed viewport, so this stays safe as that width
   changes between breakpoints; disabled below 1024px, where there isn't reliably
   enough spare room beside the sidebar for it not to overflow -- a plain max-width:100%
   keeps it a normal full-width photo there instead. */
.pg-photo-xl img, .pg-photo-xxl img { max-width: 100%; }
@media (min-width: 1024px) {
  #pg-body .pg-photo-xl img { width: 120%; max-width: 120%; display: block; }
  #pg-body .pg-photo-xl { margin-right: -20%; }
  #pg-body .pg-photo-xxl img { width: 138%; max-width: 138%; display: block; }
  #pg-body .pg-photo-xxl { margin-right: -38%; }
}
/* The breakout above only ever shows on the real page (its own column needs to be wide
   enough first) -- in this narrower preview box there's no room to demonstrate it
   without overflowing the box itself, so show a plain note instead of silently looking
   unchanged, which otherwise reads as "my Size choice didn't do anything." */
#preview .pg-photo-xl, #preview .pg-photo-xxl {
  outline: 2px dashed var(--primary-light); outline-offset: 5px;
}
#preview .pg-photo-xl::after, #preview .pg-photo-xxl::after {
  content: 'On the published page, this photo spans wider than the text column \2014 too wide to show at actual size in this preview.';
  display: block; font-size: 11.5px; color: var(--text-light); font-style: italic; margin-top: 8px;
}
.pg-body .pg-btn {
  display: inline-block; background: var(--primary); color: #fff; font-weight: 700;
  padding: 12px 22px; border-radius: 8px; text-decoration: none; margin: 6px 0;
}
.pg-body .pg-btn.outline { background: #fff; color: var(--primary); border: 2px solid var(--primary); }
.pg-body .pg-btn.sm { padding: 7px 14px; font-size: 13px; }
.pg-body .pg-btn.lg { padding: 16px 30px; font-size: 17px; }
.pg-body .pg-btn.full { display: block; width: 100%; text-align: center; box-sizing: border-box; }
.pg-body hr { border: none; border-top: 1px solid var(--border); margin: 22px 0; }
.pg-body iframe { width: 100%; min-height: 480px; border: 1px solid var(--border); border-radius: 10px; }
.pg-flyer { display: block; width: 100%; border-radius: 12px; margin: 0 0 18px; border: 1px solid var(--border); }
.pg-eventbox { background: #eef6ec; border: 1px solid #cfe6c8; border-radius: 10px; padding: 14px 16px; margin: 0 0 20px; }
.pg-eventrow { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--primary-dark); font-weight: 600; }
.pg-eventrow + .pg-eventrow { margin-top: 7px; }
.pg-eventrow a { color: var(--primary); }
.pg-eventicon { flex-shrink: 0; }
/* "Where at the location" (Gymnasium, Middle school loop) -- tucked right under the map link. */
.pg-eventrow + .pg-eventspot { margin-top: 2px; }
.pg-eventspot { font-weight: 500; }

/* Columns block — a responsive row that ALWAYS stacks on phones */
.pg-body .pg-cols {
  display: grid; gap: 20px; margin: 16px 0;
  grid-template-columns: repeat(2, 1fr);
}
.pg-body .pg-cols-3 { grid-template-columns: repeat(3, 1fr); }
.pg-body .pg-cols-4 { grid-template-columns: repeat(4, 1fr); }
.pg-body .pg-col > :first-child { margin-top: 0; }
.pg-body .pg-col > :last-child { margin-bottom: 0; }
@media (max-width: 900px) { .pg-body .pg-cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 800px) { .pg-body .pg-cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pg-body .pg-cols, .pg-body .pg-cols-4 { grid-template-columns: 1fr; } }
/* Empty-cell placeholder -- editor preview only (#preview), never shown to real visitors */
#preview .pg-col-empty {
  min-height: 64px; border: 1px dashed var(--border); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
#preview .pg-col-empty::after { content: 'Empty column — add a block below'; color: var(--text-light); font-size: 12.5px; text-align: center; padding: 8px; }

/* Sign-up sheet block */
.pg-body .pg-signup {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; background: #eef6ec; border: 1px solid #cfe6c8;
  border-radius: 10px; padding: 16px 18px; margin: 16px 0;
}
.pg-body .pg-signup-body { display: flex; align-items: center; gap: 12px; }
.pg-body .pg-signup-icon { font-size: 26px; flex-shrink: 0; }
.pg-body .pg-signup p { margin: 0; font-size: 14px; color: var(--text-light); }
.pg-body .pg-signup .pg-btn { margin: 0; flex-shrink: 0; }

/* Sign-up sheet block -- the actual slots + sign-up form embedded inline (no more
   linking out to a separate page). Mounted at runtime by js/signup-embed.js. */
.pg-su-embed { margin: 16px 0; }
.pg-su-figure { display: table; max-width: 100%; margin: 0 0 16px; }
.pg-su-figure img { max-width: 100%; border-radius: 8px; display: block; }
.pg-su-figure .pg-caption { font-size: 12px; color: var(--text-light); margin: 6px 0 0; }
.pg-su-cta { display: inline-block; margin-top: 20px; padding: 11px 24px; border-radius: var(--radius); font-family: 'Urbanist', sans-serif; font-weight: 700; font-size: 14px; background: #fff; color: var(--primary); border: 2px solid var(--primary); text-decoration: none; }
.pg-su-cta.outline { padding: 9px 22px; }
/* Always white-on-green on hover, even over a custom inline color (an admin-set
   background/border-color style), so hover state stays predictable everywhere. */
.pg-su-cta:hover, .pg-su-cta.outline:hover { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; }
.pg-su-eventbox { background: #eef6ec; border: 1px solid #cfe6c8; border-radius: 10px; padding: 14px 16px; margin: 0 0 16px; }
.pg-su-eventrow { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--primary-dark); font-weight: 600; }
.pg-su-eventrow + .pg-su-eventrow { margin-top: 7px; }
.pg-su-eventrow a { color: var(--primary); }
.pg-su-eventicon { flex-shrink: 0; }
.pg-su-intro { color: var(--text); line-height: 1.6; white-space: pre-wrap; margin: 0 0 16px; }
.pg-su-closed { background: #fdecea; border: 1px solid #f5c6c0; color: #8b1a14; padding: 12px 14px; border-radius: 10px; font-weight: 600; margin-bottom: 16px; }
.pg-su-grid { display: grid; gap: 14px; margin-bottom: 4px; }
.pg-su-grid .pg-su-slot { margin-bottom: 0; }
.pg-su-grid-2 { grid-template-columns: repeat(2, 1fr); }
.pg-su-grid-3 { grid-template-columns: repeat(3, 1fr); }
.pg-su-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .pg-su-grid-3, .pg-su-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pg-su-grid-2, .pg-su-grid-3, .pg-su-grid-4 { grid-template-columns: 1fr; } }
.pg-su-slot { border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; background: #fff; }
.pg-su-slot h4 { margin: 0 0 3px; font-size: 16px; color: var(--primary-dark); }
.pg-su-when { font-size: 13px; color: var(--text-light); margin-bottom: 8px; }
.pg-su-spots { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.pg-su-spots.full { color: #8b1a14; }
.pg-su-spots.ok { color: #2a5c1e; }
.pg-su-names { font-size: 12.5px; color: var(--text); margin-bottom: 10px; }
.pg-su-names span { display: inline-block; background: var(--light-bg); border: 1px solid var(--border); border-radius: 20px; padding: 2px 10px; margin: 2px 3px 0 0; }
.pg-su-open { display: inline-block; padding: 7px 16px; font-size: 13px; font-weight: 700; font-family: inherit; background: #fff; color: var(--primary); border: 2px solid var(--primary); border-radius: var(--radius); cursor: pointer; }
.pg-su-open:hover { background: var(--primary); color: #fff; }
.pg-su-mine { font-size: 13px; color: var(--text); background: var(--light-bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 4px; }
.pg-su-cancel, .pg-su-edit { font-family: inherit; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 20px; cursor: pointer; margin-left: 4px; }
.pg-su-edit { background: #fff; color: var(--primary); border: 1.5px solid var(--primary); }
.pg-su-edit:hover { background: var(--primary); color: #fff; }
.pg-su-cancel { background: #fff; color: #8b1a14; border: 1.5px solid #d98a83; }
.pg-su-cancel:hover { background: #8b1a14; color: #fff; border-color: #8b1a14; }
.pg-su-submit { display: inline-block; padding: 11px 24px; font-size: 14px; font-weight: 700; font-family: inherit; background: var(--secondary); color: var(--primary-dark); border: 2px solid var(--secondary); border-radius: var(--radius); cursor: pointer; }
.pg-su-submit:hover { background: var(--secondary-dark); border-color: var(--secondary-dark); }
.pg-su-submit:disabled { opacity: 0.6; cursor: default; }
.pg-su-form { display: none; border-top: 1px dashed var(--border); margin-top: 12px; padding-top: 14px; }
.pg-su-form.open { display: block; }
.pg-su-form label { display: block; font-size: 12px; font-weight: 700; margin: 8px 0 3px; }
.pg-su-form input, .pg-su-form select { width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: 7px; font-family: inherit; font-size: 14px; background: #fff; }
.pg-su-row2 { display: flex; gap: 10px; flex-wrap: wrap; }
.pg-su-row2 > div { flex: 1; min-width: 140px; }
.pg-su-msg { margin-top: 10px; font-size: 13px; font-weight: 600; }
.pg-su-msg.done { color: #2a5c1e; }
.pg-su-msg.err { color: #8b1a14; }

/* Page-editor preview: simulate tablet / phone stacking without resizing the window */
.pg-body.pv-tablet .pg-cols-3,
.pg-body.pv-tablet .pg-cols-4 { grid-template-columns: repeat(2, 1fr); }
.pg-body.pv-phone .pg-cols,
.pg-body.pv-phone .pg-cols-3,
.pg-body.pv-phone .pg-cols-4 { grid-template-columns: 1fr; }
.pg-body.pv-phone .pg-signup { flex-direction: column; align-items: stretch; text-align: center; }
.pg-body.pv-phone .pg-signup .pg-btn { width: 100%; }

/* Preview banner on p.html */
.pg-preview-banner { background: var(--warning); color: #fff; text-align: center; padding: 8px 14px; font-size: 13px; font-weight: 700; }

/* ---------- Media library ---------- */
.bo-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.bo-media {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; font-size: 12px;
}
.bo-media .bo-media-thumb { height: 104px; background: var(--light-bg) center/cover no-repeat; display: flex; align-items: center; justify-content: center; font-size: 30px; }
.bo-media .bo-media-body { padding: 8px; }
.bo-media .bo-media-name { font-weight: 600; word-break: break-all; margin-bottom: 5px; }
.bo-dropzone {
  border: 2px dashed var(--primary-light); border-radius: var(--radius-lg);
  padding: 30px; text-align: center; color: var(--text-light); background: #fff; cursor: pointer;
}
.bo-dropzone.drag { background: #eef6ec; }

/* ---------- Chat ---------- */
.bo-chat { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); display: flex; flex-direction: column; height: 62vh; max-width: 780px; }
.bo-chat-log { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.bo-msg { max-width: 82%; padding: 11px 14px; border-radius: 12px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; }
.bo-msg.user { align-self: flex-end; background: var(--primary); color: #fff; }
.bo-msg.ai { align-self: flex-start; background: var(--light-bg); border: 1px solid var(--border); }
.bo-chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); }
.bo-chat-form textarea { flex: 1; resize: none; height: 44px; padding: 11px; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; font-size: 14px; }

/* ---------- Loading / denied ---------- */
#bo-loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--light-bg); font-size: 15px; color: var(--text-light); z-index: 50; }
.bo-denied { max-width: 520px; margin: 14vh auto; padding: 0 22px; font-family: 'Urbanist', system-ui, sans-serif; }
.bo-denied h1 { font-size: 21px; color: var(--primary-dark); }
.bo-denied a { color: var(--primary); font-weight: 600; }

/* ---------- Toast ---------- */
#bo-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  background: var(--primary-dark); color: #fff; padding: 12px 20px; border-radius: 10px;
  font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none; transition: all .2s; z-index: 100;
}
#bo-toast.show { opacity: 1; transform: translate(-50%, 0); }
#bo-toast.error { background: var(--error); }

/* ---------- Generic modal (new-page notice, etc.) ---------- */
.bo-modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex;
  align-items: flex-start; justify-content: center; padding: 44px 16px; z-index: 95; overflow-y: auto; }
.bo-modal { background: #fff; border-radius: 14px; width: 100%; max-width: 460px; padding: 24px; position: relative; }
.bo-modal h2 { margin: 0 0 12px; font-size: 19px; color: var(--primary-dark); padding-right: 28px; }
.bo-modal-x {
  position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%;
  border: none; background: var(--light-bg); color: var(--text-light); font-size: 18px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.bo-modal-x:hover { background: var(--border); color: var(--text); }
.bo-modal-lbl { display: block; font-weight: 700; font-size: 12.5px; margin: 12px 0 4px; }
.bo-modal select,
.bo-modal input:not([type=checkbox]):not([type=radio]) {
  width: 100%; padding: 9px 10px; border: 1px solid var(--border);
  border-radius: 7px; font-family: inherit; font-size: 14px; }
.bo-modal input[type=checkbox] { width: auto; margin: 0; flex: none; }
.bo-modal-checklist { margin: 2px 0 6px; }
.bo-modal-checklist label { display: flex; gap: 8px; align-items: center;
  font-size: 14px; font-weight: 600; margin: 6px 0; }
.bo-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.bo-notice { background: #fff8e6; border: 1px solid #e8d492; border-radius: 8px; padding: 12px 14px;
  font-size: 13px; line-height: 1.5; color: #6b5300; margin-bottom: 6px; }
.bo-notice a { display: inline-block; margin-top: 6px; font-weight: 700; color: var(--primary-dark); }

/* ---------- Floating "get help" widget (every page) ---------- */
#bo-help { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
#bo-help-menu { display: none; flex-direction: column; gap: 8px; }
#bo-help.open #bo-help-menu { display: flex; }
#bo-help-menu a {
  display: flex; align-items: center; gap: 8px; background: #fff; color: var(--primary-dark);
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; font-size: 13.5px;
  font-weight: 700; text-decoration: none; box-shadow: 0 6px 20px rgba(0,0,0,.14); white-space: nowrap;
}
#bo-help-menu a:hover { background: var(--light-bg); }
#bo-help-toggle {
  display: flex; align-items: center; gap: 8px; background: var(--primary); color: #fff;
  border: none; border-radius: 24px; padding: 12px 18px; font-size: 14px; font-weight: 800;
  cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.2);
}
#bo-help-toggle:hover { background: var(--primary-dark); }
#bo-help.open #bo-help-toggle { background: var(--primary-dark); }
@media (max-width: 860px) { #bo-help { right: 12px; bottom: 12px; } }
@media print { #bo-help { display: none; } }

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
  body.bo-has-shell { grid-template-columns: 1fr; }
  .bo-sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px; }
  .bo-brand { padding-bottom: 0; width: 100%; }
  .bo-nav { flex-direction: row; flex-wrap: wrap; flex: 1; }
  .bo-navgroup-label { width: 100%; padding-top: 6px; }
  .bo-sidebar-foot { width: 100%; border-top: none; }
  /* .bo-editor's own 4-column mobile layout lives with its other breakpoints above --
     not overridden here anymore now that tools/preview sit side by side at every width. */
}