/* ==========================================================================
   PESO — Global Button Design System
   One reusable button language for jobseeker, employer, admin, helpdesk,
   forms, modals and every other surface. Loaded last by config/session.php.

   Canonical API:
     <button class="pf-btn pf-btn--primary">…</button>
     variants:  --primary  --secondary  --outline  --danger  --ghost
     sizes:     --sm  (default)  --lg
     modifiers: --block (full width)  --icon (square, icon only)
     states:    [disabled] / .is-disabled / [aria-disabled="true"] / .is-loading

   Compatibility layer: the same look is retro-fitted onto the existing
   class families (.btn / .btn-primary…, .peso-btn…, .cc-button…, .support-*,
   .auth-submit) so pages need no markup changes.
   ========================================================================== */

:root {
    --pf-btn-h: 42px;
    --pf-btn-h-sm: 36px;
    --pf-btn-h-lg: 50px;
    --pf-btn-pad-x: 20px;
    --pf-btn-pad-x-sm: 14px;
    --pf-btn-pad-x-lg: 28px;
    --pf-btn-radius: 12px;
    --pf-btn-gap: 9px;
    --pf-btn-font: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --pf-btn-fs: 14px;
    --pf-btn-fs-sm: 13px;
    --pf-btn-fs-lg: 15px;
    --pf-btn-fw: 650;
    --pf-btn-icon: 15px;
    --pf-btn-ease: cubic-bezier(.22, 1, .36, 1);

    /* Brand palette (PESO emerald + gold) */
    --pf-green-700: #0a6b39;
    --pf-green-600: #0a8f4d;
    --pf-green-500: #12a15a;
    --pf-green-050: rgba(10, 143, 77, .1);
    --pf-gold: #d9a441;

    /* Semantic surfaces — light */
    --pf-primary-bg: linear-gradient(180deg, #12a15a 0%, #0a7d42 100%);
    --pf-primary-bg-hover: linear-gradient(180deg, #14ac61 0%, #0a8a49 100%);
    --pf-primary-fg: #ffffff;
    --pf-primary-ring: rgba(10, 143, 77, .38);
    --pf-primary-shadow: 0 8px 20px -8px rgba(10, 125, 66, .5);

    --pf-secondary-bg: #ffffff;
    --pf-secondary-bg-hover: #f2f7f4;
    --pf-secondary-fg: #143026;
    --pf-secondary-border: rgba(16, 48, 38, .18);
    --pf-secondary-border-hover: rgba(10, 143, 77, .5);

    --pf-outline-fg: #0a6b39;
    --pf-outline-border: rgba(10, 143, 77, .45);
    --pf-outline-bg-hover: rgba(10, 143, 77, .09);

    --pf-danger-bg: linear-gradient(180deg, #e5484d 0%, #c5343a 100%);
    --pf-danger-bg-hover: linear-gradient(180deg, #ef5257 0%, #cf3a40 100%);
    --pf-danger-fg: #ffffff;
    --pf-danger-ring: rgba(197, 52, 58, .4);
    --pf-danger-outline-fg: #c5343a;
    --pf-danger-outline-border: rgba(197, 52, 58, .45);

    --pf-ghost-fg: #143026;
    --pf-ghost-bg-hover: rgba(16, 48, 38, .07);

    --pf-focus-ring: 0 0 0 3px rgba(10, 143, 77, .32);
    --pf-disabled-op: .5;
}

/* Dark theme tokens — cover every dark-mode signal used in the system */
:root:is([data-theme="dark"], [data-jsa-theme="dark"]) ,
html[data-theme="dark"] body,
html[data-jsa-theme="dark"] body,
body.dark-mode,
body.jsa-dark,
body:not(.light).ef-site,
body:not(.light)[data-peso-page^="admin-"] {
    --pf-primary-bg: linear-gradient(180deg, #16b866 0%, #0c9350 100%);
    --pf-primary-bg-hover: linear-gradient(180deg, #1ac972 0%, #0fa259 100%);
    /* Same medium-toned green gradient as light mode (which correctly pairs
       it with white text below) — near-black here was a copy-paste/contrast
       mistake, not a deliberate "bright fill needs dark text" case. This one
       token feeds every .btn/.btn-primary-style button sitewide in dark
       mode (see peso-buttons.css:258-259) — recurring bug shape found
       repeatedly today on individual buttons (.support-submit, employer
       .btn) via page-local overrides; fixing it here at the source instead
       of patching each button again. */
    --pf-primary-fg: #ffffff;
    --pf-primary-ring: rgba(28, 200, 120, .4);
    --pf-primary-shadow: 0 8px 22px -8px rgba(6, 60, 34, .7);

    --pf-secondary-bg: rgba(255, 255, 255, .06);
    --pf-secondary-bg-hover: rgba(255, 255, 255, .12);
    --pf-secondary-fg: #eaf3ee;
    --pf-secondary-border: rgba(255, 255, 255, .16);
    --pf-secondary-border-hover: rgba(40, 220, 130, .55);

    --pf-outline-fg: #5ce49b;
    --pf-outline-border: rgba(60, 220, 140, .5);
    --pf-outline-bg-hover: rgba(60, 220, 140, .14);

    --pf-danger-bg: linear-gradient(180deg, #f2555a 0%, #d23c42 100%);
    --pf-danger-bg-hover: linear-gradient(180deg, #ff5f64 0%, #dc4349 100%);
    --pf-danger-outline-fg: #ff8a8d;
    --pf-danger-outline-border: rgba(255, 120, 124, .5);

    --pf-ghost-fg: #eaf3ee;
    --pf-ghost-bg-hover: rgba(255, 255, 255, .09);

    --pf-focus-ring: 0 0 0 3px rgba(40, 220, 130, .32);
}

/* --------------------------------------------------------------------------
   1. Base — shape, typography, alignment, states (forced everywhere)
   -------------------------------------------------------------------------- */
html body :is(
    .pf-btn,
    .btn, .btn-primary, .btn-secondary, .btn-outline, .btn-danger, .btn-ghost,
    .peso-btn, .support-submit, .support-back,
    .cc-button, .cc-button-primary, .cc-button-ghost,
    .auth-submit, .auth-btn
) {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pf-btn-gap);
    box-sizing: border-box;
    min-height: var(--pf-btn-h);
    padding: 0 var(--pf-btn-pad-x);
    border-radius: var(--pf-btn-radius) !important;
    border: 1px solid transparent;
    font-family: var(--pf-btn-font) !important;
    font-size: var(--pf-btn-fs) !important;
    font-weight: var(--pf-btn-fw) !important;
    line-height: 1 !important;
    letter-spacing: .005em;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: transform .16s var(--pf-btn-ease),
                box-shadow .18s var(--pf-btn-ease),
                background-color .18s var(--pf-btn-ease),
                background-image .18s var(--pf-btn-ease),
                border-color .18s var(--pf-btn-ease),
                color .18s var(--pf-btn-ease),
                filter .18s var(--pf-btn-ease);
}

html body :is(.pf-btn, .btn, .peso-btn, .cc-button, .auth-submit, .support-submit, .support-back) > i,
html body :is(.pf-btn, .btn, .peso-btn, .cc-button, .auth-submit, .support-submit, .support-back) > svg,
html body :is(.pf-btn, .btn, .peso-btn, .cc-button, .auth-submit, .support-submit, .support-back) > .fa,
html body :is(.pf-btn, .btn, .peso-btn, .cc-button, .auth-submit, .support-submit, .support-back) > [class*="fa-"] {
    font-size: var(--pf-btn-icon);
    width: auto;
    height: auto;
    flex: 0 0 auto;
    line-height: 0;
}
html body :is(.pf-btn, .btn, .peso-btn, .cc-button) > svg {
    width: 1.05em;
    height: 1.05em;
}

/* Hover / active / focus — universal feel */
@media (hover: hover) {
    html body :is(.pf-btn, .btn, .btn-primary, .btn-secondary, .btn-outline, .btn-danger,
                  .peso-btn, .cc-button, .cc-button-primary, .auth-submit,
                  .support-submit):not([disabled]):not(.is-disabled):not([aria-disabled="true"]):hover {
        transform: translateY(-1px);
    }
}
html body :is(.pf-btn, .btn, .btn-primary, .btn-secondary, .btn-outline, .btn-danger,
              .peso-btn, .cc-button, .cc-button-primary, .auth-submit,
              .support-submit):not([disabled]):not(.is-disabled):active {
    transform: translateY(0) scale(.985);
}
html body :is(.pf-btn, .btn, .btn-primary, .btn-secondary, .btn-outline, .btn-danger,
              .peso-btn, .cc-button, .auth-submit, .support-submit, .support-back):focus-visible {
    outline: none;
    box-shadow: var(--pf-focus-ring);
}

/* Disabled */
html body :is(.pf-btn, .btn, .btn-primary, .btn-secondary, .btn-outline, .btn-danger,
              .peso-btn, .cc-button, .auth-submit, .support-submit, .support-back):is([disabled], .is-disabled, [aria-disabled="true"]) {
    opacity: var(--pf-disabled-op);
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
}

/* Loading — .is-loading hides the label and shows a spinner */
html body :is(.pf-btn, .btn, .peso-btn, .cc-button, .auth-submit, .support-submit).is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
html body :is(.pf-btn, .btn, .peso-btn, .cc-button, .auth-submit, .support-submit).is-loading > * {
    visibility: hidden;
}
html body :is(.pf-btn, .btn, .peso-btn, .cc-button, .auth-submit, .support-submit).is-loading::after {
    content: "";
    position: absolute;
    width: 1.05em;
    height: 1.05em;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    color: #fff;
    animation: pf-btn-spin .6s linear infinite;
}
@keyframes pf-btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    html body :is(.pf-btn, .btn, .peso-btn, .cc-button, .auth-submit, .support-submit, .support-back) {
        transition: none !important;
    }
    html body :is(.pf-btn, .btn, .peso-btn, .cc-button).is-loading::after { animation-duration: 1.4s; }
}

/* --------------------------------------------------------------------------
   2. Sizes
   -------------------------------------------------------------------------- */
html body .pf-btn--sm,
html body :is(.btn, .peso-btn).btn--sm,
html body .btn-sm {
    min-height: var(--pf-btn-h-sm);
    padding: 0 var(--pf-btn-pad-x-sm);
    font-size: var(--pf-btn-fs-sm) !important;
    border-radius: 10px !important;
}
html body .pf-btn--lg,
html body .btn-lg {
    min-height: var(--pf-btn-h-lg);
    padding: 0 var(--pf-btn-pad-x-lg);
    font-size: var(--pf-btn-fs-lg) !important;
    border-radius: 14px !important;
}
html body .pf-btn--block,
html body .btn-block { width: 100%; }
html body .pf-btn--icon {
    width: var(--pf-btn-h);
    min-width: var(--pf-btn-h);
    padding: 0;
    border-radius: 11px !important;
}
html body .pf-btn--icon.pf-btn--sm { width: var(--pf-btn-h-sm); min-width: var(--pf-btn-h-sm); }

/* --------------------------------------------------------------------------
   3. Variants — colour (canonical + confident aliases)
   -------------------------------------------------------------------------- */

/* PRIMARY */
html body :is(
    .pf-btn--primary,
    .btn-primary, .peso-btn:not(.peso-btn--secondary):not(.peso-btn--ghost):not(.peso-btn--danger),
    .cc-button-primary, .auth-submit, .support-submit,
    .btn.btn-success, button[type="submit"].btn:not(.btn-secondary):not(.btn-outline):not(.btn-danger)
) {
    background: var(--pf-primary-bg) !important;
    color: var(--pf-primary-fg) !important;
    border-color: transparent !important;
    box-shadow: var(--pf-primary-shadow);
}
html body :is(.pf-btn--primary, .btn-primary, .peso-btn:not(.peso-btn--secondary):not(.peso-btn--ghost):not(.peso-btn--danger),
              .cc-button-primary, .auth-submit, .support-submit):not([disabled]):not(.is-disabled):hover {
    background: var(--pf-primary-bg-hover) !important;
    box-shadow: 0 12px 26px -10px var(--pf-primary-ring);
}

/* SECONDARY */
html body :is(
    .pf-btn--secondary,
    .btn-secondary, .peso-btn--secondary, .support-back, .btn.btn-default
) {
    background: var(--pf-secondary-bg) !important;
    color: var(--pf-secondary-fg) !important;
    border-color: var(--pf-secondary-border) !important;
    box-shadow: 0 1px 2px rgba(16, 48, 38, .05);
}
html body :is(.pf-btn--secondary, .btn-secondary, .peso-btn--secondary, .support-back):not([disabled]):not(.is-disabled):hover {
    background: var(--pf-secondary-bg-hover) !important;
    border-color: var(--pf-secondary-border-hover) !important;
}

/* OUTLINE */
html body :is(.pf-btn--outline, .btn-outline) {
    background: transparent !important;
    color: var(--pf-outline-fg) !important;
    border-color: var(--pf-outline-border) !important;
    box-shadow: none;
}
html body :is(.pf-btn--outline, .btn-outline):not([disabled]):not(.is-disabled):hover {
    background: var(--pf-outline-bg-hover) !important;
    border-color: var(--pf-outline-fg) !important;
}

/* DANGER */
html body :is(.pf-btn--danger, .btn-danger, .peso-btn--danger) {
    background: var(--pf-danger-bg) !important;
    color: var(--pf-danger-fg) !important;
    border-color: transparent !important;
    box-shadow: 0 8px 20px -8px var(--pf-danger-ring);
}
html body :is(.pf-btn--danger, .btn-danger, .peso-btn--danger):not([disabled]):not(.is-disabled):hover {
    background: var(--pf-danger-bg-hover) !important;
}
html body :is(.pf-btn--danger-outline) {
    background: transparent !important;
    color: var(--pf-danger-outline-fg) !important;
    border-color: var(--pf-danger-outline-border) !important;
    box-shadow: none;
}

/* GHOST */
html body :is(.pf-btn--ghost, .btn-ghost, .peso-btn--ghost, .cc-button-ghost) {
    background: transparent !important;
    color: var(--pf-ghost-fg) !important;
    border-color: transparent !important;
    box-shadow: none;
}
html body :is(.pf-btn--ghost, .btn-ghost, .peso-btn--ghost, .cc-button-ghost):not([disabled]):not(.is-disabled):hover {
    background: var(--pf-ghost-bg-hover) !important;
}

/* --------------------------------------------------------------------------
   4. Bare .btn with no variant keeps its page colour — only the shape,
      typography, gap, states and focus ring from section 1 are normalised.
      Use .btn-secondary / .pf-btn--secondary for the standard neutral skin.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   5b. Tier-2 bespoke action buttons — normalise shape / typography / states
       only (keep each page's own colour so nothing recolours unexpectedly).
       Deliberately excludes chips, tabs, pagination, icon-only and the
       public-landing button families.
   -------------------------------------------------------------------------- */
html body :is(
    .add-btn, .btn-add-skill, .view-btn, .edit-btn, .post-btn, .new-job-btn,
    .schedule-btn, .apply-btn, .btn-apply, .inquiry-btn, .review-edit-btn,
    .approval-review-btn, .mark-all-btn, .registration-step-button,
    .save-draft-btn, .view-profile-btn, .btn-support, .btn-feedback
) {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pf-btn-gap);
    box-sizing: border-box;
    min-height: var(--pf-btn-h);
    padding: 0 var(--pf-btn-pad-x);
    border-radius: var(--pf-btn-radius) !important;
    font-family: var(--pf-btn-font) !important;
    font-size: var(--pf-btn-fs) !important;
    font-weight: var(--pf-btn-fw) !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .16s var(--pf-btn-ease), box-shadow .18s var(--pf-btn-ease),
                background-color .18s var(--pf-btn-ease), border-color .18s var(--pf-btn-ease),
                color .18s var(--pf-btn-ease), filter .18s var(--pf-btn-ease);
}
@media (hover: hover) {
    html body :is(.add-btn, .btn-add-skill, .view-btn, .edit-btn, .post-btn, .new-job-btn,
                  .schedule-btn, .apply-btn, .btn-apply, .inquiry-btn, .review-edit-btn,
                  .approval-review-btn, .mark-all-btn, .registration-step-button,
                  .save-draft-btn, .view-profile-btn, .btn-support, .btn-feedback):not([disabled]):not(.is-disabled):hover {
        transform: translateY(-1px);
        filter: brightness(1.03);
    }
}
html body :is(.add-btn, .btn-add-skill, .view-btn, .edit-btn, .post-btn, .new-job-btn,
              .schedule-btn, .apply-btn, .btn-apply, .inquiry-btn, .review-edit-btn,
              .approval-review-btn, .mark-all-btn, .registration-step-button,
              .save-draft-btn, .view-profile-btn, .btn-support, .btn-feedback):focus-visible {
    outline: none;
    box-shadow: var(--pf-focus-ring);
}
html body :is(.add-btn, .btn-add-skill, .view-btn, .edit-btn, .post-btn, .new-job-btn,
              .schedule-btn, .apply-btn, .btn-apply):is([disabled], .is-disabled) {
    opacity: var(--pf-disabled-op);
    cursor: not-allowed;
    transform: none !important;
    filter: none !important;
}
html body :is(.add-btn, .btn-add-skill, .view-btn, .edit-btn, .post-btn, .new-job-btn,
              .schedule-btn, .apply-btn, .btn-apply, .inquiry-btn) > :is(i, svg, [class*="fa-"]) {
    font-size: var(--pf-btn-icon);
    flex: 0 0 auto;
}

/* icon-only buttons: square, no horizontal padding stretch */
html body :is(.close-modal, .btn-close, .modal-close, .pf-btn--icon) {
    border-radius: 11px !important;
    text-decoration: none !important;
}

/* --------------------------------------------------------------------------
   5. Kill known one-off breakage
   -------------------------------------------------------------------------- */
/* underlined text-link buttons (e.g. the Back button reported) */
html body a:is(.pf-btn, .btn, .peso-btn, .cc-button, .support-back, .auth-submit):hover { text-decoration: none !important; }
/* stray inner borders when a button wraps another element */
html body :is(.pf-btn, .btn, .peso-btn) > :is(span, i, svg) { border: 0; background: none; }