Add 2 files

index.html

@@ -10,7 +10,7 @@
     <style>
         body {
             background-color: #1a202c;
-            color: #e2e8f0;
+            color: #ffffff;
             min-height: 100vh;
         }
         
@@ -23,7 +23,7 @@
         
         .status-em-elaboracao {
             background-color: #4b5563;
-            color: #d1d5db;
+            color: #ffffff;
         }
         
         .status-aguardando-aprovacao {
@@ -58,6 +58,9 @@
         
         .offcanvas {
             transition: transform 0.3s ease-in-out;
+            background-color: #1a202c !important;
+            color: #ffffff !important;
+            width: 50% !important;
         }
         
         .offcanvas-end {
@@ -84,7 +87,8 @@
         }
         
         .table {
-            color: #e2e8f0;
+            color: #ffffff;
+            background-color: transparent;
         }
         
         .table thead th {
@@ -94,32 +98,37 @@
             font-weight: 500;
             text-transform: uppercase;
             letter-spacing: 0.05em;
+            color: #ffffff;
         }
         
         .table tbody tr {
-            background-color: #2d3748;
+            background-color: transparent;
+            color: #ffffff;
         }
         
         .table tbody tr:hover {
-            background-color: rgba(45, 55, 72, 0.7);
+            background-color: rgba(45, 55, 72, 0.3);
         }
         
         .table tbody tr td {
             vertical-align: middle;
             white-space: nowrap;
             border-top: 1px solid #4a5568;
+            color: #ffffff;
         }
         
         .table tfoot td {
             background-color: #2d3748;
             font-weight: 500;
             border-top: 1px solid #4a5568;
+            color: #ffffff;
         }
         
         .btn-action {
             padding: 0.25rem;
             background: transparent;
             border: none;
+            color: #ffffff;
         }
         
         .btn-action:hover {
@@ -189,18 +198,19 @@
         .card {
             background-color: #2d3748;
             border: 1px solid #4a5568;
+            color: #ffffff;
         }
         
         .form-control, .form-select {
             background-color: #2d3748;
             border: 1px solid #4a5568;
-            color: #e2e8f0;
+            color: #ffffff;
         }
         
         .form-control:focus, .form-select:focus {
             background-color: #2d3748;
             border-color: #4299e1;
-            color: #e2e8f0;
+            color: #ffffff;
             box-shadow: 0 0 0 0.25rem rgba(66, 153, 225, 0.25);
         }
         
@@ -227,6 +237,7 @@
         
         .history-content p {
             margin-bottom: 0;
+            color: #ffffff;
         }
         
         .history-date {
@@ -236,12 +247,13 @@
         
         .modal-content {
             background-color: #2d3748;
-            color: #e2e8f0;
+            color: #ffffff;
             border: 1px solid #4a5568;
         }
         
         .modal-header {
             border-bottom: 1px solid #4a5568;
+            color: #ffffff;
         }
         
         .modal-footer {
@@ -260,10 +272,60 @@
             display: block;
         }
         
+        .form-label {
+            color: #ffffff;
+        }
+        
+        .text-muted {
+            color: #a0aec0 !important;
+        }
+        
+        .text-primary {
+            color: #3b82f6 !important;
+        }
+        
+        .text-warning {
+            color: #f59e0b !important;
+        }
+        
+        .text-success {
+            color: #10b981 !important;
+        }
+        
+        .text-danger {
+            color: #ef4444 !important;
+        }
+        
+        .text-purple {
+            color: #8b5cf6 !important;
+        }
+        
+        .offcanvas-title {
+            color: #3b82f6 !important;
+        }
+        
+        .card-title {
+            color: #3b82f6 !important;
+        }
+        
+        .btn-link {
+            color: #3b82f6 !important;
+        }
+        
         @media (max-width: 768px) {
             .offcanvas {
                 width: 100% !important;
             }
+            
+            .header-buttons {
+                width: 100% !important;
+            }
+        }
+        
+        @media (max-width: 992px) {
+            .offcanvas {
+                width: 75% !important;
+            }
         }
     </style>
 </head>
@@ -272,7 +334,7 @@
         <!-- Header -->
         <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-5 gap-3">
             <h1 class="text-primary mb-0">Pedidos de Compra</h1>
-            <div class="d-flex flex-column flex-sm-row gap-3 w-100 w-md-auto">
+            <div class="d-flex flex-column flex-sm-row gap-3 header-buttons w-md-auto justify-content-end">
                 <button id="newOrderBtn" class="btn btn-blue d-flex align-items-center gap-2">
                     <i class="fas fa-plus"></i> Novo Pedido de Compra
                 </button>
@@ -780,7 +842,7 @@
     <!-- New Order Offcanvas -->
     <div id="backdrop" class="backdrop fixed-top start-0 w-100 h-100 bg-black bg-opacity-50 z-40"></div>
     
-    <div id="newOrderOffcanvas" class="offcanvas offcanvas-end offcanvas-end" tabindex="-1">
+    <div id="newOrderOffcanvas" class="offcanvas offcanvas-end" tabindex="-1">
         <div class="offcanvas-header">
             <h2 class="offcanvas-title text-primary">Novo Pedido de Compra</h2>
             <button type="button" class="btn-close text-reset" onclick="closeOffcanvas()"></button>

prompts.txt

@@ -1 +1,3 @@
-- Ao invés de usar `tailwindcss`, por favor, utilize o `Bootstrap 5.3.2`.
+- Ao invés de usar `tailwindcss`, por favor, utilize o `Bootstrap 5.3.2`.
+Está quase perfeito, mas em muitas telas a fonte ficou preta quando deveria ficar branca!
+- O background das tabelas tem de ser transparentes ou da cor do fundo do filtro, pois a fonte "branca" precisa aparecer. O botão `+ Novo Pedido de Compra` tem de estar alinhado à direita. O OffCanvas chamado para "Novo Pedido de Compra" precisa ocupar 1/3 ou 1/2 da largura da tela de conteúdo. E o tema tem de ser dark, pois tem muita cor branca no background do offcanvas.