/* Custom App Styles for Istibaq & Tamkeen - Dark Theme */
body {
  background-color: #0b0f19;
  color: #f1f5f9;
}

@layer utilities {
  .animate-bounce-slow {
    animation: bounceSlow 3s ease-in-out infinite;
  }
}

@keyframes bounceSlow {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* User Selection & native feel */
button, nav, .user-select-none {
  user-select: none;
  -webkit-user-select: none;
}

/* Active Scale Feedback */
.active\:scale-98:active {
  transform: scale(0.98);
}

/* Flashcard 3D Perspective Flip */
.flashcard {
  perspective: 1000px;
  min-height: 180px;
}

.flashcard-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  cursor: pointer;
}

.flashcard.flipped .flashcard-inner {
  transform: rotateY(180deg);
}

.flashcard-front, .flashcard-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 1rem;
}

.flashcard-back {
  transform: rotateY(180deg);
}

/* Dark Mode Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #0f172a;
}
::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* Direction safety for options */
[dir="rtl"] .ltr-math {
  direction: ltr;
  unicode-bidi: embed;
}

/* Publisher Chart Bars Animation */
.chart-bar-fill {
  transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1), height 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Roster Table Hover States */
#pubStudentsTableBody tr:hover {
  background-color: rgba(30, 41, 59, 0.5);
}

/* ==============================================================================
   HIGH-PRECISION A4 PRINT STYLES (طباعة التقارير الفردية والعامة بدقة A4)
   ============================================================================== */
@media print {
  @page {
    size: A4 portrait;
    margin: 10mm 12mm 12mm 12mm;
  }

  /* Reset body colors for crisp print legibility */
  html, body {
    background: #ffffff !important;
    color: #0f172a !important;
    font-family: 'Readex Pro', sans-serif !important;
    font-size: 11pt !important;
    line-height: 1.4 !important;
    padding: 0 !important;
    margin: 0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Hide interactive screen UI elements */
  header, nav, main, #studentNameModal, #publisherModal, #studentDetailModal, #aiModal, #contactModal {
    display: none !important;
  }

  /* Show the dedicated print document */
  #printableReportContainer {
    display: block !important;
    width: 100% !important;
    background: #ffffff !important;
    color: #0f172a !important;
    box-sizing: border-box !important;
  }

  /* Print components layout & typography */
  .print-page-break {
    page-break-before: always;
    break-before: page;
  }

  .print-card {
    border: 1.5px solid #cbd5e1 !important;
    background-color: #f8fafc !important;
    border-radius: 8px !important;
    padding: 10px !important;
    page-break-inside: avoid;
  }

  .print-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 10pt !important;
  }

  .print-table th {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
    font-weight: bold !important;
    border: 1px solid #94a3b8 !important;
    padding: 6px 8px !important;
    text-align: right !important;
  }

  .print-table td {
    border: 1px solid #cbd5e1 !important;
    padding: 5px 8px !important;
    color: #1e293b !important;
  }

  .print-table tr:nth-child(even) {
    background-color: #f8fafc !important;
  }

  .print-badge {
    display: inline-block !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 8.5pt !important;
    font-weight: bold !important;
    border: 1px solid #cbd5e1 !important;
  }

  .print-progress-bg {
    background-color: #e2e8f0 !important;
    border-radius: 9999px !important;
    height: 8px !important;
    overflow: hidden !important;
    border: 1px solid #cbd5e1 !important;
  }

  .print-progress-bar {
    height: 100% !important;
    background-color: #3b82f6 !important;
  }
}