fix(dashboard): fix pill counts and Bootstrap UI cleanup

- IMPORTED pill now includes ALREADY_IMPORTED orders in count
- UNINVOICED filter includes ALREADY_IMPORTED orders
- Pill counts (Toate/Importate/Omise/Erori/Nefacturate) always reflect
  full period+search, independent of active status filter
- Nefacturate count computed from SQLite cache across full period,
  not just current page
- Bootstrap UI: design tokens, soft badge pills, consistent font sizes,
  purge inline styles from templates, move badge-pct to style.css

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

api/app/templates/dashboard.html

@@ -10,28 +10,28 @@
   <!-- TOP ROW: Status + Controls -->
   <div class="sync-card-controls">
     <span id="syncStatusDot" class="sync-status-dot idle"></span>
-    <span id="syncStatusText" style="font-size:0.8125rem;color:#374151;">Inactiv</span>
-    <div style="display:flex;align-items:center;gap:0.5rem;margin-left:auto;">
-      <label style="display:flex;align-items:center;gap:0.4rem;font-size:0.8125rem;color:#6b7280;">
+    <span id="syncStatusText" class="text-secondary">Inactiv</span>
+    <div class="d-flex align-items-center gap-2 ms-auto">
+      <label class="d-flex align-items-center gap-1 text-muted">
         Auto:
-        <input type="checkbox" id="schedulerToggle" style="cursor:pointer;" onchange="toggleScheduler()">
+        <input type="checkbox" id="schedulerToggle" class="cursor-pointer" onchange="toggleScheduler()">
       </label>
       <select id="schedulerInterval" class="select-compact" onchange="updateSchedulerInterval()">
         <option value="5">5 min</option>
         <option value="10" selected>10 min</option>
         <option value="30">30 min</option>
       </select>
-      <button id="syncStartBtn" class="btn btn-primary btn-compact" onclick="startSync()">&#9654; Start Sync</button>
+      <button id="syncStartBtn" class="btn btn-sm btn-primary" onclick="startSync()">&#9654; Start Sync</button>
     </div>
   </div>
   <div class="sync-card-divider"></div>
   <!-- BOTTOM ROW: Last sync info (clickable → jurnal) -->
   <div class="sync-card-info" id="lastSyncRow" role="button" tabindex="0" title="Ver jurnal sync">
-    <span id="lastSyncDate" style="font-weight:500;">&#8212;</span>
-    <span id="lastSyncDuration" style="color:#9ca3af;">&#8212;</span>
+    <span id="lastSyncDate" class="fw-medium">&#8212;</span>
+    <span id="lastSyncDuration" class="text-muted">&#8212;</span>
     <span id="lastSyncCounts">&#8212;</span>
     <span id="lastSyncStatus">&#8212;</span>
-    <span style="margin-left:auto;font-size:0.75rem;color:#9ca3af;">&#8599; jurnal</span>
+    <span class="ms-auto small text-muted">&#8599; jurnal</span>
   </div>
   <!-- LIVE PROGRESS (shown only when sync is running) -->
   <div class="sync-card-progress" id="syncProgressArea" style="display:none;">
@@ -64,7 +64,7 @@
           </div>
           <!-- Status pills -->
           <button class="filter-pill active" data-status="all">Toate <span class="filter-count" id="cntAll">0</span></button>
-          <button class="filter-pill" data-status="IMPORTED">Imp. <span class="filter-count" id="cntImp">0</span></button>
+          <button class="filter-pill" data-status="IMPORTED">Importat <span class="filter-count" id="cntImp">0</span></button>
           <button class="filter-pill" data-status="SKIPPED">Omise <span class="filter-count" id="cntSkip">0</span></button>
           <button class="filter-pill" data-status="ERROR">Erori <span class="filter-count" id="cntErr">0</span></button>
           <button class="filter-pill" data-status="UNINVOICED">Nefact. <span class="filter-count" id="cntNef">0</span></button>
@@ -73,11 +73,11 @@
         </div>
     </div>
     <!-- Pagination top bar -->
-    <div class="card-body py-1 px-3 border-bottom d-flex justify-content-between align-items-center" style="gap:0.5rem;">
+    <div class="card-body py-1 px-3 border-bottom d-flex justify-content-between align-items-center gap-2">
         <small class="text-muted" id="dashPageInfoTop"></small>
-        <div style="display:flex;align-items:center;gap:0.5rem;">
-            <label style="font-size:0.8125rem;color:#6b7280;white-space:nowrap;">Per pagina:
-                <select id="perPageSelect" class="select-compact" style="margin-left:0.25rem;" onchange="dashChangePerPage(this.value)">
+        <div class="d-flex align-items-center gap-2">
+            <label class="text-muted text-nowrap">Per pagina:
+                <select id="perPageSelect" class="select-compact ms-1" onchange="dashChangePerPage(this.value)">
                     <option value="25">25</option>
                     <option value="50" selected>50</option>
                     <option value="100">100</option>

api/app/templates/mappings.html

@@ -3,11 +3,6 @@
 {% block nav_mappings %}active{% endblock %}
 
 {% block content %}
-<style>
-.badge-pct { font-size: 0.7rem; padding: 0.1rem 0.35rem; border-radius: 4px; font-weight: 600; }
-.badge-pct.complete { background: #d1fae5; color: #065f46; }
-.badge-pct.incomplete { background: #fef3c7; color: #92400e; }
-</style>
 <div class="d-flex justify-content-between align-items-center mb-4">
     <h4 class="mb-0">Mapari SKU</h4>
     <div>

api/app/templates/missing_skus.html

@@ -24,8 +24,8 @@
         Toate <span class="filter-count" id="cntAllSkus">0</span>
     </button>
     <input type="search" id="skuSearch" placeholder="Cauta SKU / produs..." class="search-input">
-    <button id="rescanBtn" class="btn btn-secondary btn-compact" style="margin-left:0.5rem;">&#8635; Re-scan</button>
-    <span id="rescanProgress" style="display:none;align-items:center;gap:0.4rem;font-size:0.8125rem;color:#1d4ed8;">
+    <button id="rescanBtn" class="btn btn-sm btn-secondary ms-2">&#8635; Re-scan</button>
+    <span id="rescanProgress" class="align-items-center gap-2 text-primary" style="display:none;">
         <span class="sync-live-dot"></span>
         <span id="rescanProgressText">Scanare...</span>
     </span>
@@ -199,7 +199,7 @@ function renderMissingSkusTable(skus, data) {
     tbody.innerHTML = skus.map(s => {
         const statusBadge = s.resolved
             ? '<span class="badge bg-success">Rezolvat</span>'
-            : '<span class="badge bg-warning text-dark">Nerezolvat</span>';
+            : '<span class="badge bg-warning">Nerezolvat</span>';
 
         let firstCustomer = '-';
         try {