/* src/app/admin/dashboard/dashboard.module.css */

/* --- LAYOUT STYLES (Unchanged) --- */
.dashboardLayout {
    display: flex;
    min-height: calc(100vh - 75px);
}
.sidebar {
    width: 250px;
    background-color: #2d2d2d;
    padding: 2rem 1rem;
    color: #f5f5f5;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}
.sidebar nav {
    flex-grow: 1;
}

/* ... (sidebar styles are unchanged) ... */
.sidebar ul { list-style: none; padding: 0; margin: 0; }
.sidebar li { margin-bottom: 0.5rem; }
.sidebarLink, .activeLink { display: block; width: 100%; padding: 0.75rem 1rem; border: none; border-radius: 6px; background-color: transparent; color: #f5f5f5; text-align: left; font-size: 1rem; cursor: pointer; transition: background-color 0.2s ease; }
.sidebarLink:hover { background-color: #4a4a4a; }
.activeLink { background-color: #FEB500; color: #222222; font-weight: bold; }

.contentArea { flex-grow: 1; padding: 2rem; background-color: #f4f4f4; overflow-y: auto; }
.contentContainer { max-width: 1200px; margin: 0 auto; width: 100%; }

/* --- EXISTING STYLES (Unchanged) --- */
.contentHeader { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.contentHeader h1 { margin: 0; text-align: left; }
.addButton { background-color: #28a745; color: white; font-weight: bold; border: none; padding: 0.75rem 1.5rem; border-radius: 6px; cursor: pointer; font-size: 1rem; transition: background-color 0.2s ease; }
.addButton:hover { background-color: #218838; }

/* --- UPDATED TABLE STYLES --- */
.tableContainer {
    overflow-x: auto; /* This is still good for very large screens */
    background: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}
.userTable {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px; /* Keep a min-width for large screens */
}
.userTable th, .userTable td { padding: 1rem; text-align: left; border-bottom: 1px solid #ddd; }
.userTable th { background-color: #f8f8f8; font-weight: bold; }
.userTable tbody tr:hover { background-color: #f1f1f1; }

.actionsCell { 
    display: flex; 
    align-items: center; 
    gap: 1rem; 
}

.editButton { background-color: #FEB500; color: #222222; font-weight: bold; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; }
.editButton:hover { background-color: #f8b400; }
.deleteButton { background-color: #d9534f; color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; transition: background-color 0.2s, opacity 0.2s; }
.deleteButton:hover { background-color: #c9302c; }
.deleteButton:disabled { background-color: #ccc; cursor: not-allowed; opacity: 0.6; }

/* ... (modal and other styles are unchanged) ... */
.error { color: #d9534f; text-align: center; font-size: 1.2rem; padding: 2rem 0; }
.modalOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; z-index: 1000; }
.modalContent { background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); width: 90%; max-width: 500px; }
.modalHeader { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; padding-bottom: 1rem; margin-bottom: 1rem; }
.modalHeader h2 { margin: 0; font-size: 1.5rem; }
.closeButton { background: transparent; border: none; font-size: 2rem; cursor: pointer; line-height: 1; padding: 0; }
.modalForm .inputGroup { margin-bottom: 1rem; }
.modalForm .inputGroup label { display: block; margin-bottom: 0.5rem; font-weight: bold; color: #333; }
.modalForm .inputGroup input { width: 100%; padding: 0.75rem; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; }
.modalForm .error { font-size: 0.9rem; padding: 0; text-align: left; margin-bottom: 1rem; }
.modalActions { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 1.5rem; }
.cancelButton, .saveButton { padding: 0.75rem 1.5rem; border: none; border-radius: 4px; font-size: 1rem; font-weight: bold; cursor: pointer; transition: background-color 0.2s; }
.cancelButton { background-color: #f0f0f0; border: 1px solid #ccc; color: #333; }
.cancelButton:hover { background-color: #e0e0e0; }
.saveButton { background-color: #28a745; color: white; }
.saveButton:hover { background-color: #218838; }
.saveButton:disabled { background-color: #ccc; cursor: not-allowed; }

/* ... (editor layout styles are unchanged) ... */
.editorLayout { display: flex; gap: 2rem; margin-top: 2rem; }
.editorPanel { flex: 1; min-width: 350px; }
.previewPanel { flex: 1; min-width: 350px; }
.previewPanel h3 { font-size: 1.25rem; margin-bottom: 1rem; color: #333; padding-bottom: 0.5rem; border-bottom: 2px solid #eee; }
.iframeContainer { border: 1px solid #ddd; border-radius: 8px; overflow: hidden; background: white; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); }
@media (max-width: 1024px) { .editorLayout { flex-direction: column; } }


/* --- NEW RESPONSIVE TABLE STYLES --- */
/* This media query targets screens smaller than 768px */
@media (max-width: 768px) {
    .userTable {
        min-width: 100%; /* Allow table to be flexible */
    }
    .userTable thead {
        display: none; /* Hide the original headers */
    }
    .userTable tr {
        display: block; /* Turn each row into a card */
        margin-bottom: 1.5rem;
        border: 1px solid #ddd;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    .userTable td {
        display: block; /* Stack cells vertically */
        text-align: right; /* Align data to the right */
        border-bottom: 1px dotted #ccc;
        padding-left: 50%; /* Make space for the label */
        position: relative;
    }
    .userTable td:last-child {
        border-bottom: none; /* Remove border from last cell in card */
    }
    .userTable td::before {
        content: attr(data-label); /* Use data-label from HTML for the label */
        position: absolute;
        left: 1rem;
        width: calc(50% - 2rem);
        text-align: left;
        font-weight: bold;
    }
    .actionsCell {
        justify-content: flex-end; /* Ensure buttons stay on the right */
        padding-left: 1rem; /* Reset padding for the actions cell */
    }
    .actionsCell::before {
        content: ""; /* The actions cell doesn't need a label */
    }
}


/* --- NEW STYLES FOR MANAGEMENT CARDS --- */
.cardList {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.managementCard {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

.managementCard h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.2rem;
    color: #333;
}

.managementCard p {
    flex-grow: 1; /* Allows paragraph to take available space */
    margin: 0 0 1.5rem 0;
    color: #666;
    line-height: 1.5;
}

.cardActions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: auto; /* Pushes actions to the bottom of the card */
}