src/app/admin/admin-users-tab.component.scss

@@ -1,23 +1,141 @@
 @use '../../styles/variables' as *;
 @use '../../styles/mixins' as *;
 
-.add-admin-section {
-  margin-top: 2rem;
-  padding: 1.5rem;
-  border: 1px solid var(--color-light, #e0e0e0);
-  border-radius: 8px;
+// ── Alert banners ──────────────────────────────────────────────
 
-  h3 {
-    margin: 0 0 1rem 0;
-  }
+.form-error {
+  background: rgba($danger-red, 0.1);
+  color: $danger-red;
+  padding: $spacing-sm $spacing-md;
+  border-radius: $radius-md;
+  font-size: 0.875rem;
+  margin-bottom: $spacing-md;
+  text-align: center;
 }
 
+.form-success {
+  background: rgba($success-green, 0.1);
+  color: $success-green;
+  padding: $spacing-sm $spacing-md;
+  border-radius: $radius-md;
+  font-size: 0.875rem;
+  margin-bottom: $spacing-md;
+  text-align: center;
+}
+
+// ── Admin users list ───────────────────────────────────────────
+
 .admin-users-section {
-  margin-bottom: 1rem;
+  margin-bottom: $spacing-lg;
 }
 
 .loading-text {
   text-align: center;
-  padding: 2rem;
-  color: var(--color-medium, #888);
+  padding: $spacing-xl;
+  color: $neutral-medium;
+}
+
+// ── Add admin form ─────────────────────────────────────────────
+
+.add-admin-section {
+  margin-top: $spacing-lg;
+  padding: $spacing-lg;
+  border: 1px solid $neutral-light;
+  border-radius: $radius-lg;
+  background: $neutral-white;
+
+  h3 {
+    font-family: $font-heading;
+    color: $primary-blue;
+    font-size: 1.1rem;
+    margin: 0 0 $spacing-md 0;
+    padding-bottom: $spacing-xs;
+    border-bottom: 1px solid $neutral-light;
+  }
+}
+
+.admin-form {
+  // ── Layout ──────────────────────────────────────────
+
+  .form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: $spacing-md;
+  }
+
+  // ── Field group ─────────────────────────────────────
+
+  .form-group {
+    margin-bottom: $spacing-md;
+
+    label {
+      display: block;
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: $neutral-dark;
+      margin-bottom: $spacing-xs;
+    }
+
+    input {
+      width: 100%;
+      padding: $spacing-sm $spacing-md;
+      border: 1px solid $neutral-light;
+      border-radius: $radius-md;
+      font-size: 0.95rem;
+      font-family: $font-primary;
+      color: $neutral-dark;
+      background: $neutral-white;
+      transition: border-color $transition-fast, box-shadow $transition-fast;
+      box-sizing: border-box;
+
+      &::placeholder {
+        color: $neutral-medium;
+        opacity: 1;
+      }
+
+      &:focus {
+        outline: none;
+        border-color: $primary-blue;
+        box-shadow: 0 0 0 3px rgba($primary-blue, 0.15);
+      }
+
+      &.is-invalid {
+        border-color: $danger-red;
+        box-shadow: 0 0 0 3px rgba($danger-red, 0.15);
+      }
+    }
+  }
+
+  // ── Actions bar ─────────────────────────────────────
+
+  .form-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: $spacing-sm;
+    margin-top: $spacing-md;
+  }
+
+  .btn-save {
+    @include button-style($primary-blue, $neutral-white, $primary-blue-light);
+
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  }
+}
+
+// ── Responsive ─────────────────────────────────────────────────
+
+@include responsive(md) {
+  .admin-form {
+    .form-row {
+      grid-template-columns: 1fr;
+      gap: 0;
+    }
+  }
+
+  .add-admin-section {
+    padding: $spacing-md;
+  }
 }