/* ==========================================================================
   COMPACT UI
   --------------------------------------------------------------------------
   Loaded last, after style.css and custom-style.css, so everything here wins
   on source order without needing to out-specify anything.

   custom-style.css already carries a "SITEWIDE SPACING TIGHTENING OVERRIDES"
   block. This file is deliberately NOT a replacement for it -- that block is
   tangled up with unrelated fixes (the datepicker cells, .capture-card) and
   pulling it apart is a bigger change than it is worth. This file covers the
   gaps that block misses, and corrects the two rules in it that backfired.

   Everything here is layout and colour only. No page needs to know it exists.
   To undo the whole thing, drop the one line from config/dz.php.
   ========================================================================== */


/* ==========================================================================
   1. CARD HEIGHT -- fixes content hanging out the bottom of a card
   --------------------------------------------------------------------------
   style.css:22367 pairs `margin-bottom: 1.875rem` with `height: calc(100% - 30px)`.
   Those two numbers are the same distance, and that is the only reason the
   theme works: the card is given a fixed height that happens to leave room for
   its own margin.

   custom-style.css:832 later cut the margin to 1rem but left the height at
   30px, so `height` became a fixed value unrelated to the content. Anything
   taller than that value spills out past the card's painted background --
   which is why the red/orange legend at the bottom of the Paysoft debit orders
   card hangs outside it once the text wraps to more lines on a laptop screen.

   min-height keeps the equal-height-columns behaviour the theme wants while
   letting a card grow to fit what is actually in it.
   ========================================================================== */
.card {
    height: auto !important;
    min-height: calc(100% - 1rem);
}

@media only screen and (max-width: 35.9375rem) {
    .card {
        min-height: calc(100% - 0.938rem);
    }
}


/* ==========================================================================
   2. PAGE PADDING -- the largest remaining block of empty space
   --------------------------------------------------------------------------
   style.css:9828 puts 1.875rem (30px) around every side of the page content
   and nothing has ever overridden it. This is the single biggest win on a
   laptop screen. The two smaller breakpoints below 48rem are already tighter
   than this, so they are left alone.
   ========================================================================== */
.content-body .container-fluid,
.content-body .container-sm,
.content-body .container-md,
.content-body .container-lg,
.content-body .container-xl,
.content-body .container-xxl {
    padding-top: 1.25rem;
    padding-right: 1.25rem;
    padding-left: 1.25rem;
}

@media only screen and (max-width: 75rem) {
    .content-body .container-fluid,
    .content-body .container-sm,
    .content-body .container-md,
    .content-body .container-lg,
    .content-body .container-xl,
    .content-body .container-xxl {
        padding-top: 1.25rem;
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }
}


/* ==========================================================================
   3. ROW GUTTERS -- undoes a tightening rule that added space instead
   --------------------------------------------------------------------------
   custom-style.css:826 sets `div.row { margin: 0.5rem !important }`.

   Bootstrap gives .row a *negative* horizontal margin that cancels out the
   padding on its own columns. Replacing that with a positive 0.5rem does two
   things, both unwanted: it adds half a rem of margin on all four sides of
   every row on the site -- including rows nested inside cards -- and it stops
   the outer columns lining up with the edge of whatever contains them.

   Zeroing the margin and narrowing the gutter gets the intended result. Not
   restoring Bootstrap's negative margins on purpose: pages here have been
   built against a non-negative row for a while, and 0 is the conservative
   landing spot between the two.
   ========================================================================== */
div.row {
    margin: 0 !important;
    --bs-gutter-x: 1rem;
}


/* ==========================================================================
   4. THE SMALLER GAPS
   ========================================================================== */

/* style.css:21443 keeps a 2rem right pad on the breadcrumb bar that nothing
   sits in. */
.page-titles {
    padding-right: 1rem !important;
}

/* The breadcrumb is the only thing inside .page-titles, which already has its
   own bottom margin, so this one is doubled up. */
.page-titles .breadcrumb {
    margin-bottom: 0 !important;
}

/* Separators inside cards -- the stat tiles on the contact page use one
   between the number and its label, at the browser default of 1rem each side. */
.card-body hr,
.chart-num hr {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}


/* ==========================================================================
   5. VALIDATION ICONS -- remove the tick and the cross
   --------------------------------------------------------------------------
   Bootstrap paints these as a background-image inside the field and reserves
   room for them with `padding-right: calc(1.5em + 1.375rem)` (style.css:2474
   and 2551). That reservation never survives: custom-style.css:855 sets
   `.form-control { padding: 0.45rem 0.75rem !important }`, and the shorthand
   plus !important overrides the padding-right the icon depends on. So the
   glyph gets drawn on top of the value instead of beside it.

   Dropping the images rather than restoring the padding -- the coloured
   border already says everything the icon did, and it covers nothing.
   ========================================================================== */
.was-validated .form-control:valid,
.form-control.is-valid,
.was-validated .form-control:invalid,
.form-control.is-invalid,
.was-validated textarea.form-control:valid,
textarea.form-control.is-valid,
.was-validated textarea.form-control:invalid,
textarea.form-control.is-invalid {
    background-image: none !important;
}

/* Selects layer two images: the dropdown caret (--bs-form-select-bg-img) and
   the validation glyph (--bs-form-select-bg-icon). Only the second one goes;
   the caret has to stay or the control stops looking like a select. */
.was-validated .form-select:valid:not([multiple]):not([size]),
.was-validated .form-select:valid:not([multiple])[size="1"],
.form-select.is-valid:not([multiple]):not([size]),
.form-select.is-valid:not([multiple])[size="1"],
.was-validated .form-select:invalid:not([multiple]):not([size]),
.was-validated .form-select:invalid:not([multiple])[size="1"],
.form-select.is-invalid:not([multiple]):not([size]),
.form-select.is-invalid:not([multiple])[size="1"] {
    --bs-form-select-bg-icon: none;
}