/*
  Admin modern form controls and buttons. Restyles the Bootstrap 4 classes pages already use,
  so validation and model binding keep working; only the wrapper and a few am- classes are added.

  Label + input + help
    <label asp-for="Amount"></label>
    <input asp-for="Amount" class="form-control" />
    <span asp-validation-for="Amount" class="text-danger"></span>
    <div class="am-help">Shown on the merchant statement.</div>

  Small input (table rows):   <select class="form-control form-control-sm">…</select>
  Textarea:                   <textarea class="form-control" rows="4"></textarea>

  Add-ons
    <div class="input-group">
      <div class="input-group-prepend"><span class="input-group-text">$</span></div>
      <input class="form-control" type="number" />
    </div>

  select2: the dropdown is appended to <body> unless dropdownParent is set, so pass the class too
    $('#TypeId').select2({ dropdownParent: $('#TypeId').closest('.am-admin'),
                           dropdownCssClass: 'am-select2', width: '100%' });

  File input:     <input type="file" class="am-file" accept=".pdf" />

  Checkbox / radios
    <label class="am-check"><input type="checkbox" asp-for="IsShipped" /> Already shipped</label>
    <div class="am-check-group">
      <label class="am-check"><input type="radio" asp-for="IncludePl" value="Yes" /> Yes</label>
      <label class="am-check"><input type="radio" asp-for="IncludePl" value="No" /> No</label>
    </div>

  Character counter: the plugin appends to <body> by default, so keep it inside the wrapper
    $('textarea.max-textarea').maxlength({ appendToParent: true });

  Buttons
    <button type="submit" class="am-btn am-btn-primary">Save</button>
    <button type="button" class="am-btn am-btn-secondary">Cancel</button>
    <button type="button" class="am-btn am-btn-danger am-btn-sm">Delete</button>
    <button type="button" class="am-btn am-btn-ghost">Reset</button>
    <button type="submit" class="am-btn am-btn-primary is-busy" disabled>Saving</button>

  Inline form row (submit lines up with the inputs; replaces m-t-28)
    <div class="am-form-row">
      <div><label>Type</label><select class="form-control">…</select></div>
      <div class="am-grow"><label>Memo</label><input class="form-control" /></div>
      <button type="submit" class="am-btn am-btn-primary">Submit</button>
    </div>
*/

/* DataTables' "Show N entries" / "Search" labels are table chrome, not form labels. */
.am-admin label:not(.am-check):not(.dataTables_wrapper label),
.am-modal label:not(.am-check):not(.dataTables_wrapper label),
.am-admin .am-label,
.am-modal .am-label {
    display: inline-block;
    margin-bottom: 6px;
    font-size: var(--am-text-xs);
    font-weight: 500;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--am-slate);
}

.am-admin .am-help,
.am-modal .am-help {
    margin-top: 4px;
    font-size: 12px;
    color: var(--am-gray);
}

.am-admin .form-control,
.am-admin .am-input,
.am-modal .form-control,
.am-modal .am-input {
    height: 38px;
    padding: 8px 12px;
    font-family: var(--am-font);
    font-size: var(--am-text-base);
    line-height: 20px;
    color: var(--am-navy);
    background-color: var(--am-paper);
    border: 1px solid var(--am-navy-line);
    border-radius: var(--am-radius-md);
    box-shadow: none;
    transition: border-color .15s ease;
}

.am-admin .form-control::placeholder,
.am-admin .am-input::placeholder,
.am-modal .form-control::placeholder,
.am-modal .am-input::placeholder {
    color: var(--am-faint);
}

/* The focus ring itself comes from am-base.css. */
.am-admin .form-control:focus,
.am-admin .am-input:focus,
.am-modal .form-control:focus,
.am-modal .am-input:focus {
    border-color: var(--am-accent);
    background-color: var(--am-paper);
}

.am-admin .form-control:disabled,
.am-admin .form-control[readonly],
.am-admin .am-input:disabled,
.am-modal .form-control:disabled,
.am-modal .form-control[readonly],
.am-modal .am-input:disabled {
    background-color: var(--am-hair-2);
    color: var(--am-slate);
    cursor: not-allowed;
}

/* A readonly field that opens a picker on click (e.g. a daterangepicker date): readonly only stops typing, so it keeps
   the editable look. */
.am-admin .form-control.am-picker[readonly]:not(:disabled),
.am-modal .form-control.am-picker[readonly]:not(:disabled) {
    background-color: var(--am-paper);
    color: var(--am-navy);
    cursor: pointer;
}

.am-admin textarea.form-control,
.am-admin textarea.am-input,
.am-modal textarea.form-control,
.am-modal textarea.am-input {
    height: auto;
}

/* Matches the theme's select.form-control:not([size]):not([multiple]) height rule so it can be overridden. */
.am-admin select.form-control:not([size]):not([multiple]),
.am-modal select.form-control:not([size]):not([multiple]) {
    height: 38px;
}

.am-admin .form-control-sm,
.am-modal .form-control-sm,
.am-admin select.form-control-sm:not([size]):not([multiple]),
.am-modal select.form-control-sm:not([size]):not([multiple]) {
    height: 32px;
    padding: 4px 10px;
    font-size: var(--am-text-sm);
}

.am-admin .input-validation-error,
.am-modal .input-validation-error,
.am-admin .input-validation-error:focus,
.am-modal .input-validation-error:focus {
    border-color: var(--am-red);
}

/* Bootstrap declares .text-danger's color !important; the scoped !important outranks it. */
.am-admin .field-validation-error,
.am-admin .text-danger,
.am-modal .field-validation-error,
.am-modal .text-danger {
    color: var(--am-red) !important;
}

/* Size only validation messages; .text-danger is also used on icons and headings. */
.am-admin .field-validation-error,
.am-admin .text-danger[data-valmsg-for],
.am-modal .field-validation-error,
.am-modal .text-danger[data-valmsg-for] {
    font-size: 12px;
}

/* Mirrors .am-alert.is-error so server and client errors read the same. */
.am-admin .validation-summary-errors,
.am-modal .validation-summary-errors {
    margin-bottom: var(--am-gap);
    padding: 10px 14px;
    font-size: var(--am-text-base);
    color: var(--am-red);
    background-color: var(--am-red-soft);
    border-left: 2px solid var(--am-red);
    border-radius: var(--am-radius-sm);
}

.am-admin .validation-summary-errors ul,
.am-modal .validation-summary-errors ul {
    margin: 0;
    padding-left: 16px;
}

/* Bootstrap's input-group rules flatten the joined corners; only the outer ones are rounded here. */
.am-admin .input-group-prepend .input-group-text,
.am-admin .input-group-append .input-group-text,
.am-modal .input-group-prepend .input-group-text,
.am-modal .input-group-append .input-group-text {
    padding: 0 12px;
    font-family: var(--am-font);
    font-size: var(--am-text-base);
    color: var(--am-slate);
    background-color: var(--am-hair-2);
    border: 1px solid var(--am-navy-line);
}

.am-admin .input-group-prepend .input-group-text,
.am-modal .input-group-prepend .input-group-text {
    border-radius: var(--am-radius-md) 0 0 var(--am-radius-md);
}

.am-admin .input-group-append .input-group-text,
.am-modal .input-group-append .input-group-text {
    border-radius: 0 var(--am-radius-md) var(--am-radius-md) 0;
}

.am-admin .select2-container--default .select2-selection--single,
.am-modal .select2-container--default .select2-selection--single {
    height: 38px;
    background-color: var(--am-paper);
    border: 1px solid var(--am-navy-line);
    border-radius: var(--am-radius-md);
    transition: border-color .15s ease;
}

.am-admin .select2-container--default .select2-selection--single .select2-selection__rendered,
.am-modal .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 12px;
    padding-right: 32px;
    font-family: var(--am-font);
    font-size: var(--am-text-base);
    line-height: 36px;
    color: var(--am-navy);
}

.am-admin .select2-container--default .select2-selection--single .select2-selection__placeholder,
.am-modal .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--am-faint);
}

.am-admin .select2-container--default .select2-selection--single .select2-selection__arrow,
.am-modal .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
    right: 8px;
}

.am-admin .select2-container--default.select2-container--focus .select2-selection--single,
.am-admin .select2-container--default.select2-container--open .select2-selection--single,
.am-modal .select2-container--default.select2-container--focus .select2-selection--single,
.am-modal .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--am-accent);
}

.am-admin .select2-container--default.select2-container--disabled .select2-selection--single,
.am-modal .select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: var(--am-hair-2);
    cursor: not-allowed;
}

/* Unobtrusive validation flags the hidden <select>; select2 renders its box as the next sibling. */
.am-admin select.input-validation-error + .select2-container--default .select2-selection--single,
.am-modal select.input-validation-error + .select2-container--default .select2-selection--single {
    border-color: var(--am-red);
}

/* Covers both a dropdownParent inside the wrapper and a body-appended dropdown tagged am-select2. */
.am-admin .select2-dropdown,
.am-modal .select2-dropdown,
.select2-dropdown.am-select2 {
    font-family: var(--am-font);
    font-size: var(--am-text-base);
    color: var(--am-navy);
    background-color: var(--am-paper);
    border: 1px solid var(--am-accent);
    border-radius: var(--am-radius-md);
    overflow: hidden;
}

.am-admin .select2-container--default .select2-results__option--highlighted[aria-selected],
.am-modal .select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-dropdown.am-select2 .select2-results__option--highlighted[aria-selected] {
    color: var(--am-navy);
    background-color: var(--am-accent-soft);
}

.am-admin .select2-container--default .select2-results__option[aria-selected=true],
.am-modal .select2-container--default .select2-results__option[aria-selected=true],
.select2-dropdown.am-select2 .select2-results__option[aria-selected=true] {
    font-weight: 500;
    background-color: var(--am-hair-2);
}

.am-admin .select2-container--default .select2-search--dropdown .select2-search__field,
.am-modal .select2-container--default .select2-search--dropdown .select2-search__field,
.select2-dropdown.am-select2 .select2-search--dropdown .select2-search__field {
    height: 32px;
    padding: 4px 10px;
    font-family: var(--am-font);
    border: 1px solid var(--am-navy-line);
    border-radius: var(--am-radius-sm);
    outline: none;
}

.am-admin .am-file,
.am-modal .am-file {
    display: block;
    width: 100%;
    font-family: var(--am-font);
    font-size: var(--am-text-base);
    color: var(--am-slate);
}

.am-admin .am-file::file-selector-button,
.am-modal .am-file::file-selector-button {
    height: 38px;
    margin-right: 12px;
    padding: 0 16px;
    font-family: var(--am-font);
    font-size: var(--am-text-base);
    font-weight: 500;
    color: var(--am-navy);
    background-color: var(--am-paper);
    border: 1px solid var(--am-navy-line);
    border-radius: var(--am-radius-md);
    cursor: pointer;
    transition: background-color .15s ease;
}

.am-admin .am-file:hover::file-selector-button,
.am-modal .am-file:hover::file-selector-button {
    background-color: var(--am-navy-soft);
}

.am-admin .am-file:disabled::file-selector-button,
.am-modal .am-file:disabled::file-selector-button {
    opacity: .55;
    cursor: not-allowed;
}

.am-admin .am-file.input-validation-error::file-selector-button,
.am-modal .am-file.input-validation-error::file-selector-button {
    border-color: var(--am-red);
}

.am-admin .am-check,
.am-modal .am-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: var(--am-text-base);
    color: var(--am-ink);
    cursor: pointer;
}

.am-admin .am-check input,
.am-modal .am-check input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--am-accent);
    cursor: pointer;
}

.am-admin .am-check:has(input:disabled),
.am-modal .am-check:has(input:disabled) {
    opacity: .55;
    cursor: not-allowed;
}

.am-admin .am-check-group,
.am-modal .am-check-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
}

/* The plugin also adds the theme's .label badge classes; strip the badge so it reads as plain text. */
.am-admin .bootstrap-maxlength,
.am-modal .bootstrap-maxlength {
    margin: 0;
    padding: 0;
    font-size: var(--am-text-xs);
    color: var(--am-gray);
    background: none;
}

.am-admin .bootstrap-maxlength.label-danger,
.am-modal .bootstrap-maxlength.label-danger {
    color: var(--am-red);
}

.am-admin .am-btn,
.am-modal .am-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    font-family: var(--am-font);
    font-size: var(--am-text-base);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--am-radius-md);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.am-admin .am-btn:hover,
.am-modal .am-btn:hover {
    text-decoration: none;
}

.am-admin .am-btn-primary,
.am-modal .am-btn-primary {
    color: var(--am-paper);
    background-color: var(--am-accent);
}

.am-admin .am-btn-primary:hover:not(:disabled),
.am-modal .am-btn-primary:hover:not(:disabled) {
    color: var(--am-paper);
    background-color: var(--am-accent-dark);
}

.am-admin .am-btn-secondary,
.am-modal .am-btn-secondary {
    color: var(--am-navy);
    background-color: var(--am-paper);
    border-color: var(--am-navy-line);
}

.am-admin .am-btn-secondary:hover:not(:disabled),
.am-modal .am-btn-secondary:hover:not(:disabled) {
    color: var(--am-navy);
    background-color: var(--am-navy-soft);
}

.am-admin .am-btn-danger,
.am-modal .am-btn-danger,
.am-admin .am-btn-danger:hover,
.am-modal .am-btn-danger:hover {
    color: var(--am-paper);
    background-color: var(--am-red);
}

.am-admin .am-btn-ghost,
.am-modal .am-btn-ghost {
    color: var(--am-slate);
    background-color: transparent;
    border-color: transparent;
}

.am-admin .am-btn-ghost:hover:not(:disabled),
.am-modal .am-btn-ghost:hover:not(:disabled) {
    color: var(--am-ink);
    background-color: var(--am-hair-2);
}

.am-admin .am-btn-sm,
.am-modal .am-btn-sm {
    height: 32px;
}

.am-admin .am-btn:disabled,
.am-admin .am-btn.disabled,
.am-modal .am-btn:disabled,
.am-modal .am-btn.disabled {
    opacity: .55;
    cursor: not-allowed;
}

.am-admin .am-btn.is-busy,
.am-modal .am-btn.is-busy {
    pointer-events: none;
}

/* am-spin is defined in am-components.css. */
.am-admin .am-btn.is-busy::after,
.am-modal .am-btn.is-busy::after {
    content: "";
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: am-spin .7s linear infinite;
}

.am-admin .am-form-row,
.am-modal .am-form-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.am-admin .am-form-row > *,
.am-modal .am-form-row > * {
    position: relative;
    margin-bottom: 0;
}

/* Out of flow so a message under one field doesn't push the bottom-aligned submit out of line. */
.am-admin .am-form-row .field-validation-error,
.am-modal .am-form-row .field-validation-error {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    white-space: nowrap;
}

.am-admin .am-form-row .am-grow,
.am-modal .am-form-row .am-grow {
    flex: 1;
    min-width: 0;
}

@media (max-width: 899.98px) {
    .am-admin .am-form-row,
    .am-modal .am-form-row {
        flex-wrap: wrap;
    }

    .am-admin .am-form-row .am-grow,
    .am-modal .am-form-row .am-grow {
        flex-basis: 100%;
    }
}