/**
 * User Plugin - Auth Structural Styles
 *
 * Structural layout only - visual styling comes from theme.css variables.
 */

/* ============================================
   Base Reset (scoped to auth pages)
   ============================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    line-height: 1.6;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height);
    color: var(--color-text);
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ============================================
   Auth Layout
   ============================================ */
.auth-layout {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-5);
    background: var(--color-auth-bg);
}

/* ============================================
   Auth Card
   ============================================ */
.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--color-card-bg);
    padding: var(--spacing-10);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.auth-card__title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
    margin-bottom: var(--spacing-2);
}

.auth-card__subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-muted);
    margin-bottom: var(--spacing-8);
}

.auth-card__links {
    margin-top: var(--spacing-5);
    text-align: center;
    font-size: var(--font-size-sm);
}

/* ============================================
   Form Components
   ============================================ */
.form-group {
    margin-bottom: var(--spacing-5);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-2);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    color: var(--color-label);
}

.form-control {
    display: block;
    width: 100%;
    padding: var(--input-padding-y) var(--input-padding-x);
    font-family: inherit;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    background-color: var(--color-input-bg);
    border: var(--border-width) solid var(--color-input-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

.form-hint {
    margin-top: var(--spacing-2);
    font-size: var(--font-size-xs);
    color: var(--color-muted);
}

.form-error {
    margin-top: var(--spacing-1);
    font-size: var(--font-size-xs);
    color: var(--color-danger);
}

/* ============================================
   Checkbox
   ============================================ */
.checkbox-group {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-5);
}

.checkbox-group input[type="checkbox"] {
    width: auto;
    margin-right: var(--spacing-2);
}

.checkbox-group label {
    margin-bottom: 0;
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-sm);
}

/* ============================================
   Buttons
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--btn-padding-y) var(--btn-padding-x);
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: transform var(--transition-fast);
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn--block {
    display: flex;
    width: 100%;
}

.btn--primary {
    color: var(--color-btn-primary-text);
    background: var(--color-btn-primary-bg);
}

.btn--primary:hover {
    background: var(--color-btn-primary-hover);
}

/* ============================================
   Alerts
   ============================================ */
.alert {
    padding: var(--spacing-3);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-5);
    font-size: var(--font-size-sm);
}

.alert--error {
    background: var(--color-danger-light);
    color: var(--color-danger-dark);
    border: var(--border-width) solid var(--color-danger);
}

.alert--success {
    background: var(--color-success-light);
    color: var(--color-success-dark);
    border: var(--border-width) solid var(--color-success);
}

/* ============================================
   Password Strength
   ============================================ */
.password-strength {
    height: 4px;
    margin-top: var(--spacing-2);
    background: var(--color-border);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.password-strength__bar {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width var(--transition-normal), background-color var(--transition-normal);
    width: 0;
}

.password-strength__bar--weak {
    background-color: var(--color-danger);
}

.password-strength__bar--fair {
    background-color: var(--color-warning);
}

.password-strength__bar--good {
    background-color: var(--color-info);
}

.password-strength__bar--strong {
    background-color: var(--color-success);
}