/* DIAGNOSTIC: if you don’t see a thick red border on mobile, this file is NOT loading */
@media (max-width: 980px){
  html { outline: 8px solid red !important; }
}


/* =========================================================
   KMC Educator — Mobile Responsiveness Overrides
   File: public/css/responsive-mobile.css
   Purpose: Mobile-only layout fixes across the whole site
   Notes:
   - Keep this file loaded AFTER your main CSS.
   - Avoid blanket rules that break DepEd templates.
========================================================= */

/* ---------------------------------------------------------
   GLOBAL SAFETY (all screen sizes)
   - Prevent accidental horizontal drift caused by 100vw / shadows / transforms
--------------------------------------------------------- */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

*, *::before, *::after {
  box-sizing: border-box;
}

img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}

input, select, textarea, button {
  max-width: 100%;
}

/* ---------------------------------------------------------
   Mobile / Tablet
--------------------------------------------------------- */
@media (max-width: 980px) {

  /* iOS Safari: avoid 100vh bugs + safe area */
  .min-h-screen,
  [style*="min-height:100vh"],
  [style*="min-height: 100vh"] {
    min-height: 100svh !important;
  }

  /* Extra bottom breathing room for Safari bottom bar */
  body {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
  }

  /* Kill the classic culprit: 100vw = wider than viewport on mobile */
  .w-screen,
  [class*="w-screen"],
  [style*="width:100vw"],
  [style*="width: 100vw"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Neutralize dangerous inline min-width/max-width */
  [style*="min-width"] { min-width: 0 !important; }
  [style*="max-width"] { max-width: 100% !important; }

  /* ---- Universal container padding ---- */
  .container,
  .container-fluid,
  .max-w-7xl,
  .max-w-6xl,
  .max-w-5xl,
  .px-4,
  .px-6,
  .px-8 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* ---- Flex wrapping instead of overflow ---- */
  .row,
  .flex,
  .d-flex,
  [style*="display:flex"] {
    flex-wrap: wrap;
  }

  /* ---- Cards: consistent rounding ---- */
  .card,
  .shadow,
  .rounded,
  .rounded-lg,
  .rounded-xl,
  [style*="border-radius"] {
    border-radius: 16px !important;
  }

  /* -------------------------------------------------------
     Sidebar / dashboard layouts: stack on mobile
  ------------------------------------------------------- */
  .sidebar,
  .kmc-sidebar,
  .app-sidebar,
  nav.sidebar,
  aside.sidebar {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .content,
  .main,
  .main-content,
  .kmc-content,
  .app-content {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Grids become single column */
  .grid,
  [style*="display:grid"] {
    grid-template-columns: 1fr !important;
  }

  [style*="grid-template-columns:repeat(12"],
  [style*="grid-template-columns: repeat(12"] {
    grid-template-columns: 1fr !important;
  }

  /* -------------------------------------------------------
     Buttons: tap-friendly
  ------------------------------------------------------- */
  button,
  .btn,
  a.btn,
  input[type="submit"],
  input[type="button"] {
    min-height: 44px;
  }

  .btn-group,
  .toolbar,
  .actions,
  [style*="gap:"] {
    row-gap: 8px;
  }

  /* -------------------------------------------------------
     Tables / DepEd forms
     SAFER RULE: do NOT force table {display:block} globally.
     Instead, scroll only when wrapped.
  ------------------------------------------------------- */
  .table-responsive,
  .kmc-table-wrap,
  .table-wrap,
  .overflow-x-auto,
  [data-table-wrap] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Keep cells from exploding layout */
  td, th {
    white-space: nowrap;
  }

  /* Allow specific “wrap” cells to wrap */
  td.wrap,
  th.wrap,
  .wrap td,
  .wrap th,
  td[data-wrap],
  th[data-wrap] {
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* -------------------------------------------------------
     Modals / dialogs
  ------------------------------------------------------- */
  .modal,
  .dialog,
  .kmc-modal,
  [role="dialog"] {
    padding: 10px !important;
  }

  .modal-content,
  .dialog-content,
  .kmc-modal-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    max-height: 85svh !important;
    overflow: auto !important;
    border-radius: 16px !important;
  }

  /* -------------------------------------------------------
     Sticky headers / topbars
  ------------------------------------------------------- */
  .sticky,
  .topbar,
  .kmc-topbar,
  header.sticky {
    position: sticky;
    top: 0;
    z-index: 50;
  }

  /* -------------------------------------------------------
     Forms: stack fields
  ------------------------------------------------------- */
  .form-row,
  .form-group,
  .field-row,
  [style*="display:flex"][style*="align-items:center"] {
    width: 100% !important;
  }

  .form-row > *,
  .form-group > *,
  .field-row > * {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  /* -------------------------------------------------------
     Long headings / text
  ------------------------------------------------------- */
  h1, h2, h3, h4, h5, h6,
  .title,
  .kmc-title {
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* iOS input zoom fix: must be >= 16px */
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* ---------------------------------------------------------
   Small phones
--------------------------------------------------------- */
@media (max-width: 420px) {
  body {
    font-size: 14px;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
  }

  button,
  .btn {
    width: 100%;
  }

  h1, .hero-title, .kmc-title {
    font-size: clamp(24px, 9vw, 36px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
  }
}

@media (max-width: 980px){
  html, body { overflow-x: clip !important; }
  .wrap { max-width: 100% !important; }
}

@media (max-width: 980px){
  h1 { word-break: break-word; overflow-wrap: anywhere; }
}