/* =========================================
   ADMIN LOGIN
========================================= */

.admin-login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: #f1f5f9;
}

.admin-login-wrapper {
  width: 100%;
  max-width: 430px;
}

.admin-login-card {
  padding: 35px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 15px 40px rgba(15, 23, 42, 0.1);
}

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

.admin-login-icon {
  width: 65px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  background: #eff6ff;
  border-radius: 50%;
  font-size: 28px;
}

.admin-login-header > span {
  color: #2563eb;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.admin-login-header h1 {
  margin: 8px 0 8px;
  color: #111827;
  font-size: 28px;
}

.admin-login-header p {
  margin: 0;
  color: #6b7280;
  font-size: 14px;
}

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

.admin-form-group label {
  display: block;
  margin-bottom: 8px;
  color: #374151;
  font-size: 14px;
  font-weight: 600;
}

.admin-form-group input {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  color: #111827;
  background: #ffffff;
  font-size: 14px;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.admin-form-group input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.admin-login-btn {
  width: 100%;
  padding: 13px 20px;
  border: none;
  border-radius: 8px;
  background: #2563eb;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.3s ease;
}

.admin-login-btn:hover {
  background: #1d4ed8;
}

.admin-login-footer {
  margin-top: 22px;
  text-align: center;
}

.admin-login-footer a {
  color: #2563eb;
  font-size: 13px;
  text-decoration: none;
}

.admin-login-footer a:hover {
  text-decoration: underline;
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 500px) {
  .admin-login-page {
    padding: 25px 15px;
  }

  .admin-login-card {
    padding: 25px 20px;
  }

  .admin-login-header h1 {
    font-size: 24px;
  }
}

/* =========================================
   ADMIN DASHBOARD
========================================= */

.admin-navbar {
  background: #0b1220;
  color: #ffffff;
}

.admin-nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.admin-logo {
  color: #ffffff;
  font-size: 20px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.admin-logo span {
  color: #60a5fa;
}

.admin-logo small {
  margin-left: 8px;
  padding: 4px 7px;
  background: #2563eb;
  border-radius: 4px;
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.admin-nav-menu {
  display: flex;
  align-items: center;
  gap: 25px;
}

.admin-nav-menu a {
  color: #cbd5e1;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.admin-nav-menu a:hover {
  color: #ffffff;
}

/* =========================================
   DASHBOARD PAGE
========================================= */

.admin-dashboard-page {
  min-height: 75vh;
  padding: 55px 0 70px;
  background: #f8fafc;
}

.admin-dashboard-header {
  margin-bottom: 35px;
}

.admin-page-label {
  display: inline-block;
  margin-bottom: 8px;
  color: #2563eb;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.admin-dashboard-header h1 {
  margin: 0 0 8px;
  color: #111827;
  font-size: 36px;
}

.admin-dashboard-header p {
  margin: 0;
  color: #6b7280;
  font-size: 15px;
}

/* =========================================
   STAT CARDS
========================================= */

.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 50px;
}

.admin-stat-card {
  display: flex;
  align-items: center;
  gap: 15px;

  padding: 22px;

  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;

  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
}

.admin-stat-icon {
  width: 52px;
  height: 52px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  background: #eff6ff;
  border-radius: 10px;

  font-size: 24px;
}

.admin-stat-card span {
  display: block;
  margin-bottom: 5px;
  color: #6b7280;
  font-size: 13px;
}

.admin-stat-card strong {
  color: #111827;
  font-size: 25px;
}

/* =========================================
   MANAGEMENT
========================================= */

.admin-section-header {
  margin-bottom: 22px;
}

.admin-section-header h2 {
  margin: 0;
  color: #111827;
  font-size: 24px;
}

.admin-management-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.admin-management-card {
  display: flex;
  align-items: flex-start;
  gap: 15px;

  padding: 23px;

  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;

  text-decoration: none;

  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.admin-management-card:hover {
  transform: translateY(-3px);
  border-color: #bfdbfe;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.admin-management-icon {
  width: 48px;
  height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  background: #eff6ff;
  border-radius: 10px;

  font-size: 22px;
}

.admin-management-card h3 {
  margin: 2px 0 7px;
  color: #111827;
  font-size: 16px;
}

.admin-management-card p {
  margin: 0;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.6;
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1000px) {
  .admin-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .admin-management-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .admin-nav-container {
    align-items: flex-start;
    flex-direction: column;
    gap: 15px;
  }

  .admin-nav-menu {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 15px;
  }

  .admin-dashboard-page {
    padding: 40px 0 55px;
  }

  .admin-dashboard-header h1 {
    font-size: 30px;
  }
}

@media (max-width: 550px) {
  .admin-stats-grid,
  .admin-management-grid {
    grid-template-columns: 1fr;
  }

  .admin-stat-card {
    padding: 18px;
  }
}

/* =========================================
   STUDENT MANAGEMENT
========================================= */

.admin-management-section {
  margin-top: 10px;
}

.student-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 22px;
}

.student-toolbar h2 {
  margin: 0 0 6px;
  color: #111827;
  font-size: 22px;
}

.student-toolbar p {
  margin: 0;
  color: #6b7280;
  font-size: 13px;
}

.student-search {
  width: 320px;
}

.student-search input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #ffffff;
  color: #111827;
  font-size: 14px;
}

.student-search input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

/* =========================================
   STUDENT TABLE
========================================= */

.admin-table-wrapper {
  width: 100%;
  overflow-x: auto;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
}

.admin-table {
  width: 100%;
  min-width: 750px;
  border-collapse: collapse;
}

.admin-table th {
  padding: 15px 18px;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
  color: #374151;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

.admin-table td {
  padding: 16px 18px;
  border-bottom: 1px solid #f1f5f9;
  color: #4b5563;
  font-size: 13px;
  vertical-align: middle;
}

.admin-table tbody tr:last-child td {
  border-bottom: none;
}

.admin-table tbody tr:hover {
  background: #f8fbff;
}

.student-name-cell {
  color: #111827 !important;
  font-weight: 600;
}

.student-email-cell {
  color: #2563eb !important;
}

.student-action-btn {
  padding: 7px 12px;
  border: none;
  border-radius: 6px;
  background: #fee2e2;
  color: #dc2626;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.student-action-btn:hover {
  background: #fecaca;
}

/* =========================================
   EMPTY STATE
========================================= */

.admin-empty-state {
  display: none;
  margin-top: 20px;
  padding: 55px 20px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  text-align: center;
}

.admin-empty-icon {
  width: 65px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
  background: #eff6ff;
  border-radius: 50%;
  font-size: 28px;
}

.admin-empty-state h3 {
  margin: 0 0 8px;
  color: #111827;
  font-size: 20px;
}

.admin-empty-state p {
  margin: 0;
  color: #6b7280;
  font-size: 14px;
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 700px) {
  .student-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .student-search {
    width: 100%;
  }
}

/* =========================================
   COURSE MANAGEMENT
========================================= */

.course-admin-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 20px;
}

.course-admin-toolbar h2 {
  margin: 0 0 6px;
  color: #111827;
  font-size: 22px;
}

.course-admin-toolbar p {
  margin: 0;
  color: #6b7280;
  font-size: 13px;
}

.admin-primary-btn,
.admin-secondary-btn {
  padding: 11px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.admin-primary-btn {
  border: none;
  background: #2563eb;
  color: #ffffff;
}

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

.admin-secondary-btn {
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #374151;
}

.admin-secondary-btn:hover {
  background: #f8fafc;
}

/* =========================================
   COURSE SEARCH
========================================= */

.course-admin-search {
  margin-bottom: 20px;
}

.course-admin-search input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #ffffff;
  color: #111827;
  font-size: 14px;
}

.course-admin-search input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

/* =========================================
   COURSE TABLE
========================================= */

.course-title-cell {
  color: #111827 !important;
  font-weight: 600;
}

.course-category-cell {
  display: inline-block;
  padding: 5px 9px;
  border-radius: 5px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 11px;
  font-weight: 700;
  text-transform: capitalize;
}

.course-price-cell {
  color: #111827 !important;
  font-weight: 700;
}

.course-student-cell {
  color: #4b5563 !important;
}

.course-action-group {
  display: flex;
  align-items: center;
  gap: 7px;
}

.course-edit-btn,
.course-delete-btn {
  padding: 7px 11px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.course-edit-btn {
  background: #eff6ff;
  color: #2563eb;
}

.course-edit-btn:hover {
  background: #dbeafe;
}

.course-delete-btn {
  background: #fee2e2;
  color: #dc2626;
}

.course-delete-btn:hover {
  background: #fecaca;
}

/* =========================================
   COURSE MODAL
========================================= */

.admin-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 20px;

  background: rgba(15, 23, 42, 0.55);
}

.admin-modal.active {
  display: flex;
}

.admin-modal-content {
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  overflow-y: auto;

  padding: 28px;

  background: #ffffff;
  border-radius: 14px;

  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.2);
}

.admin-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;

  margin-bottom: 25px;
}

.admin-modal-header h2 {
  margin: 0;
  color: #111827;
  font-size: 24px;
}

.admin-modal-close {
  width: 35px;
  height: 35px;

  border: none;
  border-radius: 7px;

  background: #f3f4f6;
  color: #374151;

  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.admin-modal-close:hover {
  background: #e5e7eb;
}

/* =========================================
   COURSE FORM
========================================= */

.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.admin-form-group {
  margin-bottom: 18px;
}

.admin-form-group label {
  display: block;
  margin-bottom: 7px;

  color: #374151;
  font-size: 13px;
  font-weight: 600;
}

.admin-form-group input,
.admin-form-group select,
.admin-form-group textarea {
  width: 100%;
  box-sizing: border-box;

  padding: 11px 13px;

  border: 1px solid #d1d5db;
  border-radius: 7px;

  outline: none;

  background: #ffffff;
  color: #111827;

  font-family: inherit;
  font-size: 13px;
}

.admin-form-group textarea {
  resize: vertical;
}

.admin-form-group input:focus,
.admin-form-group select:focus,
.admin-form-group textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.admin-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;

  margin-top: 8px;
  padding-top: 20px;

  border-top: 1px solid #e5e7eb;
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 700px) {
  .course-admin-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .course-admin-toolbar .admin-primary-btn {
    width: 100%;
  }

  .admin-form-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

@media (max-width: 500px) {
  .admin-modal {
    padding: 10px;
  }

  .admin-modal-content {
    padding: 20px;
  }

  .admin-modal-actions {
    flex-direction: column;
  }

  .admin-modal-actions button {
    width: 100%;
  }
}

/* =========================
   ORDER MANAGEMENT
========================= */

.order-search {
  width: 100%;
  max-width: 500px;
  padding: 12px 15px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  background: #ffffff;
  transition: 0.3s ease;
}

.order-search:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

/* Order Status */

.student-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-radius: 20px;
  background: #dcfce7;
  color: #166534;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* Order Table */

.admin-table td strong {
  color: #1e3a8a;
  font-size: 13px;
}

/* Order Amount */

.admin-table td:nth-child(4) {
  font-weight: 700;
  color: #111827;
}

/* Payment Method */

.admin-table td:nth-child(5) {
  text-transform: capitalize;
}

/* Responsive */

@media (max-width: 900px) {
  .admin-table-wrapper {
    overflow-x: auto;
  }

  .admin-table {
    min-width: 850px;
  }
}

@media (max-width: 600px) {
  .order-search {
    max-width: 100%;
  }

  .admin-dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}

/* =========================
   ORDER SEARCH - FINAL
========================= */

#orderSearch {
  display: block !important;
  width: 520px !important;
  max-width: 100% !important;
  height: 48px !important;
  padding: 0 18px !important;
  margin: 0 0 22px 0 !important;

  box-sizing: border-box !important;

  border: 1px solid #dbe3ef !important;
  border-radius: 10px !important;

  background: #ffffff !important;
  color: #0f172a !important;

  font-family: inherit !important;
  font-size: 14px !important;

  outline: none !important;

  transition: all 0.3s ease !important;
}

#orderSearch::placeholder {
  color: #94a3b8 !important;
}

#orderSearch:hover {
  border-color: #93c5fd !important;
}

#orderSearch:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12) !important;
}

/* =========================
   LECTURE MANAGEMENT
========================= */

.lecture-video-cell {
  color: #2563eb;
  font-weight: 600;
  font-size: 13px;
}

.lecture-course-cell {
  font-weight: 600;
  color: #334155;
}

.lecture-number-cell {
  font-weight: 700;
  color: #1e3a8a;
}

/* Lecture modal */

/* Lecture modal */
#lectureModal .admin-modal-content {
  max-width: 720px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
#lectureModal .admin-form-grid {
  grid-template-columns: 1fr 1fr;
}

#lectureModal .admin-form-group:nth-child(3),
#lectureModal .admin-form-group:nth-child(4) {
  grid-column: 1 / -1;
}

/* Lecture action buttons */

.lecture-edit-btn {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

.lecture-edit-btn:hover {
  background: #dbeafe;
}

.lecture-delete-btn {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.lecture-delete-btn:hover {
  background: #fee2e2;
}

/* Responsive */

@media (max-width: 700px) {
  #lectureModal .admin-form-grid {
    grid-template-columns: 1fr;
  }

  #lectureModal .admin-form-group:nth-child(3),
  #lectureModal .admin-form-group:nth-child(4) {
    grid-column: auto;
  }

  #lectureSearch {
    width: 100%;
  }
}

/* =========================
   LECTURE SEARCH - FINAL
========================= */

#lectureSearch {
  display: block !important;
  width: 360px !important;
  max-width: 100% !important;
  height: 48px !important;

  padding: 0 18px !important;
  margin: 0 !important;

  box-sizing: border-box !important;

  border: 1px solid #dbe3ef !important;
  border-radius: 10px !important;

  background: #ffffff !important;
  color: #0f172a !important;

  font-family: inherit !important;
  font-size: 14px !important;

  outline: none !important;

  transition: all 0.3s ease !important;
}

#lectureSearch::placeholder {
  color: #94a3b8 !important;
}

#lectureSearch:hover {
  border-color: #93c5fd !important;
}

#lectureSearch:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12) !important;
}

/* Lecture toolbar */

.admin-management-section .course-admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 25px;
}

/* Mobile */

@media (max-width: 700px) {
  .admin-management-section .course-admin-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  #lectureSearch {
    width: 100% !important;
  }
}

/* =========================
   LIVE CLASS MANAGEMENT
========================= */

#liveClassSearch {
  display: block !important;
  width: 360px !important;
  max-width: 100% !important;
  height: 48px !important;
  padding: 0 18px !important;
  margin: 0 !important;

  box-sizing: border-box !important;

  border: 1px solid #dbe3ef !important;
  border-radius: 10px !important;

  background: #ffffff !important;
  color: #0f172a !important;

  font-family: inherit !important;
  font-size: 14px !important;

  outline: none !important;
  transition: all 0.3s ease !important;
}

#liveClassSearch::placeholder {
  color: #94a3b8 !important;
}

#liveClassSearch:hover {
  border-color: #93c5fd !important;
}

#liveClassSearch:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12) !important;
}

/* Live Class Toolbar */

.admin-management-section .course-admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 25px;
}

/* Live Class Modal */

#liveClassModal .admin-modal-content {
  max-width: 760px;
}

#liveClassModal .admin-form-grid {
  grid-template-columns: 1fr 1fr;
}

#liveClassModal .admin-form-group:nth-child(7) {
  grid-column: 1 / -1;
}

/* Live Class Status */

.live-class-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.live-class-upcoming {
  background: #dbeafe;
  color: #1d4ed8;
}

.live-class-live {
  background: #fee2e2;
  color: #dc2626;
}

.live-class-completed {
  background: #e2e8f0;
  color: #475569;
}

/* Live Class Action Buttons */

.live-class-edit-btn {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

.live-class-edit-btn:hover {
  background: #dbeafe;
}

.live-class-delete-btn {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.live-class-delete-btn:hover {
  background: #fee2e2;
}

/* Mobile */

@media (max-width: 700px) {
  .admin-management-section .course-admin-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  #liveClassSearch {
    width: 100% !important;
  }

  #liveClassModal .admin-form-grid {
    grid-template-columns: 1fr;
  }

  #liveClassModal .admin-form-group:nth-child(7) {
    grid-column: auto;
  }
}

/* =========================
   CERTIFICATE MANAGEMENT
========================= */

.certificate-admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 25px;
}

#certificateSearch {
  display: block !important;
  width: 420px !important;
  max-width: 100% !important;
  height: 48px !important;

  padding: 0 18px !important;
  margin: 0 !important;

  box-sizing: border-box !important;

  border: 1px solid #dbe3ef !important;
  border-radius: 10px !important;

  background: #ffffff !important;
  color: #0f172a !important;

  font-family: inherit !important;
  font-size: 14px !important;

  outline: none !important;
  transition: all 0.3s ease !important;
}

#certificateSearch::placeholder {
  color: #94a3b8 !important;
}

#certificateSearch:hover {
  border-color: #93c5fd !important;
}

#certificateSearch:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12) !important;
}

/* Certificate ID */

.certificate-id-cell {
  font-weight: 700;
  color: #1e3a8a;
  font-size: 13px;
}

/* Student */

.certificate-student-cell {
  font-weight: 600;
  color: #334155;
}

/* Course */

.certificate-course-cell {
  color: #475569;
}

/* Status */

.certificate-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 5px 11px;

  border-radius: 20px;

  background: #dcfce7;
  color: #166534;

  font-size: 12px;
  font-weight: 600;

  white-space: nowrap;
}

/* Action Buttons */

.certificate-view-btn {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

.certificate-view-btn:hover {
  background: #dbeafe;
}

.certificate-delete-btn {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.certificate-delete-btn:hover {
  background: #fee2e2;
}

/* Mobile */

@media (max-width: 700px) {
  .certificate-admin-toolbar {
    justify-content: stretch;
  }

  #certificateSearch {
    width: 100% !important;
  }

  .admin-table-wrapper {
    overflow-x: auto;
  }

  .admin-table {
    min-width: 900px;
  }
}

/* =========================================
   ADMIN DASHBOARD - DARK MODE
========================================= */

/* Stats Cards */
body.dark-mode .admin-stat-card {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #e5e7eb !important;
}

body.dark-mode .admin-stat-card span {
  color: #cbd5e1 !important;
}

body.dark-mode .admin-stat-card strong {
  color: #ffffff !important;
}

body.dark-mode .admin-stat-icon {
  background: #334155 !important;
  color: #ffffff !important;
}

/* Management Section */
body.dark-mode .admin-section-header {
  color: #e5e7eb !important;
}

body.dark-mode .admin-page-label {
  color: #60a5fa !important;
}

body.dark-mode .admin-section-header h2 {
  color: #ffffff !important;
}

/* Management Cards */
body.dark-mode .admin-management-card {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #e5e7eb !important;
}

body.dark-mode .admin-management-card h3 {
  color: #ffffff !important;
}

body.dark-mode .admin-management-card p {
  color: #cbd5e1 !important;
}

body.dark-mode .admin-management-icon {
  background: #334155 !important;
  color: #ffffff !important;
}

body.dark-mode .admin-management-card:hover {
  background: #243449 !important;
  border-color: #475569 !important;
}

body.dark-mode .admin-management-card:hover h3 {
  color: #ffffff !important;
}

body.dark-mode .admin-management-card:hover p {
  color: #cbd5e1 !important;
}

/* =========================================
   ADMIN COURSE CATEGORY - DARK MODE
========================================= */

body.dark-mode .course-category,
body.dark-mode .admin-course-category,
body.dark-mode td .category,
body.dark-mode td span {
  color: #2563eb !important;
  background: #dbeafe !important;
  border-color: #bfdbfe !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* =========================================
   ADMIN LECTURES - DARK MODE
========================================= */

/* Search */
body.dark-mode .admin-search input,
body.dark-mode input[type="search"] {
  background: #111827 !important;
  color: #f8fafc !important;
  border-color: #475569 !important;
}

body.dark-mode .admin-search input::placeholder,
body.dark-mode input[type="search"]::placeholder {
  color: #94a3b8 !important;
}

/* Table wrapper */
body.dark-mode .admin-table-wrapper {
  background: #1e293b !important;
  border-color: #334155 !important;
}

/* Table */
body.dark-mode .admin-table {
  background: #1e293b !important;
  color: #e5e7eb !important;
}

body.dark-mode .admin-table thead {
  background: #334155 !important;
}

body.dark-mode .admin-table th {
  background: #334155 !important;
  color: #ffffff !important;
  border-color: #475569 !important;
}

body.dark-mode .admin-table td {
  background: #1e293b !important;
  color: #e5e7eb !important;
  border-color: #334155 !important;
}

body.dark-mode .admin-table tbody tr:hover td {
  background: #243449 !important;
  color: #ffffff !important;
}

/* Links inside table */
body.dark-mode .admin-table a {
  color: #93c5fd !important;
}

body.dark-mode .admin-table a:hover {
  color: #60a5fa !important;
}

/* Edit button */
body.dark-mode .admin-table .admin-edit-btn {
  background: #1e3a8a !important;
  color: #93c5fd !important;
  border-color: #3b82f6 !important;
}

/* Delete button */
body.dark-mode .admin-table .admin-delete-btn {
  background: #450a0a !important;
  color: #fca5a5 !important;
  border-color: #7f1d1d !important;
}

/* Empty state */
body.dark-mode .admin-empty-state {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #e5e7eb !important;
}

body.dark-mode .admin-empty-state h3 {
  color: #ffffff !important;
}

body.dark-mode .admin-empty-state p {
  color: #cbd5e1 !important;
}

/* Modal */
body.dark-mode .admin-modal-content {
  background: #1e293b !important;
  color: #e5e7eb !important;
  border-color: #334155 !important;
}

body.dark-mode .admin-modal-header {
  border-color: #334155 !important;
}

body.dark-mode .admin-modal-header h2 {
  color: #ffffff !important;
}

body.dark-mode .admin-modal-close {
  color: #cbd5e1 !important;
}

body.dark-mode .admin-form-group label {
  color: #f8fafc !important;
}

body.dark-mode .admin-form-group input,
body.dark-mode .admin-form-group select,
body.dark-mode .admin-form-group textarea {
  background: #111827 !important;
  color: #f8fafc !important;
  border-color: #475569 !important;
}

body.dark-mode .admin-form-group input::placeholder,
body.dark-mode .admin-form-group textarea::placeholder {
  color: #94a3b8 !important;
}

/* =========================================
   ADMIN LECTURE ROW - FINAL DARK MODE FIX
========================================= */

/* Search box */
body.dark-mode #lectureSearch {
  background: #111827 !important;
  color: #f8fafc !important;
  border: 1px solid #475569 !important;
}

body.dark-mode #lectureSearch::placeholder {
  color: #94a3b8 !important;
}

/* Lecture number */
body.dark-mode .lecture-number-cell {
  color: #f8fafc !important;
}

/* Lecture title */
body.dark-mode .admin-table td strong {
  color: #ffffff !important;
}

/* Course name */
body.dark-mode .lecture-course-cell {
  color: #93c5fd !important;
}

/* Video */
body.dark-mode .lecture-video-cell {
  color: #93c5fd !important;
}

/* Action buttons */
body.dark-mode .lecture-edit-btn {
  background: #1e3a8a !important;
  color: #bfdbfe !important;
  border: 1px solid #3b82f6 !important;
}

body.dark-mode .lecture-edit-btn:hover {
  background: #2563eb !important;
  color: #ffffff !important;
}

body.dark-mode .lecture-delete-btn {
  background: #450a0a !important;
  color: #fca5a5 !important;
  border: 1px solid #7f1d1d !important;
}

body.dark-mode .lecture-delete-btn:hover {
  background: #dc2626 !important;
  color: #ffffff !important;
}

/* Lecture number - final visibility fix */

body.dark-mode .admin-table tbody tr td:first-child,
body.dark-mode .admin-table tbody tr td:first-child span {
  color: #ffffff !important;
  background: transparent !important;
  opacity: 1 !important;
  text-shadow: none !important;
  font-weight: 700 !important;
}

body.dark-mode .admin-table .lecture-number-cell {
  color: #ffffff !important;
  background: transparent !important;
}

/* =========================================
   ORDER TABLE - REMOVE WHITE CELL HOVER
   ========================================= */

body.dark-mode #ordersTableBody tr:hover,
body.dark-mode #ordersTableBody tr:hover td,
body.dark-mode #ordersTableBody td:hover {
  background: #1e293b !important;
}

/* Keep all order text visible */
body.dark-mode #ordersTableBody td,
body.dark-mode #ordersTableBody td:hover {
  color: #f8fafc !important;
}

/* Order ID */
body.dark-mode #ordersTableBody td strong,
body.dark-mode #ordersTableBody td strong:hover {
  color: #f8fafc !important;
  background: transparent !important;
}

/* Student name */
body.dark-mode #ordersTableBody .student-name-cell,
body.dark-mode #ordersTableBody .student-name-cell:hover {
  color: #f8fafc !important;
  background: transparent !important;
}

/* Student email */
body.dark-mode #ordersTableBody .student-email-cell,
body.dark-mode #ordersTableBody .student-email-cell:hover {
  color: #60a5fa !important;
  background: transparent !important;
}

/* Status */
body.dark-mode #ordersTableBody .student-status {
  background: #dbeafe !important;
  color: #2563eb !important;
}

/* =========================================
   ADMIN LIVE CLASSES - DARK MODE
   ========================================= */

body.dark-mode .admin-dashboard-page {
  background: #0f172a !important;
  color: #e5e7eb !important;
}

body.dark-mode .admin-dashboard-header h1 {
  color: #ffffff !important;
}

body.dark-mode .admin-dashboard-header p {
  color: #cbd5e1 !important;
}

/* Total Live Classes Card */
body.dark-mode .admin-stat-card {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #e5e7eb !important;
}

body.dark-mode .admin-stat-card span {
  color: #cbd5e1 !important;
}

body.dark-mode .admin-stat-card strong {
  color: #ffffff !important;
}

/* Search Box */
body.dark-mode .student-search {
  background: #111827 !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

body.dark-mode .student-search::placeholder {
  color: #94a3b8 !important;
}

/* Add Button */
body.dark-mode .admin-primary-btn {
  color: #ffffff !important;
}

/* Table */
body.dark-mode .admin-table-wrapper {
  background: #1e293b !important;
  border-color: #334155 !important;
}

body.dark-mode .admin-table {
  background: #1e293b !important;
  color: #e5e7eb !important;
}

body.dark-mode .admin-table thead {
  background: #334155 !important;
}

body.dark-mode .admin-table th {
  background: #334155 !important;
  color: #ffffff !important;
  border-color: #475569 !important;
}

body.dark-mode .admin-table td {
  background: #1e293b !important;
  color: #e5e7eb !important;
  border-color: #334155 !important;
}

body.dark-mode .admin-table tr:hover td {
  background: #26364d !important;
}

/* Status */
body.dark-mode .student-status {
  background: #334155 !important;
  color: #bfdbfe !important;
}

/* Edit / Delete buttons */
body.dark-mode .student-action-btn {
  background: #1e293b !important;
  color: #93c5fd !important;
  border-color: #475569 !important;
}

body.dark-mode .student-action-btn:hover {
  background: #2563eb !important;
  color: #ffffff !important;
}

body.dark-mode .student-action-btn.lecture-delete-btn:hover {
  background: #dc2626 !important;
  color: #ffffff !important;
}

/* =========================================
   LIVE CLASS TITLE - DARK MODE HOVER FIX
   ========================================= */

body.dark-mode #liveClassesTableBody tr:hover td {
  background: #26364d !important;
}

body.dark-mode #liveClassesTableBody td:hover {
  background: #26364d !important;
}

/* Title text */
body.dark-mode #liveClassesTableBody td strong,
body.dark-mode #liveClassesTableBody td strong:hover {
  background: transparent !important;
  color: #f8fafc !important;
}

/* Links / clickable title */
body.dark-mode #liveClassesTableBody td a,
body.dark-mode #liveClassesTableBody td a:hover {
  background: transparent !important;
  color: #60a5fa !important;
}

/* =========================================
   CERTIFICATE MANAGEMENT - DARK MODE
   ========================================= */

body.dark-mode .admin-dashboard-page {
  background: #0f172a !important;
  color: #e5e7eb !important;
}

body.dark-mode .admin-dashboard-header h1 {
  color: #ffffff !important;
}

body.dark-mode .admin-dashboard-header p {
  color: #cbd5e1 !important;
}

/* Total Certificates Card */
body.dark-mode .admin-stat-card {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #e5e7eb !important;
}

body.dark-mode .admin-stat-card span {
  color: #cbd5e1 !important;
}

body.dark-mode .admin-stat-card strong {
  color: #ffffff !important;
}

/* Search */
body.dark-mode .student-search {
  background: #111827 !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

body.dark-mode .student-search::placeholder {
  color: #94a3b8 !important;
}

/* Table */
body.dark-mode .admin-table-wrapper {
  background: #1e293b !important;
  border-color: #334155 !important;
}

body.dark-mode .admin-table {
  background: #1e293b !important;
  color: #e5e7eb !important;
}

body.dark-mode .admin-table thead {
  background: #334155 !important;
}

body.dark-mode .admin-table th {
  background: #334155 !important;
  color: #ffffff !important;
  border-color: #475569 !important;
}

body.dark-mode .admin-table td {
  background: #1e293b !important;
  color: #e5e7eb !important;
  border-color: #334155 !important;
}

/* Remove white hover */
body.dark-mode .admin-table tr:hover td {
  background: #26364d !important;
}

/* Certificate ID / links */
body.dark-mode .admin-table td a {
  background: transparent !important;
  color: #60a5fa !important;
}

body.dark-mode .admin-table td a:hover {
  background: transparent !important;
  color: #93c5fd !important;
}

/* Status */
body.dark-mode .student-status {
  background: #dcfce7 !important;
  color: #166534 !important;
}

/* View button */
body.dark-mode .admin-table .admin-view-btn {
  background: #1e293b !important;
  color: #60a5fa !important;
  border-color: #475569 !important;
}

body.dark-mode .admin-table .admin-view-btn:hover {
  background: #2563eb !important;
  color: #ffffff !important;
}

/* =========================================
   CERTIFICATE TABLE - HOVER & TEXT FIX
   ========================================= */

body.dark-mode .admin-table tbody tr:hover td {
  background: #26364d !important;
  color: #f8fafc !important;
}

/* Student name */
body.dark-mode .admin-table .student-name-cell {
  color: #f8fafc !important;
  background: transparent !important;
}

/* Student email */
body.dark-mode .admin-table .student-email-cell {
  color: #60a5fa !important;
  background: transparent !important;
}

/* Course name */
body.dark-mode .admin-table td {
  color: #f8fafc !important;
}

/* Course links */
body.dark-mode .admin-table td a {
  background: transparent !important;
  color: #60a5fa !important;
}

body.dark-mode .admin-table td a:hover {
  background: transparent !important;
  color: #93c5fd !important;
}

/* Prevent text selection highlight looking like white background */
body.dark-mode .admin-table td strong {
  background: transparent !important;
  color: #f8fafc !important;
}

/* =========================================
   CERTIFICATE STUDENT NAME - FINAL FIX
   ========================================= */

body.dark-mode .admin-table tbody tr td:nth-child(2) {
  color: #ffffff !important;
}

body.dark-mode .admin-table tbody tr td:nth-child(2) * {
  color: #ffffff !important;
  background: transparent !important;
}

/* Student email */
body.dark-mode .admin-table tbody tr td:nth-child(2) .student-email-cell {
  color: #60a5fa !important;
}

/* Hover row */
body.dark-mode .admin-table tbody tr:hover td {
  background: #26364d !important;
}

/* Student name remains white on hover */
body.dark-mode .admin-table tbody tr:hover td:nth-child(2) {
  color: #ffffff !important;
}

body.dark-mode .admin-table tbody tr:hover td:nth-child(2) * {
  color: #ffffff !important;
  background: transparent !important;
}

/* Email remains blue */
body.dark-mode .admin-table tbody tr:hover td:nth-child(2) .student-email-cell {
  color: #60a5fa !important;
}

/* =========================================
   CERTIFICATE MANAGEMENT - FINAL DARK FIX
   ========================================= */

/* Table row */
body.dark-mode .admin-table tbody tr td {
  background: #1e293b !important;
  color: #f8fafc !important;
}

/* Row hover */
body.dark-mode .admin-table tbody tr:hover td {
  background: #26364d !important;
  color: #f8fafc !important;
}

/* Certificate ID */
body.dark-mode .certificate-id-cell {
  background: transparent !important;
  color: #f8fafc !important;
}

/* Student name - IMPORTANT */
body.dark-mode .certificate-student-cell {
  background: transparent !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Student email */
body.dark-mode .student-email-cell {
  background: transparent !important;
  color: #60a5fa !important;
}

/* Course */
body.dark-mode .certificate-course-cell {
  background: transparent !important;
  color: #f8fafc !important;
}

/* Course hover */
body.dark-mode .certificate-course-cell:hover {
  background: transparent !important;
  color: #93c5fd !important;
}

/* View button / link */
body.dark-mode .admin-view-btn {
  background: transparent !important;
  color: #60a5fa !important;
}

/* Remove unwanted white background from text/link hover */
body.dark-mode .admin-view-btn:hover {
  background: #2563eb !important;
  color: #ffffff !important;
}

/* Prevent white background on certificate table text */
body.dark-mode .admin-table span,
body.dark-mode .admin-table div {
  background: transparent !important;
}

/* FIX LECTURE MODAL ACTION BUTTONS */
#lectureModal .admin-modal-content {
  max-height: 90vh !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

#lectureModal .admin-modal-actions {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 20px !important;
  padding: 16px 0 4px !important;
  border-top: 1px solid #334155 !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 50 !important;
  flex-shrink: 0 !important;
  background: #1e293b !important;
}

#lectureModal .admin-modal-actions button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 100px !important;
  min-height: 42px !important;
  padding: 0 20px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.admin-password-wrapper {
  position: relative;
  width: 100%;
}

.admin-password-wrapper input {
  width: 100%;
  padding-right: 50px !important;
  box-sizing: border-box;
}

.admin-password-wrapper .password-toggle {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);

  border: none;
  background: transparent;

  width: 32px;
  height: 32px;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  font-size: 18px;
  padding: 0;
}

.admin-password-wrapper .password-toggle:hover {
  background: transparent;
  transform: translateY(-50%);
}

.admin-password-wrapper {
  position: relative;
  width: 100%;
}

.admin-password-wrapper input {
  width: 100%;
  padding-right: 50px !important;
  box-sizing: border-box;
}

.admin-password-wrapper .password-toggle {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);

  width: 32px;
  height: 32px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: none;
  background: transparent;

  cursor: pointer;
  font-size: 18px;
  padding: 0;
}

.admin-password-wrapper .password-toggle:hover {
  background: transparent;
}

.admin-forgot-password {
  text-align: right;
  margin-top: -8px;
  margin-bottom: 18px;
}

.admin-forgot-password a {
  color: #2563eb;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.admin-forgot-password a:hover {
  text-decoration: underline;
}

/* =========================
   COUPON ACTION BUTTONS
========================= */

.admin-danger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 8px 14px;

  border: 1px solid #dc3545;
  border-radius: 6px;

  background: #fff;
  color: #dc3545;

  font-size: 13px;
  font-weight: 600;

  cursor: pointer;

  transition: all 0.2s ease;
}

.admin-danger-btn:hover {
  background: #dc3545;
  color: #fff;
}

.edit-coupon-btn {
  margin-right: 6px;
}

/* ==========================================
   ORDER DELETE BUTTON
========================================== */

.order-delete-btn {
  background: #dc2626;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.order-delete-btn:hover {
  background: #b91c1c;
  transform: translateY(-1px);
}

.order-delete-btn:active {
  transform: translateY(0);
}

.order-delete-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}
/* ==========================================
   CERTIFICATE ACTION BUTTONS
========================================== */

.certificate-delete-btn {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-left: 8px;
  transition: all 0.2s ease;
}

.certificate-delete-btn:hover {
  background: #dc2626;
  color: #ffffff;
  border-color: #dc2626;
}

.certificate-delete-btn:active {
  transform: scale(0.97);
}

.certificate-delete-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}
.admin-create-account {
  text-align: center;
  margin-top: 15px;
  font-size: 14px;
}

.admin-create-account p {
  margin: 0;
  color: #666;
}

.admin-create-account a {
  color: #007bff;
  font-weight: 600;
  text-decoration: none;
}

.admin-create-account a:hover {
  text-decoration: underline;
}

/* =========================================
   COURSE POINTS - ADD / DELETE UI
========================================= */

.course-points-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.course-point-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}

.course-point-row:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.course-point-number {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 700;
}

.course-point-text {
  flex: 1;
  min-width: 0;
  color: #334155;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.course-point-add-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.course-point-add-row input {
  flex: 1;
  min-width: 0;
}

.course-point-add-row button {
  flex-shrink: 0;
  padding: 11px 14px;
  border: 1px solid #bfdbfe;
  border-radius: 7px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease;
}

.course-point-add-row button:hover {
  background: #dbeafe;
}

.course-point-delete {
  flex-shrink: 0;
  padding: 7px 10px;
  border: 1px solid #fecaca;
  border-radius: 6px;
  background: #fef2f2;
  color: #dc2626;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.course-point-delete:hover {
  background: #fee2e2;
}

/* Dark mode */
body.dark-mode .course-point-row {
  background: #111827;
  border-color: #334155;
}

body.dark-mode .course-point-row:hover {
  background: #1e293b;
  border-color: #475569;
}

body.dark-mode .course-point-text {
  color: #e5e7eb;
}

body.dark-mode .course-point-number {
  background: #1e3a8a;
  color: #bfdbfe;
}

body.dark-mode .course-point-add-row button {
  background: #1e3a8a;
  border-color: #3b82f6;
  color: #bfdbfe;
}

body.dark-mode .course-point-delete {
  background: #450a0a;
  border-color: #7f1d1d;
  color: #fca5a5;
}

/* Mobile */
@media (max-width: 500px) {
  .course-point-row {
    gap: 8px;
    padding: 10px;
  }

  .course-point-add-row {
    align-items: stretch;
    flex-direction: column;
  }

  .course-point-add-row button {
    width: 100%;
  }
}



/* Course Description Preview */
.course-description-preview {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-width: 260px;
  color: #4b5563;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.course-description-preview.expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.course-read-more-btn {
  margin-top: 5px;
  padding: 0;
  border: none;
  background: none;
  color: #2563eb;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.course-read-more-btn:hover {
  text-decoration: underline;
}

/* =========================================
   MANUAL STUDENT CREATION FORM
========================================= */

#addStudentForm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 22px;
  margin-top: 22px;
}

#addStudentForm .admin-form-group {
  margin-bottom: 16px;
}

#addStudentForm .admin-form-group input,
#addStudentForm .admin-form-group select {
  width: 100%;
  box-sizing: border-box;
}

#addStudentForm .admin-primary-btn,
#addStudentForm .auth-message {
  grid-column: 1 / -1;
}

#addStudentForm .admin-primary-btn {
  width: fit-content;
  min-width: 220px;
  cursor: pointer;
}

#addStudentForm .admin-primary-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

@media (max-width: 700px) {
  #addStudentForm {
    grid-template-columns: 1fr;
    gap: 0;
  }

  #addStudentForm .admin-primary-btn {
    width: 100%;
  }
}


/* MOBILE RESPONSIVE LAYOUT FIX */

@media (max-width: 700px) {
  .admin-nav-container {
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 16px;
  }

  .admin-logo {
    font-size: 18px;
  }

  .admin-nav-menu {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
  }

  .admin-dashboard-page {
    overflow-x: hidden;
  }

  .admin-dashboard-page > .container {
    width: 100%;
    max-width: 100%;
    padding-left: 14px;
    padding-right: 14px;
    box-sizing: border-box;
  }

  .admin-dashboard-header h1 {
    font-size: clamp(24px, 6vw, 32px);
    overflow-wrap: anywhere;
  }

  .admin-management-section {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  #addStudentForm {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  #addStudentForm .admin-form-group {
    min-width: 0;
    width: 100%;
  }

  #addStudentForm input,
  #addStudentForm select {
    max-width: 100%;
    min-width: 0;
  }

  .student-toolbar {
    min-width: 0;
    width: 100%;
  }

  .student-search {
    width: 100%;
    max-width: 100%;
  }

  .student-search input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .admin-table-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .admin-table {
    min-width: 650px;
  }
}

@media (max-width: 400px) {
  .admin-nav-container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .admin-nav-menu {
    gap: 10px 14px;
  }

  .admin-dashboard-page > .container {
    padding-left: 10px;
    padding-right: 10px;
  }
}


/* ADMIN HAMBURGER MOBILE MENU */

.admin-menu-toggle {
  display: none;
}

@media (max-width: 700px) {
  .admin-nav-container {
    position: relative;
    flex-wrap: wrap;
    align-items: center;
  }

  .admin-menu-toggle {
    display: flex;
    width: 42px;
    height: 38px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px;
    margin-left: auto;
    border: 1px solid #475569;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
  }

  .admin-menu-toggle span {
    display: block;
    width: 21px;
    height: 2px;
    border-radius: 2px;
    background: #ffffff;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .admin-menu-toggle.active span:first-child {
    transform: translateY(7px) rotate(45deg);
  }

  .admin-menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  .admin-menu-toggle.active span:last-child {
    transform: translateY(-7px) rotate(-45deg);
  }

  .admin-nav-menu {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 15px 0 5px;
  }

  .admin-nav-menu.active {
    display: flex;
  }
}