/* ============================================================== *
 * responsive.css — Ziqsy CMS responsiveness & asset-sizing layer
 * Additive only. No markup or behaviour changes. Builds on the
 * --zq-* design tokens. Loaded LAST so it wins on conflicts.
 *
 * Goals (UX priority #1): every view sizes correctly to the screen,
 * assets scale to their container, nothing forces horizontal page
 * scroll, and dense data stays usable on phones/tablets.
 * ============================================================== */

/* -------------------------------------------------------------- *
 * 1. FLUID MEDIA — assets always fit their container
 * Avatars and explicitly-sized icons keep their dimensions
 * (they set both width AND height, so capping max-width is inert).
 * -------------------------------------------------------------- */
img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

/* Content images with no fixed dimensions scale proportionally. */
img:not([width]):not([height]):not(.user-avatar-img):not(.search-result-avatar img) {
    height: auto;
}

/* Brand / logo marks never overflow their bar.
   Use a concrete px cap: the parent <a>/.header-logo has auto height, so
   `max-height:100%` resolves against nothing and the native 1080px image wins,
   blowing the logo up to fill the page. A fixed cap keeps it inside the 64px bar. */
.header-logo img,
.navbar-brand img {
    max-height: 36px;
    height: 36px;
    width: auto;
    object-fit: contain;
}

/* Figures, embeds and the BS ratio helper stay contained. */
.ratio,
.embed-responsive,
figure img {
    max-width: 100%;
}

/* -------------------------------------------------------------- *
 * 2. PAGE-LEVEL OVERFLOW GUARD
 * Stop a single wide element from forcing the whole page to
 * scroll sideways. `clip` (not `hidden`) preserves position:sticky
 * table headers and the fixed top header/nav.
 * -------------------------------------------------------------- */
html {
    overflow-x: clip;
}

body {
    max-width: 100%;
}

/* Long unbroken strings (emails, IDs, URLs) wrap instead of pushing
   their column past the viewport edge. */
td, th,
.card-title, .card-text,
.list-group-item,
dd, dt {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* -------------------------------------------------------------- *
 * 3. TABLES — keep dense grids usable on small screens
 * -------------------------------------------------------------- */
.table-responsive {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* Existing per-view table containers must scroll horizontally so a
   wide table is reachable rather than clipped by the page overflow
   guard. (.overflow-x-auto is a Tailwind-style class some legacy
   views use but the CMS never defined — honour it here.) */
.zq-table-scroll,
.table-view-container,
.table-container,
.excel-table-wrapper,
.overflow-x-auto {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 575.98px) {
    .table {
        font-size: var(--zq-fs-sm, .8125rem);
    }
    .table > :not(caption) > * > * {
        padding-top: .5rem;
        padding-bottom: .5rem;
    }
}

/* -------------------------------------------------------------- *
 * 4. INLINE FIXED-WIDTH NEUTRALISER (phones)
 * Many legacy views hard-code pixel widths inline. max-width:100%
 * only ever shrinks something WIDER than its parent, so narrower
 * intentional widths are untouched. Table internals are excluded
 * so horizontal-scroll tables keep their column sizing.
 * -------------------------------------------------------------- */
@media (max-width: 575.98px) {
    [style*="width"]:not(table):not(thead):not(tbody):not(tr):not(td):not(th):not(.progress-bar):not(svg):not(svg *) {
        max-width: 100% !important;
    }
}

/* -------------------------------------------------------------- *
 * 5. LAYOUT PRIMITIVES — graceful stacking
 * -------------------------------------------------------------- */
/* Button groups / toolbars wrap instead of overflowing. */
.btn-toolbar,
.d-flex.justify-content-between,
.card-header .d-flex {
    flex-wrap: wrap;
    gap: .5rem;
}

/* Modals breathe on small screens. */
@media (max-width: 575.98px) {
    .modal-dialog:not(.modal-fullscreen) {
        margin: .5rem;
    }
    .modal-body {
        padding: 1rem;
    }
}

/* KPI / stat tiles never get narrower than legible. */
@media (max-width: 380px) {
    .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* -------------------------------------------------------------- *
 * 6. WIDE INTERACTIVE SURFACES — scroll, don't break
 * Kanban, org charts, timelines and calendars are intentionally
 * wide; contain their overflow to themselves.
 * -------------------------------------------------------------- */
.kanban-board,
.org-chart,
.org-tree,
.timeline-container,
[class*="gantt"],
.fc-scroller {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* FullCalendar toolbar stacks on phones so titles stay readable. */
@media (max-width: 575.98px) {
    .fc .fc-toolbar.fc-header-toolbar {
        flex-direction: column;
        gap: .5rem;
        align-items: stretch;
    }
    .fc .fc-toolbar-title {
        font-size: 1.05rem;
        text-align: center;
    }
}

/* -------------------------------------------------------------- *
 * 7. TYPOGRAPHY FLUIDITY — display headings scale with viewport
 * -------------------------------------------------------------- */
.display-1 { font-size: clamp(2.5rem, 6vw, 5rem); }
.display-2 { font-size: clamp(2.2rem, 5.2vw, 4.5rem); }
.display-3 { font-size: clamp(2rem, 4.5vw, 4rem); }
.display-4 { font-size: clamp(1.8rem, 3.8vw, 3.5rem); }

@media (max-width: 575.98px) {
    h1, .h1 { font-size: 1.6rem; }
    h2, .h2 { font-size: 1.35rem; }
    h3, .h3 { font-size: 1.15rem; }
}

/* -------------------------------------------------------------- *
 * 8. TOUCH ERGONOMICS — comfortable tap targets on coarse pointers
 * -------------------------------------------------------------- */
@media (pointer: coarse) {
    .btn,
    .nav-link,
    .dropdown-item,
    .page-link {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }
    .dropdown-item {
        display: flex;
    }
}