/* ================================================================
   TS-12 Attendance System — Mobile Responsive CSS  v2
   Targets: Star Admin2 template + custom TS12 components
   ================================================================ */

/* ── 1. Hard reset for horizontal overflow ───────────────────── */
html, body { overflow-x: hidden; max-width: 100vw; }
*, *::before, *::after { box-sizing: border-box; }
img, svg, canvas, iframe { max-width: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ── 2. Page wrapper — never wider than screen ───────────────── */
.container-scroller,
.container-fluid,
.page-body-wrapper { max-width: 100vw; overflow-x: hidden; }

/* ── 3. NAVBAR ───────────────────────────────────────────────── */
@media (max-width: 991px) {
  .navbar.default-layout { height: 60px; min-height: 60px; }
  .navbar-brand-wrapper { width: 70px !important; min-width: 70px; }
  .navbar-brand-wrapper .brand-logo { display: none !important; }
  .navbar-brand-wrapper .brand-logo-mini { display: inline-block !important; }
  .navbar-menu-wrapper { width: calc(100vw - 70px) !important; padding-right: 0.5rem; }
  .navbar-nav .nav-item.d-none.d-lg-block { display: none !important; }
  .navbar-toggler.navbar-toggler-right {
    display: flex !important; align-items: center;
    margin-left: auto; padding: 8px 10px; border: none;
    background: transparent; font-size: 1.4rem; color: #4B49AC; cursor: pointer;
  }
  .navbar-toggler:not(.navbar-toggler-right) { display: none !important; }
  .page-body-wrapper { padding-top: 60px !important; }
}

/* ── 4. SIDEBAR DRAWER ───────────────────────────────────────── */
@media (max-width: 991px) {
  .sidebar.sidebar-offcanvas {
    position: fixed !important;
    top: 0 !important; left: 0 !important; bottom: 0 !important;
    width: 260px !important; height: 100vh !important;
    z-index: 1100 !important;
    transform: translateX(-260px) !important;
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    box-shadow: 4px 0 20px rgba(0,0,0,.18);
  }
  .sidebar.sidebar-offcanvas.ts12-open {
    transform: translateX(0) !important;
  }
  .main-panel {
    width: 100% !important;
    min-height: calc(100vh - 60px);
    margin-left: 0 !important;
  }
  body.ts12-sidebar-open::after {
    content: '';
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1090;
  }
}

/* ── 5. Content wrapper ──────────────────────────────────────── */
@media (max-width: 767px) {
  .content-wrapper { padding: 1rem 0.65rem !important; }
}

/* ── 6. Bootstrap grid ───────────────────────────────────────── */
@media (max-width: 767px) {
  [class*="col-lg-"], [class*="col-md-"] {
    width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important;
  }
}

/* ── 7. TABLES ───────────────────────────────────────────────── */
.table-responsive {
  width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.table-responsive > table { min-width: 540px; }
@media (max-width: 767px) {
  .table th, .table td { padding: 0.4rem 0.55rem; font-size: 0.78rem; white-space: nowrap; }
  .table .btn, .table .btn-sm { padding: 2px 7px; font-size: 0.7rem; }
}

/* ── 8. CARDS ────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .card { margin-bottom: 0.85rem; border-radius: 10px; }
  .card-body { padding: 0.9rem 0.75rem; }
  .card-title { font-size: 0.9rem !important; }
}

/* ── 9. FORMS — prevent iOS auto-zoom (needs ≥16px) ─────────── */
@media (max-width: 767px) {
  input, textarea, select, .form-control, .form-select { font-size: 16px !important; }
  .form-label { font-size: 0.73rem; }
  .input-group[style*="max-width"] { max-width: 100% !important; width: 100% !important; }
}

/* ── 10. TOOLBAR ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  .d-flex.justify-content-between.align-items-center.mb-3.flex-wrap,
  .d-flex.align-items-center.justify-content-between.mb-3.flex-wrap {
    flex-direction: column !important; align-items: stretch !important; gap: 0.5rem;
  }
}

/* ── 11. FILTER BAR ──────────────────────────────────────────── */
.filter-bar { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: flex-end; }
@media (max-width: 767px) {
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar > div { min-width: unset !important; width: 100% !important; }
  .filter-bar .btn { width: 100%; }
  #centerFilterWrap, #preceptorFilterWrap, #districtFilterWrap,
  #ageFilterWrap, #professionalFilterWrap, #abhyasiFilterWrap,
  #regularFilterWrap, #evtAbhyasiFilterWrap, #evtAbhyasiPickWrap {
    min-width: unset !important; width: 100% !important;
  }
}

/* ── 12. MODALS ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  .modal-dialog { margin: 0.4rem auto; max-width: calc(100vw - 0.8rem) !important; }
  .modal-content { border-radius: 14px; }
  .modal-body { padding: 0.9rem 0.85rem; }
  .modal-header { padding: 0.85rem; }
  .modal-footer { padding: 0.65rem 0.85rem; flex-wrap: wrap; gap: 0.4rem; }
  .modal-footer .btn { flex: 1 1 auto; min-width: 80px; }
  .modal-body .col-md-4, .modal-body .col-md-6,
  .modal-body .col-md-3, .modal-body .col-md-8 {
    width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important;
  }
}

/* ── 13. DASHBOARD CHARTS ────────────────────────────────────── */
@media (max-width: 767px) {
  canvas { max-height: 200px !important; }
  [style*="min-width:200px"] { min-width: 0 !important; width: 100% !important; }
  #dashRow1, #dashRow2, #dashRow3 { row-gap: 0 !important; }
  .status-summary-chart-wrapper { height: 64px !important; }
  #preceptorSittingList { max-height: 200px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* ── 14. EXPORT DROPDOWN ─────────────────────────────────────── */
@media (max-width: 767px) {
  .btn-wrapper { display: flex !important; flex-wrap: wrap; gap: 0.4rem; }
  .btn-wrapper .btn { flex: 1 1 auto; font-size: 0.78rem; }
  .dropdown-menu { min-width: 0 !important; width: calc(100vw - 1rem) !important; }
}

/* ── 15. REPORT CARDS ────────────────────────────────────────── */
@media (max-width: 767px) {
  .report-grid { grid-template-columns: 1fr 1fr !important; gap: 0.55rem !important; }
  .report-card { padding: 0.7rem 0.65rem !important; border-radius: 10px !important; }
  .rc-icon { width: 32px !important; height: 32px !important; font-size: 0.9rem !important; }
  .report-card .rc-title { font-size: 0.75rem !important; }
  .report-card .rc-sub { display: none !important; }
}
@media (max-width: 400px) { .report-grid { grid-template-columns: 1fr !important; } }

/* ── 16. SITTING / ATTENDANCE TABLE ──────────────────────────── */
@media (max-width: 767px) {
  .preceptor-sel { min-width: 120px !important; font-size: 0.78rem !important; }
  .inline-date.date-sel { min-width: 120px !important; }
}

/* ── 17. SEARCHABLE DROPDOWN — bottom sheet on mobile ────────── */
@media (max-width: 767px) {
  .sd-wrap { position: static !important; }
  .sd-panel {
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: 100% !important; max-width: 100% !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -6px 32px rgba(0,0,0,.2) !important;
    z-index: 2100 !important;
    max-height: 60vh;
    display: none; flex-direction: column; overflow: hidden;
  }
  .sd-wrap.open .sd-panel { display: flex !important; }
  .sd-list { flex: 1; overflow-y: auto !important; -webkit-overflow-scrolling: touch; max-height: none !important; }
  .sd-search-box { padding: 12px 14px 8px; flex-shrink: 0; }
  .sd-search-box input { font-size: 16px !important; padding: 9px 12px; }
  .sd-option { padding: 11px 16px; font-size: 0.88rem; min-height: 44px; display: flex; align-items: center; }
  .sd-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 2099; display: none; }
  .sd-backdrop.visible { display: block; }
}

/* ── 18. FOOTER ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  .footer { text-align: center !important; font-size: 0.7rem !important; padding: 0.6rem !important; }
  .footer .d-sm-flex { flex-direction: column !important; align-items: center !important; gap: 0.2rem; }
}

/* ── 19. LOGIN ───────────────────────────────────────────────── */
@media (max-width: 480px) {
  .page { padding: 0.75rem; }
  .c-body { padding: 1.3rem 1rem 1.2rem; }
  .c-header { padding: 1.3rem 1rem 1.1rem; }
}

/* ── 20. TOUCH TARGETS ───────────────────────────────────────── */
@media (max-width: 991px) {
  .btn, .dropdown-item, .nav-link { min-height: 38px; }
  .form-check-input { width: 1.15em !important; height: 1.15em !important; }
}

/* ── 21. SAFE AREA (iPhone notch) ────────────────────────────── */
@supports (padding: env(safe-area-inset-top)) {
  .navbar.fixed-top { padding-top: max(0px, env(safe-area-inset-top)); }
  .sidebar.sidebar-offcanvas { padding-top: max(0px, env(safe-area-inset-top)) !important; }
  .sd-panel { padding-bottom: max(0.5rem, env(safe-area-inset-bottom)) !important; }
}

/* ================================================================
   TS-12 Mobile CSS  v3 — targeted fixes for all pages
   ================================================================ */

/* ── 22. DASHBOARD — export dropdown & filter dropdowns ─────────── */
@media (max-width: 767px) {
  /* Export PDF dropdown */
  .dropdown-menu[style*="min-width:270px"],
  .dropdown-menu[style*="min-width: 270px"] {
    min-width: calc(100vw - 2rem) !important;
    left: 0 !important; right: auto !important;
  }
  /* Center/month filter dropdowns on dashboard */
  .dropdown-menu[style*="min-width:200px"],
  .dropdown-menu[style*="min-width: 200px"] {
    min-width: calc(100vw - 2rem) !important;
  }
  /* Preceptor sittings table — progress column */
  #preceptorTable td[style*="min-width:180px"],
  #preceptorTable td[style*="min-width: 180px"] { min-width: 120px !important; }
  /* Dashboard legend items that get min-width:120px injected via JS */
  #activitiesLegend > div,
  #attendChart-legend > div { min-width: 0 !important; padding: 6px 8px !important; font-size: .72rem !important; }
  /* Sitting/attendance chart legend */
  #sittingThisYearLabel, #sittingLastYearLabel { font-size: .72rem !important; }
  /* Preceptor sittings card — hide Share column on very small screens */
  #preceptorTable th:last-child,
  #preceptorTable td:last-child { display: none; }
}
@media (max-width: 480px) {
  /* On tiny screens also hide Abhyasis count column */
  #preceptorTable th:nth-child(3),
  #preceptorTable td:nth-child(3) { display: none; }
}

/* ── 23. FILTER CARDS — col-md columns → full width on mobile ───── */
@media (max-width: 767px) {
  .filter-card .row.g-3 > [class*="col-md"],
  .filter-card .row.g-3 > [class*="col-lg"] {
    width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important;
  }
  /* Search + button group in filter-card */
  .filter-card .input-group[style*="max-width"] {
    max-width: 100% !important; width: 100% !important;
  }
  /* Info/how-to alert in sitting page */
  .filter-card .alert { font-size: .74rem !important; }
}

/* ── 24. ATTENDANCE & SITTING — horizontal scroll tables ────────── */
@media (max-width: 767px) {
  /* Attendance grid: names column sticky */
  .attendance-table-wrap, #attendanceTableWrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Sticky abhyasi name column */
  table.attendance-table th:nth-child(2),
  table.attendance-table td:nth-child(2) {
    position: sticky; left: 0; background: #fff; z-index: 2;
    box-shadow: 2px 0 4px rgba(0,0,0,.06);
  }
  /* Sitting table: freeze name column */
  #sittingBody tr td:nth-child(3),
  #sittingBody tr th:nth-child(3) {
    position: sticky; left: 0; background: #fff; z-index: 1;
    box-shadow: 2px 0 3px rgba(0,0,0,.05);
  }
  /* Preceptor + date inputs in sitting table */
  .preceptor-sel { width: 130px !important; min-width: 0 !important; font-size: .76rem !important; }
  .date-sel.inline-date { width: 130px !important; min-width: 0 !important; font-size: .76rem !important; }
}

/* ── 25. PRECEPTOR–ABHYASI PAGE ──────────────────────────────────── */
@media (max-width: 767px) {
  /* Search + bulk action toolbar → stack vertically */
  .prec-toolbar, #precToolbar {
    flex-direction: column !important; align-items: stretch !important; gap: .5rem !important;
  }
  .prec-toolbar .search-box,
  .prec-toolbar select,
  .prec-toolbar .prec-sel,
  .prec-toolbar .btn { width: 100% !important; min-width: 0 !important; }
  /* assignment table: freeze name col */
  #precTbody tr td:nth-child(2) {
    position: sticky; left: 0; background: #fff; z-index: 1;
    box-shadow: 2px 0 3px rgba(0,0,0,.05); max-width: 130px; white-space: normal;
  }
  /* prec-sel dropdown in each row */
  .prec-sel { min-width: 0 !important; width: 140px !important; font-size: .76rem !important; }
}

/* ── 26. REPORTS PAGE ────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Filter panel → vertical stack */
  #filterPanel {
    flex-wrap: wrap !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .5rem !important;
  }
  #filterPanel > * { width: 100% !important; min-width: 0 !important; }
  #filterPanel .btn { width: 100% !important; }
  /* Date range row */
  #dateFilterWrap { flex-direction: column !important; gap: .4rem !important; }
  #dateFilterWrap input { width: 100% !important; }
  /* Event report td with max-width:340px */
  #evtReportTbody td[style*="max-width:340px"],
  #evtReportTbody td[style*="max-width: 340px"] { max-width: 200px !important; }
  /* Preceptor assign report progress bar column */
  #paTbody td { font-size: .76rem !important; padding: .35rem .4rem !important; }
  /* Run report button */
  #runBtn { width: 100% !important; }
}

/* ── 27. EVENTS PAGE ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Image upload preview area */
  .event-img-preview, #imgPreviewArea { flex-wrap: wrap !important; gap: .5rem !important; }
  /* Abhyasi add button rows */
  .evt-abhyasi-row { flex-direction: column !important; gap: .4rem !important; }
  /* Event type badge */
  .event-type-badge { font-size: .7rem !important; padding: 2px 7px !important; }
}

/* ── 28. VOLUNTEER WORK ABHYASI — filter toolbar ────────────────── */
@media (max-width: 767px) {
  /* Search input groups */
  .input-group[style*="max-width:300px"],
  .input-group[style*="max-width:320px"],
  .input-group[style*="max-width:280px"] {
    max-width: 100% !important; width: 100% !important;
  }
  /* Toolbar above DataTables */
  .dataTables_wrapper .d-flex.justify-content-between { flex-direction: column !important; gap: .5rem !important; }
  .dataTables_length, .dataTables_filter { width: 100% !important; }
  .dataTables_filter input { width: 100% !important; }
}

/* ── 29. ABHYASI STATUS PAGE ─────────────────────────────────────── */
@media (max-width: 767px) {
  /* Stats bar → 2-column grid */
  #statsBar, .stats-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: .5rem !important;
  }
  /* Bulk action buttons → full width */
  #bulkActions, .bulk-actions {
    flex-direction: column !important; gap: .4rem !important;
  }
  #bulkActions .btn, .bulk-actions .btn { width: 100% !important; }
}

/* ── 30. HORIZONTAL SCROLL TABLES — generic helper ──────────────── */
/* Any table inside a card that isn't already .table-responsive */
@media (max-width: 767px) {
  .card .table-responsive,
  .card-body .table-responsive { border-radius: 6px; }
  /* Make sure no table forces page width */
  .card table { max-width: 100%; }
}

/* ── 31. BUTTON GROUPS — wrap on mobile ─────────────────────────── */
@media (max-width: 480px) {
  .btn-group-mobile-wrap {
    display: flex !important; flex-wrap: wrap !important; gap: .35rem !important;
  }
  .btn-group-mobile-wrap .btn { flex: 1 1 auto !important; font-size: .75rem !important; }
}

/* ── 32. SEARCHABLE DROPDOWN — label fix on mobile ──────────────── */
@media (max-width: 767px) {
  .sd-input-row { min-height: 44px; }
  /* Prevent label overflow */
  .sd-display { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: calc(100% - 24px); }
}

/* ── 33. INDIVIDUAL SITTING CARD (dashboard) ────────────────────── */
@media (max-width: 767px) {
  /* Wrap header */
  #preceptorTable .d-flex.align-items-center.gap-2 { flex-wrap: wrap !important; }
  /* Reduce avatar size */
  #preceptorTbody .d-flex > div:first-child { width: 30px !important; height: 30px !important; }
}

/* ── 34. PRINT — ensure tables don't overflow on print ──────────── */
@media print {
  .sidebar, .navbar, .no-print, .filter-card { display: none !important; }
  .main-panel { margin-left: 0 !important; width: 100% !important; }
  .content-wrapper { padding: 0 !important; }
  table { font-size: .72rem !important; }
  .card { box-shadow: none !important; border: 1px solid #ddd !important; }
}

/* ── 35. VERY SMALL SCREENS (<360px) ────────────────────────────── */
@media (max-width: 360px) {
  .content-wrapper { padding: .65rem .4rem !important; }
  .card-body { padding: .75rem .6rem !important; }
  .btn-sm { font-size: .7rem !important; padding: 3px 7px !important; }
  .table th, .table td { font-size: .72rem !important; padding: .3rem .35rem !important; }
  /* Navbar brand area */
  .navbar-brand-wrapper { width: 54px !important; min-width: 54px !important; }
}

/* ================================================================
   TS-12 Pagination  — shared across all table pages
   ================================================================ */
.ts12-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .6rem 0 .2rem;
  margin-top: .5rem;
  border-top: 1px solid #f0f0f8;
  user-select: none;
}
.ts12-pagination .pg-info {
  font-size: .78rem;
  color: #888;
  white-space: nowrap;
}
.ts12-pagination .pg-info strong { color: #4B49AC; }
.ts12-pagination .pg-btns {
  display: flex;
  align-items: center;
  gap: .3rem;
  flex-wrap: wrap;
}
.ts12-pagination .pg-btn {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1.5px solid #e0e0f5;
  border-radius: 8px;
  background: #fff;
  color: #4B49AC;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.ts12-pagination .pg-btn:hover:not(:disabled) {
  background: #f0eeff;
  border-color: #4B49AC;
}
.ts12-pagination .pg-btn.active {
  background: #4B49AC;
  border-color: #4B49AC;
  color: #fff;
}
.ts12-pagination .pg-btn:disabled {
  opacity: .38;
  cursor: not-allowed;
}
.ts12-pagination .pg-dots {
  font-size: .8rem;
  color: #aaa;
  padding: 0 4px;
}
@media (max-width: 767px) {
  .ts12-pagination { justify-content: center; }
  .ts12-pagination .pg-info { width: 100%; text-align: center; }
  .ts12-pagination .pg-btns { justify-content: center; }
  .ts12-pagination .pg-btn  { min-width: 32px; height: 32px; font-size: .72rem; }
}