/******************************************************
 *  GLOBAL COLORS
 ******************************************************/
:root {
  --navy-900: #061a30;
  --navy-800: #0b2a4a;
  --navy-700: #123a63;
  --navy-600: #1a4b7d;
  --white: #ffffff;
  --accent: #0d6efd;
  --text-light: #e8f1ff;
}

/******************************************************
 *  GLOBAL
 ******************************************************/
body {
  font-family: "Segoe UI", Arial, sans-serif;
  background: var(--white);
  color: #333;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/******************************************************
 *  NAVBAR (HEADER)
 ******************************************************/
.navbar.bg-navy {
  background: var(--navy-800);
  color: var(--text-light);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.navbar .org-name {
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
}

/******************************************************
 *  SIDEBAR (Desktop + Mobile)
 ******************************************************/
/* #sidebarMenu {
  background: var(--navy-900);
  color: var(--text-light);
  padding-top: 15px;
  width: 250px;
  min-height: calc(100vh - 70px);
  border-right: 1px solid rgba(255,255,255,0.1);
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  transition: all 0.3s ease-in-out;

} */

#sidebarMenu {
  position: fixed;
  top: 70px;
  left: 0;

  width: 250px;
  height: calc(100vh - 70px);   /* ✅ FIXED HEIGHT */

  background: var(--navy-900);
  color: var(--text-light);

  overflow-y: auto;             /* ✅ ENABLE SCROLL */
  overflow-x: hidden;

  padding-bottom: 20px;
  border-right: 1px solid rgba(255,255,255,0.1);
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}


/* Sidebar Links */
#sidebarMenu .nav-link {
  color: #cdd8ee;
  padding: 10px 15px;
  border-radius: 6px;
  display: flex;
  align-items: center;
}
#sidebarMenu .nav-link:hover,
#sidebarMenu .nav-link.active {
  background: var(--navy-700);
  color: #fff !important;
  font-weight: 600;
}

/* Icons always white */
#sidebarMenu .bi {
  color: #ffffff !important;
  opacity: .9;
}
#sidebarMenu .nav-link.active .bi {
  opacity: 1 !important;
}

/******************************************************
 *  MAIN CONTENT AREA
 ******************************************************/
main {
  background: var(--white);
  padding: 25px;
  min-height: calc(100vh - 70px);
  border-radius: 6px;
  transition: margin-left .3s ease;
}

/*************** DESKTOP > 992px ***************/
@media (min-width: 992px) {
  #sidebarMenu {
    position: fixed;
    left: 0;
    top: 70px;
  }

  main {
    margin-left: 250px;   /* sidebar width */
  }
}

/******************************************************
 *  TABLET + MOBILE BEHAVIOR (< 992px)
 ******************************************************/
@media (max-width: 992px) {

  /* Sidebar becomes mobile drawer */
  #sidebarMenu {
    position: fixed !important;
    top: 70px;
    left: -260px;
    width: 240px !important;
    height: calc(100vh - 70px);
    z-index: 3000;
  }

  #sidebarMenu.open {
    left: 0;
  }

  /* Main area ALWAYS full width */
  main {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* Remove Bootstrap grid influence */
  nav.sidebar,
  .sidebar,
  .sidebar[class*="col-"] {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
  }
}

/******************************************************
 *  ULTRA-SAFE FIX FOR 768px–992px TABLE DISAPPEAR ISSUE
 ******************************************************/
@media (min-width: 768px) and (max-width: 992px) {

  #sidebarMenu {
    position: fixed !important;
    left: -260px !important;
  }

  #sidebarMenu.open {
    left: 0 !important;
  }

  main {
    width: 100% !important;
    margin-left: 0 !important;
  }

  /* Ensure DataTable never hides */
  .dataTables_wrapper,
  .table-responsive {
    overflow-x: auto !important;
    width: 100% !important;
    display: block !important;
  }
}

/******************************************************
 *  CARDS
 ******************************************************/
.card {
  background: var(--navy-800);
  border: none;
  border-radius: 10px;
  color: var(--text-light);
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

.kpi-card {
  background: var(--navy-700);
  padding: 18px;
  border-radius: 10px;
  color: var(--text-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.kpi-card .bi {
  font-size: 2.4rem;
  color: #ffffff !important;
}

/******************************************************
 *  DATATABLES
 ******************************************************/
table.dataTable,
table.table {
  background: var(--navy-800);
  color: var(--text-light);
}

table.dataTable thead th {
  background: var(--navy-900) !important;
  color: var(--text-light) !important;
}

button.dt-button,
div.dt-button,
a.dt-button {
  background-color: var(--navy-700) !important;
  color: white !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  border: none !important;
  margin-right: 6px !important;
}

button.dt-button:hover {
  background-color: var(--navy-600) !important;
}

/* DataTables ALWAYS scrollable */
.table-responsive,
.dataTables_wrapper {
  width: 100% !important;
  overflow-x: auto !important;
  display: block !important;
}

/******************************************************
 *  FORMS (inside cards)
 ******************************************************/
.form-control,
.form-select {
  background: rgba(255,255,255,0.1) !important;
  color: var(--white) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
}

/******************************************************
 *  FOOTER
 ******************************************************/
.footer {
  background: var(--navy-900);
  color: #fff;
  padding: 14px 0;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.12);
  border-bottom-right-radius: 12px;
}

/******************************************************
 *  FORM INPUT TEXT COLOR FIX
 ******************************************************/

/* Default text inside inputs (black) */
.form-control,
.form-select,
textarea.form-control {
  color: #000 !important;
  background-color: #ffffff !important; /* ensure white background */
  border: 1px solid #ccc !important;
}

/* Placeholder color */
.form-control::placeholder,
textarea.form-control::placeholder {
  color: #555 !important;
  opacity: 0.7;
}

/* Focused input text becomes bronze */
.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
  color: #cd7f32 !important;            /* bronze */
  border-color: #cd7f32 !important;     /* bronze border */
  box-shadow: 0 0 5px rgba(205, 127, 50, 0.6) !important;
  background-color: #ffffff !important;
}

/* Force dropdown items readable */
.form-select option {
  color: #000 !important;
}


/* =========================
   SCROLLABLE SIDEBAR
========================= */
/* #sidebarMenu {
  overflow-y: auto;     
  overflow-x: hidden;   
} */

/* Nice thin scrollbar (optional, modern browsers) */
#sidebarMenu::-webkit-scrollbar {
  width: 6px;
}

#sidebarMenu::-webkit-scrollbar-track {
  background: transparent;
}

#sidebarMenu::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,0.25);
  border-radius: 10px;
}

#sidebarMenu .nav-link[aria-expanded="true"] .bi-chevron-down {
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}

#sidebarMenu .bi-chevron-down {
  transition: transform 0.2s ease;
}


/******************************************************
 * SIDEBAR COLLAPSIBLE SECTIONS (SMOOTH)
 ******************************************************/
.section-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);

  transition:
    max-height 0.35s ease,
    opacity 0.25s ease,
    transform 0.25s ease;
}

/* OPEN STATE */
.section-content.open {
  max-height: 1200px; /* large enough to fit content */
  opacity: 1;
  transform: translateY(0);
}

/* Chevron rotation */
.section-toggle .bi-chevron-down {
  transition: transform 0.25s ease;
}

.section-toggle.open .bi-chevron-down {
  transform: rotate(180deg);
}

/* MINI SIDEBAR */
.sidebar.mini {
  width: 40px;
}

.sidebar.mini .nav-link span,
.sidebar.mini .section-title,
.sidebar.mini .section-toggle span {
  display: none;
}

.sidebar.mini .nav-link {
  justify-content: center;
}

.sidebar.mini .nav-link i {
  font-size: 1.3rem;
}

/* Tooltip on hover */
.sidebar.mini .nav-link:hover::after {
  content: attr(data-title);
  position: absolute;
  left: 75px;
  background: #000;
  color: #fff;
  padding: 4px 8px;
  white-space: nowrap;
  border-radius: 4px;
  font-size: 0.8rem;
  z-index: 999;
}



tr.current-session {
  background-color: #d1e7dd !important; /* green */

   font-weight: 600;
}

tr.active-session {
  background-color: #fff3cd !important; /* yellow */
}


.teacher-card {
  background: #0b1f3a; /* same navy */
  color: #fff;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  transition: transform .2s, box-shadow .2s;
}

.teacher-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}

.teacher-card h6 {
  font-weight: 700;
  letter-spacing: .3px;
}

.teacher-card small {
  color: #9fc1ff;
}

.teacher-card .stat {
  font-size: 0.9rem;
  opacity: .9;
}

.teacher-btn {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: .3px;
}


/* ============================
   FORCE TEACHER DASHBOARD THEME
============================ */

.teacher-card,
.teacher-card .card-body {
  background: var(--navy-800) !important;
  color: var(--text-light) !important;
  border-radius: 20px !important;
}

.teacher-card hr {
  border-color: rgba(255,255,255,0.2);
}

.teacher-card .btn {
  font-weight: 700;
  font-size: 1rem;
}

.teacher-card .stat {
  color: #dce7ff !important;
}

/* ===============================
   FIX SIDEBAR + DATATABLE WIDTH BUG
================================ */

.container-fluid > .row {
  margin-right: 0 !important;
}

/* main {
  max-width: calc(100vw - 250px);
  overflow-x: hidden;
} */

@media (max-width: 992px) {
  main {
    max-width: 100vw;
  }
}


/* ===============================
   REAL SIDEBAR LAYOUT FIX
================================ */

.layout-wrapper {
  display: flex;
  width: 100%;
}

.layout-main {
  flex: 1;
  margin-left: 250px;
  min-width: 0;        /* 🔥 THIS FIXES DATATABLE OVERFLOW */
  padding: 25px;
}

@media (max-width: 992px) {
  .layout-main {
    margin-left: 0;
  }
}


/* Data Table theme */

.table-bordered {
  border: 2px solid var(--navy-700);
}
.table-bordered th,
.table-bordered td {
  border-color: var(--navy-600) !important;
}

 .student-card-navy {
    background: #001f3f;
    color: #fff;
    border: 1px solid #001933;
  }

  .student-card-navy .text-muted {
    color: rgba(255, 255, 255, 0.82) !important;
  }

  .student-card-navy .btn-outline-light:hover {
    color: #001f3f;
    background: #fff;
  }

  .card.student-card-navy {
  background-color: #001f3f !important;
  color: #fff !important;
  border: 1px solid #001933 !important;
}

.card.student-card-navy .card-body,
.card.student-card-navy .card-title,
.card.student-card-navy .card-text {
  color: #fff !important;
}

.card.student-card-navy {
  background-color: #001f3f !important;
  color: #fff !important;
  border: 1px solid #001933 !important;
  border-radius: 16px !important;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.card.student-card-navy:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
  border-color: #2d4f77 !important;
}

#ttManageTable td .form-control-sm { display: inline-block; }
#ttManageTable td form { margin: 0; }