/* ============================================================
   Bussola de Licitacoes — Keycloak Login Theme
   Design System: Editorial · Institucional · B2G
   ============================================================ */

/* ---------- Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..700;1,6..72,300..700&family=Inter+Tight:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600&display=swap');

/* ---------- Design System Tokens ---------- */
:root {
  /* Brand */
  --brand-navy: oklch(0.24 0.04 255);
  --brand-navy-deep: oklch(0.18 0.035 255);
  --brand-navy-soft: oklch(0.32 0.04 255);
  --brand-brass: oklch(0.62 0.13 75);
  --brand-brass-hover: oklch(0.56 0.14 75);
  --brand-brass-bright: oklch(0.74 0.12 80);

  /* Semantic */
  --c-success: oklch(0.55 0.14 155);
  --c-warning: oklch(0.68 0.15 70);
  --c-danger: oklch(0.55 0.18 25);

  /* Typography */
  --font-display: 'Newsreader', Georgia, serif;
  --font-body: 'Inter Tight', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Spacing */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-8: 32px; --space-10: 40px;

  /* Radii */
  --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(10,17,38,0.08), 0 1px 2px rgba(10,17,38,0.04);
  --shadow-md: 0 4px 12px rgba(10,17,38,0.08), 0 2px 4px rgba(10,17,38,0.04);
  --shadow-lg: 0 12px 32px rgba(10,17,38,0.12), 0 4px 8px rgba(10,17,38,0.06);
  --shadow-xl: 0 24px 64px rgba(10,17,38,0.18), 0 8px 16px rgba(10,17,38,0.1);

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;

  /* Light theme surfaces */
  --bg-canvas: oklch(0.98 0.008 85);
  --bg-surface: oklch(1.00 0 0);
  --bg-surface-2: oklch(0.96 0.01 85);
  --bg-overlay: rgba(20, 24, 40, 0.55);
  --fg-primary: oklch(0.18 0.035 255);
  --fg-secondary: oklch(0.36 0.03 255);
  --fg-muted: oklch(0.52 0.022 255);
  --fg-subtle: oklch(0.68 0.015 255);
  --fg-brand: oklch(0.52 0.13 75);
  --border-subtle: oklch(0.92 0.012 255);
  --border-default: oklch(0.86 0.018 255);
  --border-brand: oklch(0.62 0.13 75);
}

/* ============================================================
   Reset & Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0; padding: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-primary);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--brand-brass);
  color: var(--brand-navy-deep);
}

a { color: var(--brand-brass); text-decoration: none; }
a:hover { color: var(--brand-brass-hover); }

/* ============================================================
   Keycloak Login Layout Override
   ============================================================ */

/* Hide default Keycloak header/navbar */
#kc-header-wrapper,
.kc-logo-text {
  display: none !important;
}

#kc-header {
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Full-page layout */
.login-pf-page,
.login-pf {
  background: var(--bg-canvas) !important;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-pf-page .container-fluid,
.login-pf .container-fluid,
.login-pf-page .container,
.login-pf .container,
.login-pf-page #kc-content-wrapper,
.login-pf #kc-content-wrapper {
  width: 100% !important;
  max-width: 680px !important;
  padding: var(--space-6) !important;
  margin: 0 auto !important;
}

/* ============================================================
   Login Card
   ============================================================ */
#kc-form,
#kc-form-wrapper,
#kc-content,
.card-pf {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 40px 56px 36px !important;
  overflow: hidden;
  max-width: 680px !important;
  width: 100% !important;
}

/* Force inputs full width on ALL login pages */
input[type="text"],
input[type="password"],
input[type="email"],
.form-control {
  width: 100% !important;
}

/* ============================================================
   Brand Header (inside card)
   ============================================================ */
#kc-locale,
#kc-content-wrapper > .col-md-10,
#kc-content > .col-md-offset-1 {
  max-width: 100%;
  flex: 0 0 100%;
}

/* ============================================================
   Form Elements
   ============================================================ */

/* Labels */
.control-label,
label[for] {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 6px;
}

/* Inputs */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
.form-control {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-primary);
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
  outline: none;
}

input:focus,
.form-control:focus {
  border-color: var(--border-brand);
  box-shadow: 0 0 0 3px rgba(170, 130, 60, 0.15);
}

input::placeholder,
.form-control::placeholder {
  color: var(--fg-subtle);
}

/* Form groups */
.form-group {
  margin-bottom: var(--space-5);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn,
input[type="submit"],
button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-standard);
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.btn-primary,
#kc-login,
input[type="submit"].btn-primary {
  background: var(--brand-brass);
  color: #fff;
  border-color: var(--brand-brass);
}
.btn-primary:hover,
#kc-login:hover,
input[type="submit"].btn-primary:hover {
  background: var(--brand-brass-hover);
  border-color: var(--brand-brass-hover);
}
.btn-primary:active {
  transform: translateY(1px);
}

.btn-default,
.btn-secondary {
  background: var(--bg-surface);
  color: var(--fg-primary);
  border-color: var(--border-default);
}
.btn-default:hover,
.btn-secondary:hover {
  background: var(--bg-surface-2);
  border-color: var(--fg-subtle);
}

/* ============================================================
   Links & Helpers
   ============================================================ */
#kc-registration,
#kc-form-options,
.kc-social-links {
  margin-top: var(--space-5);
  text-align: center;
}

#kc-registration a,
#kc-form-options a,
.kc-social-links a,
a#kc-current-locale-link {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--brand-brass);
  transition: color var(--dur-fast);
}
#kc-registration a:hover,
#kc-form-options a:hover {
  color: var(--brand-brass-hover);
}

/* "Remember me" checkbox */
.checkbox label,
.login-pf-settings label {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* "Forgot password?" */
.kc-form-options .pull-right,
#kc-form-options span {
  font-size: 12px;
}

/* ============================================================
   Alerts & Feedback
   ============================================================ */
.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin-bottom: var(--space-4);
  border-left: 3px solid;
}

.alert-error,
.alert-danger {
  background: oklch(0.96 0.04 25);
  border-left-color: var(--c-danger);
  color: var(--c-danger);
}

.alert-warning {
  background: oklch(0.96 0.05 75);
  border-left-color: var(--c-warning);
  color: var(--c-warning);
}

.alert-success {
  background: oklch(0.96 0.04 155);
  border-left-color: var(--c-success);
  color: var(--c-success);
}

.alert-info {
  background: var(--bg-surface-2);
  border-left-color: var(--brand-brass);
  color: var(--fg-secondary);
}

/* Input validation error */
.has-error .form-control,
.has-error input {
  border-color: var(--c-danger);
}
.has-error .control-label,
.has-error .help-block {
  color: var(--c-danger);
}

/* ============================================================
   Social / Identity Provider Buttons
   ============================================================ */
.kc-social-provider-name {
  font-family: var(--font-body);
}

.kc-social-links li {
  margin-bottom: var(--space-2);
}

.kc-social-links a.zocial {
  display: block;
  padding: 10px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--fg-primary);
  font-size: 13px;
  text-align: center;
  transition: all var(--dur-fast);
}
.kc-social-links a.zocial:hover {
  background: var(--bg-surface-2);
  border-color: var(--fg-subtle);
}

/* ============================================================
   Footer / Info section
   ============================================================ */
#kc-info,
#kc-info-wrapper {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  text-align: center;
}

#kc-info-message,
#kc-info p {
  font-size: 12px;
  color: var(--fg-muted);
}

/* ============================================================
   Locale Selector
   ============================================================ */
#kc-locale ul {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
#kc-locale ul li a {
  padding: var(--space-2) var(--space-4);
  font-size: 12px;
  color: var(--fg-secondary);
}
#kc-locale ul li a:hover {
  background: var(--bg-surface-2);
  color: var(--fg-primary);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 480px) {
  .login-pf-page .container-fluid,
  .login-pf .container-fluid,
  .login-pf-page .container,
  .login-pf .container {
    padding: var(--space-4);
  }

  #kc-form,
  #kc-form-wrapper,
  .card-pf {
    padding: var(--space-6) var(--space-5) var(--space-5);
    border-radius: var(--radius-md);
  }
}

/* ============================================================
   Compass Spinner (loading states)
   ============================================================ */
.loader-compass {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--border-default);
  position: relative;
  animation: compass-spin 2.4s linear infinite;
  margin: 0 auto;
}
.loader-compass::before {
  content: ''; position: absolute; left: 50%; top: -1px;
  width: 2px; height: 10px; background: var(--brand-brass);
  transform: translateX(-50%); border-radius: 1px;
}
.loader-compass::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 6px; height: 6px; border-radius: 6px;
  background: var(--brand-brass);
  transform: translate(-50%,-50%);
}
@keyframes compass-spin { to { transform: rotate(360deg); } }

/* ============================================================
   Utility classes
   ============================================================ */
.ds-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-brand);
  font-weight: 500;
}

.ds-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--fg-primary);
}