/* ============================================
   Quenza LMS - Responsive Design Enhancements
   ============================================ */

/* --- Touch-Friendly Targets --- */
.btn, .pc-link, .list-group-item-action,
.dropdown-item, .nav-link, .page-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* --- Responsive Tables --- */
.table-responsive-custom {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ============================
   Mobile (max-width: 767px)
   ============================ */
@media (max-width: 767.98px) {
  /* Sidebar overlay backdrop */
  .pc-sidebar.mob-sidebar-active ~ .pc-container::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1024;
  }

  /* Stack form buttons vertically */
  .form-actions,
  .btn-group-mobile {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .form-actions .btn,
  .btn-group-mobile .btn {
    width: 100%;
  }

  /* Full-width form inputs */
  .pc-container .form-control,
  .pc-container .form-select {
    width: 100% !important;
  }

  /* Cards: single column */
  .row .col-md-4,
  .row .col-md-6,
  .row .col-lg-4,
  .row .col-lg-3 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Responsive table: horizontal scroll */
  .table-responsive,
  .card-body > .table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Hide secondary table columns on mobile */
  .table .d-mobile-none {
    display: none !important;
  }

  /* Page header: stack breadcrumb and title */
  .page-header .row {
    flex-direction: column;
  }
  .page-header .breadcrumb {
    margin-bottom: 0.5rem;
  }

  /* Stat cards: reduce padding */
  .card .card-body {
    padding: 1rem;
  }

  /* Modal: nearly full width */
  .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100% - 1rem);
  }

  /* Profile: center avatar */
  .user-avtar {
    margin: 0 auto;
  }

  /* Navigation search: hide on very small screens */
  .header-search {
    display: none !important;
  }
}

/* ============================
   Tablet (768px - 1023px)
   ============================ */
@media (min-width: 768px) and (max-width: 1023.98px) {
  /* Two-column layout for cards */
  .row .col-lg-4,
  .row .col-lg-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* Responsive table */
  .table-responsive,
  .card-body > .table {
    display: block;
    width: 100%;
    overflow-x: auto;
  }
}

/* ============================
   Desktop (min-width: 1024px)
   ============================ */
@media (min-width: 1024px) {
  /* Ensure sidebar state persistence works smoothly */
  .pc-sidebar {
    transition: width 0.3s ease;
  }
}

/* --- Utility: active state feedback for touch --- */
.btn:active,
.pc-link:active,
.list-group-item-action:active {
  transform: scale(0.97);
  transition: transform 0.1s ease;
}

/* --- Images responsive --- */
.card-img-top,
.img-fluid,
.material-preview img {
  max-width: 100%;
  height: auto;
}

/* --- Scrollable code blocks on mobile --- */
pre, code {
  overflow-x: auto;
  max-width: 100%;
}