/* Technophiles - Custom styles (supplements Tailwind) */

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: rgba(57, 255, 20, 0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #39FF14; }

/* Selection */
::selection { background: rgba(57, 255, 20, 0.2); color: #39FF14; }

/* Focus rings */
:focus-visible { outline: 2px solid #39FF14; outline-offset: 2px; }

/* Line clamp utilities */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Animations */
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes neonPulse { 0%, 100% { box-shadow: 0 0 5px #39FF14, 0 0 10px rgba(57,255,20,0.5); } 50% { box-shadow: 0 0 10px #39FF14, 0 0 30px rgba(57,255,20,0.8), 0 0 60px rgba(57,255,20,0.3); } }
@keyframes scanline { 0% { background-position: 0 0; } 100% { background-position: 0 100vh; } }

.fade-in { animation: fadeIn 0.5s ease forwards; }
.neon-pulse-box { animation: neonPulse 2s ease-in-out infinite; }

/* Gradient text */
.gradient-text { background: linear-gradient(135deg, #39FF14, #00ffaa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* Glassmorphism card variant */
.glass-card { background: rgba(10, 10, 10, 0.8); backdrop-filter: blur(10px); border: 1px solid rgba(57, 255, 20, 0.1); }

/* Table hover */
tr:hover td { background: rgba(57, 255, 20, 0.02); }

/* Form elements */
select option { background: #0a0a0a; color: #e0e0e0; }
input[type="checkbox"]:checked { accent-color: #39FF14; }
input[type="radio"]:checked { accent-color: #39FF14; }

/* Badge variants */
.badge-purple { background: rgba(147, 51, 234, 0.15); color: #a78bfa; border: 1px solid rgba(147, 51, 234, 0.3); }
.badge-blue { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }
.badge-orange { background: rgba(249, 115, 22, 0.15); color: #fb923c; border: 1px solid rgba(249, 115, 22, 0.3); }

/* Neon divider */
.neon-divider { height: 1px; background: linear-gradient(90deg, transparent, #39FF14, transparent); }

/* Loading spinner */
.spinner { width: 20px; height: 20px; border: 2px solid rgba(57, 255, 20, 0.2); border-top-color: #39FF14; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Mobile nav active */
@media (max-width: 768px) {
  .sidebar-link { font-size: 16px; padding: 12px 16px; }
}

/* Print styles */
@media print {
  nav, footer, .btn-neon, .btn-neon-solid { display: none !important; }
  body { background: white; color: black; }
  .card { border: 1px solid #ccc; }
  .neon-text { color: #000; text-shadow: none; }
}

/* ─── RESPONSIVE UTILITIES ─────────────────────────────────────────────────── */

/* Prevent horizontal overflow on all pages */
html, body { overflow-x: hidden; }
main { padding-top: 64px; } /* Account for fixed navbar */

/* ─── Mobile-first grid helpers ──────────────────────────────────────────────*/
@media (max-width: 640px) {
  /* Stack all 2-col grids on phone */
  .grid-cols-2 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .grid-cols-3 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Make text smaller on phone */
  .font-display { letter-spacing: 0.05em; }
  h1.font-display { font-size: clamp(1.4rem, 6vw, 2.5rem) !important; }

  /* Card padding on mobile */
  .card { border-radius: 6px; }
  .card.p-8 { padding: 1.25rem !important; }
  .card.p-6 { padding: 1rem !important; }

  /* Table scroll on mobile */
  .overflow-x-auto { -webkit-overflow-scrolling: touch; }
  table { min-width: 500px; }

  /* Full-width buttons on mobile */
  .btn-neon, .btn-neon-solid { font-size: 0.8rem; padding: 8px 14px; }

  /* Hide non-essential columns in tables */
  td:nth-child(3), th:nth-child(3) { display: none; }
  td:nth-child(4), th:nth-child(4) { display: none; }
}

@media (max-width: 768px) {
  /* Tablet: adjust layout */
  .max-w-7xl { padding-left: 1rem; padding-right: 1rem; }

  /* Dashboard stat grids */
  .grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Sidebar layouts become single column */
  .lg\\:col-span-2 { grid-column: span 1 !important; }

  /* Compact aside navigation */
  .sidebar-link { padding: 8px 12px; font-size: 14px; }
}

/* ─── Table responsive wrapper ───────────────────────────────────────────────*/
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
}

/* ─── Forms responsive ───────────────────────────────────────────────────────*/
@media (max-width: 640px) {
  .grid.grid-cols-2 { grid-template-columns: 1fr; }
  .grid.grid-cols-3 { grid-template-columns: 1fr; }
}

/* ─── Dashboard cards ────────────────────────────────────────────────────────*/
@media (max-width: 480px) {
  .dashboard-stats { grid-template-columns: 1fr 1fr; }
  .stat-card { padding: 0.75rem; }
  .stat-card .text-3xl { font-size: 1.5rem; }
}

/* ─── Calendar responsive ────────────────────────────────────────────────────*/
@media (max-width: 640px) {
  .fc-toolbar { flex-direction: column; gap: 8px; }
  .fc-toolbar-chunk { display: flex; justify-content: center; }
  .fc-daygrid-event { font-size: 9px; }
  .fc-button { font-size: 10px !important; padding: 4px 8px !important; }
}

/* ─── Leaderboard podium responsive ─────────────────────────────────────────*/
@media (max-width: 480px) {
  .podium-container { flex-wrap: wrap; justify-content: center; gap: 8px; }
}

/* ─── Modal responsive ───────────────────────────────────────────────────────*/
@media (max-width: 640px) {
  .modal-container { padding: 1rem; align-items: flex-end; }
  .modal-box { border-radius: 12px 12px 0 0; max-height: 90vh; overflow-y: auto; }
}

/* ─── Course learn sidebar ───────────────────────────────────────────────────*/
@media (max-width: 1024px) {
  .course-sidebar { display: none; }
  .course-main { width: 100%; }
}

/* ─── Fix input/select on iOS ────────────────────────────────────────────────*/
input, select, textarea {
  -webkit-appearance: none;
  appearance: none;
  font-size: 16px; /* Prevents iOS zoom on focus */
}

/* ─── Touch-friendly tap targets ─────────────────────────────────────────────*/
@media (max-width: 768px) {
  a, button { min-height: 36px; }
  .btn-neon, .btn-neon-solid { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
}

/* ─── Hero section responsive ────────────────────────────────────────────────*/
@media (max-width: 640px) {
  .hero-section { min-height: auto; padding: 6rem 1rem 4rem; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
}

/* ─── Navbar height compensation ─────────────────────────────────────────────*/
.pt-navbar { padding-top: 4rem; } /* 64px */
@media (max-width: 640px) {
  .pt-navbar { padding-top: 4rem; }
}

/* ─── Prevent text overflow ──────────────────────────────────────────────────*/
.truncate-responsive {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}
@media (max-width: 640px) {
  .truncate-responsive { max-width: 120px; }
}

/* ─── PWA safe area (iPhone notch) ──────────────────────────────────────────*/
@supports (padding: max(0px)) {
  nav { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
  main { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
}