/*
 * Tex-Define Web UI refresh - modern login design (Logon/LogOff).
 * Loaded after the legacy stylesheets so existing markup and customer themes
 * keep working while the login pages receive a coherent modern layer.
 * wok - 25.7.26 - The --td-* design tokens moved to design-tokens.css (single source, loaded on all pages).
 */

html {
   color-scheme: light;
}

body.MainBodyStyle {
   color: var(--td-ink);
   background: var(--td-canvas);
   font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   font-size: 14px !important;
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
}

a,
button,
input,
select,
textarea {
   transition: border-color .16s ease, box-shadow .16s ease,
      background-color .16s ease, color .16s ease, transform .16s ease;
}

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
   outline: 3px solid rgba(37, 99, 235, .28);
   outline-offset: 2px;
}

/* Login --------------------------------------------------------------- */

.login-form {
   min-height: 100%;
   box-sizing: border-box;
   overflow: auto;
   padding: 32px 20px;
   background:
      radial-gradient(circle at 12% 12%, rgba(217, 45, 50, .13), transparent 30%),
      radial-gradient(circle at 88% 88%, rgba(37, 99, 235, .10), transparent 34%),
      linear-gradient(145deg, #f8fafc 0%, #edf1f6 100%);
}

.login-container {
   box-sizing: border-box;
   width: min(100%, 440px);
   max-width: 440px;
   margin: 0 auto;
   padding: 38px 40px 32px;
   top: 50%;
   transform: translateY(-50%);
   border: 1px solid rgba(255, 255, 255, .8);
   border-radius: var(--td-radius-lg);
   background: rgba(255, 255, 255, .96);
   box-shadow: var(--td-shadow-md);
}

.login-header {
   min-height: 52px;
   margin: 0 0 30px;
   padding: 0 0 24px 68px;
   border-bottom: 1px solid var(--td-line);
   background: var(--td-ink) url('../images/2020mh/texdefine_logo.svg') 8px 8px / 48px 48px no-repeat;
   background-color: transparent;
}

.login-header .caption-with-logo {
   height: auto;
   margin: 0;
   padding: 0;
   color: var(--td-ink);
   background: none;
   font-family: inherit;
   line-height: 1.25;
}

/* wok - 8.8.26 - Web: dark mode: repeat the .caption-with-logo resets on the h2/h3 rules - the legacy
   "h2.caption-with-logo" selectors in logon-styles-full/mobile.css are more specific than the plain
   ".caption-with-logo" reset above, so their white koppermann bar (background #fff + logo, overlapping
   the title) survived on both themes and glared as a white box on dark. */
.login-header h2.caption-with-logo {
   height: auto;
   margin: 0;
   padding: 3px 0 0;
   color: var(--td-ink);
   background: none;
   font-family: inherit;
   font-size: 24px;
   font-weight: 700;
   line-height: 1.25;
   letter-spacing: -.02em;
}

.login-header h3.caption-with-logo {
   height: auto;
   margin: 3px 0 0;
   padding: 0;
   color: var(--td-muted);
   background: none;
   font-family: inherit;
   font-size: 14px;
   font-weight: 500;
   line-height: 1.25;
}

.login-header .sub-caption {
   margin-top: 4px;
   color: #98a2b3;
   font-family: inherit;
   font-size: 11px;
   text-align: left;
}

.login-controls {
   margin: 0;
}

.login-controls .control-caption,
.control-caption {
   margin: 16px 0 7px;
   color: #344054;
   font-size: 13px;
   font-weight: 600;
}

.login-controls .fieldLabels {
   font: inherit;
}

.login-controls .control-field {
   height: auto;
}

.login-controls .control-field input,
.login-controls .control-field select {
   display: block;
   box-sizing: border-box;
   width: 100% !important;
   height: 44px;
   padding: 9px 12px;
   border: 1px solid #cbd2dc;
   border-radius: var(--td-radius-sm);
   color: var(--td-ink);
   background: #fff;
   font: 400 15px/1.4 Inter, "Segoe UI", sans-serif;
   box-shadow: var(--td-shadow-sm);
}

.login-controls .control-field input:hover,
.login-controls .control-field select:hover {
   border-color: #98a2b3;
}

.login-controls .control-field input:focus,
.login-controls .control-field select:focus {
   border-color: var(--td-focus);
   outline: none;
   box-shadow: 0 0 0 3px rgba(37, 99, 235, .16);
}

.login-controls .inputE {
   border-color: var(--td-brand) !important;
   box-shadow: 0 0 0 3px rgba(217, 45, 50, .12) !important;
}

.login-controls .divider {
   height: 6px;
}

.login-controls input[type="submit"] {
   box-sizing: border-box;
   width: 100%;
   min-height: 46px;
   margin-top: 22px;
   padding: 11px 18px;
   border: 1px solid var(--td-brand);
   border-radius: var(--td-radius-sm);
   color: #fff;
   background: var(--td-brand);
   font: 600 15px/1.4 Inter, "Segoe UI", sans-serif;
   cursor: pointer;
   box-shadow: 0 4px 12px rgba(217, 45, 50, .22);
}

.login-controls input[type="submit"]:hover {
   padding: 11px 18px;
   border-color: var(--td-brand-dark);
   background: var(--td-brand-dark);
   font: 600 15px/1.4 Inter, "Segoe UI", sans-serif;
   transform: translateY(-1px);
}

.login-controls input[type="submit"]:active {
   transform: translateY(0);
}

.starter-download,
.login-pwd-change {
   margin-top: 13px;
   font-size: 13px;
   text-align: center;
}

.starter-download a,
.login-pwd-change a {
   color: #475467;
   text-decoration: underline;
   text-decoration-color: #cbd2dc;
   text-underline-offset: 3px;
}

.starter-download a:hover,
.login-pwd-change a:hover {
   color: var(--td-brand-dark);
   text-decoration-color: currentColor;
}

.login-errors {
   margin-top: 16px;
   padding: 10px 12px 10px 38px;
   border: 1px solid #fecaca;
   border-radius: var(--td-radius-sm);
   color: #b42318;
   background: #fef3f2;
   font-size: 13px;
}

.login-errors:empty,
.login-errors:not(:has(.fieldLabels:not(:empty))) {
   display: none;
}

#changePasswordDialog .txt-fld {
   margin-bottom: 14px;
}

#changePasswordDialog .txt-fld label {
   display: block;
   margin-bottom: 6px;
   color: #344054;
   font-weight: 600;
}

#changePasswordDialog .txt-fld input {
   box-sizing: border-box;
   width: 100%;
   min-height: 40px;
   padding: 8px 10px;
   border: 1px solid #cbd2dc;
   border-radius: var(--td-radius-sm);
}

#progress {
   padding: 12px 16px;
   border-radius: var(--td-radius-sm);
   color: #fff;
   background: var(--td-ink);
   box-shadow: var(--td-shadow-md);
}

/* wok - 25.7.26 - Application-shell rules removed again: they interfered with the classic frame
   (folder/template dropdown scrolling). This stylesheet is scoped to the login pages (Logon/LogOff) now. */

@media only screen and (max-width: 768px) {
   .login-form {
      padding: 18px 14px;
   }

   .login-container {
      width: 100%;
      padding: 28px 24px 24px;
      top: 0;
      transform: none;
   }

   .login-header {
      margin-bottom: 20px;
      padding-bottom: 18px;
   }
}

/* wok - 1.8.26 - Web: dark mode. Most of the login already follows the --td-* token swap from
   design-tokens.css; this block only remaps the few hard-coded light colors above, and it maps
   them onto tokens so design-tokens.css stays the single color source. */
:root[data-td-theme="dark"] .login-form {
   background:
      radial-gradient(circle at 12% 12%, rgba(217, 45, 50, .16), transparent 30%),
      radial-gradient(circle at 88% 88%, rgba(91, 141, 239, .12), transparent 34%),
      linear-gradient(145deg, var(--td-surface-2) 0%, var(--td-canvas) 100%);
}

:root[data-td-theme="dark"] .login-container {
   border-color: var(--td-line);
   background: var(--td-surface);
}

:root[data-td-theme="dark"] .login-header .sub-caption {
   color: var(--td-muted-2);
}

:root[data-td-theme="dark"] .login-controls .control-caption,
:root[data-td-theme="dark"] .control-caption,
:root[data-td-theme="dark"] #changePasswordDialog .txt-fld label {
   color: var(--td-ink-2);
}

:root[data-td-theme="dark"] .login-controls .control-field input,
:root[data-td-theme="dark"] .login-controls .control-field select,
:root[data-td-theme="dark"] #changePasswordDialog .txt-fld input {
   border-color: var(--td-line-strong);
   background: var(--td-surface-2);
   color: var(--td-ink);
}

:root[data-td-theme="dark"] .login-controls .control-field input:hover,
:root[data-td-theme="dark"] .login-controls .control-field select:hover {
   border-color: var(--td-muted-2);
}

:root[data-td-theme="dark"] .login-controls .control-field input:focus,
:root[data-td-theme="dark"] .login-controls .control-field select:focus {
   border-color: var(--td-focus);
   box-shadow: 0 0 0 3px var(--td-focus-ring-soft);
}

:root[data-td-theme="dark"] .starter-download a,
:root[data-td-theme="dark"] .login-pwd-change a {
   color: var(--td-muted);
   text-decoration-color: var(--td-line-strong);
}

:root[data-td-theme="dark"] .login-errors {
   border-color: var(--td-err-line);
   color: var(--td-err);
   background: var(--td-err-bg);
}

/* wok - 8.8.26 - Web: dark mode: the legacy autofill hack in logon-styles-full/mobile.css paints a white
   inset shadow, and Chrome renders its autofill text light on dark color-scheme -> light text on a forced
   white field = invisible user name. Higher specificity wins over the legacy !important rules. */
:root[data-td-theme="dark"] input:-webkit-autofill,
:root[data-td-theme="dark"] input:-webkit-autofill:hover,
:root[data-td-theme="dark"] input:-webkit-autofill:focus {
   -webkit-box-shadow: 0 0 0 1000px var(--td-surface-2) inset !important;
   -webkit-text-fill-color: var(--td-ink) !important;
   caret-color: var(--td-ink);
}

/* wok - 8.8.26 - Web: dark mode: #progress uses white-on-ink, but --td-ink is light on dark. */
:root[data-td-theme="dark"] #progress {
   background: var(--td-panel);
}

/* wok - 8.8.26 - Web: dark mode: the change-password dialog is a jQuery-UI dialog; its theme stays light.
   Scoped to this stylesheet, which only the login pages (Logon/LogOff) load. */
:root[data-td-theme="dark"] .ui-dialog,
:root[data-td-theme="dark"] .ui-dialog .ui-widget-content {
   border-color: var(--td-line);
   background: var(--td-surface);
   color: var(--td-ink);
}

:root[data-td-theme="dark"] .ui-dialog .ui-widget-header {
   border-color: var(--td-line);
   background: var(--td-surface-2);
   color: var(--td-ink);
}

:root[data-td-theme="dark"] .ui-dialog .ui-dialog-buttonpane button {
   border: 1px solid var(--td-line-strong);
   background: var(--td-surface-2);
   color: var(--td-ink);
}

@media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
      scroll-behavior: auto !important;
      transition-duration: .01ms !important;
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
   }
}