From fce27633a91f542f2f60e1c023ebdb4508617ae2 Mon Sep 17 00:00:00 2001
From: BOHA <boha@boha.cz>
Date: Sat, 6 Jun 2026 01:15:12 +0200
Subject: [PATCH] fix(ui): add admin-btn-danger variant so category delete
 confirm is styled

admin-btn-danger was referenced but never defined, so the 'Opravdu smazat' confirm rendered as a plain button. Define a solid danger button (uses --danger), matching the primary button's structure; the per-row delete trigger stays an outline via plan.css. (Includes the transparent-border button refinement so variants don't layout-shift.)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/admin/buttons.css | 25 ++++++++++++++++++++++++-
 src/admin/plan.css    |  7 ++++---
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/admin/buttons.css b/src/admin/buttons.css
index 70ab891..f7d1b68 100644
--- a/src/admin/buttons.css
+++ b/src/admin/buttons.css
@@ -8,7 +8,10 @@
   justify-content: center;
   gap: 0.5rem;
   padding: 8px 14px;
-  border: none;
+  /* 1px transparent border on ALL buttons so switching between primary
+     and secondary doesn't cause a 1px layout shift (the border is always
+     1px — only the colour changes). */
+  border: 1px solid transparent;
   border-radius: var(--border-radius-sm);
   font-size: 13px;
   font-weight: 550;
@@ -38,11 +41,13 @@
 
 .admin-btn-primary {
   background: var(--accent-color);
+  border-color: var(--accent-color);
   color: #fff;
 }
 
 .admin-btn-primary:hover:not(:disabled) {
   background: var(--accent-hover);
+  border-color: var(--accent-hover);
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(214, 48, 49, 0.3);
 }
@@ -75,6 +80,24 @@
   color: var(--text-primary);
 }
 
+.admin-btn-danger {
+  background: var(--danger);
+  border-color: var(--danger);
+  color: #fff;
+}
+
+.admin-btn-danger:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--danger) 88%, #000);
+  border-color: color-mix(in srgb, var(--danger) 88%, #000);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px color-mix(in srgb, var(--danger) 30%, transparent);
+}
+
+.admin-btn-danger .admin-spinner {
+  border-color: rgba(255, 255, 255, 0.3);
+  border-top-color: #fff;
+}
+
 .admin-btn-icon {
   display: inline-flex;
   align-items: center;
diff --git a/src/admin/plan.css b/src/admin/plan.css
index 2294816..65ed333 100644
--- a/src/admin/plan.css
+++ b/src/admin/plan.css
@@ -1015,9 +1015,10 @@
    button it turns into; keep it an outline until the user commits. */
 .plan-cat-delete.admin-btn-danger {
   background: transparent;
-  color: #dc2626;
-  border: 1px solid color-mix(in srgb, #dc2626 40%, transparent);
+  color: var(--danger);
+  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
 }
 .plan-cat-delete.admin-btn-danger:hover:not(:disabled) {
-  background: color-mix(in srgb, #dc2626 12%, transparent);
+  background: color-mix(in srgb, var(--danger) 12%, transparent);
+  color: var(--danger);
 }