/* BPA Cares Awards — member app styles.
   Themed to the live BPA site: references the theme's WordPress preset CSS
   variables (exact brand colors + fonts) with hard-coded fallbacks so it still
   looks right if a preset is missing. */

[x-cloak] { display: none !important; }

.bpa-cares-wrap {
    /* Brand palette (BPA theme presets, with fallbacks). */
    --bpa-navy:      var(--wp--preset--color--brand-midnight-blue, #00263E);
    --bpa-dark-blue: var(--wp--preset--color--brand-dark-blue, #00476B);
    --bpa-blue:      var(--wp--preset--color--brand-medium-blue, #005B89);
    --bpa-red:       var(--wp--preset--color--brand-vivid-red, #C8102E);
    --bpa-carmine:   var(--wp--preset--color--brand-carmine, #931E1E);
    --bpa-gold:      var(--wp--preset--color--brand-yellow, #FBD914);
    --bpa-ink:       var(--wp--preset--color--brand-black, #4A4A4A);
    --bpa-line:      var(--wp--preset--color--brand-warm-gray, #D7D2CB);
    --bpa-bg:        var(--wp--preset--color--brand-white-smoke, #F6F5F3);
    --bpa-info:      var(--wp--preset--color--brand-light-blue, #C1D5EB);
    --bpa-sky:       var(--wp--preset--color--brand-light-sky-blue, #A9C4E3);
    --bpa-white:     #ffffff;
    --bpa-muted:     #6b6b6b;
    --bpa-ok:        #1c7c3c;
    --bpa-warn:      #8a6400;

    /* Brand typography. */
    --bpa-font-body: var(--wp--preset--font-family--neutraface-text, "Neutraface Text", system-ui, -apple-system, sans-serif);
    --bpa-font-head: var(--wp--preset--font-family--josefin-sans, "Josefin Sans", var(--bpa-font-body));

    max-width: 75rem;
    margin: 0 auto;
    color: var(--bpa-ink);
    font-family: var(--bpa-font-body);
    font-size: 1.0625rem;
    line-height: 1.55;
}

.bpa-cares-wrap * { box-sizing: border-box; }
.bpa-cares-wrap h1, .bpa-cares-wrap h2, .bpa-cares-wrap h3, .bpa-cares-wrap h4 {
    font-family: var(--bpa-font-head);
    color: var(--bpa-navy);
    line-height: 1.2;
}

/* Header + nav */
.bpa-cares-header {
    border-bottom: 3px solid var(--bpa-red);
    padding-bottom: .75rem;
    margin-bottom: 1.5rem;
}
.bpa-cares-header__title { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.bpa-cares-header h1 { margin: 0; font-size: 2.1875rem; }
.bpa-cares-username { color: var(--bpa-muted); font-weight: 600; }
.bpa-cares-nav { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .85rem; }
.bpa-cares-nav button {
    background: none; border: none; padding: .55rem 1rem; cursor: pointer;
    font-family: var(--bpa-font-head); font-size: .95rem; font-weight: 600;
    color: var(--bpa-muted); text-transform: uppercase; letter-spacing: .04em;
    border-bottom: 3px solid transparent; border-radius: 4px 4px 0 0;
}
.bpa-cares-nav button:hover { color: var(--bpa-navy); }
.bpa-cares-nav button.is-active { color: var(--bpa-navy); border-bottom-color: var(--bpa-red); }

/* Notices */
.bpa-cares-notice { padding: .8rem 1.1rem; border-radius: .5rem; margin-bottom: 1rem; font-weight: 600; }
.bpa-cares-notice--info { background: var(--bpa-info); color: var(--bpa-navy); }
.bpa-cares-notice--success { background: #e7f6ec; color: var(--bpa-ok); }
.bpa-cares-notice--warning { background: #faf0d4; color: var(--bpa-warn); }
.bpa-cares-notice--error { background: #fbe3e6; color: var(--bpa-carmine); }

/* Cards / grid */
.bpa-cares-category { margin-bottom: 2.25rem; }
.bpa-cares-category h2 { font-size: 1.6875rem; text-transform: uppercase; letter-spacing: .03em; border-bottom: 2px solid var(--bpa-line); padding-bottom: .4rem; }
.bpa-cares-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; }
.bpa-cares-card { border: 1px solid var(--bpa-line); border-radius: .75rem; padding: 1.25rem; background: var(--bpa-white); display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(0,38,62,.04); }
.bpa-cares-card h3 { margin: 0 0 .45rem; font-size: 1.25rem; }
.bpa-cares-card__desc { color: var(--bpa-muted); font-size: .95rem; flex: 1; }
.bpa-cares-meta { list-style: none; padding: 0; margin: .65rem 0; font-size: .9rem; color: var(--bpa-muted); }
.bpa-cares-meta li { text-transform: capitalize; }
.bpa-cares-auto { font-size: .9rem; font-style: italic; color: var(--bpa-muted); }

/* Buttons — BPA pill style */
.bpa-cares-btn {
    display: inline-block; background: var(--bpa-navy); color: #fff; border: 2px solid var(--bpa-navy);
    padding: .6rem 1.4rem; border-radius: .3125rem; font-family: var(--bpa-font-body);
    font-weight: 600; letter-spacing: .01em; cursor: pointer; text-decoration: none;
    font-size: .95rem; text-align: center; transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.bpa-cares-btn:hover { background: var(--bpa-dark-blue); border-color: var(--bpa-dark-blue); color: #fff; }
.bpa-cares-btn:disabled { opacity: .5; cursor: not-allowed; }
.bpa-cares-btn--ghost { background: transparent; color: var(--bpa-navy); }
.bpa-cares-btn--ghost:hover { background: var(--bpa-navy); color: #fff; }
.bpa-cares-btn--danger { background: var(--bpa-red); border-color: var(--bpa-red); }
.bpa-cares-btn--danger:hover { background: var(--bpa-carmine); border-color: var(--bpa-carmine); }
.bpa-cares-btn--sm { padding: .35rem .9rem; font-size: .85rem; }
.bpa-cares-link { background: none; border: none; color: var(--bpa-blue); cursor: pointer; font-weight: 600; padding: 0; }
.bpa-cares-link:hover { color: var(--bpa-navy); }
.bpa-cares-link--danger { color: var(--bpa-red); margin-left: .5rem; }

/* Tables */
.bpa-cares-table { width: 100%; border-collapse: collapse; margin: 1rem 0; background: var(--bpa-white); border: 1px solid var(--bpa-line); border-radius: .5rem; overflow: hidden; }
.bpa-cares-table th, .bpa-cares-table td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--bpa-line); font-size: .92rem; }
.bpa-cares-table th { background: var(--bpa-navy); color: #fff; font-family: var(--bpa-font-head); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.bpa-cares-table tr:last-child td { border-bottom: none; }
.bpa-cares-rowactions { white-space: nowrap; }

/* Badges */
.bpa-cares-badge { display: inline-block; padding: .22rem .65rem; border-radius: 9999px; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.bpa-cares-badge--draft { background: var(--bpa-bg); color: var(--bpa-muted); }
.bpa-cares-badge--pending { background: var(--bpa-info); color: var(--bpa-navy); }
.bpa-cares-badge--under_review { background: #faf0d4; color: var(--bpa-warn); }
.bpa-cares-badge--approved { background: #e7f6ec; color: var(--bpa-ok); }
.bpa-cares-badge--rejected { background: #fbe3e6; color: var(--bpa-carmine); }
.bpa-cares-badge--not_reviewed { background: var(--bpa-warm-gray, #ece9e4); color: var(--bpa-ink); }

/* Form */
.bpa-cares-formhead { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.bpa-cares-formhead h2 { margin: 0; flex: 1; }
.bpa-cares-fieldset { border: 1px solid var(--bpa-line); border-radius: .75rem; padding: 1.1rem 1.35rem; margin: 1.25rem 0; }
.bpa-cares-fieldset legend { font-family: var(--bpa-font-head); font-weight: 700; color: var(--bpa-navy); padding: 0 .45rem; text-transform: uppercase; letter-spacing: .03em; font-size: .95rem; }
.bpa-cares-fieldset[disabled] { opacity: .9; }
.bpa-cares-field { margin-bottom: 1.1rem; }
.bpa-cares-field label, .bpa-cares-label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.bpa-cares-field input[type=text], .bpa-cares-field input[type=number], .bpa-cares-field input[type=date],
.bpa-cares-field input[type=email], .bpa-cares-field input[type=tel], .bpa-cares-field textarea,
.bpa-cares-field select {
    width: 100%; padding: .55rem .7rem; border: 1px solid var(--bpa-line); border-radius: .4rem;
    font-family: var(--bpa-font-body); font-size: .95rem; font-weight: 400; background: #fff; color: var(--bpa-ink);
}
.bpa-cares-field input:focus, .bpa-cares-field textarea:focus, .bpa-cares-field select:focus {
    outline: none; border-color: var(--bpa-blue); box-shadow: 0 0 0 3px var(--bpa-sky);
}
.bpa-cares-field input[readonly] { background: var(--bpa-bg); color: var(--bpa-muted); }
.bpa-cares-help { font-size: .84rem; color: var(--bpa-muted); margin: .3rem 0 0; }
.bpa-cares-req { color: var(--bpa-red); margin-left: .15rem; }
.bpa-cares-check { display: flex; align-items: flex-start; gap: .5rem; font-weight: 500; margin-bottom: .45rem; }
.bpa-cares-check input { margin-top: .25rem; }

.bpa-cares-prefill { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.bpa-cares-prefill label {
    display: flex; flex-direction: column; gap: .3rem; margin: 0;
    font-family: var(--bpa-font-head); font-weight: 600; font-size: .72rem;
    text-transform: uppercase; letter-spacing: .05em; color: var(--bpa-muted);
}
.bpa-cares-prefill input {
    width: 100%; padding: .5rem .7rem; border: 1px solid var(--bpa-line); border-radius: .4rem;
    background: var(--bpa-bg); color: var(--bpa-navy); font-family: var(--bpa-font-body);
    font-size: .95rem; font-weight: 700; text-transform: capitalize; letter-spacing: normal;
}

/* Activities / donations */
.bpa-cares-addactivity { border: 1px dashed var(--bpa-line); border-radius: .75rem; padding: 1.1rem; margin-top: 1rem; background: var(--bpa-bg); }
.bpa-cares-donation { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .5rem; }
.bpa-cares-donation__item { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-weight: 500; }
.bpa-cares-donation__item input { width: 72px; }

/* Uploads */
.bpa-cares-filelist { list-style: none; padding: 0; margin: .3rem 0; }
.bpa-cares-filelist li { font-size: .9rem; margin-bottom: .25rem; }

/* Screening */
.bpa-cares-screening { background: var(--bpa-info); border-left: 4px solid var(--bpa-navy); padding: .85rem 1.1rem; border-radius: 0 .5rem .5rem 0; margin: 1rem 0; }
.bpa-cares-screening h3 { margin: 0 0 .4rem; }

/* Form actions */
.bpa-cares-formactions { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; margin: 1.5rem 0; }
.bpa-cares-saved { color: var(--bpa-ok); font-size: .85rem; font-weight: 600; }

/* Login prompt */
.bpa-cares-login-prompt { border: 1px solid var(--bpa-line); border-radius: .75rem; padding: 2rem; text-align: center; background: var(--bpa-bg); }

.bpa-cares-help-page ol { line-height: 1.9; }

/* Reviewer dashboard */
.bpa-cares-stats { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 1.5rem; }
.bpa-cares-stat { border: 1px solid var(--bpa-line); border-radius: .75rem; background: var(--bpa-white); padding: .7rem 1.1rem; cursor: pointer; text-align: center; min-width: 115px; }
.bpa-cares-stat.is-active { border-color: var(--bpa-navy); box-shadow: 0 0 0 2px var(--bpa-sky); }
.bpa-cares-stat__num { display: block; font-family: var(--bpa-font-head); font-size: 1.75rem; font-weight: 700; color: var(--bpa-navy); }
.bpa-cares-stat__label { font-size: .78rem; color: var(--bpa-muted); text-transform: uppercase; letter-spacing: .03em; }
.bpa-cares-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.bpa-cares-filters select, .bpa-cares-filters input { padding: .55rem .7rem; border: 1px solid var(--bpa-line); border-radius: .4rem; font-family: var(--bpa-font-body); }
.bpa-cares-filters input[type=search] { flex: 1; min-width: 200px; }
.bpa-cares-bulkbar { display: flex; align-items: center; gap: .85rem; background: var(--bpa-bg); border: 1px solid var(--bpa-line); border-radius: .5rem; padding: .55rem .85rem; margin-bottom: 1rem; }
.bpa-cares-readfield { margin-bottom: .9rem; }
.bpa-cares-readfield strong { display: block; font-family: var(--bpa-font-head); color: var(--bpa-navy); font-size: .85rem; }
.bpa-cares-readfield div { white-space: pre-wrap; }
.bpa-cares-checkread { list-style: none; padding: 0; }
.bpa-cares-checkread li { padding: .22rem 0; }
.bpa-cares-actcard { border: 1px solid var(--bpa-line); border-radius: .6rem; padding: .85rem 1.1rem; margin-bottom: .85rem; }
.bpa-cares-actmeta { color: var(--bpa-muted); font-size: .82rem; margin-left: .5rem; }
.bpa-cares-rubric { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .55rem; margin-top: .55rem; }
.bpa-cares-rubric__dim { font-size: .82rem; font-weight: 600; }
.bpa-cares-rubric__dim input { width: 100%; padding: .4rem; border: 1px solid var(--bpa-line); border-radius: .4rem; }
.bpa-cares-rubric-total { display: flex; align-items: center; gap: .85rem; padding-top: .55rem; border-top: 1px solid var(--bpa-line); font-family: var(--bpa-font-head); }

@media (max-width: 600px) {
    .bpa-cares-prefill { grid-template-columns: 1fr; }
    .bpa-cares-nav { overflow-x: auto; }
}