/* ==========================================================================
   Neuraplex — accessibility overrides (WCAG 2.1 AA)

   Loaded LAST, after assets/css/style.bundle.css, so it wins over the
   Metronic theme without editing the vendor bundle.

   Phase 0/1: focus visibility, skip link, screen-reader utility (1-3).
   Phase 2:   colour-contrast token overrides (4).
   Phase 2a:  composite control polish - select2, Choices, field buttons (5).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Focus visibility  — WCAG 2.4.7 (Focus Visible), 1.4.11 (Non-text Contrast)

   The Metronic bundle sets `outline: 0` in 59 separate rules, which removes
   the only visible focus indicator. We restore a single consistent ring.

   `:focus-visible` fires for keyboard navigation (and always for text inputs),
   never for a plain mouse click on a button — so mouse users see no change.

   Ring colour is the brand purple #741F7B, which measures 9.5:1 against white.
   _Layout links aside/light.css after aside/dark.css, so the light aside theme
   wins and every focusable surface in the app sits on a light background - the
   purple ring has sufficient contrast everywhere and needs no white backing.

   The ring is offset so it reads clearly on elements that draw no border of
   their own (links, icon buttons). Elements that DO draw their own border are
   handled in section 1a, otherwise the offset gap turns one indicator into what
   looks like two borders.
   -------------------------------------------------------------------------- */

*:focus-visible {
    outline: 2px solid #741F7B !important;
    outline-offset: 2px !important;
}


/* --------------------------------------------------------------------------
   1a. Bordered controls — one perimeter, not two

   Form controls already paint a 1px border, and the theme recolours it to
   #69b3ff on focus (2.2:1 — below the 3:1 that 1.4.11 asks of a focus
   indicator). An offset ring on top of that produced a coloured border, a
   white gap and a purple ring: three lines reading as two borders.

   Instead the control's own border becomes the accent colour and a soft halo
   sits immediately outside it. There is no gap, so it reads as a single
   thickened border rather than a second box. #741F7B on white is 9.44:1, well
   past the 3:1 needed.

   `outline: 2px solid transparent` is deliberate: it is invisible normally,
   but Windows High Contrast Mode forces transparent outlines to a system
   colour, so keyboard focus survives there even though the halo does not.
   -------------------------------------------------------------------------- */

.form-control:focus,
.form-control:focus-visible,
.custom-select:focus,
.custom-file-input:focus ~ .custom-file-label,
.bootstrap-tagsinput.focus {
    border-color: #741F7B !important;
    box-shadow: 0 0 0 3px rgba(116, 31, 123, 0.16) !important;
    outline: 2px solid transparent !important;
    outline-offset: 0 !important;
}

/* Programmatic focus (skip-link target, dialog containers) must not paint a
   ring. These carry tabindex="-1" and never match :focus-visible, but we state
   it explicitly so the intent survives future edits. */
[tabindex="-1"]:focus {
    outline: none;
}


/* --------------------------------------------------------------------------
   2. Skip link  — WCAG 2.4.1 (Bypass Blocks)

   Off-screen until focused, then pinned to the top-left above all theme
   chrome (Metronic's fixed header sits at z-index 95-100).
   -------------------------------------------------------------------------- */

.skip-link {
    position: absolute;
    top: -100px;
    left: 8px;
    z-index: 10000;
    padding: 12px 20px;
    background-color: #741F7B;
    color: #ffffff !important;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 4px 4px;
    transition: top 0.15s ease-in-out;
}

.skip-link:focus,
.skip-link:focus-visible {
    top: 0;
    color: #ffffff !important;
    text-decoration: underline;
}


/* --------------------------------------------------------------------------
   3. Screen-reader-only utility

   Bootstrap 4's `.sr-only` already ships in the bundle, but it is not
   guaranteed to be present on the standalone (Layout = null) views, which
   pull a different set of stylesheets. `.np-sr-only` is ours and is always
   available wherever this file is loaded.
   -------------------------------------------------------------------------- */

.np-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Visible again when focused — for skip links and other off-screen controls
   that must reveal themselves on keyboard focus. */
.np-sr-only-focusable:focus,
.np-sr-only-focusable:focus-visible {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: inherit !important;
    margin: inherit !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}


/* ==========================================================================
   4. Colour contrast — WCAG 1.4.3 (Contrast Minimum, 4.5:1 for normal text)

   Every value below was measured against the actual rendered background, not
   estimated. Ratios are stated per rule as "current -> new".

   Only failing pairs are overridden. .text-danger (6.21:1), .text-info
   (4.55:1), .btn-light-danger (5.11:1) and .label-light-primary (8.14:1)
   already pass and are deliberately left untouched, so the palette shifts as
   little as possible.
   ========================================================================== */


/* --------------------------------------------------------------------------
   4a. Grey text tokens

   #b5b5c3 (gray-500) and #7e8299 (gray-600) are used for real body text -
   the header greeting, the username, the footer copyright and a large amount
   of secondary label text. Both are below 4.5:1. #5E6278 is gray-700 from the
   theme's own scale, so this stays inside the existing palette rather than
   introducing a new grey.
   -------------------------------------------------------------------------- */

/* 2.03:1 -> 6.01:1 */
.text-muted {
    color: #5E6278 !important;
}

/* 3.79:1 -> 6.01:1 */
.text-dark-50 {
    color: #5E6278 !important;
}


/* --------------------------------------------------------------------------
   4b. Semantic text colours

   These carry status meaning in the patient table - "Paid" renders as
   .text-success and "Sent" as .text-warning - so they are informational text,
   not decoration, and must meet 4.5:1.

   .text-danger and .text-info already pass and are not touched.
   -------------------------------------------------------------------------- */

/* 2.40:1 -> 6.72:1 */
.text-success {
    color: #0b6b10 !important;
}

/* 2.02:1 -> 5.93:1 */
.text-warning {
    color: #8a5a00 !important;
}

/* Status dots on the patient accordion (<i class="fas fa-circle text-success">
   etc.) are graphical objects, not text, so WCAG asks 3:1 (1.4.11) rather than
   4.5:1 (1.4.3). Left to inherit the text tokens above they render noticeably
   muddier than the Patient Progress timeline they sit alongside. These use the
   same just-past-3:1 palette as that timeline so the two read as one system.
     completed #12a318 3.35:1   active #c07f00 3.35:1 */
i.fa-circle.text-success {
    color: #12a318 !important;
}

i.fa-circle.text-warning {
    color: #c07f00 !important;
}


/* --------------------------------------------------------------------------
   4c. Nav pills — the 14 patient-status tabs

   Idle tab labels were gray-500 on white; the active tab was white on the
   pale lilac #c4b5c4, which is the single worst pair in the app at 1.95:1.
   The active state moves to the brand purple already used by .text-primary
   and the page headings.
   -------------------------------------------------------------------------- */

/* 2.03:1 -> 6.01:1 */
.nav.nav-pills .nav-link {
    color: #5E6278 !important;
}

/* 1.95:1 -> 9.44:1 */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #ffffff !important;
    background-color: #741F7B !important;
}


/* --------------------------------------------------------------------------
   4d. .btn-light-primary — the "Add New" button

   Every other .btn-light-* variant follows the Metronic pattern of coloured
   text on a pale fill of the same hue. Only -primary had been customised to
   white on pale lilac (1.95:1). This restores the variant to its own family's
   pattern - and to what its own :disabled state already does
   (color:#741F7B; background:#e1f0ff).

   The theme sets border-color:#ffffff, which leaves the button with no
   visible boundary on a white page. A brand-purple border gives the control a
   9.44:1 edge, satisfying 1.4.11 for non-text contrast.

   :hover / :focus / :active were already white on #741F7B (9.44:1) and are
   left exactly as they are.
   -------------------------------------------------------------------------- */

/* 1.95:1 -> 8.29:1 */
.btn.btn-light-primary {
    color: #741F7B !important;
    background-color: #f5eef6 !important;
    border-color: #741F7B !important;
}

.btn.btn-light-primary i {
    color: #741F7B !important;
}

/* Hover/focus/active are white on #741F7B (9.44:1). The colour must be
   restated here: the rest-state rule above carries !important and would
   otherwise paint purple text on the purple hover fill. See 4e. */
.btn.btn-light-primary.focus:not(.btn-text),
.btn.btn-light-primary:focus:not(.btn-text),
.btn.btn-light-primary:hover:not(.btn-text):not(:disabled):not(.disabled),
.btn.btn-light-primary:not(:disabled):not(.disabled).active,
.btn.btn-light-primary:not(:disabled):not(.disabled):active:not(.btn-text) {
    color: #ffffff !important;
    background-color: #741F7B !important;
}

.btn.btn-light-primary.focus:not(.btn-text) i,
.btn.btn-light-primary:focus:not(.btn-text) i,
.btn.btn-light-primary:hover:not(.btn-text):not(:disabled):not(.disabled) i,
.btn.btn-light-primary:not(:disabled):not(.disabled).active i,
.btn.btn-light-primary:not(:disabled):not(.disabled):active:not(.btn-text) i {
    color: #ffffff !important;
}


/* --------------------------------------------------------------------------
   4e. Remaining .btn-light-* variants

   Same audit applied across the family. The hover states matter as much as
   the rest states here: .btn-light-warning:hover was white on #FDEA12, a
   1.24:1 pair that is effectively invisible.

   IMPORTANT — why every hover/focus/active rule below restates `color`:

   The theme's own hover rule is `color: #fff` with NO !important. The rest
   state rules here carry !important, and !important beats specificity, so a
   bare `.btn.btn-light-success { color: #0b6b10 !important }` would leak into
   the hover state and paint dark green text on the dark green hover fill -
   an invisible button. Restating `color: #ffffff !important` alongside each
   hover background keeps the two in lockstep.

   Any future addition to section 4d/4e must set colour and background as a
   pair for BOTH the rest and the hover/focus/active states.
   -------------------------------------------------------------------------- */

/* 1.82:1 -> 5.09:1 */
.btn.btn-light-success {
    color: #0b6b10 !important;
}

.btn.btn-light-success i {
    color: #0b6b10 !important;
}

/* 2.40:1 -> 6.72:1 */
.btn.btn-light-success.focus:not(.btn-text),
.btn.btn-light-success:focus:not(.btn-text),
.btn.btn-light-success:hover:not(.btn-text):not(:disabled):not(.disabled),
.btn.btn-light-success:not(:disabled):not(.disabled).active,
.btn.btn-light-success:not(:disabled):not(.disabled):active:not(.btn-text) {
    color: #ffffff !important;
    background-color: #0b6b10 !important;
}

.btn.btn-light-success.focus:not(.btn-text) i,
.btn.btn-light-success:focus:not(.btn-text) i,
.btn.btn-light-success:hover:not(.btn-text):not(:disabled):not(.disabled) i,
.btn.btn-light-success:not(:disabled):not(.disabled).active i,
.btn.btn-light-success:not(:disabled):not(.disabled):active:not(.btn-text) i {
    color: #ffffff !important;
}

/* 1.14:1 -> 5.56:1 */
.btn.btn-light-warning {
    color: #7a5f00 !important;
}

.btn.btn-light-warning i {
    color: #7a5f00 !important;
}

/* 1.24:1 -> 6.06:1 */
.btn.btn-light-warning.focus:not(.btn-text),
.btn.btn-light-warning:focus:not(.btn-text),
.btn.btn-light-warning:hover:not(.btn-text):not(:disabled):not(.disabled),
.btn.btn-light-warning:not(:disabled):not(.disabled).active,
.btn.btn-light-warning:not(:disabled):not(.disabled):active:not(.btn-text) {
    color: #ffffff !important;
    background-color: #7a5f00 !important;
}

.btn.btn-light-warning.focus:not(.btn-text) i,
.btn.btn-light-warning:focus:not(.btn-text) i,
.btn.btn-light-warning:hover:not(.btn-text):not(:disabled):not(.disabled) i,
.btn.btn-light-warning:not(:disabled):not(.disabled).active i,
.btn.btn-light-warning:not(:disabled):not(.disabled):active:not(.btn-text) i {
    color: #ffffff !important;
}

/* 3.74:1 -> 5.78:1 */
.btn.btn-light-info {
    color: #6a2fd6 !important;
}

.btn.btn-light-info i {
    color: #6a2fd6 !important;
}

/* 4.55:1 -> 7.02:1 */
.btn.btn-light-info.focus:not(.btn-text),
.btn.btn-light-info:focus:not(.btn-text),
.btn.btn-light-info:hover:not(.btn-text):not(:disabled):not(.disabled),
.btn.btn-light-info:not(:disabled):not(.disabled).active,
.btn.btn-light-info:not(:disabled):not(.disabled):active:not(.btn-text) {
    color: #ffffff !important;
    background-color: #6a2fd6 !important;
}

.btn.btn-light-info.focus:not(.btn-text) i,
.btn.btn-light-info:focus:not(.btn-text) i,
.btn.btn-light-info:hover:not(.btn-text):not(:disabled):not(.disabled) i,
.btn.btn-light-info:not(:disabled):not(.disabled).active i,
.btn.btn-light-info:not(:disabled):not(.disabled):active:not(.btn-text) i {
    color: #ffffff !important;
}

/* .btn-light-danger is untouched in both states (5.11:1 rest, 6.21:1 hover),
   so it has no !important rest colour and needs no hover restatement. */


/* --------------------------------------------------------------------------
   4f. Status pills (.label-light-*)

   Used in the patient and enquiry tables for "High Priority" / "Normal" /
   "Yes" / "No". The fills are kept so the colour coding is unchanged; only
   the label text is darkened.

   .label-light-success sits on #4ae13973, which composites to #adf1a6 over
   white - that blended value is what the ratios below are measured against.

   NO !important HERE, deliberately. The theme's own .label.label-light-*
   rules carry no !important, so an equal-specificity rule in this file wins
   on source order alone. Adding !important would ALSO beat the inline
   style='color: white' that the controllers put on the solid status pills
   (Sent / Submitted / Paid), painting dark text on their dark fills. Those
   pills pass on their own - see the controller-side fills - and must keep
   their white text.
   -------------------------------------------------------------------------- */

/* 1.82:1 -> 5.09:1 */
.label.label-light-success {
    color: #0b6b10;
}

/* 1.11:1 -> 6.58:1 */
.label.label-light-warning {
    color: #6b5300;
}


/* ==========================================================================
   5. Composite control polish

   Covers the widgets that replace a native control with their own DOM -
   select2, Choices.js, tagsinput - plus the mic / auto-punctuate icon buttons
   that sit beside the note textareas.

   The goal is that every field in a form row looks like the same control:
   same border, same radius, same height, same focus treatment.
   ========================================================================== */


/* --------------------------------------------------------------------------
   5a. select2 — match the native field shell

   The theme gives .select2-selection height:auto and line-height:0, so a
   select2 sits a few pixels shorter than the .form-control next to it in the
   same row. Pinning min-height to the .form-control formula lines them up.
   -------------------------------------------------------------------------- */

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: calc(1.5em + 1.3rem + 2px);
    border: 1px solid #e4e6ef;
    border-radius: 0.42rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Subtle hover affordance, matching what a native input gets. */
.select2-container--default .select2-selection--single:hover,
.select2-container--default .select2-selection--multiple:hover {
    border-color: #c8ccda;
}


/* --------------------------------------------------------------------------
   5b. select2 — a single focus indicator

   Two separate things were drawing at once: this shell, and the tiny
   .select2-search__field inside it, which is a real <input> and so picked up
   the global offset ring from section 1. The result was a heavy outer box
   with a second rectangle floating inside it.

   The shell owns the focus indicator (same border + halo as every other
   field). The inner search input is an implementation detail of the widget
   and is silenced - focus is still perfectly visible, just drawn once.

   `--open` is included alongside `--focus` because select2 swaps to the open
   state as soon as the dropdown appears, which is exactly when the field is
   being used.
   -------------------------------------------------------------------------- */

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: #741F7B;
    box-shadow: 0 0 0 3px rgba(116, 31, 123, 0.16);
}

.select2-container .select2-search__field:focus,
.select2-container .select2-search__field:focus-visible,
.select2-search--inline .select2-search__field:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* The dropdown's own search box is a standalone field and keeps a real
   indicator - it is the only focusable thing on screen while open. */
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #e4e6ef;
    border-radius: 0.42rem;
    padding: 0.5rem 0.75rem;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus,
.select2-container--default .select2-search--dropdown .select2-search__field:focus-visible {
    border-color: #741F7B !important;
    box-shadow: 0 0 0 3px rgba(116, 31, 123, 0.16) !important;
    outline: 2px solid transparent !important;
}

/* Dropdown panel: lift it off the page rather than relying on a hairline. */
.select2-container--default .select2-dropdown {
    border: 1px solid #e4e6ef;
    border-radius: 0.42rem;
    box-shadow: 0 0.5rem 1.5rem rgba(24, 28, 50, 0.12);
}

/* USR-009 - the open panel must be wide enough to read the options.
   select2 writes an inline `width` on the panel equal to the field it belongs
   to, so a select in a .col-md-4 clipped long labels such as "Associate Speech
   and Language Therapist". `min-width` beats an inline `width` in the cascade,
   which widens the panel without overriding select2's own positioning. The
   min() keeps it inside the viewport on a phone, where 22rem would overflow.
   Applied to the open panel only, so the closed field keeps its grid width. */
.select2-container--open .select2-dropdown {
    min-width: min(22rem, calc(100vw - 2rem));
}

/* Fallback for labels longer than even the widened panel: wrap rather than
   truncate, so no option can become unreadable. */
.select2-container--default .select2-results__option {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Highlighted option. The theme's default is a pale tint that reads as barely
   changed; the brand purple at 9.44:1 makes the keyboard position obvious. */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
    background-color: #741F7B;
    color: #ffffff;
}

/* Selected chips on a multi-select: white on #741F7B is 9.44:1. */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #741F7B;
    border-color: #741F7B;
    color: #ffffff;
    border-radius: 0.3rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #ffffff;
    opacity: 0.85;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #ffffff;
    opacity: 1;
}


/* --------------------------------------------------------------------------
   5c. Choices.js — same shell, same focus
   -------------------------------------------------------------------------- */

.choices .choices__inner {
    min-height: calc(1.5em + 1.3rem + 2px);
    border: 1px solid #e4e6ef;
    border-radius: 0.42rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
    border-color: #741F7B;
    box-shadow: 0 0 0 3px rgba(116, 31, 123, 0.16);
}

.choices .choices__input:focus,
.choices .choices__input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.choices .choices__list--dropdown {
    border: 1px solid #e4e6ef;
    border-radius: 0.42rem;
    box-shadow: 0 0.5rem 1.5rem rgba(24, 28, 50, 0.12);
}


/* --------------------------------------------------------------------------
   5d. Placeholder contrast — WCAG 1.4.3

   Placeholder text is text. The theme uses #b5b5c3 throughout, which is
   2.03:1. These fields use placeholders as their only visible hint
   ("Select Clinician", "Enter Notes", "Select an option"), so the text has to
   be readable: #5E6278 is 6.01:1.
   -------------------------------------------------------------------------- */

.form-control::placeholder {
    color: #5E6278;
    opacity: 1;
}

.form-control::-webkit-input-placeholder {
    color: #5E6278;
    opacity: 1;
}

.form-control::-moz-placeholder {
    color: #5E6278;
    opacity: 1;
}

.form-control:-ms-input-placeholder {
    color: #5E6278;
    opacity: 1;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-selection--multiple .select2-selection__placeholder,
.choices .choices__placeholder {
    color: #5E6278;
    opacity: 1;
}

/* The dropdown chevron was #7e8299 (3.79:1). As the only visual cue that the
   field opens a list it is a meaningful graphic and needs 3:1 minimum. */
.select2-container--default .select2-selection--single .select2-selection__arrow:after,
.select2-container--default .select2-selection--multiple .select2-selection__arrow:after {
    color: #5E6278;
}


/* --------------------------------------------------------------------------
   5e. Field action buttons — mic and auto-punctuate

   These two sit together beside every note textarea but were built as
   different elements with different styling: the mic was an <a> padded to an
   irregular rectangle with `color: white` on a #e4e6ef fill (1.15:1 - the
   icon was very nearly invisible), the punctuate control a themed .btn. They
   never matched in size or colour.

   The markup is now <button type="button"> for both, so they share one
   treatment: an equal square icon button using the same pale-purple-on-white
   language as .btn-light-primary. 2.5rem square clears the 24x24 CSS px
   minimum for pointer targets with room to spare.

   Icon #741F7B on #f5eef6 is 8.29:1; recording state is white on #741F7B at
   9.44:1.
   -------------------------------------------------------------------------- */

.mic-button,
.btn.punctuate,
.btn.udformpunctuatebtn,
.btn.udformremarkpunctuatebtn,
.btn.secondpersontext,
.btn.secondpersontextundo,
.btn.answerpunctuatebtn,
.btn.remarkpunctuatebtn,
.answerspeechtotextbtn,
.remarkspeechtotextbtn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0 !important;
    border: 1px solid #741F7B !important;
    border-radius: 0.42rem !important;
    background-color: #f5eef6 !important;
    color: #741F7B !important;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.mic-button i,
.btn.punctuate i,
.btn.udformpunctuatebtn i,
.btn.udformremarkpunctuatebtn i,
.btn.secondpersontext i,
.btn.secondpersontextundo i,
.btn.answerpunctuatebtn i,
.btn.remarkpunctuatebtn i,
.answerspeechtotextbtn i,
.remarkspeechtotextbtn i {
    font-size: 1rem !important;
    line-height: 1;
    padding: 0 !important;
    color: inherit !important;
}

.mic-button:hover,
.btn.punctuate:hover,
.btn.udformpunctuatebtn:hover,
.btn.udformremarkpunctuatebtn:hover,
.btn.secondpersontext:hover,
.btn.secondpersontextundo:hover,
.btn.answerpunctuatebtn:hover,
.btn.remarkpunctuatebtn:hover,
.answerspeechtotextbtn:hover,
.remarkspeechtotextbtn:hover {
    background-color: #741F7B !important;
    border-color: #741F7B !important;
    color: #ffffff !important;
}

/* Recording is a state change, not a hover - it stays solid until stopped. */
.mic-button.recording {
    background-color: #741F7B !important;
    border-color: #741F7B !important;
    color: #ffffff !important;
}

.mic-button.recording i {
    color: #ffffff !important;
}


/* --------------------------------------------------------------------------
   5f. Alignment of the action buttons

   On the Initial Assessment form these fields carry four tools, and they were
   split across two separate col-1 columns - "convert to third-party speech"
   and "undo" in one, mic and punctuate in the other. Two independent columns
   cannot line up with each other, so the four buttons rendered as a ragged
   2x2 with mismatched sizes.

   The markup now puts all of them in one .np-field-actions container, so this
   is a plain flex-wrap grid rather than the :has() guesswork it replaces:
   four buttons in a col-2 wrap to a tidy 2x2, two buttons in a col-1 stack
   vertically, and a wide container lays them out in a single row. The margin
   reset clears the assorted mb-1 / mr-2 / mr-5 utilities that individual
   sites had accumulated.
   -------------------------------------------------------------------------- */

.np-field-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.5rem;
}

.np-field-actions > .btn,
.np-field-actions > .mic-button {
    margin: 0 !important;
    flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   5g. Controls promoted from <div> to <button>

   #kt_scrolltop and the topbar user toggle were divs with click handlers -
   unreachable by keyboard (WCAG 2.1.1) and roleless (4.1.2). They are real
   buttons now, so the browser's default button chrome has to be cleared for
   them to look exactly as they did before.
   -------------------------------------------------------------------------- */

button#kt_scrolltop {
    padding: 0;
    border: 0;
    background-color: transparent;
    -webkit-appearance: none;
    appearance: none;
}

button#kt_quick_user_toggle {
    border: 0;
    background-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    text-align: left;
}

/* Four-tool fields (Initial Assessment and friends) pin to exactly two columns.
   Left to wrap freely they reflowed to 3-up-1-down at some widths and 4 across
   at others, so the block never looked settled. Two fixed columns give a stable
   2x2 at every zoom level, and the container is only as wide as it needs to be. */
.np-field-actions--2col {
    display: grid;
    grid-template-columns: repeat(2, 2.5rem);
    justify-content: flex-start;
}

/* ==========================================================================
   6. Session-expiry warning dialog — WCAG 2.2.1 Timing Adjustable

   Built and shown by Scripts/Global/accessibility.js (initSessionWarning).
   Overlay z-index sits above every theme layer (Metronic modals top out
   around 1050; the skip link uses 10000).
   ========================================================================== */

.np-session-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10500;
    align-items: center;
    justify-content: center;
    background-color: rgba(24, 28, 50, 0.55);
}

.np-session-dialog {
    background-color: #ffffff;
    border-radius: 0.42rem;
    box-shadow: 0 1rem 3rem rgba(24, 28, 50, 0.3);
    max-width: 26rem;
    width: calc(100% - 2rem);
    padding: 1.5rem 1.75rem;
}

.np-session-dialog h2 {
    color: #741F7B;
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
}

/* 6.01:1 on white */
.np-session-dialog p {
    color: #5E6278;
    margin: 0 0 1.25rem;
}

.np-session-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* Primary action: white on brand purple, 9.44:1 */
.np-session-stay {
    background-color: #741F7B;
    border: 1px solid #741F7B;
    border-radius: 0.42rem;
    color: #ffffff;
    cursor: pointer;
    font-weight: 600;
    padding: 0.55rem 1.1rem;
}

.np-session-stay:hover {
    background-color: #5d1963;
    border-color: #5d1963;
}

/* Secondary action: brand purple on pale purple, 8.29:1 */
.np-session-logout {
    background-color: #f5eef6;
    border: 1px solid #741F7B;
    border-radius: 0.42rem;
    color: #741F7B;
    cursor: pointer;
    font-weight: 600;
    padding: 0.55rem 1.1rem;
}

.np-session-logout:hover {
    background-color: #741F7B;
    color: #ffffff;
}