{% extends 'base.html' %}
{% load static %}

{% block title %}{% if object %}Edit{% else %}Link{% endif %} Social Account - Account Management{% endblock %}

{% block content %}
<div class="content">
    <div class="container-fluid">
        <!-- Page Header -->
        <div class="row">
            <div class="col-12">
                <div class="page-header">
                    <div class="page-title">
                        <h4>
                            <a href="{% url 'accounts:social_account_list' %}" class="me-3">
                                <i class="fas fa-arrow-left"></i>
                            </a>
                            {% if object %}Edit{% else %}Link{% endif %} Social Account
                        </h4>
                        <h6>{% if object %}Update settings for{% else %}Connect{% endif %} your social media account</h6>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- Account Setup Form -->
            <div class="col-lg-8 col-md-12">
                {% if not object %}
                <!-- Provider Selection (Only for new accounts) -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-link me-2"></i>
                            Choose Social Provider
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="provider-selection">
                            <div class="row">
                                <div class="col-lg-4 col-md-6 col-sm-6">
                                    <div class="provider-card" data-provider="google">
                                        <input type="radio" name="provider" value="google" id="provider_google" checked>
                                        <label for="provider_google" class="provider-label">
                                            <i class="fab fa-google fa-3x text-danger mb-3"></i>
                                            <h6>Google</h6>
                                            <p class="text-muted small">Gmail, Google Workspace</p>
                                            <div class="features">
                                                <span class="badge bg-success me-1">Profile</span>
                                                <span class="badge bg-info me-1">Email</span>
                                                <span class="badge bg-warning">Calendar</span>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-6 col-sm-6">
                                    <div class="provider-card" data-provider="microsoft">
                                        <input type="radio" name="provider" value="microsoft" id="provider_microsoft">
                                        <label for="provider_microsoft" class="provider-label">
                                            <i class="fab fa-microsoft fa-3x text-primary mb-3"></i>
                                            <h6>Microsoft</h6>
                                            <p class="text-muted small">Outlook, Office 365</p>
                                            <div class="features">
                                                <span class="badge bg-success me-1">Profile</span>
                                                <span class="badge bg-info me-1">Email</span>
                                                <span class="badge bg-warning">Office</span>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-6 col-sm-6">
                                    <div class="provider-card" data-provider="github">
                                        <input type="radio" name="provider" value="github" id="provider_github">
                                        <label for="provider_github" class="provider-label">
                                            <i class="fab fa-github fa-3x text-dark mb-3"></i>
                                            <h6>GitHub</h6>
                                            <p class="text-muted small">Code repositories</p>
                                            <div class="features">
                                                <span class="badge bg-success me-1">Profile</span>
                                                <span class="badge bg-secondary me-1">Repos</span>
                                                <span class="badge bg-info">Gists</span>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-6 col-sm-6">
                                    <div class="provider-card" data-provider="linkedin">
                                        <input type="radio" name="provider" value="linkedin" id="provider_linkedin">
                                        <label for="provider_linkedin" class="provider-label">
                                            <i class="fab fa-linkedin fa-3x text-info mb-3"></i>
                                            <h6>LinkedIn</h6>
                                            <p class="text-muted small">Professional network</p>
                                            <div class="features">
                                                <span class="badge bg-success me-1">Profile</span>
                                                <span class="badge bg-info me-1">Network</span>
                                                <span class="badge bg-warning">Posts</span>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-6 col-sm-6">
                                    <div class="provider-card" data-provider="facebook">
                                        <input type="radio" name="provider" value="facebook" id="provider_facebook">
                                        <label for="provider_facebook" class="provider-label">
                                            <i class="fab fa-facebook fa-3x text-primary mb-3"></i>
                                            <h6>Facebook</h6>
                                            <p class="text-muted small">Social network</p>
                                            <div class="features">
                                                <span class="badge bg-success me-1">Profile</span>
                                                <span class="badge bg-info me-1">Friends</span>
                                                <span class="badge bg-warning">Pages</span>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-6 col-sm-6">
                                    <div class="provider-card" data-provider="twitter">
                                        <input type="radio" name="provider" value="twitter" id="provider_twitter">
                                        <label for="provider_twitter" class="provider-label">
                                            <i class="fab fa-twitter fa-3x text-info mb-3"></i>
                                            <h6>Twitter</h6>
                                            <p class="text-muted small">Microblogging</p>
                                            <div class="features">
                                                <span class="badge bg-success me-1">Profile</span>
                                                <span class="badge bg-info me-1">Tweets</span>
                                                <span class="badge bg-warning">DMs</span>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {% endif %}

                <!-- Account Configuration -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-cog me-2"></i>
                            Account Settings
                        </h5>
                    </div>
                    <div class="card-body">
                        <form method="post" id="socialAccountForm">
                            {% csrf_token %}
                            
                            {% if object %}
                            <!-- Current Account Info (Edit mode) -->
                            <div class="current-account-info mb-4">
                                <div class="alert alert-info">
                                    <div class="d-flex align-items-center">
                                        {% if object.provider == 'google' %}
                                            <i class="fab fa-google fa-2x text-danger me-3"></i>
                                        {% elif object.provider == 'microsoft' %}
                                            <i class="fab fa-microsoft fa-2x text-primary me-3"></i>
                                        {% elif object.provider == 'github' %}
                                            <i class="fab fa-github fa-2x text-dark me-3"></i>
                                        {% elif object.provider == 'linkedin' %}
                                            <i class="fab fa-linkedin fa-2x text-info me-3"></i>
                                        {% elif object.provider == 'facebook' %}
                                            <i class="fab fa-facebook fa-2x text-primary me-3"></i>
                                        {% elif object.provider == 'twitter' %}
                                            <i class="fab fa-twitter fa-2x text-info me-3"></i>
                                        {% endif %}
                                        <div>
                                            <h6 class="mb-1">{{ object.provider|title }} Account</h6>
                                            <p class="mb-0">{{ object.email|default:"john.smith@gmail.com" }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% endif %}

                            <!-- Basic Settings -->
                            <div class="row mb-4">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="display_name" class="form-label">Display Name</label>
                                        <input type="text" class="form-control" id="display_name" name="display_name" 
                                               value="{{ object.display_name|default:'' }}" 
                                               placeholder="How this account appears in your profile">
                                        <small class="form-text text-muted">Optional custom name for this account</small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="account_type" class="form-label">Account Type</label>
                                        <select class="form-select" id="account_type" name="account_type">
                                            <option value="personal" {% if object.account_type == 'personal' %}selected{% endif %}>Personal</option>
                                            <option value="business" {% if object.account_type == 'business' %}selected{% endif %}>Business</option>
                                            <option value="organization" {% if object.account_type == 'organization' %}selected{% endif %}>Organization</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <!-- Login Settings -->
                            <div class="settings-section mb-4">
                                <h6 class="section-title">
                                    <i class="fas fa-sign-in-alt me-2"></i>Login Settings
                                </h6>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="enable_login" name="enable_login"
                                                   {% if not object or object.login_enabled %}checked{% endif %}>
                                            <label class="form-check-label" for="enable_login">
                                                <strong>Enable Social Login</strong>
                                            </label>
                                            <small class="form-text text-muted d-block">Allow logging in with this account</small>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="auto_create_account" name="auto_create_account"
                                                   {% if not object or object.auto_create_account %}checked{% endif %}>
                                            <label class="form-check-label" for="auto_create_account">
                                                <strong>Auto-create Account</strong>
                                            </label>
                                            <small class="form-text text-muted d-block">Automatically create account on first login</small>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Permission Settings -->
                            <div class="settings-section mb-4">
                                <h6 class="section-title">
                                    <i class="fas fa-key me-2"></i>Permissions
                                </h6>
                                <div class="permissions-grid">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="permission-group">
                                                <h6 class="text-success">Basic Permissions</h6>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="perm_profile" name="permissions" value="profile" checked disabled>
                                                    <label class="form-check-label" for="perm_profile">
                                                        <i class="fas fa-user text-primary me-2"></i>Profile Information
                                                        <small class="d-block text-muted">Basic profile data (required)</small>
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="perm_email" name="permissions" value="email" checked disabled>
                                                    <label class="form-check-label" for="perm_email">
                                                        <i class="fas fa-envelope text-info me-2"></i>Email Address
                                                        <small class="d-block text-muted">Primary email address (required)</small>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="permission-group">
                                                <h6 class="text-info">Optional Permissions</h6>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="perm_calendar" name="permissions" value="calendar"
                                                           {% if 'calendar' in object.permissions %}checked{% endif %}>
                                                    <label class="form-check-label" for="perm_calendar">
                                                        <i class="fas fa-calendar text-warning me-2"></i>Calendar Access
                                                        <small class="d-block text-muted">Read calendar events</small>
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="perm_contacts" name="permissions" value="contacts"
                                                           {% if 'contacts' in object.permissions %}checked{% endif %}>
                                                    <label class="form-check-label" for="perm_contacts">
                                                        <i class="fas fa-users text-success me-2"></i>Contacts
                                                        <small class="d-block text-muted">Access contact list</small>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Sync Settings -->
                            <div class="settings-section mb-4">
                                <h6 class="section-title">
                                    <i class="fas fa-sync me-2"></i>Synchronization
                                </h6>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="auto_sync_profile" name="auto_sync_profile"
                                                   {% if not object or object.auto_sync_profile %}checked{% endif %}>
                                            <label class="form-check-label" for="auto_sync_profile">
                                                <strong>Auto-sync Profile</strong>
                                            </label>
                                            <small class="form-text text-muted d-block">Automatically update profile from social account</small>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="sync_frequency" class="form-label">Sync Frequency</label>
                                            <select class="form-select" id="sync_frequency" name="sync_frequency">
                                                <option value="manual" {% if object.sync_frequency == 'manual' %}selected{% endif %}>Manual Only</option>
                                                <option value="daily" {% if object.sync_frequency == 'daily' %}selected{% endif %}>Daily</option>
                                                <option value="weekly" {% if object.sync_frequency == 'weekly' %}selected{% endif %}>Weekly</option>
                                                <option value="monthly" {% if object.sync_frequency == 'monthly' %}selected{% endif %}>Monthly</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Privacy Settings -->
                            <div class="settings-section mb-4">
                                <h6 class="section-title">
                                    <i class="fas fa-shield-alt me-2"></i>Privacy & Security
                                </h6>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="share_profile_data" name="share_profile_data"
                                                   {% if object.share_profile_data %}checked{% endif %}>
                                            <label class="form-check-label" for="share_profile_data">
                                                <strong>Share Profile Data</strong>
                                            </label>
                                            <small class="form-text text-muted d-block">Allow sharing profile data with integrated services</small>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="activity_logging" name="activity_logging"
                                                   {% if not object or object.activity_logging %}checked{% endif %}>
                                            <label class="form-check-label" for="activity_logging">
                                                <strong>Activity Logging</strong>
                                            </label>
                                            <small class="form-text text-muted d-block">Log account activity for security purposes</small>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Form Actions -->
                            <div class="row mt-5">
                                <div class="col-12">
                                    <div class="d-flex justify-content-between">
                                        <a href="{% url 'accounts:social_account_list' %}" class="btn btn-secondary">
                                            <i class="fas fa-times me-1"></i>Cancel
                                        </a>
                                        <div>
                                            {% if not object %}
                                            <button type="button" class="btn btn-outline-primary me-2" onclick="testConnection()">
                                                <i class="fas fa-plug me-1"></i>Test Connection
                                            </button>
                                            <button type="submit" class="btn btn-primary" id="submitBtn">
                                                <i class="fas fa-link me-1"></i>Link Account
                                            </button>
                                            {% else %}
                                            <button type="button" class="btn btn-outline-primary me-2" onclick="syncNow()">
                                                <i class="fas fa-sync me-1"></i>Sync Now
                                            </button>
                                            <button type="submit" class="btn btn-primary" id="submitBtn">
                                                <i class="fas fa-save me-1"></i>Update Settings
                                            </button>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Setup Guide Sidebar -->
            <div class="col-lg-4 col-md-12">
                <!-- Connection Status -->
                {% if object %}
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-plug me-2"></i>
                            Connection Status
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="connection-status">
                            <div class="status-item mb-3">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span>Connection</span>
                                    <span class="badge bg-success">
                                        <i class="fas fa-check-circle me-1"></i>Active
                                    </span>
                                </div>
                            </div>
                            <div class="status-item mb-3">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span>Token Status</span>
                                    <span class="badge bg-success">Valid</span>
                                </div>
                            </div>
                            <div class="status-item mb-3">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span>Last Sync</span>
                                    <span class="text-muted">2 hours ago</span>
                                </div>
                            </div>
                            <div class="status-item">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span>Next Sync</span>
                                    <span class="text-muted">Tomorrow</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {% endif %}

                <!-- Setup Steps -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-list-check me-2"></i>
                            {% if object %}Update{% else %}Setup{% endif %} Steps
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="setup-steps">
                            {% if not object %}
                            <div class="step-item active" id="step1">
                                <div class="step-number">1</div>
                                <div class="step-content">
                                    <h6>Choose Provider</h6>
                                    <small class="text-muted">Select your social media platform</small>
                                </div>
                            </div>
                            <div class="step-item" id="step2">
                                <div class="step-number">2</div>
                                <div class="step-content">
                                    <h6>Configure Settings</h6>
                                    <small class="text-muted">Set up permissions and preferences</small>
                                </div>
                            </div>
                            <div class="step-item" id="step3">
                                <div class="step-number">3</div>
                                <div class="step-content">
                                    <h6>Authorize Access</h6>
                                    <small class="text-muted">Grant permissions on provider site</small>
                                </div>
                            </div>
                            <div class="step-item" id="step4">
                                <div class="step-number">4</div>
                                <div class="step-content">
                                    <h6>Complete</h6>
                                    <small class="text-muted">Account successfully linked</small>
                                </div>
                            </div>
                            {% else %}
                            <div class="step-item completed">
                                <div class="step-number">✓</div>
                                <div class="step-content">
                                    <h6>Account Linked</h6>
                                    <small class="text-muted">Successfully connected</small>
                                </div>
                            </div>
                            <div class="step-item active">
                                <div class="step-number">2</div>
                                <div class="step-content">
                                    <h6>Update Settings</h6>
                                    <small class="text-muted">Modify account preferences</small>
                                </div>
                            </div>
                            <div class="step-item">
                                <div class="step-number">3</div>
                                <div class="step-content">
                                    <h6>Save Changes</h6>
                                    <small class="text-muted">Apply new settings</small>
                                </div>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <!-- Security Information -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-shield-alt me-2"></i>
                            Security Information
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="security-info">
                            <div class="security-item mb-3">
                                <i class="fas fa-lock text-success me-2"></i>
                                <small>OAuth 2.0 secure authentication</small>
                            </div>
                            <div class="security-item mb-3">
                                <i class="fas fa-key text-info me-2"></i>
                                <small>Encrypted token storage</small>
                            </div>
                            <div class="security-item mb-3">
                                <i class="fas fa-eye-slash text-warning me-2"></i>
                                <small>Limited permission scope</small>
                            </div>
                            <div class="security-item">
                                <i class="fas fa-times-circle text-danger me-2"></i>
                                <small>No posting on your behalf</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize provider selection
    const providerRadios = document.querySelectorAll('input[name="provider"]');
    providerRadios.forEach(radio => {
        radio.addEventListener('change', function() {
            updateProviderSelection(this.value);
            updateStepProgress(2);
        });
    });

    // Show initial provider selection
    const checkedRadio = document.querySelector('input[name="provider"]:checked');
    if (checkedRadio) {
        updateProviderSelection(checkedRadio.value);
    }

    // Form validation
    const form = document.getElementById('socialAccountForm');
    form.addEventListener('submit', function(e) {
        if (!validateForm()) {
            e.preventDefault();
        }
    });
});

function updateProviderSelection(provider) {
    // Update provider cards
    const cards = document.querySelectorAll('.provider-card');
    cards.forEach(card => card.classList.remove('selected'));
    
    const selectedCard = document.querySelector(`[data-provider="${provider}"]`);
    if (selectedCard) {
        selectedCard.classList.add('selected');
    }

    // Update permission options based on provider
    updatePermissionOptions(provider);
}

function updatePermissionOptions(provider) {
    // Show/hide permissions based on provider capabilities
    const calendarPerm = document.getElementById('perm_calendar');
    const contactsPerm = document.getElementById('perm_contacts');
    
    if (provider === 'google' || provider === 'microsoft') {
        calendarPerm.closest('.form-check').style.display = 'block';
    } else {
        calendarPerm.closest('.form-check').style.display = 'none';
    }
    
    if (provider === 'google' || provider === 'microsoft' || provider === 'linkedin') {
        contactsPerm.closest('.form-check').style.display = 'block';
    } else {
        contactsPerm.closest('.form-check').style.display = 'none';
    }
}

function updateStepProgress(step) {
    const steps = document.querySelectorAll('.step-item');
    steps.forEach((stepItem, index) => {
        if (index < step) {
            stepItem.classList.add('completed');
            stepItem.classList.remove('active');
        } else if (index === step - 1) {
            stepItem.classList.add('active');
            stepItem.classList.remove('completed');
        } else {
            stepItem.classList.remove('active', 'completed');
        }
    });
}

function testConnection() {
    const provider = document.querySelector('input[name="provider"]:checked').value;
    const button = event.target;
    const originalText = button.innerHTML;
    
    button.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Testing...';
    button.disabled = true;
    
    setTimeout(() => {
        alert(`Connection to ${provider} successful! You can proceed with linking.`);
        button.innerHTML = originalText;
        button.disabled = false;
        updateStepProgress(3);
    }, 2000);
}

function syncNow() {
    const button = event.target;
    const originalText = button.innerHTML;
    
    button.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Syncing...';
    button.disabled = true;
    
    setTimeout(() => {
        alert('Profile synchronized successfully!');
        button.innerHTML = originalText;
        button.disabled = false;
    }, 2000);
}

function validateForm() {
    const provider = document.querySelector('input[name="provider"]:checked');
    
    if (!provider && !{{ object|yesno:"true,false" }}) {
        alert('Please select a social provider.');
        return false;
    }
    
    return true;
}
</script>

<style>
.provider-selection {
    margin-bottom: 20px;
}

.provider-card {
    border: 2px solid #e9ecef;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    height: 100%;
    margin-bottom: 15px;
}

.provider-card:hover {
    border-color: #007bff;
    box-shadow: 0 4px 8px rgba(0,123,255,0.1);
}

.provider-card.selected {
    border-color: #007bff;
    background-color: #f8f9ff;
}

.provider-card input[type="radio"] {
    display: none;
}

.provider-label {
    cursor: pointer;
    margin: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.features {
    margin-top: 10px;
}

.features .badge {
    font-size: 0.7rem;
}

.settings-section {
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 20px;
    background-color: #f8f9fa;
}

.section-title {
    color: #495057;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #dee2e6;
}

.permission-group h6 {
    margin-bottom: 15px;
}

.form-check {
    margin-bottom: 15px;
}

.form-check-label small {
    margin-left: 25px;
}

.setup-steps {
    position: relative;
}

.step-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
}

.step-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 15px;
    top: 40px;
    width: 2px;
    height: 30px;
    background-color: #dee2e6;
}

.step-item.completed::after {
    background-color: #28a745;
}

.step-item.active::after {
    background-color: #007bff;
}

.step-number {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #dee2e6;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-right: 15px;
    flex-shrink: 0;
}

.step-item.active .step-number {
    background-color: #007bff;
    color: white;
}

.step-item.completed .step-number {
    background-color: #28a745;
    color: white;
}

.security-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.status-item {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.status-item:last-child {
    border-bottom: none;
}

@media (max-width: 768px) {
    .provider-card {
        margin-bottom: 10px;
        padding: 15px;
    }
    
    .settings-section {
        margin-bottom: 15px;
        padding: 15px;
    }
    
    .form-check-label small {
        margin-left: 0;
        margin-top: 5px;
    }
}
</style>
{% endblock %}