/* SKMMA Global Theme (Figma Redesign) */

:root {
    --skmma-primary: #921f4c;
    --skmma-primary-hover: #7a1940;
    --skmma-bg: #f3f5f8;
    --skmma-surface: #ffffff;
    --skmma-border: #e2e8f0;
    --skmma-text-main: #1c2434;
    --skmma-text-muted: #64748b;
    
    --bs-primary: var(--skmma-primary);
    --bs-primary-rgb: 146, 31, 76;
    --bs-body-bg: var(--skmma-bg);
    --bs-body-color: var(--skmma-text-main);
    --bs-border-color: var(--skmma-border);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--skmma-bg);
    color: var(--skmma-text-main);
    -webkit-font-smoothing: antialiased;
}

/* Typography Overrides */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--skmma-text-main);
    font-weight: 700;
}

.text-primary {
    color: var(--skmma-primary) !important;
}
.bg-primary {
    background-color: var(--skmma-primary) !important;
}
.text-muted {
    color: var(--skmma-text-muted) !important;
}

/* Header */
.app-header {
    background-color: var(--skmma-surface);
    border-bottom: 1px solid var(--skmma-border);
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Buttons */
.btn-primary {
    background-color: var(--skmma-primary);
    border-color: var(--skmma-primary);
    border-radius: 10px;
    font-weight: 700;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--skmma-primary-hover) !important;
    border-color: var(--skmma-primary-hover) !important;
}

.btn-outline-primary {
    --bs-btn-color: var(--skmma-primary);
    --bs-btn-border-color: var(--skmma-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--skmma-primary);
    --bs-btn-hover-border-color: var(--skmma-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--skmma-primary);
    --bs-btn-active-border-color: var(--skmma-primary);
}

.btn-light {
    border-radius: 10px;
    font-weight: 700;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--skmma-border);
    background-color: var(--skmma-surface);
    color: var(--skmma-text-main);
}

/* Cards */
.card {
    background-color: var(--skmma-surface);
    border: 1px solid var(--skmma-border);
    border-radius: 14px;
    box-shadow: none;
    transition: all 0.3s ease-in-out;
}

/* Form Elements */
.form-label, .form-floating > label {
    font-size: 13px;
    font-weight: 600;
    color: var(--skmma-text-main);
    margin-bottom: 6px;
}

.form-floating > label {
    padding-left: 14px;
    color: var(--skmma-text-muted);
}

.form-control, .form-select {
    border-radius: 8px;
    border: 1px solid var(--skmma-border);
    background-color: var(--skmma-surface);
    height: 48px;
    font-size: 14px;
    color: var(--skmma-text-muted);
    padding: 10px 14px;
}
.form-floating > .form-control, .form-floating > .form-select {
    height: 56px;
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--skmma-primary);
    box-shadow: 0 0 0 2px rgba(146, 31, 76, 0.2);
    color: var(--skmma-text-main);
}

.form-floating > textarea.form-control {
    height: auto;
    min-height: 100px;
}

/* Step Indicator */
.step-indicator {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
}
.step-indicator .step {
    flex: 1;
    height: 6px;
    background-color: var(--skmma-border);
    border-radius: 3px;
}
.step-indicator .step.active {
    background-color: var(--skmma-primary);
}

/* Select2 overrides for Bootstrap 5 and Native feel */
.select2-container .select2-selection--single {
    height: 48px !important;
    border-radius: 8px !important;
    border: 1px solid var(--skmma-border) !important;
    display: flex;
    align-items: center;
    background-color: var(--skmma-surface) !important;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: var(--skmma-text-main) !important;
    font-size: 14px;
    padding-left: 14px !important;
}

/* Photo Cropper area */
.photo-preview-wrapper {
    background-color: var(--skmma-surface);
    border: 1px dashed var(--skmma-border);
    border-radius: 8px;
}

/* Cropper modal overrides */
.img-container {
    height: 100%;
    width: 100%;
    max-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
}
.img-container img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}
.cropper-bg {
    background-image: none !important;
    background-color: #000 !important;
}
.cropper-view-box, .cropper-face {
    border-radius: 0;
}

@media (max-width: 576px) {
    .modal-fullscreen-sm-down {
        margin: 0;
        height: 100%;
    }
    .modal-fullscreen-sm-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }
    .modal-fullscreen-sm-down .modal-body {
        overflow-y: auto;
    }
}

/* Custom Utilities */
.border-dashed {
    border-style: dashed !important;
}

/* Exact Figma Redesign Customizations */
.skmma-badge {
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    border: none;
}

/* Roles */
.badge-role-president { background-color: #e8f0fe; color: #1967d2; }
.badge-role-treasurer { background-color: #fce8e6; color: #c5221f; }
.badge-role-secretary { background-color: #fce4ec; color: #c2185b; }
.badge-role-executive { background-color: #f3e5f5; color: #7b1fa2; }
.badge-role-default { background-color: #f1f3f4; color: #5f6368; }

/* Status */
.badge-status-active { background-color: #e6f4ea; color: #1e8e3e; }
.badge-status-locked { background-color: #fce8e6; color: #c5221f; }

/* Buttons */
.btn-lock-action {
    background-color: #f1f3f4;
    color: #3c4043;
    font-weight: 600;
    font-size: 13px;
    padding: 6px 16px;
    border-radius: 4px;
    border: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}
.btn-lock-action:hover { background-color: #e8eaed; color: #202124; }

.action-btn-uniform {
    min-width: 95px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Tables */
.skmma-table th {
    font-size: 13px;
    font-weight: 600;
    color: var(--skmma-text-muted);
    background-color: #f8f9fa;
    border-bottom: 1px solid var(--skmma-border);
    padding: 16px;
}
.skmma-table td {
    font-size: 14px;
    color: var(--skmma-text-main);
    padding: 16px;
    vertical-align: middle;
    border-bottom: 1px solid #f1f3f4;
}
.skmma-table tbody tr:hover { background-color: #f8f9fa; }

/* Mobile Cards */
.member-mobile-card {
    background: #ffffff;
    border: 1px solid var(--skmma-border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}
.member-mobile-card-divider {
    height: 1px;
    background-color: #f1f3f4;
    margin: 12px 0;
}

/* Transitions */
.transition-all { transition: all 0.4s ease-in-out; }


@media (min-width: 992px) {
    .desktop-step-hidden {
        max-width: 0 !important;
        flex: 0 0 0% !important;
        opacity: 0 !important;
        overflow: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
    }
}


/* Cropper Customization */
.cropper-modal { background-color: #f8f9fa !important; opacity: 1 !important; }
.cropper-view-box { outline: 2px solid #921f4c !important; box-shadow: 0 0 0 2px #fff !important; }
.cropper-bg { background-image: none !important; background-color: #f8f9fa !important; }
.cropper-line, .cropper-point, .cropper-center { display: none !important; }


.img-container { aspect-ratio: 35 / 45; height: auto !important; }


/* Select2 Theme Customization */
.select2-container--bootstrap-5 .select2-selection {
    padding: 0.4rem 0.75rem !important;
    min-height: 2.75rem !important;
    border-radius: 0.375rem;
}
.select2-container--bootstrap-5 .select2-selection__rendered {
    padding-left: 0 !important;
    line-height: 1.5 !important;
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: #921f4c !important;
    box-shadow: 0 0 0 0.25rem rgba(146, 31, 76, 0.25) !important;
}
.select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected] {
    background-color: #921f4c !important;
    color: white !important;
}



/* ===========================================================================
   DataTables chrome
   ---------------------------------------------------------------------------
   DataTables injects its toolbar, info line and pagination straight into
   .card-body.p-0, where Bootstrap's .row negative margins drag them past the
   card edge and its default controls ignore the theme. Pad the controls back
   to the card's own 24px rhythm and keep them quiet — the table is the page,
   this is furniture.
   =========================================================================== */

.dataTables_wrapper .row {
    margin-left: 0;
    margin-right: 0;
}
.dataTables_wrapper .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

/* Toolbar above the table */
.dataTables_length,
.dataTables_filter {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    font-size: 13px;
    color: var(--skmma-text-muted);
}
.dataTables_filter {
    justify-content: flex-end;
}
.dataTables_length label,
.dataTables_filter label {
    margin: 0;
    font-weight: 500;
}

.dataTables_length select.form-select,
.dataTables_filter input {
    font-size: 13px;
    border: 1px solid var(--skmma-border);
    border-radius: 8px;
    color: var(--skmma-text-main);
    background-color: var(--skmma-surface);
}
.dataTables_length select.form-select {
    width: auto;
    display: inline-block;
    margin: 0 6px;
    padding: 6px 28px 6px 12px;
}
.dataTables_filter input {
    width: 260px;
    max-width: 100%;
    margin-left: 0;
    padding: 7px 12px;
}
.dataTables_filter input::placeholder {
    color: var(--skmma-text-muted);
}
.dataTables_length select.form-select:focus,
.dataTables_filter input:focus {
    outline: none;
    border-color: var(--skmma-primary);
    box-shadow: 0 0 0 3px rgba(146, 31, 76, 0.15);
}

/* Footer below the table. The two columns sit flush, so a border-top on each
   reads as one continuous rule across the card. */
.dataTables_info,
.dataTables_paginate {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 14px 24px;
    border-top: 1px solid #f1f3f4;
    font-size: 13px;
    color: var(--skmma-text-muted);
}
.dataTables_paginate {
    justify-content: flex-end;
}

.dataTables_paginate .pagination {
    --bs-pagination-color: var(--skmma-text-muted);
    --bs-pagination-bg: transparent;
    --bs-pagination-border-color: transparent;
    --bs-pagination-padding-x: 11px;
    --bs-pagination-padding-y: 5px;
    --bs-pagination-font-size: 13px;
    --bs-pagination-hover-color: var(--skmma-text-main);
    --bs-pagination-hover-bg: #f1f3f4;
    --bs-pagination-hover-border-color: transparent;
    --bs-pagination-focus-color: var(--skmma-primary);
    --bs-pagination-focus-bg: #f1f3f4;
    --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(146, 31, 76, 0.15);
    --bs-pagination-active-color: #ffffff;
    --bs-pagination-active-bg: var(--skmma-primary);
    --bs-pagination-active-border-color: var(--skmma-primary);
    --bs-pagination-disabled-color: #b7bec9;
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-border-color: transparent;
    gap: 4px;
    margin: 0;
}
.dataTables_paginate .page-link {
    border-radius: 8px;
    font-weight: 600;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Sort indicators: muted until a column is actually sorted by. */
.skmma-table thead > tr > th.sorting_asc::before,
.skmma-table thead > tr > th.sorting_desc::after {
    color: var(--skmma-primary);
    opacity: 1;
}

.badge-role-councillor { background-color: #e6f4ea; color: #137333; }


/* Password show/hide control (see assets/js/password-toggle.js) */
.pw-field {
    position: relative;
}
.pw-field .form-control {
    padding-right: 46px;
}
.pw-toggle {
    position: absolute;
    top: 50%;
    right: 7px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--skmma-text-muted);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.pw-toggle:hover {
    color: var(--skmma-primary);
    background-color: #f1f3f4;
}
.pw-toggle:focus-visible {
    outline: 2px solid var(--skmma-primary);
    outline-offset: 2px;
}

/* Alert chips */
.sk-alert-stack {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1090;
    width: min(420px, calc(100vw - 24px));
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.sk-alert {
    --sk-alert-accent: var(--skmma-primary);
    --sk-alert-tint: rgba(146, 31, 76, 0.1);
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 10px;
    padding: 12px 10px 12px 16px;
    overflow: hidden;
    border: 1px solid var(--skmma-border);
    border-radius: 12px;
    background-color: var(--skmma-surface);
    box-shadow: 0 10px 28px -12px rgba(28, 36, 52, 0.35);
    pointer-events: auto;
    animation: sk-alert-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.sk-alert::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background-color: var(--sk-alert-accent);
}
.sk-alert.is-leaving {
    animation: sk-alert-out 0.18s ease-in forwards;
}

.sk-alert--error {
    --sk-alert-accent: #b42318;
    --sk-alert-tint: rgba(180, 35, 24, 0.1);
}
.sk-alert--success {
    --sk-alert-accent: #067647;
    --sk-alert-tint: rgba(6, 118, 71, 0.1);
}
.sk-alert--warning {
    --sk-alert-accent: #b54708;
    --sk-alert-tint: rgba(181, 71, 8, 0.1);
}

.sk-alert__glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 8px;
    background-color: var(--sk-alert-tint);
    color: var(--sk-alert-accent);
}
.sk-alert__glyph svg {
    width: 17px;
    height: 17px;
}

.sk-alert__body {
    min-width: 0;
    padding-top: 3px;
}
.sk-alert__title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--skmma-text-main);
}
.sk-alert__text {
    margin: 3px 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--skmma-text-muted);
}

.sk-alert__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--skmma-text-muted);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.sk-alert__close svg {
    width: 15px;
    height: 15px;
}
.sk-alert__close:hover {
    color: var(--skmma-text-main);
    background-color: #f1f3f4;
}
.sk-alert__close:focus-visible {
    outline: 2px solid var(--sk-alert-accent);
    outline-offset: 1px;
}

.sk-alert__timer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--sk-alert-accent);
    opacity: 0.5;
    transform-origin: left center;
    animation: sk-alert-drain linear forwards;
}

@keyframes sk-alert-in {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes sk-alert-out {
    to { opacity: 0; transform: translateY(-8px); }
}
@keyframes sk-alert-drain {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .sk-alert,
    .sk-alert.is-leaving {
        animation-duration: 0.01ms;
    }
}

/* Step header actions */
.form-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;
}

.btn-form-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 11px;
    border: 1px solid var(--skmma-border);
    border-radius: 8px;
    background-color: var(--skmma-surface);
    color: var(--skmma-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.btn-form-action svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}
.btn-form-action:hover {
    color: var(--skmma-text-main);
    border-color: #cbd5e1;
    background-color: #f8fafc;
}
.btn-form-action:focus-visible {
    outline: 2px solid var(--skmma-primary);
    outline-offset: 2px;
}

/* The rewarding action: brand-tinted rather than another grey outline. */
.btn-form-action--brand {
    border-color: rgba(146, 31, 76, 0.22);
    background-color: rgba(146, 31, 76, 0.07);
    color: var(--skmma-primary);
}
.btn-form-action--brand:hover {
    border-color: rgba(146, 31, 76, 0.38);
    background-color: rgba(146, 31, 76, 0.12);
    color: var(--skmma-primary-hover);
}

/* On the narrowest phones the pair takes the row and splits it evenly, rather
   than squeezing past the card's padding. */
@media (max-width: 360px) {
    .form-actions {
        width: 100%;
    }
    .btn-form-action {
        flex: 1;
        justify-content: center;
        padding: 0 9px;
        font-size: 0.7rem;
    }
}

/* Committee member cards in the admin "View Members" modal */
.member-card-details {
    /* Without this a flex child refuses to shrink below its content width,
       which pushed the cards wider than the modal on phones. */
    min-width: 0;
}
.member-card-details h6 {
    overflow-wrap: anywhere;
}
.member-card-details .row > div {
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    #viewCommitteeModal .modal-body {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    #viewCommitteeModal .card-body {
        padding: 0.75rem !important;
    }
    .member-card-details .row {
        row-gap: 0.35rem;
    }
}

/* Character counter under a length-limited field */
.field-counter {
    font-size: 0.75rem;
    color: var(--skmma-text-muted);
    font-variant-numeric: tabular-nums;
    padding-top: 4px;
}
.field-counter.is-full {
    color: var(--skmma-primary);
    font-weight: 600;
}