/* ============================================================================
   VIME Webmail — camada de estilização (injetada via nginx sub_filter)
   Bulwark v1.7.4 (Next.js + Tailwind v4 + shadcn/ui). Tema = variáveis CSS.
   Esta folha carrega DEPOIS do CSS do app -> vence por ordem; cores usam
   !important para blindar contra ordem/especificidade.
   Identidade: indigo VIME #6366f1 (botão usa indigo-600 #4f46e5 p/ contraste
   AA com texto branco), dark = slate #0f172a, acento lime #a3e635 (decorativo).
   ========================================================================== */

/* ---- timings de marca (reaproveitados em transições e @keyframes) -------- */
:root{
  --vime-dur-fast: .12s;
  --vime-dur:      .2s;
  --vime-dur-slow: .42s;
  --vime-ease:     cubic-bezier(.4, 0, .2, 1);
  --vime-ease-out: cubic-bezier(0, 0, .2, 1);
}

/* ============================ TEMA CLARO =================================== */
:root{
  --color-primary:             #4f46e5 !important; /* indigo-600 (AA c/ branco) */
  --color-primary-foreground:  #ffffff !important;
  --color-ring:                #6366f1 !important; /* foco = indigo VIME       */
  --color-accent:              #eef2ff !important; /* hover suave (indigo-50)  */
  --color-accent-foreground:   #4338ca !important; /* indigo-700               */
  --color-sidebar-accent:            #eef2ff !important;
  --color-sidebar-accent-foreground: #4338ca !important;
  --color-selection:            #e0e7ff !important; /* indigo-100              */
  --color-selection-foreground: #3730a3 !important; /* indigo-800              */
  --color-unread:  #6366f1 !important;
  --color-info:    #6366f1 !important;
  --color-chart-1: #6366f1 !important;
  --color-chart-5: #a3e635 !important; /* lime nos gráficos                    */
}

/* ============================ TEMA ESCURO ================================= */
.dark{
  --color-background:         #0f172a !important; /* slate-900 (marca VIME)    */
  --color-foreground:         #e2e8f0 !important;
  --color-card:               #1e293b !important; /* slate-800                 */
  --color-card-foreground:    #e2e8f0 !important;
  --color-popover:            #1e293b !important;
  --color-popover-foreground: #e2e8f0 !important;
  --color-secondary:          #1e293b !important;
  --color-secondary-foreground:#e2e8f0 !important;
  --color-muted:              #1e293b !important;
  --color-muted-foreground:   #94a3b8 !important; /* slate-400 (AA em slate-900)*/
  --color-border:             #334155 !important; /* slate-700                 */
  --color-input:              #334155 !important;
  --color-ring:               #818cf8 !important; /* indigo-400                */
  --color-primary:            #6366f1 !important; /* indigo VIME em fundo dark */
  --color-primary-foreground: #ffffff !important;
  --color-accent:             #312e81 !important; /* indigo-900 hover          */
  --color-accent-foreground:  #e0e7ff !important;
  --color-sidebar:            #0f172a !important;
  --color-sidebar-foreground: #e2e8f0 !important;
  --color-sidebar-border:     #1e293b !important;
  --color-sidebar-accent:            #1e293b !important;
  --color-sidebar-accent-foreground: #e0e7ff !important;
  --color-selection:            #312e81 !important;
  --color-selection-foreground: #c7d2fe !important;
  --color-unread:  #818cf8 !important;
  --color-info:    #818cf8 !important;
  --color-chart-1: #818cf8 !important;
  --color-chart-5: #a3e635 !important;
}

/* ====================== POLIMENTO DE INTERAÇÃO ============================ */
/* Transições suaves em tudo que é interativo (seletores estáveis)           */
a, button, summary,
[role="button"], [role="tab"], [role="menuitem"], [role="option"], [role="link"],
input, textarea, select{
  transition:
    background-color var(--vime-dur)      var(--vime-ease),
    color            var(--vime-dur)      var(--vime-ease),
    border-color     var(--vime-dur)      var(--vime-ease),
    box-shadow       var(--vime-dur)      var(--vime-ease),
    opacity          var(--vime-dur)      var(--vime-ease),
    transform        var(--vime-dur-fast) var(--vime-ease-out);
}

/* Feedback tátil de clique (transform não afeta o fluxo do layout) */
button:active:not(:disabled),
[role="button"]:active{ transform: scale(.97); }

/* Sombra de marca sutil ao passar o mouse em botões */
button:hover:not(:disabled){ box-shadow: 0 1px 3px rgba(99,102,241,.18); }

/* Links de conteúdo (sem role) ganham cor de marca no hover */
a:not([role]):hover{ color: var(--color-primary); }

/* Foco por teclado: brilho de marca (acessibilidade + identidade) */
:focus-visible{ animation: vime-focus-glow .5s var(--vime-ease-out); }

/* Seleção de texto e barra de rolagem na cor da marca */
::selection{ background: var(--color-selection); color: var(--color-selection-foreground); }
*{ scrollbar-color: var(--color-ring) transparent; }
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--color-ring) 55%, transparent);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover{ background: var(--color-ring); }

/* ============================ LOGIN ====================================== */
/* O logo animado de login é nossa URL (hook estável). Entrada + leve float. */
img[src*="vime-logo-animated"]{
  animation:
    vime-fade-in-up var(--vime-dur-slow) var(--vime-ease-out) both,
    vime-logo-float 6s var(--vime-ease) 1s infinite;
  will-change: transform, opacity;
}

/* ============================ @KEYFRAMES ================================= */
@keyframes vime-fade-in-up{
  from{ opacity: 0; transform: translateY(10px); }
  to  { opacity: 1; transform: translateY(0);    }
}
@keyframes vime-logo-float{
  0%, 100%{ transform: translateY(0);    }
  50%     { transform: translateY(-5px); }
}
@keyframes vime-focus-glow{
  0%  { box-shadow: 0 0 0 0   rgba(99,102,241,.45); }
  100%{ box-shadow: 0 0 0 5px rgba(99,102,241,0);   }
}

/* ===================== RESPONSIVO (mobile-friendly) ====================== */
@media (max-width: 640px){
  /* No celular: mantém a entrada, remove o float infinito (bateria/foco) */
  img[src*="vime-logo-animated"]{
    animation: vime-fade-in-up var(--vime-dur-slow) var(--vime-ease-out) both;
  }
  ::-webkit-scrollbar{ width: 6px; height: 6px; }
}

/* ============== ACESSIBILIDADE: reduzir movimento ======================= */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  img[src*="vime-logo-animated"]{ animation: none !important; }
  button:active:not(:disabled),
  [role="button"]:active{ transform: none !important; }
  :focus-visible{ animation: none !important; }
}