/* Taiga IoT branding for Authelia portal */

:root {
  --taiga-green: #538134;
  --taiga-green-dark: #3a5a25;
}

html {
  min-height: 100%;
}

body {
  min-height: 100vh !important;
  background-color: #dfe8ea !important;
  background-image: url('/branding/bg.jpg') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

/* Top-left brand: pine icon + title (as on mockup) */
body::before {
  content: '';
  position: fixed;
  top: 18px;
  left: 20px;
  width: 44px;
  height: 44px;
  background: url('/branding/logo.png') center / contain no-repeat;
  z-index: 10000;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

body::after {
  content: 'Taiga Docs';
  position: fixed;
  top: 26px;
  left: 74px;
  z-index: 10000;
  pointer-events: none;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  color: var(--taiga-green);
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(255, 255, 255, 0.8);
}

/* Login card: readable over foggy background */
#root > div,
#app,
main,
.mui-style-1xezonx-MuiPaper-root,
.MuiPaper-root {
  /* soft glass panel when MUI paper is used */
}

/* Primary actions → brand green (MUI + generic) */
button.MuiButton-containedPrimary,
button.MuiButton-contained,
button[type='submit'] {
  background-color: var(--taiga-green) !important;
  border-color: var(--taiga-green) !important;
}

button.MuiButton-containedPrimary:hover,
button.MuiButton-contained:hover,
button[type='submit']:hover {
  background-color: var(--taiga-green-dark) !important;
  border-color: var(--taiga-green-dark) !important;
}

/* Links accent */
a {
  color: var(--taiga-green) !important;
}

/* Focus ring on inputs */
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline,
.MuiInputBase-root.Mui-focused fieldset {
  border-color: var(--taiga-green) !important;
}

.MuiFormLabel-root.Mui-focused {
  color: var(--taiga-green) !important;
}

/* Checkbox accent when checked */
.MuiCheckbox-root.Mui-checked {
  color: var(--taiga-green) !important;
}

@media (max-width: 600px) {
  body::before {
    top: 12px;
    left: 12px;
    width: 36px;
    height: 36px;
  }
  body::after {
    top: 18px;
    left: 56px;
    font-size: 1.15rem;
  }
}