refactor: update clearance review colors and styles for consistency

- Changed status colors in ClearanceReviewSection from blue to green for approved and from accent to gray for pending.
- Updated Loader color in DocumentClearanceDetailPage to green.
- Adjusted Badge colors in DocumentClearanceDetailPage and DocumentClearanceListPage to reflect new color scheme.
- Introduced DirectionIcon component for better visual representation of trade direction with tooltips.
- Enhanced ResubmitDocuments component to improve document handling and display.
- Added validation error alerts in ChangesRequestedView and ResubmitBookingModal.
- Implemented ContractSignButton for bookings ready for signature.
- Created useBookingDocumentSetting hook to fetch document settings based on company nationality.

apps/edr-freight-web/backoffice/src/components/bookings/detail/ClearanceReviewSection.tsx

@@ -44,9 +44,9 @@ const STATUS_META: Record<
   Freight.DocumentReviewStatus,
   { label: string; color: string }
 > = {
-  APPROVED: { label: "Approved", color: "edr-blue" },
+  APPROVED: { label: "Approved", color: "edr-green" },
   QUERIED: { label: "Queried", color: "red" },
-  PENDING: { label: "Pending", color: "edr-accent" },
+  PENDING: { label: "Pending", color: "gray" },
 };
 
 /**
@@ -142,7 +142,7 @@ export function ClearanceReviewSection({
   if (isLoading || !clearance) {
     return (
       <Group justify="center" py="xl" gap={10}>
-        <Loader size="sm" color="edr-blue" />
+        <Loader size="sm" color="edr-green" />
         <Text c="dimmed">Loading clearance…</Text>
       </Group>
     );
@@ -165,15 +165,15 @@ export function ClearanceReviewSection({
             <Box>
               <Progress
                 value={stats.pct}
-                color="edr-blue"
+                color="edr-green"
                 radius="xl"
                 size="sm"
                 mb={6}
               />
               <Group gap="lg">
-                <StatPill color="edr-blue" label="Approved" value={stats.approved} />
+                <StatPill color="edr-green" label="Approved" value={stats.approved} />
                 <StatPill color="red" label="Queried" value={stats.queried} />
-                <StatPill color="edr-accent" label="Pending" value={stats.pending} />
+                <StatPill color="gray" label="Pending" value={stats.pending} />
               </Group>
             </Box>
           )}
@@ -219,13 +219,13 @@ export function ClearanceReviewSection({
           icon={Upload}
           title="Customs output documents"
           subtitle="Upload the cleared/customs paperwork to hand back to the customer."
-          accent="edr-accent"
+          accent="edr-green"
         >
           <Stack gap={10}>
             {glDocs.map((doc) => (
               <Group key={doc.fileKey} justify="space-between" wrap="nowrap">
                 <Group gap={8} wrap="nowrap" style={{ minWidth: 0 }}>
-                  <FileText size={16} color="var(--mantine-color-edr-accent-6)" />
+                  <FileText size={16} color="var(--mantine-color-edr-green-6)" />
                   <Text fz="13px" c="edr-text" truncate>
                     {doc.label}
                     {doc.required ? " *" : ""}
@@ -239,7 +239,7 @@ export function ClearanceReviewSection({
                         href={doc.file.url}
                         target="_blank"
                         rel="noreferrer"
-                        c="edr-accent"
+                        c="edr-green"
                         style={{ display: "flex" }}
                       >
                         <Download size={15} />
@@ -261,7 +261,7 @@ export function ClearanceReviewSection({
                         {...props}
                         size="compact-xs"
                         variant="light"
-                        color="edr-accent"
+                        color="edr-green"
                         leftSection={<Upload size={13} />}
                       >
                         {outputFiles[doc.fileKey] ? "Selected" : "Upload"}
@@ -275,7 +275,7 @@ export function ClearanceReviewSection({
           <Group justify="flex-end" mt="md">
             <Button
               variant="light"
-              color="edr-accent"
+              color="edr-green"
               radius="md"
               leftSection={<Upload size={15} />}
               disabled={Object.keys(outputFiles).length === 0}
@@ -301,7 +301,7 @@ export function ClearanceReviewSection({
           <Group gap={8} wrap="nowrap" style={{ minWidth: 0 }}>
             <ThemeIcon
               variant="light"
-              color={clearance.allApproved ? "edr-blue" : "gray"}
+              color={clearance.allApproved ? "edr-green" : "gray"}
               radius="md"
               size={28}
             >
@@ -314,7 +314,7 @@ export function ClearanceReviewSection({
             </Text>
           </Group>
           <Button
-            color="edr-blue"
+            color="edr-green"
             radius="md"
             leftSection={<CheckCircle2 size={16} />}
             disabled={!clearance.allApproved}
@@ -391,7 +391,7 @@ function DocReviewCard({
           status === "QUERIED"
             ? "var(--mantine-color-red-2)"
             : status === "APPROVED"
-              ? "var(--mantine-color-edr-blue-2)"
+              ? "var(--mantine-color-edr-green-2)"
               : "var(--mantine-color-edr-border-6)",
       }}
     >
@@ -399,7 +399,7 @@ function DocReviewCard({
         <Group gap={12} wrap="nowrap" style={{ minWidth: 0 }}>
           <ThemeIcon
             variant="light"
-            color={hasFile ? "edr-blue" : "gray"}
+            color={hasFile ? "edr-green" : "gray"}
             radius="md"
             size={40}
           >
@@ -471,7 +471,7 @@ function DocReviewCard({
               </Button>
               <Button
                 size="compact-sm"
-                color="edr-blue"
+                color="edr-green"
                 radius="md"
                 leftSection={<CheckCircle2 size={14} />}
                 disabled={busy}