/* jn-responsive.css — global "fit any screen" helpers (28-09-2026).
   Linked from layouts/header.php (every logged-in page) and applied by assets/js/jn-responsive.js (footer).
   Goal: nothing important (especially the Actions column of a table) is ever pushed off-screen on a laptop,
   a browser at 125-150% zoom, a tablet or a phone. */

/* media never wider than its box; long words / ids / URLs wrap instead of stretching the page */
img, video, canvas, svg, iframe, embed, object { max-width: 100%; }
.main-content, .container-xxl, .container-fluid, .container, .card, .card-body, .row > [class*="col"] { min-width: 0; }
.main-content { max-width: 100%; }
.card-body, .table td, .table th { overflow-wrap: break-word; }   /* break-word (not anywhere): a long id wraps only if it must, columns keep their natural width */
code { overflow-wrap: anywhere; }

/* short, fixed-shape cells never break in the middle of a word ("Succ / ess") */
.badge, .table .btn { white-space: nowrap; }
.table td .btn-group, .table td .d-flex.gap-1 { flex-wrap: wrap; }

/* wide tables scroll sideways inside their card ... */
.table-responsive { max-width: 100%; overflow-x: auto; }
.table-responsive > .table, .pf-scroll > table { margin-bottom: 0; }

/* ... and when one does, the LAST column (Actions / View / Download) stays pinned on the right, so it can never be lost.
   The class is added by jn-responsive.js only while the table really overflows. */
.jn-scroll > :is(.table, table) > thead > tr > :last-child:not([colspan]),
.jn-scroll > :is(.table, table) > tbody > tr > :last-child:not([colspan]),
.jn-scroll > :is(.table, table) > tfoot > tr > :last-child:not([colspan]) {
    position: sticky; right: 0; z-index: 2;
    background: #fff;
    box-shadow: -8px 0 10px -8px rgba(15, 23, 42, .28);
}
.jn-scroll > :is(.table, table) > thead > tr > :last-child:not([colspan]) { background: #f8f9fa; z-index: 3; }
.table-responsive.jn-scroll > .table.table-hover > tbody > tr:hover > :last-child:not([colspan]) { background: #f1f5f9; }
.table-responsive.jn-scroll > .table.table-striped > tbody > tr:nth-of-type(odd) > :last-child:not([colspan]) { background: #f7f8fa; }
.jn-scroll > :is(.table, table) > tbody > tr.table-danger > :last-child:not([colspan]),
.jn-scroll > :is(.table, table) > tbody > tr.table-warning > :last-child:not([colspan]) { background: inherit; }
/* cells that must stay on one line (dates, ids) are marked by jn-responsive.js */
.jn-nw { white-space: nowrap; }
/* a small hint that there is more to the left/right — a trackpad's auto-hiding scrollbar makes a wide
   report table look like its extra columns are just missing, not a sideways-scroll away. */
.table-responsive { scrollbar-width: thin; scrollbar-color: #94a3b8 #e9ecef; }
.table-responsive::-webkit-scrollbar { height: 10px; }
.table-responsive::-webkit-scrollbar-track { background: #e9ecef; border-radius: 6px; }
.table-responsive::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 6px; }
.table-responsive::-webkit-scrollbar-thumb:hover { background: #64748b; }
.jn-scroll-hint {
    display: flex; align-items: center; gap: 6px;
    font-size: 12.5px; color: #475569; background: #eef2ff;
    border: 1px solid #c7d2fe; border-radius: 6px;
    padding: 5px 10px; margin: 0 0 8px;
}

/* a table that is NOT inside a .table-responsive wrapper gets one from the script; until then never let it burst its card */
.card > .table, .card-body > .table { max-width: 100%; }

/* laptop / zoomed browser: forms and two-column service pages stack once the content area (viewport - sidebar) gets narrow */
@media (min-width: 992px) and (max-width: 1499.98px) {
    .pf-wrap > .row > .col-lg-5,
    .pf-wrap > .row > .col-lg-7 { flex: 0 0 100%; max-width: 100%; width: 100%; }
}

/* tablet / phone */
@media (max-width: 991.98px) {
    .table-responsive > .table { font-size: 13px; }
    .table th, .table td { padding: .5rem .55rem; }
    .modal-dialog { margin: .5rem; max-width: calc(100vw - 1rem); }
    .modal-dialog.modal-lg, .modal-dialog.modal-xl { max-width: calc(100vw - 1rem); }
}
@media (max-width: 575.98px) {
    .container-xxl, .container-fluid { padding-left: 12px !important; padding-right: 12px !important; }
    .card-body { padding: .9rem; }
    .btn-group { display: flex; flex-wrap: wrap; gap: 4px; }
    .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
    .nav-tabs .nav-link { white-space: nowrap; }
    input, select, textarea { font-size: 16px; }   /* stops iOS from zooming into a focused field */
}