/**
 * Pillar Plugin — Scoped CSS Reset
 *
 * Neutralizes theme style interference on all plugin pages.
 * Targets only plugin wrapper elements so the rest of the site is untouched.
 *
 * Wrapper classes:
 *   .pillar-dashboard-wrapper  — member & staff dashboards, records, profiles
 *   .pillar-login-form         — member & staff login
 *   .pillar-register-form      — member & staff registration
 *   .pillar-auth-wrapper       — reset-password pages
 *   .pillar-container-full     — EVV & timesheet form pages
 *
 * Uses :is() for selector grouping (supported in all modern browsers since 2021).
 * Uses !important sparingly on layout-critical properties to guarantee override.
 */

/* ========================================================================
   1. ROOT WRAPPER BASELINE
   ======================================================================== */

:is(
    .pillar-dashboard-wrapper,
    .pillar-login-form,
    .pillar-register-form,
    .pillar-auth-wrapper,
    .pillar-container-full
) {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #333 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ========================================================================
   2. UNIVERSAL BOX-SIZING
   ======================================================================== */

:is(
    .pillar-dashboard-wrapper,
    .pillar-login-form,
    .pillar-register-form,
    .pillar-auth-wrapper,
    .pillar-container-full
) *,
:is(
    .pillar-dashboard-wrapper,
    .pillar-login-form,
    .pillar-register-form,
    .pillar-auth-wrapper,
    .pillar-container-full
) *::before,
:is(
    .pillar-dashboard-wrapper,
    .pillar-login-form,
    .pillar-register-form,
    .pillar-auth-wrapper,
    .pillar-container-full
) *::after {
    box-sizing: border-box !important;
}

/* ========================================================================
   3. TYPOGRAPHY RESET
   ======================================================================== */

:is(
    .pillar-dashboard-wrapper,
    .pillar-login-form,
    .pillar-register-form,
    .pillar-auth-wrapper,
    .pillar-container-full
) :is(h1, h2, h3, h4, h5, h6) {
    font-family: inherit !important;
    line-height: 1.3 !important;
    color: inherit !important;
    margin: 0 0 0.5em !important;
    padding: 0 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    font-style: normal !important;
    word-spacing: normal !important;
}

:is(
    .pillar-dashboard-wrapper,
    .pillar-login-form,
    .pillar-register-form,
    .pillar-auth-wrapper,
    .pillar-container-full
) p {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    margin: 0 0 1em !important;
    padding: 0 !important;
}

:is(
    .pillar-dashboard-wrapper,
    .pillar-login-form,
    .pillar-register-form,
    .pillar-auth-wrapper,
    .pillar-container-full
) a {
    color: #2271b1;
    text-decoration: none;
    transition: color 0.2s ease;
}

:is(
    .pillar-dashboard-wrapper,
    .pillar-login-form,
    .pillar-register-form,
    .pillar-auth-wrapper,
    .pillar-container-full
) a:hover {
    color: #135e96;
    text-decoration: underline;
}

/* ========================================================================
   4. FORM ELEMENT RESET — Most important for theme isolation
   ======================================================================== */

:is(
    .pillar-dashboard-wrapper,
    .pillar-login-form,
    .pillar-register-form,
    .pillar-auth-wrapper,
    .pillar-container-full
) :is(
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"]
) {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    padding: 8px 12px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #333 !important;
    background-color: #fff !important;
    background-image: none !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    max-width: 100% !important;
}

:is(
    .pillar-dashboard-wrapper,
    .pillar-login-form,
    .pillar-register-form,
    .pillar-auth-wrapper,
    .pillar-container-full
) :is(
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"]
):focus {
    border-color: #2271b1 !important;
    box-shadow: 0 0 0 1px #2271b1 !important;
    outline: none !important;
}

:is(
    .pillar-dashboard-wrapper,
    .pillar-login-form,
    .pillar-register-form,
    .pillar-auth-wrapper,
    .pillar-container-full
) select {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    padding: 8px 32px 8px 12px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #333 !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 12px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
    max-width: 100% !important;
}

.time-select-group select {
    display: inline-block !important;
    width: auto !important;
    max-width: none !important;
    padding: 10px 24px 10px 8px !important;
}

:is(
    .pillar-dashboard-wrapper,
    .pillar-login-form,
    .pillar-register-form,
    .pillar-auth-wrapper,
    .pillar-container-full
) select:focus {
    border-color: #2271b1 !important;
    box-shadow: 0 0 0 1px #2271b1 !important;
    outline: none !important;
}

:is(
    .pillar-dashboard-wrapper,
    .pillar-login-form,
    .pillar-register-form,
    .pillar-auth-wrapper,
    .pillar-container-full
) textarea:not([name="g-recaptcha-response"]) {
    display: block !important;
    width: 100% !important;
    min-height: 80px !important;
    padding: 8px 12px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #333 !important;
    background-color: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    resize: vertical !important;
    max-width: 100% !important;
}

:is(
    .pillar-dashboard-wrapper,
    .pillar-login-form,
    .pillar-register-form,
    .pillar-auth-wrapper,
    .pillar-container-full
) textarea:focus {
    border-color: #2271b1 !important;
    box-shadow: 0 0 0 1px #2271b1 !important;
    outline: none !important;
}

/* Checkbox and Radio — only reset sizing and position, not custom-checkbox styles */
:is(
    .pillar-dashboard-wrapper,
    .pillar-login-form,
    .pillar-register-form,
    .pillar-auth-wrapper,
    .pillar-container-full
) input[type="checkbox"],
:is(
    .pillar-dashboard-wrapper,
    .pillar-login-form,
    .pillar-register-form,
    .pillar-auth-wrapper,
    .pillar-container-full
) input[type="radio"] {
    width: auto !important;
    height: auto !important;
    margin: 0 6px 0 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    vertical-align: middle !important;
    -webkit-appearance: auto !important;
    appearance: auto !important;
}

/* Buttons — exclude utility buttons and form action buttons with explicit styles */
:is(
    .pillar-dashboard-wrapper,
    .pillar-login-form,
    .pillar-register-form,
    .pillar-auth-wrapper,
    .pillar-container-full
) :is(button, input[type="submit"], input[type="button"], .button, .btn):not(
    .mobile-menu-toggle,
    .search-button,
    .search-clear,
    .refresh-button,
    .wp-hide-pw,
    .sidebar-close,
    .btn-secondary,
    .btn-outline,
    .btn-danger,
    .cancel-form,
    .save-draft,
    .clear-signature-btn
) {
    display: inline-block !important;
    padding: 10px 20px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    border: none !important;
    border-radius: 4px !important;
    background-color: #2271b1 !important;
    color: #fff !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

:is(
    .pillar-dashboard-wrapper,
    .pillar-login-form,
    .pillar-register-form,
    .pillar-auth-wrapper,
    .pillar-container-full
) :is(button, input[type="submit"], input[type="button"], .button, .btn):not(
    .mobile-menu-toggle,
    .search-button,
    .search-clear,
    .refresh-button,
    .wp-hide-pw,
    .sidebar-close,
    .btn-secondary,
    .btn-outline,
    .btn-danger,
    .cancel-form,
    .save-draft,
    .clear-signature-btn
):hover {
    background-color: #135e96 !important;
}

:is(
    .pillar-dashboard-wrapper,
    .pillar-login-form,
    .pillar-register-form,
    .pillar-auth-wrapper,
    .pillar-container-full
) :is(button, input[type="submit"], input[type="button"], .button, .btn):not(
    .mobile-menu-toggle,
    .search-button,
    .search-clear,
    .refresh-button,
    .wp-hide-pw,
    .sidebar-close,
    .btn-secondary,
    .btn-outline,
    .btn-danger,
    .cancel-form,
    .save-draft,
    .clear-signature-btn
):disabled {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
}

/* ========================================================================
   5. LABEL RESET
   ======================================================================== */

:is(
    .pillar-dashboard-wrapper,
    .pillar-login-form,
    .pillar-register-form,
    .pillar-auth-wrapper,
    .pillar-container-full
) label {
    display: block !important;
    margin-bottom: 6px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1d2327 !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* ========================================================================
   6. TABLE RESET
   ======================================================================== */

:is(
    .pillar-dashboard-wrapper,
    .pillar-login-form,
    .pillar-register-form,
    .pillar-auth-wrapper,
    .pillar-container-full
) table {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    font-size: inherit !important;
    margin: 0 0 1em !important;
    background: transparent !important;
}

:is(
    .pillar-dashboard-wrapper,
    .pillar-login-form,
    .pillar-register-form,
    .pillar-auth-wrapper,
    .pillar-container-full
) :is(th, td) {
    padding: 10px 12px !important;
    text-align: left !important;
    vertical-align: middle !important;
    font-family: inherit !important;
    font-size: inherit !important;
    color: inherit !important;
    border-bottom: 1px solid #eee !important;
    background: transparent !important;
}

:is(
    .pillar-dashboard-wrapper,
    .pillar-login-form,
    .pillar-register-form,
    .pillar-auth-wrapper,
    .pillar-container-full
) th {
    font-weight: 600 !important;
    color: #1d2327 !important;
}

/* ========================================================================
   7. LIST RESET
   ======================================================================== */

:is(
    .pillar-dashboard-wrapper,
    .pillar-login-form,
    .pillar-register-form,
    .pillar-auth-wrapper,
    .pillar-container-full
) :is(ul, ol) {
    margin: 0 0 1em !important;
    padding: 0 0 0 1.5em !important;
    font-family: inherit !important;
    font-size: inherit !important;
    color: inherit !important;
    list-style-position: outside !important;
}

:is(
    .pillar-dashboard-wrapper,
    .pillar-login-form,
    .pillar-register-form,
    .pillar-auth-wrapper,
    .pillar-container-full
) li {
    margin: 0 0 4px !important;
    padding: 0 !important;
    font-family: inherit !important;
    font-size: inherit !important;
    color: inherit !important;
}

/* ========================================================================
   8. IMAGE & MEDIA RESET
   ======================================================================== */

:is(
    .pillar-dashboard-wrapper,
    .pillar-login-form,
    .pillar-register-form,
    .pillar-auth-wrapper,
    .pillar-container-full
) img {
    max-width: 100% !important;
    height: auto !important;
    border: none !important;
    box-shadow: none !important;
    vertical-align: middle !important;
}

/* ========================================================================
   9. FIELDSET & LEGEND RESET
   ======================================================================== */

:is(
    .pillar-dashboard-wrapper,
    .pillar-login-form,
    .pillar-register-form,
    .pillar-auth-wrapper,
    .pillar-container-full
) fieldset {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    min-width: 0 !important;
}

:is(
    .pillar-dashboard-wrapper,
    .pillar-login-form,
    .pillar-register-form,
    .pillar-auth-wrapper,
    .pillar-container-full
) legend {
    padding: 0 !important;
    margin: 0 0 8px !important;
    font-size: inherit !important;
    font-weight: 600 !important;
    color: inherit !important;
    border: none !important;
}

/* ========================================================================
   10. HR & MISC ELEMENT RESET
   ======================================================================== */

:is(
    .pillar-dashboard-wrapper,
    .pillar-login-form,
    .pillar-register-form,
    .pillar-auth-wrapper,
    .pillar-container-full
) hr {
    height: 0 !important;
    margin: 1em 0 !important;
    border: none !important;
    border-top: 1px solid #eee !important;
}

:is(
    .pillar-dashboard-wrapper,
    .pillar-login-form,
    .pillar-register-form,
    .pillar-auth-wrapper,
    .pillar-container-full
) ::placeholder {
    color: #999 !important;
    opacity: 1 !important;
    font-family: inherit !important;
    font-size: inherit !important;
}

/* ========================================================================
   11. FLEX & GRID SAFETY — prevent theme from hijacking layout
   ======================================================================== */

:is(
    .pillar-dashboard-wrapper,
    .pillar-login-form,
    .pillar-register-form,
    .pillar-auth-wrapper,
    .pillar-container-full
) .form-group {
    display: block !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
}

/* ========================================================================
   12. THEME PSEUDO-ELEMENT CLEANUP
   Themes often inject pseudo-elements for decorations — neutralize them.
   ======================================================================== */

:is(
    .pillar-dashboard-wrapper,
    .pillar-login-form,
    .pillar-register-form,
    .pillar-auth-wrapper,
    .pillar-container-full
) :is(
    input, select, textarea, button, .button, .btn,
    label, .form-group, .form-container
)::before,
:is(
    .pillar-dashboard-wrapper,
    .pillar-login-form,
    .pillar-register-form,
    .pillar-auth-wrapper,
    .pillar-container-full
) :is(
    input, select, textarea, button, .button, .btn,
    label, .form-group, .form-container
)::after {
    content: none !important;
    display: none !important;
}

/* Re-enable pseudo-elements for plugin components that use them */
:is(
    .pillar-dashboard-wrapper,
    .pillar-login-form,
    .pillar-register-form,
    .pillar-auth-wrapper,
    .pillar-container-full
) .custom-checkbox .checkmark::after {
    content: "" !important;
    display: block !important;
}

:is(
    .pillar-dashboard-wrapper,
    .pillar-login-form,
    .pillar-register-form,
    .pillar-auth-wrapper,
    .pillar-container-full
) .password-toggle::before {
    display: block !important;
    font-family: dashicons !important;
}

:is(
    .pillar-dashboard-wrapper,
    .pillar-login-form,
    .pillar-register-form,
    .pillar-auth-wrapper,
    .pillar-container-full
) .dashicons::before {
    display: inline-block !important;
    font-family: dashicons !important;
    font-style: normal;
    font-weight: normal;
    speak: never;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:is(
    .pillar-login-form,
    .pillar-register-form,
    .pillar-auth-wrapper,
    .pillar-dashboard-wrapper,
    .pillar-container-full
) .password-input-wrapper button.wp-hide-pw,
:is(
    .pillar-login-form,
    .pillar-register-form,
    .pillar-auth-wrapper,
    .pillar-dashboard-wrapper,
    .pillar-container-full
) .password-input-wrapper .wp-hide-pw {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: #50575e !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    line-height: 1 !important;
}

/* ========================================================================
   13. FULL-WIDTH PAGE TEMPLATE
   Ensures the plugin's page template renders at full width with
   no sidebars, constrained containers, or theme layout interference.
   ======================================================================== */

.pillar-fullwidth-template {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
    /* Prevent themes from constraining the content area */
    min-height: 60vh;
}

/* Override common theme content-area constraints */
.pillar-fullwidth-template :is(
    .pillar-dashboard-wrapper,
    .pillar-login-form,
    .pillar-register-form,
    .pillar-auth-wrapper,
    .pillar-container-full
) {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Hide any sidebars that themes might inject as siblings */
.pillar-fullwidth-template ~ aside,
.pillar-fullwidth-template ~ .sidebar,
.pillar-fullwidth-template ~ .widget-area,
.pillar-fullwidth-template ~ #secondary {
    display: none !important;
}

/* ========================================================================
   9. AUTH PAGE SPACING
   Push login/register/reset forms below the theme header when breadcrumbs
   are hidden. Uses the body class added by class-theme-compatibility.php.
   ======================================================================== */

body.pillar-auth-page .pillar-login-form,
body.pillar-auth-page .pillar-register-form,
body.pillar-auth-page .pillar-auth-wrapper {
    padding-top: 60px;
    padding-bottom: 60px;
}

body.pillar-auth-page .pillar-container-full {
    padding-top: 40px;
    padding-bottom: 60px;
}