first commit

css/dashboard.css

@@ -0,0 +1,108 @@
+/* ============================================
+   DASHBOARD - STYLES SPÉCIFIQUES
+   ============================================ */
+
+/* Reservation form */
+.reservation-form-container {
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.reservation-form {
+    background: var(--bg-card);
+    border-radius: var(--border-radius);
+    padding: 32px;
+    border: 1px solid var(--border);
+}
+
+.price-preview {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: var(--bg-dark);
+    padding: 16px 20px;
+    border-radius: var(--border-radius-sm);
+    margin: 20px 0;
+}
+
+.price-preview span:first-child {
+    color: var(--text-secondary);
+}
+
+.price-amount {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--primary-light);
+}
+
+/* Chart container */
+.chart-container {
+    position: relative;
+    height: 300px;
+    width: 100%;
+}
+
+/* Admin table actions */
+.table-actions {
+    display: flex;
+    gap: 8px;
+}
+
+.btn-icon-only {
+    padding: 6px 10px;
+    font-size: 1rem;
+}
+
+/* Status badges */
+.badge {
+    display: inline-block;
+    padding: 4px 12px;
+    border-radius: 20px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+}
+
+.badge-admin {
+    background: rgba(99, 102, 241, 0.2);
+    color: var(--primary-light);
+}
+
+.badge-client {
+    background: rgba(6, 182, 212, 0.2);
+    color: var(--info);
+}
+
+/* Animation pour les mises à jour */
+@keyframes pulse-update {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+}
+
+.stat-card.updating {
+    animation: pulse-update 0.3s ease;
+}
+
+/* Loading state */
+.loading {
+    position: relative;
+    pointer-events: none;
+}
+
+.loading::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 20px;
+    height: 20px;
+    margin: -10px 0 0 -10px;
+    border: 2px solid var(--border);
+    border-top-color: var(--primary);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}