/*
 * hexaq theme for the Authelia portal.
 *
 * Authelia's portal is a compiled React app: we cannot change its markup, only
 * dress it. Everything below works by overriding what its Material UI classes
 * compute to, which is why the selectors are broad and the !important flags are
 * unavoidable — this is the one place in the project where they are earned.
 *
 * The palette is the same one the rest of hexaq uses (admin/src/lib/theme.css):
 * black field, white type, green reserved for what is live or interactive.
 */

:root {
  --hexaq-black: #000000;
  --hexaq-surface: #0b0f0b;
  --hexaq-line: #1c241c;
  --hexaq-white: #ffffff;
  --hexaq-dim: #7d8a7d;
  --hexaq-green: #3fb950;
  --hexaq-green-bright: #56d364;
  --hexaq-red: #d9534f;
  --hexaq-mono: 'SF Mono', 'JetBrains Mono', 'Fira Code', ui-monospace, 'Cascadia Code', Menlo,
    Consolas, monospace;
}

html,
body,
#root {
  background: var(--hexaq-black) !important;
  color: var(--hexaq-white) !important;
  font-family: var(--hexaq-mono) !important;
}

body * {
  font-family: var(--hexaq-mono) !important;
}

/*
 * Papers are used for the login card AND for a full-width strip at the top of
 * the page. Giving them all a surface colour painted a grey bar across the top,
 * so they stay on the black field instead: the form needs no container to read
 * clearly, and the page matches the landing page's flat black.
 */
.MuiPaper-root {
  background: transparent !important;
  background-image: none !important;
  color: var(--hexaq-white) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.MuiTypography-root {
  color: var(--hexaq-white) !important;
  letter-spacing: 0.04em;
}

/* Text fields: dark wells with a green focus ring. */
.MuiInputBase-root,
.MuiOutlinedInput-root {
  background: var(--hexaq-black) !important;
  color: var(--hexaq-white) !important;
  border-radius: 0 !important;
}

.MuiOutlinedInput-notchedOutline {
  border-color: var(--hexaq-line) !important;
}

.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: var(--hexaq-dim) !important;
}

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--hexaq-green) !important;
  border-width: 1px !important;
}

.MuiInputLabel-root {
  color: var(--hexaq-dim) !important;
}

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

.MuiInputBase-input {
  color: var(--hexaq-white) !important;
}

/* The primary action is the only solid green on the page. */
.MuiButton-contained,
#sign-in-button {
  background-color: var(--hexaq-green) !important;
  color: var(--hexaq-black) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.MuiButton-contained:hover,
#sign-in-button:hover {
  background-color: var(--hexaq-green-bright) !important;
}

.MuiButton-outlined,
.MuiButton-text {
  color: var(--hexaq-green) !important;
  border-color: var(--hexaq-line) !important;
  border-radius: 0 !important;
}

.MuiButton-outlined:hover,
.MuiButton-text:hover {
  background: rgba(63, 185, 80, 0.08) !important;
  border-color: var(--hexaq-green) !important;
}

a,
.MuiLink-root {
  color: var(--hexaq-green) !important;
}

/* The one-time-password boxes. */
.MuiOtpInput-TextField input,
input[inputmode='numeric'] {
  background: var(--hexaq-black) !important;
  color: var(--hexaq-green) !important;
  font-size: 1.25rem !important;
  letter-spacing: 0.1em;
}

.MuiCheckbox-root,
.MuiSvgIcon-root {
  color: var(--hexaq-dim) !important;
}

.MuiCheckbox-root.Mui-checked .MuiSvgIcon-root {
  color: var(--hexaq-green) !important;
}

/* Feedback. Failure is the only red on the page; it should be unmistakable. */
.MuiAlert-standardError,
.MuiAlert-filledError {
  background: rgba(217, 83, 79, 0.12) !important;
  color: var(--hexaq-red) !important;
  border: 1px solid var(--hexaq-red) !important;
  border-radius: 0 !important;
}

.MuiAlert-standardSuccess,
.MuiAlert-filledSuccess {
  background: rgba(63, 185, 80, 0.12) !important;
  color: var(--hexaq-green) !important;
  border: 1px solid var(--hexaq-green) !important;
  border-radius: 0 !important;
}

.MuiAlert-standardInfo,
.MuiAlert-standardWarning {
  background: var(--hexaq-surface) !important;
  color: var(--hexaq-white) !important;
  border: 1px solid var(--hexaq-line) !important;
  border-radius: 0 !important;
}

.MuiLinearProgress-root {
  background: var(--hexaq-line) !important;
}

.MuiLinearProgress-bar {
  background: var(--hexaq-green) !important;
}

/*
 * Authelia's own credit: dimmed rather than hidden. It is honest to say what
 * this is built on, but it should not compete with the sign-in button — green is
 * reserved for what is live or interactive.
 */
.MuiTypography-caption,
footer {
  color: var(--hexaq-dim) !important;
  font-size: 0.75rem !important;
}

/* More specific than the blanket link rule above, which would otherwise make the
   credit as loud as the sign-in button. */
a[href*='authelia.com'],
.MuiTypography-caption a[href],
footer a[href] {
  color: var(--hexaq-dim) !important;
  font-size: 0.75rem !important;
}

/*
 * Authelia's avatars — the account initial, and the badge on informational
 * panels — ship in Material's default blue and grey, which is the one thing on
 * the page that still looked like someone else's product.
 */
.MuiAvatar-root {
  background-color: var(--hexaq-green) !important;
  color: var(--hexaq-black) !important;
  font-weight: 600 !important;
}

.MuiAvatar-root .MuiSvgIcon-root {
  color: var(--hexaq-black) !important;
}

/*
 * Authelia's state icons are FontAwesome glyphs, not Material components, and
 * they ship blue. This was the last thing on the page that still belonged to
 * someone else's product.
 */
.information-icon,
svg.fa-circle-info {
  color: var(--hexaq-green) !important;
}

.success-icon,
svg.fa-circle-check {
  color: var(--hexaq-green) !important;
}

.failure-icon,
svg.fa-circle-xmark,
svg.fa-times-circle {
  color: var(--hexaq-red) !important;
}

/* The logo Authelia serves from its asset path sits above the form. */
img[alt='Logo'],
.MuiAvatar-root img {
  filter: none !important;
}

/* Dialogs (identity verification, device registration) match the card. */
.MuiDialog-paper {
  background: var(--hexaq-surface) !important;
  border: 1px solid var(--hexaq-line) !important;
  border-radius: 0 !important;
}

.MuiStepIcon-root {
  color: var(--hexaq-line) !important;
}

.MuiStepIcon-root.Mui-active,
.MuiStepIcon-root.Mui-completed {
  color: var(--hexaq-green) !important;
}