fix(controls): move new control button next to excel button in toolbar

loko/controls/static/controls/controls_index.css

@@ -359,23 +359,24 @@
 
 .btn-new-control {
     background-color: #0f172a;
-    color: #ffffff;
+    color: #ffffff !important;
     border: 1px solid #0f172a;
     border-radius: 8px;
-    padding: 0.42rem 0.85rem;
+    padding: 0.32rem 0.75rem;
-    font-size: 0.84rem;
+    font-size: 0.82rem;
     font-weight: 600;
     display: inline-flex;
     align-items: center;
-    gap: 0.45rem;
+    gap: 0.4rem;
     transition: all 0.15s ease;
     text-decoration: none;
     box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
+    white-space: nowrap;
 }
 
 .btn-new-control:hover {
     background-color: #1e293b;
-    color: #ffffff;
+    color: #ffffff !important;
     border-color: #1e293b;
     transform: translateY(-1px);
     box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.12);
@@ -450,7 +451,9 @@
     padding: 0.25rem 0;
 }
 
-.filter-trigger-btn {
+.filter-trigger-btn,
+#columns-dropdown-btn,
+#export-excel-btn {
     border: 1px solid #cbd5e1;
     border-radius: 8px;
     font-size: 0.82rem;
@@ -462,8 +465,11 @@
     align-items: center;
     gap: 0.4rem;
     transition: all 0.15s ease;
+    text-decoration: none;
 }
-.filter-trigger-btn:hover {
+.filter-trigger-btn:hover,
+#columns-dropdown-btn:hover,
+#export-excel-btn:hover {
     background-color: #f8fafc;
     border-color: #94a3b8;
     color: #0f172a;
@@ -490,21 +496,6 @@
     justify-content: center;
 }
 
-#columns-dropdown-btn {
-    border: 1px solid #cbd5e1;
-    border-radius: 8px;
-    font-size: 0.82rem;
-    font-weight: 500;
-    padding: 0.32rem 0.75rem;
-    background-color: #ffffff;
-    color: #334155;
-}
-#columns-dropdown-btn:hover {
-    background-color: #f8fafc;
-    border-color: #94a3b8;
-    color: #0f172a;
-}
-
 .columns-dropdown-menu {
     border-radius: 12px;
     border: 1px solid #e2e8f0;

loko/controls/templates/controls/controls_index.html

@@ -229,7 +229,7 @@
         <!-- ─── Colonne Gauche : Tableau des contrôles ──────────── -->
         <div class="col-md-6" id="col-left" style="max-height: calc(100vh - 130px); display: flex; flex-direction: column;">
             
-            <!-- Entête d'onglet et bouton d'action -->
+            <!-- Entête d'onglet -->
             <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-2">
                 <ul class="nav nav-tabs controls-tabs" id="tablesTab" role="tablist">
                     <li class="nav-item" role="presentation">
@@ -240,13 +240,6 @@
                         </button>
                     </li>
                 </ul>
-
-                {% if is_add_control_allowed %}
-                <a href="{% url 'controls:controls_add' %}" class="btn-new-control" title="{% translate 'Nouveau contrôle' %}">
-                    <i class="bi bi-plus-circle me-1"></i>
-                    <span>{% translate "Nouveau contrôle" %}</span>
-                </a>
-                {% endif %}
             </div>
 
             <!-- Puces des filtres actifs -->
@@ -271,9 +264,9 @@
             </div>
             {% endif %}
 
-            <!-- Barre d'outils du tableau : Filtre, Colonnes, Export, Affichage par page -->
+            <!-- Barre d'outils du tableau : Filtre, Colonnes, Export, Nouveau contrôle, Affichage par page -->
             <div class="controls-toolbar d-flex justify-content-between align-items-center flex-wrap gap-2 mb-2">
-                <div class="d-flex align-items-center gap-2">
+                <div class="d-flex align-items-center flex-wrap gap-2">
                     <!-- Bouton Filtre avec badge -->
                     <button type="button" class="btn btn-light position-relative filter-trigger-btn" data-bs-toggle="modal" data-bs-target="#filterModal">
                         <i class="bi bi-funnel"></i> {% translate "Filtre" %}
@@ -306,6 +299,14 @@
                     <a id="export-excel-btn" href="{% url 'controls:controls_export_excel' %}" class="btn btn-light" title="{% translate 'Exporter en Excel' %}">
                         <i class="bi bi-file-earmark-spreadsheet me-1"></i><span class="d-none d-sm-inline">{% translate "Excel" %}</span>
                     </a>
+
+                    <!-- Bouton Nouveau contrôle -->
+                    {% if is_add_control_allowed %}
+                    <a href="{% url 'controls:controls_add' %}" class="btn btn-new-control" title="{% translate 'Nouveau contrôle' %}">
+                        <i class="bi bi-plus-lg me-1"></i>
+                        <span>{% translate "Nouveau contrôle" %}</span>
+                    </a>
+                    {% endif %}
                 </div>
 
                 <div class="d-flex align-items-center gap-2">