/* Base typography */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

/* SOS brand + Bootstrap overrides */
:root {
    /* Brand colors from the new logo */
    --sos-red: #E81D25;
    --sos-blue: #1B75BC;
    --sos-blue-soft: #9FD8F6;
    --sos-navy: #0F2C3F;
    --sos-gold: #CFBA8E;
    /* Override Bootstrap theme tokens that were lime/minty before */
    --bs-primary: var(--sos-red);
    --bs-secondary: var(--sos-blue);
    --bs-info: var(--sos-blue-soft);
    /* 🔵 Treat "success" as SOS blue, not green */
    --bs-success: var(--sos-blue);
    --bs-success-rgb: 27, 117, 188;
    --bs-link-color: var(--sos-blue);
    --bs-link-hover-color: #124568;
    /* Focus ring now based on SOS red */
    --bs-focus-ring-color: rgba(232, 29, 37, 0.25);
}


/* Accessible focus styles using SOS red instead of the old blue/lime */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #ffffff, 0 0 0 0.25rem rgba(232, 29, 37, 0.55);
}
/* Override Bootstrap "success" buttons to use SOS blue instead of green */
.btn-success {
    color: #fff;
    background-color: var(--bs-success);
    border-color: var(--bs-success);
}

    .btn-success:hover,
    .btn-success:focus,
    .btn-success:active,
    .btn-success:active:focus,
    .btn-success:focus-visible {
        color: #fff;
        background-color: #155a8c; /* darker blue for hover/active */
        border-color: #155a8c;
    }

/* Outline success buttons */
.btn-outline-success {
    color: var(--bs-success);
    border-color: var(--bs-success);
}

    .btn-outline-success:hover,
    .btn-outline-success:focus,
    .btn-outline-success:active,
    .btn-outline-success:active:focus,
    .btn-outline-success:focus-visible {
        color: #fff;
        background-color: var(--bs-success);
        border-color: var(--bs-success);
    }

/* Layout / footer (standard ASP.NET Core template style) */
html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: #f5f5f5;
}

/* Generic muted text color that plays nicely with the theme */
.text-muted-soft {
    color: var(--bs-secondary-color, #6c757d);
}

/* Make table headers stand out a little */
.table thead th {
    background-color: var(--bs-body-tertiary, #f1f3f5);
    font-weight: 600;
}

/* Definition lists for detail-style summaries */
dl.row {
    margin-bottom: 0;
}

    dl.row dt {
        font-weight: 600;
        border-bottom: 1px solid rgba(0, 0, 0, 0.03);
        padding-top: .25rem;
        padding-bottom: .25rem;
    }

    dl.row dd {
        border-bottom: 1px solid rgba(0, 0, 0, 0.03);
        padding-top: .25rem;
        padding-bottom: .25rem;
    }

/* Cards – light hover lift used across dashboard/profile/admin */
.card {
    border-radius: .75rem;
}

    .card.hover-lift,
    .card-hover {
        transition: transform .12s ease-out, box-shadow .12s ease-out, border-color .12s ease-out;
    }

        .card.hover-lift:hover,
        .card-hover:hover {
            transform: translateY(-1px);
            box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .08);
            border-color: rgba(15, 44, 63, 0.15);
        }

/* Small cards for student grid, etc. */
.student-card {
    transition: transform .12s ease, box-shadow .12s ease;
}

    .student-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .08);
    }

/* Sort indicators on sortable table headers (if used) */
th[aria-sort] .sort-indicator::after {
    content: "";
    display: inline-block;
    margin-left: .25rem;
    border: 4px solid transparent;
}

th[aria-sort="ascending"] .sort-indicator::after {
    border-bottom-color: currentColor;
}

th[aria-sort="descending"] .sort-indicator::after {
    border-top-color: currentColor;
}

/* Card media areas (square product/student images) */
.card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--bs-body-tertiary, #f1f3f5);
    border-bottom: 1px solid var(--bs-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
}

    .card-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Avatar placeholder (used on profile / dashboard identity cards) */
#dAvatar {
    background: var(--bs-body-tertiary, #f1f3f5);
    border-radius: 9999px;
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--sos-navy);
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .15);
}

/* SOS modal styling */
#sosModal .modal-dialog {
    max-width: 640px;
}

/* SOS modal styling */
#sosModal .modal-dialog {
    max-width: 640px;
}

/* Modal base: normal readable body */
#sosModal .modal-content {
    border-radius: .75rem;
    border: 1px solid rgba(15, 44, 63, .15);
    background: #fff; /* kill gradient bleed */
    color: #212529; /* readable default */
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, 0.35);
}

/* Gradient ONLY in header */
#sosModal .modal-header {
    background: linear-gradient(135deg, #CFBA8E 0%, #5DB3E2 60%, #0F2C3F 100%);
    color: #FAFAF7;
    border-bottom: 1px solid rgba(15, 44, 63, 0.25);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

    /* Ensure header title/icon inherits the header color */
    #sosModal .modal-header .modal-title,
    #sosModal .modal-header .modal-title i {
        color: inherit;
    }

/* Body/footer: white background + dark text */
#sosModal .modal-body,
#sosModal .modal-footer {
    background: #fff;
    color: #212529;
}


/* Modal header strip used in SOS / pledge modals */
.quickview-modal-header {
    background: transparent;
    padding-bottom: .5rem;
    margin-bottom: .75rem;
    border: 0;
    border-bottom: 1px solid rgba(15, 44, 63, 0.25);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

    /* Keep header title color consistent on gradient backgrounds */
    .quickview-modal-header .title {
        color: #FAFAF7;
    }

/* Utility: soft pill badges that reuse new brand tokens */
.badge-soft-primary {
    background-color: rgba(232, 29, 37, 0.10);
    color: var(--sos-red);
}

.badge-soft-secondary {
    background-color: rgba(27, 117, 188, 0.10);
    color: var(--sos-blue);
}

/* dl grid used on some detail pages */
.dl-grid > * {
    border-bottom: 1px solid var(--bs-border-color);
    padding-top: .5rem;
    padding-bottom: .5rem;
}

/* =========================
   DASHBOARD PAGE – HEADER / AVATAR / PILLS
   (scoped under .dashboard-page)
   ========================= */

.dashboard-page .quickview-header {
    background: linear-gradient(135deg, #CFBA8E 0%, #5DB3E2 60%, #0F2C3F 100%);
    color: #FAFAF7;
    border: 1px solid rgba(15, 44, 63, 0.25);
    border-radius: .75rem;
    box-shadow: 0 2px 10px rgba(15, 44, 63, 0.15);
    position: relative;
}

    .dashboard-page .quickview-header .title {
        color: #FAFAF7;
    }

    .dashboard-page .quickview-header .meta {
        color: rgba(255, 255, 255, .88);
    }

/* Lifesaver avatar – slightly larger on dashboard to be more prominent */
.dashboard-page .avatar-lifesaver {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: conic-gradient( from 0deg, #D6483D 0deg, #D6483D 45deg, #FDF8F4 45deg, #FDF8F4 90deg, #D6483D 90deg, #D6483D 135deg, #FDF8F4 135deg, #FDF8F4 180deg, #D6483D 180deg, #D6483D 225deg, #FDF8F4 225deg, #FDF8F4 270deg, #D6483D 270deg, #D6483D 315deg, #FDF8F4 315deg, #FDF8F4 360deg );
    border: 2px solid #D6483D;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 6px 12px rgba(0, 0, 0, .14);
    flex-shrink: 0;
}

    .dashboard-page .avatar-lifesaver::before {
        content: "";
        position: absolute;
        inset: 18%;
        border-radius: 50%;
        background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, .4) 45%, rgba(15, 44, 63, .05) 100%), radial-gradient(circle at 70% 75%, rgba(15, 44, 63, .25) 0, rgba(15, 44, 63, 0) 60%);
        box-shadow: inset 0 1px 2px rgba(255, 255, 255, .8), inset 0 -2px 4px rgba(15, 44, 63, .12);
    }

.dashboard-page .avatar-inner {
    position: absolute;
    inset: 26%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .9) 0, rgba(15, 44, 63, .15) 100%);
    border: 1px solid rgba(15, 44, 63, .25);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, .9), inset 0 -2px 3px rgba(15, 44, 63, .18);
    overflow: hidden;
}

    .dashboard-page .avatar-inner img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.dashboard-page .avatar-name-block .name {
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    font-size: .9rem;
    color: #0F2C3F;
}

.dashboard-page .avatar-name-block .meta {
    font-size: .8rem;
    color: rgba(255, 255, 255, .85);
}

/* Pills in dashboard header */
.dashboard-page .stats-pill {
    border-radius: 999px;
    padding: .25rem .75rem;
    background-color: rgba(15, 44, 63, .12);
    color: #FAFAF7;
    font-size: .75rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

    .dashboard-page .stats-pill .value {
        font-weight: 600;
    }


/* =========================
   SOS CARD COMPONENT (GLOBAL)
   ========================= */

.sos-card {
    border-radius: .75rem;
    border: 1px solid rgba(0, 0, 0, .04);
    box-shadow: 0 4px 10px rgba(15, 44, 63, .04);
    transition: box-shadow .15s ease, transform .1s ease, border-color .15s ease;
    overflow: hidden;
}

    /* Let flex rows inside SOS cards shrink properly */
    .sos-card .d-flex {
        min-width: 0;
    }

    /* Let SOS text column actually shrink inside the flex row */
    .sos-card .sos-text-column {
        min-width: 0;
    }

        /* Allow nested flex grow element to shrink correctly */
        .sos-card .sos-text-column .flex-grow-1 {
            min-width: 0;
        }

    .sos-card:hover {
        box-shadow: 0 8px 20px rgba(15, 44, 63, .10);
        transform: translateY(-1px);
        border-color: rgba(15, 44, 63, .15);
    }

.sos-image-wrapper {
    border-radius: .65rem;
    overflow: hidden;
    background: radial-gradient(circle at 20% 20%, #fdfbfb 0, #ebedee 100%);
    border: 1px solid rgba(0, 0, 0, .02);
    position: relative;
    padding-top: 85%;
}

    .sos-image-wrapper img {
        position: absolute;
        inset: 0;
        margin: auto;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.sos-meta {
    font-size: .8rem;
    color: #6c757d;
}

/* Retailer badges on SOS cards */
.badge-retailer {
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    font-size: .65rem;
    padding: .2rem .45rem;
    border-radius: 999px;
    background-color: rgba(15, 44, 63, .06);
    color: #0F2C3F;
}

    .badge-retailer.amazon {
        background-color: rgba(255, 153, 0, .10);
        color: #B35A00;
    }

    .badge-retailer.target {
        background-color: rgba(220, 53, 69, .10);
        color: #842029;
    }

    .badge-retailer.walmart {
        background-color: rgba(13, 110, 253, .10);
        color: #0B5ED7;
    }

    .badge-retailer.other {
        background-color: rgba(108, 117, 125, .08);
        color: #41464b;
    }

/* Tiny badges */
.badge-xs {
    font-size: .65rem;
    padding: .20rem .35rem;
}

/* Soft light pill badge (used on SOS/meta areas) */
.badge-soft-light {
    background-color: rgba(255, 255, 255, .7);
    color: #6c757d;
    border-radius: 999px;
    padding: .15rem .5rem;
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* Muted text sizes */
.small-muted {
    font-size: .8rem;
    color: #6c757d;
}

.text-muted-xs {
    font-size: .75rem;
    color: #6c757d;
}

/* Compact table rows in SOS / pledges tables */
.table-sm td,
.table-sm th {
    vertical-align: middle;
}

/* Pill for showing SOS targeting recipients */
.sos-target-pill {
    font-size: .7rem;
    border-radius: 999px;
    padding: .15rem .5rem;
    background-color: rgba(13, 110, 253, .06);
    color: #0B5ED7;
}

/* Prevent long item titles from overflowing the SOS card */
.sos-card .sos-title {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================
   STUDENT DETAILS PAGE
   ========================= */
/* Gradient header + avatar styling (aligned with Dashboard but page-scoped) */
.student-details-page .quickview-header {
    background: linear-gradient(135deg, #CFBA8E 0%, #5DB3E2 60%, #0F2C3F 100%);
    color: #FAFAF7;
    border: 1px solid rgba(15, 44, 63, 0.25);
    border-radius: .75rem;
    box-shadow: 0 2px 10px rgba(15, 44, 63, 0.15);
    position: relative;
}

    .student-details-page .quickview-header .title {
        color: #FAFAF7;
    }

    .student-details-page .quickview-header .meta {
        color: rgba(255, 255, 255, 0.88);
    }

/* Lifesaver ring avatar on profile */
.student-details-page .avatar-lifesaver {
    --ring-red: #D6483D;
    --ring-white: #FFFFFF;
    background: repeating-conic-gradient(var(--ring-white) 0deg 20deg, var(--ring-red) 20deg 90deg);
    border-radius: 9999px;
    padding: 17px;
    box-shadow: 0 2px 10px rgba(15, 44, 63, 0.25);
    width: 88px;
    height: 88px;
    display: grid;
    place-items: center;
}

    .student-details-page .avatar-lifesaver img {
        width: 54px;
        height: 54px;
        border-radius: 9999px;
        object-fit: cover;
        background-color: #ffffff;
        box-shadow: inset 0 0 0 1px rgba(15, 44, 63, 0.15);
    }

/* Biography text */
.student-details-page .student-bio {
    white-space: pre-wrap;
    font-size: .95rem;
    line-height: 1.5;
}

/* Small section titles (Available / Reserved / Purchased, etc.) */
.student-details-page .section-title {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #6c757d;
    margin-bottom: .35rem;
}

/* Wishlist summary pill sizing */
.student-details-page .wishlist-summary-badges .badge {
    font-size: .7rem;
}

/* Wishlist item rows */
.student-details-page .wishlist-item-row img {
    width: 64px;
    height: 64px;
    object-fit: cover;
}

.student-details-page .wishlist-item-row .item-title {
    font-weight: 600;
    font-size: .9rem;
}

    .student-details-page .wishlist-item-row .item-title a {
        text-decoration: none;
    }

        .student-details-page .wishlist-item-row .item-title a:hover {
            text-decoration: underline;
        }

/* Status badges (Available / Reserved / Purchased) */
.student-details-page .wishlist-status-badge {
    font-size: .7rem;
}
/* =========================
   STUDENT DETAILS PAGE – HERO HEADER TUNING
   ========================= */

.student-details-page .student-details-hero {
    border: 1px solid rgba(15, 44, 63, 0.25);
    border-radius: .75rem;
    box-shadow: 0 2px 10px rgba(15, 44, 63, 0.15);
}

.student-details-page .student-details-avatar {
    width: 100px;
    height: 100px;
    padding: 18px;
    box-shadow: 0 4px 12px rgba(15, 44, 63, 0.20);
}

    .student-details-page .student-details-avatar img {
        width: 64px;
        height: 64px;
    }

.student-details-page .student-details-header-main {
    max-width: 680px;
    margin: 0 auto;
}

.student-details-page .student-details-kicker {
    display: inline-block;
    margin-bottom: .7rem;
    padding: .28rem .75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .92);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.student-details-page .student-details-name {
    font-size: clamp(1.8rem, 2.6vw, 2.35rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.01em;
    margin-bottom: .25rem;
}

.student-details-page .student-details-school {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
}

.student-details-page .student-details-major {
    margin-top: .2rem;
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .88);
}

.student-details-page .student-follow-panel {
    min-width: 0;
}

.student-details-page .student-follow-btn {
    color: #fff;
    background-color: var(--sos-red);
    border: 1px solid rgba(255, 255, 255, .95);
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: .01em;
    padding: .5rem 1rem;
    min-width: 138px;
    box-shadow: 0 6px 16px rgba(232, 29, 37, .22);
}

    .student-details-page .student-follow-btn:hover,
    .student-details-page .student-follow-btn:focus,
    .student-details-page .student-follow-btn:active,
    .student-details-page .student-follow-btn:focus-visible {
        color: #fff;
        background-color: #c91820;
        border-color: #fff;
    }

@media (max-width: 991.98px) {
    .student-details-page .student-follow-panel {
        text-align: center !important;
    }

    .student-details-page .student-follow-btn {
        min-width: 160px;
    }
}
.student-details-page .student-details-hero {
    padding-top: 1.1rem !important;
    padding-bottom: 1.1rem !important;
}

.student-details-page .student-details-header-main {
    max-width: 620px;
    margin: 0 auto;
}

.student-details-page .student-details-kicker {
    margin-bottom: .45rem;
}

.student-details-page .student-details-school {
    font-size: 1.02rem;
    line-height: 1.25;
}

.student-details-page .student-details-major {
    margin-top: .12rem;
    font-size: .94rem;
    line-height: 1.25;
}

.student-details-page .student-follow-btn {
    padding: .42rem .9rem;
}
.student-details-page .student-section-heading {
    margin-bottom: 1rem;
}

.student-details-page .student-section-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    color: #0F2C3F;
    letter-spacing: -.01em;
}

.student-details-page .student-section-subtitle {
    font-size: .88rem;
    line-height: 1.45;
    color: #6c757d;
}

/* =========================
   STUDENT MANAGE PAGE
   ========================= */

.student-manage-page .qty-compact {
    width: 64px;
}

.student-manage-page .control-block {
    min-width: 140px;
}

/* keeps label+input blocks tidy */
.student-manage-page .control-label {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6c757d;
    margin-bottom: 0.25rem;
}

.student-manage-page .card-condensed-header {
    padding: .5rem .75rem;
    border-bottom: 1px solid rgba(0,0,0,.05);
    background: linear-gradient(135deg, rgba(15,44,63,.03), rgba(207,186,142,.08));
}

.student-manage-page .wishlist-card-header {
    background: linear-gradient(135deg, rgba(15,44,63,.03), rgba(207,186,142,.12));
    border-bottom: 1px solid rgba(0,0,0,.05);
}

    .student-manage-page .wishlist-card-header .badge {
        font-size: .7rem;
    }

.student-manage-page .wishlist-name {
    font-weight: 600;
    letter-spacing: .02em;
}

.student-manage-page .wishlist-meta {
    font-size: .8rem;
    color: #6c757d;
}

.student-manage-page .small-muted {
    font-size: .8rem;
    color: #6c757d;
}

.student-manage-page .pill-soft {
    border-radius: 999px;
    padding: .25rem .6rem;
    font-size: .75rem;
    background-color: rgba(15,44,63,.04);
    color: #0f2c3f;
}

    .student-manage-page .pill-soft.badge-danger-soft {
        background-color: rgba(220,53,69,.08);
        color: #842029;
    }

    .student-manage-page .pill-soft.badge-success-soft {
        background-color: rgba(25,135,84,.08);
        color: #0f5132;
    }

    .student-manage-page .pill-soft.badge-secondary-soft {
        background-color: rgba(108,117,125,.08);
        color: #41464b;
    }

.student-manage-page .priority-pill {
    min-width: 2rem;
    text-align: center;
}

.student-manage-page .item-card {
    border: 1px solid rgba(0,0,0,.05);
    border-radius: .75rem;
    transition: box-shadow .15s ease, transform .1s ease, border-color .15s ease;
    background-color: #fff;
}

    .student-manage-page .item-card:hover {
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.06);
        transform: translateY(-1px);
        border-color: rgba(15,44,63,.12);
    }

    .student-manage-page .item-card.disabled {
        opacity: .6;
    }

.student-manage-page .item-image-wrapper {
    position: relative;
    border-radius: .75rem;
    overflow: hidden;
    background: radial-gradient(circle at 20% 20%, #fdfbfb 0, #ebedee 100%);
    border: 1px solid rgba(0,0,0,.02);
}

.student-manage-page .item-image-inner {
    position: relative;
    padding-top: 85%;
}

    .student-manage-page .item-image-inner img {
        position: absolute;
        inset: 0;
        margin: auto;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.student-manage-page .item-title {
    font-weight: 600;
    font-size: .9rem;
}

.student-manage-page .item-meta {
    font-size: .8rem;
    color: #6c757d;
}

.student-manage-page .badges-row > .badge {
    margin-right: .25rem;
    margin-bottom: .25rem;
}

.student-manage-page .qty-input-sm {
    max-width: 80px;
}

.student-manage-page .wishlist-header-row {
    align-items: center;
}

    .student-manage-page .wishlist-header-row .btn {
        white-space: nowrap;
    }

.student-manage-page .wishlist-card {
    border-radius: 1rem;
    border: 1px solid rgba(0,0,0,.06);
    overflow: hidden;
}

    .student-manage-page .wishlist-card + .wishlist-card {
        margin-top: 1rem;
    }

.student-manage-page .wishlist-source-link {
    font-size: .8rem;
    color: #6c757d;
}

    .student-manage-page .wishlist-source-link a {
        text-decoration-style: dotted;
    }

.student-manage-page .badge-retailer {
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    font-size: .65rem;
    padding: .2rem .45rem;
    border-radius: 999px;
    background-color: rgba(15,44,63,.06);
    color: #0f2c3f;
}

    .student-manage-page .badge-retailer.amazon {
        background-color: rgba(255,153,0,.08);
        color: #b35a00;
    }

    .student-manage-page .badge-retailer.target {
        background-color: rgba(220,53,69,.08);
        color: #842029;
    }

    .student-manage-page .badge-retailer.walmart {
        background-color: rgba(13,110,253,.08);
        color: #0b5ed7;
    }

    .student-manage-page .badge-retailer.other {
        background-color: rgba(108,117,125,.08);
        color: #41464b;
    }

.student-manage-page .alert-soft-info {
    background-color: rgba(13,202,240,.08);
    border-color: rgba(13,202,240,.25);
    color: #055160;
}

.student-manage-page .alert-soft-warning {
    background-color: rgba(255,193,7,.08);
    border-color: rgba(255,193,7,.25);
    color: #664d03;
}

.student-manage-page .input-xs {
    padding: .1rem .35rem;
    font-size: .7rem;
    border-radius: .25rem;
}

.student-manage-page .avatar-wrapper {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.student-manage-page .avatar-lifesaver {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: conic-gradient( from 0deg, #D6483D 0deg, #D6483D 45deg, #FDF8F4 45deg, #FDF8F4 90deg, #D6483D 90deg, #D6483D 135deg, #FDF8F4 135deg, #FDF8F4 180deg, #D6483D 180deg, #D6483D 225deg, #FDF8F4 225deg, #FDF8F4 270deg, #D6483D 270deg, #D6483D 315deg, #FDF8F4 315deg, #FDF8F4 360deg );
    border: 2px solid #D6483D;
    box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 6px 12px rgba(0,0,0,.14);
    flex-shrink: 0;
}

    .student-manage-page .avatar-lifesaver::before {
        content: "";
        position: absolute;
        inset: 18%;
        border-radius: 50%;
        background: radial-gradient(circle at 30% 30%, rgba(255,255,255,1) 0, rgba(255,255,255,.4) 45%, rgba(15,44,63,.05) 100%), radial-gradient(circle at 70% 75%, rgba(15,44,63,.25) 0, rgba(15,44,63,0) 60%);
        box-shadow: inset 0 1px 2px rgba(255,255,255,.8), inset 0 -2px 4px rgba(15,44,63,.12);
    }

.student-manage-page .avatar-inner {
    position: absolute;
    inset: 26%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9) 0, rgba(15,44,63,.15) 100%);
    border: 1px solid rgba(15,44,63,.25);
    box-shadow: inset 0 1px 2px rgba(255,255,255,.9), inset 0 -2px 3px rgba(15,44,63,.18);
    overflow: hidden;
    z-index: 2;
}

    .student-manage-page .avatar-inner img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.student-manage-page .avatar-name-block .name {
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    font-size: .8rem;
    color: #0f2c3f;
}

.student-manage-page .avatar-name-block .meta {
    font-size: .75rem;
    color: rgba(255,255,255,.9);
}

.student-manage-page .sos-pill {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: .2rem .55rem;
}

    .student-manage-page .sos-pill.live {
        background-color: rgba(220,53,69,.1);
        color: #842029;
    }

    .student-manage-page .sos-pill.expired {
        background-color: rgba(108,117,125,.1);
        color: #41464b;
    }

    .student-manage-page .sos-pill.inactive {
        background-color: rgba(222,226,230,.7);
        color: #6c757d;
    }

.student-manage-page .sos-meta-text {
    font-size: .75rem;
    color: #6c757d;
}

.student-manage-page .fade-soft {
    opacity: .75;
}

.student-manage-page .form-text-xs {
    font-size: .7rem;
}

.student-manage-page .card-border-soft {
    border-color: rgba(0,0,0,.05);
}

.student-manage-page .badge-xs {
    font-size: .65rem;
    padding: .20rem .35rem;
}

.student-manage-page .btn-compact {
    padding: .2rem .4rem;
    font-size: .75rem;
}

.student-manage-page .btn-link-compact {
    padding: 0;
    font-size: .8rem;
}

.student-manage-page .text-muted-xs {
    font-size: .75rem;
    color: #6c757d;
}

.student-manage-page .synced-message {
    border-radius: .75rem;
    border: 1px solid rgba(15,44,63,.08);
    background: linear-gradient(135deg, rgba(207,186,142,.1), rgba(15,44,63,.04));
    padding: .75rem 1rem;
    font-size: .85rem;
}

    .student-manage-page .synced-message .meta {
        font-size: .75rem;
        color: #6c757d;
    }

/* =========================================
   PROFILE ACCOUNT PAGE (Manage/Index)
   Scoped under .profile-manage-page
   ========================================= */

.profile-manage-page .sos-profile-card {
    border-radius: .75rem;
    border: 1px solid rgba(15, 44, 63, 0.12);
    box-shadow: 0 2px 10px rgba(15, 44, 63, 0.08);
}

.profile-manage-page .sos-profile-header {
    background: linear-gradient(135deg, #CFBA8E 0%, #5DB3E2 60%, #0F2C3F 100%);
    color: #FAFAF7;
    border-radius: .75rem .75rem 0 0;
    padding: 1.25rem 1.5rem;
}

.profile-manage-page .sos-profile-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(250, 250, 247, 0.85);
    margin: 0 auto 0.75rem;
    background: #0F2C3F;
}

    .profile-manage-page .sos-profile-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.profile-manage-page .sos-badge-soft {
    border-radius: 999px;
    padding: 0.15rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.profile-manage-page .sos-badge-anon {
    background: rgba(15, 44, 63, 0.12);
    color: #0F2C3F;
}

.profile-manage-page .sos-badge-visible {
    background: rgba(26, 135, 84, 0.12);
    color: #1A8754;
}

.profile-manage-page .sos-badge-shipping-on {
    background: rgba(13, 110, 253, 0.12);
    color: #0D6EFD;
}

.profile-manage-page .sos-badge-shipping-off {
    background: rgba(108, 117, 125, 0.15);
    color: #6C757D;
}

.profile-manage-page .sos-list-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6C757D;
    margin-bottom: 0.1rem;
}

.profile-manage-page .sos-list-value {
    font-size: 0.9rem;
    color: #212529;
}
/* Shared quickview header + avatar for students/donors/dashboard */
.quickview-header {
    background: linear-gradient(135deg, #CFBA8E 0%, #5DB3E2 60%, #0F2C3F 100%);
    color: #FAFAF7;
    border-bottom: 1px solid rgba(15, 44, 63, 0.25);
    position: relative;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

    .quickview-header .title {
        color: #FAFAF7;
    }

    .quickview-header .meta {
        color: rgba(255, 255, 255, 0.88);
    }

.avatar-lifesaver {
    --ring-red: #D6483D;
    --ring-white: #FFFFFF;
    background: repeating-conic-gradient( var(--ring-white) 0deg 20deg, var(--ring-red) 20deg 90deg );
    border-radius: 9999px;
    padding: 17px;
    box-shadow: 0 2px 10px rgba(15, 44, 63, 0.25);
    width: 88px;
    height: 88px;
    display: grid;
    place-items: center;
}

    .avatar-lifesaver img,
    .avatar-inner img {
        width: 54px;
        height: 54px;
        border-radius: 9999px;
        object-fit: cover;
        background-color: #ffffff;
        box-shadow: inset 0 0 0 1px rgba(15, 44, 63, 0.15);
    }

.avatar-name-block .name {
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    font-size: .8rem;
    color: #0f2c3f;
}

.avatar-name-block .meta {
    font-size: .75rem;
    color: rgba(255, 255, 255, .9);
}
/* === SOS Themed Alerts (global) ========================== */
.alert {
    border-radius: .75rem;
    border-width: 1px;
    padding: .75rem 1rem;
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .875rem;
    box-shadow: 0 2px 8px rgba(15, 44, 63, 0.10);
}

    .alert .bi {
        font-size: 1rem;
        margin-top: 2px;
    }

/* Success (green / blue-leaning but on brand) */
.alert-success {
    background: linear-gradient(135deg, rgba(25,135,84,0.10), rgba(15,44,63,0.03));
    border-color: rgba(25,135,84,0.35);
    color: #0f5132;
}

/* Error / Danger (SOS red) */
.alert-danger {
    background: linear-gradient(135deg, rgba(232,29,37,0.10), rgba(15,44,63,0.03));
    border-color: rgba(232,29,37,0.40);
    color: #842029;
}

/* Info (brand blue) */
.alert-info {
    background: linear-gradient(135deg, rgba(93,179,226,0.12), rgba(15,44,63,0.03));
    border-color: rgba(93,179,226,0.40);
    color: #08425b;
}

/* Warning */
.alert-warning {
    background: linear-gradient(135deg, rgba(255,193,7,0.12), rgba(15,44,63,0.03));
    border-color: rgba(255,193,7,0.45);
    color: #664d03;
}

/* Neutral / debug */
.alert-secondary {
    background: linear-gradient(135deg, rgba(108,117,125,0.10), rgba(15,44,63,0.02));
    border-color: rgba(108,117,125,0.45);
    color: #343a40;
}