/* ==========================================================================
   business-hub.css -- shared "bh-" styles for every business-admin-console
   page reachable from a business's Dashboard (business-profile.html,
   business-posts.html, business-jobs.html, business-analytics.html,
   business-settings.html, and the not-yet-built business-people.html /
   business-activity.html). Extracted out of business-profile.html's own
   page-scoped <style> block in the round-2 pass so every page sharing the
   left/right rail stays visually in sync instead of drifting between
   copy-pasted per-page copies -- see CONTEXT.md for why per-page
   copy-paste is normally this codebase's convention; this file is the
   deliberate exception, scoped only to the bh- prefix and only shared by
   pages that render literally the same rail markup.
   ========================================================================== */

/* Plain cards: the hairline is now neutral grey (was teal-tinted). Round 2 treatment was --
   no drop shadows anywhere on this page, cards are told apart from the
   page only by a hairline teal-tinted stroke over the cool gray canvas.
   Two page-scoped tokens so every
   bh- card below stays in sync if this ever needs tuning again. */
:root{
  --bh-stroke:rgba(27,33,45,.09);
  --bh-stroke-soft:rgba(27,33,45,.06);
}
body[data-app-page="business"],
body[data-app-page="business-analytics"],
body[data-app-page="business-settings"],
body[data-app-page="business-people"],
body[data-app-page="business-activity"]{background:#F3F6F5;}

/* business-jobs.html and business-posts.html both opted back out of the
   shared mint-tinted page background above: with it on, the page read as
   a card floating on a colored backdrop (page bg + bh-card white on top
   of that = a card-on-a-card look). Falls back to the plain var(--paper)
   every other app page (jobs.html, manage-jobs.html, etc.) already uses. */
body[data-app-page="business-jobs"],
body[data-app-page="business-posts"]{background:var(--canvas,var(--paper));}

.bh-wrap{display:grid;grid-template-columns:264px minmax(0,1fr) 300px;gap:20px;align-items:start;}
@media (max-width:1080px){.bh-wrap{grid-template-columns:1fr;}}

/* ---- Left rail: company card + section nav ---- */
.bh-side{position:sticky;top:16px;display:flex;flex-direction:column;gap:14px;}
@media (max-width:1080px){.bh-side{position:static;}}

/* IMPORTANT: no overflow:hidden on .bh-card itself. Round 1 clipped the
   cover's square corners this way, but that also silently clipped
   anything else inside the card that needs to escape its box -- the
   "+ Create" popup menu below included, which is why it was "hiding"
   instead of popping out. The cover's own corners are rounded on the
   cover element instead, so the card can stay overflow:visible. */
.bh-card{background:var(--white);border:1px solid var(--bh-stroke);border-radius:var(--r-lg);box-shadow:none;position:relative;}
.bh-cover{height:72px;border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden;background:#17332f url('/assets/default-cover.png') center/cover no-repeat;position:relative;}
.bh-cover img{width:100%;height:100%;object-fit:cover;display:block;}
/* Identity row overlaps the cover on purpose (LinkedIn-Page style), but
   only by half the logo's height -- so the logo is never more than
   50% covered by the banner above it, and the white ring plus the
   card's own (visible, not clipped) rounded corner keeps its bottom
   half fully clear against the white body below. */
.bh-identity{padding:0 16px;margin-top:-26px;position:relative;z-index:1;}
.bh-logo{width:56px;height:56px;border-radius:50%;border:3px solid var(--white);box-shadow:0 2px 10px -4px rgba(27,33,45,.18);background:linear-gradient(135deg,var(--teal),var(--navy));color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Cabinet Grotesk',sans-serif;font-weight:600;font-size:17px;object-fit:cover;}
.bh-body{padding:10px 16px 16px;}
.bh-name{font-family:'Cabinet Grotesk',sans-serif;font-weight:600;font-size:15.5px;color:var(--navy);display:flex;align-items:center;gap:5px;line-height:1.3;}
.bh-industry{font-size:11.5px;color:var(--navy-65);margin-top:3px;}
.bh-followers{font-size:11.5px;color:var(--navy-65);margin-top:2px;}
.bh-card-actions{display:flex;flex-direction:column;gap:8px;margin-top:14px;}
.bh-create-wrap{position:relative;}
.bh-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:38px;border-radius:var(--r-pill);font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;text-decoration:none;}
.bh-btn-primary{background:var(--teal-dark);border:none;color:#fff;}
.bh-btn-primary:hover{background:var(--teal);}
.bh-btn-ghost{background:none;border:1.5px solid var(--navy-25);color:var(--navy);}
.bh-btn-ghost:hover{border-color:var(--navy-45);}
.bh-create-menu{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--white);border:1px solid var(--bh-stroke);border-radius:var(--r-md);box-shadow:0 10px 28px -10px rgba(15,118,109,.22);padding:6px;z-index:30;display:none;}
.bh-create-menu.open{display:block;}
.bh-create-menu a{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;font-size:12.5px;font-weight:500;color:var(--navy);text-decoration:none;}
@media (hover:hover){.bh-create-menu a:hover{background:var(--navy-06);}}

.bh-nav{list-style:none;margin:0;padding:8px;display:flex;flex-direction:column;gap:1px;}
.bh-nav a{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:9px;font-size:12.5px;font-weight:500;color:var(--navy-80);text-decoration:none;}
.bh-nav a svg{flex-shrink:0;color:var(--navy-45);}
@media (hover:hover){.bh-nav a:hover{background:var(--navy-06);}}
.bh-nav a.active{background:var(--teal-08);color:var(--teal-dark);font-weight:600;}
.bh-nav a.active svg{color:var(--teal-dark);}
.bh-nav-badge{margin-left:auto;background:#C0392B;color:#fff;font-size:10.5px;font-weight:700;line-height:1;padding:3px 6px;border-radius:999px;}

@media (max-width:1080px){
  .bh-nav{flex-direction:row;overflow-x:auto;padding:8px;-webkit-overflow-scrolling:touch;}
  .bh-nav a{flex:0 0 auto;white-space:nowrap;}
  .bh-nav-badge{margin-left:6px;}
}

/* ---- Mobile header (round 2): the cover/logo/name/follower-count
   card is dropped entirely on mobile (see the max-width:760px block
   below) in favor of the app's own persistent page header -- back
   button, business name as title, and a filter icon reusing this same
   icon that used to float on the cover. #bhFilterBtn now lives in that
   header (one per page, wherever the page's own <header class=
   "app-page-head"> puts it) and still opens the same bottom sheet
   below, unchanged -- only where the trigger button lives moved. ---- */

/* Bottom sheet holding the full section list, opened by #bhFilterBtn.
   Same visual language as the app's other sheets/modals. */
.bh-nav-sheet-backdrop{position:fixed;inset:0;background:var(--navy-45);z-index:1500;opacity:0;pointer-events:none;transition:opacity .25s ease;}
.bh-nav-sheet-backdrop.open{opacity:1;pointer-events:auto;}
.bh-nav-sheet{position:fixed;left:0;right:0;bottom:0;z-index:1501;background:var(--white);border-radius:18px 18px 0 0;transform:translateY(100%);transition:transform .32s ease;max-height:80vh;max-height:80dvh;overflow-y:auto;padding-bottom:max(10px,env(safe-area-inset-bottom));box-shadow:0 -8px 30px -6px rgba(15,23,26,.25);}
.bh-nav-sheet-backdrop.open .bh-nav-sheet{transform:translateY(0);}
.bh-nav-sheet-handle{width:36px;height:4px;background:#000;border-radius:4px;margin:10px auto 4px;}
.bh-nav-sheet-list{list-style:none;margin:0;padding:8px;display:flex;flex-direction:column;gap:1px;}
.bh-nav-sheet-list a,.bh-nav-sheet-list button{display:flex;align-items:center;gap:11px;padding:12px 12px;border-radius:9px;font-size:13px;font-weight:500;color:#000;text-decoration:none;min-height:44px;width:100%;text-align:left;background:none;border:none;font-family:inherit;}
.bh-nav-sheet-list a svg,.bh-nav-sheet-list button svg{flex-shrink:0;color:#000;}
@media (hover:hover){.bh-nav-sheet-list a:hover,.bh-nav-sheet-list button:hover{background:var(--navy-06,rgba(27,33,45,.05));}}
.bh-nav-sheet-list a.active{background:var(--teal-08);color:var(--teal-dark);font-weight:600;}
.bh-nav-sheet-list a.active svg{color:var(--teal-dark);}
.bh-nav-sheet-list .bh-nav-badge{margin-left:auto;}

@media (max-width:760px){
  body.app-body:has(.bh-wrap){overflow-x:hidden;}
  /* (Dashboard only) cards a shade lighter than the tinted page. Other
     sections are white throughout. */
  /* Mobile: every business section is on a plain WHITE background; only the
     Dashboard (business-profile.html, #bpMain) keeps the tinted one. */
  /* Every business page is plain WHITE on mobile, Dashboard included.
     The selector is deliberately heavy: app-cards.css paints the grey
     canvas on body.app-body:not(...):not(...) and would otherwise win. */
  body.app-body[data-app-page^="business"]:not(.room-native-shell):not([data-workspace-board]),
  body.app-body[data-app-page="manage-admins"]:not(.room-native-shell):not([data-workspace-board]),
  body.app-body[data-app-page="manage-following"]:not(.room-native-shell):not([data-workspace-board]),
  body.app-body[data-app-page="manage-restricted"]:not(.room-native-shell):not([data-workspace-board]),
  body.app-body[data-app-page="business-wallet"]:not(.room-native-shell):not([data-workspace-board]),
  body.app-body[data-app-page="business-activity"]:not(.room-native-shell):not([data-workspace-board]),
  body.app-body[data-app-page="business-posts"]:not(.room-native-shell):not([data-workspace-board]),
  body.app-body[data-app-page="business"]:has(#bpMain){background:#FFFFFF;}
  .bh-wrap{gap:0;}
  .bh-side{gap:0;}
  /* The whole company-card block (cover photo, logo, name, follower
     count, Create/View-as-member row) is dropped on mobile everywhere
     it appears -- Home/Posts/Jobs/People/Analytics/Activity/Settings/
     Edit profile/Inbox all reach it via the same .bh-side markup, so
     one rule keeps it gone no matter which section is active. The
     page header (back button, title, filter icon) now does its job. */
  .bh-side > .bh-card:first-child{display:none;}
  /* Everything below the (now-hidden) action-button row also collapses
     into the header's filter sheet on mobile. */
  .bh-side > .bh-card.bh-nav,
  .bh-side > .bh-card.bh-grow-card,
  .bh-side > a.app-btn{display:none;}
  /* Bottom tab bar is dropped for the whole business-hub mobile
     experience -- the page header + filter sheet is the only nav. */
  body[data-app-page^="business"] .app-bottom-nav{display:none;}
}

/* ---- Center column ---- */
.bh-content{min-width:0;display:flex;flex-direction:column;gap:18px;}

/* ---- Web only (>=761px): the centre column of Posts / Jobs / Activity /
   People sits inside ONE white card, same as Manage admins and Settings.
   Opt in with class="bh-content bh-content-card" (the Dashboard does not).
   Mobile (<=760px) is untouched. */
@media (min-width:761px){
  /* card needs a tinted backdrop to read as a card (Jobs/Posts/People
     used a plain white page background) */
  body:has(.bh-content-card){background:#F3F6F5;}
  .bh-content.bh-content-card{
    background:var(--white);border:1px solid var(--bh-stroke);border-radius:var(--r-lg);
    padding:20px 22px;gap:16px;
  }
  /* panels that only wrap a list lose their own box (no card inside a card) */
  .bh-content-card > .bh-panel:not(.bpo-start-post):not(.bpo-readonly-note){
    border:none;border-radius:0;padding:0;background:none;
  }
  .bh-content-card .bpo-panel{margin-top:0;}
  .bh-content-card .bae-list-card{border:none;border-radius:0;padding:0;background:none;}
  .bh-content-card .bh-head-row,.bh-content-card .bpo-head-row,
  .bh-content-card .bae-head-row,.bh-content-card .bpe-head-row{margin-bottom:0;}
}

.bh-welcome{background:linear-gradient(120deg,var(--teal-08),var(--navy-06));border:1px solid var(--bh-stroke);border-radius:var(--r-lg);padding:22px 24px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.bh-welcome-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-dark);}
.bh-welcome h2{font-family:'Cabinet Grotesk',sans-serif;font-weight:600;font-size:clamp(19px,2.6vw,24px);color:var(--navy);margin-top:4px;max-width:420px;line-height:1.3;}
.bh-welcome p{font-size:12px;color:var(--navy-65);margin-top:6px;max-width:380px;}
/* Reference screenshot has a photographic scene + italic tagline in this
   corner; kept as a generic soft abstract mark instead of a hard-coded
   photo/company slogan, since every ProfilePro business lands on this
   same banner. Hidden once the card gets too narrow for it to sit
   comfortably beside the text. */
.bh-welcome-art{flex-shrink:0;width:132px;height:88px;position:relative;display:none;}
@media (min-width:760px){.bh-welcome-art{display:block;}}
.bh-welcome-art svg{width:100%;height:100%;}

.bh-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
@media (max-width:640px){.bh-stat-grid{grid-template-columns:repeat(2,1fr);}}
.bh-stat-card{background:var(--white);border:1px solid var(--bh-stroke);border-radius:var(--r-lg);box-shadow:none;padding:15px 16px;}
.bh-stat-icon{width:30px;height:30px;border-radius:8px;background:var(--teal-08);color:var(--teal-dark);display:flex;align-items:center;justify-content:center;margin-bottom:10px;}
.bh-stat-label{font-size:11px;color:var(--navy-65);}
.bh-stat-value{font-family:'Cabinet Grotesk',sans-serif;font-weight:600;font-size:20px;color:var(--navy);margin-top:2px;}
.bh-stat-delta{font-size:11.5px;font-weight:600;margin-top:5px;display:flex;align-items:center;gap:3px;}
.bh-stat-delta.up{color:var(--teal-dark);}
.bh-stat-delta.down{color:var(--orange-dark);}

.bh-panel{background:var(--white);border:1px solid var(--bh-stroke);border-radius:var(--r-lg);box-shadow:none;padding:18px 20px;}
.bh-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;}
.bh-panel-head h3{font-family:'Cabinet Grotesk',sans-serif;font-weight:600;font-size:14px;color:var(--navy);}
.bh-panel-link{font-size:11.5px;font-weight:600;color:var(--teal-dark);text-decoration:none;}
.bh-select{border:1px solid var(--navy-10);border-radius:8px;padding:6px 10px;font-size:11.5px;font-family:inherit;color:var(--navy-80);background:var(--white);}
.bh-legend{display:flex;gap:14px;margin-bottom:10px;flex-wrap:wrap;}
.bh-legend-item{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--navy-65);}
.bh-legend-dot{width:8px;height:8px;border-radius:50%;}

.bh-recent-row,.bh-activity-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--navy-06);}
.bh-recent-row:last-child,.bh-activity-row:last-child{border-bottom:none;}
.bh-recent-thumb{width:40px;height:40px;border-radius:8px;background:var(--navy-06);flex-shrink:0;object-fit:cover;}
.bh-recent-text{flex:1;min-width:0;font-size:12px;color:var(--navy-80);line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.bh-recent-meta{font-size:11.5px;color:var(--navy-45);margin-top:2px;}

.bh-quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;}
@media (max-width:520px){.bh-quick-grid{grid-template-columns:1fr;}}
.bh-quick-row{display:flex;align-items:center;gap:11px;padding:10px 4px;border-radius:9px;text-decoration:none;color:inherit;}
@media (hover:hover){.bh-quick-row:hover{background:var(--navy-06);}}
.bh-quick-icon{width:34px;height:34px;border-radius:9px;background:var(--teal-08);color:var(--teal-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.bh-quick-title{font-size:12.5px;font-weight:600;color:var(--navy);}
.bh-quick-sub{font-size:11.5px;color:var(--navy-65);}

/* ---- Left rail: "Grow your team" card (spotted in every reference
   screenshot, sat below the section-nav card, on every section -- not
   just Dashboard's). Content is generic ("Find and hire top talent
   faster" rather than a hard-coded company name/product line) since
   this rail is shared by every ProfilePro business, not just one. ---- */
.bh-grow-card{padding:16px;display:flex;gap:12px;align-items:flex-start;}
.bh-grow-icon{width:34px;height:34px;border-radius:10px;background:var(--teal-08);color:var(--teal-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.bh-grow-title{font-size:12.5px;font-weight:600;color:var(--navy);}
.bh-grow-sub{font-size:11px;color:var(--navy-65);line-height:1.45;margin-top:2px;}
.bh-grow-cta{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--teal-dark);text-decoration:none;margin-top:8px;}
@media (hover:hover){.bh-grow-cta:hover{text-decoration:underline;}}

/* ---- Center column: Recent posts + Quick actions side by side, same
   proportions as the reference (posts card wider than the actions
   card). Stacks back to one column once there isn't room. ---- */
.bh-bottom-row{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;align-items:start;}
@media (max-width:860px){.bh-bottom-row{grid-template-columns:1fr;}}
/* Dashboard's Quick actions panel was removed (round: business-hub
   dashboard/posts rework) -- Recent posts now takes the full row instead
   of sharing it 1.4fr/1fr with a panel that no longer exists. */
.bh-bottom-row-single{grid-template-columns:1fr;}

/* ---- Center column: a real post card inside "Recent posts", matching
   business-posts.html / post-engine.css's own post rendering (avatar,
   name, timestamp + visibility, text, image, reaction bar) instead of
   round-1's truncated thumbnail row -- so what you see here is exactly
   what you'd see on the Posts tab, just the single most recent one. ---- */
.bh-post-card{padding:0;}
.bh-post-card + .bh-post-card{margin-top:14px;padding-top:14px;border-top:1px solid var(--navy-06);}
.bh-post-head{display:flex;align-items:center;gap:10px;}
.bh-post-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;background:linear-gradient(135deg,var(--teal),var(--navy));color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Cabinet Grotesk',sans-serif;font-weight:600;font-size:12px;flex-shrink:0;}
.bh-post-name{font-size:12.5px;font-weight:600;color:var(--navy);}
.bh-post-meta{font-size:11.5px;color:var(--navy-45);margin-top:1px;}
.bh-post-text{font-size:12px;color:var(--navy-80);line-height:1.55;margin-top:10px;white-space:pre-wrap;}
.bh-post-media{width:100%;border-radius:10px;margin-top:10px;display:block;object-fit:cover;max-height:220px;background:var(--navy-06);}
.bh-post-stats{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;font-size:11.5px;color:var(--navy-45);}
.bh-post-actions{display:flex;gap:4px;margin-top:6px;border-top:1px solid var(--navy-06);padding-top:6px;}
.bh-post-action{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:7px 4px;border-radius:8px;font-size:11px;font-weight:600;color:var(--navy-65);background:none;border:none;font-family:inherit;cursor:pointer;}
@media (hover:hover){.bh-post-action:hover{background:var(--navy-06);color:var(--navy);}}

/* ---- Chart ---- */
.bh-chart{width:100%;height:auto;display:block;overflow:visible;}
.bh-chart-axis{font-size:10px;fill:var(--navy-45);font-family:'Cabinet Grotesk',sans-serif;}

/* ---- Right rail ---- */
.bh-right{display:flex;flex-direction:column;gap:16px;}
.bh-toggle-row{display:flex;gap:6px;margin-bottom:14px;}
.bh-toggle{flex:1;text-align:center;padding:7px 8px;border-radius:8px;font-size:11px;font-weight:600;border:1px solid var(--navy-10);background:none;color:var(--navy-65);cursor:pointer;font-family:inherit;}
.bh-toggle.active{background:var(--teal-dark);border-color:var(--teal-dark);color:#fff;}
.bh-insight-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--navy-06);}
.bh-insight-row:last-child{border-bottom:none;}
.bh-insight-icon{width:28px;height:28px;border-radius:7px;background:var(--navy-06);color:var(--navy-65);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.bh-insight-label{font-size:11px;color:var(--navy-65);}
.bh-insight-value{font-family:'Cabinet Grotesk',sans-serif;font-weight:600;font-size:14.5px;color:var(--navy);}
.bh-insight-delta{margin-left:auto;font-size:11px;font-weight:600;color:var(--teal-dark);}

.bh-top-post{display:flex;gap:10px;align-items:flex-start;}
.bh-top-post-thumb{width:88px;height:66px;border-radius:10px;background:linear-gradient(135deg,var(--navy),var(--teal-dark));flex-shrink:0;object-fit:cover;}
.bh-top-post-text{font-size:11.5px;color:var(--navy-80);line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.bh-top-post-meta{font-size:11px;color:var(--navy-45);margin-top:4px;}
.bh-top-post-stats{display:flex;gap:12px;font-size:11.5px;color:var(--navy-45);margin-top:10px;}
.bh-top-post-tag{display:inline-flex;align-items:center;gap:4px;margin-top:9px;font-size:11px;font-weight:600;color:var(--teal-dark);background:var(--teal-08);padding:4px 9px;border-radius:999px;}

.bh-empty{font-size:11.5px;color:var(--navy-45);padding:6px 0;}

/* ---- Business hub: header buttons (mobile) -------------------------------
   The whole 44px target responds, not just the glyph: taps land on the button
   (the svg never swallows them) and show the green press/open highlight. */
body[data-app-page^="business"] .app-page-head-back,
body[data-app-page^="business"] .app-page-head-action{
  position:relative;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:background .15s ease,box-shadow .15s ease,color .15s ease;
}
body[data-app-page^="business"] .app-page-head-back svg,
body[data-app-page^="business"] .app-page-head-action svg{pointer-events:none;}
body[data-app-page^="business"] .app-page-head-back:active,
body[data-app-page^="business"] .app-page-head-action:active,
body[data-app-page^="business"] .app-page-head-action.is-open,
body[data-app-page^="business"] .app-page-head-back:focus-visible,
body[data-app-page^="business"] .app-page-head-action:focus-visible{
  background:rgba(15,118,109,.12);color:var(--teal-dark,#0F766D);
  box-shadow:0 0 0 4px rgba(15,118,109,.16);outline:none;
}

/* Header buttons on the business hub (back + sections switcher): respond to the first tap, no double-tap delay. */
body[data-app-page^="business"] .app-page-head-action,body[data-app-page^="business"] .app-page-head-back{touch-action:manipulation;-webkit-tap-highlight-color:transparent;position:relative;z-index:1}

/* =====================================================================
   Manage people tables (Manage admins / Restricted members / Following)
   LinkedIn-style: ONE card, a flat table inside it (no second bordered box,
   no dropdown menus), pencil/trash style row actions, confirm dialogs.
   Shared here (not per page) so the three pages cannot drift apart.
   ===================================================================== */
@media (min-width:761px){body[data-app-page="manage-admins"],body[data-app-page="manage-restricted"],body[data-app-page="manage-following"]{background:#F3F6F5;}}
.mt-card{padding:0;overflow:visible;}
.mt-back{display:inline-flex;align-items:center;gap:5px;color:var(--teal-dark);font-size:12px;font-weight:600;margin-bottom:10px;text-decoration:none;}
@media (hover:hover){.mt-back:hover{text-decoration:underline;}}
@media (max-width:840px){.mt-back{display:none;}}
.mt-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 24px 12px;flex-wrap:wrap;}
.mt-head-text{min-width:0;flex:1 1 260px;}
.mt-head h1{font-family:'Cabinet Grotesk',sans-serif;font-weight:600;font-size:clamp(20px,2.6vw,25px);color:var(--navy);margin:0;}
.mt-head p{font-size:12.5px;color:var(--navy-65);margin:4px 0 0;line-height:1.5;}
.mt-primary{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--teal-dark);color:#fff;border:none;border-radius:100px;padding:0 20px;height:42px;font-size:13px;font-weight:600;width:auto;white-space:nowrap;cursor:pointer;}
@media (hover:hover){.mt-primary:hover{background:var(--teal);}}
.mt-note{font-size:12px;color:var(--navy-65);margin:0;padding:0 24px 14px;line-height:1.5;}
.mt-search{position:relative;margin:0 24px 14px;display:flex;align-items:center;}
.mt-search svg{position:absolute;left:14px;color:var(--navy-45);pointer-events:none;}
.mt-search input{width:100%;border:1.5px solid var(--navy-10);border-radius:12px;padding:11px 14px 11px 38px;font-size:13px;background:var(--white);}
.mt-table{border-top:1px solid var(--bh-stroke);}
.mt-thead,.mt-row{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr) 110px;gap:16px;align-items:center;padding:0 24px;}
.mt-table.mt-two .mt-thead,.mt-table.mt-two .mt-row{grid-template-columns:minmax(0,1fr) 110px;}
.mt-thead{background:#F6F9F8;border-bottom:1px solid var(--bh-stroke);padding-top:14px;padding-bottom:14px;font-size:12.5px;font-weight:700;color:var(--navy);}
.mt-thead > :last-child,.mt-row > .mt-actions{justify-self:end;}
.mt-row{padding-top:16px;padding-bottom:16px;border-top:1px solid var(--bh-stroke);}
.mt-row:first-of-type{border-top:none;}
.mt-person{display:flex;align-items:center;gap:14px;min-width:0;}
.mt-person .avatar{width:52px;height:52px;font-size:16px;flex-shrink:0;overflow:hidden;}
.mt-person .avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.mt-info{min-width:0;}
.mt-name{font-size:14px;font-weight:600;color:var(--navy);line-height:1.3;word-break:break-word;}
.mt-you{font-weight:500;color:var(--navy-45);}
.mt-sub{font-size:12px;color:var(--navy-65);margin-top:2px;line-height:1.4;word-break:break-word;}
.mt-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:100px;font-size:11.5px;font-weight:600;white-space:nowrap;}
.mt-badge svg{flex-shrink:0;}
.mt-badge-owner{background:#E1F3EA;color:#12805C;}
.mt-badge-super{background:#ECE6FB;color:#6D3FC9;}
.mt-badge-content{background:#E3EEFB;color:#1C64C9;}
.mt-badge-financial{background:#FCEADA;color:#B3591C;}
.mt-badge-restricted{background:#FBE7E3;color:#B3341F;}
.mt-badge-follower{background:#E8F1EF;color:var(--teal-dark);}
.mt-actions{display:flex;align-items:center;gap:4px;}
.mt-icon-btn{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;color:var(--navy-65);cursor:pointer;padding:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.mt-icon-btn svg{pointer-events:none;}
@media (hover:hover){.mt-icon-btn:hover{background:var(--navy-06);color:var(--navy);}}
.mt-icon-btn:active{background:var(--navy-10);}
.mt-icon-btn[disabled]{opacity:.3;pointer-events:none;}
.mt-empty{text-align:center;padding:28px 16px;color:var(--navy-45);font-size:13px;}
.mt-error{color:var(--orange-dark,#b3441c);font-size:12px;min-height:0;padding:0 24px 14px;}
.mt-error:empty{display:none;}
.mt-error:not(:empty){padding-top:12px;}

@media (max-width:820px){
  .mt-head{padding:18px 16px 10px;}
  .mt-head .mt-primary{width:100%;}
  .mt-note{padding:0 16px 12px;}
  .mt-search{margin:0 16px 12px;}
  .mt-thead{display:none;}
  .mt-row,.mt-table.mt-two .mt-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"person actions" "role role";row-gap:10px;padding:14px 8px 14px 16px;}
  .mt-row > .mt-person{grid-area:person;}
  .mt-row > .mt-role{grid-area:role;padding-left:66px;}
  .mt-row > .mt-actions{grid-area:actions;}
  .mt-person .avatar{width:48px;height:48px;}
  .mt-error{padding:0 16px 12px;}
}
@media (max-width:760px){
  /* phones: same edge-to-edge section the other hub pages use (app-cards.css),
     one white block on the grey canvas -- never a box inside a box */
  body.app-body .bh-content > .bh-card.mt-card{
    margin-left:-16px;margin-right:-16px;border-left:0;border-right:0;border-radius:0;
    width:auto;max-width:none;box-sizing:border-box;
  }
}

/* ---- Dialogs (edit role / confirm remove / add) ---- */
.mt-backdrop{position:fixed;inset:0;z-index:2600;background:rgba(15,24,32,.55);display:flex;align-items:center;justify-content:center;padding:16px;}
.mt-backdrop[hidden]{display:none;}
.mt-dialog{background:#fff;border-radius:14px;width:min(560px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;box-shadow:0 18px 60px rgba(10,20,30,.35);}
.mt-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 16px 14px 24px;border-bottom:1px solid var(--bh-stroke);}
.mt-dialog-head h2{font-family:'Cabinet Grotesk',sans-serif;font-size:19px;font-weight:600;color:var(--navy);margin:0;}
.mt-dialog-body{padding:22px 24px;overflow-y:auto;}
.mt-dialog-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 24px;border-top:1px solid var(--bh-stroke);}
.mt-btn{height:42px;padding:0 22px;border-radius:100px;font-size:14px;font-weight:600;cursor:pointer;width:auto;white-space:nowrap;}
.mt-btn-ghost{background:#fff;color:var(--teal-dark);border:1.5px solid var(--teal-dark);}
@media (hover:hover){.mt-btn-ghost:hover{background:var(--teal-06,var(--navy-06));}}
.mt-btn-solid{background:var(--teal-dark);color:#fff;border:1.5px solid var(--teal-dark);}
@media (hover:hover){.mt-btn-solid:hover{background:var(--teal);border-color:var(--teal);}}
.mt-btn-danger{background:#B3341F;color:#fff;border:1.5px solid #B3341F;}
@media (hover:hover){.mt-btn-danger:hover{background:#962A18;border-color:#962A18;}}
.mt-btn[disabled]{opacity:.55;pointer-events:none;}
.mt-confirm{text-align:center;}
.mt-confirm .avatar{width:112px;height:112px;font-size:35px;margin:0 auto 14px;overflow:hidden;}
.mt-confirm .avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.mt-confirm-name{font-size:21px;font-weight:500;color:var(--navy);}
.mt-confirm-sub{font-size:14px;color:var(--navy-65);margin-top:4px;}
.mt-confirm-msg{font-size:15px;color:var(--navy);margin:26px 0 6px;}
.mt-confirm-warn{display:inline-flex;align-items:flex-start;gap:7px;font-size:12.5px;color:#B3441C;text-align:left;line-height:1.45;}
.mt-confirm-warn svg{flex-shrink:0;margin-top:1px;}
.mt-roles{display:flex;flex-direction:column;gap:10px;}
.mt-role-opt{display:flex;align-items:flex-start;gap:12px;border:1.5px solid var(--navy-10);border-radius:12px;padding:12px 14px;cursor:pointer;}
.mt-role-opt input{margin-top:3px;accent-color:var(--teal-dark);flex-shrink:0;}
.mt-role-opt.is-on{border-color:var(--teal-dark);background:var(--teal-06,#F1F7F5);}
.mt-role-opt b{display:block;font-size:13.5px;color:var(--navy);font-weight:600;}
.mt-role-opt span{display:block;font-size:11.5px;color:var(--navy-65);margin-top:2px;line-height:1.45;}
.mt-who{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.mt-who .avatar{width:44px;height:44px;overflow:hidden;}
.mt-who .avatar img{width:100%;height:100%;object-fit:cover;}
.mt-add-search{width:100%;border:1.5px solid var(--navy-10);border-radius:12px;padding:12px 14px;font-size:13.5px;background:#fff;}
.mt-add-roles{margin:14px 0 6px;}
.mt-add-roles label{display:block;font-size:11.5px;font-weight:600;color:var(--navy-65);margin-bottom:6px;}
.mt-add-roles select{width:100%;border:1.5px solid var(--navy-10);border-radius:12px;padding:0 12px;height:42px;font-size:13px;background:#fff;color:var(--navy);}
.mt-results{margin-top:10px;max-height:min(320px,45vh);overflow-y:auto;}
.mt-result{display:flex;align-items:center;gap:12px;padding:10px 4px;border-top:1px solid var(--bh-stroke-soft);}
.mt-result:first-child{border-top:none;}
.mt-result .avatar{width:42px;height:42px;overflow:hidden;}
.mt-result .avatar img{width:100%;height:100%;object-fit:cover;}
.mt-result-info{min-width:0;flex:1;}
.mt-result-add{flex-shrink:0;background:#fff;border:1.5px solid var(--teal-dark);color:var(--teal-dark);border-radius:100px;padding:7px 16px;font-size:12px;font-weight:600;width:auto;cursor:pointer;}
@media (hover:hover){.mt-result-add:hover{background:var(--teal-06,var(--navy-06));}}
.mt-result-add[disabled]{opacity:.55;pointer-events:none;}
@media (max-width:560px){
  .mt-backdrop{align-items:flex-end;padding:0;}
  .mt-dialog{width:100%;border-radius:18px 18px 0 0;max-height:92vh;}
  .mt-dialog-foot .mt-btn{flex:1;}
}
/* Manage-people pages have no right rail: two columns on desktop. Scoped to
   >=1081px so the shared collapse-to-one-column rule still wins below that
   (an unscoped override here left a dead 264px column on tablets/phones). */
@media (min-width:1081px){
  body[data-app-page="manage-admins"] .bh-wrap,
  body[data-app-page="manage-restricted"] .bh-wrap,
  body[data-app-page="manage-following"] .bh-wrap{grid-template-columns:264px minmax(0,1fr);}
}


/* ---- Lines + welcome banner cleanup (business pages) ----
   Phones: the greeting banner is gone (the page's own rule lost to the
   later .bh-welcome{display:flex} above, so it needs the extra weight).
   A card that is first in the page no longer draws its own top line under the
   header's line (that was the double line), and the last card/row draws no
   line after the final content. Between stacked cards the single hairline stays. */
@media (max-width:760px){
  body.app-body .bh-welcome{display:none !important;}
  body.app-body .bh-content > .bh-card:first-child,
  body.app-body .bh-content > .bh-panel:first-child,
  body.app-body .bh-content > .bs-card:first-child,
  body.app-body .bh-content > .mt-back + .bh-card,
  body.app-body .bh-content > .bh-head-row + .bs-card,
  body.app-body .bh-content > .bh-head-row + .bh-card,
  body.app-body .bh-content > .bh-head-row + .bh-panel{border-top:0 !important;}
  body.app-body .bh-content > :last-child,
  body.app-body .bh-right > :last-child{border-bottom:0 !important;}
  body.app-body .bh-content > :last-child > :last-child,
  body.app-body .mt-card > :last-child,
  body.app-body .bs-card > :last-child{border-bottom:0 !important;}
}

/* ---- Phones: business pages share the FEED's look ----
   Same grey canvas as the feed (--canvas) and the same thin gap between
   stacked sections (--feed-gap, 3px). Sections stay exactly as they were
   (edge-to-edge, not boxed) -- only the space between them closes up.
   Heavier selectors on purpose: they must beat app-cards.css (gap:8px),
   the earlier white-background rule above and business-profile.html's
   inline .bh-right margin. */
@media (max-width:760px){
  body.app-body[data-app-page^="business"]:not(.room-native-shell):not([data-workspace-board]),
  body.app-body[data-app-page="manage-admins"]:not(.room-native-shell):not([data-workspace-board]),
  body.app-body[data-app-page="manage-following"]:not(.room-native-shell):not([data-workspace-board]),
  body.app-body[data-app-page="manage-restricted"]:not(.room-native-shell):not([data-workspace-board]),
  body.app-body[data-app-page="business"]:has(#bpMain){background:#FFFFFF;}
  body.app-body .bh-wrap .bh-content{gap:var(--feed-gap,3px);}
  body.app-body .bh-wrap .bh-right{gap:var(--feed-gap,3px);margin-top:var(--feed-gap,3px);}
  body.app-body .bh-wrap .bh-bottom-row{gap:var(--feed-gap,3px);}
  body.app-body .bh-wrap .bh-panel-stack,
  body.app-body .bh-wrap .bh-card-stack{gap:var(--feed-gap,3px);}
  /* list-style sections that keep their own gap between items */
  body.app-body .bj-list{gap:var(--feed-gap,3px);}
  body.app-body .bh-wrap .bh-stat-grid{gap:var(--feed-gap,3px);}
}
@media (max-width:760px){
  /* canvas now shows between sections, so each section / row paints its own white */
  body.app-body .bh-wrap .bh-content > *:not(.bh-welcome):not([hidden]):not(script):not(style),
  body.app-body .bh-wrap .bh-right > *{background-color:#fff;}
  body.app-body #bpoPostsList{gap:var(--feed-gap,3px);}
  body.app-body #bpoPostsList .comm-post{background:#fff;border-bottom:0;}
  body.app-body .bj-list > *{background:#fff;}
  body.app-body .bj-list > *,
  body.app-body .bj-list .mw-post-row{border-bottom:0;}
}

/* Dashboard stat cards: always two per row (Active jobs + Page visits, then
   Followers + Interactions). The 4-across rule at the top of this file came
   later than the page's own 2-column rule and won, so the row squeezed when
   the menu opened. Heavier selector fixes the order. */
body .bh-content .bh-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));}