/* =============================================================
 * Info Sete Telecom — overrides skin "larry" do Roundcube
 * v4.0 — replica EXATAMENTE o padrão visual do ACS Info Sete
 *        (/opt/projects/genieacs/ui/css/info-sete-theme.css)
 *
 * Estrutura HTML do larry (que precisamos disfarçar de ACS):
 *   #login-form           <-- vira .login-card
 *     .box-inner          <-- wrapper
 *       img#logo          <-- vira .login-logo
 *       form              <-- vira .login-form
 *         table > tbody > tr (USER + SENHA)
 *         p.formbuttons > input.button.mainaction
 *
 * Textos do ACS ("WEBMAIL" + "Info Sete Telecom" + footer) injetados
 * via pseudo-elementos sem mexer no template HTML do larry.
 * ============================================================= */

:root {
    --isf-red:        #c4001a;
    --isf-red-dark:   #9c0014;
    --isf-red-bg:     rgba(196, 0, 26, 0.08);
    --neutral-0:      #ffffff;
    --neutral-50:     #f8fafc;
    --neutral-100:    #f1f5f9;
    --neutral-200:    #e2e8f0;
    --neutral-300:    #cbd5e1;
    --neutral-400:    #94a3b8;
    --neutral-500:    #64748b;
    --neutral-700:    #334155;
    --neutral-900:    #0f172a;
}

/* =================================================
 * BODY — gradiente forte vermelho-bordeaux (igual ACS)
 * + padrão decorativo de pontos sutis
 * ================================================= */
body {
    background:
        radial-gradient(ellipse at top left,    rgba(255, 60, 80, 0.18) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(196, 0, 26, 0.35) 0%, transparent 50%),
        linear-gradient(135deg, #0a0004 0%, #2a0010 40%, #5a0014 100%) !important;
    background-image:
        radial-gradient(ellipse at top left,    rgba(255, 60, 80, 0.18) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(196, 0, 26, 0.35) 0%, transparent 50%),
        linear-gradient(135deg, #0a0004 0%, #2a0010 40%, #5a0014 100%) !important;
    min-height: 100vh !important;
    margin: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI",
                 Roboto, system-ui, sans-serif !important;
    color: var(--neutral-900) !important;
}

/* Padrão decorativo de pontos no fundo */
body::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    background-image:
        radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px) !important;
    background-size: 24px 24px !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* =================================================
 * CARD do login (#login-form como .login-card do ACS)
 * ================================================= */
#login-form {
    position: relative !important;
    z-index: 1 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    background-image: none !important;
    border: none !important;
    border-radius: 20px !important;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        0 0 80px rgba(196, 0, 26, 0.25) !important;
    padding: 2.5em 2.5em 2em !important;
    width: 420px !important;
    max-width: calc(100vw - 40px) !important;
    margin: 12vh auto 2em auto !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* Reset .box-inner (wrapper interno do larry) */
#login-form .box-inner {
    background: none !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* Mata decorações antigas */
#login-form .box-bottom,
#login-form::before,
#login-form::after,
#login-form .box-inner::before,
#login-form .box-inner::after {
    display: none !important;
    background: none !important;
}

/* Esconde rodapé externo "Info Sete Telecom - 2026" — virou pseudo no form */
#bottomline {
    display: none !important;
}

/* =================================================
 * LOGO 96x96 (igual ACS) com border-radius 22px,
 * sombra colorida vermelha
 * ================================================= */
#login-form #logo {
    width: 96px !important;
    height: 96px !important;
    max-width: 96px !important;
    max-height: 96px !important;
    margin: 0 auto 1.25em !important;
    border-radius: 22px !important;
    box-shadow:
        0 12px 32px rgba(196, 0, 26, 0.35),
        0 0 0 1px rgba(196, 0, 26, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    display: block !important;
    object-fit: cover !important;
    overflow: hidden !important;
}

/* =================================================
 * TÍTULO "WEBMAIL" via form::before
 * ================================================= */
#login-form form::before {
    content: "WEBMAIL" !important;
    display: block !important;
    margin: 0 0 0.25em !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    color: var(--neutral-900) !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-shadow: none !important;
}

/* =================================================
 * SUBTÍTULO "Info Sete Telecom" via tbody::before
 * ================================================= */
#login-form form table {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}
#login-form form table tbody {
    display: block !important;
    width: 100% !important;
}
#login-form form table tbody::before {
    content: "Info Sete Telecom" !important;
    display: block !important;
    margin: 0 0 2em !important;
    font-size: 0.9rem !important;
    color: var(--neutral-500) !important;
    font-weight: 400 !important;
    text-align: center !important;
}

/* =================================================
 * FORM rows (label em cima, input embaixo)
 * ================================================= */
#login-form form table tr {
    display: block !important;
    width: 100% !important;
    margin-bottom: 1em !important;
    text-align: left !important;
}
#login-form form table td.title {
    display: block !important;
    width: 100% !important;
    padding: 0 0 0.4em 0 !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: var(--neutral-700) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    text-shadow: none !important;
    white-space: normal !important;
    vertical-align: top !important;
}
#login-form form table td.title label {
    color: var(--neutral-700) !important;
    font-weight: 500 !important;
    text-shadow: none !important;
}
#login-form form table td.input {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    vertical-align: top !important;
}

/* =================================================
 * INPUTS estilo ACS — padding generoso, focus glow vermelho
 * ================================================= */
#login-form input[type="text"],
#login-form input[type="password"],
#login-form input[type="email"] {
    width: 100% !important;
    padding: 0.85em 1em !important;
    font-size: 0.95rem !important;
    border-radius: 10px !important;
    border: 1.5px solid var(--neutral-200) !important;
    background: var(--neutral-50) !important;
    background-image: none !important;
    color: var(--neutral-900) !important;
    box-sizing: border-box !important;
    transition: all 200ms !important;
    font-family: inherit !important;
    box-shadow: none !important;
    margin: 0 !important;
}
#login-form input[type="text"]::placeholder,
#login-form input[type="password"]::placeholder {
    color: var(--neutral-400) !important;
}
#login-form input[type="text"]:hover,
#login-form input[type="password"]:hover {
    border-color: var(--neutral-300) !important;
}
#login-form input[type="text"]:focus,
#login-form input[type="password"]:focus {
    background: var(--neutral-0) !important;
    border-color: var(--isf-red) !important;
    box-shadow: 0 0 0 4px var(--isf-red-bg) !important;
    outline: none !important;
}

/* =================================================
 * BOTÃO "Entrar" — full-width, gradient vermelho com sombra colorida
 * ================================================= */
#login-form .formbuttons {
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
}
input.button.mainaction,
input.mainaction {
    width: 100% !important;
    margin-top: 0.5em !important;
    padding: 0.95em 1em !important;
    background: linear-gradient(135deg, var(--isf-red) 0%, var(--isf-red-dark) 100%) !important;
    background-image: linear-gradient(135deg, var(--isf-red) 0%, var(--isf-red-dark) 100%) !important;
    color: var(--neutral-0) !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    cursor: pointer !important;
    text-shadow: none !important;
    box-shadow:
        0 4px 14px rgba(196, 0, 26, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    transition: all 120ms !important;
    font-family: inherit !important;
}
input.button.mainaction:hover,
input.mainaction:hover {
    transform: translateY(-1px) !important;
    box-shadow:
        0 8px 24px rgba(196, 0, 26, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    filter: brightness(1.05) !important;
    background-image: linear-gradient(135deg, var(--isf-red) 0%, var(--isf-red-dark) 100%) !important;
}
input.button.mainaction:active,
input.mainaction:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(196, 0, 26, 0.3) !important;
}

/* =================================================
 * RODAPÉ "Info Sete Fibra · Webmail" — dentro do card,
 * separado por borda fina superior, via form::after
 * ================================================= */
#login-form form::after {
    content: "Info Sete Fibra · Webmail" !important;
    display: block !important;
    margin-top: 1.5em !important;
    padding-top: 1.25em !important;
    border-top: 1px solid var(--neutral-100) !important;
    font-size: 0.75rem !important;
    color: var(--neutral-400) !important;
    letter-spacing: 0.04em !important;
    text-align: center !important;
}

/* =================================================
 * LOGO do HEADER pós-login (id="toplogo")
 * Continua usando logo branca (211x56) — não muda
 * ================================================= */
#topnav #toplogo,
#header #toplogo,
img#toplogo {
    content: url("images/infosete-logo-white.png") !important;
    max-height: 28px !important;
    max-width: 140px !important;
    width: auto !important;
    height: auto !important;
    margin-top: 6px !important;
    margin-right: 8px !important;
}