/* NIGHT 51 — Layout Enforcement Layer
 *
 * Lives in @layer enforcement (declared LAST in design-tokens.css).
 * Among named layers, this layer wins regardless of selector specificity.
 * No !important needed.
 *
 * Note: un-layered author CSS still beats layered CSS by spec, so this layer
 * primarily protects against future un-layered rules being added under a
 * named layer name like @layer components { .chart { margin-left: 0 } }.
 * For raw <hire-real-chart>, centering is enforced inside the Shadow DOM
 * itself (impermeable), so this layer is a redundancy net.
 */

@layer enforcement {

    /* ALL chart web components are centered. */
    hire-real-chart {
        display: block;
        width: 100%;
        max-width: var(--chart-max-width, 1120px);
        margin-left: auto;
        margin-right: auto;
    }

    /* Legacy chart containers (before Shadow DOM migration) */
    [data-chart],
    [data-chart-main],
    .chart-wrapper,
    .tv-lightweight-charts,
    .tradingview-widget-container,
    #tradingview-chart,
    [class*="chart-container"] {
        margin-left: auto;
        margin-right: auto;
        max-width: var(--chart-max-width, 1120px);
        width: 100%;
    }

    /* Content containers centered */
    .page-content,
    .section-content {
        max-width: var(--content-max-width, 1120px);
        margin-left: auto;
        margin-right: auto;
        padding-left: var(--space-lg, 24px);
        padding-right: var(--space-lg, 24px);
    }

    /* Employer cards must have minimum content height — no invisible 0-height
       cards. The plan also lists .employer-row but a strict 60px on rows
       would inflate dense data tables; rows are intentionally omitted from
       the height enforcer. */
    .employer-card,
    [data-employer-id]:not(tr):not(td) {
        min-height: 60px;
    }

    /* Empty states render a label, not an invisible empty div */
    .data-table tbody:empty::after,
    .employer-list:empty::after {
        content: "No data available";
        display: block;
        text-align: center;
        padding: var(--space-xl, 32px);
        color: var(--color-text-tertiary, #737373);
    }
}