/* ============================================================
   Tema Info Sete Fibra — Filebrowser do hub
   Seletores baseados no DOM real (Filebrowser v2.60.0):
     #login            (container)
     #login form       (form da tela)
     #login form img   (logo)
     #login form h1    (título)
     .input--block     (inputs)
     .button--block    (botão submit)
   ============================================================ */

:root {
  --infosete-primary: #dc2626;
  --infosete-primary-hover: #b91c1c;
  --infosete-dark: #0b0f14;
  --infosete-card: #1f2937;
  --infosete-text: #f1f5f9;
  --infosete-border: rgba(148, 163, 184, 0.4);
}

/* ============================================================
   GLOBAL
   ============================================================ */
body, html {
  background:
    radial-gradient(ellipse at top, rgba(220, 38, 38, 0.12), transparent 65%),
    linear-gradient(180deg, #0b0f14 0%, #1f2937 100%) !important;
  min-height: 100vh !important;
  color: var(--infosete-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ============================================================
   TELA DE LOGIN  —  #login
   ============================================================ */
#login {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  padding: 1rem;
  background: transparent !important;
}

#login form {
  background: rgba(31, 41, 55, 0.85) !important;
  border: 1px solid var(--infosete-border) !important;
  border-radius: 16px !important;
  padding: 2.5rem 2rem 2rem 2rem !important;
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(220, 38, 38, 0.1) inset !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  max-width: 380px !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.85rem !important;
}

/* LOGO — forçando via background-image pra contornar qualquer cache do <img src> */
#login form img {
  display: block !important;
  width: 96px !important;
  height: 96px !important;
  margin: 0 auto 1rem auto !important;
  /* Esconde o src original e força nosso PNG via CSS */
  content: url("/static/img/logo-infosete.png?v=20260514071553") !important;
  filter: drop-shadow(0 8px 20px rgba(220, 38, 38, 0.35));
  border-radius: 16px;
}

/* TÍTULO "Info Sete Fibra" */
#login form h1 {
  color: var(--infosete-text) !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
  text-align: center !important;
  margin: 0 0 1.5rem 0 !important;
  letter-spacing: 0.5px;
  background: none !important;
}

/* INPUTS */
#login form .input,
#login form .input--block,
.input.input--block {
  background: rgba(11, 15, 20, 0.7) !important;
  border: 1px solid var(--infosete-border) !important;
  color: var(--infosete-text) !important;
  border-radius: 10px !important;
  padding: 0.85rem 1rem !important;
  font-size: 0.95rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  margin: 0 !important;
}

#login form .input--block::placeholder,
.input.input--block::placeholder {
  color: rgba(148, 163, 184, 0.6) !important;
}

#login form .input--block:focus,
.input.input--block:focus {
  border-color: var(--infosete-primary) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18) !important;
  outline: none !important;
}

/* BOTÃO submit */
#login form .button,
#login form .button--block,
.button.button--block,
input[type="submit"].button--block {
  background: linear-gradient(180deg, var(--infosete-primary) 0%, var(--infosete-primary-hover) 100%) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding: 0.9rem 1.25rem !important;
  border-radius: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: transform 0.06s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
  box-shadow: 0 6px 14px rgba(220, 38, 38, 0.3) !important;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-size: 0.95rem !important;
  margin-top: 0.5rem !important;
}

#login form .button--block:hover,
.button.button--block:hover {
  filter: brightness(1.06) !important;
  box-shadow: 0 8px 20px rgba(220, 38, 38, 0.42) !important;
}

#login form .button--block:active,
.button.button--block:active {
  transform: translateY(1px) !important;
}

/* ============================================================
   FAVICON tab no #app#login (já dark, mas garantir contraste)
   ============================================================ */
#app {
  background: transparent !important;
}

/* Hide qualquer texto "File Browser" residual */
.title, .name {
  color: var(--infosete-text) !important;
}