/* =========================================================
   CAMPOS DE ENTRADA SIGMO
   Classe principal: editDestaque

   Compatível com:
   - TUniEdit
   - TUniNumberEdit
   - TUniMemo
   - TUniComboBox
   - Campos com triggers
   ========================================================= */


/* =========================================================
   CORPO PRINCIPAL
   ========================================================= */

.editDestaque .x-form-item-body {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fcfcfd 100%
        ) !important;

    border: 1px solid #cfd4da !important;
    border-radius: 8px !important;

    overflow: hidden !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 2px rgba(16, 24, 40, 0.035),
        0 1px 2px rgba(16, 24, 40, 0.05),
        0 2px 5px rgba(16, 24, 40, 0.04) !important;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease !important;
}


/* =========================================================
   WRAPPERS INTERNOS
   ========================================================= */

.editDestaque .x-form-text-wrap,
.editDestaque .x-form-trigger-wrap,
.editDestaque .x-form-text-default {
    background: transparent !important;

    border: 0 !important;
    border-radius: 8px !important;

    box-shadow: none !important;

    overflow: hidden !important;
}


/* =========================================================
   INPUT E TEXTAREA
   ========================================================= */

.editDestaque input.x-form-field,
.editDestaque textarea.x-form-field {
    background: transparent !important;

    border: 0 !important;
    border-radius: 8px !important;

    box-shadow: none !important;

    color: #30343b !important;

    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;

    padding-left: 10px !important;
    padding-right: 10px !important;

    transition:
        color 0.18s ease,
        background-color 0.18s ease !important;
}


/* =========================================================
   PLACEHOLDER
   ========================================================= */

.editDestaque input.x-form-field::placeholder,
.editDestaque textarea.x-form-field::placeholder {
    color: #9299a3 !important;
    opacity: 1 !important;
}


/* =========================================================
   HOVER
   ========================================================= */

.editDestaque:hover .x-form-item-body {
    border-color: #aeb5bd !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 2px rgba(16, 24, 40, 0.045),
        0 2px 4px rgba(16, 24, 40, 0.07),
        0 3px 8px rgba(16, 24, 40, 0.05) !important;
}


/* =========================================================
   FOCO
   ========================================================= */

.editDestaque.x-form-focus .x-form-item-body,
.editDestaque.x-field-focus .x-form-item-body,
.editDestaque:focus-within .x-form-item-body {
    background: #ffffff !important;

    border-color: #b92847 !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        inset 0 -1px 2px rgba(98, 20, 39, 0.04),
        0 0 0 3px rgba(185, 40, 71, 0.13),
        0 3px 9px rgba(98, 20, 39, 0.10) !important;
}


/* Texto durante o foco */
.editDestaque:focus-within input.x-form-field,
.editDestaque:focus-within textarea.x-form-field {
    color: #25282d !important;
}


/* =========================================================
   TRIGGERS
   ComboBox, NumberEdit, DateEdit etc.
   ========================================================= */

.editDestaque .x-form-trigger {
    background-color: #f7f8f9 !important;

    border: 0 !important;
    border-left: 1px solid #e0e3e7 !important;

    color: #606873 !important;

    transition:
        background-color 0.16s ease,
        color 0.16s ease,
        border-color 0.16s ease !important;
}


/* Hover do trigger */
.editDestaque .x-form-trigger:hover,
.editDestaque .x-form-trigger-over {
    background-color: #f1e7ea !important;
    color: #9e233e !important;
}


/* Trigger durante o foco */
.editDestaque:focus-within .x-form-trigger {
    border-left-color: rgba(185, 40, 71, 0.22) !important;
}


/* Último trigger */
.editDestaque .x-form-trigger:last-child {
    border-radius: 0 7px 7px 0 !important;
}


/* =========================================================
   CAMPO SOMENTE LEITURA
   ========================================================= */

.editDestaque input.x-form-field[readonly],
.editDestaque textarea.x-form-field[readonly],
.editDestaque input.x-form-readonly,
.editDestaque textarea.x-form-readonly {
    background: #f5f6f7 !important;
    color: #68707b !important;

    cursor: default !important;
}


/* Root marcado como somente leitura pelo ExtJS */
.editDestaque.x-form-readonly .x-form-item-body {
    background:
        linear-gradient(
            180deg,
            #f7f8f9 0%,
            #f2f3f5 100%
        ) !important;

    border-color: #d9dde1 !important;

    box-shadow:
        inset 0 1px 2px rgba(16, 24, 40, 0.03) !important;
}


/* Remove o efeito de foco visual em somente leitura */
.editDestaque.x-form-readonly:focus-within .x-form-item-body {
    border-color: #d9dde1 !important;

    box-shadow:
        inset 0 1px 2px rgba(16, 24, 40, 0.03) !important;
}


/* =========================================================
   CAMPO DESABILITADO
   ========================================================= */

.editDestaque.x-item-disabled .x-form-item-body {
    background:
        linear-gradient(
            180deg,
            #f4f5f6 0%,
            #eceef0 100%
        ) !important;

    border-color: #dce0e4 !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.70),
        0 1px 2px rgba(16, 24, 40, 0.04) !important;

    opacity: 0.72 !important;
}


/* Mantém o mesmo estado durante o hover */
.editDestaque.x-item-disabled:hover .x-form-item-body {
    border-color: #dce0e4 !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.70),
        0 1px 2px rgba(16, 24, 40, 0.04) !important;
}


.editDestaque.x-item-disabled input.x-form-field,
.editDestaque.x-item-disabled textarea.x-form-field {
    color: #8c939c !important;
}


.editDestaque.x-item-disabled .x-form-trigger {
    background: #eceef0 !important;
    color: #a1a7ae !important;

    border-left-color: #dde0e4 !important;
}


/* =========================================================
   CAMPO INVÁLIDO
   ========================================================= */

.editDestaque.x-form-invalid .x-form-item-body,
.editDestaque.x-form-item-invalid .x-form-item-body {
    border-color: #d92d45 !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 0 0 3px rgba(217, 45, 69, 0.11),
        0 2px 6px rgba(217, 45, 69, 0.08) !important;
}


/* Campo inválido em foco */
.editDestaque.x-form-invalid:focus-within .x-form-item-body,
.editDestaque.x-form-item-invalid:focus-within .x-form-item-body {
    border-color: #d92d45 !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 0 0 3px rgba(217, 45, 69, 0.14),
        0 3px 9px rgba(217, 45, 69, 0.10) !important;
}


/* =========================================================
   MEMO / DBMEMO — GLOBAL
   Aplicado automaticamente a todo textarea que possuir
   a classe editDestaque no componente
   ========================================================= */


/* Campo principal */
.editDestaque textarea.x-form-field {
    box-sizing: border-box !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 8px !important;

    box-shadow: none !important;

    color: #475467 !important;

    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;

    line-height: 1.48 !important;

    padding: 10px 12px !important;

    /*
      A scrollbar aparece automaticamente quando o conteúdo
      ultrapassar a altura disponível.
    */
    overflow-y: auto !important;
    overflow-x: auto !important;

    scrollbar-gutter: stable !important;

    resize: none !important;
}


/* =========================================================
   SCROLLBAR — CHROME, EDGE E WEBVIEW2
   ========================================================= */

.editDestaque textarea.x-form-field::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
}

.editDestaque textarea.x-form-field::-webkit-scrollbar-track {
    background: #f1f2f4 !important;

    border-left: 1px solid #e2e5e8 !important;
    border-top: 1px solid #e2e5e8 !important;
}

.editDestaque textarea.x-form-field::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            180deg,
            #b7bbc1 0%,
            #979da4 100%
        ) !important;

    border: 2px solid #f1f2f4 !important;
    border-radius: 999px !important;
}

.editDestaque textarea.x-form-field::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(
            180deg,
            #a32a44 0%,
            #841b34 100%
        ) !important;
}

.editDestaque textarea.x-form-field::-webkit-scrollbar-corner {
    background: #f1f2f4 !important;
}


/* =========================================================
   SCROLLBAR — FIREFOX
   ========================================================= */

.editDestaque textarea.x-form-field {
    scrollbar-width: thin !important;
    scrollbar-color: #979da4 #f1f2f4 !important;
}