/* Common styles for inside pages */
.page-header {
    background: linear-gradient(135deg, rgba(88, 28, 135, 0.9) 0%, rgba(59, 130, 246, 0.9) 100%), url('../images/aboutBanner.jpg') center/cover;
    padding: 80px 0;
    text-align: center;
    color: white;
    margin-bottom: 50px;
    border-radius: 0 0 30px 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.page-header h1 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 15px;
}

.page-header p {
    font-size: 1.2rem;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
}

 .subject-card {
     background: #fff;
     border-radius: 12px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
     padding: 30px 20px;
     text-align: center;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     cursor: pointer;
     height: 100%;
     border: 1px solid #eee;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
 }

 .subject-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 }

 .subject-icon {
     width: 80px;
     height: 80px;
     background: #f8f9fa;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 20px;
     font-size: 40px;
     color: #6358e1;
 }

 .subject-card h4 {
     font-size: 1.25rem;
     font-weight: 600;
     margin-bottom: 10px;
     color: #333;
 }

 .subject-card p {
     color: #777;
     font-size: 0.9rem;
     margin-bottom: 20px;
     flex-grow: 1;
 }

 .subject-card .btn-download {
     background: #FB612A;
     color: #fff;
     border: none;
     width: 100%;
     padding: 10px;
     border-radius: 8px;
     font-weight: 500;
     transition: all 0.3s;
 }

 .subject-card:hover .btn-download {
     background: #FB612A;
     color: #fff;
 }

 div.dt-buttons {
     margin-left: 15px !important;
     display: inline-flex !important;
     align-items: center;
     gap: 6px;
     float: none;
 }

 .dt-buttons .dt-button {
     margin: 0 !important;
     padding: 0 !important;
     background: none !important;
     border: none !important;
     box-shadow: none !important;
     line-height: 1 !important;
     cursor: pointer;
 }

 .dt-buttons .dt-button i {
     font-size: 20px;
     transition: 0.2s;
     display: inline-block;
     vertical-align: middle;
 }

 .py-5 {
    padding-top: 0rem !important;
 }

 .dt-buttons .dt-button:hover i {
     transform: scale(1.15);
     transition: 0.18s;
 }

 .dt-buttons .buttons-copy i {
     color: #007bff;
 }

 .dt-buttons .buttons-csv i {
     color: #17a2b8;
 }

 .dt-buttons .buttons-excel i {
     color: #28a745;
 }

 .dt-buttons .buttons-pdf i {
     color: #dc3545;
 }

 .dt-buttons .buttons-print i {
     color: #6c757d;
 }

 table.dataTable td,
 table.dataTable th {
     white-space: nowrap;
 }

 div.dataTables_wrapper {
     width: 100%;
     margin: 0 auto;
 }

 table.dataTable thead th {
     text-align: center;
     font-weight: 600;
     font-size: 14px;
     background-color: #6358e1;
     color: white;
 }

 table.dataTable tbody tr:nth-child(even) {
     font-size: 14px;
     background-color: #f9f9f9;
 }

 table.dataTable tbody tr:nth-child(odd) {
     font-size: 14px;
     background-color: #ffffff;
 }

 table.dataTable tbody tr:hover {
     background-color: #f1f1f1 !important;
 }

 .dataTables_wrapper .dataTables_paginate .paginate_button {
     border-radius: 6px;
     margin: 2px;
     padding: 5px 10px;
     border: 1px solid #ccc !important;
     background: #fff !important;
     color: #000 !important;
 }

 .dataTables_wrapper .dataTables_paginate .paginate_button.current {
     background: #6358e1 !important;
     color: white !important;
     border-color: #6358e1 !important;
 }

 .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
     background: #4b41b8 !important;
     color: white !important;
 }

 .dataTables_wrapper .dataTables_info {
     font-weight: 600;
 }

 #tableContainer {
     display: none;
     padding: 30px;
     background: #fff;
     border-radius: 12px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
     margin-top: 30px;
     border: 1px solid #eee;
     overflow-x: auto;
 }

 body.dark-mode #tableContainer {
     background: #1a1a1a;
     border-color: #333;
 }

 body.dark-mode .subject-card {
     background: #1a1a1a;
     border-color: #333;
 }

 body.dark-mode .subject-card h4 {
     color: #fff;
 }

 body.dark-mode .subject-card .btn-download {
     background: #FB612A;
     color: #fff;
 }

 body.dark-mode .subject-card:hover .btn-download {
     background: #FB612A;
     color: #fff;
 }

 body.dark-mode .subject-icon {
     background: #222;
 }

 body.dark-mode table.dataTable tbody tr:nth-child(even) {
     background-color: #2a2a2a;
     color: #eee;
 }

 body.dark-mode table.dataTable tbody tr:nth-child(odd) {
     background-color: #1a1a1a;
     color: #eee;
 }

 body.dark-mode table.dataTable tbody tr:hover {
     background-color: #333 !important;
 }

 body.dark-mode .dataTables_wrapper .dataTables_filter input,
 body.dark-mode .dataTables_wrapper .dataTables_length select {
     background: #333;
     color: white;
     border-color: #555;
 }

 body.dark-mode .dataTables_wrapper .dataTables_info,
 body.dark-mode .dataTables_wrapper .dataTables_length label,
 body.dark-mode .dataTables_wrapper .dataTables_filter label {
     color: #eee;
 }

 body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
     background: #333 !important;
     color: white !important;
     border-color: #555 !important;
 }