/* General Navbar Styling */

body {
    font-family: 
        'Segoe UI',       /* Windows default, clean & modern */
        'Roboto',         /* Android default, clean & readable */
        'Helvetica Neue', /* macOS modern sans-serif */
        'Noto Sans',      /* Google’s clean universal font for many languages */
        'Arial',
        sans-serif;

    font-size: 16px;
    line-height: 1.6;
    direction: ltr;
    text-align: left;
    color: #111;
    background-color: #fff;
}
 
.modal-xl {
    max-width: 90% !important;
      
}

.modal-body {
    max-height: 70vh;
    overflow-y: auto;
}
  
.navbar {
    background-color: #f8f9fa;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.navbar-brand img {
    object-fit: cover;
}

       .hero-section {
            background: url('uploads/hero.jpg') center center / cover no-repeat;
            color: #fff;
            padding: 100px 0;
        }
 
 

.mcqsside{
list-style-type: none; 
 /* padding-left: 40px;*/
 /* padding-right:20px;*/
border-right: 2px solid rgb(223, 220, 220);
 
   }   


table.dataTable th {
    background-color: #1280ee; /* Dark Grey */
    
      color: #fff;
}

table thead th.sticky-top {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Highlight the correct answer with a badge look */
.highlight-correct {
    background-color: #6e40db;
    color:white;
    padding: 4px 6px;
    border-radius: 4px;
    font-weight: 500;
}

/* Slight zebra striping */
table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* Prevent text overflow in question cell */
table td {
    word-break: break-word;
    vertical-align: middle !important;
}

/* Smooth hover effect */
table tbody tr:hover {
    background-color: #f0f8ff;
}
 
.correct-answer {
    background-color: #296aaa; /* highlight selected value */
   color: #fafafa;
    border-left: 5px solid #201f20;
    padding: 0.5rem;
    border-radius: 0.25rem;
}

.ad-space {
    border: 2px dashed #007bff;
    padding: 20px;
    border-radius: 8px;
    background-color: #e3f2fd;
    color: #007bff;
    font-weight: 500;
}

.ad-space.dark-mode {
    background-color: #2c3e50;
    color: #00bfff;
    border-color: #00bfff;
}

input.form-control, select.form-select {
    background-color: #fff;
    border-color: #ced4da;
}
  .question-card {
            background-color: #f8f9fa;
            border-radius: 8px;
            border: 1px solid #dee2e6;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            transition: background-color 0.3s, color 0.3s;
        }

        .question-title {
            font-size: 1rem;
            font-weight: 600;
            color: #212529;
            margin-bottom: 10px;
        }

        .question-answer {
            font-size: 0.95rem;
            color: #495057;
        }

/* Dark Mode */
body.dark-mode {
    background-color: #343a40;
    color: #bbb2b2;
}

body.dark-mode .navbar {
   background-color: #343a40;
}
 

body.dark-mode .nav-link,
body.dark-mode .navbar-brand {
  color: #bbb2b2;
}

body.dark-mode .dropdown-menu {
   background-color: #343a40;
   color: #bbb2b2;
}
   body.dark-mode .dark-mode-card {
            background-color: #343a40;
            color: #afa4a4;
        }
        body.dark-mode .table {
            background-color: #343a40;
            color: #afa4a4;
        }
body.dark-mode .dropdown-item {
   color: #bbb2b2;
}
 body.dark-mode .dropdown-item:hover {
     background-color: #343a40;
    color: #bbb2b2;
}
 body.dark-mode .dropdown-item:active {
      background-color: #343a40;
   color: #bbb2b2;
}
 body.dark-mode input.form-control,
body.dark-mode select.form-select {
    background-color: #343a40;
   color: #bbb2b2;
    border-color: #495057;
}

body.dark-mode .card {
    background-color: #343a40;
   color: #bbb2b2;
    border-color: #495057;
}
  body.dark-mode .table {
  background-color: #343a40;/* Dark Grey */
    
      color: #bbb2b2;
}
        
body.dark-mode table.dataTable th, 
body.dark-mode table.dataTable td,
body.dark-mode table.dataTable thead{
  background-color: #343a40;
    color: #bbb2b2;
     border: 1px solid #343a40;  
}
 /* Target the entire select */
body.dark-mode .dataTables_length select {
  color: #bbb2b2;
  background-color: #343a40; /* Bootstrap primary color */
    border-radius: 4px;
    padding: 4px 6px;
}

/* Option style when selected */
body.dark-mode .dataTables_length select option:checked {
    background-color: #343a40; /* highlight selected value */
   color: #bbb2b2;
}
 

body.dark-mode .dataTables_filter input {
   background-color: #343a40;/* highlight selected value */
    color: #bbb2b2;
}

body.dark-mode .dataTables_filter input:focus {
  background-color: #343a40; /* highlight selected value */
    color: #bbb2b2;
}

body.dark-mode .pagination {
  background-color: #343a40; /* highlight selected value */
    color: #bbb2b2;
}
  
body.dark-mode .correct-answer {
    background-color: #296aaa; /* highlight selected value */
   color: #bbb2b2;
    border-left: 5px solid #201f20;
    padding: 0.5rem;
    border-radius: 0.25rem;
}
 body.dark-mode  .mcqsside{
list-style-type: none; 
padding: 20px; 
border: 2px solid gray;

   }  
    body.dark-mode  .question-card {
           background-color: #343a40; /* highlight selected value */
    color: #bbb2b2;
        }

       body.dark-mode .question-title {
           background-color: #343a40; /* highlight selected value */
    color: #bbb2b2;
        }

        body.dark-mode .question-answer {
           background-color: #343a40; /* highlight selected value */
    color: #bbb2b2;
        }

      body.dark-mode  .modal-xl {
    background-color: #343a40; /* highlight selected value */
    color: #bbb2b2;
}

body.dark-mode .modal-body {
    background-color: #343a40; /* highlight selected value */
    color: #bbb2b2;
}
body.dark-mode  select {
  color: #bbb2b2;
  background-color: #343a40; /* Bootstrap primary color */
    
}
body.dark-mode  input {
  color: #bbb2b2;
  background-color: #343a40; /* Bootstrap primary color */
     border-radius: 4px;
     
}

body.dark-mode .highlight-correct {
    color: #343a40;
  background-color: #bbb2b2;
}
/* Dark mode styles for navbar-toggler button */
body.dark-mode .navbar-toggler {
    border-color: #ffffff; /* White border for visibility */
    
}

/* Dark mode styles for the icon inside the toggle button */
body.dark-mode .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
body.dark-mode .dropdown-menu,
body.dark-mode .dropdown-item {
    transition: background-color 0.3s ease, color 0.3s ease;
}
/* Dark mode dropdown styles */
 body.dark-mode .nav-link.dropdown-toggle {
    color: #bbb2b2;
  background-color: #343a40;           /* White text */
    border-radius: 0.25rem;  
              /* Optional: rounded edges */
}
  @media (max-width: 576px) {
        table td, table th {
            font-size: 12px;
            padding: 4px;
        }
        .spechead{
display:none;
        }
    }