/* ============================================================
   ZIQSY — LAYOUT & SPACING SYSTEM
   One rhythm for every page: a single content-frame width,
   consistent page gutters, grid gutter, card padding and
   vertical spacing. Token-driven so all views line up — this
   kills the per-view bespoke container widths that made the
   app look inconsistent. Shared layer; additive & overridable.
   ============================================================ */
:root {
    /* 4pt spacing scale */
    --zq-space-1: .25rem;
    --zq-space-2: .5rem;
    --zq-space-3: .75rem;
    --zq-space-4: 1rem;
    --zq-space-5: 1.5rem;
    --zq-space-6: 2rem;
    --zq-space-7: 2.5rem;
    --zq-space-8: 3rem;

    /* layout rhythm */
    --zq-content-max: 1480px;
    --zq-page-pad-x: clamp(1rem, .55rem + 1vw, 2rem);
    --zq-page-pad-y: 1.5rem;
    --zq-gutter: 1.5rem;
    --zq-card-pad: 1.5rem;
}

/* ---- Page frame -------------------------------------------------------
   ONE consistent content width, left-anchored just after the sidebar with
   even gutters. No more per-page centered dead-space. ------------------- */
main#zqMain {
    padding: var(--zq-page-pad-y) var(--zq-page-pad-x) var(--zq-space-8);
    max-width: calc(var(--zq-content-max) + (2 * var(--zq-page-pad-x)));
}
/* Sidebar offsets #zqMain with margin-left + width:100% (overflow). Switch
   to width:auto so it fits between the sidebar and the viewport edge. */
body.has-sidebar > main#zqMain {
    width: auto;
}

/* Neutralize each view's bespoke max-width wrapper so EVERY page fills the
   same frame instead of centering at its own width. */
main#zqMain > .container,
main#zqMain > .container-sm,
main#zqMain > .container-md,
main#zqMain > .container-lg,
main#zqMain > .container-xl,
main#zqMain > .container-xxl,
main#zqMain > .container-fluid,
main#zqMain > .dash2 {
    max-width: 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

/* ---- Consistent grid gutter app-wide ---- */
.row {
    --bs-gutter-x: var(--zq-gutter);
    --bs-gutter-y: var(--zq-gutter);
}

/* ---- Consistent card padding (one value everywhere) ---- */
.card > .card-body {
    padding: var(--zq-card-pad);
}
.card > .card-header,
.card > .card-footer {
    padding: var(--zq-space-4) var(--zq-card-pad);
}

/* ---- Optional narrow measure for form / detail / settings pages ---- */
.zq-measure {
    max-width: 920px;
}

/* On compact viewports the sidebar collapses to a drawer (margin-left:0);
   keep page gutters comfortable but tighter. */
@media (max-width: 575.98px) {
    :root { --zq-page-pad-x: 1rem; --zq-card-pad: 1.15rem; }
}