/* ================================================================
   IMA — Keycloak Login Theme
   Tokens: IMA Design System v1.0
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  --ima-blue:       #00406D;
  --ima-blue-700:   #0A4F82;
  --ima-blue-900:   #002E50;
  --ima-accent:     #009FE3;
  --ima-accent-600: #0089C7;
  --ima-green:      #5FBF49;
  --ima-red:        #E30613;
  --gray-900:       #1A2430;
  --gray-700:       #45525F;
  --gray-500:       #6E7A86;
  --gray-300:       #C6CDD4;
  --gray-200:       #E1E6EA;
  --gray-100:       #EEF1F4;
  --white:          #FFFFFF;
  --font-sans:      "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --radius:         6px;
  --radius-lg:      12px;
  --radius-xl:      16px;
  --shadow-card:    0 8px 48px rgba(16, 35, 53, .18);
}

/* ── Reset ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* Font em elementos de texto — não em * (quebraria icon fonts) */
body { font-family: var(--font-sans); }
label, input, select, textarea,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans) !important;
}

/* ── Body: fundo cinza, flex centrado ────────────────────────── */
body {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  background: var(--gray-100) !important;
  margin: 0 !important;
  padding: 2rem !important;
}

/* ── Container principal (o card com shadow e border-radius) ── */
#ima-login-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 1000px !important;
  border-radius: var(--radius-xl) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-card) !important;
}

/* ── Painel esquerdo (marca) ──────────────────────────────────── */
#ima-brand-panel {
  flex: none;
  width: 420px;
  min-height: 500px;
  background: var(--ima-blue);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
  color: #fff;
}

#ima-brand-logo {
  height: 52px !important;
  width: auto !important;
  max-width: 260px !important;
  display: block !important;
  position: relative;
  z-index: 1;
}

/* ── Painel direito (formulário) ─────────────────────────────── */
#ima-form-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--white);
  padding: 3rem;
}

/* Remove wrappers KC que criariam layout extra */
#ima-form-wrap .login-pf-page,
#ima-form-wrap .container-fluid,
#ima-form-wrap .row,
#ima-form-wrap [class*="col-"] {
  display: contents !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
}

/* Oculta header KC original */
#kc-header,
.login-pf-page-header { display: none !important; }

/* ── Card KC interno: transparente (container faz o papel) ───── */
#ima-form-wrap .card-pf {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  float: none !important;
}

#ima-form-wrap #kc-content,
#ima-form-wrap #kc-container,
#ima-form-wrap #kc-content-wrapper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  float: none !important;
}

/* ── Título da tela ───────────────────────────────────────────── */
#kc-page-title,
h1#kc-page-title {
  display: block !important;
  font-size: 1.7rem !important;
  font-weight: 700 !important;
  color: var(--ima-blue) !important;
  margin: 0 !important;
  text-align: left !important;
  line-height: 1.2 !important;
}

/* Subtítulo via ::after */
#kc-page-title::after {
  content: "Informe suas credenciais para continuar.";
  display: block;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--gray-500);
  margin-top: 6px;
  margin-bottom: 1.75rem;
}

/* Header interno do card KC (contém o título) */
.login-pf-header {
  margin-bottom: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* ── Labels ──────────────────────────────────────────────────── */
.pf-c-form__label,
.pf-v5-c-form__label,
label {
  color: var(--gray-700) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
}

/* ── Inputs ──────────────────────────────────────────────────── */
input[type="text"],
input[type="password"],
input[type="email"],
.pf-c-form-control,
.pf-v5-c-form-control {
  border: 1px solid var(--gray-300) !important;
  border-radius: var(--radius) !important;
  background: var(--white) !important;
  color: var(--gray-900) !important;
  padding: 0.6rem 0.75rem !important;
  font-size: 0.9rem !important;
  width: 100% !important;
}
input:focus,
.pf-c-form-control:focus,
.pf-v5-c-form-control:focus {
  border-color: var(--ima-accent) !important;
  box-shadow: 0 0 0 2px rgba(0, 159, 227, .2) !important;
  outline: none !important;
}

/* ── Checkbox "Manter conectado" ─────────────────────────────── */
#rememberMe { margin-right: 6px; }

/* ── Botão primário ──────────────────────────────────────────── */
.btn-primary,
input[type="submit"],
input[type="submit"].btn-primary,
.pf-c-button.pf-m-primary,
.pf-v5-c-button.pf-m-primary {
  background: var(--ima-blue) !important;
  border-color: var(--ima-blue) !important;
  color: var(--white) !important;
  font-weight: 600 !important;
  border-radius: var(--radius) !important;
  padding: 0.7rem 1.25rem !important;
  font-size: 0.95rem !important;
  width: 100% !important;
  transition: background .15s !important;
  margin-top: 0.75rem !important;
}
.btn-primary:hover,
input[type="submit"]:hover,
.pf-c-button.pf-m-primary:hover,
.pf-v5-c-button.pf-m-primary:hover {
  background: var(--ima-blue-700) !important;
  border-color: var(--ima-blue-700) !important;
}

/* ── Link "Esqueci a senha" ──────────────────────────────────── */
#kc-forgot-password a,
a#kc-forgot-password,
.login-pf-settings a {
  color: var(--ima-accent-600) !important;
  font-size: 0.85rem !important;
  text-decoration: none !important;
}
#kc-forgot-password a:hover { text-decoration: underline !important; }

/* ── Links gerais ────────────────────────────────────────────── */
a { color: var(--ima-accent-600) !important; text-decoration: none !important; }
a:hover { color: var(--ima-blue) !important; text-decoration: underline !important; }

/* ── Seção social (gov.br) ───────────────────────────────────── */
#kc-social-providers {
  margin-top: 1.5rem !important;
  text-align: center !important;
  border-top: 1px solid var(--gray-200) !important;
  padding-top: 1.25rem !important;
}
#kc-social-providers h2 {
  display: none !important;
}
#kc-social-providers ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
#kc-social-providers ul li {
  display: inline !important;
}
#kc-social-providers a {
  display: inline-block !important;
  font-size: 0.875rem !important;
  color: var(--ima-blue) !important;
  font-weight: 500 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── "Acesso via gov.br" label ───────────────────────────────── */
#kc-social-providers::before {
  content: "Acesso via ";
  font-size: 0.875rem;
  color: var(--gray-500);
}

/* ── Registro (oculto no design) ─────────────────────────────── */
#kc-registration { display: none !important; }

/* ── Mensagens de erro ───────────────────────────────────────── */
.alert-error,
.pf-c-alert.pf-m-danger,
.pf-v5-c-alert.pf-m-danger {
  background: #fdeaeb !important;
  border-color: var(--ima-red) !important;
  color: #8b0a12 !important;
  border-radius: var(--radius) !important;
  margin-bottom: 1rem !important;
}

/* ── Responsivo (< 720px) ────────────────────────────────────── */
@media (max-width: 720px) {
  body { padding: 0 !important; }

  #ima-login-container {
    flex-direction: column !important;
    border-radius: 0 !important;
    max-width: 100% !important;
    min-height: 100vh !important;
  }

  #ima-brand-panel {
    width: 100% !important;
    min-height: auto !important;
    padding: 1.5rem !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1rem !important;
  }

  #ima-form-wrap { padding: 1.75rem 1.25rem !important; }
}