/* Auth & Profile Pages - MD3 Standards
   ============================================================================
   This stylesheet ensures login/signup/profile forms are clear, professional,
   and accessible while adhering to MD3 design tokens. */

/* ============================================================================
   1) CONTAINER / CARD — Auth Card Base Styling
   ============================================================================ */

.md3-auth-card {
  /* Define local background color for consistent label-bg inheritance */
  --_auth-card-bg: var(--md-sys-color-surface);
  
  /* Card dimensions and positioning */
  max-width: 480px;
  margin-inline: auto;
  width: 100%;
  box-sizing: border-box;
  
  /* Surface and elevation */
  background: var(--_auth-card-bg);
  border-radius: var(--radius-xl);
  box-shadow: var(--elev-2);
  
  /* Internal padding for breathing room */
  padding: var(--space-10);
  
  /* LABEL-BG INHERITANCE: Textfield labels inherit this to match card bg */
  --app-textfield-label-bg: var(--_auth-card-bg);
  
  /* Border: subtle outline for definition */
  border: 1px solid var(--md-sys-color-outline-variant);
}

.md3-card__header,
.md3-card__content {
  padding: 0; /* No extra padding; card itself handles it */
}

.md3-card__header > h1,
.md3-card__header > h2 {
  margin: 0;
}

/* ============================================================================
   2) TYPOGRAPHY — Headline & Subtitle (Hierarchie)
   ============================================================================ */

/* Main title — dominant, clear primary color */
.md3-auth-card .md3-card__title {
  font-size: var(--md-sys-typescale-headline-small-font-size, 1.5rem);
  font-weight: var(--md-sys-typescale-headline-small-weight, 500);
  line-height: var(--md-sys-typescale-headline-small-line-height, 2rem);
  color: var(--md-sys-color-on-surface);
  margin: 0 0 var(--space-3) 0;
}

/* Description/subtitle — secondary, muted color for visual calm */
.md3-auth-card .md3-body-medium {
  color: var(--md-sys-color-on-surface-variant);
  margin: 0 0 var(--space-8) 0;
  font-size: var(--md-sys-typescale-body-medium-font-size, 0.875rem);
  line-height: var(--md-sys-typescale-body-medium-line-height, 1.25rem);
}



/* ============================================================================
   3) FORM FIELDS — Outlined Textfields with Clear Focus States
   ============================================================================ */

.md3-auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6); /* 24px: consistent vertical rhythm */
}

/* Form field wrapper container */
.md3-outlined-textfield {
  width: 100%;
  position: relative;
}

.md3-auth-card .md3-outlined-textfield {
  width: 100%;
}

/* Input field: clear background and text color */
.md3-auth-card .md3-outlined-textfield__input {
  background: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface);
  padding: var(--space-4) var(--space-4);
  font-size: var(--md-sys-typescale-body-large-font-size, 1rem);
  border-radius: var(--radius-md);
}

/* Outline: subtle border for inactive state */
.md3-auth-card .md3-outlined-textfield__outline {
  border-color: var(--md-sys-color-outline-variant);
  border-width: 1px;
  border-radius: var(--radius-md);
}

/* Focus state: primary color border + soft glow */
.md3-auth-card .md3-outlined-textfield--focused .md3-outlined-textfield__outline {
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 0 0 2px color-mix(
    in srgb,
    var(--md-sys-color-primary) 20%,
    transparent
  );
}

/* Label styling */
.md3-auth-card .md3-outlined-textfield__label {
  color: var(--md-sys-color-on-surface-variant);
  background: var(--app-textfield-label-bg, var(--md-sys-color-surface));
  padding: 0 var(--space-1);
  font-size: var(--md-sys-typescale-body-small-font-size, 0.75rem);
}



/* ============================================================================
   4) ACTIONS — Button and Secondary Links (CTA Prominence)
   ============================================================================ */

.md3-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-8); /* Breathing room before actions */
}

/* Primary action button — filled, prominent */
.md3-actions .md3-button--filled {
  font-size: var(--md-sys-typescale-label-large-font-size, 0.875rem);
  font-weight: var(--md-sys-typescale-label-large-weight, 500);
}

/* Secondary action link (e.g., "Passwort vergessen") — text only, subtle */
.md3-actions .md3-button--text {
  color: var(--md-sys-color-primary);
  text-decoration: none;
  font-size: var(--md-sys-typescale-label-medium-font-size, 0.75rem);
}

.md3-actions .md3-button--text:hover {
  text-decoration: underline;
}

/* Spacer: Push primary button to the right on desktop */
.md3-actions__spacer {
  flex: 1;
}


/* ============================================================================
   5) RESPONSIVE BEHAVIOR — Mobile-First Adjustments
   ============================================================================ */

@media (max-width: 599px) {
  .md3-auth-card {
    padding: var(--space-6); /* Smaller padding on mobile */
    border-radius: var(--radius-lg);
  }

  /* Stack actions vertically on mobile */
  .md3-actions {
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-6);
  }
  
  .md3-actions__spacer {
    display: none;
  }
  
  /* Primary button full width on mobile */
  .md3-actions .md3-button--filled {
    width: 100%;
    justify-content: center;
    order: 1;
  }
  
  /* Secondary button/link full width and subtle on mobile */
  .md3-actions .md3-button--text {
    width: 100%;
    justify-content: center;
    order: 2;
  }
}

/* 5) DIALOGE UND SHEETS
   Dialog surface and generic dialog styling are handled centrally in
   static/css/md3/components/dialog.css so auth-specific page styles
   must not override dialog surfaces. */

/* Wide dialog variant for edit dialogs */
.md3-dialog--wide .md3-dialog__surface {
  max-width: 480px;
  width: calc(100vw - var(--space-6));
  padding: var(--space-5);
}

/* Form within dialog: Remove gap, use dialog's stack spacing instead */
.md3-dialog__content .md3-form {
  gap: 0; /* Dialog verwendet .md3-stack--dialog mit var(--space-4) */
}

/* 6) PAGE LAYOUT & SPACING */
.md3-auth-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-4); /* Space between cards */
  padding-bottom: var(--space-6);
}

.md3-auth-page > .md3-card {
  margin-bottom: 0; /* Let gap handle spacing */
}

/* 7) FILTER CHIPS for admin lists */
.md3-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

/* 8) FIELDSET for edit dialog sections */
.md3-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.md3-fieldset:not(:last-of-type) {
  margin-bottom: var(--space-4);
}

.md3-fieldset legend {
  padding: 0;
  margin-bottom: var(--space-2);
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant);
}

/* Spacing within fieldsets */
.md3-fieldset > .md3-outlined-textfield {
  margin-top: var(--space-3);
}

.md3-fieldset > .md3-outlined-textfield:first-of-type {
  margin-top: var(--space-2);
}

.md3-fieldset > .md3-switch-row {
  margin-top: var(--space-2);
}

.md3-fieldset > .md3-button {
  margin-top: var(--space-3);
}

.md3-fieldset > .md3-body-small {
  margin-top: var(--space-1);
}

/* 9) ALERT for inline error/info messages */
.md3-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
  margin-bottom: var(--space-3);
}

/* Hidden state for alerts - must hide completely */
.md3-alert[hidden] {
  display: none !important;
}

.md3-alert--error {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}

.md3-alert--success {
  background: color-mix(in srgb,
    var(--md-sys-color-surface) 70%,
    var(--md-sys-color-success-container, #e6f4ea) 30%
  );
  color: var(--md-sys-color-on-surface);
}

.md3-alert__icon {
  flex-shrink: 0;
  font-size: 20px;
}

.md3-alert__message {
  flex: 1;
}

/* 10) TEXTFIELD error state */
.md3-outlined-textfield__input--error {
  border-color: var(--md-sys-color-error) !important;
}

.md3-outlined-textfield__error {
  display: block;
  color: var(--md-sys-color-error);
  font-size: 12px;
  margin-top: var(--space-1);
}

/* Only show height when error has content */
.md3-outlined-textfield__error:empty {
  display: none;
}

/* 11) TEXT COLOR utilities for feedback */
.md3-text-success {
  color: var(--md-sys-color-tertiary);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.md3-text-error {
  color: var(--md-sys-color-error);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* 12) Loading state for buttons */
.md3-button__icon--loading {
  animation: spin 1s linear infinite;
}

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

/* 13) Profile Info Display */
.md3-profile-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.md3-profile-info__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.md3-profile-info__row .md3-label-medium {
  font-size: var(--font-size-sm);
}

.md3-profile-info__row .md3-body-large {
  font-size: var(--font-size-md);
  font-weight: 500;
}

/* Divider within cards */
.md3-auth-card .md3-divider {
  border: none;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  margin: var(--space-4) 0;
}

/* ============================================================================
   14) ADMIN PAGES - RESPONSIVE TOOLBAR & TABLES
   ============================================================================ */

/* Toolbar: Buttons nebeneinander auf Desktop */
.md3-toolbar {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}

/* Table Container für horizontales Scrollen */
.md3-table-container {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--radius-sm);
  background: var(--md-sys-color-surface);
}

/* Admin Table Styles */
.md3-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--md-sys-typescale-body-small-font-size);
}

.md3-table th {
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  font-weight: 600;
  padding: var(--space-3) var(--space-2);
  text-align: left;
  white-space: nowrap;
  border-bottom: 2px solid var(--md-sys-color-outline-variant);
}

.md3-table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  vertical-align: middle;
}

.md3-table tbody tr:hover {
  background: var(--md-sys-color-surface-container-low);
}

/* Row between: Search + Toolbar */
.md3-row--between {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Mobile: Admin Toolbar */
@media (max-width: 839px) {
  .md3-toolbar {
    flex-direction: column;
    width: 100%;
    gap: var(--space-2);
  }
  
  .md3-toolbar .md3-button {
    width: 100%;
    justify-content: center;
  }
  
  .md3-row--between {
    flex-direction: column;
    gap: var(--space-3);
  }
  
  .md3-row--between > * {
    width: 100%;
  }
  
  /* Search field full width */
  .md3-row .md3-fill-max,
  .md3-row.md3-fill-max {
    max-width: 100%;
  }
}

/* Sehr kleine Screens */
@media (max-width: 480px) {
  .md3-toolbar .md3-button {
    padding: var(--space-2) var(--space-3);
    font-size: 0.875rem;
  }
  
  /* Hide desktop columns on very small screens */
  .md3-hide-mobile {
    display: none;
  }
}