/* ═══════════════════════════════════════════════════════════════
   SimApt — Site-wide Responsive Fixes
   Loaded last (after mobile-nav.css) by include/header-link.php and
   include/header-link-new.php.
   ═══════════════════════════════════════════════════════════════ */

/* ── Word breaking ────────────────────────────────────────────────
   text-overflow-fixes.css uses `overflow-wrap: anywhere` and
   `word-break: break-word`, which let flex items and table cells shrink
   to a single letter ("Co / mp / let / ed"). `overflow-wrap: break-word`
   still breaks a word that cannot fit, without shrinking its box. */
body :is(h1, h2, h3, h4, h5, h6, p, li, span, a, label, td, th, button, div) {
  word-break: normal;
  overflow-wrap: break-word;
}

html body :is(.blog-wiki-card, .discussion-inner) :is(h4, p),
html body :is(.panel-title, .page-ttle),
html body .form-group label {
  word-break: normal;
  overflow-wrap: break-word;
}

/* ── Tables: scroll sideways instead of crushing columns ──
   js/index.js wraps bare tables in .si-table-scroll */
.si-table-scroll,
.dataTables_wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 991px) {
  body table {
    table-layout: auto !important;
  }

  body :is(td, th) {
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .si-table-scroll > table,
  .dataTables_wrapper table {
    min-width: 100%;
  }

  .si-table-scroll > table :is(td, th),
  .dataTables_wrapper table :is(td, th) {
    min-width: 80px;
  }
}

/* Contact us: date/time icons were pushed below their inputs by a stray `top` */
body .input-icon-wrapper .input-icon {
  top: 50% !important;
  transform: translateY(-50%);
}

/* ── Course lesson pages: "Module List" tab ──
   responsive.css leaves it as a 120×630px yellow block over the right edge of
   the lesson; on tablets and phones make it a floating button instead. */
@media (max-width: 991px) {
  body .chapterlisttoggle {
    position: fixed !important;
    top: auto !important;
    left: auto !important;
    right: 16px !important;
    bottom: 16px !important;
    width: auto !important;
    height: auto !important;
    padding: 10px 18px !important;
    transform: none !important;
    border-radius: 999px;
    background: var(--si-green-700, #117a32) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    cursor: pointer;
  }

  body .chapterlisttoggle h5 {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    color: #fff !important;
    white-space: nowrap;
  }
}

/* ═══ Page-specific fixes (≤767px) ═══════════════════════════════ */
@media (max-width: 767px) {

  /* ── Info tooltips (Search Course etc.): responsive.css pushes them 47px off the right edge ── */
  body .info .information-hover {
    right: 0 !important;
    max-width: calc(100vw - 32px);
  }

  /* ── Contact us: let the column shrink below the long website URL ── */
  body .contact-layout-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body .contact-layout-grid a {
    overflow-wrap: anywhere;
  }

  /* ── Policy pages: CMS text is inline-justified, which leaves wide gaps on phones ── */
  body .termsnconditions-inner :is(p, h3, li, span) {
    text-align: left !important;
  }

  /* ── Date filter on My Blogs / Reels / Feedbacks / Complaints /
        Testimonials / Certificates / Leaderboard Points / Activity Logs ── */
  body form.filterform {
    flex-wrap: wrap !important;
    width: 100%;
    max-width: 100%;
  }

  body form.filterform > div {
    flex: 1 1 100%;
    min-width: 0;
  }

  body form.filterform input[type="date"] {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
  }

  body form.filterform > button {
    flex: 1 1 100%;
  }

  /* ── My Scoreboard Details hero (inline 3-column grid) ── */
  body .sbd-hero-card {
    padding: 20px !important;
  }

  body .sbd-hero-card h2 {
    font-size: 22px !important;
  }

  body .sbd-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  body .sbd-stats .sbd-stat {
    padding: 12px !important;
    min-width: 0;
  }

  body .sbd-stats .sbd-stat:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  body .sbd-stats h4 {
    font-size: 24px !important;
  }

  /* module tables inside the scoreboard accordion are 70% wide on desktop */
  body div#mainchapaccordion .myscoreboard-details-inner {
    width: auto !important;
    margin: 10px !important;
  }

  /* ── Discussion forum list ── */
  body .discussion-sublist {
    padding: 18px !important;
  }

  body .discussion-sublist > :is(h3, p) {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  body .discussion-sublist .discussion-replies {
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 16px !important;
  }

  body .discussion-sublist .discussion-replies .time-duration {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 4px 12px !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
  }

  body .discussion-sublist .discussion-replies .reply-time {
    flex-basis: 100% !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
  }
}