/* ===== rc_leave_html (HTML form, scoped) =====
   Loaded eagerly from anvil.yaml native_deps.head_html.
   The form's rules and the styling a template may not hold as inline style= attributes live here.

   Scoped :where(.rc-leave), the private root class, never :where(.rc-section): .rc-section is
   declared in rotacloud_analytics_html and worn by five section roots, so scoping on it would
   reach every section on the page and be no scope at all.

   NO height: 100% RULE FOR THE CHARTS HERE: the mount point's child is an anvil-slot element with
   the child form's root inside it, so a child combinator would not match. Each child carries
   height: 100% on its own root class (rc_leave_trends_html.css,
   rc_leave_allowance_html.css). Its selector is not written out here: the shared-CSS tests count
   declaration sites by regex across the whole file, comments included.

   The .rc-leave-grid-3 rules below are dead — no element in the tree carries that class. */

:where(.rc-leave) .rc-leave-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: stretch;
}

:where(.rc-leave) .rc-leave-grid > div {
    display: flex;
    flex-direction: column;
}

:where(.rc-leave) .rc-leave-grid > div > .rc-component-container {
    flex: 1;
}

:where(.rc-leave) .rc-leave-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* From <div style="margin-top:1.5rem;"> on the full-width upcoming block. */
:where(.rc-leave) .rc-leave-upcoming-block {
    margin-top: 1.5rem;
}

/* From style="color:var(--px-chart-cyan);" on the upcoming title. Carries a second class on
   purpose: this asset loads from <head> and the parent's own colour rule for the shared title
   class loads after it, so a single-class rule here would lose an order tie the inline attribute
   wins today. The doubled class buys the point of specificity back. The parent's selector is not
   written out here: the shared-CSS tests count declaration sites by regex, comments included. */
:where(.rc-leave) .rc-chart-title.rc-leave-upcoming-title {
    color: color-mix(in srgb, var(--px-chart-cyan) 65%, var(--px-text-primary));
}

/* From style="margin-right:4px;" on the title's svg. The svg carries no class of its own — the
   designer assigns element.className, which is read-only on SVGElement — so the span wraps it and
   line-height: 0 makes the span's box equal the svg's. */
:where(.rc-leave) .rc-leave-upcoming-icon {
    line-height: 0;
    margin-right: 4px;
}

/* From style="height:280px;" on the upcoming mount point. */
:where(.rc-leave) .rc-leave-upcoming-slot {
    height: 280px;
}

@media (max-width: 1200px) {
    :where(.rc-leave) .rc-leave-grid-3 {
        grid-template-columns: 1fr 1fr;
    }

    :where(.rc-leave) .rc-leave-grid-3 > div:last-child {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    :where(.rc-leave) .rc-leave-grid {
        grid-template-columns: 1fr;
    }

    :where(.rc-leave) .rc-leave-grid-3 {
        grid-template-columns: 1fr;
    }

    :where(.rc-leave) .rc-leave-grid-3 > div:last-child {
        grid-column: span 1;
    }
}