/* =========================================================
   GLOBAL BASE STYLES
   ========================================================= */
body {
  background-color: #f5f7fa;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.00rem;   /* make all text smaller */
}

footer {
  color: #6c757d;
}

/* =========================================================
   PAGE LAYOUTS
   ========================================================= */

/* ---- General Card Layout ---- */
.page-frame {
  display: flex;
  justify-content: center;
}

.page-card {
  width: 100%;
  max-width: 960px;
  border-radius: 1rem;
  background: #fff;
}

/* Responsive balance: allow narrower fit on mobile */
@media (max-width: 576px) {
  .card-narrow,
  .card-medium,
  .card-wide,
  .card-xwide {
    margin: 0 0.5rem;
    width: 100%;
  }
}

/* =========================================================
   CARD SPACING & CONTENT COMFORT
   ========================================================= */
.card-body {
  padding: 2rem;              /* Default comfortable padding */
}

/* =========================================================
   AUTH / LOGIN / REGISTER PAGES
   ========================================================= */

/* ---- Auth Box ---- */
.login-box {
  max-width: 500px;
  margin: 5% auto;
  padding: 2rem;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* ---- Buttons ---- */
.btn-primary {
  font-weight: 600;
}

.certify-btn i {
  font-size: 1.1rem;
}

.certify-btn.btn-success:hover {
  background-color: #198754cc;
}

.btn-xs {
    padding: 0.15rem 0.35rem !important;
    font-size: 0.80rem !important;
    line-height: 1 !important;
  }

/* ---- Form Indicators ---- */
.required::after {
  content: " *";
  color: red;
}

/* ---- Auth Card Consistency ---- */
.card {
  border-radius: 1rem;
  background: #fff;
}

/* =========================================================
   NAVBAR & BRANDING
   ========================================================= */

.brand-img {
  height: 40px;
  width: auto;
  object-fit: contain;
}

.brand-title {
  font-size: 1.2rem;
  line-height: 1.1;
  position: relative;
  top: 2px;
}

.nav-link.active {
  color: #0d6efd !important;
}

/* Make dropdown menu + items smaller */
.navbar .dropdown-menu,
.navbar .dropdown-item {
    font-size: 1.00rem !important;   /* adjust size here */
    padding: 0.25rem 0.75rem;        /* smaller spacing */
}

/* Make the top navbar text smaller too (optional but recommended) */
.navbar,
.navbar * {
    font-size: 1.00rem !important;
}

/* =========================================================
   EXAM PAGES
   ========================================================= */

#exam-timer {
  font-size: 0.85rem;
  background: #0d6efd;
  color: #fff;
}

/* ---- Webcam Preview ---- */
#webcamPreview {
  border-radius: 0.5rem;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
}

/* ---- Video Element ---- */
#video {
  display: block;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 4 / 3;
  margin: 0 auto;
  border-radius: 0.5rem;
  border: 1px solid #dee2e6;
  background: #000;
  object-fit: cover;
}

.video-wrapper {
  display: inline-block;
  border-radius: 0.5rem;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.video-wrapper video {
  display: block;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 4/3;
  border-radius: 0.5rem;
  background: #000;
  object-fit: cover;
}

/* =========================================================
   EXAMINER / DASHBOARD ELEMENTS
   ========================================================= */
table.table {
    font-size: 1.00rem;  /* shrink table text */
}

.table-sm > :not(caption) > * > * {
    padding: 0.25rem 0.3rem; /* tighter table rows */
}

table.table th,
table.table td {
  vertical-align: middle;
}

section h5 {
  font-weight: 600;
  margin-bottom: 1rem;
}

/* ---- Snapshot Thumbnails ---- */
.snapshot-thumb {
  max-width: 100%;
  cursor: pointer;
  border-radius: 0.5rem;
  transition: transform 0.1s ease-in-out;
}

.snapshot-thumb:hover {
  transform: scale(1.05);
}

/* ---- Heatmap ---- */
#heatmapContainer {
  overflow: hidden;
  border-radius: 0.5rem;
}


/* =========================================================
   OTP / VERIFICATION STYLING
   ========================================================= */

input#code {
  letter-spacing: 0.4rem;
  font-weight: 600;
  font-size: 1.1rem;
  text-align: center;
}
input#otp {
  letter-spacing: 0.4rem;
  font-weight: 600;
  font-size: 1.1rem;
  text-align: center;
}

/* =========================================================
   CARD WIDTH HELPERS
   ========================================================= */

/* Narrow — Login, OTP, small forms */
.card-narrow {
  max-width: 550px !important;
}

/* Standard — Registration, verification, general pages */
.card-medium {
  max-width: 720px !important;
}

/* Wide — Dashboards, data tables, AI generator */
.card-wide {
  max-width: 1000px !important;
}

/* Extra Wide — Multi-column layouts or large content */
.card-xwide {
  max-width: 1200px !important;
}

.card-fullscreen {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
}

/* =========================================================
   QUESTION NAVIGATION GRID
   ========================================================= */
.question-nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(45px, 1fr));
  gap: 0.4rem;
  justify-items: center;
}

.question-nav-grid .btn {
  width: 100%;
  min-width: 40px;
  text-align: center;
  padding: 0.25rem 0;
  font-weight: 500;
}

@media (max-width: 768px) {
  .question-nav-grid {
    grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));
  }
}


/* =========================================================
   SUSPICIOUS LEVEL BADGE
   ========================================================= */
.badge-risk-low    { background: #198754; color: #fff; } /* green */
.badge-risk-medium { background: #ffc107; color: #222; } /* orange */
.badge-risk-high   { background: #dc3545; color: #fff; } /* red */
.badge-risk-critical { background: #6c0b0b; color: #fff; } /* dark red */


/* =========================================================
 Make sortable headers blue-ish and clearly clickable
========================================================= */
th.sortable {
    color: var(--bs-primary);   /* Bootstrap blue */
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s, color 0.15s;
}

th.sortable:hover {
    opacity: 0.75;
    background-color: #e7f1ff; /* light blue hover */
    color: #0b5ed7;            /* slightly darker blue */
}

/* Active sort highlight */
th.sorted-asc,
th.sorted-desc {
    background-color: #cfe2ff; /* Bootstrap light primary */
    color: #084298 !important; /* Bootstrap primary text */
}

th.sortable { cursor: pointer; }
th.sorted-asc::after { content: " ▲"; }
th.sorted-desc::after { content: " ▼"; }


/* =========================================================
 <code></code> color
========================================================= */
code {
  color: #212529;        /* Bootstrap default text color (black) */
  background-color: transparent; /* optional */
}