/* ================================================================
 * shared-modals.css
 * Reusable modal overlay system shared across feedback, internal,
 * and corruption form pages. Provides a self-contained modal
 * implementation (backdrop, container, dialog, header, body,
 * footer, buttons) that is intentionally independent of Bootstrap's
 * modal component to avoid conflicts.
 * ================================================================ */

/* ===== CSS CUSTOM PROPERTIES ===== */
:root {
    --modal-dark: #1E293B;
    --modal-muted: #64748B;
    --modal-radius-lg: 24px;
    --modal-radius-sm: 12px;
    /* z-index scale — modals must sit above Bootstrap's default 1040 backdrop */
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-modal-dialog: 1051; /* Dialog slightly above modal container to capture pointer events correctly */
}

/* ===== BACKDROP ===== */
/* Full-screen dark overlay rendered behind the modal dialog */
.shared-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-modal-backdrop);
    animation: fadeIn 0.3s ease; /* Fade in the scrim on open */
}

/* ===== MODAL CONTAINER ===== */
/* Full-screen flex wrapper that centers the dialog; hidden by default */
.shared-modal {
    display: none; /* JS adds .shared-modal-show to switch to flex */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-modal);
    align-items: center;
    justify-content: center;
    animation: slideUp 0.3s ease; /* Entire modal area slides up on open */
    overflow-y: auto; /* Allow scrolling on short viewports */
}

/* Reveal the modal by switching display from none to flex */
.shared-modal.shared-modal-show {
    display: flex;
}

/* ===== MODAL DIALOG ===== */
/* The sizing/positioning wrapper for the modal content box */
.shared-modal-dialog {
    position: relative;
    width: auto;
    max-width: 520px;
    margin: 1.75rem auto;
    pointer-events: auto; /* Re-enable clicks that the overlay container may block */
    z-index: var(--z-modal-dialog);
}

/* Vertically centers the dialog inside the container on tall viewports */
.shared-modal-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 3.5rem); /* 3.5rem = 2 × 1.75rem dialog margin */
}

/* ===== MODAL CONTENT ===== */
.shared-modal-content {
    position: relative;
    width: 100%;
    pointer-events: auto;
    background: white;
    border: none;
    border-radius: var(--modal-radius-lg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: zoomIn 0.3s ease 0.1s both; /* 0.1s delay so it starts after the container slides in */
    /* Normalize font so Bootstrap/other frameworks don't affect modal size */
    font-size: 1rem;
    line-height: 1.5;
}

/* Prevent Bootstrap heading font-size/line-height from inflating modal */
.shared-modal-content h1,
.shared-modal-content h2,
.shared-modal-content h3,
.shared-modal-content h4,
.shared-modal-content h5,
.shared-modal-content h6 {
    font-size: 1rem;
    line-height: 1.4;
    margin: 0;
}

/* ===== MODAL HEADER ===== */
/* Background color is set per-modal variant via an inline style or modifier class */
.shared-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    color: white;
    border: none;
}

/* !important overrides Bootstrap h* resets that may reduce the title font-size */
.shared-modal-title {
    margin: 0;
    font-size: 1.1rem !important;
    font-weight: 600;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.shared-modal-title i {
    font-size: 1.2rem;
}

/* ===== MODAL CLOSE BUTTON ===== */
.shared-modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.75rem;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
    flex-shrink: 0; /* Prevent the × from shrinking when title text is long */
}

.shared-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ===== MODAL BODY ===== */
.shared-modal-body {
    position: relative;
    flex: 1 1 auto; /* Grows to fill available height inside the flex column */
    padding: 1.5rem;
    color: var(--modal-dark);
}

.shared-modal-text-center {
    text-align: center;
}

.shared-modal-body p {
    margin: 0.5rem 0;
    line-height: 1.6;
}

/* Custom unstyled list — bullets are provided by the ::before pseudo-element below */
.shared-modal-body ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.shared-modal-body li {
    padding: 0.35rem 0;
    position: relative; /* Required for absolute-positioned ::before bullet */
    padding-left: 1.5rem;
    line-height: 1.25;
}

/* Custom bullet rendered as an absolute-positioned "•" character */
.shared-modal-body li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: #f5576c; /* Pink/red accent bullet to highlight warning items */
    font-weight: bold;
    font-size: 1.2rem;
}

/* ===== MODAL FOOTER ===== */
.shared-modal-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.5rem 1.5rem;
    border: none;
    gap: 0.75rem;
    flex-wrap: wrap; /* Allows buttons to stack on very narrow viewports */
}

/* ===== MODAL BUTTONS ===== */
.shared-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--modal-radius-sm);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    color: white;
}

.shared-btn i {
    font-size: 0.9rem;
}

/* Primary action button — blue/purple gradient */
.shared-btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 4px 15px rgba(74, 108, 247, 0.3);
}

.shared-btn-primary:hover {
    transform: translateY(-2px); /* Lift on hover */
    box-shadow: 0 6px 20px rgba(74, 108, 247, 0.4);
}

.shared-btn-primary:active {
    transform: translateY(0); /* Reset lift on press */
}

/* Warning/destructive action button — pink/red gradient */
.shared-btn-warning {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    box-shadow: 0 4px 15px rgba(245, 87, 108, 0.3);
}

.shared-btn-warning:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 87, 108, 0.4);
}

.shared-btn-warning:active {
    transform: translateY(0);
}

/* ===== ANIMATIONS ===== */
/* Used by .shared-modal-backdrop on open */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Used by .shared-modal container on open */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Used by .shared-modal-content — subtle scale-up entrance */
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== REDUCED MOTION ===== */
/* Removes all animations/transitions for users with vestibular or motion sensitivity */
@media (prefers-reduced-motion: reduce) {
    .shared-modal-backdrop,
    .shared-modal,
    .shared-modal-content,
    .shared-btn {
        animation: none;
        transition: none;
    }
}

/* ===== RESPONSIVE — MOBILE (≤768px) ===== */
@media (max-width: 768px) {
    /* Near full-width dialog with small gutters on mobile */
    .shared-modal-dialog {
        max-width: calc(100% - 2rem);
        margin: 1rem auto;
    }

    .shared-modal-header {
        padding: 1.25rem;
    }

    .shared-modal-body {
        padding: 1.25rem;
    }

    .shared-modal-footer {
        padding: 0.875rem 1.25rem 1.25rem;
        flex-direction: column; /* Stack buttons vertically on narrow screens */
    }

    /* Full-width buttons when stacked vertically */
    .shared-btn {
        width: 100%;
    }

    .shared-modal-title {
        font-size: 1rem;
    }
}