/**
 * cards.css — Opportunity cards, progress bars, category chips/toggles,
 * heart rating, badge pills, toast notification, and homepage styles.
 */

/* ── My Opportunities past card (list-row-item variant, muted) ── */
.myopps-past-card {
    background-color: var(--color-gray-50);
}

.list-row-item.myopps-past-card:hover {
    background-color: var(--color-gray-100);
}

/* ── Recent / upcoming opportunity card ── */
.opp-card {
    border-width: 1px;
    border-style: solid;
    border-color: var(--color-primary-300);
    border-radius: 0.75rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.opp-card-upcoming {
    border-color: var(--color-primary-200);
    transition: border-color 0.15s;
}

.opp-card-past {
    background-color: var(--color-gray-100);
    border-color: var(--color-gray-300);
}

.opp-card-upcoming:hover {
    border-color: var(--color-primary-400);
}

/* ── Upcoming card title row (title + bell button) ── */
.opp-card-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.125rem;
}

/* ── Upcoming card location + actions inline row ── */
.opp-card-location-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: -0.25rem;
}

/* ── Bell reminder toggle button ── */
.opp-card-bell-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0.125rem;
    color: var(--color-gray-400);
    cursor: pointer;
    border-radius: 0.25rem;
    line-height: 0;
    transition: color 0.15s;
}

.opp-card-bell-btn[data-reminded="true"] {
    color: var(--color-primary-500);
    background-color: var(--color-primary-100);
    border: 1px solid var(--color-primary-300);
}

.opp-card-bell-btn:hover {
    color: var(--color-navy);
}

/* ── Progress bar ── */
.progress-track {
    background-color: var(--color-primary-100);
    border-radius: 9999px;
    height: 0.75rem;
    overflow: hidden;
}

.progress-fill {
    background-color: var(--color-navy);
    height: 100%;
    border-radius: 9999px;
    transition: width 0.5s;
}

/* ── Category chip (My Opportunities filter) ── */
.cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    background-color: var(--color-primary-100);
    color: var(--color-navy);
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
}

.cat-chip > button {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-navy);
    opacity: 0.6;
    padding: 0;
    line-height: 1;
}

.cat-chip > button:hover { opacity: 1; }

/* ── Category toggle button (My Opportunities) ── */
.cat-toggle {
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--color-primary-200);
    color: var(--color-gray-600);
    background: none;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.cat-toggle[aria-pressed="true"],
.cat-toggle.is-active {
    background-color: var(--color-navy);
    color: var(--color-surface);
    border-color: var(--color-navy);
}

.cat-toggle:hover:not([aria-pressed="true"]):not(.is-active) {
    border-color: var(--color-navy);
    color: var(--color-navy);
}

/* ── Heart rating ── */
.heart-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.125rem;
    color: var(--color-gray-300);
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

/* When the containing group has been rated, unfilled hearts show as light rose. */
.hearts-group[data-rated="true"] .heart-btn {
    color: var(--color-heart-empty-rated);
}

/* Hearts at or below the selected value are solid and filled. */
.hearts-group[data-rated="true"] .heart-btn[aria-pressed="true"] {
    color: var(--color-heart-filled);
}

.hearts-group[data-rated="true"] .heart-btn[aria-pressed="true"] > svg {
    fill: currentColor;
}

/* Hover preview: hearts up to the cursor position appear filled. */
.hearts-group[data-hovering="true"] .heart-btn[data-hover-filled="true"] {
    color: var(--color-heart-filled);
}

.hearts-group[data-hovering="true"] .heart-btn[data-hover-filled="true"] > svg {
    fill: currentColor;
}

/* ── Badge pills ── */
.badge-logged {
    font-size: 0.75rem;
    background-color: var(--color-success-bg);
    color: var(--color-success-text);
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
}

.badge-unlogged {
    font-size: 0.75rem;
    background-color: var(--color-warning-bg);
    color: var(--color-warning-text);
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
}

/* ── Toast notification ── */
.toast {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 50;
    background-color: var(--color-navy);
    color: var(--color-surface);
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px -5px var(--color-black-40);
    font-size: 0.875rem;
    font-weight: 500;
    display: none;
    white-space: nowrap;
    max-width: 24rem;
    white-space: normal;
}

.toast.is-visible {
    display: block;
    animation: toastIn 0.25s ease-out forwards;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Homepage entry card ── */
#home-card {
    background-color: var(--color-surface);
    border-radius: 1rem;
    border-width: 1px;
    border-style: solid;
    border-color: var(--color-primary-100);
    box-shadow: 0 1px 3px var(--color-black-5);
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 28rem;
    width: 100%;
}

/* ── Homepage dot-grid background ── */
#home-bg {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--color-gray-50);
    background-image: radial-gradient(circle, var(--color-primary-100) 1px, transparent 1px);
    background-size: 24px 24px;
    padding: 1rem;
}

/* ── Circular progress (SVG-based) ── */
.progress-ring {
    transform: rotate(-90deg);
}

/* ── Admin management rows ── */
.admin-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--color-primary-200);
    background-color: var(--color-surface);
    transition: border-color 0.15s;
}

.admin-row:hover {
    border-color: var(--color-primary-400);
}

.admin-row--expired {
    background-color: var(--color-gray-50);
    border-color: var(--color-gray-300);
    opacity: 0.75;
}

.admin-row--expired:hover {
    border-color: var(--color-gray-400);
}

/* ── Admin row leaf nodes ── */
.admin-row:not(.student-row) > div:first-child > div > span:first-child {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-navy);
    word-break: break-all;
}

.admin-row:not(.student-row) > div:first-child > p {
    font-size: 0.75rem;
    color: var(--color-gray-500);
    margin-top: 0.125rem;
}

.admin-row:not(.student-row) > div:first-child > p:last-of-type {
    color: var(--color-gray-400);
}

/* ── Student row leaf nodes ── */
.student-row > div:first-child > p {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-navy);
}

.student-row > div:first-child > span:first-of-type {
    font-size: 0.75rem;
    color: var(--color-gray-500);
    flex-shrink: 0;
}

.student-row > div:first-child > span:nth-of-type(2) {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

/* ── Expired badge inside admin email row ── */
.admin-row--expired > div:first-child > div:first-child > span:last-child {
    font-size: 0.7rem;
    font-weight: 600;
    background-color: var(--color-error-bg);
    color: var(--color-error-text);
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    flex-shrink: 0;
}

/* ── Map info window ── */
.map-info-window {
    font-family: sans-serif;
    min-width: 200px;
    padding: 4px 16px 14px;
}

/* map-info-title/address/date/button replaced with structural selectors in map.css */

.admin-list-placeholder {
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-gray-400);
    padding: 2rem 0;
}

.admin-list-error {
    color: var(--color-error-text);
}

/* ── Admin permission checkboxes ── */
#admin-perm-list > div {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.375rem 0;
}

#admin-perm-list input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-navy);
    cursor: pointer;
    flex-shrink: 0;
}

#admin-perm-list label {
    font-size: 0.875rem;
    color: var(--color-gray-700);
    cursor: pointer;
    user-select: none;
}