committing everything before round 2

web/src/styles/main.css

@@ -1,3 +1,59 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer components {
+  /* ── Card ─────────────────────────────────────────────────────────── */
+  .card {
+    @apply relative flex flex-col min-w-0 break-words bg-white shadow-soft-xl rounded-2xl bg-clip-border;
+  }
+  .card-header {
+    /* border-black/12.5 */
+    @apply  rounded-t-2xl border-b-0 border-solid p-6 pb-0;
+  }
+  .card-body {
+    @apply flex-auto p-6 pt-4;
+  }
+
+  /* ── Buttons ──────────────────────────────────────────────────────── */
+  /* Use display (inline-block / inline-flex) and sizing (px-* py-* w-*) as utilities alongside these. */
+  .btn-primary {
+    @apply font-bold text-center text-white uppercase align-middle transition-all ease-in border-0 rounded-lg select-none shadow-soft-md bg-150 bg-x-25 leading-pro text-xs bg-gradient-to-tl from-purple-700 to-pink-500 hover:shadow-soft-2xl hover:scale-102 disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:scale-100;
+  }
+  .btn-white {
+    @apply font-bold text-center text-slate-700 uppercase align-middle transition-all ease-in bg-white border border-solid border-gray-300 rounded-lg shadow-soft-sm leading-pro text-xs hover:shadow-soft-md hover:scale-102;
+  }
+  .btn-outlined {
+    @apply font-bold text-center uppercase align-middle transition-all bg-transparent border border-solid rounded-lg shadow-none cursor-pointer leading-pro text-xs border-fuchsia-500 ease-soft-in text-fuchsia-500 hover:border-fuchsia-500 active:bg-fuchsia-500 hover:bg-transparent hover:shadow-none;
+  }
+
+  /* ── Forms ────────────────────────────────────────────────────────── */
+  .form-label {
+    @apply mb-2 text-xs font-semibold text-slate-700 uppercase block;
+  }
+  .form-input {
+    @apply text-sm focus:shadow-soft-primary-outline ease-soft block w-full rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding py-2 px-3 text-gray-700 transition-all placeholder:text-gray-500 focus:border-fuchsia-300 focus:outline-none focus:transition-shadow;
+  }
+
+  /* ── Sidebar nav ──────────────────────────────────────────────────── */
+  /* .nav-item-active and .nav-item-inactive are modifiers applied alongside .nav-item */
+  .nav-item {
+    @apply py-2.7 text-sm ease-nav-brand my-0 mx-4 flex items-center whitespace-nowrap rounded-lg px-4 font-semibold transition-colors;
+  }
+  .nav-item-active {
+    @apply shadow-soft-xl bg-white text-slate-700;
+  }
+  .nav-item-inactive {
+    @apply text-slate-500 hover:text-slate-700;
+  }
+  /* .nav-icon-active and .nav-icon-inactive are modifiers applied alongside .nav-icon */
+  .nav-icon {
+    @apply mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-center stroke-0 text-center xl:p-2.5;
+  }
+  .nav-icon-active {
+    @apply bg-gradient-to-tl from-purple-700 to-pink-500 shadow-soft-2xl;
+  }
+  .nav-icon-inactive {
+    @apply bg-white shadow-soft-sm;
+  }
+}