/* ==========================================================================
   ESET Auth Pages — Material Design 3 tokens + Bootstrap layout
   Reuse this file for login, register, forgot-password, reset-password, etc.
   ========================================================================== */

/* --------------------------------------------------------------------------
   M3 Design Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Color roles (dark green scheme) */
  --auth-primary:                #52b788;
  --auth-on-primary:             #0d2b1e;
  --auth-primary-container:      #1b4332;
  --auth-on-primary-container:   #95d5b2;

  --auth-surface:                #0d1f18;
  --auth-surface-variant:        #1a3327;
  --auth-surface-container:      #162a20;
  --auth-surface-container-high: #1e3a2f;

  --auth-on-surface:             #e8f0eb;
  --auth-on-surface-variant:     #a8c5b5;

  --auth-outline:                #52796f;
  --auth-outline-variant:        #2d4f40;

  --auth-error:                  #ffb4ab;
  --auth-on-error:               #690005;
  --auth-error-container:        #4a0010;
  --auth-on-error-container:     #ffb4ab;

  /* M3 Shape scale */
  --auth-shape-xs:   4px;
  --auth-shape-sm:   8px;
  --auth-shape-md:   12px;
  --auth-shape-lg:   16px;
  --auth-shape-xl:   28px;
  --auth-shape-full: 9999px;

  /* M3 State layer opacities */
  --auth-state-hover:   0.08;
  --auth-state-pressed: 0.12;
  --auth-state-focus:   0.12;

  /* M3 Type scale */
  --auth-type-display-size:    3rem;
  --auth-type-display-weight:  700;

  --auth-type-headline-size:   2rem;
  --auth-type-headline-weight: 400;
  --auth-type-headline-lh:     1.25;

  --auth-type-title-size:      1rem;
  --auth-type-title-weight:    500;

  --auth-type-body-size:       0.875rem;
  --auth-type-body-weight:     400;
  --auth-type-body-lh:         1.5;

  --auth-type-label-size:      0.875rem;
  --auth-type-label-weight:    500;
  --auth-type-label-spacing:   0.006em;

  /* M3 Motion — standard easing */
  --auth-motion-standard: cubic-bezier(0.2, 0, 0, 1);
  --auth-motion-decel:    cubic-bezier(0, 0, 0, 1);
}

/* --------------------------------------------------------------------------
   Base reset for auth pages
   -------------------------------------------------------------------------- */
.auth-page {
  margin: 0;
  padding: 0;
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: var(--auth-surface);
  color: var(--auth-on-surface);
  min-height: 100vh;
}

/* --------------------------------------------------------------------------
   Split layout
   -------------------------------------------------------------------------- */
.auth-layout {
  display: flex;
  min-height: 100vh;
}

/* --------------------------------------------------------------------------
   Brand panel (left)
   -------------------------------------------------------------------------- */
.auth-brand-panel {
  flex: 0 0 50%;
  background-color: var(--auth-surface-container-high);
  display: flex;
  flex-direction: column;
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
}

/* Subtle grain-texture overlay for depth */
.auth-brand-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 20% 80%, rgba(82, 183, 136, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(27, 67, 50, 0.4) 0%, transparent 60%);
  pointer-events: none;
}

.auth-brand-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
  z-index: 1;
}

.auth-brand-logo-icon {
  width: 40px;
  height: 40px;
  background-color: var(--auth-primary);
  border-radius: var(--auth-shape-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.auth-brand-logo-icon svg {
  width: 22px;
  height: 22px;
  fill: var(--auth-on-primary);
}

.auth-brand-logo-text {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--auth-on-surface);
  letter-spacing: -0.02em;
}

/* Dashboard CSS illustration */
.auth-brand-illustration {
  background-color: var(--auth-surface);
  border-radius: var(--auth-shape-lg);
  padding: 1.25rem;
  margin: auto 0 1.5rem;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.4),
    0 20px 40px -8px rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 1;
}

.illus-topbar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--auth-outline-variant);
}

.illus-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--auth-shape-full);
  flex-shrink: 0;
}

.illus-dot-red    { background: #ff5f57; }
.illus-dot-yellow { background: #febc2e; }
.illus-dot-green  { background: #28c840; }

.illus-urlbar {
  flex: 1;
  height: 7px;
  background: var(--auth-outline-variant);
  border-radius: var(--auth-shape-full);
  margin-left: 0.5rem;
  opacity: 0.6;
}

.illus-body {
  display: flex;
  gap: 0.875rem;
}

.illus-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 56px;
  flex-shrink: 0;
  padding-top: 0.25rem;
}

.illus-nav-item {
  height: 7px;
  border-radius: var(--auth-shape-full);
  background: var(--auth-outline-variant);
  opacity: 0.5;
}

.illus-nav-item.active {
  background: var(--auth-primary);
  opacity: 1;
  width: 75%;
}

.illus-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Stat cards row */
.illus-stat-row {
  display: flex;
  gap: 0.5rem;
}

.illus-stat-card {
  flex: 1;
  height: 44px;
  border-radius: var(--auth-shape-sm);
  background: var(--auth-surface-variant);
  position: relative;
  overflow: hidden;
}

.illus-stat-card::after {
  content: '';
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  right: 0.5rem;
  height: 5px;
  border-radius: var(--auth-shape-full);
  background: var(--auth-outline-variant);
  opacity: 0.6;
}

.illus-stat-card.accent {
  background: var(--auth-primary-container);
}

.illus-stat-card.accent::after {
  background: var(--auth-primary);
  opacity: 0.5;
}

/* Bar chart */
.illus-chart {
  height: 64px;
  border-radius: var(--auth-shape-sm);
  background: var(--auth-surface-variant);
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 8px 8px 0;
}

.illus-bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: var(--auth-outline-variant);
}

.illus-bar.h-80 { height: 80%; background: var(--auth-primary); }
.illus-bar.h-55 { height: 55%; background: var(--auth-primary); opacity: 0.65; }
.illus-bar.h-35 { height: 35%; }
.illus-bar.h-65 { height: 65%; background: var(--auth-primary); opacity: 0.8; }
.illus-bar.h-45 { height: 45%; }

/* Table rows */
.illus-table {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.illus-table-row {
  height: 6px;
  border-radius: var(--auth-shape-full);
  background: var(--auth-outline-variant);
  opacity: 0.5;
}

.illus-table-row.w-full { width: 100%; }
.illus-table-row.w-70   { width: 70%; }
.illus-table-row.w-85   { width: 85%; }

/* Tagline + description */
.auth-brand-content {
  position: relative;
  z-index: 1;
  margin-bottom: 1.5rem;
  text-align: center;
}

.auth-brand-tagline {
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  font-weight: 700;
  color: var(--auth-on-surface);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 0.625rem;
}

.auth-brand-description {
  font-size: var(--auth-type-body-size);
  color: var(--auth-on-surface-variant);
  line-height: var(--auth-type-body-lh);
}

/* Footer */
.auth-brand-footer {
  font-size: 0.75rem;
  color: var(--auth-on-surface-variant);
  position: relative;
  z-index: 1;
  margin-top: auto;
}

.auth-brand-footer a {
  color: var(--auth-primary);
  text-decoration: none;
}

.auth-brand-footer a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Form panel (right)
   -------------------------------------------------------------------------- */
.auth-form-panel {
  flex: 0 0 50%;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2.5rem;
  position: relative;

  /* ---- Light-surface token overrides (white) ---- */
  --auth-on-surface:             #1a2e25;
  --auth-on-surface-variant:     #4a6358;
  --auth-surface-container-high: #f0f5f2;
  --auth-surface-container:      #e8f0eb;
  --auth-outline:                #7a9e8e;
  --auth-outline-variant:        #c2d6cc;
  --auth-error-container:        #fde8e8;
  --auth-on-error-container:     #7f1d1d;
  /* Primary green stays */
}

/* Language switcher — fixed top-right of viewport */
.auth-lang-switcher {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 200;
}

.auth-lang-btn {
  background-color: rgba(255, 255, 255, 0.7);
  color: #1a2e25;
  border: 1px solid #c2d6cc;
  border-radius: var(--auth-shape-full);
  padding: 0.375rem 1rem;
  font-size: var(--auth-type-label-size);
  font-weight: var(--auth-type-label-weight);
  letter-spacing: var(--auth-type-label-spacing);
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background-color 200ms var(--auth-motion-standard),
              border-color 200ms var(--auth-motion-standard);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.auth-lang-btn:hover {
  background-color: #ffffff;
  border-color: #7a9e8e;
}

/* Form card wrapper */
.auth-form-card {
  width: 100%;
  max-width: 420px;
}

.auth-form-headline {
  font-size: var(--auth-type-headline-size);
  font-weight: var(--auth-type-headline-weight);
  line-height: var(--auth-type-headline-lh);
  color: var(--auth-on-surface);
  margin-bottom: 0.25rem;
}

.auth-form-subtext {
  font-size: var(--auth-type-body-size);
  color: var(--auth-on-surface-variant);
  margin-bottom: 2rem;
}

/* --------------------------------------------------------------------------
   M3 Filled Text Field
   -------------------------------------------------------------------------- */
.m3-field {
  position: relative;
  margin-bottom: 1.25rem;
}

.m3-field .m3-input {
  display: block;
  width: 100%;
  padding: 1.375rem 3rem 0.5rem 2.875rem;
  background-color: var(--auth-surface-container-high);
  color: var(--auth-on-surface);
  border: none;
  border-bottom: 1px solid var(--auth-outline);
  border-radius: var(--auth-shape-xs) var(--auth-shape-xs) 0 0;
  outline: none;
  font-size: var(--auth-type-body-size);
  font-family: inherit;
  line-height: 1.5;
  transition:
    border-color 150ms var(--auth-motion-standard),
    border-width 150ms var(--auth-motion-standard),
    background-color 150ms var(--auth-motion-standard);
  /* remove browser autofill styles */
  -webkit-text-fill-color: var(--auth-on-surface);
}

.m3-field .m3-input:-webkit-autofill,
.m3-field .m3-input:-webkit-autofill:hover,
.m3-field .m3-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px #f0f5f2 inset;
  -webkit-text-fill-color: #1a2e25;
}

.m3-field .m3-input::placeholder {
  color: transparent;
}

.m3-field .m3-input:focus {
  border-bottom: 2px solid var(--auth-primary);
  background-color: var(--auth-surface-container);
}

/* Floating label */
.m3-field label {
  position: absolute;
  top: 50%;
  left: 2.875rem;
  transform: translateY(-50%);
  font-size: var(--auth-type-body-size);
  color: var(--auth-on-surface-variant);
  pointer-events: none;
  transition:
    top 150ms var(--auth-motion-standard),
    font-size 150ms var(--auth-motion-standard),
    color 150ms var(--auth-motion-standard),
    transform 150ms var(--auth-motion-standard);
  white-space: nowrap;
}

/* Label floats up when input is focused OR has value */
.m3-field .m3-input:focus ~ label,
.m3-field .m3-input:not(:placeholder-shown) ~ label {
  top: 0.5rem;
  transform: translateY(0);
  font-size: 0.7rem;
  color: var(--auth-on-surface-variant);
}

.m3-field .m3-input:focus ~ label {
  color: var(--auth-primary);
}

/* Leading icon */
.m3-field .m3-field-icon-lead {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--auth-on-surface-variant);
  font-size: 1rem;
  pointer-events: none;
  transition: color 150ms var(--auth-motion-standard);
  line-height: 1;
}

.m3-field .m3-input:focus ~ .m3-field-icon-lead,
.m3-field:has(.m3-input:focus) .m3-field-icon-lead {
  color: var(--auth-primary);
}

/* Trailing icon (password toggle) */
.m3-field .m3-field-icon-trail {
  position: absolute;
  right: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--auth-on-surface-variant);
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  border-radius: var(--auth-shape-full);
  line-height: 1;
  transition: color 150ms var(--auth-motion-standard);
}

.m3-field .m3-field-icon-trail:hover {
  color: var(--auth-on-surface);
}

/* Error state */
.m3-field.is-error .m3-input {
  border-bottom-color: var(--auth-error);
}

.m3-field.is-error .m3-input:focus {
  border-bottom-color: var(--auth-error);
}

.m3-field.is-error label,
.m3-field.is-error .m3-input:focus ~ label,
.m3-field.is-error .m3-input:not(:placeholder-shown) ~ label {
  color: var(--auth-error);
}

.m3-field.is-error .m3-field-icon-lead {
  color: var(--auth-error);
}

.m3-field-supporting {
  font-size: 0.75rem;
  color: var(--auth-on-surface-variant);
  margin-top: 0.25rem;
  padding-left: 0.875rem;
}

.m3-field-supporting.is-error {
  color: var(--auth-error);
}

/* --------------------------------------------------------------------------
   M3 Checkbox
   -------------------------------------------------------------------------- */
.m3-checkbox-wrap {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
}

.m3-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--auth-outline);
  border-radius: var(--auth-shape-xs);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition:
    background-color 100ms var(--auth-motion-standard),
    border-color 100ms var(--auth-motion-standard);
}

.m3-checkbox:checked {
  background-color: var(--auth-primary);
  border-color: var(--auth-primary);
}

.m3-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 1px;
  width: 8px;
  height: 5px;
  border-left: 2px solid var(--auth-on-primary);
  border-bottom: 2px solid var(--auth-on-primary);
  transform: rotate(-45deg);
}

.m3-checkbox-label {
  font-size: var(--auth-type-body-size);
  color: var(--auth-on-surface-variant);
  user-select: none;
}

/* --------------------------------------------------------------------------
   M3 Buttons
   -------------------------------------------------------------------------- */

/* Filled */
.btn-m3-filled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1.5rem;
  background-color: var(--auth-primary);
  color: var(--auth-on-primary);
  border: none;
  border-radius: var(--auth-shape-full);
  font-size: var(--auth-type-label-size);
  font-weight: var(--auth-type-label-weight);
  letter-spacing: var(--auth-type-label-spacing);
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition:
    box-shadow 200ms var(--auth-motion-standard),
    background-color 200ms var(--auth-motion-standard);
}

/* M3 state layer */
.btn-m3-filled::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--auth-on-primary);
  opacity: 0;
  transition: opacity 200ms var(--auth-motion-standard);
  border-radius: inherit;
}

.btn-m3-filled:hover::before  { opacity: var(--auth-state-hover); }
.btn-m3-filled:active::before { opacity: var(--auth-state-pressed); }

/* Outlined */
.btn-m3-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1.5rem;
  background-color: transparent;
  color: var(--auth-on-surface);
  border: 1px solid var(--auth-outline);
  border-radius: var(--auth-shape-full);
  font-size: var(--auth-type-label-size);
  font-weight: var(--auth-type-label-weight);
  letter-spacing: var(--auth-type-label-spacing);
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: border-color 200ms var(--auth-motion-standard);
}

.btn-m3-outlined::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--auth-on-surface);
  opacity: 0;
  transition: opacity 200ms var(--auth-motion-standard);
  border-radius: inherit;
}

.btn-m3-outlined:hover { border-color: var(--auth-on-surface); }
.btn-m3-outlined:hover::before  { opacity: var(--auth-state-hover); }
.btn-m3-outlined:active::before { opacity: var(--auth-state-pressed); }

/* Text / link */
.btn-m3-text {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  color: var(--auth-primary);
  font-size: var(--auth-type-label-size);
  font-weight: var(--auth-type-label-weight);
  letter-spacing: var(--auth-type-label-spacing);
  font-family: inherit;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: var(--auth-shape-sm);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: color 200ms var(--auth-motion-standard);
}

.btn-m3-text::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--auth-primary);
  opacity: 0;
  transition: opacity 200ms var(--auth-motion-standard);
  border-radius: inherit;
}

.btn-m3-text:hover { color: var(--auth-primary); }
.btn-m3-text:hover::before  { opacity: var(--auth-state-hover); }
.btn-m3-text:active::before { opacity: var(--auth-state-pressed); }

/* --------------------------------------------------------------------------
   Alert / error message
   -------------------------------------------------------------------------- */
.m3-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  border-radius: var(--auth-shape-md);
  padding: 0.75rem 1rem;
  font-size: var(--auth-type-body-size);
  margin-bottom: 1.25rem;
}

.m3-alert.m3-alert-error {
  background-color: var(--auth-error-container);
  color: var(--auth-on-error-container);
}

.m3-alert i { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }

/* --------------------------------------------------------------------------
   Divider with label
   -------------------------------------------------------------------------- */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  color: var(--auth-on-surface-variant);
  font-size: var(--auth-type-body-size);
  margin: 1.25rem 0;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--auth-outline-variant);
}

/* --------------------------------------------------------------------------
   Footer action row (e.g. "Don't have an account?  Register")
   -------------------------------------------------------------------------- */
.auth-footer-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.125rem;
  margin-top: 1.5rem;
  font-size: var(--auth-type-body-size);
  color: var(--auth-on-surface-variant);
}

/* --------------------------------------------------------------------------
   RTL support
   -------------------------------------------------------------------------- */
[dir="rtl"] .auth-lang-switcher {
  right: auto;
  left: 1.25rem;
}

[dir="rtl"] .m3-field label {
  left: auto;
  right: 2.875rem;
}

[dir="rtl"] .m3-field .m3-input {
  padding-left: 3rem;
  padding-right: 2.875rem;
}

[dir="rtl"] .m3-field .m3-field-icon-lead {
  left: auto;
  right: 0.875rem;
}

[dir="rtl"] .m3-field .m3-field-icon-trail {
  right: auto;
  left: 0.875rem;
}

[dir="rtl"] .m3-field .m3-input {
  padding-right: 2.875rem;
  padding-left: 3rem;
  text-align: right;
}

[dir="rtl"] .auth-brand-description {
  text-align: center;
}

/* --------------------------------------------------------------------------
   Responsive — stack vertically on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .auth-layout {
    flex-direction: column;
  }

  .auth-brand-panel {
    flex: 0 0 auto;
    min-height: auto;
    padding: 1.75rem 1.5rem 1.25rem;
  }

  .auth-brand-tagline {
    font-size: 1.375rem;
  }

  .auth-brand-illustration {
    display: none;
  }

  .auth-brand-content {
    margin-bottom: 0.75rem;
  }

  .auth-brand-footer {
    display: none;
  }

  .auth-form-panel {
    flex: 1;
    padding: 2rem 1.5rem;
    padding-top: 2.5rem;
    justify-content: flex-start;
  }

  .auth-lang-switcher {
    top: 0.875rem;
    right: 0.875rem;
  }

  [dir="rtl"] .auth-lang-switcher {
    right: auto;
    left: 0.875rem;
  }
}

/* --------------------------------------------------------------------------
   Step progress bar  (used on register pages)
   -------------------------------------------------------------------------- */
.auth-step-bar {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 2rem;
}

.auth-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  position: relative;
  flex: 1;
}

.auth-step-circle {
  width: 32px;
  height: 32px;
  border-radius: var(--auth-shape-full);
  border: 2px solid var(--auth-outline-variant);
  background: transparent;
  color: var(--auth-on-surface-variant);
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 200ms var(--auth-motion-standard);
  position: relative;
  z-index: 1;
}

.auth-step.active .auth-step-circle {
  background: var(--auth-primary);
  border-color: var(--auth-primary);
  color: var(--auth-on-primary);
}

.auth-step.done .auth-step-circle {
  background: var(--auth-primary-container);
  border-color: var(--auth-primary);
  color: var(--auth-primary);
}

.auth-step-label {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--auth-on-surface-variant);
  white-space: nowrap;
}

.auth-step.active .auth-step-label {
  color: var(--auth-primary);
}

/* Connector line between steps */
.auth-step-connector {
  flex: 1;
  height: 2px;
  background: var(--auth-outline-variant);
  margin-top: -1rem; /* align with circle center */
  transition: background-color 200ms var(--auth-motion-standard);
}

.auth-step-connector.done {
  background: var(--auth-primary);
}

/* --------------------------------------------------------------------------
   M3 field without leading icon  (for tight 2-col name fields)
   -------------------------------------------------------------------------- */
.m3-field.no-icon .m3-input {
  padding-left: 1rem;
  padding-right: 1rem;
}

.m3-field.no-icon label {
  left: 1rem;
}

/* --------------------------------------------------------------------------
   2-column field grid  (first name + last name side by side)
   -------------------------------------------------------------------------- */
.m3-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

/* --------------------------------------------------------------------------
   File drop zone
   -------------------------------------------------------------------------- */
/* Hide the native input completely */
.m3-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.m3-file-zone {
  border: 2px dashed var(--auth-outline);
  border-radius: var(--auth-shape-lg);
  background: var(--auth-surface-container-high);
  padding: 2.5rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 200ms var(--auth-motion-standard),
    background-color 200ms var(--auth-motion-standard);
  position: relative;
  margin-bottom: 1.25rem;
}

.m3-file-zone:hover,
.m3-file-zone.drag-over {
  border-color: var(--auth-primary);
  background: var(--auth-surface-container);
}

.m3-file-zone-icon {
  font-size: 2.5rem;
  color: var(--auth-on-surface-variant);
  margin-bottom: 0.75rem;
  display: block;
  transition: color 200ms var(--auth-motion-standard);
}

.m3-file-zone:hover .m3-file-zone-icon,
.m3-file-zone.drag-over .m3-file-zone-icon {
  color: var(--auth-primary);
}

.m3-file-zone-title {
  font-size: var(--auth-type-title-size);
  font-weight: var(--auth-type-title-weight);
  color: var(--auth-on-surface);
  margin-bottom: 0.25rem;
}

.m3-file-zone-hint {
  font-size: 0.75rem;
  color: var(--auth-on-surface-variant);
}

/* Selected file preview */
.m3-file-preview {
  display: none;
  align-items: center;
  gap: 0.75rem;
  background: var(--auth-primary-container);
  border-radius: var(--auth-shape-md);
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}

.m3-file-preview.visible {
  display: flex;
}

.m3-file-preview-icon {
  font-size: 1.5rem;
  color: var(--auth-primary);
  flex-shrink: 0;
}

.m3-file-preview-name {
  font-size: var(--auth-type-body-size);
  color: var(--auth-on-primary-container);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.m3-file-preview-clear {
  background: none;
  border: none;
  color: var(--auth-on-primary-container);
  cursor: pointer;
  padding: 0.125rem;
  border-radius: var(--auth-shape-full);
  line-height: 1;
  opacity: 0.7;
  flex-shrink: 0;
}

.m3-file-preview-clear:hover { opacity: 1; }

/* Date field — no leading icon variant uses same no-icon pattern */
.m3-field .m3-input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  cursor: pointer;
}