/*
Theme Name:   Astra Child
Theme URI:    https://wpastra.com/child-theme/
Description:  Astra Child Theme
Author:       Your Name
Author URI:   https://yourwebsite.com
Template:     astra
Version:      1.0.0
*/

/* ==========================================================================
   Table of Contents:
   ==========================================================================
   1. Global Resets and Base Styles
   2. Dashboard Container and Structure
   3. Dashboard Header Styles
   4. Dashboard Filters
   5. Dashboard Tables
   6. Dashboard Buttons and Actions
   7. Responsive Adjustments
   8. Custom Page Containers and Auth Styles
   9. Preview Container Styles
   10. Footer Styles
   ========================================================================== */

/* ==========================================================================
   1. Global Resets and Base Styles
   ========================================================================== */
:root {
    --primary-color: #0073aa;
    --primary-color-hover: #005a87;
    --secondary-color: #6c757d;
    --secondary-color-hover: #5a6268;
    --danger-color: #dc3545;
    --danger-color-hover: #c82333;
    --text-color: #333;
    --text-color-light: #555;
    --background-color: #f5f5f5;
    --container-background: #f0f4f8;
    --white: #fff;
    --light-gray: #eee;
    --gray-background: #f9f9f9;
    --gray-background-hover: #f0f0f0;
    --warning-color: #ffc107;
    --warning-color-hover: #e0a800;
    --info-color: #17a2b8;
    --base-font-size: 1rem;
    --base-line-height: 1.6;
    --body-gradient-start: #e0eafc;
    --body-gradient-end: #f5f5f5;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    height: 100%;
    font-family: 'Open Sans', sans-serif;
    line-height: var(--base-line-height);
    color: var(--text-color);
    background: linear-gradient(to bottom, var(--body-gradient-start), var(--body-gradient-end));
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--primary-color-hover);
}

/* ==========================================================================
   2. Dashboard Container and Structure
   ========================================================================== */
.admin-dashboard-container,
.dashboard-container {
  background: var(--container-background);
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    max-width: 90%;
    width: auto;
    margin: 2rem auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch; /* Stretch items to fill container width */
}

/* ==========================================================================
   3. Dashboard Header Styles
   ========================================================================== */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0; /* Adjusted vertical padding */
    background-color: #1e3a8a;
    color: var(--white);
    border-radius: 8px;
    margin-bottom: 1.5rem;
    width: 100%;
    box-sizing: border-box;
}
    .dashboard-header h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--white);
}
.welcome-message {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.welcome-message h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.welcome-message p {
    margin: 0;
    font-size: 1rem;
    color: #e5e7eb;
}

.welcome-message p strong {
    color: var(--white);
    font-weight: 600;
}
.dashboard-header .btn-logout {
    background-color: #dc3545;
    color: var(--white);
    padding: 0.5rem 1rem;
    border-radius: 5px;
    text-decoration: none;
    font-size: 0.875rem;
    transition: background-color 0.3s ease;
    white-space: nowrap;
}

.dashboard-header .btn-logout:hover {
    background-color: var(--danger-color-hover);
}

/* ==========================================================================
   4. Dashboard Filters
   ========================================================================== */
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    align-items: flex-start;
}

.filters .form-group {
    flex: 1;
    min-width: 200px;
    margin-bottom: 0;
}
.filters .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-color-light);
    font-weight: 500;
    font-size: 0.9rem;
}

.filters .form-group input[type="text"],
.filters .form-group input[type="email"],
.filters .form-group input[type="password"],
.filters .form-group input[type="number"],
.filters .form-group textarea,
.filters .form-group select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--light-gray);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    background-color: var(--white);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
    height: auto;
}

.filters .form-group textarea {
    height: auto;
}

.filters .form-group select {
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 14px;
}

.filters .form-group input:focus,
.filters .form-group textarea:focus,
.filters .form-group select:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0.5rem rgba(0, 115, 170, 0.2);
}

.filters .btn-filter {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    white-space: nowrap;
    display: inline-block;
}
.filters .btn-filter:hover {
    background-color: var(--primary-color-hover);
}

/* ==========================================================================
   5. Dashboard Tables
   ========================================================================== */
.admin-table-container.table-responsive {
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.admin-table,
.dashboard-container table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    min-width: 600px;
}

.admin-table th,
.admin-table td,
.dashboard-container th,
.dashboard-container td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--light-gray);
    text-align: left;
    white-space: nowrap;
}

.admin-table th,
.dashboard-container th {
    background-color: var(--gray-background);
    font-weight: bold;
}
.admin-table tbody tr:nth-child(even),
.dashboard-container tr:nth-child(even) {
    background-color: var(--gray-background-hover);
}

/* ==========================================================================
   6. Dashboard Buttons and Actions
   ========================================================================== */

.bulk-actions {
    margin-top: 1rem;
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.bulk-actions .btn-primary,
.action-buttons .btn {
  background-color: var(--primary-color);
    color: var(--white);
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    white-space: nowrap;
    display: inline-block;
}

.bulk-actions .btn-primary:hover,
.action-buttons .btn:hover {
    background-color: var(--primary-color-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 115, 170, 0.2);
}
/* Action Buttons */
.action-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 0.5rem;

}

.action-buttons a,
.action-buttons button {
     display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.8rem;
    border-radius: 0.25rem;
    text-decoration: none;
    font-size: 0.8rem;
    transition: background-color 0.3s ease;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}
.action-buttons a.btn-preview {
    background-color: var(--info-color);
    color: var(--white);
}

.action-buttons a.btn-edit {
    background-color: var(--warning-color);
    color: var(--text-color);
}
.action-buttons a.btn-download {
    background-color: var(--secondary-color);
    color: var(--white);
}

.action-buttons a:hover,
.action-buttons button:hover {
    opacity: 0.9;
}
.btn-preview {
    background-color: transparent;
    border: none;
    color: var(--info-color);
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
    margin-right: 0.5rem;
}

.btn-preview i.fas.fa-eye {
    color: inherit;
}
.btn-download {
    background-color: var(--secondary-color);
    color: var(--white);
    padding: 0.5rem 0.75rem;
    border-radius: 5px;
    text-decoration: none;
    font-size: 0.875rem;
    transition: background-color 0.3s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.btn-download:hover {
    background-color: var(--secondary-color-hover);
}

/* Pagination Styling (Astra Child) */
.pagination {
    margin-top: 2rem;
    text-align: center;
}

.pagination a {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    margin: 0 0.25rem;
    border: 1px solid var(--light-gray);
    border-radius: 3px;
    text-decoration: none;
    color: var(--text-color);
}

.pagination a:hover {
    background-color: var(--gray-background-hover);
}

.pagination a.active {
    background-color: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
}

/* No Application Text (Astra Child) */
.no-application {
    color: var(--danger-color);
    font-size: 0.875rem;
}
/* ==========================================================================
   7. Responsive Adjustments
   ========================================================================== */
@media (max-width: 768px) {
    .admin-dashboard-container,
    .dashboard-container {
        padding: 1rem;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
         max-width: 95%;
    }
    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 1rem 0;
       }
        .filters {
          flex-direction: column;
          align-items: flex-start;
          gap: 0.5rem;
    }

    .filters .form-group {
        width: 100%;
        min-width: auto;
    }

       .bulk-actions {
        flex-direction: column;
         gap: 0.5rem;
    }
         .bulk-actions .btn-primary{
              width: 100%;
        }
       .admin-table-container.table-responsive {
        overflow-x: auto;
        }
        .admin-table,
       .dashboard-container table {
            min-width: 600px;
             }

        .admin-table th,
        .admin-table td,
         .dashboard-container th,
         .dashboard-container td{
            padding: 0.5rem;
            font-size: 0.8rem;
             white-space: normal;
        }
        .action-buttons {
             justify-content: flex-start;
           }
           .action-buttons a,
        .action-buttons button {
             margin-bottom: 0.25rem;
        }
}

@media (max-width: 480px) {
    .admin-dashboard-container,
    .dashboard-container {
        padding: 0.75rem;
        margin-left: 0.25rem;
        margin-right: 0.25rem;
         max-width: 100%;
    }
    .dashboard-header h2 {
            font-size: 1.1rem;
        }
           .filters {
           gap: 0.25rem;
    }
}
 /* Student Dashboard Specific Layout adjustments */
    @media (max-width: 768px) {

    .dashboard-container table {
        width: 100%; /* Make table take full width */
    }

    .dashboard-container th,
    .dashboard-container td {
        display: block; /* Make each cell take full width */
        text-align: left; /* Align text to the left */
        padding: 0.5rem;
        border-bottom: 1px solid var(--light-gray);
        box-sizing: border-box;
    }
        .dashboard-container th {
           font-weight: bold;
        }

          .dashboard-container  tr:first-child th {
        border-bottom: 2px solid var(--light-gray); /* Add double bottom border to first row */

    }
        .dashboard-container tr:last-child td {
            border-bottom: none;
        }
       .action-buttons {
        flex-direction: row; /* Arrange buttons side by side */
        flex-wrap: wrap;  /* allow buttons to wrap if they take too much space */
            justify-content: flex-start;
          gap: 0.25rem;
          margin-top: 0.5rem;
          padding-top: 0.5rem;
      }
     .action-buttons .btn {
            font-size: 0.8rem; /* Adjust button font size */
              width: auto; /* Allow buttons to take the width of their content */
             padding: 0.5rem 1rem; /*Adjust padding of buttons */
         }
    }

/* ==========================================================================
    8. Custom Page Containers and Auth Styles
   ========================================================================== */
.auth-container,
.preview-container,
.download-container,
.download-all-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    min-height: auto;
    padding: 1.5rem;
    background-color: #d4d4d4; /* Modified to Dark Grey */
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    overflow-x: auto;
    border-radius: 0.75rem;
    width: 90%;
    margin: 2rem auto;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .auth-container,
    .preview-container,
    .download-container,
    .download-all-container {
        padding: 1.5rem;
        width: 95%;
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 480px) {
   .auth-container,
    .preview-container,
    .download-container,
    .download-all-container {
        padding: 1rem;
        width: 98%;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
}

.auth-container a {
    color: var(--primary-color);
}

.auth-container a:hover {
    text-decoration: underline;
}

.preview-container,
.download-container,
.download-all-container {
    max-width: 100%;
}
  /* Centered Container for Auth Pages (Astra Child) - General styling, specific adjustments in additional.css */
.auth-container {
    background: var(--white); /* White background for the container itself */
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    width: 90%;
    max-width: 400px; /* Fixed max width for login/register/reset/forgot */
    margin: 2rem auto;
    text-align: center;
    overflow: hidden;
}

/* ==========================================================================
   9. Preview Container Styles
   ========================================================================== */
.preview-container {
    min-height: auto;
    padding: 1rem;
    background-color: #f5f7fa;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.preview-card {
    max-width: 1000px;
    width: 100%;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.application-header {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
    color: var(--white);
    padding: 1.5rem;
    text-align: center;
}

.application-header .school-branding {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.application-header .school-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
    background: var(--white);
    padding: 0.5rem;
    border-radius: 50%;
}

.school-info h1 {
    font-size: 1.5rem;
    margin: 0;
    font-weight: 600;
}

.school-info h2 {
    font-size: 1rem;
    margin: 0.5rem 0 0;
    font-weight: 400;
    opacity: 0.9;
}

.application-content {
    padding: 1.5rem;
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
/* Student Photo Styles */
.student-info-section {
    text-align: center;
}

.student-photo-container {
    width: 150px;
    height: 150px;
    margin: 0 auto 1rem;
    border: 3px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.student-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-placeholder {
    width: 100%;
    height: 100%;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #9ca3af;
}

.application-id {
    background: #f3f4f6;
    padding: 0.75rem;
    border-radius: 6px;
        font-size: 0.875rem;
    text-align: center;
}

/* Details Grid Styles */
.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.detail-item {
    background: #f8fafc;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.detail-item label {
    display: block;
    font-size: 0.875rem;
    color: #4b5563;
    margin-bottom: 0.5rem;
}

.detail-item span {
    display: block;
    font-size: 1rem;
    color: #111827;
    font-weight: 500;
}
/* Payment Status Styles */
.payment-status {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
}

.payment-status.paid {
    background: #dcfce7;
    color: #166534;
}

.payment-status.pending {
    background: #fef3c7;
    color: #92400e;
}
/* Action Buttons Styles within Preview */
.application-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

.preview-container .btn { /* Scope button styles to the preview container */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
    font-size: 0.875rem;
    width: 100%;
    text-decoration: none; /* Ensure no text decoration on buttons */
    box-sizing: border-box;
}
.preview-container .btn-primary {
    background: #2563eb;
    color: var(--white);
}

.preview-container .btn-primary:hover {
    background: #1d4ed8;
}

.preview-container .btn-secondary {
    background: #f3f4f6;
    color: #374151;
}

.preview-container .btn-secondary:hover {
    background: #e5e7eb;
}
.payment-notice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: #fef3c7;
    color: #92400e;
    border-radius: 6px;
    font-size: 0.875rem;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

/* ==========================================================================
   10. Footer Styles
   ========================================================================== */
.single-footer-column {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px;
    gap: 20px;
}

.footer-content-container {
   flex: 1;
   display: flex;
   flex-direction: column;
}

.footer-content {
    width: auto;
    margin-bottom: 10px;
}

.social-contact {
    margin-bottom: 0;
}

.single-footer-column .social-icons {
    margin-top: 10px;
}

.single-footer-column .social-icons a {
    display: inline-block;
    margin-right: 5px;
    font-size: 1.3em;
}

.single-footer-column ul {
    list-style: none;
    padding-left: 0;
}

.single-footer-column ul small {
    font-weight: normal;
}

.single-footer-column ul small li {
    padding-left: 10px;
    line-height: 1.5;
}

.footer-map {
  flex: 0 0 auto;
  width: auto;
  align-self: flex-end;
}

.footer-map iframe {
    max-width: 300px;
    width: 100%;
}

.bold-small {
    font-weight: bold;
}





/* Container Grid: Two-column layout on wider screens, stacked on narrow devices */
.advanced-reports-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 10px;
}

@media (min-width: 768px) {
  .advanced-reports-container {
    grid-template-columns: 300px 1fr;
  }
}

/* Sidebar (Filters & Options) */
.advanced-reports-sidebar {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  max-height: 90vh;
  overflow-y: auto;
}

.advanced-reports-sidebar h2 {
  font-size: 1.2rem;
  margin-bottom: 15px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}

.advanced-reports-sidebar .filter-group {
  margin-bottom: 15px;
}

.advanced-reports-sidebar label {
  font-weight: 600;
  display: block;
  margin-bottom: 5px;
}

.advanced-reports-sidebar select,
.advanced-reports-sidebar input[type="checkbox"] {
  width: 100%;
  padding: 8px;
  margin-bottom: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Checkbox group for columns selection */
.advanced-reports-sidebar .columns-selection .checkbox-group {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
}

/* Filter button */
.advanced-reports-sidebar .btn-filter {
  background-color: var(--primary-color);
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
  text-align: center;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.advanced-reports-sidebar .btn-filter:hover {
  background-color: var(--primary-color-hover);
}

/* Main Content Area */
.advanced-reports-main {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  overflow-x: auto;
}

/* Export buttons */
.advanced-reports-export {
  margin-bottom: 15px;
  display: flex;
  gap: 10px;
}

.advanced-reports-export .btn-export {
  background-color: var(--secondary-color);
  color: #fff;
  padding: 10px 15px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.advanced-reports-export .btn-export:hover {
  background-color: var(--secondary-color-hover);
}

/* Results Table */
.advanced-reports-table table {
  width: 100%;
  border-collapse: collapse;
}

.advanced-reports-table th,
.advanced-reports-table td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: left;
}

.advanced-reports-table th {
  background-color: #f9f9f9;
  font-weight: 600;
}

/* Ensure table cells wrap if necessary */
.advanced-reports-table td {
  word-wrap: break-word;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .advanced-reports-sidebar,
  .advanced-reports-main {
    padding: 15px;
  }

  .advanced-reports-export {
    flex-direction: column;
  }

  .advanced-reports-export .btn-export {
    width: 100%;
    text-align: center;
  }
}



/* Teacher Dashboard - Student List Styles */
.students-table {
    margin-top: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.students-table th, .students-table td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
}

.students-table th {
    background-color: #f7f7f7;
    font-weight: bold;
}

.students-table tbody tr:hover {
    background-color: #f1f1f1;
}

.view-header {
    margin-top: 40px;
    padding: 15px;
    background-color: #e7f5ff;
    border-left: 5px solid #0073aa;
    border-radius: 5px;
    overflow: auto; /* To contain the floated link */
}

.view-header h3 {
    margin: 0;
    float: left;
}

.view-header .back-link {
    float: right;
    font-size: 14px;
    line-height: 1.5; /* Align with h3 */
}

.action-link {
    color: #0073aa;
    text-decoration: none;
    font-weight: bold;
}

.action-link:hover {
    text-decoration: underline;
}

.no-students {
    background-color: #fffbe6;
    border: 1px solid #ffecb3;
    padding: 15px;
    border-radius: 5px;
    text-align: center;
    margin-top: 20px;
}



























/* ==========================================================================
   11. Teacher Dashboard Styles (Compact Redesign)
   ========================================================================== */
.teacher-dashboard-wrapper { max-width: 900px; margin: 40px auto; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background-color: var(--white); border-radius: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); overflow: hidden; }
.teacher-dashboard-wrapper .dashboard-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 25px; background-color: #1e3a8a; color: var(--white); }
.teacher-dashboard-wrapper .dashboard-header h2 { margin: 0; font-size: 1.3rem; }
.teacher-dashboard-wrapper .btn-logout { background-color: var(--danger-color); color: var(--white); padding: 8px 16px; text-decoration: none; border-radius: 5px; font-weight: 500; font-size: 0.85rem; transition: background-color 0.2s; }
.teacher-dashboard-wrapper .btn-logout:hover { background-color: #c82333; }
.teacher-dashboard-wrapper .dashboard-content { padding: 25px; }
.teacher-dashboard-wrapper .content-section { margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #e9ecef; }
.teacher-dashboard-wrapper .content-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.teacher-dashboard-wrapper .content-section h3 { font-size: 1.4rem; color: #212529; margin: 0 0 10px; }
.teacher-dashboard-wrapper .content-section p { color: #6c757d; margin: 0 0 15px; font-size: 0.95rem; }

.compact-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; align-items: flex-end; }
.compact-filter-grid .filter-group { display: flex; flex-direction: column; }
.compact-filter-grid label { font-size: 0.8rem; font-weight: 600; color: #495057; margin-bottom: 5px; }
.compact-filter-grid select, .compact-filter-grid input { width: 100%; padding: 10px; font-size: 0.9rem; border-radius: 5px; border: 1px solid #ced4da; box-sizing: border-box; }
.compact-filter-grid .btn-primary, .compact-filter-grid .btn-secondary { width: 100%; padding: 10px; font-size: 0.95rem; font-weight: bold; border: none; cursor: pointer; border-radius: 5px; transition: background-color 0.2s; }

/* Toggleable Report/Action Buttons */
.toggle-buttons-container { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.toggle-button { background-color: #e9ecef; color: #495057; padding: 10px 15px; border-radius: 5px; border: 1px solid #dee2e6; cursor: pointer; font-weight: 600; transition: all 0.2s; display: inline-flex; align-items: center; gap: 8px; }
.toggle-button:hover, .toggle-button.active { background-color: #1e3a8a; color: white; border-color: #1e3a8a; }
.toggle-panel { display: none; background-color: #f8f9fa; padding: 20px; border-radius: 5px; border: 1px solid #dee2e6; }
.toggle-panel h4 { margin: 0 0 15px; color: #1e3a8a; font-size: 1.1rem; }

/* Attendance Table Styles */
.view-header { border-bottom: none; padding-bottom: 0; }
.attendance-table td { text-align: center; }
.attendance-table td:nth-child(2) { text-align: left; }
.attendance-radio-group { display: flex; justify-content: center; align-items: center; gap: 8px; }
.attendance-radio-group input[type="radio"] { display: none; }
.attendance-radio-group label { padding: 5px 12px; border-radius: 20px; cursor: pointer; font-weight: 500; font-size: 13px; transition: all 0.2s ease; border: 2px solid #dee2e6; color: #6c757d; min-width: 35px; text-align: center; }
.attendance-radio-group input[value="P"]:checked + label { background-color: #28a745; color: white; border-color: #28a745; }
.attendance-radio-group input[value="A"]:checked + label { background-color: #dc3545; color: white; border-color: #dc3545; }
.attendance-radio-group input[value="L"]:checked + label { background-color: #ffc107; color: #212529; border-color: #ffc107; }
.saving-feedback { min-width: 60px; text-align: left; font-style: italic; color: #1e3a8a; font-size: 12px; }

/* ==========================================================================
   12. Admin Teacher Assignments Page
   ========================================================================== */
.teacher-assignment-table td { vertical-align: top; }
.teacher-assignment-table .assignments-list { max-height: 150px; overflow-y: auto; padding-right: 10px; }
.assignment-group { font-size: 0.85rem; margin-bottom: 8px; }
.assignment-group strong { color: #333; }
.assignment-group span { color: #555; }
.no-assignments { color: #777; font-style: italic; }
.btn-edit-assignments { font-size: 0.8rem; padding: 6px 12px; }

/* Modal Styles */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal-content { background: white; border-radius: 8px; max-width: 90vw; width: 1000px; max-height: 90vh; display: flex; flex-direction: column; }
.modal-header { padding: 15px 20px; border-bottom: 1px solid #dee2e6; display: flex; justify-content: space-between; align-items: center; }
.modal-header h3 { margin: 0; font-size: 1.2rem; }
.modal-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #888; }
.modal-body { padding: 20px; overflow-y: auto; flex-grow: 1; }
.modal-body p { margin: 0 0 15px; font-size: 0.9rem; color: #555; }
.assignments-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.assignment-form-group { border: 1px solid #e0e0e0; border-radius: 5px; }
.assignment-form-group h4 { margin: 0; padding: 10px; background: #f7f7f7; font-size: 0.9rem; border-bottom: 1px solid #e0e0e0; }
.subject-checkbox-list { padding: 10px; display: flex; flex-direction: column; gap: 8px; max-height: 200px; overflow-y: auto; }
.subject-checkbox-list label { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; cursor: pointer; }
.modal-footer { padding: 15px 20px; border-top: 1px solid #dee2e6; text-align: right; display: flex; justify-content: flex-end; gap: 10px; }

/* Responsive Media Queries */
@media (max-width: 768px) {
    .teacher-dashboard-wrapper { margin: 20px 10px; }
    .teacher-dashboard-wrapper .dashboard-header { flex-direction: column; align-items: flex-start; gap: 10px; }
    .toggle-buttons-container { flex-direction: column; }
    .toggle-buttons-container .toggle-button { width: 100%; justify-content: center; }
}










/* ==========================================================================
   12. Admin Dashboard - Unified Styles
   ========================================================================== */

/* General Section Styling */
.admin-dashboard-container .dashboard-section {
    background-color: var(--white);
    border-radius: 8px;
    box-shadow: var(--shadow);
    margin-top: 2rem;
    overflow: hidden;
}
.admin-dashboard-container .dashboard-section h3 {
    margin: 0;
    padding: 1rem 1.2rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--secondary-color);
    background-color: #f8f9fa;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 10px;
}
.admin-dashboard-container .filters {
    margin: 1.2rem;
    padding: 0;
    box-shadow: none;
    background: none;
    border-radius: 0;
}
.admin-dashboard-container .applications-form {
    padding: 1.2rem;
    padding-top: 0;
}

/* Teacher Assignment Table */
.teacher-assignment-table td { 
    vertical-align: top; 
    padding: 0.8rem 1rem;
}
.teacher-assignment-table .assignments-list { 
    max-height: 150px; 
    overflow-y: auto; 
    padding-right: 10px;
}
.assignment-group { 
    font-size: 0.85rem; 
    margin-bottom: 8px; 
}
.assignment-group strong { 
    display: block;
    color: #333; 
    font-weight: 600;
}
.assignment-group span { color: #555; }
.no-assignments { color: #777; font-style: italic; }
.btn-edit-assignments { font-size: 0.8rem; padding: 6px 12px; }

/* Modal Styles */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal-content { background: white; border-radius: 8px; max-width: 90vw; width: 1000px; max-height: 90vh; display: flex; flex-direction: column; }
.modal-header { padding: 15px 20px; border-bottom: 1px solid #dee2e6; display: flex; justify-content: space-between; align-items: center; }
.modal-header h3 { margin: 0; font-size: 1.2rem; }
.modal-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #888; }
.modal-body { padding: 20px; overflow-y: auto; flex-grow: 1; }
.modal-body p { margin: 0 0 15px; font-size: 0.9rem; color: #555; }
.assignments-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.assignment-form-group { border: 1px solid #e0e0e0; border-radius: 5px; }
.assignment-form-group h4 { margin: 0; padding: 10px; background: #f7f7f7; font-size: 0.9rem; border-bottom: 1px solid #e0e0e0; }
.subject-checkbox-list { padding: 10px; display: flex; flex-direction: column; gap: 8px; max-height: 200px; overflow-y: auto; }
.subject-checkbox-list label { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; cursor: pointer; }
.modal-footer { padding: 15px 20px; border-top: 1px solid #dee2e6; text-align: right; display: flex; justify-content: flex-end; gap: 10px; }
.btn-secondary { background-color: #6c757d; color: white; }
.btn-secondary:hover { background-color: #5a6268; }

/* Notices */
.notice {
    padding: 1rem;
    margin: 1.2rem;
    border-radius: 4px;
    border: 1px solid;
    border-left-width: 4px;
}
.notice p { margin: 0; }
.notice.notice-success { background-color: #f0f9eb; border-color: #a7d995; color: #467635; }
.notice.notice-error { background-color: #fbeaea; border-color: #e6a8a8; color: #9e2a2a; }






/* Add this to your style.css or a relevant CSS file */
.btn-success {
    background-color: #28a745 !important;
    color: white !important;
    border-color: #28a745 !important;
}

.btn-success:hover:not(:disabled) {
    background-color: #218838 !important;
    border-color: #1e7e34 !important;
}

.btn-success:disabled {
    background-color: #a5d6a7 !important;
    border-color: #a5d6a7 !important;
    cursor: not-allowed;
}















/* ======================================================= */
/* === Advanced Reports Page Styles (V16.0) === */
/* ======================================================= */
:root {
    --arp-primary-color: #3a6ea5; --arp-primary-dark: #2a5a8a; --arp-secondary-color: #6c757d;
    --arp-light-bg: #f8f9fa; --arp-lighter-bg: #fdfdfd; --arp-border-color: #dee2e6;
    --arp-text-color: #343a40; --arp-text-muted: #6c757d; --arp-white: #ffffff;
    --arp-success-color: #28a745; --arp-danger-color: #dc3545; --arp-disabled-bg: #e9ecef;
    --arp-font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --arp-border-radius: 0.2rem; --arp-box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.07);
    --arp-box-shadow-lg: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.1); --arp-input-height: 30px;
}
body.modal-open { overflow: hidden; }
body.resizing, body.resizing * { cursor: col-resize !important; }

/* --- General Layout & Buttons --- */
.advanced-reports-page-container { font-family: var(--arp-font-family-sans-serif); color: var(--arp-text-color); background-color: #f0f2f5; padding: 15px; max-width: 100%; box-sizing: border-box; }
.advanced-reports-outer { background-color: var(--arp-white); border-radius: var(--arp-border-radius); box-shadow: var(--arp-box-shadow-lg); overflow: hidden; border: 1px solid var(--arp-border-color); }
.school-header { padding: 12px 20px; border-bottom: 1px solid var(--arp-border-color); background-color: var(--arp-lighter-bg); }
.school-info .report-title { font-size: 1.3rem; margin: 0; color: var(--arp-primary-dark); font-weight: 600; }
.action-button, .button { display: inline-flex; align-items: center; justify-content: center; padding: 0.35rem 0.7rem; font-size: 0.8rem; font-weight: 500; border-radius: var(--arp-border-radius); border: 1px solid transparent; cursor: pointer; transition: all 0.2s ease-in-out; text-decoration: none !important; white-space: nowrap; height: var(--arp-input-height); }
.action-button .button-icon { width: 0.9em; height: 0.9em; margin-right: 0.4em; }
.action-button.button-primary { background-color: var(--arp-primary-color); border-color: var(--arp-primary-color); color: var(--arp-white); }
.action-button.button-primary:hover:not(:disabled) { background-color: var(--arp-primary-dark); }
.action-button.btn-print { background-color: var(--arp-secondary-color); color: var(--arp-white); }
.action-button.btn-export { background-color: var(--arp-success-color); color: var(--arp-white); }
.action-button:disabled, .action-button.disabled { background-color: var(--arp-disabled-bg) !important; color: var(--arp-disabled-text) !important; cursor: not-allowed !important; opacity: 0.65 !important; }

/* --- Filters Section --- */
.filters-section { padding: 10px 20px; background-color: var(--arp-lighter-bg); border-bottom: 1px solid var(--arp-border-color); }
.filters-grid { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.filter-item { display: flex; flex-direction: column; }
.filter-label { margin-bottom: 3px; font-weight: 500; color: #495057; font-size: 0.75rem; }
.filter-input, .filter-select { width: 100%; padding: 0.3rem 0.5rem; border: 1px solid var(--arp-border-color); border-radius: var(--arp-border-radius); font-size: 0.8rem; height: var(--arp-input-height); box-sizing: border-box; }
.filter-input:focus, .filter-select:focus { border-color: var(--arp-primary-color); outline: 0; box-shadow: 0 0 0 0.1rem rgba(58, 110, 165, 0.25); }
.filter-input[disabled] { background-color: var(--arp-disabled-bg); cursor: not-allowed; }
#list_search { height: auto; resize: vertical; padding-top: 5px; padding-bottom: 5px; line-height: 1.4; }
.filter-input-file { font-size: 0.8rem; line-height: calc(var(--arp-input-height) - 4px); }
.filter-input-file::file-selector-button { height: calc(var(--arp-input-height) - 2px); padding: 0.3rem 0.6rem; font-weight: 500; border-radius: var(--arp-border-radius); border: 1px solid var(--arp-secondary-color); cursor: pointer; transition: background-color 0.2s ease-in-out; background-color: var(--arp-secondary-color); color: var(--arp-white); margin-right: 10px; }
.filter-input-file::file-selector-button:hover { background-color: #5a6268; border-color: #545b62; }

/* Filter Layout Tuning */
.filter-item.search-filter-item { flex: 2 1 180px; }
.filter-item.list-search-key-item { flex: 1.5 1 90px; }
.filter-item.list-search-area-item { flex: 2 1 120px; }
.filter-item.file-upload-item { flex: 2 1 200px; }
.filter-item.report-type-filter-item { flex: 2 1 160px; }
.filter-item.session-filter-item,
.filter-item.class-filter-item,
.filter-item.gender-filter-item,
.filter-item.stream-filter-item { flex: 1.5 1 98px; }
.filter-item.subject-filter-item { flex: 2 1 160px; }
.filter-item.apply-filter-item { flex: 0 0 auto; }

.summary-report-active .detail-only-filter, .summary-report-active .detail-only-action { display: none !important; }
#subject_filter_container { display: none; } /* Managed by JS */

/* --- Multi-Select Dropdowns --- */
.multi-select-dropdown { position: relative; }
.multi-select-button { display: flex; align-items: center; justify-content: space-between; width: 100%; height: var(--arp-input-height); padding: 0.3rem 0.5rem; background-color: var(--arp-white); border: 1px solid var(--arp-border-color); border-radius: var(--arp-border-radius); text-align: left; cursor: pointer; font-size: 0.8rem; }
.multi-select-button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.multi-select-button .dropdown-arrow { width: 1em; height: 1em; color: var(--arp-text-muted); transition: transform 0.2s; }
.multi-select-dropdown-content { display: none; position: absolute; top: 100%; left: 0; min-width: 200px; background-color: var(--arp-white); border: 1px solid var(--arp-border-color); border-radius: var(--arp-border-radius); box-shadow: var(--arp-box-shadow); z-index: 1000; margin-top: 2px; }
.multi-select-actions { display: flex; justify-content: space-between; padding: 5px 8px; border-bottom: 1px solid var(--arp-border-color); background-color: var(--arp-light-bg); }
.multi-select-actions a { font-size: 0.75rem; color: var(--arp-primary-color); text-decoration: none; }
.multi-select-options { max-height: 200px; overflow-y: auto; padding: 5px; }
.multi-select-label { display: flex; align-items: center; padding: 4px 8px; cursor: pointer; border-radius: 3px; }
.multi-select-label:hover { background-color: var(--arp-light-bg); }
.multi-select-label input[type="checkbox"] { opacity: 0; width: 0; height: 0; position: absolute; }
.multi-select-label .checkbox-visual { width: 16px; height: 16px; border: 1px solid #ccc; border-radius: 3px; margin-right: 8px; display: inline-block; position: relative; }
.multi-select-label input:checked + .checkbox-visual { background-color: var(--arp-primary-color); border-color: var(--arp-primary-color); }
.multi-select-label input:checked + .checkbox-visual::after { content: '✔'; color: white; position: absolute; top: -2px; left: 2px; font-size: 12px; }
.multi-select-label .label-text { font-size: 0.85rem; }

/* --- Filter Details Bar & Actions --- */
.filter-details-bar { padding: 6px 20px; background-color: #e9ecef; border-bottom: 1px solid var(--arp-border-color); font-size: 0.75rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.filter-summary-text p { margin: 0; }
.filter-summary-text strong { color: var(--arp-text-color); font-weight: 600; }
.filter-bar-actions { display: flex; gap: 6px; align-items: center; }
.print-action-wrapper { position: relative; }
.print-tooltip { display: none; position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%); background-color: #555; color: white; padding: 5px 8px; border-radius: 4px; z-index: 1; font-size: 0.7rem; opacity: 0; }
.print-action-wrapper:hover .print-tooltip { display: block; opacity: 1; }

/* --- Main Content & Tables --- */
.advanced-reports-main { padding: 0; }
.advanced-reports-table-wrapper { overflow-x: auto; padding: 10px 20px; }
.advanced-reports-table table, .summary-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.8rem; border: 1px solid var(--arp-border-color); }
.advanced-reports-table th, .advanced-reports-table td, .summary-table th, .summary-table td { padding: 0.4rem 0.5rem; text-align: left; vertical-align: top; border: 1px solid #e1e1e1; word-wrap: break-word; }
.advanced-reports-table thead th, .summary-table thead th { background-color: var(--arp-primary-color); color: var(--arp-white); font-weight: 600; position: sticky; top: 0; z-index: 10; text-align: center; }
.advanced-reports-table th .th-content-wrapper { display: flex; align-items: center; justify-content: space-between; position: relative; }
.advanced-reports-table th .sort-link { color: var(--arp-white); text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 3px; width: 100%; }
.sort-indicator { font-size: 0.8em; }
.resizer { position: absolute; top: 0; right: -3px; width: 6px; height: 100%; cursor: col-resize; z-index: 11; }
.advanced-reports-table tbody tr:nth-child(even) td, .summary-table tbody tr:nth-child(even) td { background-color: var(--arp-light-bg); }
.advanced-reports-table tbody tr:hover td, .summary-table tbody tr:hover td { background-color: #e6f0f8; }
.summary-table { table-layout: auto; }
.summary-table th, .summary-table td { text-align: center; font-variant-numeric: tabular-nums; }
.summary-table td:first-child, .summary-table th:first-child { text-align: left; font-weight: 500; }
.summary-table tfoot th { background-color: #e9ecef; font-weight: bold; }

/* --- Empty State, Footer, Modals --- */
.data-empty-state { text-align: center; padding: 30px 15px; color: var(--arp-text-muted); border: 1px dashed var(--arp-border-color); margin: 15px 20px; }
.report-timestamp { padding: 8px 20px; text-align: right; font-size: 0.75rem; background-color: var(--arp-light-bg); border-top: 1px solid var(--arp-border-color); }
.print-header-placeholder, .print-filter-details { display: none; }

/* --- Columns Modal (Improved for Responsiveness) --- */
.modal-overlay { display: none; position: fixed; z-index: 1050; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.55); justify-content: center; align-items: center; }
.modal-content { background-color: var(--arp-white); border-radius: var(--arp-border-radius); position: relative; display: flex; flex-direction: column; max-height: calc(100vh - 40px); width: 95%; max-width: 850px; }
#columns-selection-form { display: flex; flex-direction: column; flex-grow: 1; min-height: 0; /* Critical for scrolling */ }
.modal-close-button { position: absolute; top: 10px; right: 12px; font-size: 1.6rem; font-weight: bold; color: #aaa; background: none; border: none; cursor: pointer; }
.modal-title { font-size: 1.1rem; padding: 12px 20px; border-bottom: 1px solid var(--arp-border-color); color: var(--arp-primary-dark); flex-shrink: 0; }
.modal-actions { display: flex; gap: 8px; padding: 10px 20px; background-color: var(--arp-light-bg); flex-shrink: 0; }
.modal-actions-top { border-bottom: 1px solid var(--arp-border-color); }
.modal-actions-bottom { justify-content: flex-end; border-top: 1px solid var(--arp-border-color); }
.columns-selection-grid-container { overflow-y: auto; flex-grow: 1; padding: 20px; }
.columns-selection-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; }
.column-category-group { background: var(--arp-lighter-bg); padding: 12px 15px; border-radius: var(--arp-border-radius); border: 1px solid #eee; }
.category-title { font-size: 0.9rem; font-weight: 600; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid #eee; color: var(--arp-primary-dark); }
.category-checkboxes { display: flex; flex-direction: column; gap: 10px; }
.modern-checkbox-label { display: inline-flex; align-items: center; cursor: pointer; font-size: 0.85rem; }
.modern-checkbox { margin-right: 8px; }

/* --- Loading Spinner --- */
.loading-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.9); z-index: 9999; justify-content: center; align-items: center; flex-direction: column; }
.spinner { width: 40px; height: 40px; border: 4px solid #f0f0f0; border-top: 4px solid var(--arp-primary-color); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }

/* --- Print Specific Styles --- */
@media print {
    @page {
        margin: 0.7cm;
        size: A4; /* Default to Portrait, user can choose Landscape in print dialog */
    }

    /* --- THEME ISOLATION FOR PRINTING --- */
    #wpadminbar, header, footer, nav, .site-header, .site-footer, #masthead, #colophon, #secondary, .sidebar, .widget-area, .breadcrumb-area, .page-title, .entry-header, .post-navigation, .comments-area, .elementor-location-header, .elementor-location-footer { display: none !important; visibility: hidden !important; }
    html, body { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; background: #fff !important;  color: #000 !important; font-size: 7pt !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    #page, #content, #primary, #main, .entry-content, article, .content-area, .site-content { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; float: none !important; display: block !important; }
    .advanced-reports-page-container { display: block !important; position: static !important; width: 100% !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; border: none !important; }
    .no-print { display: none !important; }
    .print-only { display: table-footer-group; } /* Make tfoot visible */
    tfoot.print-only { display: table-footer-group !important; }

    .advanced-reports-outer, .advanced-reports-table-wrapper { border: none !important; box-shadow: none !important; background: none !important; overflow: visible !important; }
    .print-header-placeholder, .print-filter-details { display: block !important; text-align: center; }
    .print-header-placeholder h1 { font-size: 11pt !important; margin: 0; font-weight: bold; }
    .print-header-placeholder h2 { font-size: 10pt !important; margin: 0 0 5pt; }
    .print-filter-details { font-size: 6.5pt !important; margin-bottom: 8pt; border-bottom: 0.5px dotted #ccc; padding-bottom: 4pt; }

    #report-table, .summary-table { width: 100% !important; table-layout: auto !important; border-collapse: collapse !important; font-size: 6.5pt !important; border: 0.5px solid #888 !important; }
    #report-table thead, .summary-table thead { display: table-header-group !important; }
    #report-table tfoot, .summary-table tfoot { display: table-footer-group !important; }
    #report-table tr, .summary-table tr { page-break-inside: avoid !important; }
    #report-table th, #report-table td, .summary-table th, .summary-table td { border: 0.5px solid #aaa !important; padding: 2px !important; line-height: 1.2; word-wrap: break-word; }

    /* MODIFIED: Retain header colors for printing */
    #report-table th, .summary-table th { background-color: #3a6ea5 !important; color: #ffffff !important; font-weight: bold !important; }

    /* MODIFIED: Retain alternating row colors for printing */
    #report-table tbody tr:nth-child(even) td, .summary-table tbody tr:nth-child(even) td { background-color: #f8f9fa !important; }

    .print-footer-row { background-color: #fff !important; }
    .print-footer-cell { text-align: center !important; font-size: 6pt !important; padding: 4pt 0 !important; border: none !important; border-top: 0.5px solid #bbb !important; }
}





/* ======================================================= */
/* === Responsive Fixes for Advanced Reports Page === */
/* ======================================================= */
@media (max-width: 768px) {
    /* Change the filter bar to stack items vertically */
    .filter-details-bar {
        flex-direction: column; /* Stack text and buttons */
        align-items: flex-start; /* Align everything to the left */
        gap: 10px; /* Add some space between the text and the buttons */
    }

    /* Make the button container take full width and space them out */
    .filter-bar-actions {
        width: 100%;
        justify-content: flex-start; /* Or 'space-between' for a different look */
    }

    /* Adjust the main filters grid for better stacking on mobile */
    .filters-grid {
        flex-direction: column;
        align-items: stretch; /* Make all filter items full width */
    }

    .filter-item {
        flex-basis: auto !important; /* Reset flex-basis for vertical stacking */
        width: 100%;
    }
}

























/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    line-height: 1.6;
}

/* Login Section Styles */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.login-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    padding: 40px;
    width: 100%;
    max-width: 450px;
    transform: translateY(-20px);
    animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-header {
    text-align: center;
    margin-bottom: 30px;
}

.login-header h1 {
    color: #2c3e50;
    font-size: 28px;
    margin-bottom: 10px;
}

.login-header p {
    color: #7f8c8d;
    font-size: 16px;
}

.login-form {
    display: flex;
    flex-direction: column;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #2c3e50;
    font-weight: 500;
}

.form-group input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e0e6ed;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s ease;
}

.form-group input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.start-test-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-top: 10px;
}

.start-test-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

/* Test Section Styles */
.test-container {
    background: #f8f9fa;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.test-header {
    background: white;
    border-bottom: 2px solid #e9ecef;
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.test-info h2 {
    color: #2c3e50;
    font-size: 24px;
    margin-bottom: 5px;
}

.test-meta {
    color: #6c757d;
    font-size: 14px;
}

.timer-section {
    text-align: right;
}

.timer-label {
    color: #6c757d;
    font-size: 14px;
    margin-bottom: 5px;
}

.timer {
    font-size: 24px;
    font-weight: bold;
    color: #dc3545;
    font-family: 'Courier New', monospace;
    background: #fff5f5;
    padding: 8px 16px;
    border-radius: 6px;
    border: 2px solid #fecaca;
}

.timer.warning {
    color: #f59e0b;
    background: #fef3c7;
    border-color: #fde68a;
}

.timer.danger {
    color: #dc2626;
    background: #fef2f2;
    border-color: #fecaca;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Main Content Area */
.main-content {
    flex: 1;
    display: flex;
    gap: 20px;
    padding: 20px 30px;
}

.question-area {
    flex: 2;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 30px;
    display: flex;
    flex-direction: column;
}

.question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e9ecef;
}

.question-header span {
    font-weight: 600;
    color: #2c3e50;
}

.marks {
    background: #e3f2fd;
    color: #1976d2;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 14px;
}

.question-content {
    flex: 1;
    margin-bottom: 30px;
}

.question-text {
    font-size: 18px;
    line-height: 1.6;
    color: #2c3e50;
    margin-bottom: 25px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #667eea;
}

.mcq-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.option {
    display: flex;
    align-items: center;
    padding: 15px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.option:hover {
    background: #f8f9fa;
    border-color: #667eea;
}

.option input[type="radio"] {
    margin-right: 12px;
    transform: scale(1.2);
}

.option label {
    flex: 1;
    cursor: pointer;
    font-size: 16px;
    color: #2c3e50;
}

.option.selected {
    background: #e3f2fd;
    border-color: #1976d2;
}

.descriptive-answer textarea {
    width: 100%;
    padding: 15px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 16px;
    font-family: inherit;
    resize: vertical;
    min-height: 200px;
    transition: border-color 0.3s ease;
}

.descriptive-answer textarea:focus {
    outline: none;
    border-color: #667eea;
}

.question-nav-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.nav-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
}

.nav-btn.primary {
    background: #28a745;
    color: white;
}

.nav-btn.primary:hover {
    background: #218838;
    transform: translateY(-1px);
}

.nav-btn.secondary {
    background: #6f42c1;
    color: white;
}

.nav-btn.secondary:hover {
    background: #5a2d91;
    transform: translateY(-1px);
}

.nav-btn.danger {
    background: #dc3545;
    color: white;
}

.nav-btn.danger:hover {
    background: #c82333;
    transform: translateY(-1px);
}

.nav-btn.submit {
    background: #fd7e14;
    color: white;
    font-weight: 600;
}

.nav-btn.submit:hover {
    background: #e8690b;
    transform: translateY(-1px);
}

/* Question Palette */
.question-palette {
    flex: 1;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 25px;
    height: fit-content;
    max-height: 80vh;
    overflow-y: auto;
}

.palette-header h3 {
    color: #2c3e50;
    margin-bottom: 20px;
    text-align: center;
}

.palette-legend {
    margin-bottom: 20px;
}

.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 14px;
    color: #6c757d;
}

.legend-color {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    margin-right: 10px;
    border: 1px solid #dee2e6;
}

.legend-color.not-visited {
    background: #f8f9fa;
}

.legend-color.not-answered {
    background: #dc3545;
}

.legend-color.answered {
    background: #28a745;
}

.legend-color.marked-review {
    background: #6f42c1;
}

.legend-color.answered-marked {
    background: linear-gradient(45deg, #28a745 50%, #6f42c1 50%);
}

.palette-numbers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 8px;
    margin-bottom: 20px;
}

.palette-number {
    width: 40px;
    height: 40px;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
    position: relative;
}

.palette-number:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.palette-number.not-visited {
    background: #f8f9fa;
    color: #6c757d;
}

.palette-number.not-answered {
    background: #dc3545;
    color: white;
    border-color: #dc3545;
}

.palette-number.answered {
    background: #28a745;
    color: white;
    border-color: #28a745;
}

.palette-number.marked-review {
    background: #6f42c1;
    color: white;
    border-color: #6f42c1;
}

.palette-number.answered-marked {
    background: #6f42c1;
    color: white;
    border-color: #6f42c1;
    position: relative;
}

/* Adds a small green check mark to answered & marked questions */
.palette-number.answered-marked::after {
    content: '✔';
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: #28a745;
    color: white;
    font-size: 10px;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid white;
}


.palette-number.current {
    border-color: #fd7e14;
    border-width: 3px;
    font-weight: bold;
}

.palette-stats {
    border-top: 1px solid #dee2e6;
    padding-top: 15px;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
}

.stat-item span:first-child {
    font-weight: 600;
    color: #2c3e50;
}

.stat-item span:last-child {
    color: #6c757d;
}

/* Modal Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: white;
    border-radius: 12px;
    padding: 30px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.modal-content h3 {
    color: #2c3e50;
    margin-bottom: 15px;
}

.modal-content p {
    color: #6c757d;
    margin-bottom: 25px;
    line-height: 1.6;
}

.modal-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

/* Results Section */
.results-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.results-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    padding: 40px;
    width: 100%;
    max-width: 500px;
    text-align: center;
    animation: fadeInUp 0.8s ease-out;
}

.results-card h2 {
    color: #28a745;
    margin-bottom: 25px;
    font-size: 28px;
}

.results-summary {
    text-align: left;
    margin-bottom: 25px;
}

.result-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #e9ecef;
}

.result-label {
    font-weight: 600;
    color: #2c3e50;
}

.results-message {
    color: #6c757d;
    font-style: italic;
}

/* Responsive Design */
@media (max-width: 900px) {
    .main-content {
        flex-direction: column;
        padding: 15px;
    }
    
    .test-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
        padding: 15px;
    }
    
    .question-area {
        padding: 20px;
    }

    .question-palette {
        max-height: none;
    }
}

@media (max-width: 768px) {
    .question-nav-buttons {
        flex-direction: column;
    }
    
    .nav-btn {
        width: 100%;
    }
    
    .timer {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .login-card {
        padding: 25px;
    }

    .question-text {
        font-size: 16px;
    }
}