/**
 * ============================================================================
 * DRAWER CONFIRM - DESIGN SYSTEM SIDASP
 * ============================================================================
 *
 * Estilos para drawers que funcionam como modais de confirmação.
 * Aplica cores e estilos similares aos modais do tipo "confirm" para
 * manter consistência visual.
 *
 * Usado em: Funcionalidades v2 com type: "drawer" e renderAction
 *
 * @version 1.0.0
 * @author SIDASP Design System
 * @date 2026-01-07
 */

/* ============================================================================
   DRAWER CONFIRM - CORES DO MODAL
   ============================================================================ */

/**
 * Aplica cores do modal confirm aos formulários dentro do drawer
 */
.drawer.drawer-confirm .drawer__body {
    background: var(--color-bg-primary, #FFFFFF);
}

/**
 * Títulos e textos com cores do modal
 */
.drawer.drawer-confirm .drawer__body h3,
.drawer.drawer-confirm .drawer__body h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-neutral-800);
    margin: 0 0 20px 0;
    line-height: 1.4;
}

/**
 * Labels de formulário com cores do modal
 */
.drawer.drawer-confirm .drawer__body label,
.drawer.drawer-confirm .drawer__body .form-label,
.drawer.drawer-confirm .drawer__body .input-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-neutral-800);
}

/**
 * Inputs e textareas com cores do modal
 */
.drawer.drawer-confirm .drawer__body input[type="text"],
.drawer.drawer-confirm .drawer__body input[type="email"],
.drawer.drawer-confirm .drawer__body input[type="number"],
.drawer.drawer-confirm .drawer__body input[type="tel"],
.drawer.drawer-confirm .drawer__body input[type="url"],
.drawer.drawer-confirm .drawer__body input[type="password"],
.drawer.drawer-confirm .drawer__body textarea,
.drawer.drawer-confirm .drawer__body select,
.drawer.drawer-confirm .drawer__body .input,
.drawer.drawer-confirm .drawer__body .select-native {
    background: var(--color-text-light);
    border: 1px solid var(--color-border-light);
    color: var(--color-neutral-800);
}

.drawer.drawer-confirm .drawer__body input[type="text"]:focus,
.drawer.drawer-confirm .drawer__body input[type="email"]:focus,
.drawer.drawer-confirm .drawer__body input[type="number"]:focus,
.drawer.drawer-confirm .drawer__body input[type="tel"]:focus,
.drawer.drawer-confirm .drawer__body input[type="url"]:focus,
.drawer.drawer-confirm .drawer__body input[type="password"]:focus,
.drawer.drawer-confirm .drawer__body textarea:focus,
.drawer.drawer-confirm .drawer__body select:focus,
.drawer.drawer-confirm .drawer__body .input:focus,
.drawer.drawer-confirm .drawer__body .select-native:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(62, 104, 251, 0.1);
}

/* ============================================================================
   FOOTER COM CORES DO MODAL CONFIRM
   ============================================================================ */

/**
 * Footer do drawer com cores do modal
 */
.drawer.drawer-confirm .drawer__footer {
    background: var(--color-text-light);
    border-top: 1px solid var(--color-border-light);
    padding: 16px 24px;
}

/**
 * Botões do footer com estilos do modal confirm
 */
.drawer.drawer-confirm .drawer__footer button {
    font-size: 14px;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

/**
 * Botão Cancelar - estilo outline como no modal
 */
.drawer.drawer-confirm .drawer__footer button.btn-outline,
.drawer.drawer-confirm .drawer__footer button[data-drawer-close] {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
}

.drawer.drawer-confirm .drawer__footer button.btn-outline:hover,
.drawer.drawer-confirm .drawer__footer button[data-drawer-close]:hover {
    background: var(--color-bg-secondary);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

/**
 * Botão Confirmar - estilo primary como no modal
 */
.drawer.drawer-confirm .drawer__footer button.btn-primary,
.drawer.drawer-confirm .drawer__footer button[data-drawer-submit] {
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    color: var(--color-text-light);
}

.drawer.drawer-confirm .drawer__footer button.btn-primary:hover,
.drawer.drawer-confirm .drawer__footer button[data-drawer-submit]:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.drawer.drawer-confirm .drawer__footer button.btn-primary:active,
.drawer.drawer-confirm .drawer__footer button[data-drawer-submit]:active {
    transform: scale(0.98);
}

/* ============================================================================
   FORM GROUPS - ESPAÇAMENTO CONSISTENTE
   ============================================================================ */

/**
 * Espaçamento de form groups como no modal
 */
.drawer.drawer-confirm .drawer__body .form-group,
.drawer.drawer-confirm .drawer__body .input-group,
.drawer.drawer-confirm .drawer__body .mdl-textfield {
    margin-bottom: 20px;
}

.drawer.drawer-confirm .drawer__body .form-group:last-child,
.drawer.drawer-confirm .drawer__body .input-group:last-child,
.drawer.drawer-confirm .drawer__body .mdl-textfield:last-child {
    margin-bottom: 0;
}

/* ============================================================================
   HELPER TEXT
   ============================================================================ */

/**
 * Textos de ajuda com cores do modal
 */
.drawer.drawer-confirm .drawer__body .form-text,
.drawer.drawer-confirm .drawer__body .input-helper,
.drawer.drawer-confirm .drawer__body .help-text {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-top: 4px;
}

/* ============================================================================
   MENSAGENS DE ERRO
   ============================================================================ */

/**
 * Mensagens de erro com cores do modal
 */
.drawer.drawer-confirm .drawer__body .error,
.drawer.drawer-confirm .drawer__body .invalid-feedback,
.drawer.drawer-confirm .drawer__body .input-error {
    font-size: 13px;
    color: var(--color-danger);
    margin-top: 4px;
}

.drawer.drawer-confirm .drawer__body input.error,
.drawer.drawer-confirm .drawer__body textarea.error,
.drawer.drawer-confirm .drawer__body select.error,
.drawer.drawer-confirm .drawer__body .input.is-invalid {
    border-color: var(--color-danger);
}

/* ============================================================================
   CAMPOS OBRIGATÓRIOS
   ============================================================================ */

/**
 * Marcador de campo obrigatório
 */
.drawer.drawer-confirm .drawer__body label.required::after,
.drawer.drawer-confirm .drawer__body .form-label.required::after,
.drawer.drawer-confirm .drawer__body .input-label-required::after {
    content: ' *';
    color: var(--color-danger);
}

/* ============================================================================
   COMPATIBILIDADE COM MDL (Material Design Lite)
   ============================================================================ */

/**
 * Suporte a campos MDL ainda não migrados
 */
.drawer.drawer-confirm .drawer__body .mdl-textfield__input {
    background: var(--color-text-light);
    border: 1px solid var(--color-border-light);
    color: var(--color-neutral-800);
    padding: 10px 12px;
    border-radius: 6px;
}

.drawer.drawer-confirm .drawer__body .mdl-textfield__label {
    color: var(--color-text-secondary);
}

.drawer.drawer-confirm .drawer__body .mdl-textfield.is-focused .mdl-textfield__label,
.drawer.drawer-confirm .drawer__body .mdl-textfield.is-dirty .mdl-textfield__label {
    color: var(--color-primary);
}

/* ============================================================================
   RESPONSIVO
   ============================================================================ */

@media (max-width: 640px) {
    .drawer.drawer-confirm .drawer__footer {
        flex-direction: column;
        gap: 12px;
    }

    .drawer.drawer-confirm .drawer__footer button {
        width: 100%;
    }
}

/* ============================================================================
   DARK MODE (OPCIONAL)
   ============================================================================ */

.dark .drawer.drawer-confirm .drawer__body,
[data-theme="dark"] .drawer.drawer-confirm .drawer__body,
body.dark-mode .drawer.drawer-confirm .drawer__body {
    background: var(--color-bg-dark);
}

.dark .drawer.drawer-confirm .drawer__body h3,
.dark .drawer.drawer-confirm .drawer__body h4,
[data-theme="dark"] .drawer.drawer-confirm .drawer__body h3,
[data-theme="dark"] .drawer.drawer-confirm .drawer__body h4,
body.dark-mode .drawer.drawer-confirm .drawer__body h3,
body.dark-mode .drawer.drawer-confirm .drawer__body h4 {
    color: var(--color-text-light);
}

.dark .drawer.drawer-confirm .drawer__body input,
.dark .drawer.drawer-confirm .drawer__body textarea,
.dark .drawer.drawer-confirm .drawer__body select,
[data-theme="dark"] .drawer.drawer-confirm .drawer__body input,
[data-theme="dark"] .drawer.drawer-confirm .drawer__body textarea,
[data-theme="dark"] .drawer.drawer-confirm .drawer__body select,
body.dark-mode .drawer.drawer-confirm .drawer__body input,
body.dark-mode .drawer.drawer-confirm .drawer__body textarea,
body.dark-mode .drawer.drawer-confirm .drawer__body select {
    background: var(--color-bg-secondary);
    border-color: var(--color-border);
    color: var(--color-text-light);
}

.dark .drawer.drawer-confirm .drawer__footer,
[data-theme="dark"] .drawer.drawer-confirm .drawer__footer,
body.dark-mode .drawer.drawer-confirm .drawer__footer {
    background: var(--color-bg-secondary);
    border-top-color: var(--color-border);
}