/* =============================================================================
   SOCIETY MODULE — UI STYLESHEET

   Covers SocietyDashboard.cshtml and everything under
   BlockContainers/MGC/Society/ (resident + committee views & modals).

   Scoped entirely under `.society-ui` so nothing here leaks into the rest
   of the site. Built on top of Bootstrap 5 utilities/components — custom
   rules exist only where Bootstrap has no equivalent (hero banner, pill
   search/filter controls, status badges, dashboard tables, mobile
   table->card transform).

   Every element `id` referenced by society-resident.js / society-committee.js
   and every class those scripts inject at runtime (soc-badge-*, soc-row-animate,
   soc-modal-dimmed, soc-action-btn, soc-circle-red/yellow) is preserved as-is —
   this file only changes how they look, never their names.
   ============================================================================= */

/* -----------------------------------------------------------------------
   1. Design tokens
   ----------------------------------------------------------------------- */
.society-ui {
    /* Brand accent — purple, matching the "Society Dashboard" entry card
       on the main user dashboard, so the visual thread carries through. */
    --soc-primary: #551d5c;
    --soc-primary-hover: #3f1546;
    --soc-primary-rgb: 85, 29, 92;
    --soc-primary-subtle: #f5ebf6;
    --soc-primary-border-subtle: #ddc3e0;

    /* Semantic status colors — these signal state (success/danger/warning),
       not brand, so they're formalized as-is rather than re-themed. */
    --soc-success: #16a34a;
    --soc-success-emphasis: #15803d;
    --soc-success-subtle: #dcfce7;
    --soc-danger: #dc2626;
    --soc-danger-subtle: #fef2f2;
    --soc-warning: #ca8a04;
    --soc-warning-emphasis: #a16207;
    --soc-warning-subtle: #fef9c3;

    /* Neutrals */
    --soc-text: #0f172a;
    --soc-text-muted: #64748b;
    --soc-border: #e2e8f0;
    --soc-border-strong: #cbd5e1;
    --soc-bg: #f8fafc;
    --soc-bg-dark: #1a2744;
    --soc-bg-dark-border: #2f3f63;

    /* Shape scale */
    --soc-radius-lg: 1.25rem;
    --soc-radius-md: .75rem;
    --soc-radius-pill: 50rem;

    /* Wire Bootstrap's own variables so utilities (.text-primary, .bg-primary,
       .border-primary, *-subtle variants, links) inherit the accent for free. */
    --bs-primary: var(--soc-primary);
    --bs-primary-rgb: var(--soc-primary-rgb);
    --bs-primary-text-emphasis: var(--soc-primary-hover);
    --bs-primary-bg-subtle: var(--soc-primary-subtle);
    --bs-primary-border-subtle: var(--soc-primary-border-subtle);
    --bs-link-color: var(--soc-primary);
    --bs-link-color-rgb: var(--soc-primary-rgb);
    --bs-link-hover-color: var(--soc-primary-hover);
    --bs-link-hover-color-rgb: 63, 21, 70;
}

/* Bootstrap's compiled .btn-primary / .btn-outline-primary / focus rings bake
   their colors into component-local custom properties at build time (not
   wired to --bs-primary), so they need an explicit — but still scoped and
   token-driven — override to pick up the accent. */
.society-ui .btn-primary {
    --bs-btn-bg: var(--soc-primary);
    --bs-btn-border-color: var(--soc-primary);
    --bs-btn-hover-bg: var(--soc-primary-hover);
    --bs-btn-hover-border-color: var(--soc-primary-hover);
    --bs-btn-active-bg: var(--soc-primary-hover);
    --bs-btn-active-border-color: var(--soc-primary-hover);
    --bs-btn-disabled-bg: var(--soc-primary);
    --bs-btn-disabled-border-color: var(--soc-primary);
    --bs-btn-focus-shadow-rgb: var(--soc-primary-rgb);
}

.society-ui .btn-outline-primary {
    --bs-btn-color: var(--soc-primary);
    --bs-btn-border-color: var(--soc-primary);
    --bs-btn-hover-bg: var(--soc-primary);
    --bs-btn-hover-border-color: var(--soc-primary);
    --bs-btn-active-bg: var(--soc-primary);
    --bs-btn-active-border-color: var(--soc-primary);
    --bs-btn-disabled-color: var(--soc-primary);
    --bs-btn-disabled-border-color: var(--soc-primary);
    --bs-btn-focus-shadow-rgb: var(--soc-primary-rgb);
}

.society-ui .form-control:focus,
.society-ui .form-select:focus {
    border-color: var(--soc-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--soc-primary-rgb), .15);
}

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

.society-ui .form-check-input:focus {
    border-color: var(--soc-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--soc-primary-rgb), .15);
}

.society-ui .spinner-border.text-primary {
    color: var(--soc-primary) !important;
}

/* -----------------------------------------------------------------------
   2. Auth-wall / access-denied states
   ----------------------------------------------------------------------- */
.society-ui .soc-status-card {
    max-width: 460px;
    border-radius: var(--soc-radius-lg);
    border: 1px solid var(--soc-border) !important;
}

/* -----------------------------------------------------------------------
   3. Hero header
   ----------------------------------------------------------------------- */
.society-ui .soc-hero-card {
    background: linear-gradient(135deg, #2b1130 0%, var(--soc-primary) 60%, #6c2c74 100%);
    border-radius: var(--soc-radius-lg);
    padding: 1.5rem 2rem;
    box-shadow: 0 10px 30px -10px rgba(var(--soc-primary-rgb), .45);
    position: relative;
    overflow: hidden;
}

.society-ui .soc-hero-card::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

.society-ui .soc-icon-tile {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .05) 100%);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--soc-radius-md);
}

.society-ui .soc-back-btn {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--soc-radius-md);
    color: #fff;
    transition: background-color .2s ease, transform .2s ease;
}

.society-ui .soc-back-btn:hover {
    background: rgba(255, 255, 255, .2);
    color: #fff;
    transform: scale(1.05);
}

@keyframes soc-wave {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(14deg); }
    20% { transform: rotate(-8deg); }
    30% { transform: rotate(14deg); }
    40% { transform: rotate(-4deg); }
    50% { transform: rotate(10deg); }
    60%, 100% { transform: rotate(0deg); }
}

.society-ui .soc-wave-emoji {
    display: inline-block;
    animation: soc-wave 2.5s infinite;
    transform-origin: 70% 70%;
}

/* Shows the user's committee position (Treasurer/Secretary/Chairman) or
   "Resident" in the hero welcome line — populated by society-resident.js
   once both dashboard loads resolve, since role is only known then. */
.society-ui .soc-role-badge {
    display: inline-flex;
    align-items: center;
    padding: .2rem .65rem;
    border-radius: var(--soc-radius-pill);
    background-color: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    vertical-align: middle;
}

/* -----------------------------------------------------------------------
   4. Cards
   ----------------------------------------------------------------------- */
.society-ui .soc-card {
    background-color: #fff;
    border: 1px solid var(--soc-border);
    border-radius: var(--soc-radius-lg);
}

.society-ui .soc-card-dark {
    background-color: var(--soc-bg-dark);
    border-color: var(--soc-bg-dark-border);
    color: #fff;
}

.society-ui .soc-card-dark .soc-icon-wrapper {
    background-color: rgba(255, 255, 255, .1);
    color: #fff;
}

.society-ui .soc-icon-wrapper {
    width: 44px;
    height: 44px;
    border-radius: var(--soc-radius-md);
    font-size: 1.25rem;
}

/* This Month Summary list */
.society-ui .soc-summary-item {
    border-bottom: 1px dashed var(--soc-border);
}

.society-ui .soc-summary-item:last-child {
    border-bottom: none;
}

/* Live via JS-injected markup (society-resident.js builds transaction/table
   cells with these classes directly) — kept for that, even though static
   markup in this file now prefers Bootstrap's own .text-success/.text-danger.
   !important matches Bootstrap's own text-utility convention: a <td> inside
   .soc-table has higher specificity than a bare two-class utility, so
   without it the table's own text color would silently win. */
.society-ui .text-soc-green { color: var(--soc-success) !important; }
.society-ui .text-soc-red { color: var(--soc-danger) !important; }

/* -----------------------------------------------------------------------
   5. Quick Action tiles
   ----------------------------------------------------------------------- */
.society-ui .soc-action-tile-btn {
    width: 100%;
    min-height: 104px;
    border-radius: var(--soc-radius-md);
    border: 1px solid var(--soc-border);
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.society-ui .soc-action-tile-btn.active {
    background-color: var(--soc-primary);
    border-color: var(--soc-primary);
    color: #fff;
}

.society-ui .soc-action-tile-btn.inactive {
    background-color: var(--soc-bg);
    color: var(--soc-text);
}

.society-ui .soc-action-tile-btn.inactive:hover {
    background-color: #fff;
    border-color: var(--soc-border-strong);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .05);
    transform: translateY(-2px);
}

.society-ui .soc-action-tile-btn.inactive .soc-action-tile-icon {
    color: var(--soc-primary);
}

/* -----------------------------------------------------------------------
   6. Recent Transactions grid
   ----------------------------------------------------------------------- */
.society-ui .soc-trans-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.5rem;
}

@media (max-width: 991.98px) {
    .society-ui .soc-trans-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

.society-ui .soc-trans-item {
    border-bottom: 1px solid var(--soc-border);
}

.society-ui .soc-trans-item:last-child {
    border-bottom: none;
}

.society-ui .soc-trans-icon-circle {
    width: 40px;
    height: 40px;
}

/* Live via JS (society-resident.js) — transaction icon tint variants */
.society-ui .soc-circle-red {
    background-color: var(--soc-danger-subtle);
    color: var(--soc-danger);
}

.society-ui .soc-circle-yellow {
    background-color: var(--soc-warning-subtle);
    color: var(--soc-warning);
}

/* -----------------------------------------------------------------------
   7. Search & filter pills
   ----------------------------------------------------------------------- */
.society-ui .soc-search-wrapper {
    position: relative;
    max-width: 480px;
    width: 100%;
    flex: 1 1 auto;
}

.society-ui .soc-search-input {
    width: 100%;
    padding: .55rem 1rem .55rem 2.75rem;
    border-radius: var(--soc-radius-pill);
    border: 1px solid var(--soc-border);
    font-size: .95rem;
    color: var(--soc-text);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.society-ui .soc-search-input:focus {
    outline: none;
    border-color: var(--soc-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--soc-primary-rgb), .12);
}

.society-ui .soc-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--soc-text-muted);
}

.society-ui .soc-filter-pill {
    padding: .4rem 1.1rem;
    border-radius: var(--soc-radius-pill);
    font-size: .875rem;
    font-weight: 500;
    border: 1px solid var(--soc-border);
    background-color: #fff;
    color: #475569;
    white-space: nowrap;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.society-ui .soc-filter-pill:hover {
    background-color: var(--soc-bg);
    border-color: var(--soc-border-strong);
}

.society-ui .soc-filter-pill.active {
    background-color: var(--soc-primary-subtle);
    border-color: var(--soc-primary-border-subtle);
    color: var(--soc-primary);
}

/* -----------------------------------------------------------------------
   8. Tables (dashboard + modal variants)
   ----------------------------------------------------------------------- */
.society-ui .soc-table-wrapper,
.society-ui .soc-modal-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.society-ui .soc-table,
.society-ui .soc-modal-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.society-ui .soc-table th,
.society-ui .soc-modal-table th {
    color: var(--soc-text-muted);
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 1rem;
    border-bottom: 1px solid var(--soc-border-strong);
    white-space: nowrap;
}

.society-ui .soc-table td,
.society-ui .soc-modal-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--soc-border);
    color: var(--soc-text);
    vertical-align: middle;
}

.society-ui .soc-table tbody tr:hover,
.society-ui .soc-modal-table tbody tr:hover {
    background-color: var(--soc-bg);
}

.society-ui .soc-table tbody tr:last-child td,
.society-ui .soc-modal-table tbody tr:last-child td {
    border-bottom: none;
}

/* Row entrance animation — applied by JS to newly-injected rows */
@keyframes soc-row-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.society-ui .soc-row-animate {
    animation: soc-row-in .3s cubic-bezier(.16, 1, .3, 1) forwards;
    opacity: 0;
}

/* -----------------------------------------------------------------------
   9. Status badges — soc-badge-* variants are injected by JS at runtime
   ----------------------------------------------------------------------- */
.society-ui .soc-badge {
    display: inline-flex;
    align-items: center;
    padding: .3rem .75rem;
    border-radius: var(--soc-radius-pill);
    font-size: .75rem;
    font-weight: 600;
}

.society-ui .soc-badge-paid { background-color: var(--soc-success-subtle); color: var(--soc-success-emphasis); }
.society-ui .soc-badge-pending { background-color: var(--soc-warning-subtle); color: var(--soc-warning-emphasis); }
.society-ui .soc-badge-info { background-color: var(--soc-primary-subtle); color: var(--soc-primary); }
.society-ui .soc-badge-danger { background-color: var(--soc-danger-subtle); color: var(--soc-danger); }

/* Table row action buttons (edit/view/revoke icon buttons) */
.society-ui .soc-action-btn {
    background: none;
    border: none;
    color: var(--soc-text-muted);
    font-size: 1.1rem;
    padding: .4rem;
    border-radius: var(--soc-radius-md);
    transition: color .15s ease, background-color .15s ease;
}

.society-ui .soc-action-btn:hover {
    color: var(--soc-primary);
    background-color: var(--soc-primary-subtle);
}

/* -----------------------------------------------------------------------
   10. Modals
   ----------------------------------------------------------------------- */
.society-ui .soc-modal-dialog {
    max-width: 550px;
    width: 95%;
    margin: 1.75rem auto;
}

@media (max-width: 575.98px) {
    .society-ui .soc-modal-dialog {
        width: 100%;
        margin: .5rem;
    }
}

/* Dim the modal underneath when a follow-up modal opens on top of it
   (society-committee.js toggles this class) */
.society-ui .soc-modal-dimmed .modal-content {
    filter: brightness(.6) blur(.5px);
    transform: scale(.98);
    transition: all .3s ease;
}

/* Avoid the near-black overlay stacking effect when two modal backdrops exist */
.society-ui ~ .modal-backdrop + .modal-backdrop,
.modal-backdrop + .modal-backdrop {
    opacity: .15 !important;
}

/* Bootstrap form fields inside modals default to a plain white background;
   several Society forms want a soft filled look instead (replaces ~12
   duplicated inline style="background-color:#f8fafc" attributes). */
.society-ui .soc-field-soft {
    background-color: var(--soc-bg);
    border: none;
}

.society-ui .soc-field-soft:focus {
    background-color: #fff;
}

/* Scrollable list/table panels inside cards share one fixed max-height
   instead of repeating the same inline style on every section. */
.society-ui .soc-scroll-panel {
    max-height: 380px;
    overflow-y: auto;
}

/* -----------------------------------------------------------------------
   11. Mobile: tables collapse into stacked label/value cards
   ----------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .society-ui .soc-hero-card {
        padding: 1.25rem;
    }

    .society-ui .soc-table thead,
    .society-ui .soc-modal-table thead {
        display: none;
    }

    .society-ui .soc-table,
    .society-ui .soc-table tbody,
    .society-ui .soc-table tr,
    .society-ui .soc-table td,
    .society-ui .soc-modal-table,
    .society-ui .soc-modal-table tbody,
    .society-ui .soc-modal-table tr,
    .society-ui .soc-modal-table td {
        display: block;
        width: 100%;
    }

    .society-ui .soc-table tr,
    .society-ui .soc-modal-table tr {
        margin-bottom: 1rem;
        border: 1px solid var(--soc-border);
        border-radius: var(--soc-radius-md);
        overflow: hidden;
        background-color: #fff;
    }

    .society-ui .soc-table td,
    .society-ui .soc-modal-table td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        text-align: right;
        gap: 1rem;
        border-bottom: 1px solid var(--soc-border);
    }

    .society-ui .soc-table td:last-child,
    .society-ui .soc-modal-table td:last-child {
        border-bottom: none;
    }

    /* Every dynamically-injected <td> already carries data-label (see
       society-resident.js / society-committee.js) — one rule covers every
       table instead of duplicating a nth-child block per table id. */
    .society-ui .soc-table td[data-label]::before,
    .society-ui .soc-modal-table td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--soc-text-muted);
        text-align: left;
        flex-shrink: 0;
    }

    .society-ui .soc-table td[colspan],
    .society-ui .soc-modal-table td[colspan] {
        display: block;
        text-align: center !important;
    }

    .society-ui .soc-table td[colspan]::before,
    .society-ui .soc-modal-table td[colspan]::before {
        content: none;
    }
}