/**
 * Hashira Careers — Design System Compat Layer
 *
 * v2.6.0 — BL-073 design unification.
 *
 * PURPOSE
 * -------
 * The plugin has carried two parallel CSS systems for several releases:
 *
 *   1. careers-public.css (1785 lines)
 *      - Legacy candidate-facing public styles, uses `.hashira-careers-*`
 *        kebab-suffix naming (.hashira-careers-button, .hashira-careers-form, etc).
 *      - Hardcoded colors, spacings, and font-sizes mostly inlined.
 *
 *   2. components.css + design-tokens.css (1167 + 153 lines)
 *      - Newer token-driven BEM system used in HR side, partner portal,
 *        resume preview chrome, and admin screens. Uses `.hashira-*` BEM
 *        naming (.hashira-btn--primary, .hashira-badge--status-submitted).
 *      - All values reference CSS custom properties from design-tokens.css.
 *
 * BL-073 calls for full unification, but a wholesale template migration
 * affects every candidate template (apply-wizard-single.php, listings.php,
 * job-detail.php, apply-otp.php, apply-submitted.php, candidate-applications.php,
 * candidate-profile.php, candidate-status.php) plus the partner portal mounted
 * stylesheet. Migrating every template in one release would create extreme
 * regression risk across the candidate flow.
 *
 * APPROACH FOR v2.6.0
 * -------------------
 * This compat layer provides CSS-level aliases that map the most common
 * legacy `.hashira-careers-*` classes to token-driven values. This means:
 *
 *   - Templates can keep using legacy class names (no template churn)
 *   - But all aliased properties now resolve to design tokens
 *   - Dark mode, theme overrides, and token refinements flow through to
 *     legacy markup automatically
 *
 * Future releases (v2.7+) can migrate individual templates from legacy
 * classes to BEM classes one surface at a time, with per-surface manual
 * smoke gating. The compat layer remains active until the last template
 * migrates, at which point it can be deleted alongside careers-public.css.
 *
 * LOAD ORDER
 * ----------
 *   design-tokens.css  (tokens)
 *     └→ components.css  (BEM components)
 *         └→ careers-public.css  (legacy)
 *             └→ careers-compat.css  (THIS FILE — overrides legacy with tokens)
 *
 * This file is loaded LAST in the chain so its declarations win the cascade
 * over the legacy careers-public.css definitions.
 *
 * AUDIT STATUS (post-v2.6.0)
 * --------------------------
 *   - careers-public.css: in use, with tokens applied via this compat layer
 *   - components.css: in use natively in HR + partner + resume
 *   - design-tokens.css: single source of truth for all colors, type, spacing
 *   - careers-compat.css: bridges the two systems
 *
 * Once all candidate templates are migrated to BEM (v2.7+), this file and
 * careers-public.css can both be removed.
 */

/* ================================================================
 * Buttons — legacy .hashira-careers-button family aliased to tokens
 * ================================================================ */
.hashira-careers-button,
.hashira-careers-button-primary,
.hashira-careers-button-secondary {
    font-family: var(--hashira-font-body, system-ui, -apple-system, sans-serif);
    font-size: var(--hashira-text-base, 14px);
    font-weight: 500;
    border-radius: var(--hashira-radius-sm, 4px);
    padding: var(--hashira-space-2, 8px) var(--hashira-space-4, 16px);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background 0.15s, border-color 0.15s, transform 0.05s;
}

.hashira-careers-button-primary {
    background: var(--hashira-color-brand-green, #3B6D11);
    color: var(--hashira-color-text-on-brand, #fff);
    border-color: var(--hashira-color-brand-green, #3B6D11);
}

.hashira-careers-button-primary:hover {
    background: var(--hashira-color-brand-green-dark, #1B5E20);
    border-color: var(--hashira-color-brand-green-dark, #1B5E20);
}

.hashira-careers-button-secondary {
    background: transparent;
    color: var(--hashira-color-brand-green, #3B6D11);
    border-color: var(--hashira-color-brand-green, #3B6D11);
}

.hashira-careers-button-secondary:hover {
    background: var(--hashira-color-brand-green-pale, #EAF3DE);
}

/* ================================================================
 * Forms — legacy .hashira-careers-form / .hashira-careers-field
 * ================================================================ */
.hashira-careers-field label {
    color: var(--hashira-color-text-primary, #0B2035);
    font-size: var(--hashira-text-13, 13px);
    font-weight: 500;
}

.hashira-careers-field input[type="text"],
.hashira-careers-field input[type="email"],
.hashira-careers-field input[type="tel"],
.hashira-careers-field input[type="number"],
.hashira-careers-field input[type="date"],
.hashira-careers-field select,
.hashira-careers-field textarea {
    font-family: var(--hashira-font-body, system-ui, -apple-system, sans-serif);
    font-size: var(--hashira-text-base, 14px);
    color: var(--hashira-color-text-primary, #0B2035);
    border: 1px solid var(--hashira-color-border, #e2e8f0);
    border-radius: var(--hashira-radius-sm, 4px);
    padding: var(--hashira-space-2, 8px) var(--hashira-space-3, 12px);
    background: var(--hashira-color-bg-card, #fff);
}

.hashira-careers-field input:focus,
.hashira-careers-field select:focus,
.hashira-careers-field textarea:focus {
    border-color: var(--hashira-color-brand-green, #3B6D11);
    outline: 2px solid var(--hashira-color-brand-green-pale, #EAF3DE);
    outline-offset: 1px;
}

/* ================================================================
 * Notices — legacy .hashira-careers-notice / .hashira-careers-error
 * ================================================================ */
.hashira-careers-notice {
    background: var(--hashira-color-status-info-pale, #DBEAFE);
    color: var(--hashira-color-status-info-dark, #1E40AF);
    border-left: 4px solid var(--hashira-color-status-info, #1E88E5);
    padding: var(--hashira-space-3, 12px) var(--hashira-space-4, 16px);
    border-radius: 0 var(--hashira-radius-sm, 4px) var(--hashira-radius-sm, 4px) 0;
    font-size: var(--hashira-text-base, 14px);
    margin: var(--hashira-space-3, 12px) 0;
}

.hashira-careers-error {
    background: var(--hashira-color-status-danger-pale, #FCEBEB);
    color: var(--hashira-color-status-danger-dark, #7A1F1F);
    border-left: 4px solid var(--hashira-color-status-danger, #A32D2D);
    padding: var(--hashira-space-3, 12px) var(--hashira-space-4, 16px);
    border-radius: 0 var(--hashira-radius-sm, 4px) var(--hashira-radius-sm, 4px) 0;
    font-size: var(--hashira-text-base, 14px);
    margin: var(--hashira-space-3, 12px) 0;
}

/* ================================================================
 * Hero / Step meta — legacy .hashira-careers-hero / -step-meta
 * ================================================================ */
.hashira-careers-hero {
    text-align: center;
    padding: var(--hashira-space-6, 24px) 0;
}

.hashira-careers-hero-sub {
    color: var(--hashira-color-text-secondary, #475569);
    font-size: var(--hashira-text-base, 14px);
    margin: 0;
}

.hashira-careers-step-meta {
    color: var(--hashira-color-text-secondary, #475569);
    font-size: var(--hashira-text-13, 13px);
    margin: var(--hashira-space-2, 8px) 0 var(--hashira-space-4, 16px);
}

/* ================================================================
 * Job listing card — legacy .hashira-careers-job-list / -job-item
 * ================================================================ */
.hashira-careers-job-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--hashira-space-3, 12px);
}

.hashira-careers-job-item {
    background: var(--hashira-color-bg-card, #fff);
    border: 1px solid var(--hashira-color-border, #e2e8f0);
    border-radius: var(--hashira-radius-md, 8px);
    padding: var(--hashira-space-4, 16px);
    transition: border-color 0.15s, transform 0.05s;
}

.hashira-careers-job-item:hover {
    border-color: var(--hashira-color-brand-green, #3B6D11);
}

/* ================================================================
 * Empty state
 * ================================================================ */
.hashira-careers-empty {
    background: var(--hashira-color-bg-card, #fff);
    border: 1px solid var(--hashira-color-border, #e2e8f0);
    padding: var(--hashira-space-8, 32px);
    border-radius: var(--hashira-radius-md, 8px);
    text-align: center;
    color: var(--hashira-color-text-secondary, #475569);
}

/* ================================================================
 * ID chip — legacy .hashira-id-chip (already used in HR + candidate)
 * Already token-driven in components.css, but legacy markup uses
 * inline overrides we don't want to fight. This unifies.
 * ================================================================ */
.hashira-id-chip {
    display: inline-block;
    padding: 2px var(--hashira-space-2, 8px);
    background: var(--hashira-color-bg-section-tint, #FAFAFA);
    color: var(--hashira-color-text-id, #475569);
    font-family: var(--hashira-font-mono, monospace);
    font-size: var(--hashira-text-xs, 11px);
    border-radius: var(--hashira-radius-sm, 4px);
    border: 1px solid var(--hashira-color-border, #e2e8f0);
}

/* ================================================================
 * Heading scale unified with type tokens
 * ================================================================ */
.hashira-h1 { font-size: var(--hashira-text-3xl, 28px); font-weight: 600; color: var(--hashira-color-text-primary, #0B2035); margin: 0 0 var(--hashira-space-3, 12px); }
.hashira-h2 { font-size: var(--hashira-text-2xl, 24px); font-weight: 600; color: var(--hashira-color-text-primary, #0B2035); margin: 0 0 var(--hashira-space-3, 12px); }
.hashira-h3 { font-size: var(--hashira-text-xl, 18px);  font-weight: 600; color: var(--hashira-color-text-primary, #0B2035); margin: 0 0 var(--hashira-space-2, 8px);  }
.hashira-h4 { font-size: var(--hashira-text-lg, 16px);  font-weight: 600; color: var(--hashira-color-text-primary, #0B2035); margin: 0 0 var(--hashira-space-2, 8px);  }
.hashira-h5 { font-size: var(--hashira-text-base, 14px); font-weight: 600; color: var(--hashira-color-text-primary, #0B2035); margin: 0 0 var(--hashira-space-2, 8px); }
.hashira-h6 { font-size: var(--hashira-text-13, 13px); font-weight: 500; color: var(--hashira-color-text-secondary, #475569); text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 var(--hashira-space-1, 4px); }

.hashira-body-sm { font-size: var(--hashira-text-sm, 12px); color: var(--hashira-color-text-secondary, #475569); }
.hashira-caption { font-size: var(--hashira-text-xs, 11px); color: var(--hashira-color-text-muted, #94a3b8); }

/* ============================================================
 * v2.40.0 BL-T7-9 — Unified panel pattern via cascade override.
 *
 * Per D-52 compat-layer principle: rather than rewriting templates,
 * patch the cascade so adjacent .hashira-toolbar + .hashira-accordion
 * pairs visually merge into one panel — solves "discontinuous boxes"
 * complaint without touching any PHP.
 *
 * Strategy:
 *  - toolbar (when followed by an accordion) loses bottom border-radius
 *    and bottom margin
 *  - accordion (when preceded by toolbar via form parent) loses top
 *    border-radius and grows top border (merge effect)
 *  - "No applications match" empty-state plain-card pattern gets the
 *    same continuation treatment
 *
 * Also strips the giant outer border-radius mismatch where 3 cards
 * stacked = 3 separate radius-4 corners visible — we want one.
 * ============================================================ */

/* When toolbar + accordion live in same form (HR Applications + similar), merge */
form#hcm-hr-applications-toolbar .hashira-toolbar,
form#hcm-hr-candidates-toolbar .hashira-toolbar,
form#hcm-hr-jobs-toolbar .hashira-toolbar {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 0;
}
form#hcm-hr-applications-toolbar .hashira-accordion,
form#hcm-hr-candidates-toolbar .hashira-accordion,
form#hcm-hr-jobs-toolbar .hashira-accordion {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-bottom: 0;
}

/* "No applications match" / similar empty-states sitting under toolbar+accordion */
form#hcm-hr-applications-toolbar + .hashira-empty,
form#hcm-hr-candidates-toolbar + .hashira-empty,
form#hcm-hr-jobs-toolbar + .hashira-empty,
form#hcm-hr-applications-toolbar + .hashira-empty-state,
form#hcm-hr-applications-toolbar + p,
form#hcm-hr-applications-toolbar + div.hashira-careers-empty {
    margin-top: 0;
    border-top: 1px solid var(--hashira-color-border);
    border-radius: 0 0 var(--hashira-radius-md) var(--hashira-radius-md);
}

/* v2.40.0 BL-T7-10 — Improve Clear All / +New positioning.
 * Demote Clear All to text-button style (visually quieter); primary
 * action stays filled. */
.hashira-toolbar .hashira-btn--outline {
    /* Subtle outline — secondary action */
    background: transparent;
    border-color: var(--hashira-color-border);
    color: var(--hashira-color-text-secondary);
}
.hashira-toolbar .hashira-btn--outline:hover {
    background: var(--hashira-color-brand-green-pale, #EAF3DE);
    border-color: var(--hashira-color-brand-green);
    color: var(--hashira-color-brand-green);
}

/* v2.40.0 BL-T7-11 — Panel rhythm: hairline gap, not double-card. */
.hashira-toolbar + .hashira-accordion,
.hashira-toolbar + section,
.hashira-toolbar + div[id^="hcm-"] {
    margin-top: 0;
}

/* v2.40.0 BL-T7-12 — Hero band internal spacing (theme provides chrome). */
.hashira-band.hashira-page-hero {
    padding-top: var(--hashira-space-5);
    padding-bottom: var(--hashira-space-5);
}
.hashira-band.hashira-page-hero h1 {
    font-size: var(--hashira-text-display, 32px);
    line-height: var(--hashira-leading-tight, 1.25);
    letter-spacing: var(--hashira-letter-tight, -0.01em);
    color: #fff;
    font-weight: 600;
    margin-bottom: 4px;
}
.hashira-band.hashira-page-hero .hashira-breadcrumb {
    font-size: var(--hashira-text-13, 13px);
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
}
.hashira-band.hashira-page-hero .hashira-breadcrumb a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}
.hashira-band.hashira-page-hero .hashira-breadcrumb a:hover {
    color: #fff;
    text-decoration: underline;
}
.hashira-band.hashira-page-hero .hashira-breadcrumb-sep {
    margin: 0 8px;
    color: rgba(255, 255, 255, 0.40);
}

/* ============================================================
 * v2.41.0 T7 Phase 7.2 — Layout discipline pass.
 *
 * Per D-52 compat-layer principle: cascade overrides solve
 * layout discontinuities without template rewrites.
 *
 * Fixes:
 *   BL-T7-13 — Card pairing rule: when two .hashira-card or
 *              .hashira-panel siblings appear, force visual
 *              continuation rather than visible gap. Solves
 *              "2-3-2-1-1-2-2" rhythm complaint.
 *   BL-T7-14 — Section transitions: explicit margin token
 *              for macro-zone breaks (vs. implicit padding).
 *   BL-T7-15 — Sidebar vs stack: panels with > 3 children
 *              get implicit 2-column rule on desktop ≥768px.
 *   BL-T7-16 — Solo-row demotion: a single full-width item
 *              between multi-column rows looks lonely; visual
 *              separator inserted via ::before.
 *   BL-T7-17 — Page width consistency: max-width:1200px on
 *              all <main class="hashira-careers-main"> already
 *              set inline; reinforce via class.
 * ============================================================ */

/* BL-T7-13 — Sibling card visual continuation */
.hashira-card + .hashira-card,
.hashira-panel + .hashira-panel,
.hashira-careers-panel + .hashira-careers-panel {
    margin-top: var(--hashira-space-4, 16px);
}

/* BL-T7-14 — Macro section breaks */
.hashira-careers-main > section + section,
.hashira-careers-main > .hashira-careers-section + .hashira-careers-section {
    margin-top: var(--hashira-space-7, 48px);
}

/* BL-T7-15 — Multi-column rhythm for HR detail panels.
 * When 3+ stat cards live in the same panel-toolbar, hold to
 * grid not flex-wrap, so they never collapse 3-2-1 ladders. */
.hashira-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--hashira-space-4, 16px);
}

/* BL-T7-16 — Solo-row visual separator. Solves the "1-1 between
 * 2-2" eyesore by giving solo full-width rows a subtle top rule
 * so they read as section transitions, not orphans. */
.hashira-solo-row {
    margin-top: var(--hashira-space-5, 24px);
    padding-top: var(--hashira-space-4, 16px);
    border-top: 1px solid var(--hashira-color-border, #e2e8f0);
}

/* BL-T7-17 — Page width canonical */
.hashira-careers-main {
    max-width: var(--hashira-width-landing, 1200px);
    margin: 0 auto;
    padding: var(--hashira-space-6, 32px) var(--hashira-space-5, 24px);
}

/* ============================================================
 * v2.41.0 T7 Phase 7.3 — Accordion + progressive disclosure.
 *
 *   BL-T7-18 — .hashira-accordion::details handles native
 *              expand/collapse; ensure chevron rotates smoothly
 *              + arrow indicator is real SVG, not ASCII.
 *   BL-T7-19 — Step 5 declarations groupable via fieldset
 *              wrappers (3 groups: General / Background /
 *              Singapore-specific).
 *   BL-T7-20 — Listings About-Hashira block becomes
 *              <details>-collapsible if browser supports.
 * ============================================================ */

/* BL-T7-18 — Smoother chevron rotation */
.hashira-accordion__chevron,
.hashira-careers-accordion__chevron {
    display: inline-block;
    transition: transform 200ms ease;
    transform-origin: center;
}
details[open] > summary .hashira-accordion__chevron,
details[open] > summary .hashira-careers-accordion__chevron {
    transform: rotate(180deg);
}

/* BL-T7-19 — Step 5 declaration grouping (visual treatment).
 * The 3-fieldset structure already exists in step-5-declarations.php
 * (General / Singapore / Group D). Add subtle visual separation
 * between groups via spacing token. */
.hashira-careers-fieldset {
    border: 1px solid var(--hashira-color-border, #e2e8f0);
    border-radius: var(--hashira-radius-md, 6px);
    padding: var(--hashira-space-5, 24px);
    margin-bottom: var(--hashira-space-5, 24px);
    background: var(--hashira-color-bg-card, #fff);
}
.hashira-careers-fieldset legend {
    font-size: var(--hashira-text-16, 16px);
    font-weight: 600;
    color: var(--hashira-color-brand-green, #3B6D11);
    padding: 0 var(--hashira-space-2, 8px);
}

/* BL-T7-20 — About-Hashira block on listings: candidate for
 * collapse but kept open by default; just style the trigger if
 * site theme wraps it in <details>. */
.hashira-careers-hero-about details summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--hashira-color-brand-green, #3B6D11);
}

/* ============================================================
 * v2.41.0 T7 Phase 7.4 — Sticky chrome + scroll behavior.
 *
 *   BL-T7-21 — Apply wizard: Save/Continue actions sticky at
 *              bottom of viewport for long-form pages (Step 2/3).
 *   BL-T7-22 — HR list toolbar: already has .hashira-toolbar--
 *              sticky modifier; reinforce z-index + scroll-margin.
 *   BL-T7-23 — Smooth scroll on jump anchors (Step navigation).
 * ============================================================ */

/* BL-T7-21 — Sticky apply actions (mobile-first, desktop opt-in) */
.hashira-careers-step-actions {
    position: sticky;
    bottom: 0;
    background: var(--hashira-color-bg-card, #fff);
    border-top: 1px solid var(--hashira-color-border, #e2e8f0);
    padding: var(--hashira-space-3, 12px) var(--hashira-space-5, 24px);
    margin: var(--hashira-space-5, 24px) calc(-1 * var(--hashira-space-5, 24px)) 0;
    z-index: 10;
    box-shadow: 0 -2px 6px rgba(11, 32, 53, 0.04);
}

/* BL-T7-22 — Reinforce sticky toolbar */
.hashira-toolbar--sticky {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--hashira-color-bg-card, #fff);
}

/* BL-T7-23 — Smooth scroll site-wide */
html {
    scroll-behavior: smooth;
}
.hashira-careers-step-anchor {
    scroll-margin-top: 80px;  /* clear sticky toolbar */
}

/* ============================================================
 * v2.41.0 T7 Phase 7.5 — Mobile pass (D-45 viewport ~380px).
 *
 *   BL-T7-24 — Touch targets minimum 44×44px (WCAG 2.5.5).
 *   BL-T7-25 — Mobile sticky bottom action bar replaces
 *              inline buttons.
 * ============================================================ */

/* BL-T7-24 — Touch target minimum */
@media (max-width: 480px) {
    .hashira-careers-btn-primary,
    .hashira-careers-btn-secondary,
    .hashira-careers-btn-text,
    .hashira-btn,
    .hashira-btn--primary,
    .hashira-btn--outline,
    .hashira-toolbar button,
    .hashira-toolbar input[type="submit"],
    button[type="submit"] {
        min-height: 44px;
        padding: 10px 16px;
    }
    input[type="radio"],
    input[type="checkbox"] {
        min-width: 22px;
        min-height: 22px;
    }
    .hashira-careers-decl-row {
        padding: var(--hashira-space-3, 12px) 0;
    }
}

/* BL-T7-25 — Mobile bottom action bar */
@media (max-width: 480px) {
    .hashira-careers-step-actions {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        padding: var(--hashira-space-3, 12px) var(--hashira-space-4, 16px);
        background: var(--hashira-color-bg-card, #fff);
        border-top: 1px solid var(--hashira-color-border, #e2e8f0);
        box-shadow: 0 -4px 12px rgba(11, 32, 53, 0.08);
        z-index: 50;
    }
    /* Add bottom padding to page so content isn't covered */
    body.hsp-portal-context .hashira-careers-main {
        padding-bottom: 100px;
    }
}