/* ===========================================================
   Apex CyberHub — site-wide phone layout
   Loaded on every page. Deliberately conservative: it fixes the
   things that actually break on a phone (media spilling out of
   the page, wide tables, cramped forms and buttons) without
   re-styling any page's own design.
   The certificate page is left alone on purpose — it is a fixed
   A4 sheet meant for printing.
   =========================================================== */

/* media never pushes the page wider than the screen */
img, video, iframe, canvas, svg:not(.apx-ic) { max-width: 100%; }
img, video { height: auto; }

/* a wide table scrolls inside its own box instead of dragging the page sideways */
.apx-tscroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.apx-tscroll > table { margin-bottom: 0; }

@media (max-width: 820px) {

    /* keep columns readable while the box scrolls */
    .apx-tscroll > table { min-width: 580px; }

    /* long words and pasted links wrap instead of stretching the page */
    body { word-break: break-word; overflow-wrap: anywhere; }

    /* form controls fit the screen */
    input, select, textarea, .form-input, .field-input {
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* two- and three-column form rows become one column */
    .form-row, .form-grid, .grid-2, .grid-3, .two-col, .three-col {
        grid-template-columns: 1fr !important;
        display: block;
    }
    .form-row > *, .two-col > *, .three-col > * { width: 100%; }

    /* button rows wrap rather than overflow */
    .btn-row, .toolbar, .actions, .filters, .tabs, .page-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* comfortable tap targets */
    .btn, button, .action-btn, a.action-btn { min-height: 40px; }

    /* page padding that does not waste the narrow screen */
    .container, .content, .page, .card, .panel { padding-left: 12px; padding-right: 12px; }

    /* headings that were sized for a desktop */
    h1 { font-size: 22px; }
    h2 { font-size: 19px; }
    h3 { font-size: 17px; }
}

@media (max-width: 480px) {
    .apx-tscroll > table { min-width: 520px; }
    .container, .content, .page { padding-left: 10px; padding-right: 10px; }
}

/* printing must never scroll or clip */
@media print {
    .apx-tscroll { overflow: visible !important; }
    .apx-tscroll > table { min-width: 0 !important; }
}