/* ================================
   EASY VOLUNTEER - COMMON STYLES
   Shared across all layouts (volunteer/organization/landing/auth/main).
   Variables, base reset, generic Bootstrap-component overrides, shared widgets
   (buttons, cards, breadcrumbs, navbar, cookie consent, event view/cards).
   ================================ */

/* ================================
   EASY VOLUNTEER - LAYOUT STYLES
   Базові класи для лейаутів
   ================================ */

/* Always reserve the vertical scrollbar so short pages (e.g. Positions tab)
   don't gain viewport width and shift centered content sideways vs tall pages
   (e.g. Events tab). scrollbar-gutter for modern browsers; overflow-y for the rest. */
html {
    scrollbar-gutter: stable;
    overflow-y: scroll;
}

/* ===== COLOR VARIABLES ===== */
:root {
    --primary-teal: #1E5555;
    --primary-teal-hover: #2a6b6b;
    --primary-teal-light: #DFF2F2;
    --secondary-cyan: #A8E0E0;
    --text-dark: #1a3838;
    --text-muted: #5f7575;
    --bg-light: #F5FAFA;
    --border-gray: #D0E5E5;

    /* Pending / amber theme — volunteer change-request blocks */
    --pending-bg: #FFF8EC;
    --pending-border: #F3E1BE;
    --pending-text: #B08400;
    --pending-text-dark: #8A6A00;
    --pending-accent: #F4B740;
    --pending-through: #d8c9a8;
}

.section-wrapper {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 768px) {
    .section-wrapper {
        padding: 0 1.5rem;
    }
}

/* ===== UNIVERSAL BUTTON STYLES ===== */
.btn-primary {
    background-color: var(--primary-teal) !important;
    color: white !important;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 600;
    border: none;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s ease;
}

.btn-primary:hover {
    background-color: var(--primary-teal-hover) !important;
    color: white !important;
    text-decoration: none;
}

/* ===== CARD MODERN STYLES ===== */
.card-modern {
    border: 1px solid var(--border-gray);
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.card-header-modern {
    background-color: var(--bg-light);
    padding: 1rem;
    border-bottom: 1px solid var(--border-gray);
    border-radius: 0.5rem 0.5rem 0 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: var(--text-dark);
}

.card-header-modern i {
    font-size: 1.25rem;
    color: var(--primary-teal);
}


/* ===== UTILITY CLASSES ===== */
.btn-primary {
    background-color: var(--primary-teal);
    color: white;
    padding: 0.625rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
    text-decoration: none;
    display: inline-block;
}

.btn-primary:hover {
    background-color: var(--primary-teal-hover);
    color: white;
}

.btn-secondary {
    background-color: white;
    color: var(--primary-teal);
    padding: 0.625rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 500;
    border: 1px solid var(--border-gray);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-block;
}

.btn-secondary:hover {
    background-color: var(--bg-light);
    color: var(--primary-teal);
}

.text-primary {
    color: var(--primary-teal);
}

.text-muted {
    color: var(--text-muted);
}

.bg-primary-light {
    background-color: var(--primary-teal-light);
}

/* Bootstrap icons compatibility */
.bi {
    display: inline-block;
    vertical-align: middle;
}


/* ===== BREADCRUMB STYLES ===== */
.breadcrumb {
    background-color: transparent;
    padding: 0.75rem 0;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.breadcrumb-item {
    color: var(--text-muted);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-muted);
    content: "›";
    padding: 0 0.5rem;
}

.breadcrumb-item a {
    color: var(--primary-teal);
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb-item a:hover {
    color: var(--primary-teal-hover);
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: var(--text-dark);
    font-weight: 500;
}


/* ===== NAVBAR OVERRIDES ===== */
.navbar-toggler {
    margin-left: auto;
}

.navbar-dark.bg-primary {
    background: linear-gradient(to right, var(--primary-teal), var(--primary-teal-hover)) !important;
}

.navbar-dark .navbar-brand {
    color: white;
    font-weight: 600;
}

.navbar-dark .navbar-brand:hover {
    color: rgba(255, 255, 255, 0.9);
}

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.9);
    transition: color 0.2s;
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: white;
}

.navbar-dark .navbar-nav .nav-link.active {
    color: white;
    font-weight: 500;
}


/* ===== COOKIE CONSENT BANNER ===== */
.cookie-consent {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    z-index: 1050;
    width: calc(100% - 2rem);
    max-width: 420px;
    background-color: white;
    border-radius: 1rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--border-gray);
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    animation: slideUpCard 0.3s ease-out;
}

@keyframes slideUpCard {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cookie-consent__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cookie-consent__icon {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    background-color: var(--primary-teal-light);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--primary-teal);
}

.cookie-consent__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
}

.cookie-consent__description {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0;
}

.cookie-consent__link {
    color: var(--primary-teal);
    text-decoration: underline;
    font-weight: 500;
}

.cookie-consent__link:hover {
    color: var(--primary-teal-hover);
}

.cookie-consent__actions {
    display: flex;
    gap: 0.5rem;
}

.cookie-consent__btn {
    flex: 1;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    white-space: nowrap;
    text-align: center;
}

.cookie-consent__btn--primary {
    background-color: var(--primary-teal);
    color: white;
}

.cookie-consent__btn--primary:hover {
    background-color: var(--primary-teal-hover);
}

.cookie-consent__btn--secondary {
    background-color: white;
    color: var(--text-dark);
    border: 1px solid var(--border-gray);
}

.cookie-consent__btn--secondary:hover {
    background-color: var(--bg-light);
}


/* ===== EVENT CARDS ===== */
.event-card {
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid var(--border-gray);
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: white;
    min-height: 130px;
    position: relative;
}

.event-card__status {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 0.6875rem;
    z-index: 1;
}

.event-card__spots {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    z-index: 1;
}

.ev-avail {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.625rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.ev-avail--open {
    background: var(--primary-teal-light, #e6f2f2);
    color: var(--primary-teal, #1e5555);
    border: 1.5px solid var(--primary-teal, #1e5555);
}

.ev-avail--full {
    background: #FEE2E2;
    color: #DC2626;
    border: 1.5px solid #FCA5A5;
}

.ev-avail--low {
    background: #FFEDD5;
    color: #9A3412;
    border: 1.5px solid #FB923C;
}

.event-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.event-card__thumb {
    width: 88px;
    height: 88px;
}

.event-card__thumb-img {
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: 0.375rem;
}

.event-card__thumb-placeholder {
    width: 88px;
    height: 88px;
    border-radius: 0.375rem;
    background: linear-gradient(135deg, var(--primary-teal-light) 0%, var(--secondary-cyan) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-teal);
    font-size: 1.75rem;
}

.event-card__content {
    min-width: 0;
}

.event-card__title {
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Reserve room for the absolutely-positioned top-right status badge (ASAP/SOON) so a long
       title truncates before it instead of running underneath it. */
    padding-right: 2.75rem;
}

.event-card__organization {
    font-size: 0.8125rem;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-card__org-logo {
    width: 1rem;
    height: 1rem;
    object-fit: cover;
    border-radius: 2px;
    vertical-align: -2px;
}

.event-card__datetime {
    font-size: 0.8125rem;
}


/* Form Group Styling */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-label {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    display: block;
}

.form-control,
.form-select,
.form-control:disabled,
.form-select:disabled {
    border: 1px solid var(--border-gray);
    border-radius: 0.375rem;
    padding: 0.65rem 0.95rem;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background-color: white;
    color: var(--text-dark);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-teal);
    box-shadow: 0 0 0 2px rgba(30, 85, 85, 0.1);
    outline: none;
}

.form-control:disabled,
.form-select:disabled {
    background-color: #F9FAFB;
    color: var(--text-muted);
    cursor: not-allowed;
}

textarea.form-control {
    min-height: 120px;
    resize: vertical;
    font-family: inherit;
}

/* Form Text */
.form-text {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

/* Form Hints */
.form-text.text-muted {
    color: rgba(193, 158, 12, 0.75) !important;
    font-size: 0.8rem;
}

/* Form Row Spacing */
.row {
    margin-bottom: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

.row > [class*="col-"] {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.row > .col-md-12 {
    width: 100%;
}

.row > .col-md-6 {
    width: 100%;
}

.row > .col-md-4 {
    width: 100%;
}

@media (min-width: 768px) {
    .row > .col-md-6 {
        width: 50%;
    }

    .row > .col-md-4 {
        width: 33.333%;
    }
}

/* Form Buttons */
.form-group .btn {
    padding: 0.85rem 2rem;
    font-weight: 700;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    cursor: pointer;
    font-size: 0.95rem;
    border: 2px solid transparent;
    display: inline-block;
    margin-top: 1rem;
}

.form-group .btn-success {
    background-color: var(--primary-teal);
    border-color: var(--primary-teal);
    color: white;
}

.form-group .btn-success:hover {
    background-color: var(--primary-teal-hover);
    border-color: var(--primary-teal-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(30, 85, 85, 0.3);
}

.form-group .btn-secondary {
    background-color: white;
    border-color: var(--border-gray);
    color: var(--text-dark);
    margin-left: 0.75rem;
}

.form-group .btn-secondary:hover {
    background-color: var(--bg-light);
    border-color: var(--primary-teal);
    color: var(--primary-teal);
}

.form-group .btn-outline-secondary {
    color: var(--text-dark);
    border-color: var(--border-gray);
}

.form-group .btn-outline-secondary:hover {
    background-color: var(--bg-light);
    border-color: var(--primary-teal);
    color: var(--primary-teal);
}

.form-group .btn-outline-primary {
    color: var(--primary-teal);
    border-color: var(--primary-teal);
}

.form-group .btn-outline-primary:hover {
    background-color: var(--primary-teal-light);
    border-color: var(--primary-teal);
    color: var(--primary-teal);
}

/* Error and Success Messages */
.invalid-feedback,
.valid-feedback {
    font-size: 0.85rem;
    margin-top: 0.5rem;
    display: block;
}

.invalid-feedback {
    color: #DC2626;
}

.valid-feedback {
    color: #059669;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 767px) {
    .calendar-widget {
        margin-bottom: 1rem;
    }

    .event-card {
        margin-bottom: 1rem;
    }
}


/* ===== EVENT VIEW PAGE STYLES ===== */
.volunteer-event-view {
    background-color: var(--bg-light);
    min-height: 100vh;
}

.volunteer-event-view .section-wrapper {
    background-color: transparent;
}

/* Breadcrumb styling for event view */
.volunteer-event-view .breadcrumb {
    margin-bottom: 2rem;
}

/* Modal enhancements */
.modal {
    z-index: 1050 !important;
}

.modal-content {
    border: 1px solid var(--border-gray);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5) !important;
    opacity: 1 !important;
    z-index: 1040 !important;
}

.modal-backdrop.show {
    opacity: 1 !important;
}

.modal-header {
    background-color: white;
    padding: 1.5rem;
}

.modal-title {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 1.25rem;
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    padding: 1rem 1.5rem;
}

/* Form controls styling */
.form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--border-gray);
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s;
}

.form-check-input:checked {
    background-color: var(--primary-teal);
    border-color: var(--primary-teal);
}

.form-check-input:focus {
    border-color: var(--primary-teal);
    box-shadow: 0 0 0 0.25rem rgba(30, 85, 85, 0.25);
}

/* Responsive adjustments for event view */
@media (max-width: 991px) {
    .event-detail-item {
        padding: 1rem;
    }

    .event-section {
        padding: 1.5rem;
    }
}

@media (max-width: 768px) {
    .section-wrapper {
        padding: 0 0.75rem;
    }

    .event-section {
        padding: 1rem;
    }

    .event-details-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .event-apply-card {
        position: static !important;
        margin-bottom: 1.5rem;
    }

    .sticky-top {
        position: static !important;
        top: auto !important;
    }
}


/* ===== Form group responsive (shared w/ org settings forms) ===== */
@media (max-width: 768px) {
    .form-group {
        margin-bottom: 1rem;
    }
    .row {
        margin-bottom: 1rem;
    }
    .form-group .btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
        display: inline-block;
        margin-top: 0.75rem;
    }
    .form-group .btn-secondary {
        margin-left: 0.5rem;
        margin-top: 0.75rem;
    }
}

@media (max-width: 480px) {
    .form-group .btn {
        font-size: 0.85rem;
        padding: 0.65rem 1.25rem;
        width: 100%;
        margin-left: 0;
    }
    .form-group .btn-secondary {
        margin-left: 0;
        margin-top: 0.5rem;
    }
}

/* ================================
   EVENTS INDEX PAGE
   ================================ */

/* --- Stat Cards --- */
.ev-stat-card {
    background-color: var(--primary-teal-light);
    border-radius: 0.75rem;
    padding: 1.25rem 1rem;
    text-align: center;
}

.ev-stat-card__label {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
    line-height: 1.3;
}

.ev-stat-card__value {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1;
}

/* --- Rating Card --- */
.ev-rating-card {
    background-color: #fff;
    border: 1px solid var(--border-gray);
    border-radius: 0.75rem;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    transition: background-color 0.15s, box-shadow 0.15s;
}

.ev-rating-card:hover {
    background-color: #f8f9fa;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.ev-rating-card__label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
}

.ev-rating-card__right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ev-rating-card__stars {
    display: flex;
    gap: 0.1rem;
    font-size: 1.4rem;
    color: #f5a623;
}

.ev-rating-card__value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
}

.ev-rating-card__chevron {
    color: var(--text-muted);
    font-size: 1rem;
    transition: transform 0.2s ease;
}

/* --- Reviews Dropdown --- */
.ev-reviews-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--border-gray);
    border-radius: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.75rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ev-reviews-dropdown--open {
    max-height: 400px;
    opacity: 1;
    padding: 0.75rem;
}

.ev-reviews-dropdown__empty {
    font-size: 0.875rem;
    color: var(--text-muted);
    text-align: center;
    padding: 1rem;
    margin: 0;
}

.ev-reviews-dropdown__item {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-gray);
    margin-bottom: 0.5rem;
}

.ev-reviews-dropdown__item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.ev-reviews-dropdown__stars {
    display: flex;
    gap: 0.1rem;
    font-size: 0.9rem;
    color: #f5a623;
    margin-bottom: 0.4rem;
}

.ev-reviews-dropdown__comment {
    font-size: 0.8rem;
    color: var(--text-dark);
    margin: 0.3rem 0;
    line-height: 1.3;
}

.ev-reviews-dropdown__date {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: block;
    margin-top: 0.25rem;
}

.ev-reviews-dropdown__footer {
    padding: 0.5rem 0 0 0;
    margin-top: 0.5rem;
    border-top: 1px solid var(--border-gray);
}

.ev-reviews-dropdown__modal-btn {
    display: block;
    width: 100%;
    padding: 0.5rem;
    background: none;
    border: none;
    color: var(--primary-teal);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s;
    text-align: center;
}

.ev-reviews-dropdown__modal-btn:hover {
    color: var(--primary-teal-hover);
}

/* --- Performance & Feedback Modal --- */
.ev-perf-subtitle {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0.15rem 0 0;
}

.ev-perf-overview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    background: var(--primary-teal-light);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.ev-perf-stat {
    background: #fff;
    border-radius: 0.6rem;
    padding: 0.9rem 1.1rem;
}

.ev-perf-stat__head {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ev-perf-stat__head .bi {
    color: #f5a623;
}

.ev-perf-stat__value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-top: 0.35rem;
}

.ev-perf-stat__suffix {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
}

/* Overview tiles double as accordion triggers of their detail sections; the chevron flips via the
   aria-expanded state Bootstrap maintains on the trigger (same mechanism as .ev-rating-item__head). */
.ev-perf-stat--toggle {
    position: relative;
    padding-right: 2.4rem;
    cursor: pointer;
}

.ev-perf-stat--toggle:hover {
    box-shadow: 0 2px 10px rgba(30, 85, 85, 0.1);
}

.ev-perf-stat--toggle:focus-visible {
    outline: 0.2rem solid var(--secondary-cyan);
    outline-offset: 0.125rem;
}

.ev-perf-stat__chevron {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    color: #9ca3af;
    transition: transform 0.2s ease;
}

.ev-perf-stat--toggle[aria-expanded="true"] .ev-perf-stat__chevron {
    transform: translateY(-50%) rotate(180deg);
}

.ev-perf-section {
    margin-bottom: 1.5rem;
}

.ev-perf-section__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
}

.ev-perf-criteria {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ev-perf-criteria__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--text-dark);
}

.ev-perf-criteria__value {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 600;
}

.ev-perf-criteria__value .bi {
    color: #f5a623;
}

.ev-perf-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ev-perf-skill-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.85rem;
    border-radius: 2rem;
    font-size: 0.85rem;
    font-weight: 500;
    background: #F3F4F6;
    color: var(--text-dark);
}

/* Group colours — soft vs hard skills read as two distinct categories (not a top-N ranking).
   Same tokens used for the per-review pills so a group looks identical everywhere:
   soft = --primary-teal-light (#DFF2F2), hard = --secondary-cyan (#A8E0E0). */
.ev-perf-skill-pill--soft {
    background: var(--primary-teal-light);
    color: var(--primary-teal);
}

.ev-perf-skill-pill--hard {
    background: var(--secondary-cyan);
    color: var(--text-dark);
}

.ev-perf-skill-pill__count {
    opacity: 0.75;
}

/* ===== ENDORSEMENT REWORK — trait badges, next goal, empty state ===== */
/* The volunteer view shows only positive recognition (no numeric score). These support the trait
   badges in #volPerfCriteria, the "next goal" hint, and the no-feedback empty state. */
.ev-perf-goal {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.75rem 0 0;
    padding: 0.55rem 0.85rem;
    border-radius: 0.5rem;
    background: #F3F4F6;
    color: var(--text-dark);
    font-size: 0.85rem;
}

.ev-perf-goal .bi {
    color: var(--primary-teal);
}

.ev-perf-goal--done {
    background: rgba(16, 185, 129, 0.1);
}

.ev-perf-empty {
    text-align: center;
    padding: 1.5rem 1rem 0.5rem;
}

.ev-perf-empty__icon {
    font-size: 2.25rem;
    color: var(--primary-teal);
}

.ev-perf-empty__title {
    margin: 0.6rem 0 0.25rem;
    font-weight: 600;
    color: var(--text-dark);
}

.ev-perf-empty__text {
    margin: 0 auto 1rem;
    max-width: 22rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.ev-perf-empty__btn {
    background: var(--primary-teal);
    color: #fff;
    font-weight: 600;
    padding: 0.5rem 1.1rem;
    border-radius: 0.5rem;
}

.ev-perf-empty__btn:hover {
    background: var(--primary-teal-hover);
    color: #fff;
}

.ev-perf-close-btn {
    width: 100%;
    background: var(--primary-teal);
    color: #fff;
    font-weight: 600;
    padding: 0.65rem;
    border-radius: 0.5rem;
}

.ev-perf-close-btn:hover {
    background: var(--primary-teal-hover);
    color: #fff;
}

/* --- Performance modal tiles on phones --------------------------------------------------------- */
@media (max-width: 480px) {
    .ev-perf-overview {
        gap: 0.75rem;
        padding: 0.85rem;
    }
    .ev-perf-stat {
        padding: 0.7rem 0.8rem;
    }
    .ev-perf-stat__value {
        font-size: 1.5rem;
    }
    .ev-perf-stat__suffix {
        display: block;
        font-size: 0.78rem;
        margin-top: 0.15rem;
    }
}

.ev-ratings-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ev-rating-item {
    padding: 0.85rem 1rem;
    border: 1px solid var(--border-gray);
    border-radius: 0.6rem;
    background-color: #f8f9fa;
}

.ev-rating-item__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: pointer;
}

.ev-rating-item__head-main {
    min-width: 0;
}

.ev-rating-item__head-right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

.ev-rating-item__score-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.65rem;
    border-radius: 2rem;
    background: #fff7e6;
    color: #92400e;
    font-size: 0.85rem;
    font-weight: 600;
}

.ev-rating-item__score-badge .bi {
    color: #f5a623;
}

/* Positive per-review badge — replaces the old numeric star score with an endorsement count. */
.ev-rating-item__endorse-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.65rem;
    border-radius: 2rem;
    background: rgba(16, 185, 129, 0.1);
    color: #047857;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.ev-rating-item__endorse-badge .bi {
    color: var(--primary-teal);
}

.ev-rating-item__chevron {
    color: #9ca3af;
    transition: transform 0.2s ease;
}

.ev-rating-item__head[aria-expanded="true"] .ev-rating-item__chevron {
    transform: rotate(180deg);
}

.ev-rating-item__meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* Hours volunteered — shown inside the expanded review detail */
.ev-rating-item__hours-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.2rem 0 0.6rem;
}

.ev-rating-item__hours-row-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.ev-rating-item__hours {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    border-radius: 2rem;
    background: var(--primary-teal-light);
    color: var(--primary-teal);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Hours not recorded yet — muted, dashed placeholder so the slot stays put */
.ev-rating-item__hours--empty {
    background: var(--bg-light);
    color: var(--text-muted);
    border: 1px dashed var(--border-gray);
    padding: calc(0.25rem - 1px) calc(0.65rem - 1px);
}

.ev-rating-item__event {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
}

.ev-rating-item__criteria {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0.6rem 0;
}

.ev-rating-item__criteria-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.ev-rating-item__criteria-pill {
    font-size: 0.75rem;
    color: var(--primary-teal);
    background: var(--primary-teal-light);
    border-radius: 0.4rem;
    padding: 0.2rem 0.5rem;
}

.ev-rating-item__criteria-pill .bi {
    color: var(--primary-teal);
}

.ev-rating-item__comment {
    font-size: 0.85rem;
    color: var(--text-dark);
    line-height: 1.5;
    margin: 0 0 0.5rem 0;
    padding-left: 0.6rem;
    border-left: 3px solid var(--border-gray);
    font-style: italic;
}

.ev-rating-item__skills {
    margin-top: 0.4rem;
}

.ev-rating-item__skills-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    display: block;
    margin-bottom: 0.25rem;
}

.ev-rating-item__skills-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.ev-skill-tag {
    display: inline-block;
    background: var(--secondary-cyan);
    color: var(--text-dark);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Badge/certificate links inside an expanded review — mirror of the hours-list actions. */
.ev-rating-item__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem 1rem;
    margin-top: 0.5rem;
}

.ev-rating-item__action {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--primary-teal);
    text-decoration: none;
}

.ev-rating-item__action:hover {
    text-decoration: underline;
}

/* --- Reviews Page --- */
.ev-reviews-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ev-review-item {
    background: #fff;
    border: 1px solid var(--border-gray);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
}

.ev-review-item__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.375rem;
}

.ev-review-item__stars {
    font-size: 1rem;
    color: #f5a623;
}

.ev-review-item__date {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.ev-review-item__event {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.375rem;
}

.ev-review-item__comment {
    font-size: 0.9rem;
    color: var(--text-dark);
    margin: 0;
    line-height: 1.5;
}

.ev-back-link {
    font-size: 0.875rem;
    color: var(--text-muted);
    text-decoration: none;
}

.ev-back-link:hover {
    color: var(--text-dark);
}

/* --- Tabs --- */
.ev-tabs {
    border-bottom: 2px solid var(--border-gray);
    gap: 0;
}

.ev-tabs__btn {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 0.6rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.ev-tabs__btn.active {
    color: var(--primary-teal);
    border-bottom-color: var(--primary-teal);
    font-weight: 600;
}

.ev-tabs__btn:not(.active):hover {
    color: var(--text-dark);
}

.ev-tabs__count {
    display: inline-block;
    min-width: 1.4rem;
    padding: 0.1rem 0.4rem;
    margin-left: 0.4rem;
    border-radius: 1rem;
    background: var(--bg-light, #eef1f4);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
}

.ev-tabs__btn.active .ev-tabs__count {
    background: var(--primary-teal);
    color: #fff;
}

/* --- Empty State --- */
.ev-empty {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--text-muted);
}

.ev-empty__icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
}

.ev-empty__text {
    font-size: 1rem;
}

/* ===== Legacy profile mockup pages (views/profile/alerts.php, calendar.php) ===== */
.alerts-view .border-bottom:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.alerts-view__hero-icon {
    font-size: 64px;
}

.alerts-view__avatar {
    width: 48px;
    height: 48px;
}

.alerts-view__avatar-icon {
    font-size: 24px;
}

.alerts-view__avatar-icon--warning {
    color: #856404;
}

.alerts-view__empty-icon {
    font-size: 48px;
}

.calendar-view__hero-icon {
    font-size: 64px;
}

.calendar-view .badge {
    font-size: 12px;
    padding: 6px 12px;
}

/* ===== views/profile/browse.php ===== */
.browse-events__event-img {
    height: 200px;
    object-fit: cover;
}

.browse-events .input-group-text {
    border-right: 0;
}
.browse-events .form-control {
    border-left: 0;
}
.browse-events .form-control:focus {
    border-color: #ced4da;
    box-shadow: none;
}

/* ===== views/site/settings.php ===== */
.settings-page .list-group-item {
    border-radius: 8px;
    margin-bottom: 2px;
}

.settings-page .list-group-item:hover {
    background-color: rgba(246, 101, 32, 0.05);
}

.settings-page .table td {
    padding: 12px 0;
}

/* ===== views/profile/edit.php ===== */
.edit-profile-container {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

.edit-profile-main {
    flex: 1;
    min-width: 300px;
}

.edit-profile-sidebar {
    width: 300px;
    flex-shrink: 0;
}

.edit-profile-container .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.edit-profile-container .form-group,
.edit-profile-container .form-group-full {
    margin-bottom: 16px;
}

.profile-edit-form h3 {
    font-size: 20px;
    font-weight: 600;
    margin-top: 32px;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border-light);
}

.profile-edit-form h3:first-of-type {
    margin-top: 24px;
}

@media (max-width: 768px) {
    .edit-profile-container {
        flex-direction: column;
    }

    .edit-profile-sidebar {
        width: 100%;
    }

    .edit-profile-container .form-row {
        grid-template-columns: 1fr;
    }
}


/* ===== views/event/view.php ===== */
.ev-info-text--grow {
    flex: 1;
}

.cancel-modal-warning-icon {
    color: #DC3545;
    font-size: 1.5rem;
}

.cancel-modal-info {
    background-color: #E7F3FF;
}

.cancel-modal-info__icon {
    color: #0056B3;
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.cancel-modal-info__title {
    color: #0056B3;
    display: block;
    margin-bottom: 0.5rem;
}

.cancel-modal-info__list {
    font-size: 0.9rem;
    padding-left: 1.2rem;
}

/* ===== views/event/_view_content.php ===== */
.share-event-hint {
    font-size: .9rem;
}

.share-event-textarea {
    font-family: monospace;
    font-size: .88rem;
    resize: none;
}

/* ===== views/profile/view.php ===== */
.profile-view-avatar {
    width: 80px;
    height: 80px;
    font-size: 40px;
}

.profile-view-avatar__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== views/organization-auth/pending-approval.php ===== */
.pending-approval-icon {
    font-size: 48px;
    color: #f9a825;
}

/* ===== views/layouts/main.php ===== */
.layout-main {
    margin-top: 70px;
}

/* ===== modules/volunteers/views/events/_event-card.php ===== */
.event-card--clickable {
    cursor: pointer;
}

.event-card__status--soon {
    background: #EA580C;
}

/* ===== POSITION STATUS CHIPS ===== */
/* One tinted chip per lifecycle state, shared by the org and volunteer sides
   (positions views). Light same-hue fill + saturated text + a currentColor dot:
   brighter and far easier to tell apart at a glance than solid dark badges.
   Tints reuse the my-events badge palette (100-tint bg / 800-shade text, all
   ≥7:1 contrast); violet, pink and sky are added for the mid-pipeline stages. */
.pos-status { display: inline-flex; align-items: center; gap: .35rem; padding: .24rem .62rem; border-radius: 999px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; line-height: 1.2; white-space: nowrap; }
.pos-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
/* application pipeline */
.pos-status--pending   { background: #fef3c7; color: #92400e; }
.pos-status--reviewing { background: #dbeafe; color: #1e40af; }
.pos-status--interview { background: #ede9fe; color: #5b21b6; }
.pos-status--offer     { background: #fce7f3; color: #9d174d; }
.pos-status--hired     { background: #d1fae5; color: #065f46; }
.pos-status--rejected  { background: #fee2e2; color: #991b1b; }
.pos-status--withdrawn { background: #f3f4f6; color: #4b5563; }
/* assignment lifecycle */
.pos-status--active  { background: #d1fae5; color: #065f46; }
.pos-status--on-hold { background: #fef3c7; color: #92400e; }
.pos-status--ended   { background: #f3f4f6; color: #4b5563; }
/* position lifecycle — Open wears the brand teal per the design system */
.pos-status--open      { background: var(--primary-teal-light); color: var(--primary-teal); }
.pos-status--draft     { background: #fef3c7; color: #92400e; }
.pos-status--closed    { background: #d1fae5; color: #065f46; }
.pos-status--cancelled { background: #f3f4f6; color: #4b5563; }

/* ===== Select2 checkbox options — opt-in via pluginOptions.dropdownCssClass = 'select2--checkboxes'.
   Lives in common.css because the Select2 dropdown is appended to <body>, so it is shared by both the
   volunteer and organization zones. Pairs with each zone's teal highlight/selected rules. ===== */
.select2--checkboxes .select2-results__option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.select2--checkboxes .select2-results__option::before {
    content: "";
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    border: 1.5px solid var(--border-gray, #c9d6d6);
    border-radius: 0.25rem;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.8rem;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}
/* Checked box — teal fill + white check for the currently selected options. */
.select2--checkboxes .select2-results__option[aria-selected="true"]::before {
    border-color: var(--primary-teal);
    background-color: var(--primary-teal);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M13 4.5L6.5 11L3 7.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Keep the empty box readable when a non-selected row is highlighted (teal background, white text). */
.select2--checkboxes .select2-results__option--highlighted:not([aria-selected="true"])::before {
    border-color: rgba(255, 255, 255, 0.9);
    background-color: transparent;
}
/* The checkbox alone marks the selection — drop the teal row fill so it isn't doubly emphasised
   (hover still highlights via the --highlighted rule). The extra :not() lifts specificity above the
   zone's [aria-selected="true"] fill rule regardless of stylesheet order. */
.select2--checkboxes .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
    background-color: transparent !important;
    color: inherit !important;
}

/* ===== organizations/profile-public/_public.php — rendered under landing/volunteer/organization
   layouts depending on visitor role (org-public-profile-layout spec), so its styles live here
   (common.css, shared by all three), not in a single zone's CSS file. ===== */
.org-public-profile {
    max-width: 860px;
}
.org-public-profile__banner {
    height: 220px;
}
.org-public-profile__logo-placeholder {
    width: 80px;
    height: 80px;
    font-size: 2rem;
}
.org-public-profile__title {
    font-size: 1.75rem;
    font-weight: 700;
}
.org-public-profile__event-img {
    height: 140px;
    object-fit: cover;
}
.org-public-profile__banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* A logo is not a photo: it is whatever shape the organization made it, most often wide. Fitting it
   inside the circle (with a white bed behind it) shows the whole mark; cropping to fill would cut
   the ends off every wordmark we ever copy from a website. */
.org-public-profile__logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
    background-color: #fff;
    padding: 4px;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}
.org-public-profile__off-btn {
    font-size: 1.25rem;
    padding: .75rem 3rem;
}
.org-ai-fill-banner {
    background-color: rgba(23, 162, 149, .08);
    border: 1px solid rgba(23, 162, 149, .35);
    color: #1e3a3a;
}
.org-ai-fill-banner__btn {
    font-size: 1.25rem;
    padding: .75rem 3rem;
}
/* Public profile is off: the preview content behind it stays blurred and inert. */
.org-public-profile__hidden {
    position: relative;
    filter: blur(6px);
    pointer-events: none;
    user-select: none;
}
.org-public-profile__hidden::after {
    content: '';
    position: absolute;
    inset: -1rem;
    background: rgba(255, 255, 255, .55);
}
/* Owner-only "field is empty" hint, with a greyed-out example of a filled value. */
.org-public-profile__empty-hint {
    color: #c3c3c3;
    font-size: 0.7rem;
}
.org-public-profile__empty-example {
    font-style: italic;
}
.org-public-profile__empty-edit {
    color: #5f7575;
    font-size: 1.1rem;
    line-height: 1;
}
.org-public-profile__empty-edit:hover {
    color: var(--primary-teal);
}

/* Owner-only "AI suggests" line under a field the latest ready research proposes changing —
   shown next to the current value (or instead of the empty-hint above, when the field is empty). */
.org-public-profile__ai-note {
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: var(--primary-teal);
}
.org-public-profile__diff-new {
    font-weight: 600;
}
.org-public-profile__diff-new-logo {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: cover;
    margin-left: 0.375rem;
    vertical-align: middle;
}

/* Owner-only, while a research suggestion is waiting: the proposed logo fills the profile circle
   instead of the generic placeholder, so the owner sees the actual result before pressing Save.
   The dashed teal ring and the badge are what keep it honest — this is a proposal on screen, not
   something already stored. */
.org-public-profile__logo-wrap {
    position: relative;
    flex-shrink: 0;
    /* The circle is an inline image; without this the wrapper keeps a descender's worth of blank
       space under it and the badge sits crooked. */
    line-height: 0;
}
.org-public-profile__logo--suggested {
    border-style: dashed;
    border-color: var(--primary-teal);
}
.org-public-profile__logo-badge {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: var(--primary-teal);
    color: #fff;
    font-size: 0.75rem;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}

/* Preview of an AI suggestion: sticks to the top so Save and Edit stay reachable while the
   organization scrolls through the page it is about to accept. */
.org-preview-bar {
    position: sticky;
    top: 0.75rem;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1.125rem;
    border: 1px solid #e3e8ea;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 20px rgba(30, 85, 85, .10);
}
.org-preview-bar__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #1e3a3a;
}
.org-preview-bar__hint {
    margin: 0.125rem 0 0;
    font-size: 0.875rem;
    color: #6b7b7b;
}
.org-preview-bar__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

@media (max-width: 575.98px) {
    .org-preview-bar__actions {
        width: 100%;
    }
    .org-preview-bar__actions > * {
        flex: 1 1 0;
    }
    .org-preview-bar__actions .btn {
        width: 100%;
    }
}

/* ===== organizations/profile-public/_edit.php — owner-only, but still shared (organization
   layout has its own CSS bundle without this), so it lives here too. ===== */
.org-profile-edit__letter {
    white-space: pre-line;
}
/* Same reasoning as .org-public-profile__logo — the preview must show what will actually be saved. */
.org-profile-edit__logo-preview {
    width: 64px;
    height: 64px;
    object-fit: contain;
    background-color: #fff;
    padding: 3px;
}
.org-profile-edit__banner-preview {
    max-width: 100%;
    max-height: 120px;
    object-fit: cover;
}

/* "Fill with AI" trigger on the profile editor — teal (AI action, not XP, so never gold) */
.btn-ai-fill {
    display: inline-flex;
    align-items: center;
    background-color: var(--primary-teal);
    border: 1px solid var(--primary-teal);
    color: #fff;
    font-weight: 600;
    padding: 0.5rem 1.25rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s, border-color 0.2s;
}

.btn-ai-fill:hover,
.btn-ai-fill:focus-visible {
    background-color: var(--primary-teal-hover);
    border-color: var(--primary-teal-hover);
    color: #fff;
}

.org-ai-fill-hint {
    max-width: 640px;
}