:root {
  color-scheme: dark;
  --glass-bg: rgba(13, 40, 68, 0.32);
  --glass-border: rgba(255, 255, 255, 0.22);
  --glass-highlight: rgba(255, 255, 255, 0.45);
  --glass-shadow: 0 30px 80px rgba(6, 24, 51, 0.45);
  --glass-radius-lg: 1.75rem;
  --glass-radius-md: 1.35rem;
  --glass-blur: blur(22px);
  --accent-primary: #3ca6ff;
  --accent-secondary: #7bd5ff;
  --heading-color: rgba(226, 240, 255, 0.96);
  --text-color: rgba(200, 218, 240, 0.88);
  --text-muted: rgba(186, 206, 230, 0.65);
  --danger-accent: rgba(255, 112, 67, 0.4);
}

html,
body {
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  height: 100%;
  overflow-x: hidden; /* Prevent any horizontal scrolling */
  scroll-behavior: smooth;
}

html {
  overflow-y: scroll; /* Always show scrollbar to prevent layout shift */
  /* Reserve space for the vertical scrollbar to avoid layout shift when it's shown/hidden */
  /*scrollbar-gutter: stable both-edges;*/
}

body {
  font-family: "Vazir", sans-serif;
  direction: rtl;
  text-align: right;
  min-height: 100vh;
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  margin: 0;
  position: relative;
  background: linear-gradient(135deg, #0d1b2a, #1b263b); /* solid background */
  color: var(--text-color);
  /* Ensure stable scrollbar gutter on the body as well (modern browsers) */
  scrollbar-gutter: stable;
}

body::before,
body::after {
  display: none; /* hide glassmorphism layers */
}

.waves-header {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 55vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: center;
  background: transparent;
  z-index: -4;
  pointer-events: none;
}

.waves-inner-header {
  flex: 1 0 auto;
  width: 100%;
}

.waves {
  position: relative;
  width: 100%;
  height: 35vh;
  margin-bottom: -12px;
  min-height: 180px;
  max-height: 320px;
}

.parallax > use {
  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}

.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 4s;
  opacity: 0.2;

  /* Smooth reveal animation for module cards (moved from index.php) */
  .dashboard-card.module-card {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 360ms ease, transform 360ms ease;
  }
  .dashboard-card.module-card.show-card {
    opacity: 1;
    transform: translateY(0);
  }
}

.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 7s;
  opacity: 0.4;
}

.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 10s;
  opacity: 0.6;
}

.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 13s;
}

@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }

  100% {
    transform: translate3d(85px, 0, 0);
  }
}

/* Disable waves animation via config toggle - show static frame instead of hiding */
body.no-waves-animation .parallax > use {
  animation: none !important;
  transform: translate3d(0, 0, 0) !important;
}

@media (max-width: 768px) {
  .waves-header {
    height: 45vh;
  }

  .waves {
    height: 120px;
    min-height: 120px;
    max-height: 180px;
  }
}

.container-fluid {
  position: relative;
  z-index: 1;
}

.card {
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius-lg);
  overflow: hidden;
  background: linear-gradient(
    135deg,
    rgba(18, 54, 92, 0.55),
    rgba(10, 30, 62, 0.35)
  );
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  color: var(--text-color);
}

.card-body {
  background: transparent;
  color: var(--text-color);
}

.card-header {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(
    135deg,
    rgba(60, 162, 255, 0.35),
    rgba(16, 56, 102, 0.85)
  );
  color: var(--heading-color);
}

#examForm .form-control-lg {
  font-size: 1.1rem;
  letter-spacing: 0.5px;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(16, 44, 78, 0.54);
  color: rgba(236, 246, 255, 0.96);
  caret-color: rgba(210, 232, 255, 0.95);
  transition: border-color 0.2s ease, box-shadow 0.2s ease,
    background-color 0.2s ease;
}

#examForm .form-label {
  color: var(--heading-color);
}
#examForm .form-control-lg::placeholder {
  color: rgba(232, 244, 255, 0.75);
}

#examForm .form-control-lg:focus {
  border-color: rgba(91, 176, 255, 0.68);
  background: rgba(20, 56, 96, 0.62);
  box-shadow: 0 0 0 3px rgba(91, 176, 255, 0.18);
}

#captchaContainer {
  transition: opacity 0.2s ease;
}

#captchaContainer .captcha-challenge-box {
  border-radius: 1rem;
  background: rgba(14, 60, 104, 0.45);
  border: 1px dashed rgba(255, 255, 255, 0.35);
  color: var(--heading-color);
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
  padding: 0.75rem 1rem;
  letter-spacing: 2px;
}

#captchaContainer small {
  color: rgba(232, 244, 255, 0.7);
}

/* Styles moved from dashboard/index.php <style> block */
/* Dashboard page specific styles */
.dashboard-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
  position: relative;
  z-index: 1;
}

.dashboard-container {
  position: relative;
  z-index: 1;
}

.dashboard-header {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.9) 100%
  );
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
}

.dashboard-card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.9) 100%
  );
  backdrop-filter: blur(10px);
  border-radius: 20px;
  /* Default padding for dashboard cards (revert to original) */
  padding: 2.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Scoped compact padding: only apply reduced white padding to stat cards */
.dashboard-card.stat-card {
  padding: 0.3125rem; /* 5px symmetric padding */
}

/* Disabled stat card (no pointer events, modestly faded, no hover transform) */
.dashboard-card.stat-card.stat-card-disabled {
  pointer-events: none;
  opacity: 0.88;
  transform: none !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06) !important;
}

.dashboard-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.dashboard-card.no-hover:hover {
  transform: none;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Dark labels for dashboard-card forms */
.dashboard-card.no-hover .form-label {
  color: #1e293b;
  font-weight: 600;
}

.dashboard-card.no-hover p {
  color: #475569;
}

.dashboard-card h4 {
  font-size: 1.5rem;
  color: #1a6fa6;
  font-weight: 700;
}

/* Locations list inside observers module */
.locations-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.locations-list .location-row {
  display: grid;
  grid-template-columns: 1fr 240px;
  align-items: center;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  gap: 0.75rem;
}
.locations-list .location-row:last-child {
  border-bottom: none;
}
.locations-list .location-title {
  font-weight: 700;
  color: #04202a; /* dark text for readability */
  word-break: break-word;
}

/* Save All button styling in observers module: centered, wider, sax color */
#locationsCard #saveAllBtn {
  display: inline-block;
  margin: 0.8rem auto 0 auto; /* center horizontally within card */
  width: 180px;
  padding: 0.6rem 1rem;
  border-radius: 12px;
  background: linear-gradient(135deg, #127ead, #1a6fa6);
  color: #fff;
  border: none;
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(18, 110, 150, 0.15);
}
#locationsCard #saveAllBtn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}
.rp-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.08rem; /* tighten spacing between input and buttons */
}
.rp-input {
  width: 88px;
  height: 38px;
  padding: 0.35rem 0.45rem;
  text-align: center;
  border-radius: 6px;
  border: 1px solid #d1d5da;
  background: #ffffff;
  color: #04202a;
  font-weight: 600;
  appearance: textfield;
  -webkit-appearance: textfield;
  -moz-appearance: textfield; /* hide Firefox spinner */
}
/* Hide number input spinner for WebKit browsers */
.rp-input::-webkit-outer-spin-button,
.rp-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.rp-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  cursor: pointer;
  padding-right: 20px;
}
.rp-save {
  /* Make the checkmark glyph green and remove the colored gradient background.
     Keep circular sizing but use transparent/inherit background so the button
     blends with the card. */
  background: transparent;
  color: #28a745; /* green glyph color */
  border-radius: 999px;
  border: 0px solid rgba(40, 167, 69, 0.08); /* subtle greenish border */
  padding: 0;
}

/* Make the control group appear glued: remove extra gap between input and buttons on small screens */
.rp-controls > * {
  margin: 0;
}

/* Small round action buttons that match input height */
.rp-btn {
  width: 20px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  border: none; /* remove visible frame */
  background: transparent; /* blend with card */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  cursor: pointer;
  padding-right: 20px;
}
.rp-save {
  background: transparent;
  color: #28a745;
  border: none; /* no frame */
  border-radius: 999px;
}
.rp-cancel {
  background: transparent;
  color: #dc3545; /* red glyph color */
  border: none; /* no frame */
  border-radius: 999px;
}

/* Recipient credential modal */
.recipient-credential-card {
  text-align: right;
  direction: rtl;
  color: #f5f9ff;
}
.recipient-credential-heading {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1.25rem;
}
.recipient-credential-heading img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(26, 111, 166, 0.25);
}
.recipient-credential-heading h5 {
  margin: 0;
  font-weight: 700;
  color: #f8fafc;
}
.recipient-credential-heading p {
  margin: 0.2rem 0 0;
  color: rgba(248, 250, 252, 0.75);
  font-size: 0.95rem;
}
.recipient-credential-field {
  border: 1px solid rgba(88, 126, 191, 0.45);
  border-radius: 16px;
  padding: 0.85rem 1rem;
  margin-bottom: 0.85rem;
  background: rgba(15, 23, 42, 0.72);
  position: relative;
}
.recipient-credential-label {
  font-size: 0.9rem;
  color: rgba(226, 232, 240, 0.92);
  margin-bottom: 0.35rem;
  display: block;
}
.recipient-credential-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: #f8fafc;
  word-break: break-word;
}
.recipient-credential-pair {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.recipient-credential-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: nowrap;
  width: 100%;
}
.recipient-row-label {
  font-size: 0.95rem;
  color: rgba(248, 250, 252, 0.85);
  flex: 0 0 auto;
}
.recipient-row-value {
  color: #f8fafc;
  direction: ltr;
  unicode-bidi: embed;
  flex: 1 1 auto;
  text-align: left;
  min-width: 0;
}
.recipient-password-value {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 0.95rem;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.08);
  font-family: "Cascadia Code", "JetBrains Mono", "Fira Code", "Source Code Pro",
    "Ubuntu Mono", "Menlo", "Consolas", "Liberation Mono", "Courier New",
    monospace;
  letter-spacing: 0.08rem;
  direction: ltr;
  unicode-bidi: embed;
  filter: blur(6px);
  transition: filter 0.25s ease, background 0.25s ease;
  cursor: pointer;
  user-select: none;
  color: #f8fafc;
  font-size: 14px;
}
.recipient-password-value:hover,
.recipient-password-value:focus {
  filter: blur(0);
  background: rgba(26, 111, 166, 0.16);
}
.recipient-password-value[data-copied="true"] {
  background: rgba(34, 197, 94, 0.25);
  color: #022c22;
}
.recipient-password-feedback {
  font-size: 0.85rem;
  margin-top: 0.6rem;
  color: #e2e8f0;
  min-height: 1.2rem;
}
.recipient-password-feedback:empty {
  display: none;
}
.recipient-password-feedback.success {
  color: #a3e635;
}
.recipient-password-feedback.error {
  color: #fecdd3;
}
.swal2-popup.recipient-modal {
  width: min(720px, 98vw);
}

@media (max-width: 440px) {
  .recipient-credential-row {
    flex-wrap: wrap;
  }
  .recipient-row-value {
    text-align: center;
    width: 100%;
  }
}

/* Proctors card button styles (moved from inline in observers/index.php) */
#proctorsCard .btn-proctor {
  padding: 0.35rem 0.9rem;
  font-size: 0.95rem;
  border-radius: 0.375rem;
  box-shadow: none !important;
  min-width: 110px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Primary save button: keep same color on hover (remove hover effect) */
#proctorsCard .btn-proctor.btn-primary {
  background-color: #0d6efd;
  border-color: #0d6efd;
  color: #fff;
}
#proctorsCard .btn-proctor.btn-primary:hover,
#proctorsCard .btn-proctor.btn-primary:focus {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}

#proctorsCard .btn-proctor.btn-primary:active,
#proctorsCard .btn-proctor.btn-primary:focus-visible {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Outline secondary (clear) button look consistent */
#proctorsCard .btn-proctor.btn-outline-secondary {
  color: #495057;
  border-color: #ced4da;
  background: transparent;
}

#proctorsCard .btn-proctor:focus {
  box-shadow: none !important;
}

/* inline warning next to input */
.rp-warning {
  color: #c82333;
  font-size: 0.85rem;
  margin-top: 0.25rem;
  min-height: 1.1rem;
  text-align: center;
}
.rp-invalid {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.06) !important;
}
/* Assignment stats - improve readability and size */
#assignmentStats {
  margin-top: 0.6rem;
  direction: rtl;
  text-align: right;
  font-size: 1.03rem; /* slightly larger */
  color: #04202a; /* dark readable color */
  line-height: 1.6;
}
#assignmentStats strong {
  display: inline; /* keep inline so it sits next to the label */
  min-width: 0; /* remove forced gap */
  margin-inline-start: 0.35rem; /* small gap, RTL-aware */
  color: #1a6fa6; /* primary blue for numbers (unchanged) */
  font-weight: 800;
  font-size: 1.08rem; /* unchanged */
}
/* Ensure observers card does not lift on hover */
#locationsCard.dashboard-card.no-hover:hover {
  transform: none;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.btn-primary {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.stat-box {
  text-align: center;
  /* Keep inner blue padding so content has breathing room */
  padding: 2rem;
  background: linear-gradient(135deg, #1a6fa6 0%, #127ead 100%);
  border-radius: 15px;
  color: white;
  margin-bottom: 0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.stat-box h3 {
  font-size: 3rem;
  font-weight: bold;
  margin: 0;
}

.stat-box p {
  margin: 0.5rem 0 0 0;
  opacity: 0.95;
  font-size: 1.1rem;
}

.btn-logout {
  background: #dc3545;
  color: white;
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: 8px;
  transition: background 0.3s ease;
}

.btn-logout:hover {
  background: #c82333;
  color: white;
}

.btn-upload {
  background: #28a745;
  color: white;
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: 8px;
  transition: background 0.3s ease;
  font-size: 1rem;
}

.btn-upload:hover {
  background: #218838;
  color: white;
}

/* Blue push notification button */
.btn-upload-blue {
  background: #2196f3;
  color: white;
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: 8px;
  transition: background 0.3s ease;
  font-size: 1rem;
}

.btn-upload-blue:hover {
  background: #1976d2;
  color: white;
}

.admin-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.admin-info h5 {
  font-size: 1.3rem;
  color: #1a6fa6;
  font-weight: 700;
}

.admin-info small {
  font-size: 1rem;
}

.table td {
  font-size: 0.9rem;
  padding: 0.8rem 0.5rem;
}

.table strong {
  color: #1a6fa6;
}

#reportContent {
  /* No scroll bar - card expands as needed */
  color: #6c757d; /* Gray color for text */
}

#reportContent td {
  color: #6c757d !important;
}

#reportContent h5 {
  background: white;
  padding: 10px 0;
}

/* Reports chart card styling */
.reports-chart-placeholder {
  padding: 0.6rem 0.75rem;
  color: var(--text-muted);
  text-align: center;
  font-size: 0.98rem;
  min-height: 72px; /* compact placeholder height */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Make the reports chart responsive with a 16:9 aspect box */
#reportsChartCard {
  position: relative;
}
#reportsChartCard .chart-wrapper {
  width: 100%;
  display: block;
  /* Maintain 16:9 ratio using padding-top trick */
  padding-top: 56.25%;
  position: relative;
}
#reportsChartCard .chart-wrapper canvas {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

/* Reports overview: main chart + small pies column */
.reports-overview {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.reports-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 160px;
  justify-content: center;
}

.small-pie {
  width: 142px !important;
  height: 142px !important;
}

.small-pie-wrap {
  padding: 4px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(11, 42, 68, 0.06);
}

/* Disable heavy glass blur on the mini-pie wrapper so charts render sharply */
.small-pie-wrap {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Mini pie styles inside report card */
.mini-pie {
  width: 142px !important;
  height: 142px !important;
  display: block;
  margin: 0 auto;
}
.mini-pie {
  cursor: pointer;
}
.mini-pie + div {
  text-align: center;
}

/* Print buttons (icons) should match mini-pie size and have subtle hover like other dashboard elements */
#printSeatNumbersBtn,
#printSessionReportBtn,
#examEssentialsBtn {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  width: 138px;
  height: 138px;
  display: inline-block;
  border-radius: 8px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#examEssentialsBtn {
  position: relative;
  top: -1px;
}
#printSeatNumbersBtn img,
#printSessionReportBtn img,
#examEssentialsBtn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}
/* Avoid the default bootstrap outline/blue background on hover; just subtle lift */
#printSeatNumbersBtn:hover,
#printSeatNumbersBtn:focus,
#printSessionReportBtn:hover,
#printSessionReportBtn:focus,
#examEssentialsBtn:hover,
#examEssentialsBtn:focus {
  transform: translateY(-4px);
  /* intentionally no box-shadow or blue background — subtle lift only */
  background: transparent !important;
}
/* Small screens: match mini-pie responsive size */
@media (max-width: 900px) {
  #printSeatNumbersBtn,
  #printSessionReportBtn,
  #examEssentialsBtn {
    width: 102px;
    height: 102px;
  }
}
.mini-pie {
  cursor: pointer;
}
.mini-pie + div {
  text-align: center;
}
.reports-chart-placeholder {
  padding: 1.5rem;
  color: var(--text-muted);
  text-align: center;
  font-size: 1.05rem;
}

/* Tweak SweetAlert input appearance: center and improve desktop look */
.swal2-html-container {
  /* center inline HTML content inside the modal */
  text-align: center;
  overflow: visible !important;
}

.swal2-input {
  display: block;
  width: 14rem;
  max-width: 92%;
  margin: 0.6rem auto !important;
  padding: 0.6rem 0.85rem !important;
  border-radius: 10px !important;
  border: 1px solid #d6dbe0 !important;
  box-shadow: 0 4px 10px rgba(16, 24, 40, 0.06) inset !important;
  font-size: 1.05rem !important;
  text-align: center !important;
  direction: ltr !important;
  font-family: "Vazir", sans-serif !important;
  background: #ffffff !important;
  color: #333 !important;
}

/* Slightly larger input on very wide screens */
@media (min-width: 1400px) {
  .swal2-input {
    width: 18rem;
  }
}

.course-item.active {
  background-color: #ffffff !important; /* white background for high contrast */
  color: #1a6fa6 !important; /* primary blue for text */
  border: 1px solid rgba(26, 111, 166, 0.08) !important;
}

/* End moved styles */

/* Badge pair: make number and label appear as one glued element */
.badge-pair {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border-radius: 0.6rem;
  vertical-align: middle;
}
.badge-pair .badge {
  margin: 0; /* remove any default spacing */
  border-radius: 0; /* reset; container will handle rounding */
  padding: 0.3rem 0.45rem; /* slightly smaller so badges are more compact */
  font-size: 12px; /* match other badges */
  line-height: 1; /* keep compact height */
}
/* inner badges should have no radius so they join perfectly; the container (.badge-pair) handles rounding */
.badge-pair .badge:first-child,
.badge-pair .badge:last-child {
  border-radius: 0;
}
/* ensure the numeric (gray) badge background is fully filled */
.badge-pair .bg-secondary {
  background-color: #6c757d;
  color: #fff;
}

/* Adjustments for active course-item readability */
.course-item.active .text-secondary {
  color: #6c757d !important; /* keep secondary text muted */
}
.course-item.active .badge {
  box-shadow: none !important; /* make badges blend with the white background */
}

/* Session mini-cards inside the Remaining Sessions modal */
.session-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}

/* Compact proctor restrictions mini-cards (used in observers modal) */
.proctor-session-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  align-items: center;
  margin: 0.6rem 0 0;
}
.proctor-session-card {
  /* make cards wider and shorter so they fit one line */
  min-width: 150px;
  max-width: 220px;
  padding: 0.35rem 0.7rem;
  height: 36px; /* reduced height only */
  display: flex;
  /* center content horizontally and vertically */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  border-radius: 10px;
  cursor: pointer;
  color: #04202a;
  background: linear-gradient(
    140deg,
    rgba(233, 239, 250, 0.95),
    rgba(221, 230, 242, 0.95)
  );
  box-shadow: 0 8px 20px rgba(2, 18, 24, 0.06);
  border: 1px solid rgba(4, 32, 42, 0.04);
  text-align: center;
  font-size: 0.88rem;
  position: relative;
  transition: transform 0.12s ease, box-shadow 0.12s ease,
    border-color 0.12s ease, opacity 0.12s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.proctor-session-card.session-display {
  cursor: default;
}
.proctor-session-card .ps-dt {
  font-weight: 600;
  font-size: 0.86rem; /* date and time small and on one line */
  line-height: 1;
  color: #04202a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.proctor-session-card:hover {
  /* hover visual intentionally disabled; selection controls visual state */
  transform: none;
  box-shadow: 0 8px 20px rgba(2, 18, 24, 0.06);
}
.proctor-session-card.session-display.upcoming {
  background: linear-gradient(
    140deg,
    rgba(226, 245, 235, 0.94),
    rgba(212, 239, 223, 0.9)
  );
  border-color: rgba(33, 126, 74, 0.28);
  color: #1f5a39;
}
.proctor-session-card.session-display.past {
  background: linear-gradient(
    140deg,
    rgba(255, 236, 236, 0.94),
    rgba(255, 223, 223, 0.92)
  );
  border-color: rgba(194, 58, 63, 0.3);
  color: #7b2028;
}
.proctor-session-card.session-display.upcoming .ps-dt,
.proctor-session-card.session-display.past .ps-dt {
  color: inherit;
}
.proctor-session-card.selected {
  /* selected keeps a visible state but should NOT move vertically
     Instead of showing a check badge, change the card background and text
     to indicate selection. Note: inline gradient backgrounds are applied
     on the element, so we use !important to override them. */
  border-color: rgba(111, 66, 193, 0.9);
  box-shadow: 0 14px 32px rgba(2, 18, 24, 0.08);
  transform: none; /* do not translate up */
  background: #000 !important;
  color: #fff !important;
}
.proctor-session-card.selected .ps-dt {
  color: #fff !important;
}
.proctor-session-card.selected::after {
  /* remove the check badge entirely */
  display: none !important;
}

@media (max-width: 768px) {
  .proctor-session-card {
    min-width: 110px;
    max-width: 160px;
    padding: 0.35rem 0.5rem;
    height: 32px;
  }
  .proctor-session-card .ps-date {
    font-size: 0.9rem;
  }
}

/* Glass modal variant for proctor restrictions: wider, glassy, non-scrolling by default */
.swal2-popup.proctor-restrictions-modal {
  /* force 90% of viewport width for this modal (override inline width) */
  width: 90vw !important;
  max-width: 1100px !important;
  border-radius: var(--glass-radius-md);
  padding: 1rem 1.1rem 0.9rem;
  box-shadow: 0 30px 70px rgba(7, 18, 35, 0.45);
  background: linear-gradient(
    140deg,
    rgba(25, 55, 95, 0.62),
    rgba(12, 32, 60, 0.45)
  );
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px);
  overflow: hidden;
}
.swal2-popup.proctor-restrictions-modal .swal2-html-container {
  max-height: calc(78vh - 140px);
  overflow: auto;
  padding: 6px;
}
.swal2-popup.proctor-sessions-modal .swal2-html-container {
  max-height: none;
  overflow: visible;
}

/* Make the edit restrictions and delete buttons inline and aligned */
.edit-restrictions,
.delete-proctor {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem;
  padding: 0.45rem 0.65rem !important;
  font-size: 0.86rem !important;
  border-radius: 0.55rem !important;
  vertical-align: middle !important;
}
.edit-restrictions {
  margin-inline-end: 6px !important;
}
.delete-proctor {
  margin-inline-start: 6px !important;
}

/* prevent buttons from wrapping in tight table cells */
table .btn {
  white-space: nowrap;
}
.session-mini-card {
  padding: 0.9rem;
  border-radius: 12px;
  cursor: pointer;
  color: #04202a;
  box-shadow: 0 6px 18px rgba(2, 18, 24, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  border: 1px solid rgba(0, 0, 0, 0.04);
}
.session-mini-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(2, 18, 24, 0.08);
}
/* Line1: big total number */
.session-mini-card .line1 {
  font-weight: 800;
  color: #04202a;
  font-size: 1.5rem;
  text-align: center;
}
/* Line2: date|time smaller */
.session-mini-card .line2 {
  margin-top: 0.5rem;
  color: #04202a;
  font-size: 1rem;
  text-align: center;
}
.session-mini-card .line3 {
  margin-top: 0.45rem;
  color: #0a1d2e;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
}

.session-mini-grid.insight-grid {
  margin-top: 1.1rem;
}
.session-mini-card.insight-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 165px;
  border: 1px solid rgba(4, 32, 42, 0.05);
  background: linear-gradient(
    140deg,
    rgba(255, 255, 255, 0.88),
    rgba(247, 252, 255, 0.98)
  );
}
.session-mini-card.insight-card .line1 {
  font-size: 1.6rem;
}
.session-mini-card.insight-card .line2 {
  font-size: 1.05rem;
  opacity: 0.85;
}
.session-mini-card.insight-card .line3 {
  font-size: 0.95rem;
  letter-spacing: -0.015em;
}
.session-mini-card.insight-card.insight-busy {
  background: linear-gradient(
    140deg,
    rgba(255, 236, 220, 0.9),
    rgba(255, 246, 234, 0.9)
  );
}
.session-mini-card.insight-card.insight-quiet {
  background: linear-gradient(
    140deg,
    rgba(222, 239, 255, 0.92),
    rgba(205, 230, 255, 0.92)
  );
}
.session-mini-card.insight-card.insight-course {
  background: linear-gradient(
    140deg,
    rgba(222, 250, 240, 0.92),
    rgba(204, 241, 228, 0.92)
  );
}
.session-mini-card.insight-card.insight-descriptive {
  background: linear-gradient(
    140deg,
    rgba(239, 226, 255, 0.92),
    rgba(226, 213, 255, 0.92)
  );
}
.session-mini-card.insight-card.insight-test {
  background: linear-gradient(
    140deg,
    rgba(234, 246, 255, 0.92),
    rgba(215, 237, 255, 0.92)
  );
}
.session-mini-card.insight-card.insight-written {
  background: linear-gradient(
    140deg,
    rgba(235, 250, 222, 0.92),
    rgba(221, 242, 204, 0.92)
  );
}
.session-mini-card.insight-card.insight-electronic {
  background: linear-gradient(
    140deg,
    rgba(255, 248, 220, 0.92),
    rgba(255, 241, 200, 0.92)
  );
}

.session-mini-card.insight-card.insight-subcard {
  cursor: pointer;
  min-height: 90px;
  padding: 0.75rem 0.65rem;
}
.session-mini-card.insight-card.insight-subcard .line1 {
  font-size: 1.05rem;
}

/* Morning: solid light teal background */
.session-mini-card.morning {
  background-color: #e6f8ff;
}

/* Afternoon: solid light pink background */
.session-mini-card.afternoon {
  background-color: #fff0f6;
}

/* Morning: solid teal-ish background */
.session-mini-card.morning {
  background: #e6f8ff;
}

/* Afternoon: solid pink-ish background */
.session-mini-card.afternoon {
  background: #fff0f6;
}

.btn.btn-primary {
  border: 1px solid rgba(91, 176, 255, 0.65);
  border-radius: 0.95rem;
  background: linear-gradient(
    135deg,
    rgba(91, 176, 255, 0.85),
    rgba(45, 120, 219, 0.75)
  );
  color: rgba(245, 252, 255, 0.95);
  box-shadow: 0 18px 36px rgba(32, 114, 203, 0.35);
  padding: 0.85rem 1rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus {
  transform: translateY(-2px);
  box-shadow: 0 22px 44px rgba(32, 114, 203, 0.45);
  background: linear-gradient(
    135deg,
    rgba(125, 196, 255, 0.95),
    rgba(55, 132, 235, 0.85)
  );
}

/* Normal cancel button style (gray) matching theme */
.btn.btn-cancel {
  border: 1px solid #495057;
  border-radius: 0.95rem;
  background: #495057;
  color: white;
  box-shadow: none;
  padding: 0.75rem 1.75rem;
  min-width: 9.5rem;
  font-weight: 700;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease,
    color 0.18s ease;
}

.btn.btn-cancel:hover,
.btn.btn-cancel:focus {
  /* normal hover: darker gray */
  /*transform: translateY(-1px);*/
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  background: #343a40;
  color: white;
}

.exam-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 1.5rem;
  padding: 1rem 2rem;
  direction: rtl;
  max-width: 90vw;
  margin: 0 auto;
  padding-bottom: 6rem; /* Reduced bottom padding */
}

/* قانون حذف شد - لوگیک معکوس شده در پایین فایل */

@media (max-width: 576px) {
}

@media (max-width: 768px) {
  .exam-cards-container {
    grid-template-columns: 1fr;
    padding: 0 1rem;
  }

  .session-card {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 1rem;
    padding: 1.4rem 1.3rem;
  }

  .session-card .session-info {
    align-items: center;
  }

  .session-card .session-actions {
    width: 100%;
    justify-content: center;
  }

  .session-card .session-logout-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (min-width: 1400px) {
  .exam-cards-container {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    padding: 0 3rem;
  }
}

/* Fixed footer styles */
.fixed-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    140deg,
    rgba(18, 54, 92, 0.12),
    rgba(12, 36, 70, 0.08)
  );
  padding: 0.6rem 0.5rem;
  padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
  font-size: 0.95rem;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);
  box-shadow: 0 -12px 30px rgba(4, 14, 30, 0.15);
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 1) 40%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 1) 40%
  );
}

.fixed-footer .footer-text {
  direction: rtl;
  white-space: nowrap;
  text-align: center;
  color: var(--heading-color);
}

.fixed-footer .footer-clock {
  direction: ltr;
  white-space: nowrap;
  text-align: center;
  color: var(--accent-secondary);
}

/* Use tabular (fixed-width) numbers for the footer clock and spacer so
   the date/time width doesn't jump when seconds change. Vazir supports
   OpenType numeric features; enable tabular figures and zeroing. */
.fixed-footer .footer-clock,
.fixed-footer .footer-spacer {
  /* prefer Vazir (already used globally) and enable tabular numbers */
  font-variant-numeric: tabular-nums;
  -webkit-font-feature-settings: "tnum" 1, "zero" 1;
  -moz-font-feature-settings: "tnum" 1, "zero" 1;
  font-feature-settings: "tnum" 1, "zero" 1;
  /* ensure a monospace-like numeric fallback if font doesn't support tnum */
  font-family: "Vazir", "Noto Nastaliq Urdu", sans-serif;
}

.fixed-footer .footer-spacer {
  display: none;
}

/* When login is visible, keep page fixed (no scroll) and account for footer height */
body.login-active {
  overflow: hidden; /* prevent page scrolling */
  padding-bottom: 0;
  background: linear-gradient(
    135deg,
    #0d1b2a,
    #1b263b
  ); /* solid background for login */
}

body.login-active::before,
body.login-active::after {
  display: none; /* hide glassmorphism layers */
}

body.login-active #loginRow {
  min-height: calc(
    100vh - 54px - env(safe-area-inset-bottom, 0px)
  ); /* fit exactly above fixed footer */
  display: flex;
  align-items: center; /* vertically center the card */
}

.exam-card {
  background: linear-gradient(
    140deg,
    rgba(18, 54, 92, 0.58),
    rgba(12, 36, 70, 0.38)
  );
  border-radius: var(--glass-radius-md);
  box-shadow: 0 24px 50px rgba(9, 24, 45, 0.35);
  padding: 2.1rem 1.75rem 1.7rem 1.75rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease,
    border-color 0.18s ease;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(18px);
}

.exam-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0)
  );
  opacity: 0;
  transition: opacity 0.18s ease;
}

.exam-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 32px 60px rgba(9, 24, 45, 0.42);
}

.exam-card:hover::before {
  opacity: 1;
}

.exam-card.seat-available {
  border-color: rgba(76, 175, 80, 0.55);
}

.exam-card.seat-hidden {
  border-color: rgba(255, 112, 67, 0.55);
}

.exam-card.past {
  opacity: 0.88;
  border-color: rgba(220, 53, 69, 0.5);
}

.coworker-session-card .exam-title {
  text-align: center;
  justify-content: center;
}

.exam-card.past:hover {
  transform: translateY(-5px) scale(1.01);
}

.exam-card.past .exam-meta,
.exam-card.past .exam-countdown,
.exam-card.past .exam-detail {
  display: none !important;
}

/* Active session banner (user info + logout) */
.session-card {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.6rem 1.85rem;
  border-radius: var(--glass-radius-md);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(
    140deg,
    rgba(64, 120, 192, 0.55),
    rgba(32, 56, 118, 0.45)
  );
  box-shadow: 0 24px 52px rgba(9, 24, 45, 0.38);
  backdrop-filter: blur(18px);
  cursor: default;
  margin-bottom: 1rem;
}

.session-info {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.session-meta {
  font-size: 1rem;
  color: var(--accent-secondary);
}

.session-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
}

.session-name {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--heading-color);
}

.session-id {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--heading-color);
}

.session-logout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0.85rem;
  padding: 0.65rem 1.75rem;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.04)
  );
  color: var(--heading-color);
  font-weight: 700;
  box-shadow: 0 20px 44px rgba(7, 18, 35, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  cursor: pointer;
}

.session-logout-btn:hover,
.session-logout-btn:focus {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0.08)
  );
  transform: translateY(-2px);
  box-shadow: 0 26px 52px rgba(7, 18, 35, 0.38);
}

.session-stats-btn {
  border-color: rgba(255, 255, 255, 0.18);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.02)
  );
}

.session-logout-btn:active {
  transform: translateY(0);
  box-shadow: 0 14px 32px rgba(7, 18, 35, 0.32);
}

.session-logout-text {
  pointer-events: none;
}

.session-card .session-logout-btn:focus-visible {
  outline: 2px solid rgba(123, 213, 255, 0.9);
  outline-offset: 3px;
}

.btn-glass-cancel {
  border-radius: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: linear-gradient(
    130deg,
    rgba(18, 32, 64, 0.55),
    rgba(32, 56, 88, 0.35)
  );
  color: rgba(230, 240, 255, 0.92);
  font-weight: 600;
  padding: 0.55rem 1.6rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.btn-glass-cancel:hover,
.btn-glass-cancel:focus {
  background: linear-gradient(
    130deg,
    rgba(36, 64, 112, 0.7),
    rgba(24, 44, 78, 0.55)
  );
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 18px 38px rgba(8, 18, 34, 0.38);
}

.btn-glass-cancel:active {
  transform: translateY(0);
  box-shadow: 0 12px 26px rgba(8, 18, 34, 0.3);
}
.exam-divider {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  margin: 1.5rem 0 0.5rem;
  height: 0;
  position: relative;
}

.exam-divider::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: -1px;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(91, 176, 255, 0.35),
    transparent
  );
}

.exam-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.exam-meta {
  font-size: 1.05rem;
  color: var(--accent-secondary);
  margin-bottom: 1.1rem;
}

.exam-countdown {
  font-size: 0.95rem;
  color: rgba(255, 149, 128, 0.92);
  margin-bottom: 1rem;
  font-weight: 500;
}

.exam-detail {
  font-size: 1rem;
  color: var(--text-color);
  margin-bottom: 0.5rem;
}

.exam-detail.seat-info {
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(123, 213, 255, 0.95);
}

.exam-label {
  font-weight: bold;
  color: rgba(143, 202, 255, 0.96);
  margin-left: 6px;
}

.exam-value {
  color: rgba(230, 242, 255, 0.92);
}

.exam-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
}

.exam-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.exam-item h6 {
  color: var(--heading-color);
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.exam-item p {
  margin-bottom: 0.65rem;
  font-size: 1rem;
  color: var(--text-color);
}

.exam-item strong {
  color: rgba(227, 242, 255, 0.95);
  margin-left: 6px;
}

.form-check-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: 1rem !important;
  flex-direction: row-reverse;
  color: var(--text-color);
}

.form-check-input {
  margin: 0 !important;
  float: none !important;
}

.swal2-popup.swal2-rtl {
  direction: rtl;
  text-align: right;
}

.swal2-popup.swal2-glass {
  width: min(420px, calc(100vw - 32px));
  border-radius: var(--glass-radius-md);
  padding: 1.9rem 1.85rem 1.6rem;
  box-shadow: 0 26px 60px rgba(7, 18, 35, 0.4);
  background: linear-gradient(
    140deg,
    rgba(25, 55, 95, 0.62),
    rgba(12, 32, 60, 0.45)
  );
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(18px);
  overflow: hidden;
  position: relative;
}

.swal2-popup.swal2-glass .swal2-timer-progress-bar-container {
  display: none !important;
}

.swal2-popup.swal2-glass .swal2-countdown {
  position: absolute;
  top: 0.85rem;
  left: 1rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(123, 213, 255, 0.98);
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: center;
  pointer-events: none;
}

.swal2-popup.swal2-glass .swal2-countdown-value {
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  display: inline-block;
  min-width: 2.2ch;
  text-align: center;
  font-weight: 400;
}

.swal2-popup.swal2-glass .swal2-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--heading-color);
}

.swal2-popup.swal2-glass .swal2-html-container,
.swal2-popup.swal2-glass .swal2-content {
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--text-color);
}

.swal2-popup.swal2-glass .swal2-actions {
  margin: 1.75rem 0 0;
}

.swal2-popup.swal2-glass .swal2-confirm {
  border-radius: 0.8rem;
  padding: 0.65rem 2.5rem;
  background: linear-gradient(
    135deg,
    rgba(91, 176, 255, 0.9),
    rgba(45, 120, 219, 0.8)
  ) !important;
  border: 1px solid rgba(91, 176, 255, 0.6) !important;
  box-shadow: 0 18px 38px rgba(32, 114, 203, 0.42) !important;
}

/* Toast-specific tweaks: normal-size text and lighter appearance */
.swal2-container {
  overflow-x: hidden !important;
}
.swal2-container .swal2-toast {
  font-size: 0.98rem;
}
.swal2-popup.swal2-toast.swal2-rtl {
  padding: 0.5rem 0.8rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

/* Prevent SweetAlert from causing horizontal page shift when showing modals/toasts.
   Keep vertical scrollbar reserved and avoid adding body padding. */
body.swal2-shown,
body.swal2-toast-shown {
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

/* Fade up animation for report card */
.fade-in-up {
  animation: fadeInUp 1s ease-out forwards;
  opacity: 0;
  transform: translateY(20px);
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 576px) {
  .card-body {
    padding: 1.5rem;
  }
  .exam-cards-container {
    max-width: 100%;
    padding: 0 1rem 5rem;
  }
}

/* Responsive: stack chart and side pies on narrow screens to avoid layout break */
@media (max-width: 900px) {
  .reports-overview {
    flex-direction: column;
    gap: 8px;
  }
  .reports-side {
    flex-direction: row;
    justify-content: space-around;
    min-width: auto;
    margin-top: 8px;
    gap: 8px;
  }
  .small-pie,
  .mini-pie {
    width: 102px !important;
    height: 102px !important;
  }
  .small-pie-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  /* Release 16:9 wrapper on small screens so Chart.js maintainAspectRatio=false takes effect */
  #reportsChartCard .chart-wrapper {
    padding-top: 0; /* remove the padding-top trick */
    height: auto;
  }
  /* Let the canvas be a normal block element with a controlled height on small screens */
  #reportsChartCard .chart-wrapper canvas {
    position: relative !important;
    width: 100% !important;
    height: 260px !important; /* comfortable default height for narrow viewports */
  }
}

/* (removed legacy rule to avoid conflicting padding adjustments) */

/* Rotating icon animation for edit roles button */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotating-icon {
  animation: rotate 20s linear infinite;
}

/* Logout button icon styles */
#logoutBtn img {
  transition: transform 0.15s ease, opacity 0.15s ease;
}

#logoutBtn:hover img {
  transform: translateY(-2px);
  opacity: 0.85;
}

/* Session stats card content loading state */
#sessionStatsContent {
  transition: opacity 0.3s ease-in, visibility 0.3s ease-in;
}

/* Loading state for observers cards */
.observers-loading {
  opacity: 0;
  visibility: hidden;
}

/* Skeleton Loading Styles (Telegram/WhatsApp style) */
.skeleton-loading {
  width: 100%;
  padding: 1rem 0;
  direction: rtl;
}

.skeleton-proctors-section {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  justify-content: stretch;
  align-items: flex-start;
}

.skeleton-proctor-card {
  flex: 1;
  min-width: 0;
  height: 180px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.08) 100%
  );
  background-size: 200% 100%;
  border-radius: 12px;
  animation: shimmer 1.5s infinite;
  position: relative;
  overflow: hidden;
}

.skeleton-proctor-card::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 16px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

.skeleton-proctor-card::after {
  content: "";
  position: absolute;
  top: 40px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.05) 0%,
    transparent 100%
  );
  border-radius: 8px;
}

.skeleton-chart {
  width: 100%;
  height: 520px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.06) 100%
  );
  background-size: 200% 100%;
  border-radius: 12px;
  animation: shimmer 1.5s infinite;
  position: relative;
  overflow: hidden;
}

.skeleton-chart::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80%;
  background: linear-gradient(
    0deg,
    transparent 0%,
    rgba(255, 255, 255, 0.03) 20%,
    rgba(255, 255, 255, 0.05) 40%,
    rgba(255, 255, 255, 0.03) 60%,
    transparent 80%
  );
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Dark theme skeleton adjustments */
@media (prefers-color-scheme: dark) {
  .skeleton-proctor-card,
  .skeleton-chart {
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(255, 255, 255, 0.09) 50%,
      rgba(255, 255, 255, 0.05) 100%
    );
    background-size: 200% 100%;
  }
}

/* Responsive skeleton for smaller screens */
@media (max-width: 768px) {
  .skeleton-proctors-section {
    flex-direction: column;
  }

  .skeleton-proctor-card {
    height: 120px;
  }

  .skeleton-chart {
    height: 350px;
  }
}

/* Push Notification SweetAlert Styling */
.swal2-popup.swal2-notification-alert .swal2-title,
.swal2-popup.swal2-notification-alert.swal2-notification-title {
  color: #ffc107 !important;
  font-weight: 700;
  font-size: 1.4rem;
}

.swal2-popup.swal2-notification-alert .swal2-html-container,
.swal2-popup.swal2-notification-alert .swal2-notification-body {
  color: #ffffff !important;
  font-size: 1.05rem;
  line-height: 1.9;
}

/* ========================================
   Session Locations Tooltip (مکان‌های جلسه)
   ======================================== */
.session-locations-tooltip {
  position: absolute;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px) scale(0.96);
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.3s;

  /* Glassmorphism style */
  background: linear-gradient(
    145deg,
    rgba(12, 28, 48, 0.95),
    rgba(18, 40, 65, 0.92)
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(100, 180, 255, 0.2);
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5),
    0 8px 25px rgba(60, 166, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);

  min-width: 200px;
  max-width: 550px;
  font-family: "Vazir", sans-serif;
  direction: rtl;
  text-align: justify;
}

.session-locations-tooltip.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0s;
}

/* Arrow pointer (above tooltip) */
.session-locations-tooltip::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 20px;
  width: 14px;
  height: 14px;
  background: linear-gradient(
    135deg,
    rgba(12, 28, 48, 0.95),
    rgba(18, 40, 65, 0.92)
  );
  border-top: 1px solid rgba(100, 180, 255, 0.2);
  border-right: 1px solid rgba(100, 180, 255, 0.2);
  transform: rotate(-45deg);
}

/* Tooltip content - inline flow */
.session-locations-content {
  display: block;
  line-height: 1.8;
  font-size: 0.78rem;
  text-align: justify;
  text-align-last: right;
}

/* Location name with color */
.session-loc-name {
  font-weight: 600;
  transition: text-shadow 0.2s ease;
}

/* Location details (student & proctor count) */
.session-loc-details {
  color: rgba(200, 220, 240, 0.85);
  font-weight: 400;
}

/* Number styling */
.session-loc-num {
  font-weight: 700;
  color: #fbbf24;
  margin: 0 2px;
}

/* Color palette for locations - vibrant colors */
.session-loc-name.color-1 {
  color: #60a5fa;
} /* Blue */
.session-loc-name.color-2 {
  color: #34d399;
} /* Emerald */
.session-loc-name.color-3 {
  color: #f472b6;
} /* Pink */
.session-loc-name.color-4 {
  color: #a78bfa;
} /* Purple */
.session-loc-name.color-5 {
  color: #fbbf24;
} /* Amber */
.session-loc-name.color-6 {
  color: #38bdf8;
} /* Sky */
.session-loc-name.color-7 {
  color: #fb923c;
} /* Orange */
.session-loc-name.color-8 {
  color: #4ade80;
} /* Green */
.session-loc-name.color-9 {
  color: #f87171;
} /* Red */
.session-loc-name.color-10 {
  color: #22d3ee;
} /* Cyan */

/* Empty state */
.session-loc-empty {
  color: rgba(180, 200, 220, 0.7);
  font-style: italic;
  padding: 4px 0;
}