/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Segoe UI", sans-serif;
}

body, html {
    height: 100%;
}

/* === Background avec flou === */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url("../image/Medecins.jpg") no-repeat center center/cover;
    filter: blur(5px);
    z-index: -1;
}

/* === Formulaire === */
.form-container {
    position: relative;
    z-index: 10;
    background: rgba(255, 255, 255, 0.9);
    padding: 40px 30px;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    max-width: 450px;
    width: 100%;
    text-align: center;
}

.form-container h2 {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 25px;
}

/* Champs de saisie */
.form-container input[type="text"],
.form-container input[type="email"],
.form-container input[type="password"] {
    width: 100%;
    padding: 14px 16px;
    margin-bottom: 20px;
    border: 2px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    background-color: #f9f9f9;
    transition: border 0.3s ease, box-shadow 0.3s ease;
}

.form-container input:focus {
    border-color: #5ec8f2;
    box-shadow: 0 0 5px rgba(94, 200, 242, 0.5);
    outline: none;
}

/* Bouton avec dégradé */
.btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(to right, #5ec8f2, #6ddf89);
    color: white;
    font-size: 17px;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    transition: 0.3s ease, transform 0.2s ease;
    cursor: pointer;
}

.btn:hover {
    background: linear-gradient(to right, #4bb5e4, #50cc78);
    transform: scale(1.03);
}

/* Liens */
a {
    color: #5ec8f2;
    text-decoration: none;
    font-weight: 500;
}

a:hover {
    text-decoration: underline;
}

/* Messages d’erreur */
.text-danger {
    font-size: 14px;
    color: #dc3545;
}
/*function generateColors(count) {
        const colors = [];
        const hueStep = 360 / count;
        for (let i = 0; i < count; i++) {
            colors.push(`hsl(${i * hueStep}, 70%, 50%)`);
        }
        return colors;
    }
    */


/*import json
from django.shortcuts import render
from django.db.models import Count, Sum


def dashboard(request):
    # --- 4 graphiques existants ---
    patients_by_adresse = Patient1.objects.values('adresse').annotate(total=Count('adresse'))
    labels_adresse = [item['adresse'] for item in patients_by_adresse]
    data_adresse = [item['total'] for item in patients_by_adresse]

    medecins_by_specialite = Medecin.objects.values('specialite').annotate(total=Count('specialite'))
    labels_specialite = [item['specialite'] for item in medecins_by_specialite]
    data_specialite = [item['total'] for item in medecins_by_specialite]

    appareils_by_marque = Appareil.objects.values('marque').annotate(total=Count('marque'))
    labels_marque = [item['marque'] for item in appareils_by_marque]
    data_marque = [item['total'] for item in appareils_by_marque]

    appareils_types = [
        ('VNI', LocationVNI.objects.count()),
        ('CPAP', VenteCPAP.objects.count()),
        ('Concentrateur O2', LocationConcentrateurO2.objects.count()),
        ('Masque', VenteMasque.objects.count()),
        ('Polygraphe', Appareil.objects.filter(nom__icontains='polygraphe').count())
    ]
    labels_type_appareil = [x[0] for x in appareils_types]
    data_type_appareil = [x[1] for x in appareils_types]

    # --- 2 nouveaux graphiques : Concentrateur O2 et VNI ---
    def get_usage_montant(app_type):
        appareils = Appareil.objects.filter(nom__icontains=app_type)
        labels, usages, montants = [], [], []
        for app in appareils:
            if app_type == 'concentrateur o2':
                nb_usage = LocationConcentrateurO2.objects.filter(ref_appareil=app).count()
                montant = LocationConcentrateurO2.objects.filter(ref_appareil=app).aggregate(total=Sum('montant'))['total'] or 0
            else:  # VNI
                nb_usage = LocationVNI.objects.filter(ref_appareil=app).count()
                montant = LocationVNI.objects.filter(ref_appareil=app).aggregate(total=Sum('montant'))['total'] or 0
            labels.append(app.numero_serie)
            usages.append(nb_usage)
            montants.append(float(montant))
        return labels, usages, montants

    labels_o2, usages_o2, montants_o2 = get_usage_montant('concentrateur o2')
    labels_vni, usages_vni, montants_vni = get_usage_montant('vni')

    context = {
        # 4 graphiques existants
        'labels_adresse': json.dumps(labels_adresse),
        'data_adresse': json.dumps(data_adresse),
        'labels_specialite': json.dumps(labels_specialite),
        'data_specialite': json.dumps(data_specialite),
        'labels_marque': json.dumps(labels_marque),
        'data_marque': json.dumps(data_marque),
        'labels_type_appareil': json.dumps(labels_type_appareil),
        'data_type_appareil': json.dumps(data_type_appareil),
        # 2 nouveaux graphiques
        'labels_o2': json.dumps(labels_o2),
        'usages_o2': json.dumps(usages_o2),
        'montants_o2': json.dumps(montants_o2),
        'labels_vni': json.dumps(labels_vni),
        'usages_vni': json.dumps(usages_vni),
        'montants_vni': json.dumps(montants_vni),
    }

    return render(request, 'oxymed/dashboard.html', context)
*/
/*{% extends "oxymed/base.html" %}
{% load static %}

{% block content %}
<div class="container mt-5">
    <div class="row g-4">
        <!-- Patients -->
        <div class="col-md-3">
            <div class="card shadow-sm p-3" style="background:white; border-radius:12px;">
                <h5 class="text-center mb-3 fw-semibold" style="color:#34495e;">Origine des Patients</h5>
                <canvas id="patientsChart" height="250"></canvas>
            </div>
        </div>
        <!-- Médecins -->
        <div class="col-md-3">
            <div class="card shadow-sm p-3" style="background:white; border-radius:12px;">
                <h5 class="text-center mb-3 fw-semibold" style="color:#34495e;">Spécialités des Médecins</h5>
                <canvas id="medecinsChart" height="250"></canvas>
            </div>
        </div>
        <!-- Marques -->
        <div class="col-md-3">
            <div class="card shadow-sm p-3" style="background:white; border-radius:12px;">
                <h5 class="text-center mb-3 fw-semibold" style="color:#34495e;">Marques des Appareils</h5>
                <canvas id="appareilsChart" height="250"></canvas>
            </div>
        </div>
        <!-- Types -->
        <div class="col-md-3">
            <div class="card shadow-sm p-3" style="background:white; border-radius:12px;">
                <h5 class="text-center mb-3 fw-semibold" style="color:#34495e;">Types d'Appareils</h5>
                <canvas id="typesChart" height="250"></canvas>
            </div>
        </div>
    </div>

    <div class="row mt-4 g-4">
        <!-- Concentrateur O2 -->
        <div class="col-md-6">
            <div class="card shadow-sm p-3" style="background:white; border-radius:12px;">
                <h5 class="text-center mb-3 fw-semibold" style="color:#34495e;">Concentrateurs O₂ : Utilisations & Montants</h5>
                <canvas id="o2Chart" height="250"></canvas>
            </div>
        </div>
        <!-- VNI -->
        <div class="col-md-6">
            <div class="card shadow-sm p-3" style="background:white; border-radius:12px;">
                <h5 class="text-center mb-3 fw-semibold" style="color:#34495e;">VNI : Utilisations & Montants</h5>
                <canvas id="vniChart" height="250"></canvas>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
function generateProfessionalColors(count) {
    const baseHues = [210, 30, 0, 180, 120, 50, 280];
    const colors = [];
    const hueStep = 360 / count;
    for (let i = 0; i < count; i++) {
        const hue = (baseHues[i % baseHues.length] + i * hueStep) % 360;
        colors.push(`hsl(${hue}, 60%, 65%)`);
    }
    return colors;
}

// --- 4 graphiques existants ---
new Chart(document.getElementById('patientsChart'), {
    type: 'pie',
    data: { labels: {{ labels_adresse|safe }}, datasets: [{ data: {{ data_adresse|safe }}, backgroundColor: generateProfessionalColors({{ labels_adresse|length }}) }] },
    options: { responsive: true, plugins: { legend: { position: 'left' } } }
});
new Chart(document.getElementById('medecinsChart'), {
    type: 'doughnut',
    data: { labels: {{ labels_specialite|safe }}, datasets: [{ data: {{ data_specialite|safe }}, backgroundColor: generateProfessionalColors({{ labels_specialite|length }}) }] },
    options: { responsive: true, plugins: { legend: { position: 'left' } } }
});
new Chart(document.getElementById('appareilsChart'), {
    type: 'pie',
    data: { labels: {{ labels_marque|safe }}, datasets: [{ data: {{ data_marque|safe }}, backgroundColor: generateProfessionalColors({{ labels_marque|length }}) }] },
    options: { responsive: true, plugins: { legend: { position: 'left' } } }
});
new Chart(document.getElementById('typesChart'), {
    type: 'doughnut',
    data: { labels: {{ labels_type_appareil|safe }}, datasets: [{ data: {{ data_type_appareil|safe }}, backgroundColor: generateProfessionalColors({{ labels_type_appareil|length }}) }] },
    options: { responsive: true, plugins: { legend: { position: 'left' } } }
});

// --- 2 nouveaux graphiques : O2 et VNI ---
new Chart(document.getElementById('o2Chart'), {
    type: 'bar',
    data: {
        labels: {{ labels_o2|safe }},
        datasets: [
            { type: 'bar', label: "Utilisations", data: {{ usages_o2|safe }}, backgroundColor: generateProfessionalColors({{ labels_o2|length }}), borderRadius: 6 },
            { type: 'line', label: "Montant total (DT)", data: {{ montants_o2|safe }}, borderColor: '#34495e', backgroundColor: '#34495e33', tension: 0.3, yAxisID: 'y1', fill: true, pointRadius: 6 }
        ]
    },
    options: {
        responsive: true,
        interaction: { mode: 'index', intersect: false },
        stacked: false,
        plugins: { legend: { position: 'top' }, tooltip: { mode: 'index', intersect: false } },
        scales: {
            y: { type: 'linear', display: true, position: 'left', title: { display: true, text: "Nombre d'utilisations" }, beginAtZero: true },
            y1: { type: 'linear', display: true, position: 'right', title: { display: true, text: "Montant total (DT)" }, beginAtZero: true, grid: { drawOnChartArea: false } }
        }
    }
});

new Chart(document.getElementById('vniChart'), {
    type: 'bar',
    data: {
        labels: {{ labels_vni|safe }},
        datasets: [
            { type: 'bar', label: "Utilisations", data: {{ usages_vni|safe }}, backgroundColor: generateProfessionalColors({{ labels_vni|length }}), borderRadius: 6 },
            { type: 'line', label: "Montant total (DT)", data: {{ montants_vni|safe }}, borderColor: '#34495e', backgroundColor: '#34495e33', tension: 0.3, yAxisID: 'y1', fill: true, pointRadius: 6 }
        ]
    },
    options: {
        responsive: true,
        interaction: { mode: 'index', intersect: false },
        stacked: false,
        plugins: { legend: { position: 'top' }, tooltip: { mode: 'index', intersect: false } },
        scales: {
            y: { type: 'linear', display: true, position: 'left', title: { display: true, text: "Nombre d'utilisations" }, beginAtZero: true },
            y1: { type: 'linear', display: true, position: 'right', title: { display: true, text: "Montant total (DT)" }, beginAtZero: true, grid: { drawOnChartArea: false } }
        }
    }
});
</script>
{% endblock %}
*/