/* =======================================================
   RESPONSIVE.CSS — Mobile & Tablet Responsiveness
   Loaded globally via layouts/head.php
   Covers: Admin Panel + Public Pages
   Breakpoints:
     - ≤ 991px  : Tablet / Small Laptop
     - ≤ 767px  : Tablet Portrait / Large Phone
     - ≤ 575px  : Small Phone (iPhone SE, Galaxy A, etc.)
     - ≤ 400px  : Extra Small Phone
   ======================================================= */

/* -------------------------------------------------------
   1. ADMIN PANEL — SIDEBAR & BODY WRAPPER
   ------------------------------------------------------- */

/* Ensure body-wrapper doesn't overflow behind sidebar on mobile */
@media (max-width: 991px) {
  .body-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* Prevent horizontal scroll on admin pages */
  .page-wrapper {
    overflow-x: hidden !important;
  }

  /* Content container padding reduction */
  .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* -------------------------------------------------------
   2. ADMIN PANEL — HEADER
   ------------------------------------------------------- */

@media (max-width: 767px) {
  .app-header .navbar {
    padding: 6px 12px;
  }

  /* Profile dropdown: ensure it doesn't overflow screen */
  .dropdown-menu-end {
    min-width: 260px !important;
    right: 0 !important;
    left: auto !important;
  }
}

/* -------------------------------------------------------
   3. ADMIN PANEL — PAGE HEADERS (h2 + subtext)
   ------------------------------------------------------- */

@media (max-width: 767px) {
  /* Page intro cards with gradient bg */
  .card .card-body h2,
  .card .card-body h3 {
    font-size: 1.35rem !important;
  }

  .card .card-body p.text-white-50 {
    font-size: 0.8rem !important;
  }
}

/* -------------------------------------------------------
   4. ADMIN PANEL — BUTTONS & ACTION GROUPS
   ------------------------------------------------------- */

@media (max-width: 575px) {
  /* Button groups in page headers: stack vertically */
  .d-flex.gap-2.flex-wrap {
    gap: 6px !important;
  }

  /* Action buttons: full width on very small screens */
  .btn-sm {
    font-size: 0.78rem !important;
    padding: 0.3rem 0.6rem !important;
  }

  /* Prevent buttons from overflowing in flex rows */
  .d-flex.align-items-center.gap-2 > .btn {
    flex-shrink: 0;
  }
}

/* -------------------------------------------------------
   5. ADMIN PANEL — CARDS & STAT CARDS
   ------------------------------------------------------- */

@media (max-width: 767px) {
  /* Stat cards: reduce padding */
  .card.info-card .card-body {
    padding: 1rem !important;
  }

  /* Dashboard stat number font */
  .card h3.fw-bold,
  .card h2.fw-bold {
    font-size: 1.5rem !important;
  }

  /* Card footer with action buttons */
  .card-footer {
    padding: 0.5rem 0.75rem !important;
  }
}

/* -------------------------------------------------------
   6. ADMIN PANEL — FORMS
   ------------------------------------------------------- */

@media (max-width: 575px) {
  /* Form rows: stack columns on small screens */
  .row.g-3 > .col-md-6,
  .row.g-3 > .col-md-4,
  .row.g-3 > .col-md-8 {
    width: 100%;
  }

  /* Select and input sizing */
  .form-select,
  .form-control {
    font-size: 0.875rem !important;
  }

  /* Input group buttons */
  .input-group .btn {
    padding: 0.4rem 0.75rem !important;
    font-size: 0.825rem !important;
  }
}

/* -------------------------------------------------------
   7. ADMIN PANEL — TABLES (already table-responsive, 
      just ensure text is readable and headers truncate)
   ------------------------------------------------------- */

@media (max-width: 767px) {
  /* Slightly smaller table text */
  .table th,
  .table td {
    font-size: 0.8rem !important;
    padding: 0.5rem 0.6rem !important;
    white-space: nowrap;
  }

  /* Badge size in tables */
  .table .badge {
    font-size: 0.7rem !important;
  }
}

/* -------------------------------------------------------
   8. ADMIN PANEL — PAGINATION
   ------------------------------------------------------- */

@media (max-width: 575px) {
  .pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
  }

  .pagination .page-link {
    padding: 0.3rem 0.6rem !important;
    font-size: 0.8rem !important;
  }
}

/* -------------------------------------------------------
   9. ADMIN PANEL — MODALS
   ------------------------------------------------------- */

@media (max-width: 575px) {
  .modal-dialog {
    margin: 0.5rem !important;
  }

  .modal-body {
    padding: 0.75rem !important;
  }

  .modal-footer {
    padding: 0.5rem 0.75rem !important;
    flex-wrap: wrap;
    gap: 6px;
  }

  .modal-footer .btn {
    flex: 1;
    min-width: 100px;
  }
}

/* -------------------------------------------------------
   10. ADMIN PANEL — MEMBER CARD DETAIL PAGE
   ------------------------------------------------------- */

@media (max-width: 767px) {
  /* Card template: ensure card image fits screen */
  .card-template-wrapper {
    max-width: 100% !important;
  }

  /* Action buttons below card: stack on mobile */
  .d-flex.gap-3.flex-wrap {
    flex-direction: column !important;
  }
}

/* -------------------------------------------------------
   11. PUBLIC PAGES — BOOK CATALOG (book.php)
   ------------------------------------------------------- */

@media (max-width: 575px) {
  /* Search form: ensure proper sizing */
  .col-md-5 .input-group {
    width: 100%;
  }

  /* Catalog book card text: smaller */
  .catalog-book-card .card-body {
    padding: 0.5rem !important;
  }
}

/* -------------------------------------------------------
   12. PUBLIC PAGES — BOOK DETAIL (book_detail.php)
   ------------------------------------------------------- */

@media (max-width: 575px) {
  /* Book detail: cover image container min-height */
  .col-12.col-md-4.col-lg-3 .position-relative {
    min-height: 220px !important;
  }
}

/* -------------------------------------------------------
   13. PUBLIC PAGES — VISITOR / BUKU TAMU
   ------------------------------------------------------- */

@media (max-width: 767px) {
  /* Header section: stack logo + title */
  .visitor-kiosk-card {
    border-radius: 14px !important;
  }

  /* Clock font: smaller on mobile */
  .visitor-clock {
    font-size: 1.8rem !important;
  }
}

@media (max-width: 575px) {
  /* Back button + title row: stack */
  .row.align-items-center.mb-4 .col-md-7 .d-flex.align-items-center.gap-3 {
    flex-wrap: wrap;
  }
}

/* -------------------------------------------------------
   14. GENERAL — PREVENT HORIZONTAL OVERFLOW GLOBALLY
   ------------------------------------------------------- */

@media (max-width: 767px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Remove any accidental fixed widths that cause overflow */
  .container-fluid,
  .container {
    max-width: 100% !important;
    overflow-x: hidden;
  }

  /* Images: never overflow container */
  img {
    max-width: 100%;
    height: auto;
  }
}

/* -------------------------------------------------------
   15. GENERAL — TYPOGRAPHY SCALING
   ------------------------------------------------------- */

@media (max-width: 575px) {
  /* Headings: scale down slightly */
  h1 { font-size: 1.5rem !important; }
  h2 { font-size: 1.3rem !important; }
  h3 { font-size: 1.1rem !important; }
  h4 { font-size: 1rem !important; }
  h5 { font-size: 0.95rem !important; }
}

/* -------------------------------------------------------
   16. UTILITY — SCROLLABLE HORIZONTAL WRAPPERS
   ------------------------------------------------------- */

/* Anywhere data is dense in a row, allow horizontal scroll */
.overflow-x-mobile {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* -------------------------------------------------------
   17. ADMIN PANEL — SEARCH BOOK / MEMBER SEARCH PAGES
       (loans/search, returns/search, etc.)
   ------------------------------------------------------- */

@media (max-width: 575px) {
  /* Search result cards: reduce padding */
  .card.rounded-4 .card-body {
    padding: 0.875rem !important;
  }

  /* Result item: stack avatar + text */
  .d-flex.align-items-center.gap-3 {
    gap: 10px !important;
  }
}