/* Shared DealerEFX / AbsoluteMails form-control system. Keep both copies identical. */
:root {
    --app-control-border: #aebdca;
    --app-control-border-focus: #1595d3;
    --app-control-text: #253746;
    --app-control-muted-bg: #f4f7f9;
    --app-button-blue-border: #b7cfe1;
    --app-button-blue-bg: #edf5fa;
    --app-button-blue-text: #416b88;
    --app-button-blue-hover-border: #79a7c6;
    --app-button-blue-hover-bg: #dcecf6;
    --app-button-blue-hover-text: #285d80;
    --app-button-green-border: #acd7b8;
    --app-button-green-bg: #ebf7ee;
    --app-button-green-text: #34734a;
    --app-button-green-hover-border: #6eb483;
    --app-button-green-hover-bg: #d9f0df;
    --app-button-green-hover-text: #245f38;
    --app-button-red-border: #e5b6b6;
    --app-button-red-bg: #fceded;
    --app-button-red-text: #984848;
    --app-button-red-hover-border: #d18484;
    --app-button-red-hover-bg: #f8dddd;
    --app-button-red-hover-text: #843434;
}

:where(
    input:not([type]),
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="search"],
    input[type="time"],
    select,
    textarea,
    .inputbox:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"])
):not(.ui-datepicker *):not(.tox *) {
    box-sizing: border-box;
    min-height: 35px !important;
    padding: 7px 9px !important;
    border: 1px solid var(--app-control-border) !important;
    border-radius: 4px !important;
    background-color: #fff !important;
    background-image: none !important;
    box-shadow: 0 1px 2px rgba(37, 55, 70, .05) !important;
    color: var(--app-control-text) !important;
    font-family: Roboto, "Open Sans", Verdana, Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

:where(select):not(.ui-datepicker *):not(.tox *) {
    padding-right: 30px !important;
    cursor: pointer;
}

:where(textarea):not(.ui-datepicker *):not(.tox *) {
    min-height: 84px !important;
    resize: vertical;
}

:where(
    input:not([type]),
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="search"],
    input[type="time"],
    select,
    textarea,
    .inputbox:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"])
):not(.ui-datepicker *):not(.tox *):focus {
    border-color: var(--app-control-border-focus) !important;
    outline: 2px solid rgba(21, 149, 211, .15) !important;
    outline-offset: 0;
    box-shadow: 0 0 0 1px rgba(21, 149, 211, .04) !important;
}

:where(input, textarea)::placeholder {
    color: #7b8b97;
    opacity: 1;
}

:where(input, select, textarea):disabled:not(.ui-datepicker *):not(.tox *),
:where(input, textarea)[readonly]:not(.ui-datepicker *):not(.tox *) {
    background-color: var(--app-control-muted-bg) !important;
    color: #60717d !important;
    cursor: not-allowed;
}

:where(input[type="checkbox"], input[type="radio"]) {
    accent-color: #1595d3;
}

:where(form label):not(.ui-datepicker *):not(.tox *),
form tr > td.darkgrey14b:has(+ td :is(input:not([type="hidden"]), select, textarea)) {
    color: #30495c !important;
    font-family: Roboto, "Open Sans", Verdana, Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}

:where(.app-field-label) {
    font-family: Roboto, "Open Sans", Verdana, Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}

:where(.app-page-title, .lightblueB16) {
    color: #1595d3 !important;
    font-family: Verdana, Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
}

:where(input[type="file"]) {
    box-sizing: border-box;
    min-height: 35px;
    padding: 4px;
    border: 1px solid var(--app-control-border);
    border-radius: 4px;
    background: #fff;
    color: var(--app-control-text);
    font: 400 13px/1.35 Roboto, "Open Sans", Verdana, Arial, sans-serif;
}

:where(input[type="file"])::file-selector-button {
    min-height: 27px;
    margin-right: 8px;
    padding: 4px 10px;
    border: 1px solid #ccd7df;
    border-radius: 4px;
    background: #f5f7f9;
    color: #526776;
    cursor: pointer;
    font: 400 12px/1.2 Roboto, "Open Sans", Verdana, Arial, sans-serif;
}

.app-file-picker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    max-width: 100%;
    vertical-align: middle;
}

.app-file-picker .app-file-picker__native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    white-space: nowrap !important;
}

.app-file-picker__trigger {
    flex: 0 0 auto;
    white-space: nowrap;
}

.app-file-picker__name {
    display: inline-block;
    flex: 1 1 auto;
    min-width: 0;
    max-width: min(320px, 42vw);
    overflow: hidden;
    color: #344957;
    font: 400 11px/1.3 Roboto, "Open Sans", Verdana, Arial, sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-file-picker__clear {
    display: inline-flex;
    flex: 0 0 19px;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    margin: 0;
    padding: 0 0 2px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #d71920;
    font: 700 21px/19px Arial, Helvetica, sans-serif;
    cursor: pointer;
}

.app-file-picker__clear[hidden] {
    display: none !important;
}

.app-file-picker__clear:hover,
.app-file-picker__clear:focus-visible {
    background: #ffe8e8;
    outline: 2px solid rgba(215, 25, 32, .18);
    outline-offset: 1px;
}

:where(
    .button,
    .btn,
    .crm-button,
    .cm-button,
    .ae-hb__submit,
    button,
    input[type="submit"],
    input[type="button"],
    input[type="reset"]
):not(.closebtn):not(#open_menu):not(.defx-account-menu__toggle):not(.ae-account-menu__toggle):not(.action-message__close):not(.ll-icon-button):not(.dt-icon-button):not(.ymm-icon-button):not(.ll-template-toggle):not(.dt-template-toggle):not(.ymm-model-toggle):not(.ae-builder-tool):not(.cm-action-menu-toggle):not(.cm-action-menu-item):not(.ae-sig-menu-toggle):not(.ae-sig-menu-item):not(.ae-hb__modal-shade):not(.ae-hb__modal-close):not(.ae-hb__flex-open):not(.ae-hb__trash):not(.ae-hb__upload-toggle):not(.ae-hb__gallery-toggle):not(.ae-hb__file-clear):not(.app-file-picker__clear):not(.sentEmailReportClear):not([class*="tox-"]):not([class*="ui-"]) {
    box-sizing: border-box !important;
    min-height: 31px !important;
    padding: 5px 11px !important;
    border: 1px solid var(--app-action-border, var(--app-button-blue-border)) !important;
    border-radius: 5px !important;
    background: var(--app-action-bg, var(--app-button-blue-bg)) !important;
    box-shadow: none !important;
    color: var(--app-button-blue-text) !important;
    cursor: pointer;
    font-family: Roboto, "Open Sans", Verdana, Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-align: center;
    text-decoration: none;
    -webkit-user-select: none;
    user-select: none;
    vertical-align: middle;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease, transform .08s ease;
}

:where(
    .button,
    .btn,
    .crm-button,
    .cm-button,
    .ae-hb__submit,
    button,
    input[type="submit"],
    input[type="button"],
    input[type="reset"]
):not(.closebtn):not(#open_menu):not(.defx-account-menu__toggle):not(.ae-account-menu__toggle):not(.action-message__close):not(.ll-icon-button):not(.dt-icon-button):not(.ymm-icon-button):not(.ll-template-toggle):not(.dt-template-toggle):not(.ymm-model-toggle):not(.ae-builder-tool):not(.cm-action-menu-toggle):not(.cm-action-menu-item):not(.ae-sig-menu-toggle):not(.ae-sig-menu-item):not(.ae-hb__modal-shade):not(.ae-hb__modal-close):not(.ae-hb__flex-open):not(.ae-hb__trash):not(.ae-hb__upload-toggle):not(.ae-hb__gallery-toggle):not(.ae-hb__file-clear):not(.app-file-picker__clear):not(.sentEmailReportClear):not([class*="tox-"]):not([class*="ui-"]):hover {
    border-color: var(--app-action-hover-border, var(--app-button-blue-hover-border)) !important;
    background: var(--app-action-hover-bg, var(--app-button-blue-hover-bg)) !important;
    color: var(--app-button-blue-hover-text) !important;
}

:where(
    .button,
    .btn,
    .crm-button,
    .cm-button,
    .ae-hb__submit,
    button,
    input[type="submit"],
    input[type="button"],
    input[type="reset"]
):not(.closebtn):not(#open_menu):not(.defx-account-menu__toggle):not(.ae-account-menu__toggle):not(.action-message__close):not(.ll-icon-button):not(.dt-icon-button):not(.ymm-icon-button):not(.ll-template-toggle):not(.dt-template-toggle):not(.ymm-model-toggle):not(.ae-builder-tool):not(.cm-action-menu-toggle):not(.cm-action-menu-item):not(.ae-sig-menu-toggle):not(.ae-sig-menu-item):not(.ae-hb__modal-shade):not(.ae-hb__modal-close):not(.ae-hb__flex-open):not(.ae-hb__trash):not(.ae-hb__upload-toggle):not(.ae-hb__gallery-toggle):not(.ae-hb__file-clear):not(.app-file-picker__clear):not(.sentEmailReportClear):not([class*="tox-"]):not([class*="ui-"]):focus-visible {
    border-color: var(--app-action-hover-border, var(--app-button-blue-hover-border)) !important;
    background: var(--app-action-hover-bg, var(--app-button-blue-hover-bg)) !important;
    color: var(--app-button-blue-hover-text) !important;
    outline: 2px solid rgba(21, 149, 211, .18) !important;
    outline-offset: 2px;
}

:where(.app-button-success, .btn-success, .cm-button-success, .ae-hb__submit, .ymm-helpful-save, .ll-email-editor-save, .ymm-emailer-send),
:where(input[type="submit"], input[type="button"])[style*="#83FF91" i],
:where(input[type="submit"], input[type="button"])[value^="Add" i],
:where(input[type="submit"], input[type="button"])[value^="Save" i],
:where(input[type="submit"], input[type="button"])[value^="Send" i],
:where(input[type="submit"], input[type="button"])[value^="Update" i],
:where(input[type="submit"], input[type="button"])[value^="Upload" i],
:where(input[type="submit"], input[type="button"])[value^="Restore" i] {
    --app-action-border: var(--app-button-green-border);
    --app-action-bg: var(--app-button-green-bg);
    --app-action-text: var(--app-button-green-text);
    --app-action-hover-border: var(--app-button-green-hover-border);
    --app-action-hover-bg: var(--app-button-green-hover-bg);
    --app-action-hover-text: var(--app-button-green-hover-text);
}

:where(.app-button-danger, .btn-danger, .cm-button-danger, .ymm-helpful-reset),
:where(input[type="submit"], input[type="button"], input[type="reset"])[value^="Cancel" i],
:where(input[type="submit"], input[type="button"], input[type="reset"])[value^="Delete" i],
:where(input[type="submit"], input[type="button"], input[type="reset"])[value^="Remove" i],
:where(input[type="submit"], input[type="button"], input[type="reset"])[value^="Reset" i] {
    --app-action-border: var(--app-button-red-border);
    --app-action-bg: var(--app-button-red-bg);
    --app-action-text: var(--app-button-red-text);
    --app-action-hover-border: var(--app-button-red-hover-border);
    --app-action-hover-bg: var(--app-button-red-hover-bg);
    --app-action-hover-text: var(--app-button-red-hover-text);
}

:where(.app-button-neutral, .btn-secondary, .ae-hb__modal-cancel) {
    --app-action-border: #ccd7df;
    --app-action-bg: #f5f7f9;
    --app-action-text: #526776;
    --app-action-hover-border: #aebcc6;
    --app-action-hover-bg: #e8edf1;
    --app-action-hover-text: #3d5566;
}

:where(input[type="submit"], input[type="button"])[style*="#E2E487" i] {
    --app-action-border: #cbd59b;
    --app-action-bg: #f3f6df;
    --app-action-text: #626b2e;
    --app-action-hover-border: #abb86b;
    --app-action-hover-bg: #e8edca;
    --app-action-hover-text: #4d5620;
}

:where(input[type="submit"], input[type="button"])[style*="#FFD469" i] {
    --app-action-border: #e8ce91;
    --app-action-bg: #fff5dc;
    --app-action-text: #74591c;
    --app-action-hover-border: #d2ad58;
    --app-action-hover-bg: #fcebc1;
    --app-action-hover-text: #604710;
}

:where(input[type="submit"], input[type="button"])[style*="#F292FF" i] {
    --app-action-border: #d8b3df;
    --app-action-bg: #f7eafa;
    --app-action-text: #76407e;
    --app-action-hover-border: #ba82c5;
    --app-action-hover-bg: #efd9f4;
    --app-action-hover-text: #602d69;
}

:where(input[type="submit"], input[type="button"])[style*="#5EBAFF" i] {
    --app-action-border: var(--app-button-blue-border);
    --app-action-bg: var(--app-button-blue-bg);
    --app-action-text: var(--app-button-blue-text);
}

.app-button-group {
    box-sizing: border-box;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px !important;
}

.app-button-group > form {
    margin: 0;
}

:where(button, .button, .btn, input[type="submit"], input[type="button"], input[type="reset"]):disabled {
    opacity: .55;
    cursor: not-allowed !important;
    transform: none !important;
}

@media (max-width: 640px) {
    :where(
        input:not([type]),
        input[type="text"],
        input[type="email"],
        input[type="password"],
        input[type="tel"],
        input[type="url"],
        input[type="number"],
        input[type="date"],
        input[type="datetime-local"],
        input[type="month"],
        input[type="search"],
        input[type="time"],
        select,
        textarea
    ):not(.ui-datepicker *):not(.tox *) {
        max-width: 100%;
    }
}