From a5d20db74711f1cf95c9d5509e4314c602060755 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Thu, 10 Jul 2025 08:39:53 +0000
Subject: [PATCH] Improve visibility of input fields and section borders
 throughout the app

Enhance UI/UX by increasing border thicknesses and darkening colors of input fields and sections in index.css.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: dec54137-d5a2-4406-8ad4-5f2f9fb110bf
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/0715008c-7244-40f4-befc-26c014852236/9ba8b033-161d-4888-81d6-a484ee533451.jpg
---
 client/src/index.css | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/client/src/index.css b/client/src/index.css
index 22d22ea..7a2ca22 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -151,28 +151,28 @@ body {
   color: hsl(var(--identity-accent));
 }
 
-/* Inputs modernes */
+/* Inputs modernes avec bordures très visibles */
 .modern-input {
   width: 100%;
   padding: 12px 16px;
-  border: 1.5px solid hsl(var(--border));
+  border: 3px solid #374151 !important; /* Bordure grise foncée très visible */
   border-radius: 8px;
   background: hsl(var(--background));
   color: hsl(var(--foreground));
   font-size: 14px;
   font-weight: 400;
   transition: all 0.2s ease;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .modern-input:focus {
   outline: none;
-  border-color: hsl(var(--primary));
-  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);
+  border-color: #2563eb !important; /* Bleu vif pour le focus */
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
 }
 
 .modern-input:hover:not(:focus) {
-  border-color: hsl(var(--border));
+  border-color: #4b5563 !important; /* Bordure encore plus foncée au survol */
 }
 
 .modern-input::placeholder {
@@ -266,18 +266,19 @@ body {
 .search-input {
   width: 100%;
   padding: 12px 16px;
-  border: 1.5px solid hsl(var(--border));
+  border: 3px solid #374151 !important; /* Bordure très visible */
   border-radius: 8px;
   background: hsl(var(--background));
   color: hsl(var(--foreground));
   font-size: 14px;
   transition: all 0.2s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .search-input:focus {
   outline: none;
-  border-color: hsl(var(--primary));
-  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);
+  border-color: #2563eb !important; /* Bleu vif pour le focus */
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
 }
 
 /* Filtres élégants */
@@ -422,17 +423,17 @@ body {
   animation: slideIn 0.3s ease-out;
 }
 
-/* Sections avec cadres visibles */
+/* Sections avec cadres très visibles */
 .section-vendor,
 .section-product,
 .section-client,
 .section-identity {
-  border: 2px solid hsl(var(--border));
+  border: 4px solid #374151 !important; /* Bordure très épaisse et foncée */
   border-radius: 12px;
   padding: 20px;
   margin-bottom: 24px;
   background: white;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
 /* Responsive design */