/* ============================================
   LOGIN PAGE REDESIGN - CSS
   Created: 2026-04-21
   Scope: Login page only (.login body class)
   ============================================ */

/* ============================================
   1. CSS VARIABLES
   ============================================ */
:root {
  /* Primary Colors */
  --primary-blue: #2563eb;
  --primary-blue-dark: #1d4ed8;
  --primary-blue-light: #3b82f6;

  /* Text */
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --text-tertiary: #9ca3af;

  /* Borders */
  --border-light: #e5e7eb;
  --border-medium: #d1d5db;
  --border-dark: #9ca3af;

  /* Backgrounds */
  --bg-white: #ffffff;
  --bg-gray-50: #f9fafb;
  --bg-gray-100: #f3f4f6;

  /* States */
  --error-red: #dc2626;
  --error-bg: #fef2f2;
  --error-border: #fca5a5;

  --success-green: #059669;
  --success-bg: #f0fdf4;
  --success-border: #86efac;

  --warning-yellow: #d97706;
  --warning-bg: #fffbeb;
  --warning-border: #fcd34d;

  --info-blue: #1e40af;
  --info-bg: #eff6ff;
  --info-border: #93c5fd;

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

  /* Typography */
  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Gradient colors */
  --gradient-start: #e0e7ff;
  --gradient-middle: #f0f4f8;
  --gradient-end: #e8eef5;

  /* Additional state colors */
  --error-red-dark: #991b1b;
}

/* ============================================
   2. LAYOUT - Background & Page Structure
   ============================================ */
body.login {
  background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-middle) 50%, var(--gradient-end) 100%);
  background-color: var(--gradient-end);
  background-attachment: fixed;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}

body.login .mdc-drawer-app-content {
  background: none !important;
  width: 100%;
}

body.login #main-content {
  width: 100%;
  max-width: 1024px;
  padding: var(--space-3);
  box-shadow: none;
}

/* ============================================
   3. HEADER - Minimalist Header
   ============================================ */
.minimalist-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  background: transparent;
  z-index: 1000;
}

.minimalist-header .logo-container {
  display: flex;
  align-items: center;
}

.minimalist-header .logo-container a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.minimalist-header .logo-container img {
  height: 40px;
  width: auto;
}

.minimalist-header .logo-container svg.cas-logo {
  height: 40px;
  width: auto;
  color: #0046bb;
}

.minimalist-header .language-switcher {
  --lang-switcher-min-width: 150px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}


.minimalist-header .language-switcher .dropdown {
  background: transparent;
  border: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.minimalist-header .language-switcher .dropdown > li {
  min-width: var(--lang-switcher-min-width);
}

.minimalist-header .language-switcher .dropdown .sub {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--border-medium);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  color: var(--text-primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: var(--lang-switcher-min-width);
  box-sizing: border-box;
}

.minimalist-header .language-switcher .dropdown .sub > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.minimalist-header .language-switcher .dropdown:hover {
  background: var(--bg-gray-50);
  border-color: var(--border-dark);
}

.minimalist-header .language-switcher .dropdown ul {
  background: var(--bg-white);
  border: 1px solid var(--border-medium);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 8px 0;
  min-width: var(--lang-switcher-min-width);
  box-sizing: border-box;
}

.minimalist-header .language-switcher a {
  padding: 8px 16px;
  font-size: 14px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.minimalist-header .language-switcher a:hover {
  background: var(--bg-gray-50);
}

/* Disabled (read-only) language switcher: used in flows where switching jazyk
   během běhu nedává smysl (např. delegated authentication views). */
.minimalist-header .language-switcher--disabled .dropdown:hover {
  background: transparent;
  border-color: transparent;
}

.minimalist-header .language-switcher--disabled .dropdown .sub {
  cursor: default;
  justify-content: flex-start;
}

.minimalist-header .language-switcher--disabled .dropdown .sub:hover {
  background: rgba(255, 255, 255, 0.9);
}

.minimalist-header .language-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}

/* ============================================
   4. LOGIN BOX - Central White Container
   ============================================ */
.login-box {
  background: var(--bg-white);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: var(--space-6) var(--space-5);
  max-width: 576px;
  margin: 0 auto;
  width: 100%;
  text-align: left;
}

/* Hide legacy <hr> separators left from original CAS theme inside the login box */
body.login .login-box hr {
  display: none;
}

/* Reset inherited borders from default CAS .login-section / .login-form styles */
body.login .login-box .login-section {
  border: none;
  padding: 0;
  background: transparent;
}

.login-heading {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-4) 0;
  text-align: left;
  line-height: 1.2;
}

/* Override existing banner styles for login page */
body.login .banner {
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}

body.login .banner #content {
  border: none;
}

/* ============================================
   5. FORM ELEMENTS - Inputs, Labels
   ============================================ */
.form-group {
  margin-bottom: var(--space-3);
}

.form-label {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.form-input {
  width: 100%;
  border: 1px solid var(--border-medium);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-primary);
  background: var(--bg-white);
  transition: border-color 0.2s, box-shadow 0.2s;
  font-family: var(--font-family-base);
  line-height: normal;
}

.form-input:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-input::placeholder {
  color: var(--text-tertiary);
}

.form-input:disabled {
  background: var(--bg-gray-50);
  color: var(--text-secondary);
  cursor: not-allowed;
}

/* Password field wrapper */
.password-wrapper {
  position: relative;
}

.password-wrapper .form-input {
  padding-right: 48px;
}

.password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.password-toggle:hover {
  color: var(--text-primary);
}

.password-toggle:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

/* ============================================
   6. BUTTONS
   ============================================ */
.btn-login-primary {
  background: var(--primary-blue);
  color: var(--bg-white);
  border: none;
  border-radius: 8px;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  width: 100%;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  font-family: var(--font-family-base);
  letter-spacing: 0.5px;
}

.btn-login-primary:hover {
  background: var(--primary-blue-dark);
}

.btn-login-primary:active {
  transform: scale(0.98);
}

.btn-login-primary:disabled {
  background: var(--text-tertiary);
  cursor: not-allowed;
}

.btn-login-primary:focus-visible {
  outline: 2px solid var(--primary-blue-dark);
  outline-offset: 2px;
}

.btn-login-secondary {
  background: var(--bg-white);
  color: var(--text-primary);
  border: 1px solid var(--border-medium);
  border-radius: 8px;
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  width: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.2s, border-color 0.2s;
  font-family: var(--font-family-base);
  text-decoration: none;
}

.btn-login-secondary:hover {
  background: var(--bg-gray-50);
  border-color: var(--border-dark);
}

.btn-login-secondary .provider-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}


.btn-login-secondary:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

/* Loading spinner for buttons */
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--bg-white);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-right: 8px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================
   7. CHECKBOX STYLES
   ============================================ */
.form-check {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-2);
}

.form-checkbox {
  width: 18px;
  height: 18px;
  border: 1px solid var(--border-medium);
  border-radius: 4px;
  cursor: pointer;
  margin-right: 8px;
  accent-color: var(--primary-blue);
  flex-shrink: 0;
}

.form-checkbox:hover {
  border-color: var(--primary-blue);
}

.form-checkbox:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

.form-checkbox:checked {
  background-color: var(--primary-blue);
  border-color: var(--primary-blue);
}

.form-check-label {
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
}

/* ============================================
   8. LOGIN PROVIDERS - Microsoft Entra ID
   ============================================ */
.login-providers {
  padding: 0;
  margin: 0;
}

/* Sections inside the unified login-box — no extra spacing around second section */
body.login .login-box .login-section + .login-section {
  margin-top: 0;
}

.separator {
  display: flex;
  align-items: center;
  text-align: center;
  margin: var(--space-2) 0 var(--space-2) 0;
}

.separator::before,
.separator::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--border-medium);
}

.separator span {
  padding: 0 var(--space-2);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
}

/* ============================================
   9. UTILITY - Links, Helpers
   ============================================ */
.forgot-password-wrapper {
  margin-top: -16px;
  margin-bottom: var(--space-2);
}

.forgot-password {
  color: var(--primary-blue);
  font-size: 14px;
  text-decoration: none;
  display: inline-block;
  margin-top: 0;
  margin-bottom: 0;
  transition: color 0.2s;
}

.forgot-password:hover {
  color: var(--info-blue);
  text-decoration: underline;
}

.forgot-password--lg {
  font-size: 16px;
}

.helper-text {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* ============================================
   10. STATES - Error, Success, Warning
   ============================================ */

/* Error Banner */
body.login .error-banner,
body.login .banner-danger {
  background: var(--error-bg) !important;
  border: 1px solid var(--error-border) !important;
  border-left: 4px solid var(--error-red) !important;
  border-radius: 8px !important;
  padding: 16px 20px !important;
  margin-bottom: var(--space-3) !important;
  display: block;
}

body.login .banner-danger h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}


body.login .error-icon {
  font-size: 20px;
  line-height: 1;
}

body.login .error-content h2,
body.login .banner-danger h2 {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--error-red) !important;
  margin: 0 0 8px 0 !important;
}

body.login .error-content p,
body.login .banner-danger p {
  font-size: 14px !important;
  color: var(--error-red-dark) !important;
  margin: 0 !important;
}

/* Success Banner */
body.login .success-banner,
body.login .banner-success {
  background: var(--success-bg) !important;
  border: 1px solid var(--success-border) !important;
  border-left: 4px solid var(--success-green) !important;
  border-radius: 8px !important;
  padding: 16px 20px !important;
  margin-bottom: var(--space-3) !important;
}

body.login .success-banner h2,
body.login .banner-success h2 {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--success-green) !important;
}

/* Info Banner */
.info-banner {
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  border-left: 4px solid var(--info-blue);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: var(--space-3);
  font-size: 14px;
  color: var(--info-blue);
}

/* Validation Error (under input) */
.validation-error,
.invalid-feedback {
  font-size: 14px;
  color: var(--error-red);
  margin-top: 4px;
  display: block;
}

/* Caps Lock Warning */
.caps-lock-warning,
body.login .caps-warn {
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-radius: 4px;
  padding: 8px 12px;
  margin-top: 4px;
  font-size: 14px;
  color: var(--warning-yellow);
}

/* Attempts Warning */
.attempts-warning {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--error-red);
  margin-top: 8px;
}

/* ============================================
   11. CAPTCHA
   ============================================ */
.captcha-container {
  margin: var(--space-3) 0;
}

body.login .slider_captcha {
  background: var(--bg-gray-100) !important;
  border-radius: 8px;
}

/* ============================================
   12. RESPONSIVE (Optional - Desktop primary)
   ============================================ */
@media (max-width: 640px) {
  .login-box {
    max-width: 100%;
    margin: var(--space-2);
    padding: var(--space-4) var(--space-3);
  }

  .minimalist-header {
    padding: 12px var(--space-2);
  }

  .login-heading {
    font-size: 24px;
  }
}

/* ============================================
   13. OVERRIDES - Clean up existing styles
   ============================================ */

/* Remove MDC styles from login page */
body.login .mdc-text-field {
  display: none;
}

body.login .mdc-notched-outline {
  display: none;
}

/* Clean submit button area */
body.login #fm1 .cas-field:last-of-type {
  margin-bottom: 0;
}

/* Hide original reveal password if using new one */
body.login .reveal-password.mdc-button {
  display: none;
}

/* Hide company logo (grit-logo-allaround) on login page — kept for other CAS pages */
body.login #companyui,
body.login .company-logo {
  display: none !important;
}

/* Hide duplicate forgot-password pmlinks fragment on login page (new link exists above submit) */
body.login #pmlinks {
  display: none !important;
}

/* Hide CAS default loginsidebar on login page (out-of-box help text) */
body.login #sidebar,
body.login .sidebar-content {
  display: none !important;
}

/* Hide fieldsLegend on login page (redundant with required stars in labels) */
body.login #fieldsLegend {
  display: none;
}

/* ============================================
   14. ERROR LOGIN-BOX (Failed login / Stop webflow)
   ============================================ */

/* Pink-tinted login-box used on dedicated error pages
   (e.g. delegated authn stop webflow). The whole card is the error surface
   instead of using an inner banner. */
body.login .login-box--error {
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  text-align: center;
}

body.login .login-heading--error {
  color: var(--error-red);
  font-size: 24px;
  text-align: center;
  margin: 0 0 var(--space-2) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}

body.login .login-heading--error .mdi {
  font-size: 28px;
  line-height: 1;
}

body.login .login-box--error .error-message {
  color: var(--error-red);
  font-size: 16px;
  font-weight: 400;
  margin: 0 0 var(--space-3) 0;
  line-height: 1.4;
}

body.login .login-box--error .tech-support-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3) 0;
  display: inline-block;
  text-align: left;
}

body.login .login-box--error .tech-support-list li {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 16px;
  color: var(--text-primary);
  margin-bottom: 4px;
}

body.login .login-box--error .tech-support-list li:last-child {
  margin-bottom: 0;
}

body.login .login-box--error .tech-support-list a {
  color: var(--text-primary);
  text-decoration: none;
}

body.login .login-box--error .tech-support-list a:hover {
  color: var(--primary-blue);
  text-decoration: underline;
}

body.login .login-box--error .tech-support-icon {
  color: var(--text-secondary);
  font-size: 18px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

body.login .login-box--error .tech-support-icon--phone {
  color: var(--error-red);
}

/* ============================================
   15. SUCCESS LOGIN-BOX (Logout success / Password reset sent / Password updated)
   ============================================ */

/* Green-tinted login-box used on dedicated success pages.
   Mirrors .login-box--error layout — the whole card is the success surface
   instead of a white card with an inner .banner-success. */
body.login .login-box--success {
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  text-align: center;
}

body.login .login-heading--success {
  color: var(--success-green);
  font-size: 24px;
  text-align: center;
  margin: 0 0 var(--space-2) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}

body.login .login-heading--success .mdi {
  font-size: 28px;
  line-height: 1;
}

body.login .login-box--success .success-message {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 400;
  margin: 0 0 var(--space-3) 0;
  line-height: 1.4;
}

body.login .login-box--success .success-message-first {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 400;
  margin: var(--space-3) 0 var(--space-2) 0;
  line-height: 1.4;
}

body.login .login-box--success .success-message-solo {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 400;
  margin: var(--space-3) 0 8px 0;
  line-height: 1.4;
}

/* ============================================
   16. WARNING LOGIN-BOX (Account temporarily locked / too many bad logins)
   ============================================ */

/* Amber-tinted login-box used on dedicated warning pages.
   Mirrors .login-box--error / --success layout — the whole card is the warning surface. */
body.login .login-box--warning {
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  text-align: center;
}

body.login .login-heading--warning {
  color: var(--warning-yellow);
  font-size: 24px;
  text-align: center;
  margin: 0 0 var(--space-2) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}

body.login .login-heading--warning .mdi {
  font-size: 28px;
  line-height: 1;
}

body.login .login-box--warning .warning-message {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 400;
  margin: 0 0 var(--space-3) 0;
  line-height: 1.4;
}


/* ============================================
   17. COMPACT LOGIN ERROR BANNER
   Single-line "Neplatné přihlašovací údaje" banner
   shown above the username field on failed login.
   ============================================ */
body.login #loginErrorsPanel.login-error-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: var(--space-3);
  color: var(--error-red);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
}

body.login #loginErrorsPanel.login-error-banner .mdi {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  color: var(--error-red);
}

body.login #loginErrorsPanel.login-error-banner .login-error-banner__text {
  color: var(--error-red);
}

body.login #loginErrorsPanel.login-error-banner p {
  margin: 0;
  display: inline;
  color: inherit;
  font-size: inherit;
}

/* Stacked variant (title row + detail line) — used on the MFA code screen.
   The icon sits directly before the title on the first line; the detail line
   is below with extra spacing. */
body.login #loginErrorsPanel.login-error-banner--stacked .login-error-banner__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

body.login #loginErrorsPanel.login-error-banner--stacked .login-error-banner__title {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* ============================================
   18. UTILITIES FOR ERROR / INFO VIEW PAGES
   (pwd-expired, pwd-almost-expired, service-error,
    login-exceeded, view-service-sso-error...)
   ============================================ */

/* Centered login-box variant for non-form info/error pages */
body.login .login-box--centered {
  text-align: center;
}

/* Compact heading variant (24px) for error/info views.
   Default .login-heading is 32px (sign-in screen). */
body.login .login-heading--compact {
  font-size: 24px;
}

/* Hero icon used at the top of info/error views (lock-clock, alert-circle...) */
body.login .hero-icon {
  font-size: 48px;
  margin-bottom: var(--space-2);
  line-height: 1;
  text-align: center;
}

body.login .hero-icon > i,
body.login .hero-icon .mdi,
body.login .hero-icon .fas {
  font-size: 48px !important;
  line-height: 1 !important;
  display: inline-block;
}

body.login .hero-icon > i::before,
body.login .hero-icon .mdi::before,
body.login .hero-icon .fas::before {
  font-size: 48px !important;
  line-height: 1 !important;
}

body.login .hero-icon--error {
  color: var(--error-red);
}

body.login .hero-icon--warning {
  color: var(--warning-yellow);
}

/* Anchor styled as primary button — auto-apply inline-flex etc.
   so callers don't need inline style="display: inline-flex; ..." */
body.login a.btn-login-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--bg-white);
}

body.login a.btn-login-primary:link,
body.login a.btn-login-primary:visited,
body.login a.btn-login-primary:hover,
body.login a.btn-login-primary:focus,
body.login a.btn-login-primary:active {
  color: var(--bg-white);
  text-decoration: none;
}

body.login a.btn-login-secondary,
body.login a.btn-login-secondary:link,
body.login a.btn-login-secondary:visited,
body.login a.btn-login-secondary:hover,
body.login a.btn-login-secondary:focus,
body.login a.btn-login-secondary:active {
  color: var(--text-primary);
  text-decoration: none;
}

/* Warning banner — completes the .banner-* family
   (banner-danger, banner-success, info-banner already exist). */
body.login .banner-warning {
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-left: 4px solid var(--warning-yellow);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: var(--space-3);
}

body.login .banner-warning p {
  margin: 0;
  color: var(--warning-yellow);
  font-size: 14px;
}

/* Helper text spacing variant used on info pages */
body.login .helper-text--lg {
  margin-bottom: var(--space-3);
  font-size: 15px;
}

/* ============================================
   17. PASSWORD CHANGE PAGE EXTRAS
   ============================================ */

/* Password policy hints box (newPassword view) */
body.login .password-policy-hints-box {
  background: var(--bg-gray-50);
  border-radius: 8px;
  padding: 16px;
  margin-top: var(--space-2);
}

body.login .password-policy-hints-box h4 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: var(--text-primary);
}

body.login .password-policy-hints-box ul {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  color: var(--text-secondary);
}

/* "Generate password" inline action link styled as text button */
body.login .generate-password-link {
  background: transparent;
  border: none;
  color: var(--primary-blue);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

body.login .generate-password-link:hover {
  color: var(--info-blue);
  text-decoration: underline;
}

/* ============================================
   18. DELEGATED AUTHN CREDENTIAL SELECTION
   ============================================ */

body.login .login-box--delegated {
  max-width: 1024px;
  padding: var(--space-5);
}

body.login .login-box--delegated .login-heading {
  margin-bottom: var(--space-2);
}

body.login .delegated-selection-table-wrap {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
  overflow-x: auto;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--bg-white);
}

body.login #profilesTable {
  margin: 0;
  width: 100%;
  border-collapse: collapse;
  background: transparent;
}

body.login #profilesTable thead th {
  background: var(--bg-gray-50);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
}

body.login #profilesTable tbody td {
  vertical-align: middle;
  border-top: 1px solid var(--border-light);
  padding: 14px 16px;
}

body.login #profilesTable tbody tr:hover {
  background: var(--bg-gray-50);
}

body.login #profilesTable tbody tr:last-child td {
  border-bottom: 0;
}

body.login #profilesTable .delegated-selection-cell--username {
  width: auto;
}

body.login #profilesTable .delegated-selection-cell--email {
  width: auto;
}

body.login #profilesTable .delegated-selection-cell--name {
  width: auto;
}

body.login #profilesTable .delegated-selection-cell--surname {
  width: auto;
}

body.login #profilesTable .delegated-selection-cell--nazevop {
  width: auto;
}

body.login #profilesTable .delegated-selection-cell--dtmlastlogin {
  width: 160px;
  white-space: nowrap;
}

body.login #profilesTable th.delegated-selection-cell--dtmlastlogin {
  white-space: normal;
}

body.login #profilesTable .delegated-selection-cell--action {
  width: 1%;
  white-space: nowrap;
  text-align: center;
}

body.login #profilesTable code,
body.login #profilesTable kbd {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--text-primary);
  display: block;
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  margin: 0;
  padding: 0;
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

body.login #profilesTable .delegated-selection-form {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

body.login #profilesTable .delegated-selection-submit {
  width: auto;
  min-width: 120px;
  padding: 10px 16px;
  margin: 0;
  text-transform: uppercase;
}

body.login .delegated-selection-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-2);
}

body.login .delegated-selection-cancel {
  width: auto;
  min-width: 120px;
}

@media (max-width: 900px) {
  body.login .login-box--delegated {
    max-width: 100%;
    padding: var(--space-4) var(--space-3);
  }

  body.login #profilesTable .delegated-selection-cell--username {
    width: auto;
  }
}

/* ============================================
   19. INLINE FIELD VALIDATION (custom HTML5 messages)
   - Replaces the native browser validation bubble
   - Renders the error to the right of the input on wide viewports
     (>=1100px, where the centered .login-box has space around it),
     falls back to below the input on narrow screens.
   ============================================ */
body.login .form-group .field-error {
  display: none;
  color: var(--error-red);
  font-size: 14px;
  line-height: 1.3;
  margin-top: 6px;
}

body.login .form-group .field-error.is-visible {
  display: block;
}

/* Right-side bubble variant (opt-in via .field-error--right).
   Anchored to .password-wrapper / .input-wrapper so the bubble height
   matches the input regardless of any siblings inside .form-group
   (label, hint button...). */
@media (min-width: 1100px) {
  body.login .password-wrapper .field-error.field-error--right.is-visible,
  body.login .input-wrapper .field-error.field-error--right.is-visible {
    position: absolute;
    /* Match the input vertically: span the full wrapper height */
    top: 0;
    bottom: 0;
    left: calc(100% + 16px);
    margin-top: 0;
    /* Use flex so text is vertically centered on the input's middle line */
    display: flex;
    align-items: center;
    padding: 0 14px;
    background: var(--bg-white);
    border: 1px solid var(--error-red);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    width: max-content;
    max-width: none;
    font-size: 16px;
    line-height: 1.3;
    white-space: nowrap;
    z-index: 5;
  }

  /* Arrow pointing to the input — vertically centered on the input */
  body.login .password-wrapper .field-error.field-error--right.is-visible::before,
  body.login .input-wrapper .field-error.field-error--right.is-visible::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 50%;
    width: 10px;
    height: 10px;
    background: var(--bg-white);
    border-left: 1px solid var(--error-red);
    border-bottom: 1px solid var(--error-red);
    transform: translateY(-50%) rotate(45deg);
  }
}

/* Anchor parent for the absolute-positioned bubble (kept for non-password
   inputs that may use the same pattern in the future). */
body.login .form-group.has-inline-error {
  position: relative;
}

/* Generic single-input wrapper used on plain text inputs (e.g. username
   on the password-reset view). Mirrors .password-wrapper. */
body.login .input-wrapper {
  position: relative;
}

/* Visual state on the input itself */
body.login .form-input.is-invalid,
body.login .form-input.is-invalid:focus {
  border-color: var(--error-red);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}