/**
 * RotaMestre Webmail - CSS Customizado
 * Versão: 1.0.1 - Limpo (apenas login)
 * Data: 01/11/2025
 * Roundcube: 1.6.11 (Elastic Skin)
 */

/* ============================================
   IMPORTAR FONTES
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Viga&family=Nunito+Sans:wght@300;400;600;700;800&display=swap');

/* ============================================
   BRANDING ROTAMESTRE - TELA DE LOGIN APENAS
   Mantém layout original do Elastic, aplica apenas cores e logo
   ============================================ */

/* === LOGIN: oculta logo do topo e elemento #logo do Elastic === */
body.task-login .logo,
body.task-login #logo {
  display: none !important;
}

/* Ocultar texto solto do pagetitle que aparece fora dos elementos */
body.task-login {
  font-size: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
}

/* Restaurar estilos para todos os elementos filhos */
body.task-login * {
  font-size: initial !important;
  text-indent: 0 !important;
  overflow: visible !important;
}

/* Background gradient suave */
body.task-login #layout-content {
  background: linear-gradient(135deg, #f9fafb 0%, #e5e7eb 100%) !important;
}

/* Logo RotaMestre no card de login */
body.task-login #login-form::before {
  content: "";
  display: block;
  width: 200px;
  height: 60px;
  margin: 0 auto 20px auto;
  background-image: url('/skins/rotamestre/images/logo-horizontal.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Subtítulo "Webmail Corporativo" */
body.task-login #login-form::after {
  content: "Webmail Corporativo";
  display: block;
  text-align: center;
  font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  color: #9ca3af;
  margin-bottom: 32px;
  margin-top: -8px;
  font-weight: 400;
  letter-spacing: 0.3px;
}

/* Botão de login - cor laranja RotaMestre */
body.task-login #login-form button#rcmloginsubmit,
body.task-login #login-form .button.mainaction {
  background: linear-gradient(135deg, #f7a02a 0%, #f59522 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 4px 12px rgba(247, 160, 42, 0.3) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.task-login #login-form button#rcmloginsubmit:hover,
body.task-login #login-form .button.mainaction:hover {
  background: linear-gradient(135deg, #e89420 0%, #e08918 100%) !important;
  box-shadow: 0 6px 20px rgba(247, 160, 42, 0.4) !important;
  transform: translateY(-2px) !important;
}

body.task-login #login-form button#rcmloginsubmit:active,
body.task-login #login-form .button.mainaction:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(247, 160, 42, 0.3) !important;
}

/* Focus nos inputs - cor azul RotaMestre */
body.task-login #login-form input:focus {
  border-color: #1e6eb8 !important;
  box-shadow: 0 0 0 4px rgba(30, 110, 184, 0.08) !important;
  outline: none !important;
}

/* Links na tela de login */
body.task-login a {
  color: #1e6eb8 !important;
  font-weight: 600 !important;
}

body.task-login a:hover {
  color: #0D5A9C !important;
}

/* Responsividade - Mobile */
@media (max-width: 768px) {
  body.task-login #login-form::before {
    width: 160px !important;
    height: 48px !important;
    margin-bottom: 16px !important;
  }

  body.task-login #login-form::after {
    font-size: 12px !important;
    margin-bottom: 24px !important;
  }
}

/* ============================================
   INTERFACE INTERNA - LOGO NO HEADER
   ============================================ */

/* Substituir logo SVG do Elastic pelo favicon RotaMestre */
#logo {
  content: url('/skins/rotamestre/images/favicon.png') !important;
  max-height: 40px !important;
  width: auto !important;
}