/* ============================================================================
   pagetitle.css - the ONE page-title bar design for the whole system.

   Why this file exists
   -------------------
   .main-sec-title is the page header band used by ~227 views, almost all of
   them through the shared toolbar partials
   (Areas/HR/Views/Shared/Partials/_ListButtons, _CreateButtons, _EditButtons,
   _EditButtonsUsingPostDelete, _EditButtonsUsingGETDeleteWithToken,
   _StartUpListButtons) plus _ReportsLayout and _ConfigurePlugin. Its base rule
   lives duplicated in NewDesign/css/style.css and NewDesign/css/Ar/style.css and
   rendered a flat, bottom-border-only band.

   The Company settings screen (Areas/HR/Views/Setting/Setting/Company.cshtml)
   had a nicer card treatment for the same band, but scoped to a page-local
   .cs-redesign block, so only that one screen got it. John asked for that design
   on every screen (07/09/2026), so it moved here - ONE definition, loaded from
   both root layouts, instead of being copied into 227 views or into the two
   language-split NewDesign stylesheets (which is exactly the drift bug
   CLAUDE.md keeps recording).

   Load order (IMPORTANT - read before moving the layout call)
   -----------------------------------------------------------
   Html.AppendCssFileParts PREPENDS (see CLAUDE.md 5 / PageHeadBuilder), so CSS
   renders in the REVERSE of the order written in the layout. The NewDesign
   style.css / Ar/style.css calls sit at the TOP of the layout's CSS block, which
   means they render LAST and win over everything below them. So this file's
   Append call is written ABOVE them on purpose - that is what makes it render
   after them and actually override the base .main-sec-title rule. Do not "tidy"
   it down next to the other Administration/*.css calls.

   Direction: no LTR/RTL variants are needed. The band is flexbox with
   justify-content:space-between, so title and actions swap sides automatically
   with dir=rtl, and every offset below is symmetric.

   Page-level overrides still win: a view's own <style> block (or a <link> in the
   body) renders after all layout CSS, so a screen that genuinely needs a
   different band can still say so locally.

   John - 07/09/2026
   ============================================================================ */

.main-sec-title {
    /* tokens kept local to the component so no page has to define them */
    --pt-blue: #2a7abf;
    --pt-card: #ffffff;
    --pt-border: #dde3ef;
    --pt-text: #1e293b;
    --pt-radius: 12px;

    background: var(--pt-card);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    box-shadow: 0 1px 2px rgba(26, 46, 107, .05);
    padding: 14px 18px;
    margin-bottom: 16px;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

/* Two title markup shapes exist across the system and BOTH have to be styled:
   <h3> (the shared toolbar partials - the large majority) and
   <div class="caption"> (Company settings, _ReportsLayout, _ConfigurePlugin).
   Direct-child selectors so a stray .caption/h3 inside a dropdown in .actions
   is not caught. */
.main-sec-title > h3,
.main-sec-title > .caption {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--pt-text);
    line-height: 1.35;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* The leading icon each toolbar partial renders (<i class="fa ..."></i>). */
.main-sec-title > h3 > i,
.main-sec-title > .caption > i {
    color: var(--pt-blue);
}

/* .actions is deliberately NOT given display:flex here. It is frequently
   <div class="actions btn-group"> and Bootstrap's btn-group joins its buttons
   with float + negative margins - turning it into a flex container breaks the
   joined pill look. The parent's space-between already positions it. */

/* Opt-out for the handful of bands that carry ACTIONS ONLY and no title:
   a card + border + shadow around a lone button row reads as a stray box
   (modal footers most of all). Add main-sec-title-plain there and the band
   keeps the old flat behaviour. */
.main-sec-title.main-sec-title-plain {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 0;
}

@media (max-width: 767px) {
    /* keeps NewDesign responsive.css's tighter band margin, which this file
       would otherwise override (it renders after it - see load order above). */
    .main-sec-title {
        padding: 12px 14px;
        margin-bottom: 10px;
    }

    .main-sec-title > h3,
    .main-sec-title > .caption {
        font-size: 15px;
    }
}

/* ============================================================================
   New: the button row wraps below 992px, system-wide. Kamal - 21/09/2026

   This started as three page-scoped rules on the Employee create/edit screen
   (.employee-responsive-page .main-sec-title ...) during the 20/09/2026 mobile
   pass. It solves a problem EVERY screen has - a toolbar of six or seven
   buttons cannot sit beside the title on a narrow viewport - and this file
   already owns the band, so keeping a per-screen copy would have been the same
   drift the header above warns about. Moved here on Kamal's decision.

   WHY THIS IS A SECOND BREAKPOINT AND NOT FOLDED INTO THE 767 BLOCK ABOVE.
   They answer different questions and unifying them would have made something
   worse either way. The 767 block shrinks type and padding - pushing that up to
   991 would restyle every screen in the system at tablet width, which nobody
   asked for. Leaving the wrap at 767 would leave tablets (768-991) with the
   overflow this is here to fix, and a full Edit toolbar does not fit beside a
   title at 800px. So: typography at 767, layout at 991.

   NOTE this deliberately contradicts the ".actions is NOT given display:flex"
   note further up. That note is right on desktop, where flex would break
   Bootstrap's joined btn-group pill. Below 992 the buttons have to wrap onto
   their own lines, so the joined look is being given up ON PURPOSE - a wrapped
   float row overlaps instead of stacking. Desktop keeps the pill untouched.
   ============================================================================ */
@media (max-width: 991px) {
    .main-sec-title {
        align-items: stretch;
    }

    /* TWO MARKUP SHAPES, and the Employee screen's original rules only knew one
       of them - which is why they were DEAD CODE and that band never actually
       wrapped:
         A   <div class="actions btn-group"> ... </div>            one element
         B   <div class="actions"><div class="btn-group"> ... </div></div>
       Shape B is what the shared Edit toolbar renders (verified live on
       /hr/employee/Edit), and ".actions.btn-group" matches only shape A - so the
       20/09 rules matched nothing at all on the screen they were written for.
       Both are covered below. Kamal - 21/09/2026 */
    .main-sec-title .actions,
    .main-sec-title .actions .btn-group {
        display: flex !important;
        flex-wrap: wrap;
        float: none;
        gap: 6px;
        max-width: 100%;
    }

    /* float:none and the margin reset are what undo Bootstrap's
       ".btn-group > .btn { float:left }" and its "+ .btn { margin-left:-1px }"
       joining, which otherwise make the wrapped rows overlap by a pixel.
       Direct children only, so a .btn inside a dropdown menu in .actions is not
       caught. */
    .main-sec-title .actions > .btn,
    .main-sec-title .actions > .btn-group > .btn {
        float: none;
        margin: 0 !important;
        min-height: 44px;
    }
}