/* ===========================================================================
   Page header — system wide
   ---------------------------------------------------------------------------
   Every page in the app (914 templates) includes `navigators.html` inside a
   dark slab: `bg-default text-theme_text_color h-[50px] rounded-md`, in eight
   slightly different flavours. It is a heavy, full-width black bar carrying
   only Back/Next, the page name, and one or two actions — and it sits directly
   under the breadcrumb bar, which already says where you are.

   Editing 914 templates is not the fix. Every variant wraps
   `.title-content-wrapper`, so one structural selector reaches all of them and
   turns the slab into a compact header.
   =========================================================================== */

:root {
    --ph-height: 40px;
    --ph-text: #101828;
    --ph-muted: #667085;
    --ph-border: #e4e7ec;
    --ph-hover: #f2f4f7;
}

/* the bar itself, whichever flavour of wrapper the template used */
div:has(> .title-content-wrapper) {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--ph-text) !important;
    height: auto !important;
    min-height: var(--ph-height);
    padding: 0 !important;
    margin-bottom: 10px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    gap: 12px;
}

/* the slab painted everything inside it white */
div:has(> .title-content-wrapper) .title-content-wrapper,
div:has(> .title-content-wrapper) .title-content-wrapper *,
div:has(> .title-content-wrapper) .info-view-wrapper * {
    color: var(--ph-text) !important;
}

div:has(> .title-content-wrapper) .module-name-title,
div:has(> .title-content-wrapper) .app-name-title {
    color: var(--ph-muted) !important;
}

/* --- Back / Next: small, quiet, icon-led --- */
.title-content-wrapper .back-forth-btns {
    width: auto !important;
    gap: 2px;
}

.title-content-wrapper .back-forth-btns button {
    width: auto !important;
    height: 28px !important;
    padding: 0 8px !important;
    margin-right: 0 !important;
    border-radius: 7px;
    color: var(--ph-muted) !important;
    font-size: 12px;
    white-space: nowrap;
}

.title-content-wrapper .back-forth-btns button:hover {
    background: var(--ph-hover);
    color: var(--ph-text) !important;
}

.title-content-wrapper .back-forth-btns .material-symbols-outlined {
    font-size: 17px !important;
}

/* --- the page name --- */
.title-content-wrapper .info-view-wrapper h3 {
    margin-right: 0 !important;
    font-size: 15px !important;
    font-weight: 600;
    letter-spacing: -0.005em;
}

.title-content-wrapper .info-view-wrapper .doc-status-wrapper {
    min-width: 0 !important;
    height: 22px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
}

.title-content-wrapper .info-view-wrapper .doc-status-text { font-size: 11px !important; }

/* --- actions living in the header --- */
div:has(> .title-content-wrapper) .btn,
div:has(> .title-content-wrapper) button.dropdown-toggle {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

/* the actions were fixed at 170px whatever the label */
div:has(> .title-content-wrapper) .btn {
    width: auto !important;
    min-width: 0 !important;
}

div:has(> .title-content-wrapper) .btn .material-symbols-outlined,
div:has(> .title-content-wrapper) button.dropdown-toggle .material-symbols-outlined {
    font-size: 16px !important;
    margin-right: 5px !important;
}

/* ---------------------------------------------------------------------------
   Action buttons in the header
   These were all drawn for the old dark slab: `bg-white/10` or `bg-white/20`
   for a translucent surface, and `text-theme_text_color` — which is white — for
   the label. On a light header that is white text on a white button. Give them
   an explicit treatment instead of inheriting one meant for a dark ground.
   --------------------------------------------------------------------------- */

/* Secondary actions: a real surface, readable label. */
div:has(> .title-content-wrapper) .update-action-btn,
div:has(> .title-content-wrapper) .print-action-btn,
div:has(> .title-content-wrapper) .form-action-btn,
div:has(> .title-content-wrapper) .cancel-action-btn {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #344054 !important;
    border: 1px solid var(--ph-border) !important;
    border-style: solid !important;
}

div:has(> .title-content-wrapper) .update-action-btn:hover,
div:has(> .title-content-wrapper) .print-action-btn:hover,
div:has(> .title-content-wrapper) .form-action-btn:hover,
div:has(> .title-content-wrapper) .cancel-action-btn:hover {
    background-color: var(--ph-hover) !important;
    border-color: #d0d5dd !important;
}

/* Primary actions: solid, in the company colour, white label. */
div:has(> .title-content-wrapper) .save-action-btn,
div:has(> .title-content-wrapper) .submit-action-btn,
div:has(> .title-content-wrapper) .new-action-btn {
    background-color: var(--ph-primary, #101828) !important;
    background-image: none !important;
    color: var(--ph-on-primary, #ffffff) !important;
    border: 1px solid transparent !important;
}

div:has(> .title-content-wrapper) .save-action-btn:hover,
div:has(> .title-content-wrapper) .submit-action-btn:hover,
div:has(> .title-content-wrapper) .new-action-btn:hover {
    filter: brightness(1.12);
}

/* Amend keeps its warning identity rather than reading as a primary action. */
div:has(> .title-content-wrapper) .amend-action-btn {
    background-color: #fffaf0 !important;
    color: #b54708 !important;
    border: 1px solid #f5c88f !important;
}

/* Whatever the button, its own label and icon follow the button's colour —
   several carry `text-theme_text_color` (white) from the dark-bar era. */
div:has(> .title-content-wrapper) .btn span,
div:has(> .title-content-wrapper) .btn i,
div:has(> .title-content-wrapper) button span,
div:has(> .title-content-wrapper) button i {
    color: inherit !important;
}

/* The dotted borders read as unfinished on a light ground. */
div:has(> .title-content-wrapper) .btn,
div:has(> .title-content-wrapper) button {
    border-style: solid !important;
}

/* ===========================================================================
   Form page shell
   ---------------------------------------------------------------------------
   A form page nests like this:

     #page-scroll-body           the app's only scroller
       div.mt-10.w-[96%]         40px top margin, 96% wide
         div.grid.grid-cols-4    a grid with nothing to lay out
           div.col-span-4
             div (header bar)
             div.main-content-wrapper
               div.content-group.new-form-view-content
                 div.intro-y
                   div.box       the card - already scrolls its own content

   None of those middle layers carry a height, so the card sized itself to
   whatever it happened to contain and stopped there: on a 950px screen the
   form ended at y=774 and left 176px of dead white below it, while its own
   content (865px) was cut off inside a 618px card.

   It is applied only to single-column forms - see the note below.
   Flatten the dead layers and let the card take the height that is actually
   free, so the form fills the page and scrolls inside itself rather than
   clipping. The page itself does not scroll - the card does.
   SCOPE - read before editing. Every rule below applies only to a SINGLE-COLUMN
   form page: one where nothing visible sits beside the form wrapper or any of
   its ancestors. Two-column templates - the form beside a side panel such as
   Files Data, Warehouse Summary Info, Industry Statistics, Ticket Stats or
   Mailing History - are left on their own grid layout. Flattening those
   collapsed the panel into the form's column, which took the height: a sweep of
   585 forms found 46 distorted this way, some to 0px. In shallower templates
   the depth-based flatten also caught .main-content-wrapper itself.
   The flatten therefore targets only the wrapper's ANCESTORS
   (`:has(.main-content-wrapper)`), never a sibling and never the wrapper.
   A page that does not qualify simply keeps the layout it had before.
   =========================================================================== */

/* Applied only under `#page-scroll-body.form-shell-fill`, which
   static/js/page/form_shell.js sets when the open form is SINGLE-COLUMN - nothing
   visible beside the form wrapper's ancestors. Two-column templates (a form
   beside a side panel) never get the class and keep their own layout.

   History: these rules used to be keyed on
   `#page-scroll-body:has(.main-content-wrapper > .new-form-view-content:not(.hidden))`
   and applied to every form. That distorted 45 of 491 forms (side panels
   dragged into the column, wrappers flattened to 0px, hidden groups forced
   visible). Telling single-column from two-column needs :has() inside :has(),
   which CSS forbids - so it is decided in JS and marked with a class.

   Two rules keep it safe even under the class:
   - only the wrapper's ANCESTORS are flattened (`:has(.main-content-wrapper)`),
     never a sibling and never .main-content-wrapper itself;
   - every display override ends in `:not(.hidden)`, because this selector is
     anchored on an id and would otherwise outrank Tailwind's `.hidden`. */

#page-scroll-body.form-shell-fill {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* the outer wrapper the template owns */
#page-scroll-body.form-shell-fill > div:has(.main-content-wrapper) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 16px 24px 12px !important;
}

/* the grid and its cell exist only to wrap */
#page-scroll-body.form-shell-fill > div > div:has(.main-content-wrapper),
#page-scroll-body.form-shell-fill > div > div > div:has(.main-content-wrapper) {
    display: contents !important;
}

#page-scroll-body.form-shell-fill .main-content-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
}

#page-scroll-body.form-shell-fill .main-content-wrapper > .new-form-view-content:not(.hidden),
#page-scroll-body.form-shell-fill .main-content-wrapper > .new-form-view-content:not(.hidden) > div:not(.hidden) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* the card takes the remaining height and owns the scrolling */
#page-scroll-body.form-shell-fill .main-content-wrapper > .new-form-view-content:not(.hidden) .box {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    margin-top: 0 !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable;
}

/* The form "More" menu was `bg-white/10 text-theme_text_color` - a 10%-opacity
   white ground under white text, which on the light header is white on white.
   It is a primary action, so it takes the company colour like Save/Submit. */
.more-actions-btn,
div:has(> .title-content-wrapper) .more-actions-btn {
    background-color: var(--ph-primary, #101828) !important;
    background-image: none !important;
    color: var(--ph-on-primary, #ffffff) !important;
    border: 1px solid transparent !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
}

.more-actions-btn:hover { filter: brightness(1.12); }
.more-actions-btn .material-symbols-outlined { font-size: 16px !important; color: inherit !important; }
.more-actions-btn span { color: inherit !important; }