/* assets/css/forms.css -- added 29 Oct 2026 (Chris). The shared look of a form's buttons, loaded by both page headers
   (includes/occur_header.php and includes/occur_header_datatables.php).

   THE RULE, everywhere: Cancel on the LEFT, the main action (Submit / Update Record / Save / Next / Confirm ...) on the
   RIGHT. Put the two buttons in   <div class="form-actions"> ... </div>   with Cancel written first (so the Tab key also
   meets Cancel first), e.g.
       <div class="form-actions justify-content-center">  <?php echo cancel_button(...); ?>  <input type="submit" ...>  </div>
   Add Bootstrap's "justify-content-center" for a centred row (the report forms); without it the row starts at the left
   (the setup lists). Even if a page writes Cancel second, the "order" line below still shows it on the left. */

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;               /* the space between the buttons (replaces the old "ms-2" margin on Cancel) */
}

.form-actions .js-cancel {     /* Cancel - the button made by cancel_button() - always first, on the left */
    order: -1;
}

.form-actions form {           /* a button inside its own small form (the setup lists' "Confirm rename") sits in the row */
    margin: 0;
}

/* THE LIST HEADING LINE -- added 30 Oct 2026 (Chris). Every list page (the setup lists, Users, any future list) prints its
   heading line with list_heading() in includes/occur_functions.php - never its own markup - so they all look alike:
   the heading on the left, all the buttons on the right of the same line:
       [any filter]  [+ Add <item>]  [Active (n) | All (n)]   <- the toggle always at the far right.
   On a narrow screen the buttons drop under the heading, still right-aligned. */

.list-heading {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.list-heading-title {          /* the heading, and anything beside it (the setup lists' (i)) */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.list-actions {                /* the buttons, left to right as list_heading() was given them */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    margin-left: auto;         /* stays on the right even when it wraps under the heading */
}