/* Styling for the report table */
      table {
        margin: 20px auto;
        border-collapse: collapse;
        width: 90%;
        font-family: Arial, sans-serif;
        background-color: #f7f9fc;
        display: block;
      }
      
      th, td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: center;
      }

    .nav-buttons-container {
        margin: 20px;
        display: flex;
        gap: 15px;
        justify-content: center;
    }
    
    .nav-buttons-container button {
        background-color: #007bff;
        color: white;
        padding: 10px 18px;
        border: none;
        border-radius: 6px;
        font-size: 16px;
        cursor: pointer;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        transition: background-color 0.3s ease, transform 0.2s ease;
    }
    
    .nav-buttons-container button:hover {
        background-color: #0056b3;
        transform: scale(1.05);
    }
      /* Styling for the report table */
    

        /* Animations */
        @keyframes containerFade {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes labelSlideIn {
            from { opacity: 0; transform: translateX(-20px); }
            to { opacity: 1; transform: translateX(0); }
        }
  

#aa {
  width: 900px;
  background-color: #ffffff;
  padding: 30px;
  margin-left: 200px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  animation: fadeIn 1s ease-out;
  font-size: 16px;
  align-items: center;
  justify-content: center;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

label {
  font-size: 14px;
  color: #555;
  font-weight: 500;
  margin-bottom: 8px;
  display: block;
}

label:hover {
  color: #007bff;
}

select {
  width: 100%;
  padding: 12px;
  margin: 8px 0 16px;
  border: 2px solid #ccc;
  border-radius: 6px;
  background-color: #fafafa;
  font-size: 14px;
  color: #555;
  transition: all 0.3s ease;
}
/* ==== FOOTER ==== */
footer {
  background: #003366;
  color: white;
  text-align: center;
  padding: 15px;
  font-size: 14px;
}

select:focus {
  border-color: #007bff;
  background-color: #fff;
  outline: none;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.4);
}

select option:first-child {
  color: #888;
  font-style: italic;
}

select option:hover {
  background-color: #f2f2f2;
}

#class-select {
  margin-bottom: 20px;
}

#section-select {
  display: none;
  opacity: 100;
  transition: opacity 0.3s ease-in-out;
}

#section-select.show {
  display: block;
  opacity: 100;
}

@keyframes slideIn {
  0% {
    transform: translateY(-20px);
    opacity: 100;
  }
  100% {
    transform: translateY(0);
    opacity: 100;
  }
}

select {
  animation: slideIn 0.5s ease-out;
}

select:focus {
  transform: scale(1.03);
}

 
   
   
      /* Styling for the table header */
      th {
        background-color: #008080; /* Teal */
        color: white;
        padding: 10px;
        font-weight: bold;
      }
    
      /* Specific styling for school name row */
      .school-name-row th {
        background-color: #ff7f50; /* Coral */
        font-size: 1.8em;
        padding: 15px;
      }
    
      /* Additional styling for other header rows */
      thead tr:nth-child(2), thead tr:nth-child(3) {
        background-color: #20b2aa; /* Light Sea Green */
        color: white;
        font-weight: bold;
      }
    
      /* Row styling for subject summary */
      tbody tr:nth-child(even) {
        background-color: #e0f7fa; /* Very Light Teal */
      }
    
      tbody tr:nth-child(odd) {
        background-color: #ffffff; /* White */
      }
    
      /* Styling for individual student rows */
      .student-row {
        background-color: #ffffff; /* Formal white for all student rows */
      }
    
      /* Fade-in animation */
      @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
      }
    
      /* Apply fade-in animation to the report container */
      #reportContainer {
        visibility: hidden;
        opacity: 0;
        animation: fadeIn 1s ease-in-out forwards;
      }
   
      body {
        font-family: Arial, sans-serif;
        text-align: center;
      }
    
     
      
      input[type="number"] {
        width: 75px;
        max-width: 85px;
      }
      #info-div {
        border: 2px solid #000;
        padding: 20px;
        margin: 20px auto;
        width: 40%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 10px;
       
        visibility: hidden;
      }
     /* Center the Compare Exams div */
     #compare {
      border: 1px solid #ddd;
      border-radius: 8px;
      background-color: #f8f8f8;
      width: 100%;
      max-width: 100%;
      margin: auto;
      padding: 20px;
      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
     
  }
  
  #compare h3 {
      font-size: 1.5em;
      color: #4a90e2;
      margin-bottom: 10px;
  }
  
  .compare-row {
      display: flex;
      justify-content: center;
      gap: 15px;
      margin-bottom: 15px;
  }
  
  #compare label {
      font-weight: bold;
      color: #333;
  }
  
  #compare select {
      padding: 5px 10px;
      border-radius: 5px;
      border: 1px solid #ccc;
      font-size: 1em;
      outline: none;
  }
  
  #compare button {
      background-color: #4a90e2;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      font-size: 1em;
      cursor: pointer;
      transition: background-color 0.3s ease;
      width: 75px;
      max-width: 85px;
  }
  
  #compare button:hover {
      background-color: #357ABD;
  }
  


  /* General Style for #aa (desktop and larger screens) */
#aa {
  background-color: #f3ff8a;
  border: 1px solid black;
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
  position: relative;
  gap: 15px; /* Space between elements */
}

/* Responsive Style for Mobile (Compact layout) */
@media (max-width: 768px) {
  #aa {
      flex-direction: column; /* Stack elements vertically */
      padding: 10px;
      gap: 10px;
      text-align: center;
  }

  #aa label, 
  #aa select {
      width: 100%;
      max-width: 100%;
      margin: 5px 0;
      font-size: 16px;
  }
}

      .info-label {
        font-weight: bold;
      }
      #result, #report-container {
        margin-top: 20px;
        visibility: hidden;
        width: 95%;
        max-width: 95%;
      }
      
        /* Navbar */
        .navbar {
            background: linear-gradient(135deg, #00aaff, #007bff);
            padding: 20px 0;
            text-align: center;
            color: white;
            font-size: 24px;
            letter-spacing: 1px;
            text-transform: uppercase;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            animation: navbarAnimation 1.5s ease-in-out;
            position: relative;
            width:100%;
            max-width: 100%;
        }
        
        .navbar h1 {
            margin: 0;
            font-weight: bold;
            font-size: 26px;
          
        }

        /* Navbar Animation */
        @keyframes navbarAnimation {
            0% { transform: translateY(-100%); }
            100% { transform: translateY(0); }
        }

        /* Menu Bar */
        .menu-bar {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #007bff;
            padding: 35px;
            transition: 0.3s;
            position: relative;
            width: 100%;
            max-width: auto;
            min-width: 100%;
        }

        .menu-bar a {
            color: white;
            text-decoration: none;
            padding: 12px 25px;
            font-size: 18px;
            transition: background-color 0.3s, color 0.3s;
            border-radius: 5px;
            margin: 0 5px;
            width: 75px;
            max-width: 85px;}

        .menu-bar a:hover {
            background-color: #0056b3;
            color: #ffdd57;
        }
/* Toggle Button (Hidden by default, visible on smaller screens) */
.menu-toggle {
  display: none;
  background-color: #0056b3;
  color: white;
  border: none;
  padding: 10px 15px;
  font-size: 18px;
  cursor: pointer;
  border-radius: 5px;
  margin: 10px 0;
}

/* Responsive Menu for Mobile */
@media (max-width: 768px) {
  /* Show toggle button */
  .menu-toggle {
      display: block;
  }

  /* Hide menu links by default */
  .menu-links {
      display: none;
      flex-direction: column;
      width: 100%;
      text-align: center;
  }

  /* Display links as a dropdown when 'show' class is added */
  .menu-links.show {
      display: flex;
  }

  /* Full-width links in dropdown */
  .menu-links a {
      width: 100%;
      padding: 15px;
      background-color: #007bff;
      margin: 0;
      border-bottom: 1px solid white;
  }

  /* Change link hover effect for dropdown */
  .menu-links a:hover {
      background-color: #0056b3;
  }
}



        /* Container */
        .container {
            text-align: center;
            margin-top: 30px;
            animation: containerFade 1s ease-in;
        }

        /* Dropdown and Inputs */
        label {
            font-size: 18px;
            color: #333;
            margin-right: 10px;
            animation: labelSlideIn 0.7s ease;
        }

        select, input {
            padding: 10px;
            font-size: 16px;
            border-radius: 5px;
            border: 1px solid #ddd;
            margin: 10px;
            transition: border 0.3s;
        }

        select:hover, input:hover {
            border: 1px solid #007bff;
        }

        /* Button Styling */
        button {
            padding: 12px 20px;
            font-size: 16px;
            font-weight: bold;
            color: white;
            background-color: #007bff;
            border: none;
            border-radius: 5px;
            margin: 15px;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.2s;
            width: 200px;
            max-width: 200px;
        }

        button:hover {
            background-color: #0056b3;
            transform: scale(1.1);
        }

        /* Animations */
        @keyframes containerFade {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes labelSlideIn {
            from { opacity: 0; transform: translateX(-20px); }
            to { opacity: 1; transform: translateX(0); }
        }

       /* Specific styling for comparison table */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.comparison-container tr:nth-child(even) {
  background-color: #e0f7fa; /* Very Light Teal */
}

.comparison-container tr:nth-child(odd) {
  background-color: #ffffff; /* White */
}
.comparison-table th, .comparison-table td {
  padding: 10px;
  text-align: center;
  border: 1px solid #ddd;
}

.comparison-table th {
  background-color: #60be9a; /* Dark green for main headers */
  color: white;
  font-weight: bold;
}

.comparison-table td {
  background-color: #afc778; /* Light gray background for rows */
}

/* Highlight Rows on Hover */
.comparison-table tr:nth-child(even) {
  background-color: #caa9a9; /* Alternating row color */
}
.comparison-table tr:nth-child(odd) {
  background-color: #b5caa9; /* Alternating row color */
}

.comparison-table tr:hover {
  background-color: #ddd; /* Row highlight on hover */
}

/* Header style for subject name */
.comparison-table th[colspan="2"] {
  text-align: center;
  background-color: #009688; /* Teal for subject headers */
}

/* Exam Type headers style */
.comparison-table th.exams {
  background-color: #607D8B; /* Greyish-blue for Exam headers */
  color: white;
}

/* Marks column style */
.comparison-table td {
  color: #333; /* Darker text color for marks */
  font-size: 14px;
}

/* Styling for Grade Color-Coding */
.comparison-table td.gradeA {
  color: green;
}

.comparison-table td.gradeB {
  color: blue;
}

.comparison-table td.gradeC {
  color: orange;
}

.comparison-table td.gradeD {
  color: red;
}

.comparison-table td.gradeAbsent {
  color: gray;
}
.red { background-color: #ffcccc; }    /* Fail (D Grade) */
.orange { background-color: #ffe6b3; } /* C Grade */
.blue { background-color: #cce0ff; }   /* B Grade */
.green { background-color: #ccffcc; }  /* A Grade */
.gray { background-color: #e0e0e0; }  
h3 {
  text-align: center;
  margin-bottom: 30px;
}

/* Color coding for grade based on marks */
td.A { background-color: green; color: white; }
td.B { background-color: blue; color: white; }
td.C { background-color: orange; color: white; }
td.D { background-color: red; color: white; }
td.Absent { background-color: gray; color: white; }