/* ==========================================================================
   mh_ui.css - THE MarketHive toolbar + div-table master (S586).

   Every size in this file is measured off /newsfeed, the SIZING MASTER
   (Chris, S586-DRL-02: "everything gets built from sizing off news feed for
   uniformity ... not just tool bars but also div tables ... all div tables
   should have scroll or expand where needed"). Colours follow S586-DRL-01 Q4
   and Tom's sheets. The ruling text and every value's source live in the
   KitFire spec: kitfire-ai-os/product/markethive/TOOLBAR_SPEC.md (section 0).

   RULES FOR EVERY PAGE:
   - Pages USE these tokens. They never restate a toolbar or row size.
   - A page that needs a different size needs a new ruling first; it does
     not get a page-scoped override (S436-DRL-02).
   - /newsfeed is the reference. If this file and /newsfeed disagree, this
     file is wrong.

   Loaded by includes/page_header_bar.php AFTER the page's own CSS, so on an
   equal selector the master wins.
   ========================================================================== */

:root {
    /* ---- band (the toolbar shell) ---- */
    --mh-band-max-w: 1423px;
    --mh-band-min-h: 121.7px;        /* the master band as rendered on /newsfeed */
    --mh-band-pad: 7.42px 12px;
    --mh-band-gap: 24px;
    --mh-band-bg: #b0b1df;
    --mh-band-border: 2px solid #5c6690;
    --mh-band-radius: 10px;
    --mh-icon-w: 87px;
    --mh-icon-h: 86px;
    --mh-icon-gap: 10px;
    --mh-title-fs: 21.04px;
    --mh-crumb-fs: 13.48px;

    /* ---- controls ---- */
    --mh-font: 'Tahoma', 'Poppins', Geneva, sans-serif;
    --mh-ctl-h: 30px;
    --mh-ctl-gap: 8px;
    --mh-ctl-radius: 4px;
    --mh-grid-col-w: 196px;          /* grid band cell (S601-DRL-01): Blogging Tools & Assets fits */
    /* dropdown toggles (GO TO and every page menu) */
    --mh-dd-w: 148px;
    --mh-dd-border: 2px solid #000000;
    --mh-dd-fs: 13px;
    /* Production /newsfeed's GO TO colours (Chris, S586: "we need Dev3 to match Prod").
       This replaces S586-DRL-01 Q4's #E1E1E1/#21345B - the master page does not change. */
    --mh-dd-fill: #e9eaf3;
    --mh-dd-text: #1a1a2e;
    --mh-dd-hover-fill: #dcdef0;
    --mh-menu-head: #3b5bbf;
    --mh-menu-item-fs: 13px;
    /* plain toolbar buttons (Algorithm / Search Newsfeed / Black Listing) */
    --mh-btn-min-w: 140px;
    --mh-btn-border: 1px solid #000000;
    --mh-btn-fs: 13.34px;
    --mh-btn-pad: 3px 8px;
    --mh-btn-fill: #ffffff;
    --mh-btn-text: #333333;
    --mh-btn-hover-fill: #eeeeee;
    /* search box in a toolbar takes a dropdown's slot */
    --mh-search-w: 148px;

    /* ---- div tables (rows / panels under the band) ---- */
    --mh-row-border: 1px solid #dfdfdf;
    --mh-row-pad: 10px;
    --mh-row-gap: 10px;
    --mh-row-radius: 0;
    --mh-table-max-h: 70vh;          /* only for a table that must stay bounded */

    /* ---- text sizer (S586-DRL-01 Q7) and switch (Q8) ---- */
    --mh-sizer-w: 36px;
    --mh-sizer-gap: 3px;
    --mh-sizer-h: 24px;
    --mh-switch-on: #6d83b4;
    --mh-switch-off: #a1b1d1;
    --mh-focus: 0 0 0 2px #e9bc47;
}

/* ---------------------------------------------------------------- band --- */
.subs-section-header {
    max-width: var(--mh-band-max-w);
    min-height: var(--mh-band-min-h);
    padding: var(--mh-band-pad);
    gap: var(--mh-band-gap);
    background: var(--mh-band-bg);
    border: var(--mh-band-border);
    border-radius: var(--mh-band-radius);
}
.subs-section-header .subs-nav-page-icon {
    width: var(--mh-icon-w);
    height: var(--mh-icon-h);
    object-fit: contain;
    flex: 0 0 var(--mh-icon-w);
}
.subs-section-header .subs-nav-page-title { font-size: var(--mh-title-fs); }
.subs-section-header .subs-nav-breadcrumb { font-size: var(--mh-crumb-fs); }

/* AI Chat borrowed the E1 band (pinned 112px). Only E1 EXCHANGE is excepted
   from the master, so AI Chat opts back in with .mh-band-master. */
.subs-section-header.mh-band-master { height: auto; min-height: var(--mh-band-min-h); }

/* ------------------------------------------------------------ controls --- */
/* SPECIFICITY CONTRACT: every master rule here is exactly (0,2,0) - one band
   class + one control class, with any extra structure inside :where(). That
   beats the unscoped base rules (.bh-btn in blogs.css, inline copies), and it
   LOSES to page STATE rules (.hs-info .bh-btn.is-current, .nf-btn-disabled.
   nf-btn-algorithm, :disabled ...), which is what we want. A page rule that
   restates a SIZE at higher specificity is drift: delete it, don't out-shout it.
   E1 Exchange is excepted (Tom/Chris, S436): .ph-nav-dd-legacy is left alone. */

/* Every control in a toolbar row: same height, same baseline. */
.subs-section-header .bh-btn,
.subs-section-header .mh-tb-btn,
.subs-section-header .bh-search-input {
    height: var(--mh-ctl-h);
    border-radius: var(--mh-ctl-radius);
    font-family: var(--mh-font);
    box-sizing: border-box;
}

/* Dropdown toggles: at least GO TO's 148px; a longer label grows its toggle
   just enough to fit (S586-DRL-03 - "Blogging Tools & Assets" cannot be read at
   148, and nothing is ever clipped). GO TO itself stays exactly 148 (its own
   rules in nav_page_select.css). The menu is as wide as its toggle (S469/S470). */
.subs-section-header :where(:not(.ph-nav-dd-legacy)) > .bh-dd-toggle {
    width: auto;
    min-width: var(--mh-dd-w);
    max-width: none;
    white-space: nowrap;
    padding: 0 10px 0 12px;
    border: var(--mh-dd-border);
    background: var(--mh-dd-fill);
    color: var(--mh-dd-text);
    font-size: var(--mh-dd-fs);
    font-weight: bold;
    gap: 4px;
}
.subs-section-header :where(:not(.ph-nav-dd-legacy)) > .bh-dd-toggle:hover { background: var(--mh-dd-hover-fill); }
.subs-section-header :where(:not(.ph-nav-dd-legacy)) > .bh-dd-menu {
    width: 100%;                      /* = its toggle (the .bh-dd shrink-wraps it) */
    min-width: var(--mh-dd-w);
    max-width: none;
    box-sizing: border-box;
}
.subs-section-header :where(:not(.ph-nav-dd-legacy)) .bh-dd-sub {
    width: var(--mh-dd-w);
    min-width: var(--mh-dd-w);
    max-width: var(--mh-dd-w);
    box-sizing: border-box;
}
.subs-section-header :where(.mh-band-controls, .bh-nav-row, .fh-control-row, .gf-control-row, .cn-control-row) > .bh-dd { flex: 0 0 auto; }
.subs-section-header .bh-dd-head { background: var(--mh-menu-head); }
.subs-section-header .bh-dd-head,
.subs-section-header .bh-dd-item { white-space: normal; overflow-wrap: anywhere; }
/* S587: mh_band.php draws click-action menu items as <button>; without this they kept the
   browser's grey button box and sat side by side (Smart Mail). Every item is a full-width row. */
.subs-section-header button.bh-dd-item {
    display: block; width: 100%; box-sizing: border-box; margin: 0; text-align: left;
    background: #FFFFFF; border: 0; border-top: 1px solid #eef0f6; border-radius: 0;
}
.subs-section-header button.bh-dd-item:hover { background: #e9eaf3; }
.subs-section-header button.bh-dd-item.is-on { font-weight: bold; }

/* Plain toolbar buttons, modelled on News Feed's Algorithm / Search Newsfeed /
   Black Listing (css/newsfeed.css .nf-header-btn reads these same tokens).
   At least 140px; they grow only to fit their label. */
.subs-section-header .mh-tb-btn,
.subs-section-header :where(.bh-nav-row, .bh-nav-buttons, .mh-band-controls) > .bh-btn:where(:not(.bh-dd-toggle)) {
    width: auto;
    min-width: var(--mh-btn-min-w);
    max-width: none;
    padding: var(--mh-btn-pad);
    border: var(--mh-btn-border);
    background: var(--mh-btn-fill);
    color: var(--mh-btn-text);
    font-size: var(--mh-btn-fs);
    font-weight: normal;
    justify-content: center;
    white-space: nowrap;
}
.subs-section-header .mh-tb-btn:hover,
.subs-section-header :where(.bh-nav-row, .bh-nav-buttons, .mh-band-controls) > .bh-btn:where(:not(.bh-dd-toggle)):hover {
    background: var(--mh-btn-hover-fill); color: var(--mh-btn-text);
}

/* Search box in a toolbar: a dropdown's slot, a button's border and type. */
.subs-section-header .bh-search-input {
    width: var(--mh-search-w);
    min-width: 0;
    border: var(--mh-btn-border);
    background: #ffffff;
    font-size: var(--mh-btn-fs);
    font-weight: normal;
}

/* Control rows: one 8px gap everywhere. */
.subs-section-header .mh-band-controls,
.subs-section-header .nf-header-buttons,
.subs-section-header .bh-nav-row,
.subs-section-header .bh-nav-buttons,
.subs-section-header .fh-control-row,
.subs-section-header .gf-control-row,
.subs-section-header .cn-control-row { gap: var(--mh-ctl-gap); }

/* The band partial's control row (includes/mh_band.php) - laid out exactly like
   News Feed's .nf-header-buttons: one row, 8px gaps, wraps when it must. */
.subs-section-header .mh-band-controls { display: flex; align-items: center; flex-wrap: wrap; gap: var(--mh-ctl-gap); }
.subs-section-header .mh-band-controls > :where(.bh-dd, .bh-search, .mh-tb-btn, .bh-btn, span.bh-btn) { margin-top: 6px; }
.subs-section-header .mh-tb-btn { display: inline-flex; align-items: center; cursor: pointer; text-decoration: none; }
.subs-section-header .mh-tb-btn:disabled { opacity: .45; cursor: not-allowed; }
.subs-section-header .mh-band-count { font-weight: normal; }

/* GO TO inside a button-grid row (/blogs, blog post, /analytics): no extra top
   margin, so it sits on the row's baseline with its neighbours. */
.subs-section-header .bh-nav-row > .ph-nav-dd { margin-top: 0; }

/* OPT-IN GRID BAND (S601-DRL-01, Chris): $mhBand['layout'] = 'grid' in includes/mh_band.php.
   GO TO sits in its own left column under the title + breadcrumb (.mh-band-goto, 148px as
   everywhere); the page's controls form an aligned grid beside it - at most 2 rows x 3
   columns, every cell the same 196px wide, 30px tall (--mh-ctl-h), 8px apart (--mh-ctl-gap).
   Bands without the opt-in are untouched. Used by /blogs and the blog post page. */
.subs-section-header.mh-band--grid .mh-band-controls {
    display: grid;
    grid-template-columns: repeat(3, var(--mh-grid-col-w));
    grid-auto-rows: var(--mh-ctl-h);
    gap: var(--mh-ctl-gap);
    /* Measured against production /blogs at 1920 (S605): row 2 sits level with GO TO (both
       bottom-aligned in .subs-nav-left; GO TO's box carries 4px below its button) and the grid
       starts 11px after the title column (.subs-nav-left's own 10px gap + 1px). */
    align-self: flex-end;
    margin-bottom: 4px;
    margin-left: 1px;
}
.subs-section-header.mh-band--grid .mh-band-goto { margin-top: 6px; }
.subs-section-header.mh-band--grid .mh-band-controls > :where(.bh-dd, .bh-search, .mh-tb-btn, .bh-btn, span.bh-btn) { margin-top: 0; width: var(--mh-grid-col-w); min-width: 0; }
.subs-section-header.mh-band--grid .mh-band-controls > .bh-dd > .bh-dd-toggle { width: var(--mh-grid-col-w); min-width: 0; }
.subs-section-header.mh-band--grid .mh-band-controls > .bh-search { display: flex; }
.subs-section-header.mh-band--grid .mh-band-controls > .bh-search > .bh-search-input { width: var(--mh-grid-col-w); box-sizing: border-box; }
/* Grid cells all read as one set, as on production /blogs (Chris, compare-to-production): the plain
   button (Write a New Blog Post) takes the dropdown look - #e9eaf3, 2px #000, 13px bold - and the
   search box the same 2px border and 13px type. Its blue "writing" state is restated here because
   this file loads after blogs.css, where .write-new-blog-btn.active lives. */
.subs-section-header.mh-band--grid .mh-band-controls > .bh-btn:where(:not(.bh-dd-toggle)) {
    border: var(--mh-dd-border); background: var(--mh-dd-fill); color: var(--mh-dd-text);
    font-size: var(--mh-dd-fs); font-weight: bold;
}
.subs-section-header.mh-band--grid .mh-band-controls > .bh-btn:where(:not(.bh-dd-toggle)):hover { background: var(--mh-dd-hover-fill); }
.subs-section-header.mh-band--grid .mh-band-controls > .bh-btn.write-new-blog-btn.active { background: #5f78ab; color: #fff; }
.subs-section-header.mh-band--grid .mh-band-controls > .bh-search > .bh-search-input { border: var(--mh-dd-border); font-size: var(--mh-dd-fs); --mh-btn-fs: var(--mh-dd-fs); }   /* input_defaults.css forces var(--mh-btn-fs) on toolbar inputs at higher specificity */
@media (max-width: 900px) {
    .subs-section-header.mh-band--grid .subs-nav-left { flex-wrap: wrap; }
    .subs-section-header.mh-band--grid .mh-band-controls { grid-template-columns: repeat(2, var(--mh-grid-col-w)); margin-left: 0; }
}
@media (max-width: 600px) {
    .subs-section-header.mh-band--grid .mh-band-controls { grid-template-columns: var(--mh-grid-col-w); }
}

.subs-section-header .bh-btn:focus-visible,
.subs-section-header .mh-tb-btn:focus-visible { outline: none; box-shadow: var(--mh-focus); }

/* ---------------------------------------------------------- div tables --- */
/* The News Feed's post container is the row master: full column width (the
   band's edges), 1px #dfdfdf, 10px padding, 10px between rows, square corners,
   height grows with content. New tables use .mh-table / .mh-row; existing row
   classes are mapped onto the same tokens below. */
.mh-table {
    width: 100%;
    max-width: var(--mh-band-max-w);
    margin: 0 auto;
    box-sizing: border-box;
}
.mh-row {
    margin: 0 0 var(--mh-row-gap);
    padding: var(--mh-row-pad);
    border: var(--mh-row-border);
    border-radius: var(--mh-row-radius);
    box-sizing: border-box;
    overflow: visible;
}

/* SCROLL OR EXPAND (S586-DRL-02): a table either grows with its content (the
   default above), or - when it has to stay inside a bounded region - scrolls.
   Never clip. Add .mh-table--bounded to opt in to scrolling. */
.mh-table--bounded {
    max-height: var(--mh-table-max-h);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Existing rows mapped onto the master. Several legacy lists size their rows
   with inline style attributes, so those mappings carry !important - the only
   way a stylesheet beats an inline style. They set SIZES only; colours stay. */
.groups-feed-page .gf-row {
    margin: 0 0 var(--mh-row-gap);
    padding: var(--mh-row-pad);
    border: var(--mh-row-border);
    border-radius: var(--mh-row-radius);
}
/* /blogs list: inline "padding:12px 10px; border-bottom; overflow:hidden".
   flow-root still contains the floats that overflow:hidden was there for,
   without clipping anything (S586-DRL-02: never clip). */
#main_container_blogs > .blog_post_row {
    display: flow-root !important;
    overflow: visible !important;
    margin: 0 0 var(--mh-row-gap) !important;
    padding: var(--mh-row-pad) !important;
    border: var(--mh-row-border) !important;
    border-radius: var(--mh-row-radius);
}
/* /friends rows (Tom's stripes stay; sizes follow the master). */
.friends-page .fh-row {
    margin: 0 0 var(--mh-row-gap) !important;
    padding: var(--mh-row-pad) !important;
    border: var(--mh-row-border) !important;
    border-radius: var(--mh-row-radius) !important;
}
/* Group feed posts on /group/<name>: inline "padding:15px 0; border-bottom". */
.grp-page-wrap ~ .full_width_main_content_container_group_custom #activity_feed > [id^="display_activity_"] {
    margin: 0 0 var(--mh-row-gap) !important;
    padding: var(--mh-row-pad) !important;
    border: var(--mh-row-border) !important;
    border-radius: var(--mh-row-radius) !important;
}
/* /meetings room cards keep their grid; card box sizes follow the master. */
.mh-rooms-grid { gap: var(--mh-row-gap); }
.mh-rooms-grid .mh-room-card {
    padding: var(--mh-row-pad);
    border: var(--mh-row-border);
    border-radius: var(--mh-row-radius);
}