Round 10: WYSIWYG Editor, Notification System, Calendar Events, Student UI, Drag-Reorder, Styling

src/app/globals.css

@@ -675,6 +675,125 @@
   .animate-chart-shimmer {
     animation: chart-shimmer 1.5s ease-out forwards;
   }
+
+  /* ─── Button Press Effect ────────────────────────────────────────── */
+  .btn-press {
+    transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
+  }
+  .btn-press:active {
+    transform: scale(0.97);
+  }
+  .btn-press:focus-visible {
+    outline: 2px solid oklch(0.55 0.17 155);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 4px oklch(0.55 0.17 155 / 0.15);
+  }
+  .dark .btn-press:focus-visible {
+    outline: 2px solid oklch(0.65 0.17 155);
+    box-shadow: 0 0 0 4px oklch(0.65 0.17 155 / 0.2);
+  }
+
+  /* ─── Smooth Theme Switching ─────────────────────────────────────── */
+  html {
+    transition: background-color 0.3s ease, color 0.3s ease;
+  }
+  html *,
+  html *::before,
+  html *::after {
+    transition-property: background-color, border-color, color, fill, stroke, box-shadow;
+    transition-duration: 0.2s;
+    transition-timing-function: ease-out;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    html *,
+    html *::before,
+    html *::after {
+      transition-duration: 0ms !important;
+    }
+  }
+
+  /* ─── Skeleton Loading Shimmer ───────────────────────────────────── */
+  .skeleton-shimmer {
+    position: relative;
+    overflow: hidden;
+    background: oklch(0.92 0.01 155 / 0.5);
+  }
+  .dark .skeleton-shimmer {
+    background: oklch(0.25 0.01 260 / 0.5);
+  }
+  .skeleton-shimmer::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      oklch(0.97 0.01 155 / 0.4) 50%,
+      transparent 100%
+    );
+    animation: skeleton-slide 1.5s ease-in-out infinite;
+  }
+  .dark .skeleton-shimmer::after {
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      oklch(0.35 0.01 260 / 0.3) 50%,
+      transparent 100%
+    );
+  }
+  @keyframes skeleton-slide {
+    from { transform: translateX(-100%); }
+    to { transform: translateX(100%); }
+  }
+
+  /* ─── Interactive Card Hover Micro-Effect ─────────────────────────── */
+  .card-interactive {
+    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
+  }
+  .card-interactive:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 24px -6px oklch(0.55 0.17 155 / 0.12);
+  }
+  .dark .card-interactive:hover {
+    box-shadow: 0 8px 24px -6px oklch(0.35 0.17 155 / 0.2);
+  }
+  .card-interactive:active {
+    transform: translateY(0px) scale(0.99);
+  }
+
+  /* ─── Danger Zone Styling ────────────────────────────────────────── */
+  .danger-zone {
+    border: 2px dashed oklch(0.55 0.22 25 / 0.4);
+    border-radius: 12px;
+    padding: 1.5rem;
+    background: oklch(0.55 0.22 25 / 0.03);
+  }
+  .dark .danger-zone {
+    border-color: oklch(0.55 0.22 25 / 0.3);
+    background: oklch(0.55 0.22 25 / 0.05);
+  }
+  .danger-zone:hover {
+    border-color: oklch(0.55 0.22 25 / 0.6);
+    background: oklch(0.55 0.22 25 / 0.06);
+  }
+
+  /* ─── Status Indicator Dot Pulse ─────────────────────────────────── */
+  @keyframes status-pulse {
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50% { opacity: 0.5; transform: scale(1.3); }
+  }
+  .status-dot-pulse {
+    animation: status-pulse 2s ease-in-out infinite;
+  }
+
+  /* ─── Count-Up Animation for Numbers ─────────────────────────────── */
+  .animate-count-up {
+    animation: count-up 0.8s ease-out;
+  }
+  @keyframes count-up {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
 }
 
 /* Print-specific styling — expands to all reports when printing */