/* static/css/admin_style.css */

/* --- START: STICKY HEADER/FOOTER & SCROLLABLE BODY FIX --- */
html, body.page-wrapper {
    height: 100vh; /* Make body take the full viewport height */
    overflow: hidden; /* Prevent the whole page from scrolling */
}

body.page-wrapper {
    display: flex;
    flex-direction: column;
}

/* Make header and footer fixed in size */
.page-wrapper .header,
.page-wrapper .footer {
    flex-shrink: 0;
}

/* Make the main content area grow to fill space and become scrollable */
main.content-wrap {
    flex-grow: 1;
    overflow-y: auto; /* Add a vertical scrollbar ONLY to this element */
    padding-bottom: 2rem; /* Add some space at the very bottom */
}
/* --- END: STICKY HEADER/FOOTER & SCROLLABLE BODY FIX --- */


.page-wrapper .header .header-left img {
    height: 80px;
    width: 80px;
}

.page-wrapper .header {
    padding-top: 1rem;
    padding-bottom: 1rem;
}


/* --- Admin Dashboard Specific Styles --- */
.admin-dashboard {
    padding: 2rem 0;
    text-align: center;
}

.dashboard-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-color-dark);
    margin-bottom: 2.5rem;
}

.dashboard-buttons {
    display: grid;
    grid-template-columns: 1fr; /* Default to a single column */
    gap: 1.5rem;
    max-width: 600px;
    margin: 0 auto;
}

/* --- Dynamic Button Styling --- */
.dashboard-btn, button.dashboard-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem 2rem;
    font-size: 1.25rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    color: white;
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
}

.dashboard-btn:hover, button.dashboard-btn:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.dashboard-btn .btn-icon {
    width: 32px;
    height: 32px;
}

.dashboard-btn .btn-icon svg {
    width: 100%;
    height: 100%;
}

/* --- Vibrant Button Colors --- */
.btn-1 { background: linear-gradient(45deg, #2563eb, #3b82f6); } /* Blue */
.btn-2 { background: linear-gradient(45deg, #16a34a, #22c55e); } /* Green */
.btn-3 { background: linear-gradient(45deg, #ca8a04, #eab308); } /* Yellow */
.btn-4 { background: linear-gradient(45deg, #c2410c, #ea580c); } /* Orange */
.btn-5 { background: linear-gradient(45deg, #7e22ce, #9333ea); } /* Purple */
.btn-6 { background: linear-gradient(45deg, #0d9488, #14b8a6); } /* Teal */
.btn-7 { background: linear-gradient(45deg, #475569, #64748b); } /* Slate */
.btn-8 { background: linear-gradient(45deg, #6d28d9, #8b5cf6); } /* Deep Violet */


/* --- Header Button Style --- */
.btn-secondary {
    background-color: transparent;
    color: var(--primary-dark-color);
    border: 2px solid var(--primary-dark-color);
    font-weight: 600;
    font-size: 1rem;
    padding: 0.6rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background-color: var(--primary-dark-color);
    color: var(--bg-color-light);
}

/* Responsive adjustments for the dashboard */
@media (min-width: 640px) {
    .dashboard-buttons {
        grid-template-columns: 1fr 1fr; /* 2 columns on small screens and up */
    }
}


/* --- Styles for Check Members Page --- */

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.page-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-color-dark);
    text-align: center;
    flex-grow: 1;
}

.back-link {
    color: var(--primary-dark-color);
    text-decoration: none;
    font-weight: 500;
}
.back-link:hover {
    text-decoration: underline;
}

.search-container {
    width: 100%;
    max-width: 400px;
}

#searchInput {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
}

.loader {
    text-align: center;
    padding: 3rem;
    font-size: 1.25rem;
    color: var(--text-color-light);
}

/* ... (rest of the styles from your original file) ... */

/* --- START: CALENDAR SECTION STYLES --- */
.calendar-section-container {
    max-width: 900px; /* Limits the maximum width of the calendar */
    margin: 3rem auto 0;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.07);
    padding: 2rem;
    text-align: left;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.calendar-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-color-dark);
}

#calendar {
    min-height: auto; /* Removes any previous minimum height */
    height: 650px;    /* Sets a fixed, more compact height for the calendar */
}

#calendar-loader {
    text-align: center;
    padding: 4rem;
    font-size: 1.2rem;
    color: var(--text-color-light);
}

/* Style for the Connect button */
#auth-status .btn-primary {
    font-size: 0.9rem;
    padding: 0.6rem 1.2rem;
}
#auth-status .btn-secondary {
    font-size: 0.9rem;
    padding: 0.6rem 1.2rem;
}
/* --- END: CALENDAR SECTION STYLES --- */


/* --- Add these styles for the new Feedback Section --- */
.feedback-section-container {
    max-width: 900px;
    margin: 3rem auto 0;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.07);
    padding: 2rem;
    text-align: left;
}

.feedback-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.feedback-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-color-dark);
}

.feedback-count-badge {
    background-color: #ef4444; /* Red */
    color: white;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 50%;
    min-width: 28px;
    height: 28px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feedback-container {
    max-height: 500px; /* Limit height and make scrollable */
    overflow-y: auto;
    padding-right: 1rem; /* Space for scrollbar */
}

.feedback-item {
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary-color);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    transition: opacity 0.5s ease;
}

.feedback-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.feedback-sender-info p {
    margin: 0;
    line-height: 1.4;
}
.feedback-sender-info .sender-name {
    font-weight: 600;
    color: var(--text-color-dark);
}
.feedback-sender-info .sender-details {
    font-size: 0.85rem;
    color: var(--text-color-light);
}

.feedback-message {
    font-size: 1rem;
    margin-bottom: 1rem;
    white-space: pre-wrap; /* Preserve line breaks in message */
}

.feedback-actions {
    text-align: right;
    display: flex; /* Use flexbox for alignment */
    justify-content: flex-end; /* Align buttons to the right */
    gap: 0.75rem; /* Add space between buttons */
}

.btn-mark-read {
    background-color: #22c55e; /* Green */
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.btn-mark-read:hover {
    background-color: #16a34a;
}

/* START: NEW STYLES FOR ATTACHMENT BUTTON */
.btn-download-attachment {
    background-color: #3b82f6; /* Blue */
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 14px; /* Match the size of the other button */
    display: inline-block; /* Proper alignment */
}
.btn-download-attachment:hover {
    background-color: #2563eb;
}
/* END: NEW STYLES FOR ATTACHMENT BUTTON */

/* Styles for the new View/Edit Modal Actions */
.form-actions {
    margin-top: 1.5rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.btn-danger {
    background-color: #ef4444; /* Red */
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.btn-danger:hover {
    background-color: #dc2626; /* Darker Red */
}


/* Add this to the end of the button color list */
.btn-7 { background: linear-gradient(45deg, #475569, #64748b); } /* Slate */

/* Style for the new Reply button in feedback section */
.btn-reply {
    background-color: #3b82f6; /* Blue */
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.btn-reply:hover {
    background-color: #2563eb;
}