/* ============================================================================
   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;
    }
}