/* ============================================
   DOCS SAÚDE - Login
   Réplica fiel do clinica-web (Next.js)
   bg-gradient-to-br from-teal-950 via-teal-900 to-teal-800
   ============================================ */

*, *::before, *::after {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}

html {
    height: 100% !important;
}

body, body.scFormPage {
    min-height: 100vh !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    /* from-teal-950 via-teal-900 to-teal-800 */
    background: linear-gradient(to bottom right, #042f2e, #134e4a, #115e59) !important;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    padding: 24px 16px !important;
    margin-top: 0 !important;
}

/* ── Wrapper externo (max-w-sm = 384px) ── */
#main_table_form {
    width: 384px !important;
    max-width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-collapse: collapse !important;
}

#main_table_form > tbody > tr > td {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* ── Logo / Título (text-center mb-8) ── */
#sc_login_header {
    text-align: center !important;
    margin-bottom: 32px !important;
    display: block !important;
}

/* inline-flex w-16 h-16 rounded-2xl bg-white/10 backdrop-blur mb-4 */
#sc_login_icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 64px !important;
    height: 64px !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    margin-bottom: 16px !important;
}

#sc_login_icon svg {
    width: 32px !important;
    height: 32px !important;
    stroke: #ffffff !important;
    fill: none !important;
}

/* text-2xl font-bold text-white */
#sc_login_title {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
    display: block !important;
    margin-bottom: 4px !important;
}

/* text-teal-300 text-sm mt-1 */
#sc_login_subtitle {
    font-size: 14px !important;
    color: #5eead4 !important;
    display: block !important;
    margin-top: 4px !important;
}

/* ── Card branco (bg-white rounded-2xl shadow-2xl p-8) ── */
.scFormBorder {
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    padding: 32px !important;
    border: none !important;
    width: 100% !important;
}

/* text-lg font-semibold text-neutral-800 mb-6 */
#sc_card_title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #262626 !important;
    margin-bottom: 24px !important;
    display: block !important;
}

/* ── Tabelas internas ── */
.scFormTable,
table#hidden_bloco_0,
table#hidden_bloco_1 {
    width: 100% !important;
    border: none !important;
    background: transparent !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

/* ── space-y-4 entre campos ── */
tr {
    display: block !important;
    margin-bottom: 16px !important;
}

/* ── Labels (text-neutral-700 text-sm font-medium) ── */
.scFormLabelOdd,
.scFormLabelEven,
td.css_login_label,
td.css_pswd_label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #404040 !important;
    margin-bottom: 6px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    width: 100% !important;
}

/* ── Células de dados ── */
.scFormDataOdd,
.scFormDataEven,
td.css_login_line,
td.css_pswd_line {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    width: 100% !important;
}

/* ── Inputs (h-10 = 40px, rounded-lg, border-input) ── */
input#id_sc_field_login,
input#id_sc_field_pswd,
.scFormObjectOdd,
.scFormObjectEven {
    height: 40px !important;
    width: 100% !important;
    padding: 0 12px !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    color: #171717 !important;
    background: transparent !important;
    outline: none !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
    display: block !important;
    -webkit-appearance: none !important;
}

input#id_sc_field_login:focus,
input#id_sc_field_pswd:focus {
    border-color: #a1a1aa !important;
    box-shadow: 0 0 0 3px rgba(161, 161, 170, 0.3) !important;
}

/* Placeholder */
input#id_sc_field_login::placeholder,
input#id_sc_field_pswd::placeholder {
    color: #a3a3a3 !important;
}

.scFormObjectOddWm,
.scFormObjectEvenWm {
    color: #a3a3a3 !important;
}

/* ── Toolbar ── */
.scFormToolbar {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.scFormToolbarPadding {
    padding: 0 !important;
    background: transparent !important;
}

/* ── Botão Entrar (w-full h-10 bg-teal-700 hover:bg-teal-800 text-white font-medium) ── */
input#sub_form_b,
a#sub_form_b,
input.scButton_default,
a.scButton_default {
    display: block !important;
    width: 100% !important;
    height: 40px !important;
    padding: 0 16px !important;
    background-color: #0f766e !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background-color 0.15s !important;
    text-align: center !important;
    text-decoration: none !important;
    line-height: 40px !important;
    -webkit-appearance: none !important;
    margin-top: 8px !important;
}

input#sub_form_b:hover,
a#sub_form_b:hover,
input.scButton_default:hover {
    background-color: #115e59 !important;
}

/* ── Select de idioma ── */
select[name="nmgp_idioma_b"],
.scFormToolbarInput {
    width: 100% !important;
    height: 32px !important;
    padding: 0 8px !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    color: #737373 !important;
    background: #fafafa !important;
    margin-bottom: 12px !important;
    cursor: pointer !important;
    outline: none !important;
}

/* ── Link esqueceu senha ── */
td.css_links_line {
    text-align: center !important;
    padding-top: 8px !important;
}

a.scFormLinkOdd,
a.scFormLinkEven,
td.css_links_line a {
    color: #0f766e !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

a.scFormLinkOdd:hover,
td.css_links_line a:hover {
    text-decoration: underline !important;
}

/* ── Esconder elementos desnecessários ── */
.scFormPopupBubble,
span.scFormPopupBubble,
#id_debug_window,
form[name="form_ajax_redir_1"],
form[name="form_ajax_redir_2"] {
    display: none !important;
}

/* ── Mensagem de erro ── */
/* text-sm text-red-600 bg-red-50 border border-red-200 rounded-lg px-3 py-2 */
#id_error_display_table_frame {
    border-radius: 8px !important;
    overflow: hidden !important;
}

.scFormErrorTitle {
    background: #fef2f2 !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid #fecaca !important;
}

.scFormErrorTitleFont {
    color: #dc2626 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

.scFormErrorMessage {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
}

/* ── Mobile ── */
@media (max-width: 480px) {
    .scFormBorder {
        padding: 24px 20px !important;
    }
}