/*
  Somewhat tedious restyle based on TailwindPlus, UI Blocks > Application UI > Forms - Simple
  https://tailwindcss.com/plus/ui-blocks/application-ui/forms/sign-in-forms#component-766a0bf1b8800d383b6c5b77ef9c626c

  Notice the wrapper - we are targeting ONLY the legacy HTML & CSS output from the DNN
*/
/* Xcillion NX Login Restyle, :root values from AccuTheme-Tw4 20260102 JRF */
:root, :host {
  --spacing: 0.25rem;
  --text-sm: 0.875rem;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --color-white: #fff;
  --color-accuraty-blue: oklch(0.508 0.14 250);
  --light-delta: 10;
  --color-blue-light: hsl(from var(--color-blue) h s calc(l + var(--light-delta)));
  --color-blue: var(--color-accuraty-blue);
  --color-zinc-400: oklch(70.5% 0.015 286.067);
  --color-zinc-900: oklch(21% 0.006 285.885);
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --tw-outline-style: solid;
}

.ModAuthenticationC {
  background-color: var(--color-white);
  padding: calc(var(--spacing) * 9);
  border-radius: var(--radius-lg);
  @media (width >= 40rem /* 640px */) {
    max-width: 28rem;
    margin-inline: auto;
  }
  /* no changes below this point */
  .dnnFormItem, .dnnLabel, .dnnFormLabel, span.dnnFormLabel, .LoginPanel,
  .dnnLoginService input[id*="_Login_Login_DNN_txt"], .dnnLoginService a {
    all: inherit;
    color: var(--color-zinc-900);
    margin: 0;
    border-radius: var(--radius-md);
  }
  font-size: var(--text-sm);
  .dnnFormItem, .dnnLabel {
    display: block;
  }
  .dnnLoginService {
    /* the 5 items in order: Email and Passw Input, Remember Checkbox, Login Button, Reset Passw Link */
    .dnnFormItem {
      margin-bottom: calc(var(--spacing) * 3);
      label {
        margin-block: 0 calc(var(--spacing) * 1);
        font-weight: var(--font-weight-medium);
      }
      &:has(.dnnLoginRememberMe, .dnnLoginActions) {
        margin: 0;
      }
    }
    /* Email and Passw Input */
    input[id*="_Login_Login_DNN_txt"] {
      padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
      outline-style: var(--tw-outline-style, solid);
      outline-width: 1.5px;
      outline-offset: -1px;
      outline-color: var(--color-zinc-400);
    }
    /* Remember Checkbox */
    span.dnnLoginRememberMe {
      display: inline-flex;
      gap: calc(var(--spacing) * 3);
      input[type="checkbox"] {
        /* sorry, overriding inline styles */
        position: relative !important;
        z-index: 9 !important;
        opacity: 1.0 !important;
        /* end: overriding inline styles */
        margin: 0 0 calc(var(--spacing) * 1.0) 1px;
        scale: 1.125;
      }
      .dnnCheckbox {
        display: none;
      }
    }
    /* Login Link (Submit Button) */
    a[id$="DNN_cmdLogin"] {
      display: flex;
      color: var(--color-white);
      line-height: calc(var(--spacing) * 6);
      font-weight: var(--font-weight-semibold);
      justify-content: center;
      padding-block: calc(var(--spacing) * 1.5);
      appearance: button;
      background-color: var(--color-blue);
      &:hover {
        background-color: var(--color-blue-light);
      }
    }
    /* Reset Password Link */
    a[id$="DNN_passwordLink"] {
      all: inherit;
      color: var(--color-blue);
      font-weight: var(--font-weight-semibold);
      &:hover {
        color: var(--color-blue-light);
      }
      &::after {
        content: '?';
      }
    }
    a[id$="DNN_cancelLink"], span.dnnFormLabel {
      display: none;
    }
    ul.dnnActions, ul.dnnActions li {
      margin: 0;
      padding: 0;
    }
  }
  /* this gets rid of quite a bit of wasted vertical space
    TODO style the DNN Social Registrations (Google, etc.)
  */
  .dnnSocialRegistration {
    #socialControls {
      padding: 0;
      ul.buttonList {
        margin: 0;
      }
    }
  }
}