/* =====================================================================
   ZIQSY CMS — FORMS & SPACE-PLANNING LAYER
   ---------------------------------------------------------------------
   Loaded AFTER design-system.css. Purely ADDITIVE + presentational:
   it changes NO markup, class names, ids or JS. It gives Bootstrap forms
   a calm vertical rhythm, comfortable density, aligned two-column rows,
   clear required markers, tidy help text, well-spaced action footers,
   and sane max-widths so forms stop wasting horizontal space and stop
   feeling like one endless scroll.

   Design rules honoured:
     • Tokens only (--zq-*), each with a literal fallback.
     • NEVER touches .dash2 (home dashboard) — no .dash2 selector exists here.
     • NEVER touches .sidebar / .app-sidebar / .navbar / .top-header.
   ===================================================================== */

/* ------------------------------------------------------------------ *
 * 0. SCOPE & TOKENS
 *    Most rules are scoped to `form` (or to a few opt-in helper classes)
 *    so list/table/dashboard pages that merely contain a stray input
 *    are not affected. Local tokens centralise the rhythm.
 * ------------------------------------------------------------------ */
:root {
    /* Vertical rhythm between fields (the heartbeat of the form) */
    --zq-form-gap:        1.15rem;
    --zq-form-gap-tight:  .75rem;
    /* Comfortable, touch-friendly control height */
    --zq-field-h:         2.7rem;
    --zq-field-pad-x:     .85rem;
    /* Readable single-column measure (≈ 60–72ch) */
    --zq-form-measure:    44rem;
    /* Two-column / wide form measure */
    --zq-form-measure-wide: 60rem;
    /* Required marker colour — brand-neutral danger, replaces the raw red */
    --zq-required:        var(--zq-danger, #ef4444);
}

/* ------------------------------------------------------------------ *
 * 1. CONTROL ERGONOMICS — comfortable height & padding
 *    Applies inside forms only, so data tables keep their compact inputs.
 * ------------------------------------------------------------------ */
form .form-control,
form .form-select {
    min-height: var(--zq-field-h, 2.7rem);
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: var(--zq-field-pad-x, .85rem);
    padding-right: var(--zq-field-pad-x, .85rem);
    font-size: var(--zq-fs-md, .9375rem);
    line-height: 1.4;
}
form textarea.form-control {
    min-height: 4.5rem;          /* roomier than a single line */
    line-height: var(--zq-lh, 1.55);
}
/* Input-group children align to the same comfortable height */
form .input-group > .form-control,
form .input-group > .form-select,
form .input-group > .input-group-text {
    min-height: var(--zq-field-h, 2.7rem);
    display: flex;
    align-items: center;
}
form .input-group-text {
    font-weight: 600;
    color: var(--zq-text-muted, #64748b);
}
/* Readonly / auto-calculated fields read as "output", not "editable" */
form .form-control[readonly] {
    background-color: var(--zq-slate-50, #f8fafc);
    color: var(--zq-text, #1e293b);
    border-style: dashed;
}

/* ------------------------------------------------------------------ *
 * 2. VERTICAL RHYTHM — consistent space between fields
 *    Bootstrap's mb-3 is uneven once labels + help text are in play.
 *    Normalise the gap so every field breathes the same amount.
 * ------------------------------------------------------------------ */
form .mb-3 { margin-bottom: var(--zq-form-gap, 1.15rem) !important; }
form .mb-4 { margin-bottom: calc(var(--zq-form-gap, 1.15rem) * 1.6) !important; }

/* Label → control spacing (Bootstrap default .5rem is a touch loose) */
form .form-label {
    margin-bottom: .4rem;
    font-size: var(--zq-fs-sm, .8125rem);
    font-weight: 600;
    color: var(--zq-slate-700, #334155);
    letter-spacing: .005em;
}

/* ------------------------------------------------------------------ *
 * 3. TWO-COLUMN ROWS — align & collapse gracefully
 *    Bootstrap .row of .col-md-* already collapses < 768px; here we just
 *    give the columns a consistent vertical gutter when stacked so they
 *    don't kiss, and keep multi-row forms visually aligned.
 * ------------------------------------------------------------------ */
form .row > [class*="col-"] { margin-bottom: 0; }
@media (max-width: 767.98px) {
    /* When columns stack, restore field rhythm between them */
    form .row.mb-3 > [class*="col-"]:not(:last-child),
    form .row.mb-4 > [class*="col-"]:not(:last-child) {
        margin-bottom: var(--zq-form-gap, 1.15rem);
    }
}

/* ------------------------------------------------------------------ *
 * 4. HELP TEXT — quiet, consistent, hangs under its field
 *    Targets both .form-text and the common `small.text-muted` pattern.
 * ------------------------------------------------------------------ */
form .form-text,
form .form-control + small,
form .form-select + small,
form .input-group + small,
form small.text-muted,
form small.text-success,
form small.text-warning {
    display: block;
    margin-top: .35rem;
    font-size: var(--zq-fs-xs, .75rem);
    line-height: 1.4;
    color: var(--zq-text-muted, #64748b);
}
form small.text-success { color: var(--zq-success-strong, #059669) !important; }
form small.text-warning { color: var(--zq-warning, #f59e0b) !important; }

/* ------------------------------------------------------------------ *
 * 5. REQUIRED-FIELD MARKERS — clear but calm
 *    The representative view ships `.required:after{content:" *";color:red}`
 *    inline (wins on that page). Here we provide a tidier global default for
 *    every OTHER form and also support [required] + aria-required inputs.
 * ------------------------------------------------------------------ */
form .form-label.required::after,
form label.required::after {
    content: " *";
    color: var(--zq-required, #ef4444);
    font-weight: 700;
}
/* Asterisk also for native required controls whose label lacks .required */
form .form-label:has(+ .form-control[required])::after,
form .form-label:has(+ .form-select[required])::after,
form .form-label:has(+ .input-group [required])::after {
    content: " *";
    color: var(--zq-required, #ef4444);
    font-weight: 700;
}

/* Validation echo (used when Laravel re-renders with errors) */
form .form-control.is-invalid,
form .form-select.is-invalid { border-color: var(--zq-danger, #ef4444); }
form .invalid-feedback {
    font-size: var(--zq-fs-xs, .75rem);
    margin-top: .35rem;
}

/* ------------------------------------------------------------------ *
 * 6. CHECKBOXES / SWITCHES — comfortable hit area
 * ------------------------------------------------------------------ */
form .form-check { padding-left: 1.9em; min-height: 1.4rem; }
form .form-check-input { width: 1.1em; height: 1.1em; margin-left: -1.9em; margin-top: .15em; }
form .form-switch .form-check-input { width: 2.2em; }
form .form-check-label { font-size: var(--zq-fs-md, .9375rem); }

/* ------------------------------------------------------------------ *
 * 7. SECTION GROUPING — break a long column into digestible blocks
 *    Two ways to opt in without markup edits on existing pages:
 *      (a) native <fieldset> + <legend>
 *      (b) a comment-style header row that authors already use
 *    Plus first-class .form-section / .form-section-title helpers for new
 *    views that want explicit grouping.
 * ------------------------------------------------------------------ */
form fieldset {
    border: 1px solid var(--zq-border, #e2e8f0);
    border-radius: var(--zq-radius, .75rem);
    padding: 1.25rem 1.25rem .35rem;
    margin-bottom: calc(var(--zq-form-gap, 1.15rem) * 1.4);
    background: var(--zq-surface, #fff);
}
form fieldset > legend {
    float: none;
    width: auto;
    padding: 0 .5rem;
    margin-bottom: .25rem;
    font-family: var(--zq-font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: var(--zq-fs-md, .9375rem);
    font-weight: 700;
    color: var(--zq-slate-800, #1e293b);
}

.form-section {
    padding: 1.25rem 1.35rem;
    margin-bottom: var(--zq-form-gap, 1.15rem);
    border: 1px solid var(--zq-border, #e2e8f0);
    border-radius: var(--zq-radius, .75rem);
    background: var(--zq-surface, #fff);
}
.form-section-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid var(--zq-border, #e2e8f0);
    font-family: var(--zq-font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: var(--zq-fs-md, .9375rem);
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--zq-slate-800, #1e293b);
    text-transform: none;
}
.form-section-title .form-section-eyebrow {
    margin-left: auto;
    font-size: var(--zq-fs-xs, .75rem);
    font-weight: 600;
    color: var(--zq-text-muted, #64748b);
}

/* A nested card used as a sub-panel inside a form (the view's pattern:
   .card.border-primary, .card.bg-light) gets a lighter, on-rhythm look. */
form .card .card-body > .form-check.form-switch { margin-bottom: 0; }

/* ------------------------------------------------------------------ *
 * 8. ACTION FOOTER — the row of submit / cancel buttons
 *    Give it a clear top divider, generous spacing and right-alignment
 *    on wide screens; full-width stacked buttons on narrow screens.
 * ------------------------------------------------------------------ */
form .form-actions,
form > .d-flex.gap-2:last-child,
form > .d-grid:last-child,
form .form-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-top: calc(var(--zq-form-gap, 1.15rem) * 1.5);
    padding-top: 1.1rem;
    border-top: 1px solid var(--zq-border, #e2e8f0);
}
/* Keep the primary action first; push a lone "Cancel/back" link to the right
   when authors use the .form-actions helper explicitly. */
.form-actions .ms-auto,
.form-actions .form-actions-spacer { margin-left: auto; }

form .form-actions .btn,
form .form-footer .btn { min-height: var(--zq-field-h, 2.7rem); padding-left: 1.25rem; padding-right: 1.25rem; }

@media (max-width: 575.98px) {
    form .form-actions,
    form > .d-flex.gap-2:last-child,
    form .form-footer { flex-direction: column-reverse; align-items: stretch; }
    form .form-actions .btn,
    form > .d-flex.gap-2:last-child .btn,
    form .form-footer .btn { width: 100%; }
}

/* ------------------------------------------------------------------ *
 * 9. STICKY ACTION BAR — opt-in for long forms
 *    Add class `form-sticky-actions` to the footer wrapper and it pins to
 *    the bottom of the viewport so users never scroll to find Save.
 *    (Opt-in only, so existing short forms are unchanged.)
 * ------------------------------------------------------------------ */
.form-sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-top: calc(var(--zq-form-gap, 1.15rem) * 1.5);
    padding: .85rem 1.1rem;
    background: color-mix(in srgb, var(--zq-surface, #fff) 92%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(8px);
    backdrop-filter: saturate(1.4) blur(8px);
    border-top: 1px solid var(--zq-border, #e2e8f0);
    border-radius: 0 0 var(--zq-radius, .75rem) var(--zq-radius, .75rem);
    box-shadow: 0 -6px 16px rgba(15, 23, 42, .06);
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
}

/* ------------------------------------------------------------------ *
 * 10. SPACE PLANNING — constrain measure, kill wasted horizontal space
 *     The representative view wraps its form in .col-lg-10 inside a
 *     centered .row — good. We add reusable wrappers so NEW forms can
 *     centre + cap their width without a Bootstrap grid scaffold, and we
 *     gently cap a bare card-bodied form so single fields don't stretch
 *     to a 1600px monitor edge.
 * ------------------------------------------------------------------ */
.form-narrow,
.form-single-col {
    max-width: var(--zq-form-measure, 44rem);
    margin-left: auto;
    margin-right: auto;
}
.form-wide {
    max-width: var(--zq-form-measure-wide, 60rem);
    margin-left: auto;
    margin-right: auto;
}
/* Single-column forms (no .row grid inside) get a comfortable cap so the
   inputs don't run edge-to-edge on ultra-wide content columns. */
.form-single-col .form-control,
.form-single-col .form-select { max-width: 100%; }

/* Tighten the card that hosts a form so the chrome doesn't add scroll */
.card > .card-body > form { margin-bottom: 0; }

/* ------------------------------------------------------------------ *
 * 11. DENSITY VARIANT — opt-in compact rhythm for very long forms
 * ------------------------------------------------------------------ */
.form-compact .mb-3 { margin-bottom: var(--zq-form-gap-tight, .75rem) !important; }
.form-compact .form-control,
.form-compact .form-select { min-height: 2.4rem; padding-top: .35rem; padding-bottom: .35rem; }
.form-compact .form-label { margin-bottom: .25rem; }

/* ------------------------------------------------------------------ *
 * 12. DARK MODE — inherit surfaces/borders from the design-system tokens
 * ------------------------------------------------------------------ */
[data-bs-theme="dark"] form .form-control[readonly] {
    background-color: var(--zq-surface-2, #243140);
}
[data-bs-theme="dark"] form fieldset,
[data-bs-theme="dark"] .form-section {
    background: var(--zq-surface, #1e293b);
    border-color: var(--zq-border, #2c3a4d);
}
[data-bs-theme="dark"] .form-sticky-actions {
    background: color-mix(in srgb, var(--zq-surface, #1e293b) 92%, transparent);
    border-top-color: var(--zq-border, #2c3a4d);
}

/* ------------------------------------------------------------------ *
 * 13. MOTION-REDUCE RESPECT (mirrors design-system policy)
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .form-sticky-actions { -webkit-backdrop-filter: none; backdrop-filter: none; }
}