/* ====================================================
   RESPONSIVE & ELECTRON DESKTOP APP STYLES
   Comprehensive Mobile + Desktop App Design
   ==================================================== */

/* ===== ELECTRON DESKTOP APP STYLES ===== */

body.electron-app {
  user-select: none;
  overflow-y: overlay;
}

/* Allow selection in content areas */
body.electron-app input,
body.electron-app textarea,
body.electron-app .selectable-text,
body.electron-app p,
body.electron-app h1, body.electron-app h2,
body.electron-app h3, body.electron-app h4,
body.electron-app h5, body.electron-app h6,
body.electron-app td, body.electron-app th,
body.electron-app li, body.electron-app span,
body.electron-app div, body.electron-app label,
body.electron-app .exam-text, body.electron-app .question-text {
  user-select: text;
}

/* Hide top bar in desktop app */
body.electron-app .top-bar {
  display: none !important;
}

/* Desktop App Custom Scrollbar */
body.electron-app::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

body.electron-app::-webkit-scrollbar-track {
  background: transparent;
}

body.electron-app::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.4);
  border-radius: 4px;
}

body.electron-app::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.6);
}

/* ===== SIDEBAR NAVIGATION (Desktop App) ===== */
body.electron-app {
  padding-left: 250px;
}

body.electron-app .main-navbar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 250px;
  border-bottom: none;
  border-right: 1px solid var(--border);
  padding: 0;
  z-index: 1000;
  overflow-y: auto;
  overflow-x: hidden;
  background: white;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

body.electron-app .main-navbar .container {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  height: 100%;
  padding: 0;
  max-width: none;
  display: flex;
}

/* Sidebar Brand */
body.electron-app .navbar-brand {
  padding: 1.25rem 1.25rem 1rem;
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  width: 100%;
  border-bottom: 1px solid var(--border);
  -webkit-app-region: drag;
}

body.electron-app .navbar-brand a {
  -webkit-app-region: no-drag;
}

/* Sidebar Menu */
body.electron-app .navbar-menu {
  flex-direction: column;
  width: 100%;
  gap: 2px;
  display: flex !important;
  padding: 0.5rem 0.75rem;
  flex: 1;
}

body.electron-app .nav-link {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius);
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.88rem;
  transition: all var(--transition-fast);
  gap: 0.6rem;
  background: transparent;
}

body.electron-app .nav-link:hover {
  background: var(--primary-subtle);
  color: var(--primary);
}

body.electron-app .nav-link.active {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 600;
}

body.electron-app .nav-link::after {
  display: none;
}

body.electron-app .mobile-menu-toggle {
  display: none !important;
}

/* Sidebar User Section (Bottom) */
body.electron-app .nav-actions {
  margin-top: auto;
  width: 100%;
  padding: 0.75rem;
  border-top: 1px solid var(--border);
}

body.electron-app .user-dropdown,
body.electron-app .user-btn {
  width: 100%;
}

body.electron-app .user-btn {
  justify-content: flex-start;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.55rem 0.85rem;
  font-size: 0.85rem;
}

body.electron-app .user-dropdown-content {
  bottom: 100%;
  top: auto;
  left: 0;
  width: 100%;
  margin-bottom: 0.4rem;
  border-radius: var(--radius-lg);
}

/* Desktop App Footer Adjustments */
body.electron-app footer {
  display: none !important;
}

/* Hide "Anasayfa" link in Electron sidebar */
body.electron-app .nav-link[href="/"] {
  display: none !important;
}

/* Hide homepage hero, public page elements in Electron */
body.electron-app .hero-slider,
body.electron-app .hero-section {
  display: none !important;
}

/* Hide nav-actions-mobile in desktop app */
body.electron-app .nav-actions-mobile {
  display: none !important;
}

/* Show nav-actions-desktop in sidebar mode */
body.electron-app .nav-actions-desktop {
  display: flex;
}

/* ===== HAMBURGER MENU TOGGLE ===== */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  font-size: 1.25rem;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.35rem 0.5rem;
  margin-left: auto;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  line-height: 1;
}

.mobile-menu-toggle:hover {
  background: var(--bg-inset);
  color: var(--primary);
  border-color: var(--primary);
}


/* ================================================================
   COMPREHENSIVE MOBILE RESPONSIVE
   Multi-Resolution Breakpoints:
   - 1024px  (Tablet)
   - 768px   (Mobile)
   - 480px   (Small Mobile)
   - 360px   (Ultra-Small / SE)
   - 1400px+ (Large Screens)
   - Landscape, Safe Area, Print, Accessibility
   ================================================================ */

/* === NAV ACTIONS MOBILE/DESKTOP SEPARATION === */
.nav-actions-mobile {
  display: none;
  list-style: none;
}

.nav-actions-desktop {
  display: flex;
}

/* Unread badge */
.unread-badge {
  background: #ef4444;
  color: white;
  padding: 2px 6px;
  border-radius: 50%;
  font-size: 0.7rem;
  vertical-align: top;
  margin-left: 2px;
  min-width: 18px;
  text-align: center;
  line-height: 1.3;
}


/* === TABLET (max-width: 1024px) === */
@media (max-width: 1024px) {
  .container {
    padding: 0 1rem;
  }

  /* Table horizontal scroll */
  .dashboard-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
  }

  .dashboard-table {
    min-width: 700px;
  }

  /* Grid layouts stack */
  .admin-layout {
    grid-template-columns: 1fr;
  }

  /* Course grid 2 columns */
  .course-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
  }

  /* Hero adjustments */
  .hero-slider {
    height: 450px;
  }

  .hero-content h1 {
    font-size: 2.5rem;
  }

  /* Home content grid - reduce minmax for tablets */
  .container > div[style*="minmax(320px"] {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  }

  /* Achievements - 2 columns on tablet */
  div[style*="repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }

  /* Login card */
  .container[style*="max-width: 500px"] {
    max-width: 460px !important;
  }
}


/* === MOBILE (max-width: 768px) === */
@media (max-width: 768px) {

  /* --- 1. TOP BAR --- */
  .top-bar {
    font-size: 0.72rem;
    padding: 0.3rem 0;
  }

  .top-bar .container {
    flex-direction: column;
    gap: 0.2rem;
    text-align: center;
  }

  .top-bar .contact-info span {
    margin-left: 0 !important;
  }

  .top-bar .contact-info span + span {
    margin-left: 10px !important;
  }


  /* --- 2. NAVBAR & HAMBURGER --- */
  .main-navbar {
    padding: 0;
  }

  .main-navbar .container {
    height: 56px;
    padding-right: 3.5rem;
    flex-wrap: nowrap;
  }

  .navbar-brand {
    font-size: 1.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 65%;
  }

  /* Hide desktop nav-actions, show mobile version */
  .nav-actions-desktop {
    display: none !important;
  }

  .nav-actions-mobile {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
  }

  /* Hamburger */
  .mobile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    padding: 0.45rem 0.55rem;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1050;
    min-width: 44px;
    min-height: 44px;
  }

  /* Mobile Dropdown Menu */
  .navbar-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    padding: 0.75rem;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    display: none;
    flex-direction: column;
    gap: 2px;
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .navbar-menu.active {
    display: flex;
  }

  .nav-link {
    padding: 0.75rem 0.85rem;
    border-radius: var(--radius);
    background: var(--bg-inset);
    border: 1px solid transparent;
    font-size: 0.92rem;
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .nav-link:hover,
  .nav-link.active {
    background: var(--primary-subtle);
    color: var(--primary);
    border-color: rgba(5, 150, 105, 0.1);
  }

  /* Nav Actions inside mobile menu */
  .nav-actions-mobile .nav-actions {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    display: flex;
  }

  /* Login/Apply buttons in mobile menu - full width, stacked */
  .nav-actions-mobile .nav-login-btn,
  .nav-actions-mobile .nav-apply-btn {
    width: 100%;
    padding: 0.75rem 1.25rem !important;
    font-size: 0.95rem;
    min-height: 48px;
    margin-left: 0 !important;
    text-align: center;
    justify-content: center;
    border-radius: var(--radius);
  }

  .nav-actions-mobile .nav-login-btn {
    order: 1;
  }

  .nav-actions-mobile .nav-apply-btn {
    order: 2;
  }

  /* User dropdown in mobile */
  .nav-actions-mobile .user-dropdown,
  .nav-actions-mobile .user-btn {
    width: 100%;
  }

  .nav-actions-mobile .user-btn {
    justify-content: flex-start;
    min-height: 48px;
    padding: 0.65rem 0.85rem;
    background: var(--bg-inset);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  .nav-actions-mobile .user-dropdown-content {
    position: relative;
    top: auto;
    right: auto;
    margin-top: 0.35rem;
    width: 100%;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
  }


  /* --- 3. GRIDS & LAYOUT STACKING --- */
  .dashboard-grid,
  .admin-layout,
  .grid-container,
  .stats-grid {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }

  .flex-row,
  .d-flex,
  .row {
    flex-direction: column;
  }

  /* Force inline grid/flex to stack (home page grids) */
  .container > div[style*="display: flex"],
  .container > div[style*="display:flex"],
  .hero-content > div[style*="display: flex"],
  .hero-content > div[style*="display:flex"] {
    flex-direction: column !important;
    align-items: center !important;
  }

  .container > div[style*="grid-template-columns"],
  .container > section > div[style*="grid-template-columns"],
  div[style*="grid-template-columns: repeat(auto-fit"],
  div[style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
  }

  .admin-sidebar-container {
    flex-direction: column;
  }


  /* --- 4. HERO SECTION --- */
  .hero-slider {
    height: auto;
    min-height: 380px;
  }

  .hero-content {
    padding: 2rem 1.25rem;
    max-width: 100%;
  }

  .hero-content h1 {
    font-size: 1.75rem;
    line-height: 1.2;
  }

  .hero-content p {
    font-size: 0.92rem;
    margin-bottom: 1.25rem;
  }

  /* Hero buttons - stack vertically */
  .hero-content div[style*="display: flex"] .btn,
  .hero-content div[style*="display:flex"] .btn {
    width: 100% !important;
    max-width: 320px;
    padding: 0.75rem 1.5rem !important;
    font-size: 0.95rem !important;
    min-height: 48px;
  }


  /* --- 5. HOME PAGE SPECIFICS --- */
  /* Content section padding */
  section.container[style*="padding: 5rem"] {
    padding: 2.5rem 1rem !important;
  }

  section.container[style*="padding: 2rem"] {
    padding: 1.5rem 1rem !important;
    margin-bottom: 2rem !important;
  }

  /* Content grid minmax override */
  div[style*="minmax(320px"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* Program title */
  h2[style*="font-size: 2.5rem"] {
    font-size: 1.75rem !important;
    margin-bottom: 2rem !important;
  }

  /* Card images */
  div[style*="height: 220px"][style*="background-image"] {
    height: 180px !important;
  }

  /* Card content padding */
  .card > div[style*="padding: 2rem"] {
    padding: 1.25rem !important;
  }

  /* Achievements section */
  div[style*="padding: 4rem 0"] {
    padding: 2.5rem 0 !important;
  }

  div[style*="repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  div[style*="repeat(4, 1fr)"] > div {
    padding: 1.25rem !important;
  }

  div[style*="repeat(4, 1fr)"] > div > div[style*="font-size: 3rem"] {
    font-size: 2rem !important;
    margin-bottom: 0.5rem !important;
  }

  div[style*="repeat(4, 1fr)"] > div > div[style*="font-size: 2.5rem"] {
    font-size: 1.75rem !important;
  }

  /* Sample content placeholder */
  div[style*="min-height: 300px"][style*="dashed"] {
    min-height: 200px !important;
  }


  /* --- 6. BUTTONS --- */
  .btn,
  .btn-primary,
  .btn-outline,
  .btn-danger {
    width: auto;
    min-width: 100px;
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
    display: inline-flex;
    justify-content: center;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
  }

  /* Action buttons: show only icon on mobile */
  .btn .btn-text {
    display: none;
  }

  .btn:has(.btn-text) {
    min-width: 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
  }

  .btn:has(.btn-text) i {
    margin: 0;
    font-size: 1rem;
  }

  form button[type="submit"],
  .modal-content .btn,
  .btn-block {
    width: 100%;
  }

  .header-actions .btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.82rem;
  }

  .result-actions {
    flex-direction: column;
  }

  .result-actions .btn {
    width: 100%;
  }


  /* --- 7. INPUTS --- */
  .admin-input,
  .input,
  select,
  textarea,
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="date"],
  input[type="url"] {
    font-size: 16px; /* Prevents iOS zoom */
    padding: 0.7rem 0.85rem;
    height: auto;
    min-height: 44px;
    border-radius: var(--radius);
  }

  .search-container {
    width: 100%;
  }


  /* --- 8. CARDS --- */
  .card,
  .admin-card {
    padding: 1.25rem;
    border-radius: var(--radius);
  }

  .card h2,
  .admin-card h2 {
    font-size: 1.15rem;
  }

  .stat-value {
    font-size: 1.5rem;
  }


  /* --- 9. LOGIN PAGE --- */
  .container[style*="max-width: 500px"] {
    max-width: 100% !important;
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
    padding: 0 1rem !important;
  }

  .container[style*="max-width: 500px"] .card {
    padding: 1.75rem !important;
  }

  .container[style*="max-width: 500px"] .card input {
    font-size: 16px !important;
    padding: 0.85rem !important;
    min-height: 44px;
  }

  .container[style*="max-width: 500px"] .card button[type="submit"] {
    padding: 0.85rem !important;
    font-size: 1rem !important;
    min-height: 48px;
  }

  /* Login heading */
  .card h2[style*="font-size: 1.8rem"],
  .card h2[style*="font-size: 2rem"] {
    font-size: 1.5rem !important;
    margin-bottom: 0.75rem !important;
  }


  /* --- 10. COURSE CARDS --- */
  .course-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .course-thumbnail {
    height: 160px;
  }

  .course-body {
    padding: 1rem;
  }

  .course-title {
    font-size: 1rem;
  }

  .course-meta {
    font-size: 0.78rem;
  }


  /* --- 11. TABLES --- */
  .dashboard-table-container {
    border-radius: var(--radius);
    margin: 0 -0.25rem;
  }

  .dashboard-table {
    min-width: 600px;
    font-size: 0.82rem;
  }

  .dashboard-table th,
  .dashboard-table td {
    padding: 0.65rem 0.85rem;
  }


  /* --- 12. EXAM --- */
  .exam-container {
    padding: 0.75rem;
  }

  .exam-header-sticky {
    flex-direction: column;
    text-align: center;
    padding: 1rem;
    top: 56px;
    gap: 0.75rem;
  }

  .exam-title {
    font-size: 1.05rem;
  }

  .exam-timer {
    width: 100%;
    justify-content: center;
    font-size: 1rem;
    position: relative;
    top: auto;
    right: auto;
  }

  .question-card {
    padding: 1.25rem;
    border-radius: var(--radius);
  }

  .question-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .question-number {
    width: 36px;
    height: 36px;
    font-size: 0.88rem;
  }

  .question-text {
    font-size: 0.95rem;
    margin-bottom: 1rem;
  }

  .option-label {
    padding: 0.65rem 0.85rem;
    font-size: 0.88rem;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .option-radio {
    width: 18px;
    height: 18px;
    margin-right: 0.65rem;
  }

  .exam-submit-btn {
    width: 100%;
    justify-content: center;
    padding: 0.85rem 1.25rem;
    min-height: 48px;
  }

  .exam-paper-container {
    margin: 0.75rem;
    padding: 1.25rem;
    min-height: auto;
    border-radius: var(--radius);
  }


  /* --- 13. RESULT PAGE --- */
  .result-container {
    padding: 2rem 1rem;
  }

  .result-title {
    font-size: 1.5rem;
  }

  .result-subtitle {
    font-size: 0.9rem;
  }

  .result-icon {
    font-size: 56px;
  }

  .score-card,
  .result-score-card {
    padding: 1.25rem;
  }

  .score-value,
  .result-score-value {
    font-size: 2.25rem;
  }


  /* --- 14. MODALS --- */
  .modal-content {
    width: 95%;
    padding: 1.5rem;
    margin: 0 auto;
    border-radius: var(--radius);
  }

  .modal-title {
    font-size: 1.05rem;
  }

  .modal-message {
    font-size: 0.88rem;
  }

  /* SweetAlert2 mobile fix */
  .swal2-popup {
    width: 92% !important;
    padding: 1.5rem !important;
    font-size: 0.92rem !important;
  }

  .swal2-title {
    font-size: 1.2rem !important;
  }

  .swal2-html-container {
    font-size: 0.9rem !important;
  }


  /* --- 15. CALENDAR --- */
  .calendar-container {
    padding: 0.85rem;
  }

  .calendar-day {
    font-size: 0.82rem;
  }

  .calendar-weekday {
    font-size: 0.72rem;
  }


  /* --- 16. WIZARD --- */
  .wizard-container {
    margin: 1.5rem auto;
    padding: 0 0.75rem;
  }

  .wizard-question {
    font-size: 1.1rem;
    margin-bottom: 1.25rem;
  }

  .option-card {
    padding: 1rem;
    font-size: 0.92rem;
    gap: 0.65rem;
    min-height: 48px;
  }


  /* --- 17. APPLY PAGE --- */
  .apply-container {
    grid-template-columns: 1fr;
    min-height: auto;
    border-radius: var(--radius) !important;
    margin: 1rem;
  }

  .apply-left {
    padding: 2rem 1.5rem;
    min-height: 160px;
  }

  .apply-left h2 {
    font-size: 1.5rem !important;
  }

  .apply-right {
    padding: 1.5rem;
  }

  .floating-label-group {
    margin-bottom: 1rem;
  }

  .floating-input {
    font-size: 16px;
    padding: 0.75rem;
    min-height: 44px;
  }

  .apply-right .btn {
    width: 100%;
    min-height: 48px;
    font-size: 1rem;
  }


  /* --- 18. FOOTER --- */
  footer {
    padding: 2.5rem 0 !important;
    margin-top: 2rem !important;
  }

  footer .container {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    text-align: center;
  }

  footer .container > div {
    padding: 0 1rem;
  }

  footer h4 {
    margin-bottom: 1rem !important;
  }

  /* Footer bottom bar */
  footer .container + .container {
    margin-top: 2rem !important;
    padding-top: 1.5rem !important;
    font-size: 0.82rem !important;
  }


  /* --- 19. BADGES --- */
  .badge-case {
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    gap: 0.65rem;
    padding: 0.75rem;
  }

  .badge-item {
    width: 48px;
    height: 48px;
    font-size: 1.15rem;
  }


  /* --- 20. ENROLLMENT MANAGER --- */
  .selected-student-header {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }

  .student-info {
    flex-direction: column;
    text-align: center;
  }

  .enrollment-card {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }


  /* --- 21. ADMIN HEADER --- */
  .admin-header h1 {
    font-size: 1.5rem;
  }

  .admin-header {
    margin-bottom: 1.5rem;
  }

  .admin-card {
    max-width: 100%;
  }


  /* --- 22. PROGRESS --- */
  .progress-metro-line {
    margin: 1.5rem 0;
    padding: 0 0.5rem;
  }

  .metro-stop {
    width: 26px;
    height: 26px;
    font-size: 0.72rem;
  }


  /* --- 23. TEACHER PAGES --- */
  .teacher-sidebar {
    width: 100% !important;
    position: relative !important;
    height: auto !important;
  }

  .teacher-main {
    margin-left: 0 !important;
  }

  /* Teacher layout grid - stack sidebar + main vertically */
  div[style*="grid-template-columns: 250px"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Teacher sidebar: horizontal compact on mobile */
  div[style*="grid-template-columns: 250px"] > div:first-child {
    padding: 1rem !important;
  }

  div[style*="grid-template-columns: 250px"] > div:first-child > div[style*="margin-bottom: 2rem"] {
    margin-bottom: 1rem !important;
  }

  div[style*="grid-template-columns: 250px"] > div:first-child > div[style*="margin-bottom: 2rem"] > div[style*="width: 80px"] {
    width: 50px !important;
    height: 50px !important;
    font-size: 1.3rem !important;
    margin-bottom: 0.5rem !important;
  }

  /* Teacher dashboard stat cards - 2 columns */
  .stat-card {
    padding: 1rem !important;
  }

  div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }

  /* Teacher stat cards - 3 columns → 1 */
  div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  /* Student detail header - stack vertically */
  div[style*="display: flex"][style*="align-items: center"][style*="gap: 2rem"] {
    flex-direction: column !important;
    text-align: center !important;
    gap: 1rem !important;
    padding: 1.25rem !important;
  }

  div[style*="display: flex"][style*="align-items: center"][style*="gap: 2rem"] > div[style*="margin-left: auto"] {
    margin-left: 0 !important;
  }

  /* Teacher schedule: FullCalendar adjustments */
  #calendar {
    min-height: 400px !important;
  }

  .fc-toolbar-title {
    font-size: 1rem !important;
  }

  .fc-button {
    font-size: 0.8rem !important;
    padding: 0.3rem 0.5rem !important;
  }

  .fc-toolbar.fc-header-toolbar {
    flex-wrap: wrap !important;
    gap: 0.5rem;
  }

  /* Container padding on mobile for teacher pages */
  .container[style*="padding: 4rem 2rem"] {
    padding: 1.5rem 1rem !important;
  }

  /* Profile/Certificate */
  .profile-header {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  .certificate-container {
    padding: 1.5rem !important;
    margin: 1rem;
  }

  /* --- 23b. BOOKING & SCHEDULE PAGES --- */
  .booking-grid {
    grid-template-columns: 1fr !important;
  }

  .booking-sidebar {
    order: -1;
  }

  .calendar-legend {
    gap: 0.5rem !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.75rem;
  }

  /* Calendar legend: wrap into 2 columns */
  .calendar-legend {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
  }

  .slot-card {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem !important;
  }

  .my-booking-card {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem !important;
  }

  .view-toggle {
    justify-content: center;
  }

  .slot-detail-content {
    margin: 1rem;
    max-width: calc(100vw - 2rem) !important;
  }

  /* Booking cards - stack content vertically */
  div[style*="display: flex"][style*="align-items: center"][style*="justify-content: space-between"][style*="flex-wrap: wrap"] {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: center;
    gap: 0.75rem !important;
    padding: 1rem !important;
  }

  /* Booking filter tabs - scroll horizontal */
  div[style*="display: flex"][style*="gap: 0.5rem"][style*="margin-bottom: 1.5rem"][style*="flex-wrap: wrap"] {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
  }

  div[style*="display: flex"][style*="gap: 0.5rem"][style*="margin-bottom: 1.5rem"][style*="flex-wrap: wrap"] .btn {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Schedule page header flex */
  div[style*="display: flex"][style*="justify-content: space-between"][style*="flex-wrap: wrap"][style*="gap: 1rem"] h1 {
    font-size: 1.25rem !important;
  }


  /* --- 24. PRICING PAGE --- */
  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
  }

  .pricing-card {
    max-width: 100%;
  }


  /* --- 25. CONTACT/ABOUT --- */
  .contact-grid,
  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
  }


  /* --- 26. MESSAGES --- */
  .chat-container {
    height: calc(100vh - 200px);
    margin: 0;
    border-radius: 0;
  }

  .message-bubble {
    max-width: 85%;
  }

  .chat-input-area {
    padding: 0.75rem;
  }

  .chat-input-area input {
    font-size: 16px;
  }
}


/* === SMALL MOBILE (max-width: 480px) === */
@media (max-width: 480px) {

  body {
    font-size: 14px;
  }

  .container {
    padding: 0 0.75rem;
  }

  /* Navbar */
  .main-navbar .container {
    height: 50px;
    padding-right: 3rem;
  }

  .navbar-brand {
    font-size: 1rem;
    max-width: 60%;
  }

  .navbar-brand i[style*="font-size: 2rem"] {
    font-size: 1.5rem !important;
  }

  /* Mobile menu refinements */
  .navbar-menu {
    padding: 0.5rem;
  }

  .nav-link {
    padding: 0.65rem 0.75rem;
    font-size: 0.88rem;
  }

  .nav-actions-mobile .nav-login-btn,
  .nav-actions-mobile .nav-apply-btn {
    padding: 0.7rem 1rem !important;
    font-size: 0.9rem;
  }

  /* Top bar hide on very small */
  .top-bar {
    display: none;
  }

  /* Hero */
  .hero-slider {
    height: auto;
    min-height: 320px;
  }

  .hero-content {
    padding: 1.5rem 1rem;
  }

  .hero-content h1 {
    font-size: 1.4rem;
  }

  .hero-content p {
    font-size: 0.85rem;
    margin-bottom: 1rem;
  }

  .hero-content div[style*="display: flex"] .btn,
  .hero-content div[style*="display:flex"] .btn {
    padding: 0.65rem 1rem !important;
    font-size: 0.88rem !important;
    min-height: 44px;
  }

  /* Home page */
  h2[style*="font-size: 2.5rem"] {
    font-size: 1.4rem !important;
  }

  section.container[style*="padding: 5rem"] {
    padding: 2rem 0.75rem !important;
  }

  div[style*="height: 220px"][style*="background-image"] {
    height: 150px !important;
  }

  div[style*="repeat(4, 1fr)"] > div > div[style*="font-size: 3rem"] {
    font-size: 1.75rem !important;
  }

  div[style*="repeat(4, 1fr)"] > div > div[style*="font-size: 2.5rem"] {
    font-size: 1.5rem !important;
  }

  /* Cards */
  .card,
  .admin-card {
    padding: 1rem;
    border-radius: var(--radius-sm);
  }

  .card > div[style*="padding: 2rem"] {
    padding: 1rem !important;
  }

  /* Login page */
  .container[style*="max-width: 500px"] {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    padding: 0 0.75rem !important;
  }

  .container[style*="max-width: 500px"] .card {
    padding: 1.5rem !important;
  }

  /* Exam */
  .exam-header-sticky {
    padding: 0.75rem;
    top: 50px;
    border-radius: var(--radius);
  }

  .exam-title {
    font-size: 0.9rem;
  }

  .exam-timer {
    font-size: 0.95rem;
    padding: 0.4rem 0.75rem;
  }

  .question-card {
    padding: 0.85rem;
  }

  .question-number {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }

  .question-text {
    font-size: 0.9rem;
  }

  .option-label {
    padding: 0.55rem 0.65rem;
    font-size: 0.85rem;
  }

  .gap-fill-input {
    padding: 0.6rem;
    font-size: 0.88rem;
  }

  /* Course */
  .course-thumbnail {
    height: 120px;
  }

  .course-body {
    padding: 0.85rem;
  }

  .course-title {
    font-size: 0.95rem;
  }

  /* Result */
  .result-container {
    padding: 1.5rem 0.75rem;
  }

  .result-title {
    font-size: 1.25rem;
  }

  .result-icon {
    font-size: 48px;
    margin-bottom: 0.75rem;
  }

  .score-card,
  .result-score-card {
    padding: 1rem;
  }

  .score-value,
  .result-score-value {
    font-size: 2rem;
  }

  /* Tables */
  .dashboard-table {
    min-width: 500px;
    font-size: 0.78rem;
  }

  .dashboard-table th,
  .dashboard-table td {
    padding: 0.55rem 0.65rem;
  }

  /* Wizard */
  .wizard-question {
    font-size: 1rem;
  }

  .option-card {
    padding: 0.75rem;
    font-size: 0.85rem;
    border-radius: var(--radius);
  }

  .option-marker {
    width: 18px;
    height: 18px;
  }

  /* Apply */
  .apply-container {
    margin: 0.5rem;
    border-radius: var(--radius) !important;
  }

  .apply-left {
    padding: 1.5rem 1rem;
    min-height: 130px;
  }

  .apply-left h2 {
    font-size: 1.3rem !important;
  }

  .apply-right {
    padding: 1.25rem;
  }

  /* Footer */
  footer {
    padding: 2rem 0 !important;
    margin-top: 1.5rem !important;
  }

  footer h4 {
    font-size: 1rem !important;
  }

  /* Modal */
  .modal-content {
    width: 96%;
    padding: 1.25rem;
  }

  .swal2-popup {
    width: 95% !important;
    padding: 1.25rem !important;
  }

  /* Calendar */
  .calendar-grid {
    gap: 0.2rem;
  }

  .calendar-day {
    font-size: 0.75rem;
  }

  .calendar-weekday {
    font-size: 0.68rem;
  }

  /* Badges */
  .badge-case {
    grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
    gap: 0.5rem;
    padding: 0.6rem;
  }

  .badge-item {
    width: 42px;
    height: 42px;
    font-size: 1rem;
  }

  /* Messages */
  .chat-container {
    height: calc(100vh - 160px);
  }

  .message-bubble {
    max-width: 90%;
    font-size: 0.88rem;
  }

  /* Teacher panel: hide sidebar avatar/name on small screens, show compact */
  div[style*="grid-template-columns: 250px"] > div:first-child > div[style*="margin-bottom: 2rem"] {
    display: none !important;
  }

  /* Teacher sidebar nav: horizontal scroll on small mobile */
  div[style*="grid-template-columns: 250px"] > div:first-child nav {
    flex-direction: row !important;
    overflow-x: auto;
    gap: 0.25rem !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
  }

  div[style*="grid-template-columns: 250px"] > div:first-child nav a {
    white-space: nowrap;
    font-size: 0.8rem !important;
    padding: 0.5rem 0.75rem !important;
    min-width: fit-content;
  }

  /* Teacher stat cards: font size */
  .stat-card div[style*="font-size: 2rem"] {
    font-size: 1.5rem !important;
  }

  /* FullCalendar compact */
  #calendar {
    min-height: 350px !important;
  }

  .fc-toolbar.fc-header-toolbar {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .fc-toolbar-title {
    font-size: 0.9rem !important;
  }

  .fc-button {
    font-size: 0.75rem !important;
    padding: 0.2rem 0.4rem !important;
  }
}


/* === ULTRA-SMALL MOBILE (max-width: 360px) === */
@media (max-width: 360px) {

  body {
    font-size: 13px;
  }

  .container {
    padding: 0 0.5rem;
  }

  /* Navbar */
  .main-navbar .container {
    height: 48px;
    padding-right: 2.75rem;
  }

  .navbar-brand {
    font-size: 0.92rem;
    max-width: 55%;
  }

  .mobile-menu-toggle {
    font-size: 1.1rem;
    padding: 0.35rem 0.45rem;
    min-width: 40px;
    min-height: 40px;
  }

  /* Menu items tighter */
  .nav-link {
    padding: 0.55rem 0.65rem;
    font-size: 0.85rem;
    min-height: 40px;
  }

  .nav-actions-mobile .nav-login-btn,
  .nav-actions-mobile .nav-apply-btn {
    padding: 0.6rem 0.85rem !important;
    font-size: 0.85rem;
    min-height: 44px;
  }

  /* Hero */
  .hero-slider {
    min-height: 280px;
  }

  .hero-content h1 {
    font-size: 1.2rem;
  }

  .hero-content p {
    font-size: 0.8rem;
    margin-bottom: 0.75rem;
  }

  .hero-content div[style*="display: flex"] .btn,
  .hero-content div[style*="display:flex"] .btn {
    padding: 0.55rem 0.85rem !important;
    font-size: 0.82rem !important;
  }

  /* Home achievements - single column */
  div[style*="repeat(4, 1fr)"],
  div[style*="repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  div[style*="repeat(4, 1fr)"] > div > div[style*="font-size: 2.5rem"],
  div[style*="repeat(4, 1fr)"] > div > div[style*="font-size: 1.75rem"],
  div[style*="repeat(4, 1fr)"] > div > div[style*="font-size: 1.5rem"] {
    font-size: 1.35rem !important;
  }

  h2[style*="font-size: 2.5rem"] {
    font-size: 1.25rem !important;
  }

  /* Login */
  .container[style*="max-width: 500px"] {
    margin-top: 1rem !important;
    padding: 0 0.5rem !important;
  }

  .container[style*="max-width: 500px"] .card {
    padding: 1.25rem !important;
  }

  /* Cards */
  .card,
  .admin-card {
    padding: 0.85rem;
  }

  .card > div[style*="padding: 2rem"],
  .card > div[style*="padding: 1.25rem"] {
    padding: 0.85rem !important;
  }

  div[style*="height: 220px"][style*="background-image"],
  div[style*="height: 180px"][style*="background-image"],
  div[style*="height: 150px"][style*="background-image"] {
    height: 120px !important;
  }

  /* Buttons */
  .btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.82rem;
    min-height: 40px;
  }

  /* Exam */
  .question-card {
    padding: 0.75rem;
  }

  .question-number {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
  }

  .option-label {
    padding: 0.5rem 0.55rem;
    font-size: 0.82rem;
  }

  /* Apply */
  .apply-container {
    margin: 0.25rem;
  }

  .apply-left {
    padding: 1.25rem 0.85rem;
    min-height: 100px;
  }

  .apply-left h2 {
    font-size: 1.15rem !important;
  }

  .apply-right {
    padding: 1rem;
  }

  /* Wizard */
  .wizard-container {
    padding: 0 0.5rem;
  }

  .wizard-question {
    font-size: 0.92rem;
  }

  .option-card {
    padding: 0.65rem;
    font-size: 0.82rem;
  }

  /* Result */
  .result-title {
    font-size: 1.1rem;
  }

  .score-value,
  .result-score-value {
    font-size: 1.75rem;
  }

  /* Footer */
  footer {
    padding: 1.5rem 0 !important;
  }

  footer .container {
    gap: 1.5rem !important;
  }
}


/* === LARGE SCREENS (min-width: 1400px) === */
@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }

  .course-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }

  .hero-slider {
    height: 600px;
  }

  .hero-content h1 {
    font-size: 3.5rem;
  }

  .hero-content p {
    font-size: 1.25rem;
  }
}


/* === SAFE AREA (Notched Phones) === */
@supports (padding: max(0px)) {
  body {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }

  .main-navbar {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }

  .navbar-menu {
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
  }

  footer {
    padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
  }

  /* Bottom buttons safety padding */
  .exam-submit-btn,
  .apply-right .btn,
  .result-actions {
    padding-bottom: max(0.85rem, env(safe-area-inset-bottom));
  }
}


/* === TOUCH DEVICE OPTIMIZATIONS === */
@media (hover: none) and (pointer: coarse) {
  /* Larger tap targets */
  .btn {
    min-height: 44px;
    min-width: 44px;
  }

  .nav-link {
    min-height: 44px;
  }

  .option-label,
  .option-card {
    min-height: 48px;
  }

  /* Remove hover effects that feel odd on touch */
  .btn:hover {
    transform: none;
  }

  .card:hover,
  .course-card:hover {
    transform: none;
  }

  .option-card:hover {
    transform: none;
  }

  /* Larger dropdown hit area */
  .user-btn {
    min-height: 44px;
  }

  .user-dropdown-content a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0.65rem 0.85rem;
  }

  /* Better scrolling */
  .navbar-menu {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .dashboard-table-container {
    -webkit-overflow-scrolling: touch;
  }

  /* Disable text selection on interactive elements */
  .btn,
  .nav-link,
  .option-card,
  .user-btn,
  .mobile-menu-toggle {
    -webkit-user-select: none;
    user-select: none;
  }
}


/* === PRINT STYLES === */
@media print {
  .top-bar,
  .main-navbar,
  .mobile-menu-toggle,
  .nav-actions,
  .nav-actions-desktop,
  .nav-actions-mobile,
  footer,
  .exam-timer {
    display: none !important;
  }

  body {
    background: white !important;
    padding: 0 !important;
  }

  body.electron-app {
    padding-left: 0 !important;
  }

  .card, .admin-card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    break-inside: avoid;
  }

  .question-card {
    break-inside: avoid;
  }
}


/* === ACCESSIBILITY: REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* === ACCESSIBILITY: HIGH CONTRAST === */
@media (forced-colors: active) {
  .btn {
    border: 2px solid currentColor;
  }

  .nav-link.active {
    border: 2px solid currentColor;
  }

  .option-card.selected {
    border: 3px solid currentColor;
  }
}


/* === DARK MODE HINT (for future) === */
@media (prefers-color-scheme: dark) {
  /* Ready for dark mode implementation */
}


/* === LANDSCAPE PHONE === */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-slider {
    height: 250px;
    min-height: 220px;
  }

  .hero-content h1 {
    font-size: 1.5rem;
  }

  .hero-content p {
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
  }

  .main-navbar .container {
    height: 48px;
  }

  .exam-header-sticky {
    top: 48px;
    padding: 0.65rem 1rem;
  }

  /* Hero buttons in landscape - row layout OK */
  .hero-content div[style*="display: flex"] {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }

  .hero-content div[style*="display: flex"] .btn {
    width: auto !important;
    max-width: none;
  }

  /* Navbar menu side-by-side in landscape */
  .navbar-menu {
    max-height: 60vh;
  }
}


/* === TABLET LANDSCAPE (1024px - 1200px) === */
@media (min-width: 769px) and (max-width: 1200px) {
  /* Ensure 2-column achievements on tablet */
  div[style*="repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Content grid 2 columns */
  div[style*="minmax(320px"] {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  }
}