{% extends "base_authenticated.html" %} {% block title %}My Profile - QR Code Management{%
endblock %} {% block content %}
<div class="profile-page">
  <div class="profile-header">
    <div class="profile-avatar">
      <div class="avatar-circle">
        <i class="fas fa-user"></i>
      </div>
      <div class="avatar-status {{ user.role }}">
        <i
          class="fas {{ 'fa-crown' if user.role == 'admin' else 'fa-user-tie' }}"
        ></i>
      </div>
    </div>

    <div class="profile-info">
      <h1>{{ user.full_name }}</h1>
      <div class="profile-meta">
        <div class="meta-item">
          <i class="fas fa-envelope"></i>
          <span>{{ user.email }}</span>
        </div>
        <div class="meta-item">
          <i class="fas fa-user"></i>
          <span>@{{ user.username }}</span>
        </div>
        <div class="meta-item">
          <i class="fas fa-shield-alt"></i>
          <span class="role-badge {{ user.role }}">
            {{ user.role.title() }}
          </span>
        </div>
        <div class="meta-item">
          <i class="fas fa-calendar-plus"></i>
          <span>Member since {{ user.created_date.strftime('%B %Y') }}</span>
        </div>
        {% if user.last_login_date %}
        <div class="meta-item">
          <i class="fas fa-clock"></i>
          <span
            >Last login {{ user.last_login_date.strftime('%Y-%m-%d %H:%M')
            }}</span
          >
        </div>
        {% endif %}
      </div>
    </div>
  </div>

  <div class="profile-content">
    <!-- Profile Statistics -->
    <div class="profile-stats">
      <div class="stat-card">
        <div class="stat-icon">
          <i class="fas fa-qrcode"></i>
        </div>
        <div class="stat-info">
          <h3>{{ user.created_qr_codes.count() }}</h3>
          <p>QR Codes Created</p>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-icon">
          <i class="fas fa-check-circle"></i>
        </div>
        <div class="stat-info">
          <h3>
            {{ user.created_qr_codes.filter_by(active_status=True).count() }}
          </h3>
          <p>Active QR Codes</p>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-icon">
          <i class="fas fa-calendar-alt"></i>
        </div>
        <div class="stat-info">
          <h3>{{ user.created_date|days_since }}</h3>
          <p>Days as Member</p>
        </div>
      </div>
    </div>

    <!-- Profile Management Tabs -->
    <div class="profile-tabs">
      <div class="tab-headers">
        <button class="tab-header active" data-tab="edit-profile">
          <i class="fas fa-edit"></i>
          Edit Profile
        </button>
        <button class="tab-header" data-tab="change-password">
          <i class="fas fa-key"></i>
          Change Password
        </button>
        <button class="tab-header" data-tab="account-settings">
          <i class="fas fa-cog"></i>
          Account Settings
        </button>
      </div>

      <!-- Edit Profile Tab -->
      <div class="tab-content active" id="edit-profile">
        <div class="tab-card">
          <div class="tab-header-section">
            <h3>
              <i class="fas fa-user-edit"></i>
              Update Profile Information
            </h3>
            <p>
              Keep your profile information up to date for better collaboration
            </p>
          </div>

          <form method="POST" class="profile-form" id="profileForm">
            <input type="hidden" name="form_type" value="profile" />

            <div class="form-row">
              <div class="form-group">
                <label for="full_name">
                  <i class="fas fa-id-card"></i>
                  Full Name
                </label>
                <input
                  type="text"
                  id="full_name"
                  name="full_name"
                  value="{{ user.full_name }}"
                  required
                />
                <small class="form-help">Your display name in the system</small>
              </div>

              <div class="form-group">
                <label for="email">
                  <i class="fas fa-envelope"></i>
                  Email Address
                </label>
                <input
                  type="email"
                  id="email"
                  name="email"
                  value="{{ user.email }}"
                  required
                />
                <small class="form-help"
                  >Used for notifications and account recovery</small
                >
              </div>
            </div>

            <div class="form-group">
              <label for="username_display">
                <i class="fas fa-user"></i>
                Username
              </label>
              <input
                type="text"
                id="username_display"
                value="{{ user.username }}"
                disabled
              />
              <small class="form-help"
                >Username cannot be changed. Contact admin if needed.</small
              >
            </div>

            <div class="form-actions">
              <button type="submit" class="btn btn-primary">
                <i class="fas fa-save"></i>
                Save Changes
              </button>
              <button type="reset" class="btn btn-secondary">
                <i class="fas fa-undo"></i>
                Reset
              </button>
            </div>
          </form>
        </div>
      </div>

      <!-- Change Password Tab -->
      <div class="tab-content" id="change-password">
        <div class="tab-card">
          <div class="tab-header-section">
            <h3>
              <i class="fas fa-shield-alt"></i>
              Change Password
            </h3>
            <p>Ensure your account security with a strong password</p>
          </div>

          <form method="POST" class="profile-form" id="passwordForm">
            <input type="hidden" name="form_type" value="password" />

            <div class="form-group">
              <label for="current_password">
                <i class="fas fa-lock"></i>
                Current Password
              </label>
              <input
                type="password"
                id="current_password"
                name="current_password"
                required
              />
              <small class="form-help"
                >Enter your current password for verification</small
              >
            </div>

            <div class="form-group">
              <label for="new_password">
                <i class="fas fa-key"></i>
                New Password
              </label>
              <input
                type="password"
                id="new_password"
                name="new_password"
                required
                minlength="6"
              />
              <div class="password-strength" id="passwordStrength"></div>
              <small class="form-help"
                >Minimum 6 characters with mixed case, numbers, and
                symbols</small
              >
            </div>

            <div class="form-group">
              <label for="confirm_password">
                <i class="fas fa-check-circle"></i>
                Confirm New Password
              </label>
              <input
                type="password"
                id="confirm_password"
                name="confirm_password"
                required
              />
              <div class="password-match" id="passwordMatch"></div>
            </div>

            <div class="security-tips">
              <h4>
                <i class="fas fa-lightbulb"></i>
                Password Security Tips
              </h4>
              <ul>
                <li>Use at least 8 characters</li>
                <li>Include uppercase and lowercase letters</li>
                <li>Add numbers and special characters</li>
                <li>Avoid common words or personal information</li>
                <li>Don't reuse passwords from other accounts</li>
              </ul>
            </div>

            <div class="form-actions">
              <button type="submit" class="btn btn-primary">
                <i class="fas fa-shield-alt"></i>
                Update Password
              </button>
              <button type="reset" class="btn btn-secondary">
                <i class="fas fa-times"></i>
                Cancel
              </button>
            </div>
          </form>
        </div>
      </div>

      <!-- Account Settings Tab -->
      <div class="tab-content" id="account-settings">
        <div class="tab-card">
          <div class="tab-header-section">
            <h3>
              <i class="fas fa-cog"></i>
              Account Information
            </h3>
            <p>View your account details and system information</p>
          </div>

          <div class="settings-grid">
            <div class="setting-item">
              <div class="setting-label">
                <i class="fas fa-id-badge"></i>
                Account ID
              </div>
              <div class="setting-value">{{ user.id }}</div>
            </div>

            <div class="setting-item">
              <div class="setting-label">
                <i class="fas fa-user-shield"></i>
                Role
              </div>
              <div class="setting-value">
                <span class="role-badge {{ user.role }}">
                  {{ user.role.title() }}
                </span>
              </div>
            </div>

            <div class="setting-item">
              <div class="setting-label">
                <i class="fas fa-calendar-plus"></i>
                Account Created
              </div>
              <div class="setting-value">
                {{ user.created_date.strftime('%B %d, %Y at %H:%M') }}
              </div>
            </div>

            {% if user.creator %}
            <div class="setting-item">
              <div class="setting-label">
                <i class="fas fa-user-plus"></i>
                Created By
              </div>
              <div class="setting-value">{{ user.creator.full_name }}</div>
            </div>
            {% endif %}

            <div class="setting-item">
              <div class="setting-label">
                <i class="fas fa-toggle-on"></i>
                Account Status
              </div>
              <div class="setting-value">
                <span
                  class="status-badge {{ 'active' if user.active_status else 'inactive' }}"
                >
                  <i
                    class="fas {{ 'fa-check-circle' if user.active_status else 'fa-times-circle' }}"
                  ></i>
                  {{ 'Active' if user.active_status else 'Inactive' }}
                </span>
              </div>
            </div>

            {% if user.last_login_date %}
            <div class="setting-item">
              <div class="setting-label">
                <i class="fas fa-clock"></i>
                Last Login
              </div>
              <div class="setting-value">
                {{ user.last_login_date.strftime('%B %d, %Y at %H:%M') }} ({{
                user.last_login_date|time_ago }})
              </div>
            </div>
            {% endif %}
          </div>

          <!-- Account Actions -->
          <div class="account-actions">
            <h4>
              <i class="fas fa-tools"></i>
              Account Actions
            </h4>

            <div class="action-buttons">
              <button type="button" class="btn btn-info" onclick="exportData()">
                <i class="fas fa-download"></i>
                Export My Data
              </button>

              {% if user.role != 'admin' %}
              <button
                type="button"
                class="btn btn-warning"
                onclick="requestAccountDeletion()"
              >
                <i class="fas fa-exclamation-triangle"></i>
                Request Account Deletion
              </button>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %} {% block extra_scripts %}
<script>
  document.addEventListener('DOMContentLoaded', function() {
      // Tab functionality
      const tabHeaders = document.querySelectorAll('.tab-header');
      const tabContents = document.querySelectorAll('.tab-content');

      tabHeaders.forEach(header => {
          header.addEventListener('click', function() {
              const tabName = this.dataset.tab;

              // Remove active class from all tabs
              tabHeaders.forEach(h => h.classList.remove('active'));
              tabContents.forEach(c => c.classList.remove('active'));

              // Add active class to clicked tab
              this.classList.add('active');
              document.getElementById(tabName).classList.add('active');
          });
      });

      // Password form handling
      const passwordForm = document.getElementById('passwordForm');
      const newPasswordInput = document.getElementById('new_password');
      const confirmPasswordInput = document.getElementById('confirm_password');
      const passwordStrength = document.getElementById('passwordStrength');
      const passwordMatch = document.getElementById('passwordMatch');

      // Password strength checker
      if (newPasswordInput) {
          newPasswordInput.addEventListener('input', function() {
              const password = this.value;
              let strength = 0;
              let feedback = [];

              // Check password criteria
              if (password.length >= 6) strength++;
              else feedback.push('At least 6 characters');

              if (password.length >= 8) strength++;
              else if (password.length >= 6) feedback.push('8+ characters recommended');

              if (/[A-Z]/.test(password)) strength++;
              else feedback.push('One uppercase letter');

              if (/[a-z]/.test(password)) strength++;
              else feedback.push('One lowercase letter');

              if (/[0-9]/.test(password)) strength++;
              else feedback.push('One number');

              if (/[^A-Za-z0-9]/.test(password)) strength++;
              else feedback.push('One special character');

              // Update strength display
              let strengthText = '';
              let strengthClass = '';

              if (strength < 3) {
                  strengthText = 'Weak';
                  strengthClass = 'weak';
              } else if (strength < 5) {
                  strengthText = 'Medium';
                  strengthClass = 'medium';
              } else {
                  strengthText = 'Strong';
                  strengthClass = 'strong';
              }

              passwordStrength.className = `password-strength ${strengthClass}`;
              passwordStrength.textContent = `Strength: ${strengthText}`;

              if (feedback.length > 0 && password.length > 0) {
                  passwordStrength.textContent += ` (Missing: ${feedback.join(', ')})`;
              }

              // Check password match
              checkPasswordMatch();
          });
      }

      // Password match checker
      function checkPasswordMatch() {
          if (confirmPasswordInput && confirmPasswordInput.value) {
              if (newPasswordInput.value === confirmPasswordInput.value) {
                  passwordMatch.textContent = '✓ Passwords match';
                  passwordMatch.className = 'password-match match';
              } else {
                  passwordMatch.textContent = '✗ Passwords do not match';
                  passwordMatch.className = 'password-match no-match';
              }
          } else {
              passwordMatch.textContent = '';
              passwordMatch.className = 'password-match';
          }
      }

      if (confirmPasswordInput) {
          confirmPasswordInput.addEventListener('input', checkPasswordMatch);
      }

      // Form validation
      if (passwordForm) {
          passwordForm.addEventListener('submit', function(e) {
              const currentPassword = document.getElementById('current_password').value;
              const newPassword = newPasswordInput.value;
              const confirmPassword = confirmPasswordInput.value;

              if (!currentPassword) {
                  e.preventDefault();
                  alert('Please enter your current password.');
                  return;
              }

              if (newPassword.length < 6) {
                  e.preventDefault();
                  alert('New password must be at least 6 characters long.');
                  return;
              }

              if (newPassword !== confirmPassword) {
                  e.preventDefault();
                  alert('New passwords do not match.');
                  return;
              }

              if (currentPassword === newPassword) {
                  e.preventDefault();
                  alert('New password must be different from current password.');
                  return;
              }

              // Show loading state
              const submitBtn = passwordForm.querySelector('button[type="submit"]');
              submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Updating Password...';
              submitBtn.disabled = true;
          });
      }

      // Profile form handling
      const profileForm = document.getElementById('profileForm');
      if (profileForm) {
          profileForm.addEventListener('submit', function(e) {
              const fullName = document.getElementById('full_name').value.trim();
              const email = document.getElementById('email').value.trim();

              if (!fullName || fullName.length < 2) {
                  e.preventDefault();
                  alert('Full name must be at least 2 characters long.');
                  return;
              }

              const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
              if (!email || !emailRegex.test(email)) {
                  e.preventDefault();
                  alert('Please enter a valid email address.');
                  return;
              }

              // Show loading state
              const submitBtn = profileForm.querySelector('button[type="submit"]');
              submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Saving Changes...';
              submitBtn.disabled = true;
          });
      }

      // Auto-capitalize full name
      const fullNameInput = document.getElementById('full_name');
      if (fullNameInput) {
          fullNameInput.addEventListener('input', function() {
              this.value = this.value.replace(/\b\w/g, l => l.toUpperCase());
          });
      }

      // Form reset handling
      const resetButtons = document.querySelectorAll('button[type="reset"]');
      resetButtons.forEach(button => {
          button.addEventListener('click', function(e) {
              if (!confirm('Are you sure you want to reset all changes?')) {
                  e.preventDefault();
              }
          });
      });
  });

  // Export user data
  function exportData() {
      const userData = {
          id: {{ user.id }},
          full_name: "{{ user.full_name }}",
          email: "{{ user.email }}",
          username: "{{ user.username }}",
          role: "{{ user.role }}",
          created_date: "{{ user.created_date.isoformat() }}",
          last_login_date: "{{ user.last_login_date.isoformat() if user.last_login_date else 'Never' }}",
          qr_codes_created: {{ user.created_qr_codes.count() }},
          active_qr_codes: {{ user.created_qr_codes.filter_by(active_status=True).count() }}
      };

      const dataStr = JSON.stringify(userData, null, 2);
      const dataBlob = new Blob([dataStr], { type: 'application/json' });

      const link = document.createElement('a');
      link.href = URL.createObjectURL(dataBlob);
      link.download = 'my_account_data.json';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);

      // Show success message
      showToast('Account data exported successfully!', 'success');
  }

  // Request account deletion
  function requestAccountDeletion() {
      const confirmed = confirm(
          'Are you sure you want to request account deletion?\n\n' +
          'This action will:\n' +
          '• Deactivate your account\n' +
          '• Remove access to QR codes you created\n' +
          '• Require admin approval for deletion\n\n' +
          'This action cannot be undone easily.'
      );

      if (confirmed) {
          const reason = prompt('Please provide a reason for account deletion (optional):');

          // In a real application, this would send a request to the server
          alert('Account deletion request submitted. An administrator will review your request.');
          showToast('Account deletion request submitted', 'info');
      }
  }

  // Toast notification function
  function showToast(message, type = 'info') {
      const toast = document.createElement('div');
      toast.className = `toast toast-${type}`;
      toast.innerHTML = `
          <div class="toast-content">
              <i class="fas ${getToastIcon(type)}"></i>
              <span>${message}</span>
          </div>
      `;

      document.body.appendChild(toast);

      // Animate in
      setTimeout(() => toast.classList.add('show'), 100);

      // Auto remove
      setTimeout(() => {
          toast.classList.remove('show');
          setTimeout(() => {
              if (document.body.contains(toast)) {
                  document.body.removeChild(toast);
              }
          }, 300);
      }, 3000);
  }

  function getToastIcon(type) {
      const icons = {
          success: 'fa-check-circle',
          error: 'fa-exclamation-circle',
          warning: 'fa-exclamation-triangle',
          info: 'fa-info-circle'
      };
      return icons[type] || icons.info;
  }
</script>

<style>
  /* Profile page styles */
  .profile-page {
    max-width: 1000px;
    margin: 0 auto;
  }

  .profile-header {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    background: linear-gradient(
      135deg,
      var(--primary-color),
      var(--primary-hover)
    );
    color: var(--white);
    border-radius: var(--radius-xl);
    margin-bottom: 2rem;
    box-shadow: var(--shadow-lg);
  }

  .profile-avatar {
    position: relative;
    flex-shrink: 0;
  }

  .avatar-circle {
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    border: 3px solid rgba(255, 255, 255, 0.3);
  }

  .avatar-status {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    border: 2px solid var(--white);
  }

  .avatar-status.admin {
    background: #fbbf24;
    color: #92400e;
  }

  .avatar-status.staff {
    background: var(--gray-400);
    color: var(--white);
  }

  .profile-info h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
  }

  .profile-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.75rem;
  }

  .meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    opacity: 0.9;
  }

  .role-badge {
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
  }

  .role-badge.admin {
    background: #fbbf24;
    color: #92400e;
  }

  .role-badge.staff {
    background: rgba(255, 255, 255, 0.2);
    color: var(--white);
  }

  .profile-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
  }

  .stat-card {
    background: var(--white);
    padding: 1.5rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: var(--transition);
  }

  .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
  }

  .stat-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(
      135deg,
      var(--primary-color),
      var(--primary-hover)
    );
    color: var(--white);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
  }

  .stat-info h3 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 0.25rem;
  }

  .stat-info p {
    color: var(--gray-500);
    font-size: 0.875rem;
  }

  .profile-tabs {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    overflow: hidden;
  }

  .tab-headers {
    display: flex;
    border-bottom: 1px solid var(--gray-200);
  }

  .tab-header {
    flex: 1;
    padding: 1rem 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 500;
    color: var(--gray-600);
    transition: var(--transition);
    border-bottom: 3px solid transparent;
  }

  .tab-header:hover {
    background: var(--gray-50);
    color: var(--gray-900);
  }

  .tab-header.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    background: var(--gray-50);
  }

  .tab-content {
    display: none;
    padding: 2rem;
  }

  .tab-content.active {
    display: block;
  }

  .tab-card {
    max-width: 600px;
  }

  .tab-header-section {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--gray-200);
  }

  .tab-header-section h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
  }

  .tab-header-section p {
    color: var(--gray-500);
    font-size: 0.875rem;
  }

  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .security-tips {
    margin: 1.5rem 0;
    padding: 1rem;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--primary-color);
  }

  .security-tips h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.75rem;
  }

  .security-tips ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .security-tips li {
    padding: 0.25rem 0;
    font-size: 0.875rem;
    color: var(--gray-600);
    position: relative;
    padding-left: 1rem;
  }

  .security-tips li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
  }

  .settings-grid {
    display: grid;
    gap: 1rem;
    margin-bottom: 2rem;
  }

  .setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--gray-50);
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
  }

  .setting-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: var(--gray-700);
  }

  .setting-value {
    font-weight: 500;
    color: var(--gray-900);
  }

  .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius);
    font-size: 0.75rem;
    font-weight: 600;
  }

  .status-badge.active {
    background: rgba(5, 150, 105, 0.1);
    color: var(--success-color);
  }

  .status-badge.inactive {
    background: rgba(220, 38, 38, 0.1);
    color: var(--danger-color);
  }

  .account-actions {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--gray-200);
  }

  .account-actions h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 1rem;
  }

  .action-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
  }

  /* Toast styles */
  .toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: 1rem;
    z-index: 1000;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
    border-left: 4px solid;
  }

  .toast.show {
    opacity: 1;
    transform: translateX(0);
  }

  .toast.toast-success {
    border-left-color: var(--success-color);
  }

  .toast.toast-info {
    border-left-color: var(--info-color);
  }

  .toast-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
  }

  .toast.toast-success .toast-content {
    color: var(--success-color);
  }

  .toast.toast-info .toast-content {
    color: var(--info-color);
  }

  /* Form styles */
  .form-group {
    margin-bottom: 1.5rem;
  }

  .form-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    transition: var(--transition);
    background-color: var(--white);
  }

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

  .form-group input:disabled {
    background-color: var(--gray-100);
    color: var(--gray-500);
    cursor: not-allowed;
  }

  .form-help {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--gray-500);
  }

  .form-actions {
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-200);
  }

  .password-strength {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    padding: 0.5rem;
    border-radius: var(--radius);
    transition: var(--transition);
  }

  .password-strength.weak {
    background-color: rgba(220, 38, 38, 0.1);
    color: var(--danger-color);
  }

  .password-strength.medium {
    background-color: rgba(217, 119, 6, 0.1);
    color: var(--warning-color);
  }

  .password-strength.strong {
    background-color: rgba(5, 150, 105, 0.1);
    color: var(--success-color);
  }

  .password-match {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    padding: 0.5rem;
    border-radius: var(--radius);
  }

  .password-match.match {
    background-color: rgba(5, 150, 105, 0.1);
    color: var(--success-color);
  }

  .password-match.no-match {
    background-color: rgba(220, 38, 38, 0.1);
    color: var(--danger-color);
  }

  @media (max-width: 768px) {
    .profile-header {
      flex-direction: column;
      text-align: center;
      gap: 1rem;
    }

    .profile-meta {
      grid-template-columns: 1fr;
      text-align: left;
    }

    .form-row {
      grid-template-columns: 1fr;
    }

    .tab-headers {
      flex-direction: column;
    }

    .tab-header {
      border-bottom: none;
      border-right: 3px solid transparent;
    }

    .tab-header.active {
      border-bottom: none;
      border-right-color: var(--primary-color);
    }

    .action-buttons {
      flex-direction: column;
    }

    .form-actions {
      flex-direction: column;
    }
  }
</style>
{% endblock %}