/* ============================================================================
   EducationCloud — global responsive fixes
   Loaded on every layout, AFTER the template CSS, so these rules win.

   The pcoded/Able-Pro template is responsive at the shell level, but many
   content pages ship raw <table> elements and fixed-width cards that push the
   viewport sideways on phones. Rather than edit ~180 views, these rules make
   the content area behave: wide tables scroll inside their card, media is
   fluid, and nothing forces the page itself to scroll horizontally.
   ============================================================================ */

/* 1. Never let the page scroll sideways. The content column clips its own
      overflow; wide children (tables) get their own scroll area below. */
html, body { max-width: 100%; }
#pcoded .pcoded-content,
#pcoded .pcoded-inner-content { max-width: 100%; overflow-x: hidden; }

/* 2. Media is always fluid. */
#pcoded .pcoded-inner-content img,
#pcoded .pcoded-inner-content svg,
#pcoded .pcoded-inner-content video,
#pcoded .pcoded-inner-content canvas { max-width: 100%; height: auto; }

/* 3. Wide tables scroll within their card instead of breaking the layout.
      Applies whether or not the view wrapped the table in .table-responsive. */
#pcoded .card .card-block,
#pcoded .card .card-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#pcoded .table-responsive { -webkit-overflow-scrolling: touch; }

/* 3b. Catch-all for the many custom-styled cards (.ec-card, .card2, <table class="t">…)
       that don't sit in a .card-block. On phones/tablets any content table becomes its
       own horizontal scroll area — the classic responsive-table fallback — so a wide
       table never pushes the whole page sideways. Desktop layout is untouched. */
@media (max-width: 767px) {
    #pcoded .pcoded-inner-content table,
    .sa-content table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Headers shouldn't wrap mid-word while the body scrolls beneath them. */
    #pcoded .pcoded-inner-content table thead th,
    .sa-content table thead th { white-space: nowrap; }
}

/* 4. Cards, alerts and other blocks must respect the viewport width even when
      a view set a fixed pixel width inline. max-width wins over width here. */
@media (max-width: 575px) {
    #pcoded .pcoded-inner-content [style*="width:"] { max-width: 100%; }
    /* …but let deliberately-scrollable regions keep their intrinsic width. */
    #pcoded .table-responsive [style*="width:"],
    #pcoded .card-block > table[style*="width:"],
    #pcoded .card-body > table[style*="width:"] { max-width: none; }
}

/* 5. Page header: on small screens the right-floated breadcrumb collides with
      the title. Stack them and drop the float. */
@media (max-width: 767px) {
    #pcoded .page-header { padding: 14px 16px; }
    #pcoded .page-header .page-header-breadcrumb,
    #pcoded .page-header .breadcrumb-title { float: none !important; margin-top: 8px; }
    #pcoded .page-header .page-block > .row > div { width: 100%; }
}

/* 6. Bootstrap-4 rows with bare col-* (no breakpoint) don't stack; force any
      grid column to full width on phones so forms don't get crushed. */
@media (max-width: 575px) {
    #pcoded .pcoded-inner-content .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
}

/* 7. Toolbars/button groups above tables wrap instead of overflowing. */
#pcoded .pcoded-inner-content .btn-toolbar,
#pcoded .pcoded-inner-content .card-header-right { flex-wrap: wrap; }

/* 8. Give the content a little breathing room on the smallest screens. */
@media (max-width: 480px) {
    #pcoded .pcoded-inner-content { padding-left: 10px; padding-right: 10px; }
    #pcoded .card { margin-bottom: 16px; }
}

/* ---------------------------------------------------------------------------
   Super Admin shell (.sa-* — a separate layout, not pcoded). Same intent:
   fluid media, self-scrolling wide tables, no sideways page scroll.
   --------------------------------------------------------------------------- */
.sa-main, .sa-content { max-width: 100%; }
.sa-content { overflow-x: hidden; }
.sa-content img, .sa-content svg, .sa-content canvas { max-width: 100%; height: auto; }
.sa-content .card, .sa-content .card-block, .sa-content .card-body { max-width: 100%; }
.sa-content .card-block, .sa-content .card-body,
.sa-content .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 767px) {
    .sa-content table thead th { white-space: nowrap; }
}
@media (max-width: 575px) {
    .sa-content .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
}

/* ---------------------------------------------------------------------------
   Universal safety net (any layout): media never overflows, and an explicit
   .table-responsive keeps momentum scrolling on touch devices.
   --------------------------------------------------------------------------- */
img, svg, video, canvas { max-width: 100%; }
.table-responsive { -webkit-overflow-scrolling: touch; }