From ebb642e572b68c735b9dddb1eb7d826f2a9b2ca0 Mon Sep 17 00:00:00 2001
From: mariomitte <mario_mitte@hotmail.com>
Date: Tue, 21 Jul 2026 14:56:09 +0200
Subject: [PATCH] fix: popravi vidljivost checkboxa u dark modu
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Dodaj prilagođeni stil checkboxa kako bi odabrano i neodabrano stanje bilo jasno vidljivo u dark temi, te primijeni novu klasu na checkboxe u modalima slanja emaila.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .../dashboard/WorkOrderDetailModal.jsx        |  7 ++++
 .../fleet/ServiceRecordDetailModal.jsx        |  1 +
 frontend/src/styles/global.css                | 42 +++++++++++++++++++
 3 files changed, 50 insertions(+)

diff --git a/frontend/src/components/dashboard/WorkOrderDetailModal.jsx b/frontend/src/components/dashboard/WorkOrderDetailModal.jsx
index a321bfa..9040ef8 100644
--- a/frontend/src/components/dashboard/WorkOrderDetailModal.jsx
+++ b/frontend/src/components/dashboard/WorkOrderDetailModal.jsx
@@ -701,6 +701,7 @@ export default function WorkOrderDetailModal({ open, workOrder, onClose, onSubmi
                         <label className="mt-3 flex items-center gap-2 text-sm text-text-main">
                         <input
                             type="checkbox"
+                            className="erp-checkbox"
                             checked={form.has_travel_order}
                             onChange={(event) => {
                                 const checked = event.currentTarget.checked;
@@ -911,6 +912,7 @@ export default function WorkOrderDetailModal({ open, workOrder, onClose, onSubmi
                             <label className="flex items-center gap-2 text-xs text-text-muted">
                                 <input
                                     type="checkbox"
+                                    className="erp-checkbox"
                                     checked={sendToAllTeamMembers}
                                     onChange={(event) => setSendToAllTeamMembers(event.currentTarget.checked)}
                                 />
@@ -957,6 +959,7 @@ export default function WorkOrderDetailModal({ open, workOrder, onClose, onSubmi
                                 <label className="flex items-center gap-2">
                                     <input
                                         type="checkbox"
+                                        className="erp-checkbox"
                                         checked={emailPayload.includeWorkOrderPdf}
                                         onChange={(event) => setEmailPayload({ ...emailPayload, includeWorkOrderPdf: event.currentTarget.checked })}
                                     />
@@ -965,6 +968,7 @@ export default function WorkOrderDetailModal({ open, workOrder, onClose, onSubmi
                                 <label className="flex items-center gap-2">
                                     <input
                                         type="checkbox"
+                                        className="erp-checkbox"
                                         checked={emailPayload.includeServiceRecordsPdf}
                                         onChange={(event) => setEmailPayload({ ...emailPayload, includeServiceRecordsPdf: event.currentTarget.checked })}
                                     />
@@ -973,6 +977,7 @@ export default function WorkOrderDetailModal({ open, workOrder, onClose, onSubmi
                                 <label className="flex items-center gap-2">
                                     <input
                                         type="checkbox"
+                                        className="erp-checkbox"
                                         checked={emailPayload.includeInvoicesPdf}
                                         onChange={(event) => setEmailPayload({ ...emailPayload, includeInvoicesPdf: event.currentTarget.checked })}
                                     />
@@ -981,6 +986,7 @@ export default function WorkOrderDetailModal({ open, workOrder, onClose, onSubmi
                                 <label className="flex items-center gap-2">
                                     <input
                                         type="checkbox"
+                                        className="erp-checkbox"
                                         checked={emailPayload.includeImages}
                                         onChange={(event) => setEmailPayload({ ...emailPayload, includeImages: event.currentTarget.checked })}
                                     />
@@ -989,6 +995,7 @@ export default function WorkOrderDetailModal({ open, workOrder, onClose, onSubmi
                                 <label className="flex items-center gap-2 sm:col-span-2">
                                     <input
                                         type="checkbox"
+                                        className="erp-checkbox"
                                         checked={emailPayload.includeMonthlyTasks}
                                         onChange={(event) => setEmailPayload({ ...emailPayload, includeMonthlyTasks: event.currentTarget.checked })}
                                     />
diff --git a/frontend/src/components/fleet/ServiceRecordDetailModal.jsx b/frontend/src/components/fleet/ServiceRecordDetailModal.jsx
index 2176219..0e72b95 100644
--- a/frontend/src/components/fleet/ServiceRecordDetailModal.jsx
+++ b/frontend/src/components/fleet/ServiceRecordDetailModal.jsx
@@ -472,6 +472,7 @@ export default function ServiceRecordDetailModal({
                             <label className="flex items-center gap-2 text-xs text-text-muted">
                                 <input
                                     type="checkbox"
+                                    className="erp-checkbox"
                                     checked={sendToAllTeamMembers}
                                     onChange={(event) => setSendToAllTeamMembers(event.currentTarget.checked)}
                                 />
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index 0ff3d55..29866b4 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -71,4 +71,46 @@ body.modal-open #main-content {
 @keyframes fade-in-page {
   from { opacity: 0; }
   to   { opacity: 1; }
+}
+
+/* Checkbox readability across light/dark themes */
+input[type="checkbox"].erp-checkbox {
+  appearance: none;
+  width: 1rem;
+  height: 1rem;
+  border: 1px solid var(--app-border-hairline);
+  border-radius: 0.25rem;
+  background: var(--app-canvas-base);
+  display: inline-grid;
+  place-content: center;
+  cursor: pointer;
+}
+
+input[type="checkbox"].erp-checkbox::before {
+  content: "";
+  width: 0.55rem;
+  height: 0.55rem;
+  transform: scale(0);
+  transition: transform 120ms ease-in-out;
+  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
+  box-shadow: inset 1em 1em #ffffff;
+}
+
+input[type="checkbox"].erp-checkbox:checked {
+  background: var(--app-brand-primary);
+  border-color: var(--app-brand-primary);
+}
+
+input[type="checkbox"].erp-checkbox:checked::before {
+  transform: scale(1);
+}
+
+input[type="checkbox"].erp-checkbox:disabled {
+  opacity: 0.65;
+  cursor: not-allowed;
+}
+
+input[type="checkbox"].erp-checkbox:focus-visible {
+  outline: 2px solid var(--app-brand-primary);
+  outline-offset: 2px;
 }
\ No newline at end of file